當前位置: 首頁 > 設計教程 > 網頁設計教程 > Photoshop設計移動APP應用類型網站

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

最終效果

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

教程所需素材

所有素材打包下載:http://urlxf.qq.com/?JRbqE37

第一步

新建(Ctrl + N)一個 1200 x 1150 px,背景為:#FFFFFF的文檔。使用“矩形選擇工具”(M)畫一個 1200 x 220px的矩形框,然后填充顏色(此顏色不做固定要求)。

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

接下來,我們把剛剛創建的圖層命名為“header”。使用“圓角矩形工具”(U)并設置半徑為20px。

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

畫一個950 x 60px 的圓角矩形

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

命名圓角矩形圖層“Navigation“。重新選擇圓角矩形工具(U)然后在“Navigation“右上方再次拖出一個圓角矩形作為搜索框。把該層命名為 “Search”。

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

第二步

選擇 “Header” 圖層 按照如下設置添加”圖層樣式“

投影設置:不透明度:34%;角度:90度;距離:5px; 大小:5px;

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

漸變疊加

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

在“Header”圖層上方建立一個發光圖層并命名為“Header Glow”. 選擇 “Header”圖層并執行命令 “圖層 >載入選區”選擇 “漸變工具” (G) “鏡像漸變”. 如圖所示。

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

然后把剛剛設置的圖層透明度降低為“15%”

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

分享到: 
Photoshop設計透明質感的產品介紹頁面
Photoshop設計簡潔大方的網頁UI

熱門推薦

上海时时乐开奖結果