最終效果
教程所需素材
所有素材打包下載：教程所需素材.rar
第一步
新建(Ctrl + N)一個 1200 x 1150 px，背景為:#FFFFFF的文檔。使用"矩形選擇工具"(M)畫一個 1200 x 220px的矩形框，然后填充顏色(此顏色不做固定要求)。
接下來，我們把剛剛創建的圖層命名為"header"。使用"圓角矩形工具"(U)并設置半徑為20px。
畫一個950 x 60px 的圓角矩形
命名圓角矩形圖層"Navigation"。重新選擇圓角矩形工具(U)然后在"Navigation"右上方再次拖出一個圓角矩形作為搜索框。把該層命名為 "Search"。
第二步
選擇 "Header" 圖層 按照如下設置添加"圖層樣式"
投影設置：不透明度：34%;角度：90度;距離：5px; 大小：5px;
漸變疊加
在"Header"圖層上方建立一個發光圖層并命名為"Header Glow". 選擇 "Header"圖層并執行命令 "圖層 >載入選區"選擇 "漸變工具" (G) "鏡像漸變". 如圖所示。
然后把剛剛設置的圖層透明度降低為"15%"
導航制作
選擇 "Navigation"然后添加下面的圖層樣式使用以下設置。
在內部導航欄中使用文字工具(T)添加一些文本鏈接
在每一個導航項之間,創建兩個像素的線條 一條黑、一條白。如下圖所示
然后把剛剛的線條的混合模式設置為"疊加"。
接下來,我們將創建一個懸停狀態的導航項(即選中狀態)。選擇縮放工具(Z)然后縮放到一個導航,畫一條白色#ffffff的線條。如下圖所示
設置該線條的圖層樣式，如下圖所示。
設置完成后的效果如下圖所示。
選擇搜索圖層按照下圖所示的設置為其添加圖層樣式。
樣式設置完后，利用"自定義形狀工具"(U)添加一個搜索圖標，并在左邊用文本工具(T)輸入"Search...".
完成頭部，接下來我們將添加網站名稱及標語。
創建一個新圖層，利用選框工具(M)
一旦選擇了填充(G)選定區域與任何隨機顏色,然后添加一個漸變疊加使用以下設置。
背景創建完成后，我們將在左側添加文本信息，右側添加圖像。
需要的圖像教程盒子已經打包上傳。
復制下載到的素材：htc_pad_2_by_esintitasarim-d325zed.jpg Ctrl+T 變形工具調整大小。
打開下載到的素材放大鏡拖動到HTC PAD2的底部
再次打開HTC素材置于放大鏡圖層的下層，設置為剪切蒙板.然后移動(V)HTC較大版本圖層直到如下圖所示。
創建底部導航
新建一個圖層，如下圖所示(藍色區域)
在剛剛添加的圖層中，設置漸變疊加。使用下圖參數進行設置。
利用文本工具添加導航名稱，并用頭部導航所使用的線條設置為該導航添加設置。最終效果如下圖。
最后上面的子標題添加一個指向上的小箭頭。還可以使用多邊形套索工具(L)創建。
創建內容區域
選擇矩形選框工具(M),然后選擇在最后一點的白色區域,如下所示。
設置前景色為# cecece和背景色設置為# ffffff,選擇漸變填充工具(G)然后拖動一個線性漸變的 頂部選擇向下幾個像素。
選擇矩形選框工具,在頂部創建兩個1像素線條,就跟頭部導航的一樣。創建完成后設置透明度為50%
在剩下的空間我們開始建立內容,如下圖所示。
建立底部
For the footer simply select the "Rectangular Marquee Tool" (M), drag a selection out at the bottom of the canvas then fill (G) the selection with the color black #000000. Inside of the footer add your copyright information and maybe a small textual navigation.
頁腳只需選擇矩形選框工具(M),將一個選擇出底部的畫布然后填充(G)選定區域使用黑色# 000000。并在頁腳添加你的版權信息。
結論
謝謝參與本教程,如果你按照本教程制作完成的作品。可以發布在教程評論上面。
