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

パンくずリストの作り方

   

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

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

今回は、見本を真似してパンくずリストをデザインする方法を見ていきましょう。
ガイドを作成、表示して、1px単位の綺麗なデザインを目指します。


この動画で学べること

・パンくずリストの作成のしかた



パンくずリストとは?

パンくずリストというのは一目で今自分がいるページをわかりやすくするためのものです。
今回はパンくずリスト真似しながら一緒に作っていきましょう。



パンくずリストの背景を作ろう

まずは基礎となる背景を作っていきたいと思います。
メニューバーの表示から表示・非表示へ進み、ガイドを選択します。
そうするとあらかじめ作成されていた水色の線のガイドが表示されます。


ツールバーから長方形ツールに切り替えて、ガイドに合わせて背景を作ります。
ここではカラーピッカーを使って背景の色や線の色もそっくりそのまま真似していきましょう。



ホームのアイコンを作っていこう

次は左側にあるホームのアイコンを作成していきます。
今回はインターネットからダウンロードし、ホームの形を作ります。
ダウンロードしたファイルをドラッグ&ドロップで Photoshop の画像を配置させます。
バンディングボックスを使って画像の大きさなどを調整してください。
色や位置など、細かなところまで頑張って真似していきましょう。




文字を入力していこう

ツールバーからテキストツールで切り替えて、文字を入力していきます。
一度入力の確定をしてから、文字パネルでフォントの種類や大きさ文字の色を決めていきます。
この時も、出来るだけ見本と同じになるように真似してください。


今回は、長方形ツールやテキストツールを使って、このようなパンくずリストが完成しました。