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

デザイン講座

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

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

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

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

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

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

  内容
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以前のブラウザでは対応していない。
follow me
{literal} {/literal}