search
尋找貓咪~QQ 地點 桃園市桃園區 Taoyuan , Taoyuan

【 PS創意設計 】Photoshop設計清新色彩生動的網頁模板-PS筆刷工廠

Photoshop設計清新色彩生動的網頁模板

這一次的教學是屬於PS教程領域中的設計教程的相關教學。

文章出處是來自pskungfu.info的PS教程類文章,寫教學的作者是PS真功夫翻譯,感謝PS真功夫翻譯提供設計教程的實作教學。

教學大綱:

此教程將教您如何用photoshop創建清新、色彩生動的網頁布局。在此我也非常感謝來自ThemeForest原布局設計者Kuntiz,在他的允許下才能完成這篇教程。


設計教程教學開始

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

–本文轉載自 http://www.missyuan.net 教學網 —

文章永久連結為: Photoshop設計清新色彩生動的網頁模板



熱門推薦

本文由 wwwfreebrushscom 提供 原文連結

寵物協尋 相信 終究能找到回家的路
寫了7763篇文章,獲得2次喜歡
留言回覆
回覆
精彩推薦