PhotoshopでHTML -

デザイン雑学 ホーム » アート・デザイン » PhotoshopでHTML

PhotoshopでHTML

ホームページをつくるには、通常「Dreamweaver」などのHTMLエディタを使用するのが一般的ですが、先日「Dreamweaver」のソフトも無く、HTMLもさっぱり分からないが、とにかくブラウザで表示されれば良いので、なんとかならないかとの質問を受けました。

当然「dreamweaver」を使用する方が良いのですが、「Illustrator」や「Photoshop」でHTMLを書き出すことはできます。
CSSが主流になってから、SEO対策上からもホームページをテーブルで組むのはどうかと言う声が圧倒的に多いのですが、CSSで組むと「ブラウザによる影響」でレイアウトが崩れると言う話しもよく耳にします。
本来テーブルはレイアウトのためのものではありませんが、テーブルでは、レイアウトは崩れません。しかし構造が複雑化すると表示に時間がかかることなどデメリットもあり、大声ではお薦めはできませんが「Illustrator」や「Photoshop」で簡単に書き出すことができますので知っていても損は無いでしょう。
「Illustrator」もやり方はほとんど同じですが、ここでは「Photoshop」でつくる方法を解説します。

1.デスクトップに(例)新規フォルダ「mda」をつくっておきます。
  「Photoshop」を立ち上げ「ファイル」メニュー/「新規」で「幅」800pixel「高さ」600pixelとし、
  「解像度」72、「カラーモード」RGBカラー、topページのファイル名は必ず「index」とします。
  まずレイアウトをします。レイヤーも適当に増えても問題はありません。

2.リンクボタンはピクセルで統一したいので、例えばリンクが5個あるとして、800÷5=160なので
  「長方形ツール」で160pixel × 28pixelで四角をつくり、色を塗り文字を入力します。
  そのレイヤーを複製し、「フィルター」メニュー/「その他」/「スクロール」/
  「水平方向」160pixel右へ「垂直方向」0 pixel下へ/「OK」。

3.再度そのレイヤーを複製し、「フィルター」メニュー/一番上の「スクロール」を選ぶと
  先ほど設定したものと同じ数値でスクロールされますので残りの3回も同様に繰り返します。

hp001

4.レイアウトが全て終わりましたら、オブジェクトに合わせ、ガイドを作成。

hp002
  
5.スライスツールを選択し、メニューの「ガイドに沿ってスライス」をクリックすると
  スライスが作成されます。

hp003

6.ファイルメニュー/「WEBおよびデバイス用に保存」。
  リンクさせたいスライスをダブルクリックし、スライスオプションの項目に必要事項を記入します。
  その内容は、画像と一緒にHTMLファイルとして出力され「mda」フォルダに保存します。

hp004

7.スライス毎にgifやjpegを選べるので、写真などは「jpeg」、グラデーションの無い画像は
  「gif」を個別に指定し「保存」をクリック。

hp005

8.フォーマット:HTMLと画像
  設定    :初期設定
  スライス  :すべてのスライス
  左下の「新規フォルダ」をクリック。
  名前は当然、英数字を入力。

9.書き出されたファイルをブラウザに重ねれば表示されます。
  デフォルトでは左に配置されますが、「Dreamweaver」でセンター配置に変更。

「Dreamweaver」が無い人は、「テキストエディタ」で開いて、
hp007
テキスト入力をして保存し、そのファイルをブラウザに重ねて確認すればセンターに配置されます。

hp008

このやりかたは、ホームページ制作としては不完全とおっしゃる方もいらっしゃいますが、そのファイルを「テキストエディタ」で開いて、足りない所を加えたりする事で、HTMLにも慣れるはずです。

次のステップの「Dreamweaver」に進む場合にも、HTMLをおぼえた方が良いので、そのきっかけになればと思います。

関連記事
スポンサーサイト
コメント
非公開コメント

トラックバック

http://ggdesign.blog48.fc2.com/tb.php/125-a3b2a233