【バナー作成練習】イチから自分でやって挫折・・・、Youtube動画を見て勉強！
在宅兼業主婦を目指す平凡専業主婦OKAYAです。
Photoshop購入！ということで、
早速試しにPhotoshopのアイコンをトレースして作成してみたのですが・・・。
この作成に、2時間もかかりました・・・笑
かかりすぎやろ！！
って感じですよね。笑
課題としては、Photoshopの使い方をほぼ忘れてました。笑
やりながら、こーでもない、あーでもないとやって2時間でした。
これはツールの使い方などを軽く思い出す程度に勉強しなければ・・・と感じ、
「ゼロイチWEBデザイン」という日本デザインスクールさんのアカウントで、Photoshop無料講座動画というものがあります。（2年前にアップされたキャンペーンの一環の動画です。）
こちらの動画を拝見しながら、軽く勉強させていただきました。
その勉強で作成したものを載せながら、勉強になった点、また作成物の内容等をお話していきます。
まずは動画通りに作成！
Photoshop講座第1弾は、Photoshopはどんなものなのか？というツール等の説明で、作成に入るのは第2段から！
Photoshopの使い方等に慣れるために、まずは動画通りに作成しました。
そのまま載せるのはあれなので、自分で色と文字の内容を変えたものを作るように！という課題で作成したものを載せます。
【800×300pxバナー】 作成時間：5分
背景はグラデーション。
強調したい文字は色を変更、文字色はグラデーションと同系色の色で全体的にまとまりよくした簡単なバナーです。
ここで勉強になった点は、
- 背景のロックを外してレイヤーにする
- レイヤーオプションの使い方
- 文字間隔の変更
の3点です。
背景のロックを外してレイヤーにする
背景のロックを外すこと、知りませんでしたー！！
ロックを外すことによって、各段にやりやすくなりました！
一からサイトやバナー、ロゴを作成するときには、こちらの作業必須ですね！
レイヤーオプションの使い方
Photoshopアイコンを作成したときにドロップシャドウで使ったのですが、
レイヤーそのものにグラデーションや塗りつぶしをするときは、レイヤーオプションでできるのですね。笑
本当に使い方忘れた。というか、スクールで習ったかな？というレベル。笑
恐らく、グラデーションツールとかでやっていたような・・・。
でもレイヤーオプションの方が楽だし簡単です。
文字間隔の変更（文字詰め）
これめっちゃ重要！！
文字を入力したら、必ず文字間隔を変更すること！これセットで覚えておくように！！
Photoshopアイコンを作成したとき、知っていれば別々で文字作らなかった！！笑
はい。アイコンを作成したときは、文字間隔がうまくできず、別々のレイヤーで作成しました・・・。
めっちゃタイムロス。笑
あとは反復練習するのみ！
動画通りに作成してから、機能そのものはやりながら覚えていくしかない！となり・・・
いろんなバナーを見つけては、バナーのトレースを行ってます。
Photoshopの機能面でもすごく勉強にはなるのですが、何と言ってもデザインとしての勉強にもなります！
なぜこの配置なのか、なぜこの色なのか、そもそもターゲットは誰なのか・・・など
なぜなぜをずっと考えながらトレースしています。
もし、このデザインの方がいいのではないかと思う点があれば、トレース後に修正版も作ります。
著作権上ここにはあげることはできませんが、まとめてノートとかにしたら自分の肥やしとなっていいかもしれないですね！
ちなみに、進捗状況は現時点で3つ作成しました！
最低でもバナー20個は作成しようと考えています。
まだまだ道のりは遠い・・・笑
このトレースについては、この20個が終わったらいろいろ書きたいと思います^^
OKAYA
