在這篇教程中，我將教給你如何在photoshop中制作一個簡潔干凈的網(wǎng)頁效果圖。原始效果是由 ThemeForest的kuntiz 設(shè)計(jì)的。我很感謝他允許我發(fā)布這篇教程。這是這篇教程的第一部分。

一些需要的素材:

葉子素材

像素化藍(lán)色矩形

Step 1: 新建文檔

在photoshop中，按住(Ctrl+N)新建一個文檔。設(shè)置大小為1200px *750px。然后用漸變工具從上到下拉出一個漸變，顏色從 #792700 到 #000000。

Step 2: 在背景中添加一些顏色

新建一個圖層，命名為”color.”，用筆刷工具，選擇一個比較軟的筆刷，大概直徑為300px，我的顏色選擇的是紅色，藍(lán)色和橙色，在這個圖層中添隨便畫幾筆。

Step 3:給背景添加一些紋理

現(xiàn)在我們要給背景增加一些紋理效果。打開我們剛剛下載的葉子的素材圖片，用移動工具把這個圖片移動到我們的文檔中。 右鍵單擊該圖層的縮略圖(在圖層面板中)，選擇“編組到新建智能對象土層中”。然后選擇 濾鏡>藝術(shù)化>膠片顆粒，按照上面的設(shè)置進(jìn)行操作。然后選擇 濾鏡>像素化>馬賽克，同樣按照圖中的設(shè)置進(jìn)行操作。設(shè)置該圖層的渲染模式為 “差值”(Difference)，透明度設(shè)為30%，該土層命名為“texture”。

Step 4:創(chuàng)建黑色背景的內(nèi)容區(qū)域

新建一個圖層，選擇圓角矩形工具，設(shè)置圓角度為3個像素，創(chuàng)建一個黑色的圓角矩形。然后在圖層面板中雙擊該圖層，彈出圖層樣式面板，按照圖中的設(shè)置給該圖層設(shè)置陰影。設(shè)置該圖層透明度為70%，然后命名這個圖層為 “black shape”。

Step 5: 用群組(文件夾)來組織你的圖層

按住ctrl鍵，選擇你剛剛創(chuàng)建的所有的圖層，然后點(diǎn)擊Ctrl+G群組他們。給這個新的群組(文件夾)命名為”background”。

Step 6: 創(chuàng)建更多的群組(文件夾)

創(chuàng)建新群組 ，圖層>新建>群組，然后命名為 “home” 。然后在這個群組下創(chuàng)建另一個群組，命名為 “l(fā)ogo”。

Step 7:創(chuàng)建logo和口號

在logo群組中，新建一個圖層。用文字工具，輸入網(wǎng)站的logo文字，應(yīng)用顏色是 #f4f4f4。雙擊該圖層打開圖層屬性面板。按照上面的設(shè)置進(jìn)行操作。然后新建另一個圖層輸入口號，應(yīng)用顏色是#eeeeee。

Step 8: “Sign up” 和 “l(fā)ogin” 按鈕

好了，我們現(xiàn)在要在布局的右上角做兩個按鈕。新建一個群組，命名為 “Sign up | Login” 。然后選擇圓角矩形，創(chuàng)建一個小的矩形，就像我做的一樣。雙擊圖層打開圖層樣式面板，按照上圖的設(shè)置進(jìn)行操作。設(shè)置前景色為白色，用文字工具在你的按鈕上 寫下 “Sign up | Login” 。設(shè)置文字這個圖層的透明度為75% 。

Step 9: 創(chuàng)建1個像素高的藍(lán)色線條

新建一個群組，命名為 “Navigation”(導(dǎo)航)。新建一個圖層，命名為”Line”。選擇“單行選框工具”，在畫布中單擊創(chuàng)建一個像素高的選取。填充顏色#406f94 ，然后刪除內(nèi)容區(qū)域以外的部分。設(shè)置該圖層透明度為 40% 。

Step 10: 在導(dǎo)航條中添加一個漸變效果

創(chuàng)建新圖層。用矩形選區(qū)工具，創(chuàng)建一個選區(qū)，就像我做的一樣。(注意：你可以利用標(biāo)尺來幫助一創(chuàng)建這個選區(qū))。然后用漸變工具，設(shè)置漸變?yōu)?#35423e 到透明。從底部向上填充漸變。按下 Ctrl+D 清除選區(qū)。 然后，濾鏡>雜色>添加雜色。按照上圖的設(shè)置進(jìn)行操作。命名這個圖層為 “gradient” 。在線條和漸變之間記得留下1個像素的高。

Step 11: 寫導(dǎo)航的字

選擇文字工具，寫下你的導(dǎo)航的文字。然后雙擊打開圖層樣式面板。按照上圖設(shè)置。我給文字添加了一個基本的漸變/陰影效果。

Step 12:創(chuàng)建導(dǎo)航文字之間的裝飾分割

現(xiàn)在我們要創(chuàng)建一些分割線。新建一個圖層，選擇單列選框工具，創(chuàng)建一個1個像素寬的選區(qū)。然后用矩形選區(qū)工具，單擊”與選區(qū)交叉”按鈕(在狀態(tài)欄的上面有個按鈕)，按照上圖的操作化一個選取。用白色填充選取。然后ctrl+D刪除選取。

Step 13

雙擊該圖層打開圖層樣式面板，創(chuàng)建漸變疊加。該圖層命名 “l(fā)ine 1″。

Step 14:

Ctrl+J復(fù)制圖層 “l(fā)ine 1″ ，然后命名這個新圖層為”line 2″。用移動工具，向右挪動這個圖層 。然后雙擊圖層打開圖層樣式面板，按照上面的設(shè)置進(jìn)行操作。

Step 15:把圖層”line 1″ 和 “l(fā)ine 2″轉(zhuǎn)換成智能圖層

總結(jié)

以上是生活随笔為你收集整理的ps网页效果图转html,Photoshop制作简洁干净的网页效果图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。