
【Webデザイン練習】バナートレースの、トレース①
こんにちは。
今日は、過去のバナートレース練習について投稿したいと思います。
タイトルに「トレースの、トレース」と書く理由は、
自力ではなく、動画で紹介されたトレース方法を模倣したからです。
私がバナートレースをしようと思ったきっかけは、デザインの基礎知識とphotoshopの使い方について、下記のように浅く圧倒的に不足していると感じたためです。
【デザイン知識について】
デザイン関連書籍で基礎知識のインプットはしていたものの、アウトプット経験はあまりできていない状態。
【Photoshopについて】
ある程度触ったことはあるが、シンプルなバナーしか作ることができず、限られたツールしか使いこなせていない状態。
そこで、まずはYoutubeに上がっているバナートレース動画を元に学習を進めていくこととしました。
今回参考にしたのは、MappyPhotoさんの下記の動画です。
制作したバナーはこちら

こちらのバナー制作にあたって、学習したPhotoshop機能は下記のとおりです。
制作において使用したphotoshop機能
テーブルの制作
木目パターンでの塗りつぶし
木目をテーブルの形に変更
選択範囲ツール、レイヤーマスク
テーブルの遠近感を出す
スマートオブジェクト、変形
月の制作
カラーオーバーレイ(描画モードをオーバーレイ)を使用
星の表現
ソフト円ブラシを使用
商品の写真加工
camera rowフィルターによる色調補正
学習したショートカットキー
選択解除
ctrl + D
描画色の塗りつぶし
alt + backspace
マスクを表示・非表示
shift + マスクをクリック
もともとツールの機能について知っていても、テーブルなどの物をゼロから作ろうとしたときに、どのツールを組み合わせて作っていけばいいのか、という部分を学ぶことができました。