當前位置: 首頁 > 設計教程 > 網頁設計教程 > Photoshop設計簡潔的iphone網站首頁布局

Photoshop設計簡潔的iphone網站首頁布局

最終效果圖

Photoshop設計簡潔的iphone網站首頁布局

設計網站前照例先在PS中建立背景圖,新建一個1200*1200大小的背景,設置前景色#f3f3f2與背景色#d2d2d2,利用漸變工具中的線條漸變填充背景顏色。設置參照下圖

Photoshop設計簡潔的iphone網站首頁布局

大約完成后頂部漸變梯度在400px左右

Photoshop設計簡潔的iphone網站首頁布局

為手機網站創建導航條,使用圓角矩形工具,設置如下圖

Photoshop設計簡潔的iphone網站首頁布局

拖出一個圓角矩形條作為導航條背景,由于布局需要,我們的導航條防止網站靠右部分

Photoshop設計簡潔的iphone網站首頁布局

隨后為做出的圓角矩形導航條添加以下圖層樣式

Photoshop設計簡潔的iphone網站首頁布局
Photoshop設計簡潔的iphone網站首頁布局
Photoshop設計簡潔的iphone網站首頁布局
Photoshop設計簡潔的iphone網站首頁布局
Photoshop設計簡潔的iphone網站首頁布局

完成后的效果圖如下

Photoshop設計簡潔的iphone網站首頁布局

分享到: 
用PS制作炫目的聯系我們按鈕
Photoshop設計一個多媒體網站布局教程

熱門推薦

上海时时乐开奖結果