Zi 字媒體

Photoshop設計炫彩的商業網頁界面設計 這一次的教學是屬於PS教程領域中的設計教程的相關教學。 文章出處是來自站酷的PS教程類文章，寫教學的作者是wangyufeng，感謝wangyufeng提供設計教程的實作教學。 教學大綱: 本教程主要使用Photoshop繪製絢麗多彩的商業Web頁面，該教程將逐步教您如何製作一個華麗的Web網頁。 設計教程教學開始 先看看效果圖 1、首先需要創建一個新文檔，大小 1200*1172px，背景設置為#efefef 2、使用矩形工具,在所創建新的圖層內一個大的灰色矩形，命名“Grey”，大小1200*62px。 3、為這個Grey矩形添加如下圖層樣式。 4、在Grey圖層上方再新建一個圖層Image，再該層添加另一個形狀，但這次我將使用圓角矩形工具。加入選擇一張如下圖漂亮的夢幻圖片。 5、對這張夢幻圖片，添加一些圖層樣式，如下。 6、在大圖片下面，繼續創建4個小矩形。嘗試使用不同的顏色。 我使用的尺寸是222*182px。顏色值分別是：#f15522、#66aa44、#eea411、#1188cc 7、現在我們做一下小顏色塊上的高光效果。 創建另一個層(按CTRL + SHIFT + ALT + N)，在高光層內，添加白色到透明的徑向漸變。 8、調整該高光層的混合模式為疊加,同時改變不透明度為50%. 9、複製該高光層到每個顏色圖層上方。 10、接下來做導航部分。 在網站布局的頂部，將創建一個新的矩形。 11、對該層使用下面的圖層樣式。 12、創建一個小圓橢圓工具，直徑22px。 13、對這個小圓，添加下面的圖層樣式。 14、現在進行圓形的重要的調整，刪除圓形下半部。有兩種方法： ①、首先需要右鍵單擊層在你的圖層面板中，然後使用矩形選框工具選擇的下半部分的圓圈，按鍵盤上按上刪除。 ②、另一種方式是柵格化的該圓形路徑，使用橡皮擦。 15、為導航添加Icon。 這個導航樣式適合比較簡約版Icon，並做出凹陷進去的圖層質感。 16、對於所有這些Icon，添加下面的圖層樣式。 17、在Icon之間，加入一些垂直分割線。 18、分割線設置如下的圖層樣式。 19、下一步是為網頁加入Logo。 20、使用圓角矩形工具，在Image圖層底部添加另一個的形狀。 21、為該矩形添加下面的圖層樣式。 22、使用橢圓工具繼續添加一些小圓形。 23、在顏色矩形右上方，使用橢圓工具繪製一個圓形。 24、選擇圓形圖層，創建剪切模板。 25、對於這個白色圖形，添加下面的圖層樣式 26、複製該樣式，到每個顏色框的右上方，並保持相同的空間比例。 27、然後添加另一個圖標,和一些標題文本。 28、繼續完善內容，注意正文內容較多時，要文字比例比較小，同時採用與標題字顏色反差，這樣能突顯出Title的醒目性，並在其間加入橫向分割線。 29、最後一個步驟，添加另一個文本與橫排文字工具。 30、這是最後的結果。希望你會喜歡它。 您可以使用該Web布局，加以細微的修改，使得它成為另一個Wordpress主題。 –本文轉載自 http://www.missyuan.net 教學網 — 文章永久連結為: Photoshop設計炫彩的商業網頁界面設計