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

第一回:デザイン前の環境設定と新規作成をしよう

   

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

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

Webサイトをデザインする前に環境設定と新規作成をしよう。



この動画で学べること

・Photoshopの環境設定
・Webサイト用の新規ファイル作成方法
・スマートガイドの設定方法



単位をピクセル(Web用)に設定する方法

Webサイトを作成するために、Photoshopの環境設定をしていきます。
まず、単位の設定をしていきましょう。
メニューバーのPhotoshopから環境設定、一般に進んでください。
Webデザインをする際に必要な設定を見て行きましょう。
左の一覧から、単位・定規を選択し、「定規」と「文字」を両方とも「pixel」に設定してください。




Webサイト用Photoshopファイルの新規作成

メニューバーのファイルから、新規に進んでください。
新規のボックスが立ち上がったら、以下のように設定していきます。

(1)ファイル名
(2)幅と高さ ※単位は必ずピクセルにしてください。
(3)解像度:72
(4)カラーモード:RGB




要素の整列に便利な「スマートガイド」の設定

四角形を幾つか作成し、どちらかを動かしたときに、ガイドがピンク色で表示されます。
このように、コンテンツを正確にレイアウトするのに役立つツールで、Webサイトを制作でもよく使う機能なので、スマートガイドを使っていきましょう。
メニューバーの表示から表示・非表示に進み、スマートガイドの項目にチェックを入れると、この機能を使うことが出来るようになります。