【Photoshop】ゴーストキラー風ロゴの作り方【グランジ系ロゴ】

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

Photoshop（フォトショップ）でGHOSTKILLER（ゴーストキラー）風のロゴを簡単に自作する方法をフォトショ初心者の方に詳しく解説します。ロゴがザラっとした質感で欠けたような、アウトロー系の表現によく合うグランジ系ロゴデザインが10分で作れます。

ちなみにゴーストキラーは元殺し屋の幽霊が女子大生に取り憑いて成仏させる為に復讐の手伝いをする、ヤンマガあたりで連載されていそうな内容のアクション映画です。爽快な内容でオススメですよ。

この記事の目次

何ができるの？

上記の様にGHOSTKILLER（ゴーストキラー）を模したデザインのロゴがフォトショ初心者の方にも簡単に再現できます。YouTubeのサムネ画像、Webサイトやバナーのロゴ、ポスターやチラシ等の印刷物のロゴとして等。様々なコンテンツ作成に応用できるテクニックですよ。

ゴーストキラー風ロゴの作り方

それではGHOSTKILLER風ロゴの作り方を解説します。
所要時間は10分程度、Photoshop初心者の方でも順を追って進めていけば再現可能ですよ。

Photoshopを導入しましょう

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

文字を入力＆変形

STEP.1

新規ドキュメントを作成

新規ドキュメントを作成します。サンプルは下記サイズです。

幅：1920px
高さ：1080px
解像度：72pixel/inch

STEP.2

文字を入力

[ 文字ツール ] で文字を入力します。
文字のカラー：白
サンプルのフォントは [ DIN Condensed Variable ] を使用しました。

※バリアブルフォントなのでフォントの太さが自在に調整できます。バリアブルフォントの詳しい使い方はコチラの記事で解説しています。

背景は白以外の [ べた塗り ] を追加しておきます。

入力した文字のレイヤーは [ スマートオブジェクトに変換 ] しておきましょう。

STEP.3

波形で変形する

Photoshop画面上部から [ フィルター ] → [ 変形 ] → [ 波形 ] を適用します。

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

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

文字に微妙なうねりを加える事ができました。お好みで波形のパラメータは調整して下さい。

文字を角丸にする方法

よりゴーストキラー風のロゴを再現する為に角ばった文字を角丸にするには、Illustrator（イラストレーター）を併用する必要があります。イラレでベース文字を入力後、画面上部の [ 効果 ] → [ スタイライズ ] → [ 角を丸くする ] を適用。
角を丸くした文字を選択ツールで選択後、[ Ctrl + C ] でコピーし、Photoshop上で [ Ctrl + V ] でペースト。後は波形で変形するとOKです。

グランジテクスチャでマスクする

STEP.1

マスクを作成

文字のスマートオブジェクトレイヤーに [ レイヤーマスク ] を追加します。

STEP.2

グランジテクスチャをダウンロード＆開く

グランジテクスチャをダウンロードします。サンプルは [ Grunge overlay texture. Old dirty concrete background with cracks and scratches. ] を使用しました。
AI形式、JPEG形式どちらでもダウンロード可能ですが、AI形式が圧倒的に便利ですよ。

Illustratorで開くと左図の様にグランジテクスチャのベクターが収録されています。お好みのテクスチャを [ 選択ツール ] で選択後、[ Ctrl + C ] (Mac：⌘ + C) でコピーします。

STEP.3

Photoshopにペースト

Phoshopを開き、先に作成したロゴのベースのPSDを参照し [ Ctrl + V ] (Mac：⌘ + V) でペーストしましょう。ペースト形式は [ スマートオブジェクト ] が編集性が高くてオススメです。

※イラレからフォトショへコピペする際の詳細はコチラの記事で解説しています。

STEP.4

マスクを編集

STEP.3で追加したグランジテクスチャのサイズや位置を調整しマスクしたい個所を決めます。
[ Ctrl ] を押しながらグランジテクスチャのレイヤーサムネールをクリックすると選択範囲が作成されます。

レイヤーマスクをクリックしてアクティブにし、描画色を黒にして [ ブラシツール ] で塗ります。すると文字がザラっとした形状でマスクされます。
※ [ Ctrl + D ] (Mac：⌘ + D) で選択を解除できます。

グランジテクスチャを非表示にしながらマスクの具合を確認して進めていきましょう。

グランジテクスチャの位置調整とマスクを繰り返してお好みでザラつきを追加しましょう。

FINISH

アクセントカラーを追加して完成

最後に [ べた塗り ] を追加し、ロゴのスマートオブジェクトレイヤーにクリッピングマスクします。必要な箇所だけにレイヤーマスクを追加したら左図の様なGHOSTKILLER風ロゴの完成です。
非常に簡単にグランジの質感が付与でき、サンプルの制作は10分です。

左図はロゴのレイヤー構成です。シンプルな作りですね。

グランジテクスチャを使ったクリエイティブは応用が効くテクニックなので是非お試しください！

様々なグランジテクスチャ素材

商用利用可能で高品質なグランジテクスチャのベクター素材です。
汎用性の高い素材ばかりなのでダウンロードして損はありませんよ！

#01 Grunge textures set. Distressed Effect.

グランジテクスチャが9点収録されたベクター素材です。AI/EPSだけでなく、透過のPNG画像もダウンロード可能なのでイラレが無い方でも簡単に扱える素材ですよ。

ダウンロードする

#02 Set of grange seamless patterns. Simple vector scratch textures

継ぎ目の無いシームレスな形状のグランジテクスチャ素材です。スウォッチやパターンに登録して使うと一面をグランジの質感で埋める事が可能です。

ダウンロードする

#03 Grunge Urban Backgrounds set.

都会的な雰囲気が漂うグランジテクスチャ素材です。背景素材や文字などに適用するテクスチャなど、様々な用途に使えるベクター素材ですよ。

ダウンロードする

#04 grunge textures set. background. vector illustration.

グラフィックに重みが追加できるザラっとした質感のグランジテクスチャ9点セットです。密度やタッチの異なる様々なグランジ表現が収録されていますよ。

ダウンロードする

#05 Overlay old frame and border effect torn

ヴィンテージ系の写真フレーム等に使えるオーバーレイ系のグランジテクスチャ素材です。収録点数が多いのでお得ですよ。

ダウンロードする

#06 Distressed dotted design element.

幾何学的なドット模様を組み合わせたアーティスティックなグランジテクスチャ素材です。グラフティ系の加工を施した人物写真等に重ねると更に密度が出せますよ。

ダウンロードする

#07 Background with glitch distorted grunge textures

ハーフトーン系とグランジを組み合わせた複雑な模様のグランジテクスチャです。単純な自然物のグランジではなく、デザインされた雰囲気が漂うアート素材として活用できますよ。

ダウンロードする

#08 Vintage grunge paper texture.

古い紙の織り目のテクスチャ素材です。ベクター形式なので拡縮しても劣化しないので使い勝手が抜群ですよ。

ダウンロードする

#09 Overlay old frame and border effect torn

15種類もの古い写真のフレームのテクスチャが収録されたオーバーレイ系ベクター素材です。そのまま使う、一部をマスク素材として活用するなど、幅広い用途が考えられますね。

ダウンロードする

カラーハーフトーンエフェクト

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

カラーハーフトーンエフェクトを適用する事で風合いの違ったグランジ表現が付与できます。併せてチェックされてみませんか？

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

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

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

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

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

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

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

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

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

良質な素材をもっと見る

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

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

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

おわりに

以上、Photoshop（フォトショップ）でGHOSTKILLER（ゴーストキラー）風のロゴを作る方法についてでした。グランジ表現を使ったロゴデザインで、質の高いグランジテクスチャを使えば簡単に作れます。

また、変形を使って微妙にベースの文字が歪んでいるのを再現するのがポイント。
グランジブラシでレイヤーマスクを作るのもアリですし、当記事の様にグランジテクスチャを使ってマスクを作る方法、どちらでも可能です。

グランジ系のテクスチャは様々なデザイン制作でよく使う汎用素材なので持っておくと非常に便利ですよ。

ではまた！

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

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