【Photoshop】チョーク風テキストエフェクトの作り方

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop（フォトショップ）で黒板にチョークで描いたようなタッチが再現できるテキストエフェクトの作り方をフォトショ初心者の方に詳しく解説します。
非常にリアルなチョーク風のタッチが再現できるエフェクトテクニックです。

Webサイトやバナーデザイン、チラシなどの印刷物など、学校などを題材にしたコンテンツ作成に最適なエフェクトですよ！

この記事の目次

何が作れるの？

上記の様に黒板にチョークで描いたようなタッチが再現できるエフェクトがゼロから自作できます。
Photoshopの様々な機能を網羅的に学習できるコンテンツでもありますよ。

チョーク風テキストエフェクトの作り方

それではチョークテキストエフェクトの作り方を解説します。
Photoshop初心者の方でも順に進めていけば作成できる内容ですよ。

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はAdobe公式サイトから導入できます。
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

チョークエフェクトの下準備

STEP.1

新規ドキュメントを作成

Photoshopを開き、新規ドキュメントを作成します。

幅：2000px
高さ：1329px
解像度：300px/inch
カラーモード：RGB

設定後は右下の [ 作成 ] をクリック。

STEP.2

背景を作成

背景素材を準備します。サンプルは [ Chalk black board blackboard chalkboard background ] をダウンロードし、ドキュメント内に配置しました。

素材を活用しない場合は背景全体を黒で塗りつぶしても構いませんよ。（よく使う塗りつぶしの方法4選はコチラの記事で解説しています。）

STEP.3

文字を入力

[ 文字ツール ] でお好きな文字を入力します。
サンプルは [ Bahnschrift ] を使用しました。

太さや字幅が自在にカスタマイズできる超便利なバリアブルフォントですよ。（バリアブルフォントについてはコチラの記事で詳しく解説しています。）

文字レイヤーは右クリックメニューから [ スマートオブジェクト ] に変換します。更にレイヤーパネルの [ 塗り ] を0%に変更しておきましょう。

すると文字が見えなくなりますが問題ありません。後のレイヤースタイルで付与した質感のみ表示させるのに必要な設定です。

チョークエフェクトの質感付与

レイヤースタイルを使ってチョークの質感を付与していきます。
パラメータ調整だけなので簡単に再現できる内容ですよ。

STEP.1

レイヤー効果を追加①

レイヤーパネル下部の [ fx ] → [ ドロップシャドウ ] を追加します。
※レイヤースタイルの基本操作はコチラの記事で解説しています。

描画モード：通常　カラー：#ffffff
不透明度：40%　角度0°
距離：0px　スプレッド：35%　サイズ：10px
ノイズ：100%

設定後は [ OK ] をクリック。

すると左図の様にザラっとした質感の線が表現できます。

STEP.2

レイヤー効果を追加②

同様の手順でレイヤースタイルの [ 光彩(外側) ] を追加します。

描画モード：ディザ合成　不透明度：40%
ノイズ：0%　カラー：#ffffff
エレメント：さらにソフトに
スプレッド：0%　サイズ：10px
範囲：57%　適用度：0%

すると文字周囲のザラっと感に強弱が生まれましたね。

STEP.3

レイヤー効果を追加③

同様の手順でレイヤースタイルの [ 光彩(内側) ] を追加します。

描画モード：ディザ合成　不透明度：50%
ノイズ：30%　カラー：#ffffff
エレメント：さらにソフトに　ソース：エッジ
チョーク：0%　サイズ：10px
範囲：50%　適用度：0%

文字の内側にチョークのザラっとした質感が付与されました。

STEP.4

レイヤー効果を追加④

同様の手順でレイヤースタイルの [ シャドウ(内側) ] を追加します。

描画モード：通常　カラー：#ffffff
不透明度：60%　角度：0°
距離：0px　チョーク：75%
サイズ：8px
ノイズ：100%

チョーク文字の中身が少し濃くなりました。

STEP.5

レイヤー効果を追加⑤

STEP.4で作成したシャドウ(内側)をレイヤースタイルの画面左側にある [ + ] をクリックしてコピーします。

描画モード：通常　カラー：#ffffff
不透明度：80%　角度：0°
距離：0px　チョーク：60%
サイズ：10px
ノイズ：100%

レイヤースタイルを使ったチョーク文字の質感付与が一旦完了です。

STEP.6

変形を加えたら完成

画面上部の [ フィルター ] → [ 変形 ] → [ 波形 ] を追加します。

波形：2
波長：最小20 最大80
振幅：最小5 最大17
比率：水平20% 垂直10%
種類：正弦波
未定義領域：端のピクセルを繰り返して埋める

設定後は右上の [ OK ] をクリック。

直線的だった文字に適度な波形による歪みが加わり、手描き感のある表現になりました。

一度作ってしまえば文字やアイコン、ブラシで描いたスケッチなどにチョークで描いた質感が付与できる便利なテキストエフェクトですよ。

超高品質なチョーク風フォトエフェクト

コチラの記事で色付きのチョークで描いたようなチョークアート風加工ができるフォトエフェクトの使い方と作例を紹介しています。
Photoshop初心者の方でも1分でサンプルの様な作品が作成できるチートPSDですよ。

チョークエフェクトの中身を変える

作成したテキストエフェクトの中身を差し替える方法です。
あらかじめエフェクトレイヤーをスマートオブジェクト化しておく事で簡単に再編集できますよ。

STEP.1

レイヤー内を確認

レイヤーパネルを確認します。スマートオブジェクトがあるのでレイヤーサムネールをダブルクリックしましょう。

STEP.2

PSBを編集する

すると別タブでPSBファイルが開きます。文字の差し替え、アイコンの追加、ブラシツール等で手描きイラストの追加等を行ってみましょう。
追加後は [ Ctrl + S ] (Mac：⌘ + S) で上書き保存します。

STEP.3

素材の差し替え完了

元のチョークテキストエフェクトのPSDタブをクリックして参照しましょう。素材の中身が差し変わっている事が確認できますね。

テキストエフェクトを作ってしまえば簡単に素材の差し替えができるので、今後チョークの質感をした素材を作る際に簡単に質感再現ができますよ！

超高品質なチョーク風フォトエフェクト

コチラの記事でイラストや写真、文字、アイコン等を黒板にチョークで描かれた質感にできるフォトエフェクトPSDの使い方と作例を解説しています。
所要時間は1分、プロのフォトエフェクトを活用されてみませんか？

超高品質なチョークテキストエフェクト

先に紹介したチョークテキストエフェクトを更に発展させた超高品質なエフェクトPSD素材です。
全て商用利用可能なエフェクトなので安心して活用できますよ。

#01 Chalk Sketch Effect

緑をベースにしたよくある黒板に白のチョークで描いた表現ができるチョークエフェクト素材です。スマートオブジェクトの中身を差し替えるだけ！文字や写真、イラスト、アイコン、手書きなど、どんな要素でもチョークで描いた質感にできる素材ですよ。

ダウンロードする

#02 Chalk Art Photo Effect Mockup

黒地の黒板に白のチョークで描いた表現ができるチョーク風フォトエフェクト素材です。学校だけでなく、カフェメニューなどの紹介などにもよく合う素材ですよ。

ダウンロードする

#03 Chalkboard Chalk Effect

色付きの素材をカラーチョークで描いたタッチにできるフォトエフェクト素材です。白単色のエフェクトは多いですが、カラーのチョーク表現ができるエフェクトは貴重ですよ。

ダウンロードする

#04 Chalk Photo Effect

ポートレート写真などに適したチョークエフェクト素材です。背景を削除した人物写真などを指定のスマートオブジェクト内にはめ込むだけでサンプルの様な表現が1分で再現できますよ。

ダウンロードする

#05 Chalk Photo Effect Abstract Image Filter

カラー付きのチョークタッチにできるフォトエフェクトのPSD素材です。写真、イラスト、テキスト、アイコン等、要素問わずで使えるエフェクトなのでオススメですよ。

ダウンロードする

#06 Chalk Drawing Photo Effect

黒板にチョークで描いた線画のタッチが再現できる高品質なフォトエフェクト素材です。写真等をまるでチョークによる手描き風にできる素材です。カフェメニューの食べ物や飲料のチョークイラスト等があっという間に作れますよ。

ダウンロードする

#07 Chalk Sketch Photo Effect

少し明るめの黒板に描かれたチョークイラストが再現できるフォトエフェクトのPSD素材です。文字を入力すればチョークで描いたロゴのような表現が可能ですよ。

ダウンロードする

#08 Chalk Art Photo Effect Mockup

割とパキっとしたチョークタッチが再現できるフォトエフェクト素材です。細いチョークで描いた線画タッチの再現に特化していますよ。

ダウンロードする

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート45選

デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選

紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう！
デジタル媒体向けポートフォリオテンプレ素材35選

制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬！
様々なモックアップテンプレート57選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、Photoshopで黒板にチョークで描いた質感が再現できるテキストエフェクトの作り方でした。
レイヤースタイルを組み合わせる事でチョーク風の表現が比較的簡単に作れます。

黒板素材の上に使うといい感じで学校風の雰囲気が出せます。
学校などを題材にしたWebサイト、バナー、チラシやパンフレットなどの紙面媒体など、様々なクリエイティブに活用できる基本素材となりますので、是非ご活用ください。

ではまた！

テキストエフェクトの作り方まとめ

Photoshopでテキストエフェクトをゼロから自作する方法、そして1分で超高品質で商用利用可能なテキストエフェクトが作れるPSD素材の使い方と作例を解説しています。
ロゴデザイン、Webデザイン、バナーデザイン、各種DTPデザイン、UIデザイン、ポートフォリオ制作等。幅広いクリエイティブに活用できる内容です。