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

第二回:シェイプを使ってWebサイトのベースを作成してみよう

   

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

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

今回は、シェイプを使ってWebサイトのベースを作成しましょう。



この動画で学べること

・Webサイトのベースの作成方法



シェイプを使ってWebサイトのベースを作成しよう

シェイプを使って、Webさいtおのベースを作成していきます。
まず長方形ツールに切り替え、キャンバス上のどこでも大丈夫なので一度クリックし、数値を入力していきます。
幅:960px、 高さ:39pxにしてください。
オプションバーから、塗りを薄めの色に、線はなしにします。
四角形ができたら、カンバスの真ん中に整列させて配置してください。




ガイドの作成をしていこう

左の定規から線を引っ張り出すことによって、垂直方向ののガイドを引くことができます。
上の定規から引くと、水平方向のガイドになります。
一度作成したガイドをずらしたいときは、移動ツールを使うと、簡単に動かすことができます。




移動ツールの裏ワザ

要素を選択した状態で、移動ツールに切り替え、キーボードの上下キーを押すと、1pxずつ移動させることができます。
またShiftを押しながら上下キーを押すと、10pxずつ動かすこともできます。
とても便利な機能なので、ぜひ覚えてください。



このようにシェイプとガイドの機能を使って、Webサイトのベースになる部分を作成していきましょう。