実践Webデザインスキル - 第3章 Lesson6

第六回:無料のアイコンを利用したバナーを作ってみよう

   

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

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

外部ウェブサービスより無料のアイコンをダウンロードし、デザインに合うようなバナーを作成します。



この動画で学べること

・サイドバーのボタンを作る方法



サイドバーのボタン背景を作っていこう

サイドバーのバナーを作成していきますが、まず背景を作成しましょう。
長方形ツールに切り替え、幅280px、高さ50pxの長方形を作ります。
色は白に近い水色、境界線は1pxでロゴと同じ水色にしていきます。




アイコンを配置しよう

次にアイコンを表示していきましょう。
左に15pxの余白を作り、横幅25pxのアイコンを配置していきます。
メニューバーのファイルから「埋め込みを配置」でアイコンを配置します。
大きさを調節し、ガイドぴったりに移動させます。


今のままでは黒いアイコンなので、レイヤースタイルのカラーオーバーレイを使って、色変えていきます。
アイコンが完成したら、以下の手順で要素を下にある四角形の真ん中に配置していきましょう。
(1)要素レイヤーと四角形レイヤーを複数選択(command ⌘+クリック、Ctrl +クリック)
(2)移動ツールに切り替える
(3)おオプションバーの整列ボタンで整列




ボタンにテキストを入れよう

次に、ボタンのテキスト部分を作成しましょう。
テキストツールに切り替えて、クリックで文字の入力モードに入ります。
テキストを入力し、オプションバーから確定したら、文字パネルかスタイルを変更してください。
文字が完成したら移動ツールに切り替えて、作成したアイコンの右に余白を12pxとって配置します。
これで1つ目のボタンが完成です。




ボタンのレイヤーをグループにまとめて複製しよう


今回は同じようなボタンが3つ並んでいるので、完成したボタンのレイヤーをまとめて複製し、
テキストとアイコンを修正することによって、作業を効率化していきましょう。


今回は、このようなサイドバーのボタンが完成しました。