日韩小视频-日韩久久一区二区三区-日韩久久一级毛片-日韩久久久精品中文字幕-国产精品亚洲精品影院-国产精品亚洲欧美云霸高清

下載吧 - 綠色安全的游戲和軟件下載中心

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > PS簡潔網頁美工教程

PS簡潔網頁美工教程

時間:2024-02-26 20:15作者:下載吧人氣:29

  完成的網頁效果:

PS簡潔網頁美工教程

  1 創建新的 Photoshop文檔 (Ctrl/Cmd + N)根據下圖.

PS簡潔網頁美工教程

  設置單位和標尺

  2 確保你使用像素為單位, 它是網頁設計的標準尺度. 從前置選項的windows對話框設置標尺 (Ctrl/Cmd + K); 點擊單位和標尺,確保你所有的設置跟下圖相同.

PS簡潔網頁美工教程

  為內容區域增加指導

  3 激活photoshop的標尺,從查看 > 標尺里頭. 按下"Ctrl/Cmd + R"固定標尺的可見度. 也可以通過打開窗口> 信息 (快捷鍵: F8). 通過選區工具,信息面板可以反饋不是有用的信息. 按下"M"字鍵, 選擇矩形選區工具在畫布的左上角繪制出一個120px寬的小盒子.你可以調整選區的大小通過信息面板.現在從左邊開始,根據面板顯示的寬度拖動參考線到如圖的選區右側.

PS簡潔網頁美工教程

  4 移動選區到畫布的右邊緣. 分配另外一條參考線到選區左側.

  你的畫布看起來應該是這樣的:

PS簡潔網頁美工教程

  創建logo

  5 現在我們開始創建LOGO. logo只是添加的應用顏色漸變效果所以很簡單. 創建新的組 (圖層> 新建 >組)并且命名為"logo".

  6 選擇橫向排版工具 (T)切換到大寫字母 鍵入"SMASHING" (或者你網站的名字) .

  7 進入字符面板, 設置字體為Arial, 樣式為粗體,大小為 42pt. 設置反鋸齒選項為銳利顏色為#101112. 你同樣可以在激活文字工具之后在工具欄更改.

PS簡潔網頁美工教程

  8 雙擊打開圖層面板對話框. 選擇圖層漸變, 點擊漸變設置如下圖顯示設置.

PS簡潔網頁美工教程

  9 將"SMASHING" 圖層移動到距離頂部35px距離左側參考線0px 的地方. 你可以使用移動工具配合方向鍵使用. 復制文字圖層(圖層 >復制圖層). 移動復制文字到 "SMASHING" 的右邊,更改為"Dzine". 重復步驟6, 7, 8 但顏色有些不同 (左邊顏色: #b27625, 右邊顏色: #e5ad27).

  10 選擇水平排版工具(T)在logo下面增加口號.

PS簡潔網頁美工教程

  11 最后logo效果如圖所示. 激活/撤銷參考線, 進入視圖>顯示 > 網格或者使用快捷鍵Ctrl/Cmd + ;

PS簡潔網頁美工教程

  創建導航欄

  12 創建新組命名為"navigation",置于 "logo" 組上方. 從頂部標尺拖出一條參考線, 直到距離畫布頂端150px 的地方. 選擇矩形工具(U)畫出一直寬度為4px 的水平線,顏色為#e3ab27, 貫穿畫布.

  13 增加導航鏈接文字,距離水平線 12px高距離左側參考線 20px. 選擇橢圓形工具畫一個寬高分別為 72px *35px的矩形. 移動此圖層到 "hover"下面. 使用轉換點工具拉直底部圓角. 雙擊"hover"圖層按鈕打開圖層樣式對話框增加漸變顏色(左: #e5ad27, 右: #b27625).選擇橫向排版工具(T), 選中文字, "Home" 更改顏色#ffffff (白色).

PS簡潔網頁美工教程

  創建"聯系我們"選項

  14 下一步我們創建"聯系我們選項" 在設計的右上角( logo的相反方向). 將電話圖標 放置在接近右側參考線的地方.圖層命名為 "phone icon". 選擇水平排版工具(T). 在圖標左側增加一個電話號碼字體 Arial, 大小20pt 顏色#292929.

  在電話號碼下面增加描述性文字,字體:Arial, 粗體, 大小 11pt顏色#595959.

PS簡潔網頁美工教程

  新建頁眉

  15 現在我們開始創建頂部區域,新建一個組,命名為"header".

  16 選擇矩形工具 (U) 新建矩形寬和高分別為1200px *440px. 移動此圖行到矩形,導航欄1px的地方命名為"header bg". 雙擊 "header bg"層, 選擇漸變圖層樣式增加漸變顏色(左: #2e2226, 右: #7a7556). 如下圖所示.

PS簡潔網頁美工教程

  17 使用矩形工具新建一個新的矩形 (U) 大小為960px * 360px. 移動到距離"header bg"層頂端40px,距離左邊參考線0px的地方. 命名圖層為"header container".

PS簡潔網頁美工教程

  創建 "特色項目" 選區

  18 接著我們準備開始創建 "特色項目" 選區. 在header 組里面創建新組,命名為 "fp".選擇矩形工具(U)創建大小為630px 乘以 340px , 距離header容器頂部和左側10px的地方.給圖層的顏色賦值為#000000 并命名為"fp container".

PS簡潔網頁美工教程

  19 從你的ps里導入一張圖片放置在特色區域上面. 按選擇 >全部 (Ctrl/Cmd + A), 然后 編輯 > 復制(Ctrl/Cmd + C). 繼續回到我們的網頁設計.在"fp container"層上面新建圖層,點 編輯> 粘貼 (Ctrl/Cmd + V) 粘貼你的特色項目圖片. 重命名為"fp image". 右擊"fp image"層選擇剪切蒙版. 現在圖片只有在矩形區域可見("fp container"). 根據如下所示調整你的圖片.

PS簡潔網頁美工教程

  20 進入 編輯> 變形>角度(Ctrl/Cmd + T). 從選項條, 點擊旋轉框,鍵入-4按下兩次調整圖層. 繼續選擇該圖層("fp image"), 設置圖層樣式為亮度.

PS簡潔網頁美工教程

  21 現在我們開始為特色區域圖片創建標題和描述.選擇矩形工具(U)創建矩形大小為630px乘以 90px,顏色為#161718. 改變圖層不透明度為90% 命名為"title bg". 如下放置圖片.

PS簡潔網頁美工教程

  22 創建矩形630px乘以 1px顏色#命名為"title horizontal pne". 放到內容的頂端命名為 "title bg" 層.

  23 根據以下所示,設置矩形內的標題和描述.

  標題設置:

  字體: Arial, 顏色: #ffffff, 大小: 25pt自動反鋸齒選項: 銳利

  描述設置:

  字體: Arial, 顏色: #a4a4a4, 大小: 12pt自動反鋸齒選項: None

PS簡潔網頁美工教程

  創建"快速引用"部分

  24 創建另外一個組在 header組內,并且命名為"quick quote". 選擇橢圓形工具新建300px 乘以340px像素的矩形. 放置這個矩形到特色項目選區10px 的地方命名為"qq container".

  25 下一個步驟我們將會復制之前制作的另外一個圖層的樣式.進入"navigation" 組, 右擊"hover"層, 選擇復制圖層樣式, 回到"qq container" 層,右擊選擇粘貼圖層樣式.

PS簡潔網頁美工教程

  26 選擇水平排版工具. 鍵入 "Quick Quote"在"qq container" 距離內容層頂部和左邊 20px的地方. 設置字體為Trebuchet MS (或者其他web保險字體) 顏色為白色(#ffffff) 反鋸齒選項設置為銳利. 我們將使用橢圓形工具創建表單. 選擇橢圓形工具,設置半徑為 3px. 然后新建兩個矩形大小為260px乘以 35px 顏色為白色 (#ffffff). 分別命名為 "field1"和"field2". 創建第三個矩形,大小為260px 乘以 75px 顏色為白色(#ffffff)命名為"field3". 使用文字工具分別寫上各自標簽.

PS簡潔網頁美工教程

  27 選擇橢圓形工具創建方型大小80px乘以35px命名為"submit btn".

  28 雙擊圖層打開圖層樣式對話框 ,勾選左邊的漸變疊加對話框. 點擊漸變編輯按照如下變更顏色 .

PS簡潔網頁美工教程

  29 選擇文字工具,鍵入"Submit" 使用字體Arial, 粗體樣式 大小為13pt. 選擇"submit 按鈕" 和 "Submit 文字").

  30 在工具面板選擇移動工具 在選項條設置水平居中和垂直居中.

PS簡潔網頁美工教程

  創建主要內容區域

  31創建新組命名為"content". 選擇橢圓形工具(U).新建300px 乘以 175px 命名為"c01". 放置此層在距離頭部30px 以下 距離左邊參考線0px. 雙擊層,設置如下樣式.

PS簡潔網頁美工教程

  32 我們繼續為該層填充內容. 選擇文字工具增加文字, "About SmashingDzine". 使用文章工具選擇"About" 文字,改變顏色為#b47825. 選擇"Smashing"文字,改變顏色為#2f2f2f. 增加簡短描述和文字連接. 參考以下設置.

PS簡潔網頁美工教程

  標題設置:

  字體: Trebuchet MS, 樣式: Normal,大小: 24pt,反鋸齒選項: 銳利

  描述設置:

  字體: Arial, 樣式: Normal, 大小: 12pt,反鋸齒選項: 無, 顏色: #767676

  連接設置:

  字體: Arial, 樣式: Bold,大小: 13pt, 反鋸齒選項:無, 顏色: #252525, 下劃線

  33 緊靠描述的地方我們將增加多一個正方形. 選擇矩形工具,顏色 #ffffff, 按住Shift鍵,維持比例繪制矩形,大小為88px 乘以88px. 移動該矩形到距離左邊矩形("c01″).10px 的地方,命名為"border". 設置描邊如下:

PS簡潔網頁美工教程

  34 創建另一個盒子,大小為82px 乘以 82px放置在"border" 層中央. 命名為"box" 顏色改變為 #d5d5d5. 選擇"content" 組的所有圖層,進入圖層> 新建> 創建組(Ctrl/Cmd + G) 命名為"about".

PS簡潔網頁美工教程

  35 復制"about" 組 命名為 "services". 再重新復制一組命名為"portfopo". 我們現在有三個組("about", "services", and "portfopo"). 移動最后的組("portfopo")到右側的參考線.

PS簡潔網頁美工教程

  36 在面板選中三個組,點擊圖層>分布> 水平中心分布.

PS簡潔網頁美工教程

  37 變更 "services" 組 (center) 和 "portfopo" 組 (right) 如下.

PS簡潔網頁美工教程

  創建頁腳

  38 新建組命名為"footer". 選擇矩形工具(U)然后創建矩形大小為1200px 乘以100px 在我們布局的底部. 命名為 "footer bg". 復制 "header bg" 層的圖層樣式并且應用.

PS簡潔網頁美工教程

  選擇文字工具,寫上版權聲明文字,和鏈接,樣式為Arial, 大小為12pt ,灰色(#dddddd).

PS簡潔網頁美工教程

  40 我們開始在郵件增加郵件描述.創建新組在"footer" 層,命名為 "subscribe".選擇圓角橢圓形工具(U) 創建矩形大小85px 乘以 35px.圖層命名為"subscribe btn".

  41 重復26步增加表單和標簽.

  42選擇文字工具,拼寫"Subscribe" 樣式Arial,Bold大小13pt. 選擇所有層("subscribe btn" 和 "Subscribe text").

  43 重復28步創建按鈕.

  44選擇橢圓矩形工具 (U)設置半徑為3px.創建橢圓矩形為210px 乘以35px 應用白色為主(#ffffff)命名該層為"email field".

PS簡潔網頁美工教程
PS簡潔網頁美工教程

  最后結果

  最后結果已經完成,

PS簡潔網頁美工教程
標簽網頁教程,簡潔,制作,PS

相關下載

查看所有評論+

網友評論

網友
您的評論需要經過審核才能顯示

公眾號

主站蜘蛛池模板: 欧美一区二区三区国产精品 | 日韩欧美在线视频 | 久久91av | 亚洲国产精品成人综合久久久 | 国内精品91最新在线观看 | 精品一区二区三区在线视频 | 毛片网站免费在线观看 | 一区二区三区在线免费观看视频 | 男人的天堂在线观看免费 | 亚洲第一网色综合久久 | 午夜美女网站 | 色偷偷亚洲第一成人综合网址 | 国内精品91久久久久 | 国产一有一级毛片视频 | 萌白酱在线喷水福利视频 | 不卡一级毛片免费高清 | 欧美成人影院免费观 | 久久精品国产这里是免费 | 国产美女一级毛片 | 久草新在线观看 | 中文字幕精品在线 | 欧美在线1 | 一级色 | 免费香蕉成视频成人网 | 久久精品国产亚洲片 | 日本午夜精品 | 成年人在线网站 | 免费日韩在线视频 | 99ri在线观看 | 亚洲在线小视频 | 在线观看人成午夜影片 | 亚洲一级成人 | 国产精品观看 | 真实的国产乱xxxx | 成人18免费观看的软件 | 三毛片| 久草在线国产视频 | 美女免费黄网站 | 国产一级第一级毛片 | 一级毛片视屏 | 免费人成在线 |