この記事は3分で読めます

【Photoshop】写真をイラスト風に加工しよう

  • 投稿日
  • 更新日

あとで読む

【Photoshop】写真をイラスト風に加工しよう

今回はPhotoshopを使って、写真をイラスト風に加工する方法を紹介します。Webサイトのデザインによって挿入する写真のイメージを変えたり、個性のあるスタイルにすることができるので、是非習得しましょう。

イッパイアッテナ

はじめまして、イッパイアッテナです。

ITと教養で、優秀なネコの手となり、あなたのあらゆる問題を解決します。あなたの相談役だったり、デザイナーだったり、広報だったり、わたしたちは”イッパイ”の顔をあなたに見せることができます。

フォトショで写真をイラスト加工

ここでは、フォトショでイラスト加工する方法を2通り紹介します。自分にあった方法で試してみましょう。

エッジを生かした線画風イラスト

STEP
任意の写真を読み込み

フォトショにイラストにしたい写真をドロップします。

STEP
写真をコピー

背景レイヤーを選択しながら、CommandJ を押して写真レイヤーをコピーします。

STEP
写真のエッジの縁取り

コピーしたレイヤーを選択した状態で、メニューバーのフィルターから「ぼかし」>「ぼかし(詳細)」を選択します。

ぼかし(詳細)の設定画面が表示されるので、モードを「エッジのみ」に選択します。

プレビューを見ながら、「半径」と「しきい値」で、写真のエッジがはっきりするように調整し、OKをクリックします。

「半径」は、ぼかしを適用する広さのことです。高い数値ほどエッジがはっきりします。また、「しきい値」は、ぼかしを適用しない範囲です。0に近いほど、全体にぼかしが適用されます。

さらに、メニューのイメージから「色調補正」>「階調の反転」を選択し、白黒を反転させます。

写真のエッジを縁取った、線画のようなイラストが完成しました。

STEP
色調補正

コピーしたレイヤーを選択した状態で、レイヤーパネルの描画モードの中から、「乗算」を選択します。

背景レイヤー(元写真)にSTEP3で作成した黒いラインが透過され、イラストに色がついたような画像になりました。

このままだとエッジのラインが強い為、コピーレイヤーを選択した状態で、イメージ>「色調補正」>「色相・彩度」を選択し、明度を上げて線を薄くします。

さらに、背景レイヤーを選択した状態で、イメージ>色調補正で写真全体の色味をイラスト風に近づけます。

明るさ・コントラスト、また色相・彩度を高めに設定すると、よりイラスト感が増します!

STEP
完成

フィルターギャラリーで瞬間イラスト化

次に紹介するのは、Photoshopの機能である、フィルターギャラリーを使って写真を一瞬でイラスト化する方法です。

STEP
写真の取り込み

初めと同じ方法で写真を取り込み、レイヤーをコピーします。

STEP
フィルターを適用

コピーレイヤーを選択した状態で、メニューのフィルターから「フィルターギャラリー」を選択します。

フィルターギャラリーの中から「カットアウト」を選択し、任意でレベル数エッジの太さエッジの正確さを調整します。

フィルターギャラリーの中には様々なフィルターがありますが、中でも「カットアウト」は、色数を減らしてイラスト風に加工できるフィルターです。

STEP
完成

おわりに

いかがでしたか?今回は2通りの方法で写真をイラスト化する方法を紹介しました。特に2つ目のフィルターギャラリーでは、他にも様々なフィルターがある為、お好みに合わせて加工を施すことができます。これを活用して、オリジナリティのある画像を素材を作ってみましょう。

この記事を書いた人

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

Web制作について相談してみませんか?

必須は必須項目です。弊社へお問い合わせいただく方は、下記の「個人情報の取り扱いについて」を必ずお読みください。

会社名

任意

お名前

必須

メールアドレス

必須

電話番号

任意

お問い合わせ内容

必須