Zi 字媒體

Photoshop設計清新色彩生動的網頁模板 這一次的教學是屬於PS教程領域中的設計教程的相關教學。 文章出處是來自pskungfu.info的PS教程類文章，寫教學的作者是PS真功夫翻譯，感謝PS真功夫翻譯提供設計教程的實作教學。 教學大綱: 此教程將教您如何用photoshop創建清新、色彩生動的網頁布局。在此我也非常感謝來自ThemeForest原布局設計者Kuntiz，在他的允許下才能完成這篇教程。 設計教程教學開始 先看看最終效果圖 第一步：新建文檔 1200px * 750px，選擇漸變工具(G)，對背景圖層從上(#792700)到下(#000000)新建漸變，如下圖所示： 第二步：添加色彩 新建圖層，選擇筆刷工具(B)，選取直徑為300px的軟筆刷，分別以紅(#be4816)、黃(#c0952c)、藍(#33afc6)三種顏色塗在背景層的上半部，圖層命名為“顏色”。如下圖所示： 第三步：添加紋理 打開一開始保存好的“綠葉”圖片，使用移動工具(V)，移動到當前文檔內，右擊新圖層，選擇“轉換為智能對象”，然後轉到菜單：濾鏡>藝術化>膠片顆粒，濾鏡>像素化>馬賽克，參照下圖的設置，最後設置此圖層的“混合模式”為“差值”，透明度為30%，圖層命名為：“紋理”。如下圖所示： 第四步：為內容添加黑色背景 新建圖層，選擇圓角矩形工具(U)，設置3px的半徑，創建一個黑色圓角矩形框，雙擊圖層，彈出“圖層樣式”對話框，如下圖一樣設置“陰影”，最後設置此圖層的透明度為70%，圖層命名為：“黑色形態”，如下圖所示： 第五步：添加組管理圖層 按住ctrl鍵，選擇目前為止創建的所有圖層，進行圖層編組(ctrl+g)，組命名為：背景，如下圖所示。 第六步：創建更多組 新建組(圖層>新建>圖層編組)，組命名為：主頁，在“主頁”內再增加一個組，組命名為“logo”，如圖所示： 第七步：創建logo和網站副標題 在“logo”的組裡新建圖層，選取字體工具(T)，書寫您的網站名字，顏色為#f4f4f4。雙擊圖層，按照下圖設置圖層樣式，“斜面與浮雕”，“外發光”，“漸變疊加”。然後再新建圖層編輯網站副標題，顏色為#eeeeee。 第八步：創建”註冊“，”登錄“按鈕 現在將在布局的右上角創建兩個按鈕。 新建組，命名為“註冊|登錄”;選取圓角矩形工具(U)，像我一樣創建圓角矩形;雙擊形狀圖層，彈出圖層樣式對話框，如下圖進行設置。 設置前景顏色為白色，用字體工具(T)在按鈕上編寫“註冊|登錄”，設置字體層的透明度為75%。 第九步：創建1px高的藍色水平線 新建組，命名為“導航”，新建圖層，選取單行選框工具並在文檔新建1px高的選區，以顏色#406f94進行填充，使用矩形選框工具(M)刪除超出黑色矩形的選區，設置透明度為40%，層命名為“橫線”。 第十步：給導航添加漸變 選取矩形選框工具(M)創建選區(提示：你可以使用標尺)，然後使用漸變工具(G)從底部到頭部畫一個從#35423e到透明的漸變。按Ctrl+D撤消選區，右擊圖層，轉換為“智能對象”，然後再轉到菜單　濾鏡>雜色>添加雜色，並按照下圖進行設置。給此圖層命名為“漸變”，且在漸變與橫線之間留出1px的距離。 第十一步：編輯導航菜單 選取字體工具(T)，並在導航欄上編輯菜單，這裡我應用的字體是Adobe仿宋體，然後雙擊字體圖層，按下圖一樣設置圖層樣式。 第十二步：創建分隔線 現在我們將在菜單欄中創建分隔線，新建圖層，選取單列選框工具，並在菜單的布局上點擊一下，選取矩形選框工具(M)，並在選項欄上選擇“交叉選區。 對新的選區以白色填充，最後按ctrl+d，取消選框。最終結果如下圖： 第十三步：雙擊上步新建的圖層，命名為“豎線1”，並進行如下圖層樣式的設置。 第十四步：按ctrl+j複製圖層“豎線1”，重命名為“豎線2”。選取移動工具(V)，點擊鍵盤上的方向鍵，向右移動1px，並更改“漸變疊加”的設置。如下所示： 您的圖將會是這樣： 按住ctrl，選擇“豎線1”和“豎線2”，轉換為“智能對象”，新圖層命名為“分隔線”。 第十五步：創建藍色高光 1、新建圖層，放置在“分隔線”下，選取矩形選框工具(M)創建像下圖一樣的選區 2、以顏色#35423e填充該選區，按ctrl+d撤消選框，右擊，在下拉菜單中選擇“轉換為智能對象” 3、去往菜單　濾鏡>模糊>高斯模糊，並設置半徑為4px 4、再次 濾鏡>雜色>添加雜色，數量為0.7%，屬性為第一個選項，像第十步那樣設置 5、設置圖層透明度為60%，命名為“高光” 圖片最終為： 第十六步：為圖層“分隔線”創建圖層蒙版 選定圖層“分隔線”，轉到菜單　圖層>圖層蒙版>顯示所有，選擇漸變工具(G)，新建一個從黑到透明的漸變，方向是從上到中間。 第十七步：複製圖層“分隔線”，“高光” 同時選中“分隔線”，“高光”這兩個圖層，使用移動工具(V)，按住alt+shift，拖動兩個圖層中的對象至另一個菜單與菜單之間，這就相當於複製“分隔線”，“高光”的操作，重複拖動動作，根據您的菜單多少來複制 第十八步：為圖層“分隔線”，“高光”編組 選擇所有的圖層“分隔線”，“高光”，按ctrl+g，進行編組，組命名為“分隔線”。 第十九步：為當前頁面創建激活按鈕 現在我們將為當前菜單頁面創建一個激活按鈕，來區分其它的菜單按鈕。選取矩形工具(U)並像下圖一樣新建矩形，並把這圖層放置在“菜單”圖層的下方，雙擊圖層，進行“漸變疊加”的設置，圖層命名為“激活按鈕”，設置透明度為50%。 效果圖： 第二十步：創建搜索框 新建組，命名為“搜索”，放置在“導航”組上面。選取圓角矩形工具(U)，設置半徑3px，前景色為#104f59，創建圓角矩形，命名新的圖層為“文本區域”，透明度為80%。 選取矩形工具，在“文本區域”右邊創建一矩形，並如下圖進行設置圖層樣式“漸變疊加”，然後右擊圖層，在下拉菜單中選擇“創建快速蒙版”，層命名為“按鈕”。 選取字體工具(T)，使用白色，在“按鈕”上書寫“搜索”兩字，圖層透明度為75%。 選取線條工具(U)，使用顏色#123036創建直線，圖層命名為“直線”，並放置在“按鈕”圖層下方，把此直線移動在搜索框和按鈕之間。 第二十一步：新建藍色矩形 在組“導航”下新建組(圖層>新建>組)，組命名為“案例”，再新建組放置在“案例”中，並命名為“背景” 選取矩形工具(U)，顏色設置為#219aad，創建寬度為983px，高度為273px的藍色矩形，(提示：打開(按F8)信息面板，查看寬度和高度)，設置此圖層的透明度為55%，命名為“bg4” 3.　在photoshop中打開在上篇中一開始要保存的第二張圖片“像素化的藍色矩形”，把圖片移動到此文檔中，並且覆蓋藍色矩形，同樣也設置透明度為55%，命名為“bg3”。 4.　按住ctrl鍵，點擊“bg4”中的矢量蒙版縮略圖以選中此蒙版 5.　新建圖層，放在“bg3”上方，命名為“bg2”，選取漸變工具(G)，畫一個顏色#56b8e5到透明的漸變，方向是從選區底部到選區頭部，然後按ctrl+d撤消選區 6、新建圖層，放在圖層“bg2”上方，命名為“bg1”，選取矩形選框工具(M)，像下圖一樣創建選區，寬度為983px，高度43px 7、選取漸變工具(G)，畫一個顏色#0f2b42到顏色#2a607f的漸變，方向是從選區底部到選區頭部，然後按ctrl+d撤消選區 第二十二步：“註冊”與“了解更多 1.新建組“註冊按鈕”，放在組“背景”上方，選取圓角矩形工具(U)，設置半徑2px，像下圖一樣新建圓角矩形(82*38)，並設置如下圖一樣的圖層樣式(注意：shap2圖層的透明度是100%) 2. 重複步E1創建“了解更多”的按o，並且增加一層，添加箭頭，選取自定義形狀工具(U)中的第二個箭頭形狀，像下圖一樣創建箭頭 第二十三步 1. 新建組，命名為“左箭頭”，放在組“了解更多按鈕” 上方，選取橢圓工具(U)，新建顏色為#406F94的圓，並設置“內陰影”和“描邊”的圖層樣式 2.　新建圖層，選取自定義工具(U)中的箭頭形狀，創建白色箭頭，並設置圖層樣式“陰影”，透明度為50% 3. 重複步驟2，在右邊也創建同樣的箭頭 第二十四步 1.　在組“案例”中新建組，命名為“圖片”，在組裡放置一張小圖片，雙擊圖層，設置如下圖的圖層樣式“外發光” 2.　新建組，選取字體工具(T)，在藍色矩形左邊添加文字說明(這個得自己發揮了)，組命名為“文字”。 第二十五步：創建內容區 1.　新建組，放在組“案例”下面，命名為“內容”，在此組裡再新建一組“陰影”，選取矩形工具(U)，創建一白色矩形(983*181)，圖層命名為“白色形狀”，透明度為90%。 2.　像二十一步中的第4點一樣，選中“白色形狀”的圖層蒙版，然後新建圖層，命名為“頭部陰影”，選取漸變工具(G)，畫一個顏色為#8f8f8f到透明的漸變，方向為選區的頭部到選區的底部，設置圖層透明度為50%，然後選取移動工具(V)，按鍵盤上的向下的方向鍵兩次 3.　新建圖層，選取矩形選框工具(M)像下圖一樣新建選區(273*180)。選取漸變工具(G)畫一個顏色#8f8f8f到透明的漸變，然後取消選區，以下圖為參考。 4.　添加圖層蒙版(圖層>圖層蒙版>顯示全部)，使用大一點的黑色軟筆刷(我用的是27px)，塗在陰影中間部分上面，設置圖層透明度為30%，命名為“垂直陰影1”，複製(ctrl+j)圖層“垂直陰影1”，移動至右邊，重命名為“垂直陰影2”。 5.　選取線條工具(U)，新建重1px，顏色為#aebcc7的水平線，將圖層轉換為智能對象(右擊圖層，在下拉菜單中選擇“轉換為智能對象”)圖層命名為“水平線”。 6.　選取字體工具(T)，編輯網站內容，您也可以使用圖片或別的來替換 第二十六步：創建網站底部內容 1.　新建組“底部”，並新建圖層，選取矩形選框工具(M)，新建選區(982*88)。 2.　設置前景色為#555555，選擇一大的軟筆刷(我選的是100px)，沿着選區頭部邊緣進行塗畫，撤消選區，設置圖層透明度為50%，並命名為“漸變”。 最終的“漸變”將是這個樣子： 3.　新建圖層，選擇單行選框工具，新建一選區，並以白色填充。按ctrl+d撤消選區。轉到菜單　圖層>圖層蒙版>顯示所有，選取一大點的黑色軟筆刷像下圖一樣遮住圖層，以下圖為參考。設置圖層透明度為15%，命名為“直線”。 4.　添加底部文字說明。 這個大製作終於完功了，裡面的字體設置什麼的還需要各位看客們多擔待!最終效果圖： –本文轉載自 http://www.missyuan.net 教學網 — 文章永久連結為: Photoshop設計清新色彩生動的網頁模板