ホームページの幅を決める
ホームページの幅については、大きく分けると固定のものと可変のものの2つがあります。
固定のものを固定レイアウト、可変のものをリキッドレイアウト（可変レイアウト）と呼びます。
さらに固定のものは、760px、800px、1000px（960px）が代表的なサイズに分類されます。
| 幅 | メリット | デメリット |
|---|---|---|
| 可変長 | 全てのユーザーに横スクロール無しで見てもらえる | ウィンドウサイズにより画面のイメージが変わり、ユーザーにいつもの画面と言う安心感は与えられない |
| 固定長（760px） | 全てのユーザーに横スクロール無しで見てもらえる | 横幅が狭いため、SVGAユーザー以外には情報のスカスカ感がでる |
| 固定長（800px） | ウィンドウサイズが変わっても、画面イメージは同じなので、ユーザーにいつもの画面という安心感を与えられる | SVGAユーザーには横スクロールが出てしまう |
| 固定長（1000px） | 多くの情報をいつもの画面イメージで伝える事が出来る | コンテンツ部分を1000pxとして、外側にグラデーション処理などを行うとネットブックユーザーに横スクロールが出てしまう このようなデザインの場合は、内側に20pxづつ余白を持たせて、960pxでレイアウトするのが一般的です |
ホームページの横幅は、どのようなターゲット層にどのような情報を発信するのかを検討し、適切なサイズを決めましょう。
「鈴木智子のホームページのアクセスアップ講座」では、SVGAユーザーがホームページの制作をするためにパソコンを使用している訳では無いので、SVGAユーザーは省き、かつ、情報量も非常に多い訳では無いので可変長とはせずに1000px固定で話を進めさせてもらいます。
SVGA（Super Video Graphics Array）とは、800×600pxの解像度のことで、パソコンのディスプレイ画面で標準的に使われるモードの1つです。
Photoshopの起動
それでは、Photoshopを起動してください。
Photoshopのインストールが済んでいない場合、「デザイン講座」を参照してインストールをして下さい。
[スタート]→[すべてのプログラム]→[Adobe Web Premium CS4]→[Adobe Photoshop CS4]の順でクリックします。
Photoshopが起動します。
Photoshopは、写真の加工やグラデーションの加工に最も適した画像加工用ソフトです。
ここがポイント！
Photoshopは非常に高価なソフトウェアですので、初めてホームページを制作される方はお試し版をインストールして使ってみることをお勧めします。
また、本格的なホームページ制作には、Dreamweaver、Flash、Photoshop、IllustratorなどがセットになったWEB PREMIUMというお買い得製品もあります。
まずは30日間お試しで使ってみて、どの製品を購入するかを決めるのが良いです。
製品購入は、下記のURLをクリックしてください。
| 内容 | |
|---|---|
| Photoshopのプロ仕様版です。 | |
| Photoshopのプロ仕様版だけではなく、Dreamweaver,Flash,Illustrator,Fireworksなどが一緒になったお買い得版です。 | |
| Photoshopのプロ仕様のアカデミック版です。内容は、全く変わりません。 | |
| Photoshopのプロ仕様版だけではなく、Dreamweaver,Flash,Illustrator,Fireworksなどが一緒になったお買い得品のアカデミック版です。内容は、全く変わりません。 |
新規ファイルの作成
[ファイル]→[新規]で新規ファイルを作成します。
[ファイル名]は、ファイル保存時に適切な名前を付けますので、この段階では[名称未設定]で構いません。
WEB用に制作するので、[解像度]と[カラーモード]が重要です。
プリセットを[Web]に設定してみて下さい。
[解像度]72pixel/inch、[カラーモード]RGBカラー8bitとなります。
紙に出力（印刷）する場合とモニタに出力する場合では、全く異なる設定をしなければなりません。
「鈴木智子のホームページのアクセスアップ講座」は、幅1000pxで制作すると決めました。
ホームページ自体の幅が1000pxですので、Photoshopでの作業は左右に余白を50pxずつ取り、幅1100pixelとします。
高さは、一般的なモニターサイズ（横1280×縦1024）の1024pxに余白分を追加して1200pixelとします。
Photoshopのファイルサイズは、ホームページの仕上がりサイズに余白を追加して決めましょう。
ファイルの保存
[ファイル]→[別名で保存]でファイルを保存します。
保存先は[デスクトップ]→[homepage]、ファイル名は「tomokos_top.psd」としました。
今後、ファイルの編集を行うにあたり、Ctrl+Sを習慣づけておくと良いです。Adobe社の製品は非常に高機能で大量のメモリが必要なため、Windowsが不安定になりがちです。
非常時のためにも、頻繁に（Ctrl+S）でセーブするようにしましょう。
では、作業に入る前に「フォントの設定」をしましょう。
