![見出し画像](https://assets.st-note.com/production/uploads/images/71141265/rectangle_large_type_2_807c22e97c9836a87151d04aade76a9f.png?width=1200)
第1回トレース練習課題(バナー編)
こんにちは!Unique Labのshimaoです!
「みんなでWEBサイト作ろう!企画」を約3ヶ月にわたってやっていたため、残りの方をほったらかしにしてしまいすみません。。。mm
ちなみに「みんなでWEBサイト作ろう企画第1弾
【カウントダウンライブサイト】」はこちらよりご覧ください!
https://www.instagram.com/shimajam2021/
いい作品ばかりなので、次回はぜひご参加ください!
#いいサイトだからもっといいコーディングにしたかった #知識の浅さ、コーディングディレクションの弱さが露呈しました #次回はp5.jsを実装して度肝抜かします
======================
さて!本題ですが、第1回トレース課題の内容です!
#本当は第4回目なんです(小声)
【開催日時】
2022年2月26日(土)14:00- 17:00(オンライン)
途中入場・途中退出OK
![](https://assets.st-note.com/img/1644993516487-MdtwPfhrMb.png?width=1200)
第1回トレース課題
「 ツールを理解しトレースする 」
![](https://assets.st-note.com/img/1643617523445-43iBB0Zd0T.png?width=1200)
参加URLは下記に記載します!
まずはトレース会の詳細をご覧ください!
1. HotPlate Grande size 【Bruno】
トレースレベル | ★☆☆☆☆
![](https://assets.st-note.com/img/1643617632769-ZjktC3Qtpw.jpg)
一つ目は、BrunoさんのHotPlateのバナーです。
基本操作を勉強している初心者の方向けです!
おしゃれでつい欲しくなっちゃう、いいバナーだと思います!
こんなに素敵なのに、とっても簡単に作れます😋
学べること
・画像トリミング(マスク)
・画像切り抜き
・フォントインストール
・文字要素を斜めに(シアー)
2. PLAY LIST 【資生堂】
トレースレベル | ★★☆☆☆
![](https://assets.st-note.com/img/1643618499316-QWUBzsGxXg.jpg)
2つ目は資生堂さんのPLAY LISTバナーです!
配色もレイアウトも大人可愛くて綺麗なバナーです!
さすが資生堂さん。
学べること
・商品画像の切り抜き(1個だけすごく難しい)
・影の付け方(ドロップシャドウ)
・光彩の付け方
3. スマートシューズ 【SUNTORY】
トレースレベル | ★★★★☆
![](https://assets.st-note.com/img/1643619002024-719tnzJngB.jpg)
3つ目はサントリーさんのスマートシューズです!
特茶とコラボして限定品当たる。的なバナーですね!
1. HotPlate Grande sizeや、2. PLAY LISTと比べると激ムズです🤣
クオリティの高いバナーは様々な場面で求められます。一度経験すると技術の転用ができますので一緒に頑張りましょう😂!
学べること
・商品画像の切り抜き
・商品の反射(うっすら下に透けてるやつです)
・商品の陰影(かたいライトで撮影したっぽく見せるやつ)
・光彩の付け方(光ってるとこ)
今回のトレース課題は以上です!
======================
参加方法
①素材データをダウンロード
下記URLから素材データをダウンロードしてください。
https://firestorage.jp/download/b7a9e38d34564124a2ca6081b455a5c2d49d9a51
![](https://assets.st-note.com/img/1644647650323-p2oyrqMr9f.png?width=1200)
フォルダ内の概要
「origine」フォルダ・・・トレース元となる画像データです。
「sozai」フォルダ・・・トレースに使用する画像データです。
「text」エディター・・・コピペできるテキストです。
「trace」フォルダ・・・私がトレースしたデータです(レイヤーの確認用)
②Photoshopを使用しトレースする
Photoshopを持っていない方は体験版を使用していただいても大丈夫です。
代替ツールとしてIllustrator、XD、Figmaを使用してトレースしていただいても問題ありません。
======================
下記のどちらかを選択してください。
======================
③-1 "一緒にトレース" する場合
③-2 当日参加できないので "トレースを提出" する場合
③-1 「一緒にトレースする」場合
【開催日時】
2022年2月26日(土)14:00- 17:00(オンライン)
途中入場・途中退出OK
参加URL
https://uniiiiiiiquebox.ovice.in/ ←PC /Chrome推奨
![](https://assets.st-note.com/img/1644993188239-SsVY2e9wi0.png?width=1200)
事前に準備していただきたいもの
・Photoshop2020もしくは2021もしくは2022
(体験版ダウンロードリンク)https://0e0.pw/YZ0k
インストール方法を教えて欲しい方は事前にご連絡ください!
③-2 当日参加できないのでトレースを提出する場合
下記GoogleDriveに自身の名前フォルダを作成→アップロード→完了のご連絡をお願いします。
https://drive.google.com/drive/u/0/folders/1W1zgYUuU3M6nhJcvpTxAIZakkgqUKvi9
後日、フィードバック・解説のご連絡をさせていただきます。
======================
参加条件
① 事前にPhotoshopをインストールしたPCを準備できる人
(見てるだけの方はインストールしなくて大丈夫です!)
#どうせならやってほしい
② 周りの人とペースを合わせることができる人
(スキルレベルは人により様々です。ちょっとしたことで時間をとってしまうことが非常に多いので、ペースを合わせれる方のみご参加ください。)
======================
他にも色々やりまっせ!
今回は「バナートレース編」です。
トレースシリーズは、現在「LPトレース編」を準備中で、計画としては「コーポレートサイトトレース編」と「アプリUIトレース編」を予定しています!
#がんばります(汗 #ちょっと待ってね
![](https://assets.st-note.com/img/1644654313394-aYbHLMI6Re.png?width=1200)
ご参加お待ちしてます!
![](https://assets.st-note.com/img/1644650900424-bPamua5G3M.png?width=1200)