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

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

軟件下載吧

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

相關下載

查看所有評論+

網友評論

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

公眾號

主站蜘蛛池模板: 国产一区视频在线播放 | 久久伊人热| 91av成年影院在线播放 | 91九色视频无限观看免费 | 国产亚洲精品国产 | 日韩毛片| 久久精品视频日本 | 在线观看免费a∨网站 | 久久福利青草精品资源 | 2022男人天堂 | 亚洲欧美国产精品专区久久 | 高清精品一区二区三区一区 | 国产日韩一区二区三区在线观看 | 51国产偷自视频区视频手机播器 | 99视频精品全国免费 | 国产一区二区三区成人久久片 | 亚洲在线看片 | 国产高清视频免费在线观看 | 免费一级特黄欧美大片勹久久网 | 一级做a爰片性色毛片视频图片 | 欧美另类亚洲一区二区 | 性欧美高清come | 日本高清不卡在线观看 | 国产成人精品男人免费 | 国产激情自拍 | 成人看的午夜免费毛片 | 爽爽在线 | 香港经典a毛片免费观看看 香港经典a毛片免费观看爽爽影院 | 日本欧美一区二区三区片 | a在线观看欧美在线观看 | 深夜在线观看大尺度 | 日本在线亚州精品视频在线 | 好吊色综合网天天高清 | 日韩中文字幕在线免费观看 | 午夜国产| 国产精品香蕉一区二区三区 | 欧美成人全部免费观看1314色 | 亚洲日本综合 | 久久91亚洲精品久久91综合 | 欧美在线二区 | www.av视频在线观看 |