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

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

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > 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精品在线观看视频 | www.99在线| 欧美aⅴ在线 | 大视频在线爱爱爱爱 | 可以免费观看欧美一级毛片 | 亚洲一级特黄特黄的大片 | 成年人免费网站视频 | a级男女性高爱潮高清试 | 狠狠色噜狠狠狠狠色综合久 | 爽爽窝窝午夜精品一区二区 | 国产成人精品免费视频大全办公室 | 亚洲免费视频网 | 91精品国产免费久久 | 亚洲高清成人欧美动作片 | 久操免费在线视频 | 国产成人精品免费视 | 三级毛片三级毛片 | 亚洲综合黄色 | 亚洲欧美日本视频 | 3d动漫精品成人一区二区三 | 99久久精品免费看国产一区二区 | 老鸭窝 国产 精品 91 | 特黄特a级特别特级特毛片 特黄特黄 | 国产aⅴ精品一区二区三区久久 | 国产精品一区二区综合 | 免费观看a黄一级视频 | 国产精品日韩欧美一区二区三区 | 91亚洲精品久久91 | 伊人手机视频 | 欧美一级毛片久久精品 | 久久亚洲欧洲日产国码 | 亚洲天堂一区二区 | 找个毛片看看 | 欧美一区二区在线观看免费网站 | 香港三级做爰大爽视频 | 国产欧美亚洲三区久在线观看 | 成人免费在线 | 香蕉视频黄在线观看 | 狠狠色丁香婷婷综合久久片 |