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

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

軟件下載吧

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

相關下載

查看所有評論+

網友評論

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

公眾號

主站蜘蛛池模板: 亚洲视频中文字幕在线 | 小明台湾成人永久免费看看 | 性欧美17一18sex性高清播放 | 日本天堂视频在线观看 | 成人午夜两性视频免费看 | 国产精品视频九九九 | 91人碰 | 99视频免费播放 | 天天鲁天天爱天天鲁天天 | 亚洲精品成人一区二区 | 欧洲成人免费视频 | 免费人成在观看 | 国产女人成人精品视频 | u影一族亚洲精品欧美激情 va欧美 | 99精品国产成人一区二区 | 特级aaa片毛片免费观看 | 久色视频 | 中国性孕妇孕交在线 | 欧美成人亚洲高清在线观看 | 鲁老汉精品视频在线观看 | 亚洲一区二区三区免费观看 | 成人免费毛片一区二区三区 | 欧美一区二区在线免费观看 | 成人公开免费视频 | 手机看片国产免费 | 亚洲午夜精品一级在线播放放 | 国产免费一级高清淫曰本片 | 国产高清亚洲精品26u | 国内精品久久久久久久aa护士 | 高清一区二区三区免费 | 国产精品亚洲一区二区三区久久 | pgone太大了兽王免费视频 | 正在播放的国产a一片 | 亚洲综合一区二区三区 | 日本久久久久 | 亚洲高清在线观看播放 | 中国一级毛片视频 | 国产成人精品一区二三区在线观看 | 亚洲欧美日本人成在线观看 | 一区二区三区在线视频观看 | 欧美一级毛片怡红院 |