【Photoshop】6種類のハーフトーン表現ができるフォトエフェクトPSD

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

Adobe Photoshop（フォトショップ）で非常に高品質なカラーハーフトーン表現ができるフォトエフェクトPSDの使い方と作例をフォトショ初心者の方に詳しく解説します。
よくあるドットパターンのカラーハーフトーンだけでなく、様々なハーフトーンエフェクトが6種類も収録されています。

アナログで粗い印刷物のような質感が再現可能！バナーやポスター、各種クリエイティブのビジュアル作成に役立つ素材を活用して制作を加速させてみませんか？

この記事の目次

何が作れるの？

上記の様なザラっとした、一昔前の印刷物の様なハーフトーン表現が短時間で作成できます。各画像は3000px x 2085px、解像度300px/inchなので印刷物にも活用できますよ。

ハーフトーンエフェクトPSDの使い方

それではPSD形式のハーフトーンエフェクトを使ってビジュアルを作成してきましょう。

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はAdobe公式サイトから導入できます。（7日間の無料体験が可能、終了後は自動課金となるため、継続しない場合は期間内に解約してください。）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

ハーフトーンエフェクトの編集方法

STEP.1

ハーフトーンエフェクトをダウンロード

ハーフトーンエフェクトのPSDT素材をダウンロードします。サンプルは [ Halftone Rasters Set ] です。6種類のカラーハーフトーン表現ができるハーフトーン系エフェクトの決定版ですよ。

STEP.2

Photoshopで開く

ダウンロードしたハーフトーンのフォトエフェクトPSDT素材をダブルクリックするとPhotoshopで左図のような画面が開きます。
1画面に6つのアートボードがレイアウトされていますね。

STEP.3

画像を変更

レイヤーパネルを開きます。
※非表示の場合は [ F7 ] で表示可。

[ RASTER 1 ] のアートボード内にある [ YOUR IMAGE ] のスマートオブジェクトのレイヤーサムネールをダブルクリックしましょう。

別タブで [ YOUR IMAGE.psb ] が開きます。お好きな画像を配置しましょう。（サンプルはコチラの画像を使用しました。）

最後に [ Ctrl + S ] (Mac：⌘ + S)で上書き保存しましょう。

FINISH

基本的な編集が完了

ハーフトーンエフェクトのPSDタブをクリックすると画像が差し変わっています。以上でハーフトーンエフェクトの付与が完了しました。

[ Halftone Rasters Set ] を使えばドット、ストライプ、波線、ジグザグなど、様々なハーフトーンによる変化が短時間で実現しますよ。

OMAKE

背景のシェイプの色を変更

レイヤーパネルを開くと [ CHANGE COLOR ] という名称のレイヤーグループがあります。6パターンの色変更が行えます。

サンプルは [ ORANGE ] を適用してみましょう。するとカラーハーフトーンエフェクトの色味が変わりましたね。

色変更のプリセットも含まれているのでカスタマイズが自在にできる親切設計のフォトエフェクト素材ですよ。

ハーフトーンエフェクトを書き出す

STEP.1

書き出しを選択

あらかじめ [ アートボード ] が設定されているので [ ファイル ] → [ 書き出し ] → [ 書き出し形式 ] をクリックします。

※ショートカットは [ Alt + Shift + Ctrl + W ]
(Mac：Option + Shift + ⌘ + W)

STEP.2

書き出し設定＆書き出し

書き出し形式のダイアログ画面が開きます。左メニューに書き出し対象の画像一覧、右メニューに書き出し設定が表示されています。
サンプルは全画像をJPG形式で書き出します。

設定後は右下の [ 書き出し ] をクリック。

STEP.3

書き出しの完了

以上でハーフトーンエフェクトをJPG形式で書き出す事ができました。[ Halftone Rasters Set ] は画像を差し替えるだけでワンランク上のハーフトーン表現ができるフォトエフェクト素材です。

バナーに展開

上記はコチラの記事で使い方や作例を解説している [ Web Banner Layout Set 4 ] を使ってバナーにした作例です。サンプルは1200px x 630pxのみ紹介していますが、全16種類ものサイズが収録された超汎用性の高いバナーテンプレート素材です。
書き出し方法も先に解説した方法でサイズ別に出力ができるのでバナー制作工数が削減できるでしょう。

高品質なハーフトーンエフェクト素材

その他の高品質なカラーハーフトーン系のフォトエフェクトPSD素材を厳選しました。
使用頻度の高い加工なので様々なグラフィック作成に使える汎用素材ですよ。

#01 Halftone Pattern Effect

4種類のカラーハーフトーン効果が付与できるフォトエフェクトPSDです。ドットと線形だけでなく、紙幣のような新札パターンやうねうねしたパターンなども収録されています。

ダウンロードする

#02 Risograph Matchbook Print Photo Effect Mockup

リソグラフのような印刷効果が再現できるフォトエフェクトPSDです。斜線の印刷跡が非常にリアルな仕上がりになっています。

ダウンロードする

#03 Circular Halftone Photo Effect

ドットではなく、矩形のハーフトーンが表現できるサークル上のフォトエフェクトPSDです。モザイク状のハーフトーン柄が表現でき、あまり類を見ないエフェクトですよ。

ダウンロードする

#04 Risograph Grain Photo Effect Mockup

先のリソグラフエフェクトと少し風合いの違う表現が可能なフォトエフェクトPSDです。Webサイトやバナー、フライヤー等の印刷物、UIデザインなど、幅広く活用できますよ。

ダウンロードする

#05 Halftone Splash Effect

アメコミ風のタッチにし、荒いブラシの筆跡エフェクトとハーフトーンエフェクトを重ね合わせたスタイリッシュなフォトエフェクトPSDです。メインビジュアルとして活用できるレベルのグラフィックが短い時間で作れます。

ダウンロードする

#06 Mixed Art Watercolor and Halftone Effect

写真を水彩加工し、カラーハーフトーンによるドット柄が追加されたグラフィックが短時間で作れるフォトエフェクトPSDです。高品質な仕上がりの絵作りが可能です。

ダウンロードする

#07 Smart Dots Effect

写真をはじめとしたグラフィックをあっという間にドットのモザイク柄にできるフォトエフェクトPSDです。スマートオブジェクトレイヤーの中身を差し替えるだけ！

ダウンロードする

#08 Various Mockups with Halftone Effect

6種類のハーフトーンエフェクトが収録されたスクウェア型のバナーテンプレート素材です。エフェクトPSD以外にもinstagramをはじめとしたSNSの投稿用テンプレートとして活用できます。

ダウンロードする

#09 Liquid Halftone Text Effect Mockup

液体のように歪んだ文字に白黒のカラーハーフトーンエフェクトを付与した、新聞に印刷されたような質感のテキストエフェクトPSDです。

ダウンロードする

#10 Bad Letterpress Print Text Effect Mockup

失敗した活版印刷のような表現ができるテキストエフェクトPSDです。ズレの表現が非常にリアルな仕上がりです。

ダウンロードする

カラーハーフトーン系のフォトエフェクト

【Photoshop】高品質なカラーハーフトーンのエフェクトPSD28選【商用可】

コチラの記事で様々なカラーハーフトーン系のフォトエフェクト素材を紹介しています。様々な媒体のビジュアル作成に使えますよ。

おわりに

以上、Photoshop（フォトショップ）で6種類のハーフトーン表現が短時間で出来るフォトエフェクトPSDの使い方と作例でした。自身でゼロから高品質なカラーハーフトーンの表現を作るにはフォトショスキルと手間が必要です、[ Halftone Rasters Set ] を使えば高品質なハーフトーン表現が短い時間で作成できると感じました。

アナログ感のある粗い印刷物のような質感が再現でき、ポスターやチラシ、バナーなど、様々なコンテンツのメインビジュアルとして活用しやすい素材です。

上手く活用して日々のクリエイティブを加速させてください。

ではまた！