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

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

軟件下載吧

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

相關下載

查看所有評論+

網友評論

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

公眾號

主站蜘蛛池模板: 自偷自偷自亚洲永久 | 免费三级网站 | 美女图片131亚洲午夜 | 亚洲午夜国产精品 | 最近中文字幕免费视频 | 欧美一级大片在线观看 | 成人一a毛片免费视频 | 手机亚洲第一页 | 美女被免费视频网站a国产 美女被免费网站视频软件 美女被免费网站在线软件 美女被免费网站在线视频软件 | 一区在线看 | 久久毛片免费看 | 免费一级毛片在线播放不收费 | 久久国产成人 | 色偷偷亚洲男人天堂 | 欧美日韩视频在线第一区 | 毛片免费观看的视频 | 国产三级精品91三级在专区 | 国产欧美日韩在线人成aaaa | 亚洲第一黄色网 | 在线免费观看日本视频 | 日本三级s级在线播放 | 国产精品久久久久国产精品三级 | 久久精品二三区 | 亚洲人成网址在线播放a | 欧美一级特黄aa大片视频 | 免费国产成人手机在线观看 | 国产孕妇孕交一级毛片 | 性视频网站在线 | 国产一级毛片卡 | 99精品视频在线观看免费播放 | 成 人 在 线 免费 8888 www | 日本免费高清视频二区 | a毛片免费在线观看 | 国产色在线播放 | 88av视频在线 | 欧美亚洲91| 成人久久18网站 | 久久国产影院 | 久久综合狠狠综合狠狠 | 欧美一级免费大片 | 欧美成人h |