【Photoshop】ヴィンテージな2色の活版印刷を再現する方法

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

Photoshop（フォトショップ）でヴィンテージな質感で作られた2色の活版印刷を再現する方法をフォトショ初心者の方に分かりやすく解説解説します。

Photoshopの基本操作からよく使う応用操作、テクスチャの使い方やチャンネルの活用方法など、レタッチやデザインなど制作全般で活用するテクニックを網羅的に学習できます。

デザイン初心者の方、これからWebデザインやバナー、チラシなどのグラフィック制作をされたい方にオススメのコンテンツです！

この記事の目次

何ができるの？

上記のようなグラフィックがPhotoshopを使ってゼロから作成できます。
サンプルグラフィックの制作時間は約15分。

テクスチャの具体的な活用方法を実践し、効率的なクリエイティブのテクニックが学習可能。
Photoshopに不慣れな方でもチュートリアル通りに進めていけば再現できる内容ですよ。

2色の活版印刷風グラフィックの作り方

それではPhotoshopでヴィンテージな質感で作られた2色の活版印刷風グラフィックを作成してみましょう。
フォトショ初心者の方にも再現できるよう、詳しく解説いたします！

Photoshopを導入しましょう

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

背景を作る

デザインの背景を作成しましょう。
テクスチャを変えるだけで雰囲気を大幅に変えられますよ。

STEP.1

Photoshopにテクスチャを配置

Photoshopに背景のベースとなるテクスチャを配置します。

サンプルは私が愛用している [ Set of 13 old paper backgrounds ] の3番目のテクスチャを活用しました。非常に高品質な古紙のテクスチャですよ。

STEP.2

色相・彩度を追加

[ 塗りつぶしまたは調整レイヤーを新規作成 ] → [ 色相・彩度 ] を追加し、古紙テクスチャにクリップします。

色相：0
彩度：-40
明度：0

彩度を落として渋めの色味に変更。

STEP.3

完成

以上で背景の準備が完了しました。

アイコンを作る

メインビジュアルとなるアイコンを配置し、質感を付与します。
チャンネルを活用した選択範囲の作成テクニックはPhotoshopでよく使いますよ。
なお、最新のPhotoshopが未導入の方は事前にフォトプラン公式サイト（月額は最安の1,180円）から入手しておきましょう。

STEP.1

アイコンを配置

適用したいアイコン等のグラフィックを配置します。
サンプルは [ Barbershop Vector Icons Set ] を活用しました。

[ スマートオブジェクトに変換 ] しておきましょう。

STEP.2

カラーオーバーレイを追加

[ レイヤースタイルを追加 ] → [ カラーオーバーレイ ] を追加。

色：#5e93a6

※色はお好みで変更してください。

するとアイコンの色を変更できました。
カラーオーバーレイを使うと簡単に色替えができます。

STEP.3

波紋フィルターを追加

[ フィルター ] → [ 変形 ] → [ 波紋 ] を追加します。

量：30%
振幅数：大

するとアイコンの輪郭がラフな仕上がりになります。

STEP.4

グランジテクスチャを読み込む

汚しを再現するためにグランジテクスチャを読み込みます。
サンプルは [ Old black background. ] を活用しました。

ドラッグ＆ドロップで配置し、サイズ調整を行いましょう。
最前面のレイヤーに配置し、テクスチャが表示されるようにします。

STEP.5

チャンネルの設定

[ チャンネル ] を開きます。
非表示の場合は [ ウィンドウ ] → [ チャンネル ] で表示できます。

パネル右下の [ 新規チャンネルを作成 ] をクリックし、[ アルファチャンネル1 ] を追加します。

RGBのチャンネルサムネールを [ Ctrl ] (Mac：Command) を押しながらクリックすると白い部分の選択範囲が作成されます。

[ アルファチャンネル1 ] をクリックしてアクティブにし、[ Alt + BackSpace ] (Mac：Option + BackSpace) を押すと選択範囲の形状で塗りつぶされます。

その後 [ Ctrl + D ] (Mac：Command + D) で選択を解除します。

[ Ctrl + M ] (Mac：Command + M) でトーンカーブを開きます。

左図のようなカーブを描きます。

※適用しているテクスチャが違う場合は都度調整してください。

[ Ctrl + L ] (Mac：Command + L) でレベル補正を開き黒を強めてみるのも良いでしょう。

以上でマスク用のチャンネルが作成できました。

最後にRGBチャンネルをクリックし、左図のレイヤー表示にしておきましょう。

FINISH

レイヤーマスクを追加したら完成

STEP.5で作成したアルファチャンネル1のチャンネルサムネールを [ Ctrl ] (Mac：Command) を押しながらクリックします。

すると選択範囲が作成されます。

レイヤーパネルを開き、アイコンレイヤーをクリックしてアクティブにします。

レイヤーパネル下部の [ ベクトルマスクを追加 ] をクリックし、レイヤーマスクを作成しましょう。

左図のように汚しの質感をアイコンに追加する事ができます。

チャンネルはPhotoshopでよく使う機能なので、使いこなせるようになると作業効率が劇的に向上しますよ。

文字を作る

文字を入力して質感付与を行います。
ゼロから質感を作る必要は無し！
アイコンで作成した質感をコピーし、微調整するだけなのであっという間に完成しますよ。

STEP.1

文字を入力

[ 文字ツール ] でお好きな文字を入力します。
サンプルのフォントは [ Cuisine ] を活用しました。

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

※レイヤーサムネールをダブルクリックするとPSBが別窓で開き、文字を再編集できます。

STEP.2

アイコンの設定をコピペ

先ほど作成したアイコンの効果とスマートフィルターをコピーします。

レイヤーパネルに〇アイコンとfxがあります。
各アイコン上にカーソルを合わせ、[ Alt ] (Mac：Option) を押しながら文字レイヤー上にドラッグ＆ドロップするとコピーできます。

カラーオーバーレイや波紋フィルターなどがコピーされました。

カラーオーバーレイの色を変更しましょう。
サンプルの色は#d04a3cです。

STEP.3

レイヤーマスクをコピー

アイコンのレイヤーマスク上にカーソルを合わせ、[ Alt ] (Mac：Option) を押しながら文字レイヤー上にドラッグ＆ドロップします。

するとレイヤーマスクをコピーできます。

左図のような見た目になりました。
これで完成にしても構いません。

アイコンと文字のグランジテクスチャを変えたい方は次の手順を追加してください。

レイヤーとレイヤーマスクのリンクを解除します。
※鎖アイコンをクリックするとリンク解除。

あとはレイヤーマスクサムネールをクリックし、アクティブにしてから [ 移動ツール ] でレイヤーマスクの位置をずらすと手軽に別のグランジテクスチャっぽくできます。

FINISH

完成

以上でPhotoshopを使ったヴィンテージな2色の活版印刷が手軽に再現できました。

そんなに難易度は高くないのでヴィンテージ調のグラフィックを作りたい方は一度お試しください！

高品質なヴィンテージエフェクト

ただの写真や文字をヴィンテージ風に加工できるエフェクトモックアップです。
全て商用利用可能！
短時間で超高品質な作品に仕上げられますよ。

#01 Vintage Photo Effect

写真をはじめとした画像をヴィンテージ風にできるエフェクトモックアップです。
仕上がりは見ての通り超高品質！
日焼け具合やしわの感じなど、見事な質感です。

ダウンロード

#02 Old Vintage Photo Effect

非常に古い質感に変える事ができるエフェクトモックアップです。
フォトショップがあれば誰でもサンプルのような仕上りにできます。

ダウンロード

#03 Vintage Texture Photo Overlay

味のあるヴィンテージ加工ができるフォトショップ用のエフェクトモックアップです。
紙のザラザラ感や汚れなどが見事に再現できます。

ダウンロード

#04 Retro Dust Texture Effects Mockup

レトロで汚れた白黒写真にできるエフェクトモックアップです。
質感・再現度が非常に高い高品質な仕上りです。
もちろん商用利用可能！

ダウンロード

#05 Old Vintage Hollywood Film Title Text Effect

レトロなハリウッド映画のタイトルのような表現ができるPhotoshop用のエフェクトモックアップです。
質感が非常にリアルですね。

ダウンロード

Photoshop用の高品質なエフェクト集

【Photoshop】商用可！画像をヴィンテージ風にできるエフェクトモックアップ50選

商用利用可能で高品質なヴィンテージエフェクトばかりを50点ピックアップしました。
制作の品質向上とスピードアップを同時に行える優秀素材ばかりです。

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

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

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

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

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

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

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

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

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

良質な素材をもっと見る

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

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

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

おわりに

以上、Photoshop（フォトショップ）でヴィンテージな質感の活版印刷風グラフィックの作り方でした。

手軽にカッコいいグラフィックが作れるテクニックです。
チャンネルを使ってテクスチャの選択範囲を限定的に作る手法はPhotoshopでよく使います。

グランジテクスチャの汚し部分だけでマスクを作成する方法を知っておくと、様々なテクスチャで応用ができますよ。
是非オリジナルデザインで作成してみて下さい！

ではまた！

写真の雰囲気を激変させよう

写真の雰囲気を激変させるチュートリアル集です。
フォトショの中級～上級テクニックを網羅的に学習できます。