Adobe
サインイン 注文状況 マイアカウント
 
Web
 

メイキングWebデザイン【中級編】vol.1 PhotoshopレイヤーをGoLiveに持ち込む

page: 1 2 3 4 5 6 7 8 9 10 11
Photoshopの画像をそのままHTML化する
KEYWORD PSファイルの読み込み
メイキングWebデザイン【初級編】の第2弾となる【中級編】をご紹介する。今回の題材はクリエイターズユニットI&Dが制作した「BROWSIN'S」という架空の音楽サイト。中級編のvol.1では、アドビ製品ならではのシームレスな連携を巧みに活用しているこのサイトのトップページの作成方法を解説。まずは、テンプレート素材をダウンロードしておこう。

Adobe® Photoshop®でラフデザインをつくり、それをもとに手作業でHTML化しているデザイナーは多いだろう。Adobe GoLive®を使えば、そうした作業は、画像のGIFやJPEGへの変換も含めて、ほとんど自動化できる。

1.Photoshop上と寸分たがわぬ配置を再現
テンプレート素材に含まれる「lesson>Original data>PSD_GoLive読み込み素材>main.psd」を「ファイル>読み込み>Photoshopファイルの読み込み」でGoLiveに読み込む。画像にレイヤーがある場合は個別に変換され、GoLive上でフローティングとして扱われる。この機能を実行し変換後の保存先を指定すると、「Web用に保存」ダイアログが開く。レイヤーごとに次々と画像が読み込まれるので、順次このダイアログで任意の設定を行っていく。
完成イメージ PSDファイル
上が元のPSDファイルで下がGoLive読み込み後。各レイヤーの設定値は「BG/techno/Frenchレイヤー」がJPG高画質、「oyaji/lip_movレイヤー」がGIF/知覚的/カラー:16/ディザなし/マット’FF3399/透明部分あり/Webスナップ100%とした。「logos/bossaは」後で差し替えるので設定は適当でOK
完成イメージ PSDファイル
完成イメージ GoLive読み込み


2.フローティングにリンクを設定
「french」と名前がついている画像には「../fre/fre_index.html」をリンクし、同様に、techno画像に「../techno/tech_index.html」を指定。「bossa」と名前のついたフローティングレイヤーは、LiveMotionでリンク設定を行うためここでは何もしなくてよい。

メイキングWebデザイン【中級編】
vol.1
Photoshopファイル上のデザインを
そのままHTML化する
Illustrator & LiveMotionによる
アニメーションの作成

vol.2
テーブルを使用したレイアウト
CSSを使った文字の設定と制御

vol.3
トレーシングイメージを使った
ページレイアウト

フレームとヘッドアクション
 
メイキングWebデザイン
【初級編】
【中級編】
【上級編】

ダウンロード
・サンプルテンプレート

クリックしてサンプルサイトを見る
テンプレートをダウンロードする
・フリー素材
221個全てをダウンロードする
選んでダウンロードする
・印刷用PDF
Photoshopの画像をそのままHTML化する
(PDF: 116 KB/1 ページ)
Illustrator & LiveMotionによる
アニメションの作成

(PDF: 424 KB/4 ページ)
リンクの作成 リンクの作成

ターゲットには「main」と入力。ターゲット指定すると、ページ内のどのフレームに表示させるかを指定できる(「main」はフレーム名)


3.フローティング内の画像をSWFに差し替える
ロゴ部分と「bossa」を、別途Adobe LiveMotion(TM)で作成したSWFファイルと差し替える。フローティング内に貼り込まれている画像を選択したらdeleteキーで削除。まずロゴのフローティングに、「オブジェクト」パレットの「基本」タブから「SWF」をドラッグ&ドロップする。そうしたら、SWFファイル「main_logo.swf」をポイント&シュートで指定する。同様に「Bossa」にも「main_bossa.swf」を指定。

 
swfファイルへ差し替え
削除する時はカーソルが「矢印」になっているのを確認すること。「手のひら」アイコンのままでは、フローティング自体が選択されて削除されてしまう
swfファイルへ差し替え
swfファイルへ差し替え
 
4.ページ背景画像を再設定する

背景のフローティングを選択して、削除する。次にページインスペクタに切り替え、タイトルに「main」と入力し、「画像」にチェックを入れてポイント&シュートで「main_BG.jpg」を背景画像に指定する。これでタイル状に背景が敷き詰められた。さらに、背景色を「FF3399」に変更する。たったこれだけの作業で、レイアウトはほぼ完了。

背景色をピンクにすることで、ブラウザで画像の読み込みが遅くても、エフェクトを加えているように見える

背景色の設定


トップに戻る


next