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

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

軟件下載吧

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

相關下載

查看所有評論+

網友評論

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

公眾號

主站蜘蛛池模板: 白云精品视频国产专区 | 国产全部理论片线观看 | 中文字幕人成乱码在线观看 | 全部免费国产潢色一级 | 九九久久久久久久爱 | 99爱在线视频 | 成人视视| 午夜两性视频 | 一级片视频在线 | 国产精彩视频在线观看 | 亚洲成人综合视频 | 久久国产视频网站 | 亚洲国产精品成人精品软件 | 国产精品毛片一区二区三区 | 日本经典在线三级视频 | 亚洲另类激情综合偷自拍 | 老司机黄色影院 | 欧美精品日日鲁夜夜添 | 一区二区三区欧美 | 九月婷婷亚洲综合在线 | 特级毛片 | 欧美在线一区二区三区 | 国产精品亲子乱子伦xxxx裸 | 免费看亚洲 | 国产精品成久久久久三级 | 国内自拍视频在线看免费观看 | 国内精品免费一区二区观看 | 国产日韩欧美在线观看播放 | 一级片免费在线 | 男女视频在线观看免费 | 夜色亚洲 | 波多野结衣在线播放 | 一本色道久久综合亚洲精品高清 | 欧美激情伦妇在线观看 | 曰本美女高清在线观看免费 | 97国产大学生情侣11在线视频 | 她也啪97在线视频 | 伊人色综合久久天天人手人停 | 欧美日韩日本国产 | 免费国产a| 中文精品久久久久国产网址 |