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

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

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > Photoshop教程:設計藝術類網站設計過程

Photoshop教程:設計藝術類網站設計過程

時間:2024-02-06 11:15作者:下載吧人氣:15

作者:Hv-Designs.co.uk 出處:websbook.com翻譯

本文制作的網站很有設計感,作為藝術與設計類網站來說,傳統的用戶體驗與網站內容可能并不是首要考慮的內容,而更多得要讓整個網站在視覺上跟人以吸引力

先看看效果圖:

Photoshop教程:設計藝術類網站設計過程

我們使用950 x 1130px作為網頁設計文件尺寸,背景為黑色,用圓角矩形制作白色圖形,半徑設置為15px

Photoshop教程:設計藝術類網站設計過程

如下圖我們完成的形狀是用于網站的頭部,放LOGO與導航文字的地方

Photoshop教程:設計藝術類網站設計過程


現在為其添加圖層樣式

Photoshop教程:設計藝術類網站設計過程

Photoshop教程:設計藝術類網站設計過程

完成后的頭部形狀樣式如下

Photoshop教程:設計藝術類網站設計過程

加入網站的域名文字與導航按鈕文字

Photoshop教程:設計藝術類網站設計過程


我們只在右邊加入三個導航文字,為了使它們看上去不單調,我們為每個導航文字前添加發光小圖標,先制作一個3px的長線,隨后為其添加下面樣式,完成后復制三次

Photoshop教程:設計藝術類網站設計過程

完成后如圖

Photoshop教程:設計藝術類網站設計過程

用選區工具繪制選區

Photoshop教程:設計藝術類網站設計過程


隨后新建圖層,填充白色,并設置不透明度為2%

在頭部區塊下再制作一個白色圓角矩形作為主要內容的導航文字區域

Photoshop教程:設計藝術類網站設計過程

添加樣式

Photoshop教程:設計藝術類網站設計過程

Photoshop教程:設計藝術類網站設計過程

Photoshop教程:設計藝術類網站設計過程

Photoshop教程:設計藝術類網站設計過程


完成如圖

Photoshop教程:設計藝術類網站設計過程

選中其中一半區域

Photoshop教程:設計藝術類網站設計過程

新建圖層,并在選區中填充白色,設置不透明度為5%,加入導航按鈕文字,文字之間的線條是用兩條1px的直線,一深一淺,這樣看上去就有了凹槽效果,這在websbook.com之前的網站設計教程中多次出現,這里不再詳細說明

Photoshop教程:設計藝術類網站設計過程

我們為導航按鈕制作一個鼠標滑過效果,先用橢圓在新圖層上制作白色圓圈

Photoshop教程:設計藝術類網站設計過程


用"濾鏡> 模糊>高斯模糊",設置參數為6~8,完成后裁剪掉導航部分,將剩余圓圈設置不透明度到23%

Photoshop教程:設計藝術類網站設計過程

在導航圖層下新建一個圖層,使用圓角矩形制作如下虛線形狀

Photoshop教程:設計藝術類網站設計過程

使用如下樣式,使用放射漸變

Photoshop教程:設計藝術類網站設計過程

上面的邊線漸變可根據下圖,完成后能出來如下圖樣子即可

Photoshop教程:設計藝術類網站設計過程


配合網站本身的黑藍色色調使用對應的素材圖片,加入歡迎文字,藝術網站使用的圖片可以隨意行,本文我們只是為了迎合整個網站的色調風格選擇對應的圖片

Photoshop教程:設計藝術類網站設計過程

上圖中右下角的按鈕樣式如下

Photoshop教程:設計藝術類網站設計過程

Photoshop教程:設計藝術類網站設計過程

Photoshop教程:設計藝術類網站設計過程


用同樣的方法為網頁制作區塊

Photoshop教程:設計藝術類網站設計過程

使用頂部效果文字與發光圖標

Photoshop教程:設計藝術類網站設計過程

上面幾個區塊中第一個區塊我們將用來放圖片。所以我們為這個區塊中在劃出有個圓角矩形,并為其添加樣式

Photoshop教程:設計藝術類網站設計過程

Photoshop教程:設計藝術類網站設計過程

看到效果如下圖

Photoshop教程:設計藝術類網站設計過程


將事先準備好的圖片放入其中,并使用黑色做橫條來放說明文字,黑色橫條不透明度設置為40%

Photoshop教程:設計藝術類網站設計過程

另外一個區塊加入文字新聞等標題

Photoshop教程:設計藝術類網站設計過程

為最后一個區塊加入圓角矩形,這里我們放入一張張小圖片

Photoshop教程:設計藝術類網站設計過程


請注意我們整個網站的風格是圓角,所以圖片也盡量使用圓角來使整個網站風格統一

Photoshop教程:設計藝術類網站設計過程

為了更有設計感,我們將圖片兩邊各弄出兩個圓曹

Photoshop教程:設計藝術類網站設計過程

然后再其上加入兩個箭頭,此時之后可以用flash來替換

Photoshop教程:設計藝術類網站設計過程

完成后最后來整體看下我們的設計網站

Photoshop教程:設計藝術類網站設計過程



Photoshop教程:設計藝術類網站設計過程 Photoshop教程:設計藝術類網站設計過程 Photoshop教程:設計藝術類網站設計過程
標簽網站設計,過程,藝術類,設計,教程,Photoshop

相關下載

查看所有評論+

網友評論

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

公眾號

主站蜘蛛池模板: 亚洲黄色官网 | 亚洲激情视频网 | 成人精品免费视频 | 国产亚洲精品一区久久 | 日韩美女一级片 | 欧美一级在线 | 国产成人综合网亚洲欧美在线 | 国产区精品一区二区不卡中文 | 国内自拍偷拍视频 | 一本色道久久综合亚洲精品高清 | 中国国产成人精品久久 | 综合久久久 | 欧美13一14周岁a在线播放 | 久久国产精品99久久久久久牛牛 | 色偷偷88欧美精品久久久 | 亚洲国产一区二区三区综合片 | 久久99综合国产精品亚洲首页 | 日本 国产 欧美 | 国产人做人爱免费视频 | a级毛片免费观看在线播放 a级毛片免费看 | 欧美一级片在线播放 | 日韩亚洲欧美综合一区二区三区 | 成年大片免费视频播放二级 | 怡红院免费的全部视频国产a | 久久精品2020 | 欧美丝袜xxxxx在线播放 | 亚洲欧美日韩高清 | 国产情侣无套精品视频 | 久青草国产97香蕉在线视频xx | 国内视频一区 | 生活片毛片 | 欧美亚洲国产精品久久久 | 国产一级一级一级成人毛片 | 伊人五月天婷婷琪琪综合 | free性欧美hd另类精品 | 日本久久久久久久久久 | 亚洲成在| 萌白酱喷水福利视频在线 | 欧美亚洲国产精品 | 色秀视频在线观看88品善网 | 在线播放高清国语自产拍免费 |