実践Webデザインスキル - 第2章 Lesson4

バナーの作り方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

「セールのバナー」を作成していきましょう。



この動画で学べること

・バナーの作成方法



バナーを作る方法

今回は、セールバナーを作成したいと思います。
まず、背景から作るので、ツールバーから長方形ツールに切り替えて、縦100px ,横300pxの長方形を作っていください。
色は、カラーピッカーを立ち上げて、見本の赤色をスポイトします。



背景ができたら、文字を作成していきます。
「期間限定セール」と入力し、オプションバーの右上にある文字の確定をクリックしてください。
文字パネルでフォント、大きさ、太さ、を決め、移動ツールで一度背景の上に置いてみます。

文字の字間がバラバラなので、調整していきましょう。
文字の編集モードに入って文字の間隔を調整したい所でクリックします。
Altを押しながら矢印キーを押すと、字間の調整ができます。
また、見本と同じように文字にレイヤースタイルのドロップシャドウをかけて、立体的に見えるようにします。



背景の「SALE!」の文字もテキストツールとテキストパネルで作成し、最後にレイヤーを下に持って行きましょう。
レイヤーの順番を変えることで、背景に馴染むようになりました。





レイヤースタイルを他のレイヤーにコピーする方法

レイヤースタイルをつまみ、Altをおしながらかけたいレイヤーのところまでもっていきます。
そこで離すと、簡単に同じレイヤースタイルをけけることができます。
この方法は、Webサイトを作るときに非常によく使うショートカットですので、必ず覚えるようにしましょう。
ショートカットを覚えることで、作業を効率化できるので、時間短縮になります。