photoshop_De_tegaki

photoshopでできる手書き風のデザインする色々な方法

  • このエントリーをはてなブックマークに追加
手書き風サイトって見ているとなんだか落ち着きますよね。今回は手作り風のサイト作りたいよ!と思った時に読んでいただけるとちょっとだけ役に立つtipsです。

前回はillustratorで手書き風、手作り風のデザインする色々な方法を書きましたが、今回はPhotoshopのみで作る手書き風の色々な方法(チュートリアル)です。

illustrator使えばいいじゃん!と言われたらお終いですが、、、、ということで続きより。

 

スケッチ風

Photshop tegaki top

01.Photoshopの新規ファイルを作る。(500p x 500pxサイズで大丈夫です。)

新規で作ったら、黒(#fff)で塗りつぶします。ショートカットはMacの場合command+deleteで塗りつぶすことができます。

02.ノイズフィルタを加える

[フィルター]→[ノイズ]→[ノイズを加える]から量:400%、分布方法:ガウス分布、グレースケールノイズにチェック!

03.ぼかし(移動)を加える

[フィルター]→[ぼかし]→[ぼかし(移動)…]、設定は角度45°、距離40~60ぐらいです。(ここは手書き感によって調節してください。)

Photoshop noise

これで手書き風テキスチャの完成です!ここまでの作業を省きたい方は上記の画像を使ってもらっても大丈夫です。

04.上記のテキスチャを使えば、アイコンでも、文字でも手書き風な感じにサクっとできます。

Photoshop noise setting

手書き風にしたいものに、レイヤースタイルからパターンオーバーレイを先ほどの作ったテキスチャを使うと!できます。色を付けたい場合はカラーオーバーレイから塗りたい色にして、描写モードをスクリーンにすれば色を付けることもできますよー!

 

 

ブラシで書く手書き風

Photshop blu tegaki

今回はブラシで作る手書き風です。上のスケッチ風より、ブラシで作るので色々な表現ができちゃうんじゃないか!?っていうところがポイントですね!不透明度を調節できるので、色の強弱とかも付けることができるのでいいんじゃないでしょうかー!

01.文字を打つ!

Photoshop blu 01

02.[01]で打った文字レイヤーの上でcommandを押しながら選択。

文字をアウトラインが選択できます。文字レイヤーは消しときます。

Photoshop blu 02

03.新規レイヤーを作り、ブラシでガガーッと書いていきます。

Photoshop blur 03

先ほど選択した文字の範囲でしたらブラシは塗られないので文字が浮かび上がってきます。ブラシの種類によってクレヨン風やスタンプっぽい感じにできたりしちゃいます。ちなみにレイヤースタイルからカラーオーバーレイを変えれば好きな色にできちゃいます。

こちらもまた文字だけではなく、ラインだろう線とアイコンだろうと色々試せるので便利です!

 

 

レイヤースタイルでサクッと簡単に

Photshop tegaki font

レイヤースタイルでサクッと簡単にできる方法です。クレヨンっぽい感じになりますね!

01.レイヤースタイルの光彩(外側)を設定する

Phostop tegaki font 01

カラーは、オブジェクトのカラーを使ってください。上記の設定で大体おっけーですが、お好みでノイズを調節してみたり、サイズを調節してみたいしてください。サイズは大きくしすぎるのはおすすめしましせん。

まとめ

今回はphotoshopで手書き風をテキスチャを使ってみたり、ブラシを使ってみたりと色々な方法を試してみました。まだまだ方法はたくさんあるかもしれませんが、手書き風デザインを作るときがありましたらちょっとでも参考に嬉しいです。

他にもこんな方法があるんだぜー!ってあったら教えて下さい!

おすすめ記事

  1. 新卒webデザイナーで採用してもらえるような紙ポートフォリオの作り方
  2. 色々なサイトを参考にボタンを作ってみました【psd付き】
  3. 誰でもできる!Illustratorでちょこっとアメコミ風のイラストを書いてみる!
  4. バナー制作時に困ったらいつもお世話になっている素材サイト
  5. Illustratorの遠近グリッドツールでビルを作るチュートリアル

関連記事

PAGE TOP