こんにちは！fu-miです。
私は現在バナー制作ができるようになることを目標に
バナー模写に取り組んでいます。
ただなぞって作るだけでも、
様々な加工方法を自分なりに考えたり調べたりすることで
とても勉強になるのがバナー模写です。
今回は上記のバナーを模写した際の流れと
加工の方法をまとめて書いていきたいと思います！
まず模写するバナーを探す
今回選んだバナーは「BANNER LIBRARY」というサイトから選びました。
こちらのサイトに掲載してあるバナーは画質が良いのでとてもおすすめです。
気になったバナーは「お気に入りリスト」に登録しておくことができます。
私は時間があるときにチェックして、バナーを登録するようにしています。
いざバナー模写するぞ！というタイミングになったらお気に入りリストに登録しておいたバナーの中から選んで、バナー画像をPCに保存します。
見本のバナー画像をPhotoshopで開く
保存したバナー画像を右クリックして「このアプリケーションを開く」から
「Adobe Photoshop 2022」を選択して開きます。
開いたバナー画像を背景レイヤーから通常レイヤーにする
開いたバナー画像はレイヤーパネルで背景レイヤーとして開かれます。
背景レイヤーはロックがかかっている状態なので通常レイヤーに変更します。
1.背景レイヤーの右端の南京錠🔒マークをクリックすると、通常レイヤーになる。 2.レイヤー名は背景レイヤーからレイヤー0となるので、レイヤー名を「見本」と変更しておく。
この「見本」レイヤーは、このあと不透明度を変更して下書きのようにして使います。
背景レイヤーでロックがかかったままだと不透明度が変更できないのでロック解除のために
通常レイヤーに変更しました。
まずは模写バナーの背景から作る
四角形ツールを選んで画面をクリックすると、四角形のサイズを入力するダイアログボックスが
出てくるので、そこにサイズを入力して同サイズの四角形を作成します。
今回模写したバナーのサイズは横750px、縦656pxでした。
この四角形が模写バナーの背景になります。
背景をグラデーションツールで塗る
今回模写したバナーは背景の色がグラデーションのようになっていました。
なのでグラデーションツールで見本バナーを参考に色を設定し、先ほど作成した四角形を
塗りつぶします。
文字以外のパーツを作る
背景ができたら文字以外のパーツを作っていきます。
今回模写したバナーには3つのパーツがあります。
1.角が丸くなった棒のようなパーツ
2.紙吹雪のパーツ
3.なみなみの円のパーツ
この3つを作っていきます。
角が丸くなった棒のようなパーツの作り方
まずラインツールを選択します。
オプションバーの設定
・塗りつぶしなし
・線：17px
・通常の線を選択し、先端は丸を選択。
設定できたらラインツールで線を引いていきます。（線を引くと自動で新規レイヤーが作成される）
線のレイヤーを、見本のパーツを同じ数だけ複製します。
複製の仕方
1.線のレイヤーが選択されていることを確認。
2.移動ツールを選択しoptionキーを押しながらドラックすると複製できる。
もしく[command⌘キー＋J ]で複製。
複製した線を見本を参考にして配置して、色をつけます。
紙吹雪の作り方
まずペンツールを選択します。
1.四角や三角のパスをペンツールで描く。 2.作成したパスを塗りつぶして色をつける。 （このとき、1つ1つのパーツを全て別のレイヤーで作る） 3.見本を見ると紙吹雪は3色なので、各色で3つずつパーツを作る。 （計9つのレイヤーが出来る） 4.移動ツールに持ち替えて、オプジョンバーの自動選択にチェックを入れる。 5.作成した9つのパーツをひたすら複製しながら配置する。 （複製のやり方は上記参照。） 6.配置してから傾きやサイズ感がバラバラになるよう微調整する。
これで紙吹雪のパーツが配置できました。
散布ブラシをつくることも考えましたが、パーツの量があまり多くなかったので
このようなやり方にしました。
なみなみの円の作り方
多角形ツールを選択します。
画像上をクリックすると「多角形を作成」のダイアログボックスが出てくるので設定していきます。
ダイアログボックスの設定 ・幅380px 高さ380px ・角数50 ・角丸の半径7px ・星の比率93％ ・星のくぼみをなめらかにするにチェック ・中心からにチェック
これでOKを押すとなみなみの円ができました。
オプションバーで塗りを白、線を無しに設定し、
サイズを見本を参考に微調整します。
パーツが全て完成したら文字を入力していく
パーツがすべて完成したので文字を入れていきます。
このバナーで印象的なフォントは
上部のアーチ状に配置された文字と、
中央にある「5,000」の文字などがインライン文字になっているところかと思います。
その部分をまず作っていきます。
インライン文字をAdobe Fontでアクティベートする
私がアクティベートしているフィントの中にはインラインのフィントがほとんどなかったので、
新たにAdobe Fontからアクティベートしました。
Adobe fontで「inline」で検索をかけてフォントを探し、
よさそうなものをアクティベートしました。
このときは「Oskar Inline」というフォントを使用しました。
文字をアーチ状に配置する方法
上部のアーチ状に配置されている文字の入れ方です。
まずペンツールを選択します。
1.ペンツールで、文字を入れたいところにアーチ状のパスを描く。 2.テキストツールに持ち替えてアーチ状のパスの上をクリックすると、 パスの上にテキストが入力できるようになる。 そのままテキストを打ち込めばパスに沿ってテキストを配置することが出来る。
このとき私はパスの左端にカーソルを合わせテキストを入力しようとしたのですが、文字が中央揃えになっていたため左側のパスのスペースが足りなくて『文字が入力できない！』と困ってしまいました。（左揃えに直して解決しました。）
もし入力できなかったときは何揃えになっているか確認した方がいいかもしれません。
残りの文字を入力して完成♪
残りの文字を入力して完成です。
フォント選びや配置の微調整で文字の入力もなかなか時間がかかりますが、
なるべく見本のバナーと同じ印象のフォント、同じ配置やサイズ感でできるように
気をつけます。
模写した振り返りをする！
バナー模写した振り返りをしていきます。
- 今回のバナー模写ではやりかたを調べては試して。。をたくさん繰り返したため
時間がかかってしまった。
バナー模写にかける時間は1時間程度を目標に行うのが良い。
時間のリミットがないと作業にスピード感が出ないから時間を設定することは大切。 - あしらいの作り方がわからない。
作ったことがないものは時間がかかるので「やったことある」を増やす。 - 完成したものをあらためて見比べたときに、中央の「5,000」の配置や
サイズ感が気になることに気がついた。
これは保存した画像を見比べて気がついたので、最終的に全体のバランスを見るように
気をつける。
・次回からはタイマーを設定する。
・あしらいの作り方を勉強する。
・保存前に全体像を確認して微調整する。
おわりに
バナーを作るときの流れを確立していくと
作業の効率も上がるし、迷いもなくなります。
自分でバナーを作るようになったら文字組みやデザインを考える時間も必要なので
もっと作業時間が多くなるはず。。
プロのデザイナーさんがどのような工程でバナー制作をしているか
調べたり自分のやりやすいように工夫して、より効率アップしていきたいです！
今回模写したような素敵なバナーが自分でも作れるようになりたいな(๑>◡<๑)
これからも練習していきます！
コメント