にウェブサイトの設計Photoshop

このAdobe Photoshop表示されるチュートリアルを使用する方法を話し合うPhotoshopとしてエクスポートされますが、 Webサイトの設計に html や画像のスライス. この後にもたらされることに html エディタプログラムなどAdobe Dreamweaver. これはですAdobe Photoshopウェブのデザイン全体をどのように直接Webページを作成するチュートリアルを表示Photoshop.

アブラハムchaffin Creativecow.net, カンブリア, アメリカ合衆国カリフォルニア © 2008 Creativecow.net. 版権所有.

• ヘッダ画像を作成する
• にウェブサイトのレイアウトを設計するPhotoshop
• で画像をスライスPhotoshop Web用
• /省エネのエクスポートPhotoshopは、 Webページとしてスライス

1. 使用Photoshopの外観を希望しているサイトのレイアウトを設計する.

2. 最大で画像をスライスPhotoshop, としては、スライスした画像や輸出 html. 理解 html 書式へのあなたのイメージをどのように解釈するための多くのスライスに役立ちます html.

3. の作成 html テンプレートが一致するようにPhotoshopサイトのデザインや使用中のスライスした画像をドロップDreamweaverを調整する html ファイルには、 Photoshopから作成を PSD スライス.

ヘッダ画像を作成する

1. 右クリックして、ここ 画像を保存する. 新しいフォルダ内の画像を保存.

2. で、ダウンロードしたファイルを開くPhotoshop.

3. 画像の右側にある牛のロゴが745 × 320にトリミング、画像. このツールを選択して長方形のマーキー（オス）を行うには, 固定サイズを選択し、ドロップダウンのスタイルの下で. の高さは、幅745ピクセル、 320ピクセルにする. マーキーの位置を独自のヘッダーや作物のイメージ（画像メニュー 作物）を作成する.



4. 画像の上部に10ピクセルの小さな羽を作成. グラデーションツールを選択してください（グラム）, トップ勾配ツールウィンドウの勾配をクリック, の開始と終了の白に色を設定, と100 ％の不透明度を0 ％に、終了を開始不透明度を設定. 新しいレイヤーをドラッグし、連続してランプを保持するために、先頭にシフトしてランプを作成する.



5. その中の画像は、下から始まる以上のランプを作成し、別の最上位（のランプへの移行を行うに向かってまっすぐ軽量）は、グラフィックを軽くする. は、ランプのエンドポイント上の図約300ピクセルのグラフィックを与えるのは、いい濁りがあるはずだ. これは、牛のファームの明るい日の外観を与える.



6. 最後に、さらには逆の方向としては、これまでの別の垂直方向のランプを作成して、ヘッダー画像を軽くして、. スタートポイントは、牛のロゴの上部と下部になるも、グラフィック上の1ピクセルの底すべきである必要があります.



7. どこに保存されたものを使用してウェブサイト案内（ alt +シフト+ Ctrlを押しながら+を作成しているフォルダには、ヘッダー画像を保存秒）. をjpgとして保存, 最適化, で約70の品質.

にウェブサイトのレイアウトを設計するPhotoshop

1. ヘッダー

• 会社のロゴ
• グラフィックバナー
• リンク/ボタンは、家庭用, 〜について, と連絡先のページ

2. 体

• ページ上のテキストのコンテンツ領域
• 写真やグラフィックの内容を反映

3. フッター

• 著作権情報
• 政策へのリンク/ご利用条件, とこのページのトップへリンクする

1. を作成して、新しい PSD 745ピクセル× 600ピクセルのファイルとレイアウトとして保存.psd

2. このドキュメントには、ヘッダーのグラフィック場所. （ （ g_headerのヘッダファイルを開く.） jpg, （ Ctrlを押しながら+を選択して）, コピー（ Ctrlを押しながら+ C ）を, レイアウトを有効に.PSD ウィンドウ, ペースト（ Ctrl + Vキー）.)

3. レイアウトを保持シフトは、ヘッダーの先頭に移動するには、移動ツール（ V ）を使用して所定の位置に一番上にスナップできるように.

4. オープン 会社のロゴ, レイアウトにコピーして貼り付けます.

5. ロゴ変換（ Ctrlを押しながら+トン）と、サイトのレイアウトの左上隅に移動.

6. は、水平のタイプツール（トン）を使用して ガイドの上に2つのロゴの間の空にいくつかの小さなテキストリンクを作成する. 単語を入力し"ホーム", 4スペース, "連絡先", 別の4スペース, して" "について. 本文12 ptをする必要があります, Arialフォント, 楽しい光の緑の色の色＃ a6ff94を使用して.

7. テキスト（層 層スタイル dropshadow ） 2の距離と3のサイズでdropshadowを与える.

8. このテキストは、移動ツールで、適切な矢印キーを使用して左上のロゴの隣に位置.

9. 牛のロゴの下の小さいいくつかの大きなナビゲーションを作成します/画像リンク:

1. （ ）タイプT "のホームページ1ページ2ページ3ページの水平型ツールを使用して4 " MS Pゴシックを使用して, 黒のテキストで17 ptフォント. 4つまたは5つの単語間のスペースについては、ボタンをいくつかのスペースを入れる.


2. 新しいレイヤーを作成 と上記で作成したテキストの下にドラッグします


3. マーキーの長方形ツール（オス）との大きなナビゲーションだけ付近の地域を選択してください.


4. 塗料バケツツールを選択してください（グラム）と（ ＃ a6ff94 ）は、緑の色では、新しい空の層の選択した領域を埋める.


5. レイヤメニュー 層のスタイルに通うことでボタンのように、この層を見る ベベルとエンボス加工をする. [ OK ]を押すと、デフォルトの設定を使用


6. 上記で作成した固体緑色の背景レイヤーの各単語の間にピクセルの列を削除ツールを使用してあなたの1つの列マーキー. これは別のボタンのようにかさを分割してそれぞれの単語を調べる予定. ズームインするには、単語の間に権利を取得する必要があります.

8. 新しい層のボタンの上にドラッグすることで、緑色のボタンのレイヤーを複製 またはレイヤー]メニューに移動 重複層.

9. 一番下の層の緑色のボタンを選択して、フィルタメニューに通うことで運動の層を約150ピクセルの距離をあいまいに追加 ぼかし Motionぼかし.

10. 下約10ピクセルと20 ％の不透明度を下の層がぼやけ移動. これはあなたのボタンの下にあるコンテンツからトップを分割するための微妙なラインを提供.

11. レイアウトの下部には、 ©著作権というテキストを作成Creativecow.net 2008.

12. は、フッターのテキストの背後にある背景になるの著作権はテキストの背後にある新しいレイヤーを作成, 必ず選択されている層を作る.

13. が、ページの下にある間の領域を選択し、長方形のマーキーツール（メートル）を使用してほんの少し高いの著作権は本文より.

14. 塗料バケツツールを使用して（グラム）と、明るい緑色（ ＃ a6ff94 ）との事項を満たす.

15. （レイヤメニュー 層スタイル インナーグロー）は、内側の層のスタイルを使用して、グロー羽根外端正常にブレンドモードを設定, 白（ ＃ ffffffをする色）と10ピクセルの大きさ.

で画像をスライスPhotoshop Web用

1. 全体のグラフィックを作成する1つのスライス. 外の開始と終了の外のグラフィックグラフィック. この教えに役立つPhotoshopどこか1つのピクセルにはしたくないのグラフィックを作成しないように.


2. フッターのグラフィックを開始し、レイアウトの外で終わるグレースライス. は、あなたのための層の上を見つけるスナッピングせ.


3. トップは、グレーのグラフィックと、大規模ナビゲーションのすぐ下に上記の開始終了の方法は、すべてのヘッダをスライス. この2つ（あらばならないのは、牛スライス! ). 今、あなたのヘッダー部分の3枚が必要, お客様のコンテンツ, とフッター.


4. スライスを、すべてのボタン, 各ボタンの同じ位置にして、ボタンの高さが同じであることを確認してくださいスナッピング. のための低, 場合は、周囲のスライスの下にスナップすることができます大きなボタン.

/省エネのエクスポートPhotoshopは、 Webページとしてスライス

1. スライスを使用してファイルを選択メニュー ウェブ＆グラフィックデバイスのために保存オープン案内（ alt +シフト+ Ctrl + Sキー）. これまでは、 Web ＆デバイスのウィンドウを保存する.


2. ドロップダウンの下には、プリセットを選択し、高品質のJPEGのファイルタイプ. （これは単純な設定です.)





3. 矢印をクリックして最適な出力設定を編集]メニューのサブメニューを開くボタンをクリックする...





4. 我々には、出力設定の詳細はここに行く. ドロップダウンから、設定をデフォルトの設定を選択. 前へ、次のすべての設定を探すように使用.


5. [ OK ]をクリックして保存. あなたは簡単に見つけることができる場所に保存してください.


6. タイプとして保存]を選択します: html と画像（ *.html ）


7. 設定: デフォルトの設定


8. スライス: すべてのスライス





9. をクリックして保存