【Photoshop】今日からはじめるバナー模写のやり方

Webデザイナーになるために独学で学ぶとすると必ずと言っていいほどPhotoshopを使ったバナー模写を進められます。

Photoshop初心者がバナー模写するのに必要なところだけまとめました。

模写するバナーを選ぶ

模写1日目なので超超超〜カンタンなバナーを選びます。

初日から、つまらない、大変だ、終わらない、才能ないかも…と楽しくなくなることは絶対に避ける。

今日の目標は「文字完成」だけを目指します。

模写初心者のバナー選びとしては、文字だけのバナーを選ぶといいそう。

BANNER LIBRARY のメニュー 【Taste→文字組み・文字だけ】 から選びます。

今回はアパレルショップのGWセールのバナー模写を選びました。

模写するためのPhotoshop準備

Photoshopでバナー模写する方法は色々あると思いますが、今回はアートボートを横に並べて見ながら模写していく方法で進めます。

Photoshopで模写します、とだけ書かれたブログはたくさんあったけど
具体的なやり方を書かれたブログは少なかったのでやったことを順番に書いていきます。

アートボードを2枚並べる

模写するバナーのサイズを測り、同じカンパスサイズを入力。

バナーサイズの測り方:Macの場合は画像を右クリック→情報を見る→大きさにサイズが書いてあります。

単位はピクセル。
アートボードにチェックを入れる。
作成をクリック。

アートボード1を選択した状態で、アートボードツールを選択。

右の+マークをクリックし、右横にアートボード2を作成。

アートボード1に模写するバナーを表示させる

アートボード1を選択した状態で【ファイル→埋め込みを配置→バナー選択】

Photoshopで模写していく

ガイド作成

【表示→新規ガイドレイアウトを作成】
細かくガイドを表示させたかったけど時間がかかりそうなので
今日は目分量で作っていく。
ガイドは終わるまでにマスターしておきたい。

背景・色

まずは背景から。背景は1色。色は【スポイトツール】で調べる。

本当はスポイトで確認せず見て色を決めた方が良さそうだけど1日目はスポイトで調べることにする。

フォント・フォントサイズ・文字の傾き

フォント・サイズ・傾きはプロパティで変更。

フォントは検索するツールあるけど
フォントを見分けられるようになりたいから
似たようなフォント探す。

サイズも見て近づける。

文字の角度を調整は【プロパティ→角度】で設定。

Photoshop模写の感想

初日は文字のみですが、フォントの設定が難しかったです。

操作中に不意にツールが切り替わってしまうので
Photoshopのクセに早く慣れたい。

色はスポイトを使ったけどいずれは見ただけで似た色を設定できるようにしたい。

文字だけで印象がガラッと変わることがわかったので、
次回も文字中心に模写していきます。