Photoshopでステンドグラス風に加工する方法♪【 アイキャッチにも! 】

Photoshopでステンドグラス風に加工する方法♪ Photoshop
さくらもち
写真をステンドグラス風にしてみたいんだけど、良い方法あるかなぁ?
ウサギさん
さくらもちちゃんのオシャレな写真がもっとオシャレになりそう♪
モチ
想像だけど、作るの大変そう……

今回はこんなお悩みにお答えします!

写真をステンドグラス風に加工する方法ですが、実は割と簡単にできちゃいます

手順を覚えてしまえばどんな写真でもステンドグラス風にできるので、この記事を読んで覚えちゃいましょう♪

さらにプラスアルファでオシャレなアイキャッチ風画像に加工した例も載せますので、参考にしてもらえたら嬉しいです。

それでは、早速いってみましょうー!

 記事でわかること

  • ・Photoshopでステンドグラス風に加工する方法

 記事の信頼性

筆者のかがみ@cony_tas)はWeb/UIデザイナー歴8年になります。
ゲーム会社でさまざまなWebサイトやゲームUIを制作しています。

Photoshopでステンドグラス風に加工する方法♪

今回は以下の環境で制作をしていきます。
また写真は「O-DAN」よりお借りしました。

  • Windows10
  • Photoshop CC

写真をぼかす

何の写真を使おうかなと悩んだんですが、季節的に桜の写真にしてみました!
下の画像をステンドグラス風に加工していきます。

桜の写真

まずは写真を複製して、複製した写真をぼかします。数値は下の写真と同じくらいのぼかしになるくらいに調整してください。

  • フィルター ⇒ ぼかし ⇒ ぼかし(ガウス)
写真にぼかしをかける

水晶フィルターを適用する

次にぼかした写真に、水晶フィルターを適用します
水晶のセルの大きさの数値は、下の写真を参考にして同じくらいのセルの大きさにしてもいいですし、お好みの大きさに調整していただいても大丈夫です!

  • フィルター ⇒ ピクセレート ⇒ 水晶
写真に水晶フィルターを適用

水晶フィルターを適用したら、水晶を適用したレイヤーを複製してください
複製して上に重なっているレイヤーに、輪郭検出フィルターを適用します

  • フィルター ⇒ 表現方法 ⇒ 輪郭検出
写真に輪郭検出フィルターを適用

輪郭検出フィルターを適用すると水晶の輪郭部分を検出することができるので、このレイヤーの色を落とすために彩度を落としてください

輪郭検出をした後彩度を下げる

各レイヤーを重ねる

それでは最後に各レイヤーを順番に重ねていきます
最初に、水晶フィルターを適用した写真をソフトライトで重ねてください。使う写真によって重ねたレイヤーの透明度を下げたりして良い感じに見えるように調整してみてください♪

  • 水晶フィルターを適用した写真 ⇒ ソフトライトで重ねる
水晶フィルターを適用した写真をソフトライトで重ねる

その上に輪郭検出フィルターで輪郭を検出して彩度を落としたレイヤーを、上からオーバーレイで重ねます
重ねる際に、レイヤースタイルのカラーオーバーレイで好みの色をオーバーレイで重ねるといい感じに見えることもあるので、お好きな方法でお試しください。

輪郭検出フィルターを適用した写真をオーバーレイで重ねる

これでステンドグラス風加工の完成です!

アイキャッチ画像の例

おまけで、作ったステンドグラス風写真をもとにアイキャッチ画像を作ってみました♪

アイキャッチ画像の例

さくらの花びらブラシを作って散布してみたり、キラキラエフェクトをかけたりしてみました。
なかなか良い感じになったかなぁと思います^^

さくらもち
すごいかわいい! エフェクトをかけるとさらによくなるね♪

最後に:Photoshopでステンドグラス風に加工する方法♪

今回は写真をPhotoshopでステンドグラス風に加工する方法をご紹介しました。

Photoshopはその名の通り写真の加工を得意としているので、やり方次第で無数に加工できると思います

今後もいろんな加工方法をご紹介していこうと思いますので、また遊びにきてくださいね!

それでは、今回はこの辺で!

さくらもち
いつも遊びにきてくれて、ありがと~♪