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

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

軟件下載吧

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

相關下載

查看所有評論+

網友評論

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

公眾號

主站蜘蛛池模板: a级毛片免费观看视频 | 中国黄色一级毛片 | 一区二区三区免费在线视频 | 国产人成午夜免视频网站 | 一个人看的免费观看日本视频www | www.色黄| 日韩三级黄色片 | 成人免费xxxxx在线视频 | 亚洲国产精品线播放 | 久久九九爱 | 日韩亚洲人成网站在线播放 | 亚洲天堂一区 | 人人草97 | 亚洲综合欧美综合 | 日韩欧美一区二区三区免费观看 | 国产成人精品综合久久久软件 | 久久久亚洲欧洲日产国码二区 | 黄色三级三级三级免费看 | 日本一级特黄大一片免 | 看欧美毛片一级毛片 | 国产成人精品午夜免费 | 久久精品综合国产二区 | 国产视频高清在线观看 | 成人国产精品高清在线观看 | 亚洲欧美高清 | 一级做a爱片特黄在线观看免费看 | 国产成人精品日本亚洲语音1 | 国产精品成人久久久 | 亚洲系列中文字幕一区二区 | 人成精品视频三区二区一区 | 最新亚洲国产有精品 | 日韩免费观看一级毛片看看 | 久久怡红院| avtom影院入口永久在线观看 | 欧洲国产伦久久久久久久 | 大量愉拍情侣在线视频 | 日韩特级黄色片 | 一级aaa级毛片午夜在线播放 | 亚洲精品高清国产一久久 | 成人男女18免费o | 全午夜免费一级毛片 |