【Photoshop】フォトショップでオリジナル缶バッチをデザインする方法！
- 2017.04.16
- Photoshop
どうもダサうぇぶ。です。
皆さんは缶バッチを知っていますか？
誰もが1度は手にとった経験があると思います。
今でも若い世代の方の間では、リュックやニット帽につけてファッションとして楽しんでいるそうですね。
今回はそんな缶バッチ風デザインをフォトショップで作成する方法を紹介していきます。
まずはフリー画像を準備する
作業工程に入る前に、今回は「イラストAC」でスーパーマンのイラストを使うことにします。
「イラストAC」にはたくさんの無料イラストがあるのでオススメです！
フォトショップでの作成手順
それでは実際にスーパーマンのフリーイラストを使って、フォトショップで缶バッチ風デザインを作る方法を解説していきます。
今回、フォトショップで使う項目で大事なポイントは、レイヤースタイル効果の「ベベルとエンボス」・「輪郭」・「シャドウ（内側）」・「ドロップシャドウ」です。
実はこの設定さえマスターすれば簡単に缶バッチ風のデザインを作成することができます。
１.楕円形ツールを使い「円」を描きます。
まずは新規ファイルを作成し（例：幅・高さ500pxのファイル）
新規レイヤーを作成したら楕円形ツールを使い円を描きます。
（円の描画色はお好みの色で作成）
2.スーパーマンのフリーイラストを円（レイヤー１）の上に配置
円を描いたら新規レイヤーを追加して、今回使うスーパーマンのフリーイラスト(背景が透明な.png素材)を配置します。
配置したら円（レイヤー１）に合わせて素材の大きさを調整します。
3.クリッピングマスクを使用する
先程配置したフリーイラスト（レイヤー2）を選択し、ウィンドウズなら「alt キー」Macなら「optionキー」を押しながら円（レイヤー１）とフリーイラスト（レイヤー2）の間をクリックします。すると（レイヤー2）に↓ のマークが出てきます。
これでクリッピングマスクがかかっている状態になり（レイヤー2）の画像を拡大しても円の中からはみ出なくなります。
4.円（レイヤー１）に「レイヤースタイル効果」をつける
円（レイヤー１）をダブルクリックすると下記のようなレイヤースタイルメニューが開きます。ここで「ベベルとエンボス」・「輪郭」・「シャドウ（内側）」・「ドロップシャドウ」の設定をしていきます。
まずは「ベベルとエンボス」を下記の画像のように設定します。
「ベベルとエンボスの下の輪郭」を下記の画像のように設定します。
「シャドウ（内側）」を下記の画像のように設定します。
「ドロップシャドウ」を下記の画像のように設定します。
全て設定をしてOKボタンをクリックすると円（レイヤー１）にレイヤースタイル効果が付き（立体的になる）下のような缶バッチ風のデザインが完成します。
レイヤーの一番下の背景をパターンオーバーレイで「布」の素材に変更すると下記のような画像になります。白い背景より雰囲気が出たと思います。
ちなみにレイヤー１を選択してフォトショップメニューの「編集＞塗りつぶし」からカラーを選び直すことで色違いの缶バッチ風デザインを作成することができちゃいます。
「円」以外の形でも作成できちゃいます。
上の説明では缶バッチ風ということで「円」で作成しましたが、形状を変えて、長方形ツールで作成してみると、WEBページでよくある「お問い合わせはこちら」風のボタンデザインを作ることができちゃいます。
↓ ホームページでよくある立体的なボタン風のデザイン。
＞＞ヒーロになりたいキミへ！お問い合わせはこちらから＜＜
レイヤースタイルメニューで「ベベルとエンボス」・「輪郭」・「シャドウ（内側）」・「ドロップシャドウ」の効果をかけてあげることでどの形状でも立体的なボタンのようなデザインを作成することができるというわけです。
お試しで吹き出し風のデザインで作成してみました。
まとめ
さて、今回はフォトショップで缶バッチ風デザインの作成方法をご紹介しましたがいかがでしたでしょうか？
今回の作成方法で、ぜひ覚えていただきたい重要な点は「レイヤースタイル効果」です。「ベベルとエンボス」・「輪郭」・「シャドウ（内側）」・ドロップシャドウ」などの設定を上手くかけることで「缶バッチ風デザイン」や「立体的なボタン」なども作れるので、あとは実際に作成していく上で、自分なりのスタイルを見つけてみてくださいね。
デザインの作成工程には、正解はありませんのでアイディア次第で色んな可能性が見い出せると思います。
長くなりましたが、今回はここで終わります。
それではまた！
最後にフォトショップ関連の他の過去記事も下記に掲載しときますので、良かったら見てみてください。
-
前の記事
祝！はてなブログ開設3ヶ月なので憧れのアレをやってみます！ 2017.04.15
-
次の記事
iPhoneよ人の指をなんだと思ってるんだい？ 2017.04.19
