Photoshop設計移動APP應用類型網站

　　利用photoshop打造完美的APP'S網站。

　　最終效果

　　教程所需素材下載地址：http://urlxf.qq.com/?JRbqE37

　　第一步

　　新建(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)選定區域