一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、それぞれにストーリーがあります。
花のやはそれをサポートしながら、お客様の成長を隣で見ていたいのです。

一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、
それぞれにストーリーがあります。
花のやはそれをサポートしながら、
お客様の成長を隣で見ていたいのです。

ブログBLOG

  1. 名古屋のホームページ制作会社 花のや
  2. 花のやブログ
  3. 手書き風のデザインを作る方法
2015/10/05デザインWebデザイン

手書き風のデザインを作る方法

こんにちは、デザイナー西尾です。
今日はphotoshopで簡単に手書き風のデザインを作る方法を紹介します。
まずは手書きっぽいデザインのポイントをおさえましょう。

手書き風のデザイン表現のPOINT

・境界線がぎざぎざやドット(直線的でない)
・塗りや線がかすれている or でこぼこ(ざらつている)
・書体はフリーハンドっぽいもの

フィルタを使ったりテクスチャや素材を使ってももちろん作れますが
今回はレイヤースタイルのみでそれっぽく作る方法を紹介したいと思います。

手書き風のボタンを作る

まずは長方形ツールでボタンの大きさのシェイプを作ります。
01

次にレイヤースタイルの設定をします。
02
①ドロップシャドウ
境界線がギザギザになります。
POINT:ノイズ・ディザ合成(この2つのどちらかを設定すればいい感じにかすれた感じになります)

03
②光彩(内側)
塗り部分に指定したカラーでノイズが加わります。
(元のシェイプの色よりも少し明るく or 暗い色にしておく)
09
これをすれば特にパターンやテクスチャを使わなくてもざらつき感が出せます。

04
次にシェイプを複製します。
レイヤースタイルは削除して「塗り:0」に設定
左右上下2pxずつ小さくしておきます。

05
③境界線をつける
POINT:境界線をストライプのパターンにすることでステッチっぽい表現になります。

07
ボタンに必要な要素を入れて完成です。
手書きっぽいフォントやイラストを選ぶのもポイントですね。
今回使ったイラストは「ハンコでアソブ」さんから
リンク、使用報告、クレジット記載不要/商用利用可なのでオススメです!

08
応用すればこんな感じになります!
スタイルを少し調整するだけでも表現が変わってくるので皆さん試してみてください。

この記事を書いた人:nishio

花のやデザイナーの西尾です。 三重県出身。名古屋に来て気づけば早10年。 日々レッドブルを頼りにデザインに奮闘中です。 よろしくお願いします。

LINEで送る
Pocket

人気記事ランキング

お問い合わせ

Webサイト制作・その他お仕事のご依頼、
ご相談についてお気軽にお問い合わせください。

  • ホームページ制作で”補助金・助成金”使えます!
  • WEBに関する無料個別相談会
株式会社 花のや
〒460-0008
愛知県名古屋市中区栄2-14-5 山本屋本店栄ビル7階

花のやについて

お仕事のご依頼やご相談は、下記の電話番号
または、メールフォームよりお問い合わせください。
TEL.052-211-9898 / FAX.052-211-9899

お問い合わせ