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

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

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > PS設計教程:整潔的具有現代氣息的web站點

PS設計教程:整潔的具有現代氣息的web站點

時間:2024-02-09 12:45作者:下載吧人氣:17


作者:佚名 出處:yeeyan

PS設計教程:整潔的具有現代氣息的web站點

這個Photoshop web設計的教程中,我們將學習設計一個整潔的具有現代氣息的web站點。這是設計和HTML/CSS模板轉換系列教程的第一部分。

  • 第一部分:用Photoshop設計一個小型、現代的產品主頁
  • 第二部分:將小型、現代的產品主頁由psd轉換成XHTML/CSS模板

預覽

以下是我們將要一些設計的頁面預覽,點擊圖片可以放大。

PS設計教程:整潔的具有現代氣息的web站點

建立一個新的Photoshop文檔

1 首先在Photoshop中新建一個文檔(Ctrl+N),大小為1200 x 1200像素,背景設為透明。

PS設計教程:整潔的具有現代氣息的web站點

設置頭部背景

2 使用矩形選定工具在透明的背景上畫出一個矩形,矩形大小:1200px ×120px

PS設計教程:整潔的具有現代氣息的web站點

3 使用油漆桶工具(G)用任意顏色填充頭部剛才選定區域。點開圖層樣式對話框,用以下設置來增加一個漸變疊加效果。

PS設計教程:整潔的具有現代氣息的web站點


完了,應該出現以下效果:

PS設計教程:整潔的具有現代氣息的web站點

創建內容部分的背景圖層

4 現在我們將要創建圖層內容區域的第二部分背景。把前景色設為#00315C,背景色設為#001B32。選擇矩形框選定工具(M)選定剩下的透明圖層;選定后,選擇漸變工具(G),然后設置漸變類型為徑向漸變

PS設計教程:整潔的具有現代氣息的web站點

5 設定好漸變工具(G)后,從頂部的中間垂直的拖動到畫布的4/1大小左右。

PS設計教程:整潔的具有現代氣息的web站點

添加參考線

6 現在我們需要一些參考線保留出寬度為850px的中間內容部分。選擇視圖 > 新建參考線。在新建參考線對話框中輸入175px,取向選擇垂直。這樣一個畫布左邊的參考線就做好了。

PS設計教程:整潔的具有現代氣息的web站點

7 重復6的步驟,創建另外一條垂直參考線,不過這次輸入1025px(175px + 850px = 1025px)。這樣一個850px寬、居中的區域就做好了。

PS設計教程:整潔的具有現代氣息的web站點


設計頭部區域

8 選擇橫排文字工具(T),然后對其左邊參考線邊沿添加上頁面標題和標語。

PS設計教程:整潔的具有現代氣息的web站點

9 在標題文本圖層下面創建一個新圖層,選定矩形選框工具(M),在頭部選取出一個區域。寬度必須填滿1200px,高度大概在60px左右。

PS設計教程:整潔的具有現代氣息的web站點

10 用白色(#FFFFFF)填充(G)選定區域,然后在圖層面板中設置透明度為25%。效果如下。

PS設計教程:整潔的具有現代氣息的web站點

創建導航

11 選擇橫排文字工具(T),字體大小設定為11-12px左右。然后在標題和標示右邊加入導航文字;沒菜單項之間留出等寬的邊距。

PS設計教程:整潔的具有現代氣息的web站點

12 在每個菜單項之間使用矩形選框工具(M)做一個1px寬的分割線;長度跨越整個頭部。用#CECECE顏色填充(G)這1px的線條。效果如下圖。

PS設計教程:整潔的具有現代氣息的web站點


13 現在,我們在每個菜單項中加入鼠標懸停動態效果(hover)。我已經給其中一個菜單項加入顏色表示鼠標懸停時的效果。使用多邊形套索工具(L)按住shift,創建一個三角形,以保證每條線都是直的。

PS設計教程:整潔的具有現代氣息的web站點

14 用#00315C這個顏色填充選定的三角形區域

PS設計教程:整潔的具有現代氣息的web站點

創建歡迎區域

15 選擇橫排文字工具(T),加入一些歡迎標語;同樣左邊距緊貼左參考線,然后在上面的頁面標題和下面的歡迎文本中留出一定的空間。文本下面加入4個藍色的列表圖標。這個圖標是Function Icon Set里面的(文件名是circle_blue.png)。

PS設計教程:整潔的具有現代氣息的web站點

16 在歡迎文本的右邊將插入一個歡迎圖片;我這里使用的是Six Revisions網站界面裁圖。裁剪你的圖片,去掉不需要的部分。圖片準備好之后,通過編輯 > 變換 > 透視 改變圖片的視角。

PS設計教程:整潔的具有現代氣息的web站點

17 選擇橢圓選框工具,然后在歡迎圖片下方畫一個橢圓。

PS設計教程:整潔的具有現代氣息的web站點


18 用黑色(#000000)填充(G)橢圓選定區域。

19 然后設置區域圖層透明度為35%

20 然后使用濾鏡 > 模糊 > 高斯模糊這個橢圓,設定模糊半徑為1到2px

PS設計教程:整潔的具有現代氣息的web站點

21 把歡迎圖片和下面的陰影再復制一份,然后把它們拖動到原圖片的下面。

22 位置拖動好之后,使用高斯模糊下面的裁圖,半徑為1px

PS設計教程:整潔的具有現代氣息的web站點

創建水平3D分割線

23 選擇矩形選框工具(M)層疊的創建兩個1px的線條;寬度為850px,從左參考線到右參考線。你可以將兩個線條放在同一個圖層。

24 分別使用顏色#000D19#003461填充這兩個線條。

PS設計教程:整潔的具有現代氣息的web站點

25 選擇橢圓選框工具(M)然后在分割線上面畫出一個橢圓。

PS設計教程:整潔的具有現代氣息的web站點

26 使用黑色(#000000)填充(G)選定區域,加上2到3px的高斯模糊。然后使用矩形選框工具刪掉分割線上半部分,這樣就剩下了半個橢圓。

PS設計教程:整潔的具有現代氣息的web站點

27 將這兩個圖層合并(Ctrl+E),然后添加一個圖層蒙版(點擊圖層面板上的“添加圖層蒙版”按鈕)來合并圖層。

28 使用漸變工具(G),漸變類型為對稱漸變,前景色設為白色(#FFFFFF),背景色設置黑色(#000000)。

PS設計教程:整潔的具有現代氣息的web站點


29 拖動對稱漸變,從分割線中間向兩邊拖動,從而產生中間向兩邊淡入效果。

PS設計教程:整潔的具有現代氣息的web站點

設計內容區域

30 選擇橫排文字工具(T)在3D分割線下方,右分割線的左邊加入任意的文字標題和段落。

PS設計教程:整潔的具有現代氣息的web站點

31 使用圓角矩形工具(U)在內容文本區域的左邊創建一個圓角矩形;半徑設為10px(默認情況下背景是10px)。

PS設計教程:整潔的具有現代氣息的web站點

32 路徑畫好之后,選擇鋼筆工具(P),右擊矩形內部,選擇建立選區

33 設置前景色為#00315C,背景色為#001B32,然后選擇漸變工具(G),漸變類型為徑向漸變。

34 從頂部把漸變拖動到中間,和我們繪制背景方法相同。效果如下圖。

PS設計教程:整潔的具有現代氣息的web站點

35 現在需要給圓角矩形圖層加入投影、內陰影和描邊的圖層樣式(雙擊圖層面板上面的圖層,打開圖層樣式對話框)。設置如下。

PS設計教程:整潔的具有現代氣息的web站點


PS設計教程:整潔的具有現代氣息的web站點

PS設計教程:整潔的具有現代氣息的web站點

36 使用多邊形套索工具(L),然后在矩形上面做一個三角形的選區。

PS設計教程:整潔的具有現代氣息的web站點

37 剪切并復制選區到一個新圖層,一般這樣做將會丟失掉選取的圖層樣式,所以在這之前我們必須給右下角圖層重復添加一次樣式。

38 通過編輯 > 變換 > 旋轉給邊角圖層翻轉180度;

PS設計教程:整潔的具有現代氣息的web站點


39 加入一些任意文字以完成內容框的繪制。

PS設計教程:整潔的具有現代氣息的web站點

創建頁腳區域

40 選擇圓角矩形工具(U)在也叫拖動出一個圓角矩形。

PS設計教程:整潔的具有現代氣息的web站點

41 使用任意顏色來填充這個圓角矩形選區,選區加入如下樣式的漸變疊加效果。

PS設計教程:整潔的具有現代氣息的web站點

42 最后,加上頁腳信息就大功告成了。

PS設計教程:整潔的具有現代氣息的web站點

完成

謝謝閱讀本教程。下個教程中,我將教大家把該頁面轉成模板。


標簽氣息,web,站點,現代,具有,設計教程,整潔,PS

相關下載

查看所有評論+

網友評論

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

公眾號

主站蜘蛛池模板: 久久精品国产99国产精品免费看 | 免费看成人毛片 | 日韩精品一区二区三区视频网 | 德国女人一级毛片免费 | 成人国产三级在线播放 | 精品呦女 | 分享一个无毒不卡免费国产 | 国产精品女上位在线观看 | 偷偷久久 | 国产精品9999久久久久 | 男人天堂新地址 | 国产日韩欧美在线 | 国产女人成人精品视频 | 亚洲国产品综合人成综合网站 | 国产欧美日韩在线人成aaaa | 偷拍视频一区在线观看 | 91九九| 久久久久久久久久久大尺度免费视频 | 日本在线理论片 | 亚州中文字幕 | 亚洲夜色| 黄色一及毛片 | 99在线热播精品免费 | 日日摸天天摸狠狠摸视频 | 国产大片线上免费看 | 99视频在线精品免费观看18 | 成人做爰全过程免费看网站 | 香蕉亚洲精品一区二区 | 日韩中文字幕精品久久 | 国产一级特黄特色aa毛片 | 欧美成人乱弄视频 | 久久国产精品无码网站 | 久久精品视频大全 | 国产成人精视频在线观看免费 | 极品美女写真菠萝蜜视频 | 亚洲综合精品一二三区在线 | 曰本毛片va看到爽不卡 | 日本美女作爱 | 亚洲人成网址在线播放a | 欧美成年黄网站色视频 | 美女黄网站视频 |