鈴木智子のホームページのアクセスアップ デザイン講座 制作からSEO・SEM・広告戦略まで、Webサイトのノウハウを公開!

デザイン講座

ホームページの中身や設計や配色が決まったら、見た目の設計です。

デザインは最終的にJPGやPNGやGIFの画像に出力するので、Photoshopで作成します。

WEBデザインの作成ソフトは様々ありますが、スライス後の画像のクオリティーや写真の加工がメインになるため、Photoshopを中心に、イラストや地図等の部品の作成はIllustratorで行います。

スピード優先の場合にはFireworksという選択肢もありますが、ここでは、あえてPhotoshopでのデザイン制作で解説します。

WEBのデザインをするには、Adobe社の製品は欠かせません。
非常に高価なソフトウェアなので、まずは30日間の体験版でデザインを始めてみるのが良いと思います。
全ての製品に体験版がありますので、IllustratorやDreamweaverなど必要になった時にインストールしてゆけば良いと思います。(ダウンロード、インストール方法の説明は割愛します。)
デザイン講座」、「コーディング講座」を読み終えた時点で必要なソフトが全て入っているAdobe Creative Suite 5 Web Premium 日本語版の購入を検討するのが良いと思います。

Photoshopをお持ちで無い人は、次の「Photoshopのダウンロードとインストール」の項を参考に無償体験版の使用をお勧めします。

では、最初に「ホームページの幅を決める」で、表示するホームページのサイズを決めましょう。

  内容
jpg(jpeg) JPEG(ジェイペグ:Joint Photographic Experts Group)とは、コンピューターなどで扱われる静止画像のデジタルデータを圧縮する方式のひとつ。
グラデーションや写真に向いている。
gif GIF(ジフ:Graphic Interchange Format)とは、パソコン通信時代に画像交換用に開発された画像形式。JPEGと共にインターネットで標準的に使われる画像形式である。256色までの画像を保存することができ、JPEGが苦手なイラストやアイコンなどマットな画像の保存に向いている。動画を保存できる動画(アニメーション)GIFや、透明色を指定して背景イメージと重ね合わせることができる透過GIF、全体をダウンロードしなくてもイメージの確認ができるインターレースGIFなどの拡張仕様がある。
png PNG(ピング:Portable Network Graphics)とは、画像フォーマットの一つ。JPEGやGIFに代わってWWW上で広く使われることを目指して開発された。
半透明の表現が可能。WWWに関する標準化団体W3Cによって推奨されているが、IE6以前のブラウザでは対応していない。

Photoshopのダウンロードとインストール

Photoshopには、一部の機能が制限されたホームユース版と制限の無いプロフェッショナル版があります。
ここでは、プロフェッショナル版であるExtendedで話を進めます。
以下のウェブページを開いてください。

http://www.adobe.com/jp/products/photoshop/photoshopextended/

「ADOBE PHOSHOP CS5 EXTENDED」下の[体験版]→[無償体験版]をクリックします。

セキュリティの警告が表示されます。
[はい]ボタンをクリックします。

[今すぐダウンロード]をクリックしてください。

次にAdobe IDを作成します。[Adobe IDを作成]をクリックしてください。

項目すべてに入力して[続行]ボタンをクリックします。

Adobe CS5のダウンロードが開始します。
下記画面が表示されてしまったら「インストーラーが見えない場合[もう一度開く]」でもう一度開くをクリックしてください。

ファイルのダウンロードを実行します。

セキュリティの警告が表示されます。
[実行する]ボタンをクリックしてください。

ダウンロード先を指定します。
デスクトップを選択して[OK]ボタンをクリックします。

ダウンロードが完了しました。[今すぐインストール]をクリックしてください。

[はい]ボタンをクリックします。

[次へ]ボタンをクリックしてください。

デスクトップにCS5のフォルダが作成されていることを確認してください。

[デスクトップ]→[CS5フォルダ]→[Photoshop]→「Adobe CS5」→[Set-up.exe]

インストーラーの初期化

[同意する]をクリックします。

[この製品を体験版としてインストールします]にチェックをし、[言語を選択]は「日本語」を選択、[次へ]をクリックします。

[インストール]をクリックして[完了]をクリックします。

起動させてみましょう。
「スタート」→「すべてのプログラム」→「Adobe Photshop CS5」をクリックしてください。

[体験版の使用を続行する]をクリックし、メールアドレス/パスワードを設定してください。

Adobe Photoshop CS5が起動します。

最初に「ホームページの幅を決める」で、表示するホームページのサイズを決めましょう。

このページではCS5のダウンロード、インストール手順を説明しました。「ホームページの幅を決める」以降ではCS4を使って説明しています。

follow me

鈴木智子のホームページのアクセスアップ講座