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

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

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > 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

相關下載

查看所有評論+

網友評論

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

公眾號

主站蜘蛛池模板: 精品国产一区在线观看 | 91九色国产 | 午夜免费理论片a级 | www.av在线| 污到下面流水的视频 | 欧美一级三级在线观看 | 天天摸天天爽视频69视频 | 成人a级| 欧美成人一级片 | 国产精品单位女同事在线 | 日韩3级| 国产精品99在线观看 | 黄色网址在线免费看 | 亚洲高清免费在线观看 | 国产日本在线视频 | 伊人一级 | 亚洲精品一区二区三区四区手机版 | 一级真人毛片 | 经典三级久久久久 | 亚洲一区二区三区久久 | 亚洲国产毛片aaaaa无费看 | 久一在线 | 日本一区二区免费在线观看 | 全国男人天堂网 | 一级毛片aaa片免费观看 | 亚洲视频免费在线观看 | 欧洲freexxxx性 | 国产三级精品久久三级国专区 | 欧美日本韩国一区 | 亚洲美女高清aⅴ视频免费 亚洲美女黄色片 | 成人三级做爰在线观看男女 | 日韩欧美在线综合网高清 | 久久久久久久99视频 | 亚洲综合色一区二区三区小说 | 日韩欧美成末人一区二区三区 | 国产精品系列在线 | 最新欧美一级视频 | 亚洲欧美国产18 | 亚洲女人网 | 国产一区在线看 | 亚洲精品色一区二区三区 |