【Photoshop】ストリートアート(グラフィティ)エフェクトPSDの使い方と作例

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

Photoshop（フォトショップ）でグラフィティアート（ストリートアート）が1分で作れるエフェクトPSDの使い方と作例をフォトショ初心者の方に詳しく解説します。

写真、イラスト、文字など、様々な素材がスラム街の壁面などに描かれたグラフィティに大変身！

これからPhotoshopを始められる方、より高品質なクリエイティブを短時間で実現されたい方必見ですよ。

この記事の目次

何が作れるの？

上記の様なグラフィティアートがフォトショップ初心者の方でも1分で作成できます。
写真やイラスト、文字・アイコン等を落書き風のグラフィティにできるPSDエフェクト素材ですよ。

グラフィティエフェクトの使い方

Photoshopで使えるグラフィティエフェクトPSDの使い方を解説します。
フォトショスキルゼロでもプロが作成したエフェクトが再現できるチート素材ですよ。

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はフォトプラン公式サイトから入手可能。（月額は最安の1,180円、7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

グラフィティアートエフェクトPSD①

STEP.1

グラフィティエフェクトをダウンロード

[ Urban Graffiti Photo Effect Mockup With Generative AI ] をダウンロードします。

1プランクレジットで利用可能、ライセンスを取得すると商用利用可能なPSDTがダウンロードされます。

STEP.2

PSDTをPhotoshopで開く

フォトショップでダウロードしたPSDTを開くと左図の画面が表示されます。

横幅4500px、高さ3000px、解像度300pixel/inchの高解像度なフォトエフェクトモックアップ素材です。

STEP.3

レイヤーパネルを確認

グラフィティエフェクトのレイヤーを確認してみましょう。

[ Your Image Here ] と書かれたスマートオブジェクトがあります。レイヤーサムネールをダブルクリックしてみましょう。

すると[ Your Image Here.psb ] という名称のPSBファイルが別タブで開きます。お好きな写真やアイコンやイラスト、テキスト等を配置しましょう。

サンプルは [ Afro american urban guy ] を利用しました。[ 背景を削除 ] を使う事でワンクリックで人物以外の不要な背景にマスクをかけられます。

STEP.4

完成

元のグラフィティエフェクトを参照すると素材が差し変わっている事が確認できます。

[ Urban Graffiti Photo Effect Mockup With Generative AI ] を使えばPhotoshop初心者の方でもプロのグラフィティアート加工がたった１分で実現可能！

OMAKE

イラストにも適用可能

もちろんイラスト素材や文字に適用する事もできます。サンプルは [ A set of cute anime girls illustrations ] を活用した例です。（商用利用可能！）

かわいい雰囲気のイラストも当グラフィティエフェクトを適用するとハードな世界観に馴染ませる事ができますよ。

PNG、JPEG等への書き出し方法

【Photoshop】PSDをJPEGやPNG・GIF形式で書き出す方法forフォトショ初心者

モックアップPSDで作成したグラフィックをJPEGやPNG等の形式で書き出す方法を詳しく解説しています。併せてチェックされてみませんか？

グラフィティアートエフェクトPSD②

STEP.1

グラフィティエフェクトをダウンロード

[ Grunge Concrete Wall Art Mockup ] をダウンロードします。

1プランクレジットで利用可能、ライセンスを取得すると商用利用可能なPSDTがダウンロードされます。

STEP.2

PSDTをPhotoshopで開く

STEP.3

レイヤーパネルを確認

グラフィティエフェクトのレイヤーを確認してみましょう。基本的には先に紹介したフォトエフェクトと同じで [ Your Content Here ] と書かれたスマートオブジェクトがあります。レイヤーサムネールをダブルクリックしてみましょう。

すると[ Your Content Here.psb ] という名称のPSBファイルが別タブで開きます。お好きなテキストやアイコン等を配置しましょう。

サンプルのフォントは [ CC Schools Out ] を利用しました。コンプリートプラン利用者ならAdobeFontsで無料利用可能ですよ。

STEP.4

完成

元のグラフィティエフェクトを参照すると素材が差し変わっている事が確認できます。

[ Grunge Concrete Wall Art Mockup ] はグラフィティアート系のロゴデザインに最適です。スプレー缶で描いた落書きのような質感が忠実に再現されますよ。

OMAKE

文字やアイコンでも可能

コチラの商用利用可能なドクロアイコンに適用する事もできます。治安の悪いスラム街でよくあるコンクリートの壁面に描かれたようなグラフィティアート風の表現が1分で再現する事ができますよ。

グラフィティアートエフェクトPSD③

STEP.1

グラフィティエフェクトをダウンロード・開く

[ Stencil Graffiti Effect with Ai Elements ] をダウンロードします。1プランクレジットで利用可能、ライセンスを取得すると商用利用可能なPSDTがダウンロードされます。

ダウンロードしたPSDTをPhotoshopで開くと左図画面が表示されます。

STEP.2

レイヤーパネルを確認

先のフォトエフェクトと同様にレイヤーを確認します。[ ISOLATED IMAGE HERE ] という名称のスマートオブジェクトがあるのでレイヤーサムネールをダブルクリックしましょう。

すると[ Your Content Here.psb ] という名称のPSBファイルが別タブで開きます。お好きなテキストやアイコン等を配置しましょう。

サンプル画像は [ Handsome black man in blue set of tracksuit with afro hair ] を活用しました。商用利用可能＆超高解像度のカッコいい写真素材ですよ。

STEP.3

完成

元のグラフィティエフェクトを参照すると素材が差し変わっている事が確認できます。

[ Stencil Graffiti Effect with Ai Elements ] は写真やイラスト素材の加工に適しています。Webサイトのメインビジュアル、バナーデザイン、紙面デザイン等。手間のかかるグラフィティ系加工を一瞬でやってくれる超便利なチート素材です。

OMAKE

文字やイラストにも可能

先のテキストエフェクトで利用した [ A set of cute anime girls illustrations ] のイラストに適用した例です。もちろん文字やアイコンにも適用可能！

あからじめ白黒にしてからフォトエフェクトを適用させるのもアリですし、スマートフィルター内の [ Threshold ] で2値化のしきい値を調整する事も可能ですよ。

その他グラフィティエフェクトPSD

商用利用可能で高品質なストリートアート（グラフィティ）が作れるモックアップPSDを厳選しました。
下記PSDの編集にはPhotoshopが必須、事前にAdobe公式サイトから入手しておきましょう。

#01 Graffiti Style Photo Effect With AI Texture

荒れたスラム街のコンクリート塀に描かれたような質感のグラフィティアートが再現できるフォトエフェクト素材です。グラフィティの描きこみが非常に細かく、背景を削除した人物画像などをはめ込むのに最適な素材です。

ダウンロードする

#02 Photo Effect Overlay on Garage Door Texture Mockup

ガレージのシャッターに描かれたようなストリートアートが表現できるモックアップPSD素材です。コンクリートやブロック塀素材が多い中、金属製シャッターのモックアップは希少ですよ。

ダウンロードする

#03 Graffiti Style Photo Effect

シアンとマゼンタのインクが飛び散ったアーティスティックな壁画が描けるストリートアートフォトエフェクト素材です。お好きな写真素材をはめ込むだけなので制作時間はたったの1分で済みます。

ダウンロードする

#04 Text Effect Graffiti with Generative AI

グラフィティアートが簡単に再現できるPSD素材です。生成AI技術を融合させたグラフィック素材が使用されており、密度の高いストリートアート表現が可能ですよ。

ダウンロードする

#05 Urban Graffiti Effect Mockup

非常にリアルで高品質なグラフィティアートが再現できるエフェクトモックアップ素材です。レイヤー分けされたPSD素材なので編集が容易！オススメ素材の一つです。

ダウンロードする

様々なグラフィティエフェクト素材

【Photoshop】グラフィティ風の加工ができるエフェクトPSD30選

写真やイラスト、文字やアイコン等をグラフィティアートに大変身させられるエフェクトPSD素材です。併せてチェックされてみませんか？

おわりに

以上、Photoshop（フォトショップ）で使えるコンクリートなどの壁面に描かれたグラフィティアート（ストリートアート）が1分で作れるフォトエフェクトPSDの使い方と作例でした。
今回使用したPSDモックアップは [ Urban Graffiti Photo Effect Mockup With Generative AI ] 、[ Grunge Concrete Wall Art Mockup ] 、[ Stencil Graffiti Effect with Ai Elements ] の3種類です。

バナーデザインやWebサイトやチラシなどのメインビジュアルがあっという間に作成できるチートアイテムです。もちろんロゴデザイン等にも活用できるので超便利！
商用利用可能な素材なので安心して活用できるのも嬉しいですね。

エフェクトを適用する際に要する時間はたったの1分！
Photoshop初心者の方でもプロによる表現ができるチートアイテムを活用し、更にクリエイティブを加速させてください！

ではまた！