1、hotoshop中創建一個充滿色彩的網頁效果圖在這篇教程中，我將教給你如何在photoshop中制作一個簡潔干凈的網頁效果圖。原始效果是由 HYPERLINK http:/www.themef/ ThemeForest的 HYPERLINK http:/themef/user/kuntiz kuntiz 設計的。我很感謝他允許我發布這篇教程。一些需要的素材: HYPERLINK http:/www.tutori/wp-content/uploads/2009/06/corporate-layout/leafs.png 葉子素材 HYPERLINK http:/www.tutori/wp-con

2、tent/uploads/2009/06/corporate-layout/pixelated%20blue%20rectangle.png 像素化藍色矩形Step 1: 新建文檔在photoshop中，按住(Ctrl+N)新建一個文檔。設置大小為1200px *750px。然后用漸變工具從上到下拉出一個漸變，顏色從 #792700 到 #000000。Step 2: 在背景中添加一些顏色新建一個圖層，命名為”color.”，用筆刷工具，選擇一個比較軟的筆刷，大概直徑為300px，我的顏色選擇的是紅色，藍色和橙色，在這個圖層中添隨便畫幾筆。Step 3:給背景添加一些紋理現在我們要給背景增加一

3、些紋理效果。打開我們剛剛下載的葉子的素材圖片，用移動工具把這個圖片移動到我們的文檔中。 右鍵單擊該圖層的縮略圖（在圖層面板中），選擇“編組到新建智能對象土層中”。然后選擇 濾鏡藝術化膠片顆粒，按照上面的設置進行操作。然后選擇 濾鏡像素化馬賽克，同樣按照圖中的設置進行操作。設置該圖層的渲染模式為 “差值”（Difference），透明度設為30%，該土層命名為“texture”。Step 4:創建黑色背景的內容區域新建一個圖層，選擇圓角矩形工具，設置圓角度為3個像素，創建一個黑色的圓角矩形。然后在圖層面板中雙擊該圖層，彈出圖層樣式面板，按照圖中的設置給該圖層設置陰影。設置該圖層透明度為70%，然

4、后命名這個圖層為 “black shape”。Step 5: 用群組（文件夾）來組織你的圖層按住ctrl鍵，選擇你剛剛創建的所有的圖層，然后點擊Ctrl+G群組他們。給這個新的群組（文件夾）命名為”background”。Step 6: 創建更多的群組（文件夾）創建新群組 ，圖層新建群組，然后命名為 “home” 。然后在這個群組下創建另一個群組，命名為 “logo”。Step 7:創建logo和口號在logo群組中，新建一個圖層。用文字工具，輸入網站的logo文字，應用顏色是 #f4f4f4。雙擊該圖層打開圖層屬性面板。按照上面的設置進行操作。然后新建另一個圖層輸入口號，應用顏色是#eeee

5、ee。Step 8: “Sign up” 和 “login” 按鈕好了，我們現在要在布局的右上角做兩個按鈕。新建一個群組，命名為 “Sign up | Login” 。然后選擇圓角矩形，創建一個小的矩形，就像我做的一樣。雙擊圖層打開圖層樣式面板，按照上圖的設置進行操作。設置前景色為白色，用文字工具在你的按鈕上 寫下 “Sign up | Login” 。設置文字這個圖層的透明度為75% 。Step 9: 創建1個像素高的藍色線條新建一個群組，命名為 “Navigation”(導航)。新建一個圖層，命名為”Line”。選擇“單行選框工具”，在畫布中單擊創建一個像素高的選取。填充顏色#406f94

6、 ，然后刪除內容區域以外的部分。設置該圖層透明度為 40% 。Step 10: 在導航條中添加一個漸變效果創建新圖層。用矩形選區工具，創建一個選區，就像我做的一樣。（注意：你可以利用標尺來幫助一創建這個選區）。然后用漸變工具，設置漸變為 #35423e 到透明。從底部向上填充漸變。按下 Ctrl+D 清除選區。 然后，濾鏡雜色添加雜色。按照上圖的設置進行操作。命名這個圖層為 “gradient” 。在線條和漸變之間記得留下1個像素的高。Step 11: 寫導航的字選擇文字工具，寫下你的導航的文字。然后雙擊打開圖層樣式面板。按照上圖設置。我給文字添加了一個基本的漸變/陰影效果。Step 12:創

7、建導航文字之間的裝飾分割現在我們要創建一些分割線。新建一個圖層，選擇單列選框工具，創建一個1個像素寬的選區。然后用矩形選區工具，單擊”與選區交叉”按鈕（在狀態欄的上面有個按鈕），按照上圖的操作化一個選取。用白色填充選取。然后ctrl+D刪除選取。Step 13雙擊該圖層打開圖層樣式面板，創建漸變疊加。該圖層命名 “line 1。Step 14:Ctrl+J復制圖層 “line 1 ，然后命名這個新圖層為”line 2。用移動工具，向右挪動這個圖層 。然后雙擊圖層打開圖層樣式面板，按照上面的設置進行操作。Step 15:把圖層”line 1 和 “line 2轉換成智能圖層按住 Ctrl鍵，選中

8、圖層 “line 1 和”line 2 。然后點擊右鍵，選擇轉換成智能對象圖層。設置這個智能圖層為 “separator”。Step 16: 創建藍色高光在圖層”separator”下創建一個新圖層。用矩形選區工具創建一個選?。ò凑丈蠄D設置），然后填充顏色為#35423e。右鍵單擊該圖層，把 這個圖層轉換成智能對象圖層。點擊濾鏡模糊高斯模糊，按照圖中設置。點擊濾鏡雜色添加雜色，按照圖中設置。設置該圖層透 明度為60% ，命名該圖層為 “highlight”。Step 17:給圖層”separator”創建蒙版在圖層面板中單擊圖層 “separator” ，點擊圖層圖層蒙版顯示全部。選擇漸變工具

9、，在蒙版中，從頂部到分割線的中間部分，畫一個從黑色到透明的漸變。Step 18: 復制分割線按住Ctrl鍵，在圖層面板中，點擊圖層”separator”和 “highlight” 。 然后用移動工具，按住 Alt 和 Shift鍵拖拽。這時候的效果就是復制移動了這兩個圖層。向右移動到合適的位置。重復以上操作。Step 19:群組所有的分割線選擇所有的 “separator” 和 “highlight”圖層，按住Ctrl+G 群組它們。命名這個群組為”separators”。Step 20: 給活動頁添加按鈕效果現在，我們要給當前（活動的）頁面的導航文字，添加一個不同的背景，要和其他頁面的導航文

10、字作以區分。用選區工具創建一個和我一樣的矩形選取。把這 個圖層放在文字圖層的下面。雙擊該圖層打開圖層面板，按照上圖進行設置，添加一個漸變疊加。命名這個圖層為”active menu”，設置圖層透明度為 50%。Step 21: 創建搜索條新建群組 (圖層 新建 群組)，命名為 “search” 。把它放在群組”navigation”的上面。用圓角選區工具，設置圓角為3px，創建一個圓角矩形，設置顏色為 #104f59。命名這個圖層為 “text field” ，設置透明度為 80%。Step 22: 創建搜索按鈕用矩形選取工具創建一個矩形選區，如上圖。把它放在搜索條的右邊。雙擊圖層打開圖層樣式

11、面板。添加漸變疊加。然后給這個圖層創建一個蒙版。Step 23: 在按鈕上寫 “search”用白色寫文字 “search” 。設置該圖層透明度為75%。Step 24: 給搜索欄創建一個1像素寬的細線用單列選框工具，創建需要的選取。然后填充顏色 #123036。命名這個圖層為 “line”，把它放在圖層 “button” 下面。Step 25: 創建一個藍色矩形創建一個新群組，命名為”Showcase”。在里面再創建一個群組，命名為”background”。用矩形選擇工具，創建一個新矩形，填充顏 色#219aad。我的矩形是983 px寬 273 px 高 (在創建舉行之前你可以打開信息面板

12、 窗口 信息，這樣你就可以看到具體的尺寸)。設置圖層透明度為 55% 命名它為 “bg4。Step 26: 給這個藍色矩形添加紋理效果打開素材文件”像素化藍色矩形” ，把素材移動到我們的文件中。放在藍色矩形的上面。設置該圖層透明度 55% ，然后命名這個圖層為 “bg3。Step 27: 給藍色矩形添加漸變按住Ctrl點擊圖層 “bg4的蒙版，這時創建了一個選取。 新建圖層，用漸變工具，從選取的底部到頂部畫一個從 #56b8e5 到透明的漸變。然后 Ctrl+D 刪除選區。Step 28:創建一個小的藍色矩形新建圖層。用矩形選區工具，創建一個選區（如上圖）。用漸變工具，從選區的底部到頭部，拖拽

13、從#0f2b42 到#2a607f的漸變。Ctrl+D 刪除選區。命名該圖層為 “bg1。Step 29: “Sign up” 按鈕創建新群組命名為 “sign up button”。用圓角矩形工具，設置圓角為2 px ，創建一個圓角矩形（如上圖）。雙擊圖層打開圖層樣式面板。如上圖設置，添加效果。然后用文字工具寫上 “sign up” ，設置文字白色。Step 30: “Learn more” 按鈕重復上面的操作，建立另一個按鈕。但是這一次白色的文字是 “learn more” 。然后創建一個新圖層，用用戶自定義形狀，選擇一個白色的箭頭。Step 31: 在矩形的左邊創建一個按鈕創建一個新群組

14、，命名為”left arrow”。用橢圓工具l (U)，創建一個圓形，填充顏色#406f94。雙擊圖層打開圖層樣式面板，按照上圖設置。Step 32: 在藍色圓圈中創建一個箭頭新建圖層，用用戶自定義圖形，創建白色箭頭。雙擊打開圖層樣式面板，按照上圖進行設置。設置圖層透明度為50%。Step 33: 在右邊創建另一個箭頭。重復以上步驟，在矩形的右邊創建對稱的圓圈和箭頭。Step 34: 創建特色圖片新建群組。命名為 “image” 。在這個群組中放置一個小的圖片，命名這個圖層為”image” 。雙擊打開圖層樣式面板。按照上圖設置。Step 35: 給你的圖片添加陰影點開圖層圖層樣式新建圖層，在原

15、始圖層上面新建了一個圖層。打開圖層圖層夢般顯示全部，設置漸變，畫一個黑色到透明的漸變，從小圖片的底部到中間的位置。給這個圖層命名為 “shadow”。Step 36: 添加文字新建群組。用文字工具添加一些文字，命名這個群組為 “text”。Step 37: 創建白色矩形新建群組，命名為 “content”，在其中再新建一個群組，命名為 “shadows” 。用矩形工具，新建一個矩形，填充白色，向上圖一樣。命名這個圖層為”white shape” ，設置圖層透明度為90%。Step 38: 添加頂部陰影按住Ctrl單擊圖層面板上圖層”white shape”的小縮略圖，創建選取。創建一個新圖層，

16、用漸變工具，畫一個從 #8f8f8f 到透明的漸變，參照上圖。設置該圖層透明度為 50% ，命名這個圖層為”top shadow” 。然后用移動工具，向下移動2個像素。Step 39:創建橫向的陰影新建圖層，用矩形工具，創建一個選區，如上圖。用漸變工具畫一個從 #8f8f8f 到透明的漸變。給這個圖層創建蒙版，用一個直徑較大的軟筆刷，創建陰影。設置該圖層透明度為 30% ，命名該圖層為 “vertical shadow 1 。復制這個圖層 (Ctrl+J)，命名這個新圖層為 “vertical shadow 2 ，并且把它移動到右邊。Step 40: 創建橫向線條用直線工具 (U)創建一個橫向線條，如上圖，高為1px，顏色#aebcc7。命名為 “line”。Step 41: 添加文字選擇文字工具，添加一些文字。你也可以添加一些圖片。Step 42: 給底部創建漸變新建群組，命名為 “footer”。在里面新建一個圖層，用