「レイヤーってなに…？」
超初心者な私は、本当にこのレベルでした。

そこから約30時間、バナートレース（模写）を4作品やってみました。

最初は「Photoshopをどう操作するの？」で頭がいっぱい。

でも4作品目になる頃には、

「この光はPhotoshopで作ってる？それとも素材？」
「この広告って、何枚の画像や図形を重ねているんだろう？」

と、操作方法ではなく“デザインの作られ方”を考えるようになっていました。

トレース画像について
本記事で取り上げるトレースはPhotoshopの学習目的で制作したものです。著作権等に配慮し、参考広告およびトレース画像そのものは掲載せず、参考元へのリンクを記載しています。

---

1作品目 🛍️ Final Saleの文字広告

参考にした広告
バナー牧場：FINAL SALE

記念すべき1作品目。とはいえ、今振り返ると「作品を作る」というより、
Photoshopの基本操作を覚えるところからスタート。

このときの私は、

• ダウンロードしたけど、どこから作ればいいの？
• アートボードってチェックするの？
• 文字入力の仕方は？
• 背景色はどうやって変えるの？
• 同じ位置に配置するにはどうやって確かめればいいの？
• レイヤーって なに？

という状態。混乱しながらも「わからないことが、わからない」状態。
操作するたびに、「これも知らない！」が出てきて、その都度調べながら操作😈

「Final Sale」という文字を作るだけなのに、操作方法が分からないのでとにかく時間がかかる。
今見ると簡単な広告ですが、
最初の1作品としてはPhotoshopの基本操作を知るいい練習になりました🌟

Photoshop 操作関連の参考：
　　Mappy Photoさん
　　https://youtube.com/@mappyphoto?si=TvGbXKWyUPpimDZu

---

2作品目 💻 PC無料回収の広告

参考にした広告
retrobanner：ご不要なパソコン回収無料 データ消去も全て無料で承ります パソコンファームのバナー

2作品目から、文字だけではなく画像やシェイプが登場しました。

1作品目では「文字を置く」だけで精一杯だったのに、
今度は写真と図形を組み合わせなければいけない。
急にPhotoshopっぽくなってきた……！🌟

ここから少しずつ、

「完成した広告って、1枚の画像を作っているわけじゃなくて、いろいろな素材を重ねてできているんだ」
ということが分かってきました。

写真、文字、背景、図形、影。
完成形だけを見ると1枚の広告ですが、実際にはいろいろな素材を重ねて作られています。

それまで広告を見ても「写真と文字があるな」くらいにしか思っていなかった私にとって、これは意外と大きな発見でした。

---

3作品目 🍔 マクドナルドの広告

参考にした広告
BANNER LIBRARY：本日2/28(土)だけ！炭酸ドリンクSサイズが100円！！！クーポンは公式アプリ限定！

3作品目は一気に難易度アップ。
マックの親しみやすいポップなフォントに、マスタード・ケチャップカラーが特徴的

特に困ったのが、広告に使われていた星のような、でも星ではないギザギザした図形。
「これ、どうやって作るの？？？」から始まりました。

Photoshopを始める前は、完成した広告を見ても
「文字と写真があるな」「明るい広告だな」くらいにしか見ていませんでした🧚

でも実際に自分で作ろうとすると、
「この形は何で作ってる？」「これはシェイプ？」「画像？」「Photoshopの機能？」
と、分解して見るようになりました。

Photoshopの操作を覚えたこと以上に、これが3作品目で一番大きかった変化かもしれません。

---

4作品目☀️ ANESSA MENの日焼け止め広告

参考にした広告
BANNER LIBRARY：「1本でヨユー。／ 紫外線をブロックしながら毛穴目立ち・テカリをケア。」

そして直近でトレースしたのが、ANESSA MENの日焼け止め広告。
夏らしい光とみずみずしさ💧がテーマにされていました。

この作品では、これまでよりさらに多くの操作を使いました。

など。

これまでは失敗するたびに「やり直し！？」と焦っていましたが、
スマートオブジェクトを知って、後から調整しやすい作り方があることを知りました💡

また、今回の広告では、”こういう時はどうするんだろう？”と考え、以下の操作も調べて操作しました💬
※今回のトレースでは不要でした。なので、もうやり方を忘れています。笑
　でも「こういう表現も作れるんだ」と知れただけでも一歩前進（と思いたい）

・画像を組み合わせて水滴がついているような写真を作る
・水の波紋を作る（加工により）
・逆光の作り方

---

一番難しいのは「Photoshopの操作」ではなかった

4作品やってみて、今の私が一番難しいと思っていることがあります。

それは
目の前にある表現が、Photoshopで作れるものなのか、
写真や素材を用意する必要があるものなのか分からないこと。

数回トレースをしただけでは、この感覚がまだ掴めません。
なので、今も見分けられないです。

ここが今、一番難しいです。

そして、この判断ができないことでトレースする素材選びにも影響することに気づきました。

自分のレベルでは再現が難しすぎる広告を選ぶと、
Photoshopの練習というより「素材探し」で何時間も使ってしまうこともあります。

でも、そもそも場数を踏まないと、
「あぁ、Photoshopじゃあできないのか」とわからないので、塩梅が難しいですね

---

Photoshop操作は少し慣れた。でも、時々イライラする

拡大したいだけなのに違うものを選択してしまったり。
移動したいだけなのに、変なレイヤーを動かしてしまったり。
間違えて消してしまったり。

「違うー！！私はそこを動かしたいんじゃないーー！泣」
となることもしょっちゅうあります。

そして何かやらかすたび、Command ＋ Z。
（一つ前の状態に戻したい時に使うショートカットキー）

ただ、何度も同じ操作をしているうちに、
「毎回メニューから選んでる場合じゃないな」と思うようになりました。

そこで、Mac自体のショートカットキーとAdobe公式のPhotoshopショートカットキーを
保存して、一旦Notionにまとめて必要時見れるようにしています✏️

全部暗記するつもりはないですが、
よく使うものから、自然に覚えていければいいかなと思っています。

Mac版はpdfからjpgに変換したものを、添付しました。
画像で欲しい方はこちらを保存してください🌠

---

制作時間⏰

⚠️操作方法・作り方を調べる時間も含めています

自分的にはまだまだ追い込めそうな部分もありましたが、
操作にまだ慣れていない間は”スピード感”も重視していきたいので
時間をかけつつも、ずっと同じ作品をやらないようにしています⚡️

この手法が正しいかどうかはわかりませんが、まずは行動しています💨

---

まとめ｜道のりは長い！

最初は「Photoshopの操作が分からない」。
今は「この表現はどう作られているんだろう？」。

少しずつですが、“Photoshopを操作する”から“デザインを見る”に意識が変わってきました。

次のトレースでは、操作を覚えるだけではなく、
「なぜこの色？」「なぜこの配置？」「なぜここに光を入れている？」
というところまで考えながら作ってみたいと思います。

まだまだ、デザイん。修行中です🌱

今回長い記事になりましたが、ご読了いただきありがとうございます。

これからも、初心者らしく地道にコツコツと頑張ります🌼
同じ初心者で苦戦しているかた、一緒に頑張りましょう。

未経験＋Webデザイン＝収益ゼロなのか　リアルな経過