【Photoshop】線画スケッチ風のタッチを再現する方法forフォトショ初心者

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

Photoshop（フォトショップ）で写真を線画のスケッチ風タッチにする方法を解説します。

建築デザインのスケッチにピッタリの表現が簡単に作成可能。
もちろんWebデザインやバナーデザイン、チラシをはじめとした印刷物やUIデザイン等、Photoshopを活用したクリエイティブ全般に使えるテクニックです。

フォトショ初心者の方でも再現できるよう、順を追って詳しくスケッチ風加工の方法を解説いたします！

この記事の目次

どんな加工ができるの？

建築系の線画スケッチのような表現が可能です。
デッサン力といった作画に必要な能力は一切不要！
フォトショップがあれば誰でも簡単に上記のような線画表現ができます。

線画スケッチの作り方

鉛筆で描いた様なタッチをフォトショで再現する方法を解説します。
Photoshop初心者の方にも再現できるよう、順を追って詳しく解説いたします。

Photoshopを導入しましょう

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

STEP.1

画像を読み込む

加工対象の画像をフォトショップで開きます。
ドラッグ&ドロップで読み込み可能。

素材にこだわりたい方はAdobeStockが最強！3億点以上の商用利用可能で高品質な素材が制作を加速させてくれますよ。
詳しくはコチラで解説しています。

STEP.2

スマートオブジェクトに変換する

対象画像をスマートオブジェクトに変換します。
[ レイヤーパネル ] → [ 対象レイヤーを右クリック ] → [ スマートオブジェクトに変換 ]
レイヤーサムネールの右下にアイコンが追加されます。

スマートオブジェクトはコチラで詳しく解説しています。

STEP.3

輪郭検出を適用

[ フィルター ] → [ 表現手法 ] → [ 輪郭検出 ] を適用します。
設定項目は無く、画像の輪郭が自動的に検出されます。

表現手法の全フィルターはコチラで解説しています。

輪郭検出を適用した画像です。
線画が作れましたね。

STEP.4

グレースケールに変更

[ Ctrl + U ] (Mac：Command + U) で [ 色相・彩度 ] を編集します。
彩度を-100にし、グレースケールに変更します。

[ イメージ ] → [ 色調補正 ] → [ 色相・彩度 ]
または [ 調整レイヤー ] → [ 色相・彩度 ] でも構いません。

所々に色が入っていましたが、グレースケールになりましたね。

STEP.5

色味を変える

元レイヤーの上にレイヤーを1枚追加し、[ 塗りつぶしツール(G) ] を使って青色でベタ塗りにします。
レイヤーの描画モードを [ スクリーン ] に変更しましょう。

すると絵全体の色味が青系で統一されます。

STEP.6

枠を作る

STEP.5で作成したレイヤーを [ Ctrl + J ] (Mac：Command + J) でコピーします。

1つ目の境界線を追加します。
サイズ：50px
位置：内側
描画モード：通常
不透明度：100%
塗りつぶしタイプ：カラー
カラー：お好きな色(#2442ac)

2つ目の境界線を追加します。
サイズ：47px
位置：内側
描画モード：通常
不透明度：100%
塗りつぶしタイプ：カラー
カラー：お好きな色(#e4e9f6)

すると左図のような状態になります。

STEP.7

方眼紙テクスチャを設置する

方眼紙のテクスチャを背面に設置します。
ゼロから作るのが面倒な方はコチラの素材を活用すると良いでしょう。

方眼紙のパターンを作成して登録する方法もアリです。

FINISH

完成

以上で完成です。
建築系のスケッチのような仕上りにできましたね。

Photoshopがあれば誰でも簡単に左図のような加工が可能！
フォトショ未導入の方はAdobe公式サイトから入手できます。

さらに高品質なPSDモックアップ

さらに高品質な鉛筆タッチを再現できるモックアップPSDです。
全て商用利用可能！
フォトショ初心者の方でもあっという間にサンプルのような仕上りにする事ができます。

#01 Expressive Pencil Sketch Photo Effect Mockup

誰でも写真をあっという間に鉛筆タッチにできるエフェクトPSDです。
非常に高品質なモックアップですよ。

ダウンロード

#02 Vintage Pencil Sketch Photo Effect Mockup

先に紹介した建築物に適したスケッチ風を更に発展させたエフェクトモックアップです。
ヴィンテージ感漂う色味と鉛筆のリアルなタッチが画像加工とは思えません。

ダウンロード

#03 Photo Sketch Effect Mockup

鉛筆スケッチのような表現が一瞬で出来るエフェクトPSDです。
画力やフォトショの知識は不要！
フォトショ本体と当PSDがあれば誰でもサンプルのような作品が作れます。

ダウンロード

#04 Color Sketch Effects

カラーのスケッチ風タッチにできる高品質なエフェクトモックアップです。
カラーだけでなく、白黒のスケッチも再現可能なお得PSDです。

ダウンロード

#05 Pencil Drawing Effect

まるで手描きの鉛筆タッチのような表現ができるハイクオリティなエフェクトPSDです。
ポートレートだけでなく、建築物や自然物も上手く鉛筆スケッチ風にできます。

ダウンロード

#06 Pencil Sketch Portait Effect

色鉛筆でスケッチをしたような表現ができるエフェクトモックアップです。
画力が一切無くてもサンプルのような作品があっという間に作れるチートアイテムです。

ダウンロード

#07 Super Sketch Effect

写真から綺麗に線画を作れるエフェクトモックアップです。
手間のかかる線画を楽に作り、それをベースに塗りを行うとアニメ風の背景が低コストで作成可能です。

ダウンロード

#08 Pencil Drawing Styles Text Effect Mockup

鉛筆で描いた様なタッチでロゴが作れるテキストエフェクトです。
手書き風のロゴを求められている方にオススメ！

ダウンロード

鉛筆タッチが再現できるエフェクトモックアップ

【Photoshop】写真を鉛筆タッチにできるPSDエフェクト35選

鉛筆で描いたスケッチが再現できるエフェクトPSDです。
全て商用利用可能！
併せてチェックされてみませんか？

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

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

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

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

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

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

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

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

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

良質な素材をもっと見る

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

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

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

おわりに

以上、Photoshop（フォトショップ）で線画スケッチ風のタッチを再現する方法についてでした。
単に輪郭検出だけを使わず、他の機能を併用する事で更にリアルな手書き表現が可能です。

全て手作業で描くとなると膨大な時間と手間が必要ですが、フォトショップによる画像加工なら短時間で量産が可能！上手く使いこなしてクリエイティブの効率化を図りましょう。

ではまた！