見出し画像

【Webデザイン練習】バナートレースの、トレース①

こんにちは。
今日は、過去のバナートレース練習について投稿したいと思います。

タイトルに「トレースの、トレース」と書く理由は、
自力ではなく、動画で紹介されたトレース方法を模倣したからです。

私がバナートレースをしようと思ったきっかけは、デザインの基礎知識とphotoshopの使い方について、下記のように浅く圧倒的に不足していると感じたためです。

【デザイン知識について】
デザイン関連書籍で基礎知識のインプットはしていたものの、アウトプット経験はあまりできていない状態。
【Photoshopについて】
ある程度触ったことはあるが、シンプルなバナーしか作ることができず、限られたツールしか使いこなせていない状態。

そこで、まずはYoutubeに上がっているバナートレース動画を元に学習を進めていくこととしました。


今回参考にしたのは、MappyPhotoさんの下記の動画です。

制作したバナーはこちら

こちらのバナー制作にあたって、学習したPhotoshop機能は下記のとおりです。

制作において使用したphotoshop機能

  • テーブルの制作

    • 木目パターンでの塗りつぶし

    • 木目をテーブルの形に変更

      • 選択範囲ツール、レイヤーマスク

    • テーブルの遠近感を出す

      • スマートオブジェクト、変形

  • 月の制作

    • カラーオーバーレイ(描画モードをオーバーレイ)を使用

  • 星の表現

    • ソフト円ブラシを使用

  • 商品の写真加工

    • camera rowフィルターによる色調補正

学習したショートカットキー

  • 選択解除

    • ctrl + D

  • 描画色の塗りつぶし

    • alt + backspace

  • マスクを表示・非表示

    • shift + マスクをクリック


もともとツールの機能について知っていても、テーブルなどの物をゼロから作ろうとしたときに、どのツールを組み合わせて作っていけばいいのか、という部分を学ぶことができました。

#webデザイン #webデザイナー #バナー模写 #バナートレース

いいなと思ったら応援しよう!