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

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

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > PS設計制作一個清爽的藍色海洋風格網

PS設計制作一個清爽的藍色海洋風格網

時間:2024-02-20 09:45作者:下載吧人氣:16

在今天的這個教程中,木木和童學們分享:使用photoshop設計一個非常清爽的網站主頁,特色是網站的配色非常的不錯,童學們好好學習一下。

效果圖:

PS設計制作一個清爽的藍色海洋風格網

1。在這個網頁設計教程中,使用的是960網格,所以童學們得先下載一個960網絡,然后導入到photoshop軟件中。通過編輯>畫布大小,改變文件的大小為:1600x1500px。

(注:寬度可以自由更改,但為了能在寬屏的顯示器中也能更好的顯示,建議大家還是用1600px)
2.找一張清爽的水圖片,導入到photoshop中。

PS設計制作一個清爽的藍色海洋風格網

3.在視圖>添加新參考線,添加三條水平參考線:80px,110px和170px。
4。接下來我們制作網站的LOGO。選擇“文字工具”并設屬性:字體大小72px;輸入網站的名字,接下來設置文字的樣式。

如下圖:

PS設計制作一個清爽的藍色海洋風格網

效果如下圖:

PS設計制作一個清爽的藍色海洋風格網

5。做完網站的LOGO后,接下來開始做網站的導航。
選擇“圓角矩形工具”并設圓角半徑為:15px,并填充白色;設不透明度為:70%。

PS設計制作一個清爽的藍色海洋風格網

6.在網站的導航條上添加文字;文字的屬性為:#0263a4;大小24px。
7。接下來制作導航的hover狀態。
選擇“圓角矩形工具”并設圓角半徑為:15px,繪制一個按鈕出來并填充黑色。雙擊此圖層添加圖層樣式。

PS設計制作一個清爽的藍色海洋風格網

效果如下圖:

PS設計制作一個清爽的藍色海洋風格網

8。制作搜索欄
還是使用“圓角矩形工具”并設圓角半徑為:15px,繪制想要的長度,并設“圖層樣式”設置如下圖:

PS設計制作一個清爽的藍色海洋風格網

“內陰影”選項:不透明改為:0%

PS設計制作一個清爽的藍色海洋風格網

找一個“放大鏡的圖標”放置在右邊。

PS設計制作一個清爽的藍色海洋風格網

頭部做完了,接下來就開始做產品展示部分。

9。新增參考線:200px,465px和500px.還是選擇“圓角矩形工具”并設圓角半徑為:15px。從500參考線往上繪制一個圓角矩形并填充白色,

設不透明度為:70%。

PS設計制作一個清爽的藍色海洋風格網

10。接下來制作左側的方塊。
依然使有“圓角矩形工具”,從465參考線開始繪制一個高為300,寬為560的矩形,雙擊打開此圖層設其“圖層樣式
效果如下圖:

PS設計制作一個清爽的藍色海洋風格網

PS設計制作一個清爽的藍色海洋風格網

11.在這個左側的方框里添加一個小方框來放圖片。這個小方框的大小為:500x221px。并設“圖層樣式

PS設計制作一個清爽的藍色海洋風格網

設置效果下圖:

PS設計制作一個清爽的藍色海洋風格網

12。在方框的右側添加一些內空

PS設計制作一個清爽的藍色海洋風格網

添加一個“more”的按鈕,copy第7步的“圖層樣式”。

PS設計制作一個清爽的藍色海洋風格網

13.繪制圖片的滑塊
繪制一個小矩形,并設如第12步的圖層樣式
接下來我們使用“橢圓工具”按shift鍵繪制一個小正圓,然后填充#e8e8e8 并設圖層樣式

PS設計制作一個清爽的藍色海洋風格網

最終的效果哪下圖:

PS設計制作一個清爽的藍色海洋風格網

14.添加一條新的參照線:550px.接下來我們來做內容的背景。選擇圓角矩形工具”并設圓角半徑為:15px,從參照線:550px到頁面的底部。

PS設計制作一個清爽的藍色海洋風格網

15。添加一條參考線:680px;從這個參考線到550px那條之間,添加類似“公告欄”文字。

PS設計制作一個清爽的藍色海洋風格網

16。添加一條參考線:880px,和參考線:680px之間,使用“矩形工具”繪制一個矩形,填充任一顏色,

并添加如下圖的“圖層樣式”。

PS設計制作一個清爽的藍色海洋風格網

添加一些尺寸為:180*135px的圖片,并設“圖層樣式”。

PS設計制作一個清爽的藍色海洋風格網

17.接下來我們給圖片的兩邊加一個“箭頭”,使用“自定義圖形”選擇一個箭頭的形狀,并設置“圖層樣式”(顏色疊加:#87cdf5)

PS設計制作一個清爽的藍色海洋風格網

PS設計制作一個清爽的藍色海洋風格網

18。添加圖片和文字,如下圖:

PS設計制作一個清爽的藍色海洋風格網

19。再次添加新參考線:1280px和1350px,使用“矩形工具”繪制出一個矩形,并設如下圖“圖層樣式

PS設計制作一個清爽的藍色海洋風格網

PS設計制作一個清爽的藍色海洋風格網

20。添加圖標(圖標的顏色:#87cdf5),文字

PS設計制作一個清爽的藍色海洋風格網

21。接下來繪制分隔線

使用“線條工具”繪制兩條堅線,一條填充:#0270bc;另一條:#148bcf。

然后點擊“面板”上的“蒙版圖標”,

PS設計制作一個清爽的藍色海洋風格網

添變效果如下圖:

PS設計制作一個清爽的藍色海洋風格網

PS設計制作一個清爽的藍色海洋風格網

22。最終效果如下圖:漂亮不,一個清爽的網頁布局就在你手上制作出來了。

PS設計制作一個清爽的藍色海洋風格網

PS設計制作一個清爽的藍色海洋風格網

標簽風格,網頁模板,教程,海洋,藍色,設計制作,一個,清爽,PS

相關下載

查看所有評論+

網友評論

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

公眾號

主站蜘蛛池模板: 欧美在线香蕉在线现视频 | 91视频免费播放 | 乱码在线中文字幕加勒比 | 中文字幕二区三区 | 在线亚洲精品国产成人二区 | 久在线观看| 91精品成人免费国产 | 日本乱人伦片中文字幕三区 | 亚洲美女视频网站 | 国产免费一区二区在线看 | 国产欧美一区二区三区免费看 | 亚洲日本一区二区三区在线 | 国产天堂| 亚洲第一在线 | 国产高清视频免费在线观看 | 亚洲成人黄色片 | 97国产大学生情侣11在线视频 | 日本久久久久久久久久 | 久久手机精品视频 | 狠久久| 亚洲日本aⅴ片在线观看香蕉 | 久久久影院亚洲精品 | 久久99久久精品久久久久久 | 日本护士视频xxxxxwww | 国产精自产拍久久久久久蜜 | 亚洲wwwwww| 国产免费一区二区三区在线观看 | 欧美大片一区 | 国产区91| 国产精品一区二区手机在线观看 | 欧美一区二区在线 | 欧美不卡在线视频 | 高清成人爽a毛片免费网站 高清大学生毛片一级 | 窝窝女人体国产午夜视频 | 日一区二区 | 日韩第一视频 | 韩国一级黄色大片 | 成年网站在线在免费播放 | 窝窝人体色 | 久久爱噜噜噜噜久久久网 | 国产精品亚洲精品一区二区三区 |