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

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

軟件下載吧

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

相關下載

查看所有評論+

網友評論

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

公眾號

主站蜘蛛池模板: 韩国一级特黄清高免费大片 | 波多野结衣视频免费在线观看 | 成人午夜视频在线播放 | 欧美国产成人一区二区三区 | 在线观看一二三区 | 玖玖香蕉视频 | 99re热视频这里只精品 | 中文字幕天堂久久精品 | 欧美性猛交xxx免费看人妖 | 一级毛片在线不卡直接观看 | 99精品视频在线视频免费观看 | 日本成人一级片 | 91精品手机国产露脸 | 欧美成人在线视频 | 国产精品嘿咻嘿咻在线播放 | 久久精品综合国产二区 | 黑人黄色毛片 | 久久99亚洲精品一区二区 | 成人97| 亚洲gogo人体大胆西西安徽 | 国产女人伦码一区二区三区不卡 | 久久中文字幕久久久久91 | 国产精品欧美日韩 | 日韩美女爱爱 | 日韩精品首页 | 91精品一区国产高清在线 | 国产欧美精品午夜在线播放 | 日本三级香港三级人妇99 | 草草久| 午夜91理论片 | 成人综合在线观看 | 国产一级做a爰片在线 | 高清在线精品一区二区 | 美国一级毛片免费看成人 | 日本三级网站 | 日韩中文字幕在线视频 | 日韩一级黄色 | 曰本aaaaa毛片午夜网站 | 美女视频永久黄网站在线观看 | 久草久草 | 欧美日本免费观看αv片 |