Photoshop(フォトショップ)を使ってメタリックでカッコいい質感のアイコンをゼロから作る方法をフォトショ初心者の方に解説します。
変哲の無いフラットなアイコンを上質な金属のプレートのようなアイコンが自作できます。
テクスチャやレイヤースタイルの使い方、PNGやJPEG画像への効率的な書き出し方法などを解説します。
これからPhotoshopを始められる方にも再現できるよう、順を追って書き出しテクニックを解説します!
この記事の目次
Photoshopで上記のようなアイコンをゼロから作れます。
ベースの下地からアイコンの質感付与やストライプパターンなど、各種画像への書き出し等が学べます。
Webデザインやバナー制作、各種UIデザイン等に活用できる制作テクニックですよ!
Photoshopでメタリックな質感のアイコンを作る方法を解説します。
フォトショ初心者の方にも再現できるように順を追って解説いたします!
未導入の方はフォトプラン公式サイトから入手可能。(月額は最安の1,078円、7日間の無料体験が可能)
なお、AdobeCCのプランはコチラの記事で徹底解説しています。
ベースオブジェクトを作成
上記のAIファイルをIllustratorで開き、使いたいアイコンを [ Ctrl + C ] でコピー。その後Photoshopで [ Ctrl + V ] でスマートオブジェクト形式でペーストしました。
※詳しい方法はコチラの記事で詳しく解説しています。
メタリックテクスチャを重ねる
金属の質感をアップする
レイヤーパネル下部の [ fx ] をクリックすると新規レイヤースタイルが追加できます。
[ ドロップシャドウ ] をクリックしましょう。
※レイヤースタイルの使い方はコチラの記事で詳しく解説しています。
ストライプパターンを追加
※新規でストライプパターンを作る方法はコチラの記事で詳しく解説しています。
レイヤーパネル下部の [ fx ] → [ パターンオーバーレイ ] を追加。
描画モード:乗算 不透明度:30%
パターン:追加したストライプ柄
描画モード:通常 不透明度:95%
逆方向にチェック シェイプ内で作成にチェック
スタイル:円形 角度:90°
比率:150%
方法:クラシック
PNGやJPEG等で書き出す方法
紙媒体やPDF形式で作成したポートフォリオの品質を手っ取り早く高めるには、高品質なテンプレートの活用が最も効率的かつ効果的です。
商用利用可能で高品質テンプレートばかり厳選!
今まで意識しなかった多くの「気づき」に出会えますよ。
※なお、ポートフォリオ制作はInDesign(インデザイン)を使うのが最も効率的です。
コチラでインデザ初心者の方向けにポートフォリオテンプレートの使い方を詳しく解説しております。

2時間あればポートフォリオが作れます。
編集にはInDesignが必須、未導入の方はInDesign公式サイトから入手しておきましょう。
ダウンロードする

A4に印刷したポートフォリオ、PDF形式、どちらも短時間で作成可能です。
ダウンロードする


作品を大きく見せる、制作過程を見せる、複数見せる、横長作品を画面内に綺麗に収める等、どんなパターンにも当てはめる事が可能ですよ。
ダウンロードする

単色に文字だけで構成した表紙も素敵です。
ページ中身のレイアウトパターンも豊富、あえて表紙をシンプルにする手法もアリですよ。
ダウンロードする
下記リンクで多数の高品質なポートフォリオテンプレートを紹介しています!
Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。
下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。
制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします!
厳選!ポートフォリオ用テンプレート35選
デジタル媒体向けポートフォリオテンプレ素材35選
様々なモックアップテンプレート50選
下記記事で良質な素材を紹介しております。併せてチェックしてください!
以上、Photoshop(フォトショップ)でメタリックな質感のカッコいいアイコンをゼロから作る方法とPNGやJPEG等の画像に書き出す方法についてでした。
フラットなアイコンだけでなく、質感のあるアイコンを作りたい時に使える制作テクニックです。
ベースを作ればアイコンを差し替えてレイヤースタイルをコピーするだけ!
デザイン違いのアイコンをサクサク作れますよ。
Webサイトやバナーデザイン、アプリの画面デザイン等、UIデザイン系の業務で応用できるので是非ご活用ください!
ではまた!
フォトショの中級~上級テクニックを網羅的に学習できます。

ポートフォリオ制作はイラレよりInDesignの方が効率的に作成できます。
まだInDesignを導入されていない方はInDesign公式サイトから入手できます。
高品質で商用利用可能なポートフォリオテンプレート38選はコチラ!
フォトショ基本操作





















バナーやUIをデザイン






様々な質感を再現








写真の雰囲気を激変させる























便利な画像加工テクニック




















機能追加・その他の機能










フォトショップのお困りごと








画像を激変!エフェクトPSD








その他Photoshop用の素材










