Photoshop制作個(gè)人網(wǎng)站玄目的3D效果icon圖標(biāo)教程

本文雖然是制作個(gè)人網(wǎng)站,但是重點(diǎn)在于制作出比較玄目的3D效果icon圖標(biāo),大多數(shù)國(guó)外網(wǎng)站模板都比較重視網(wǎng)站整體中的頭部,所以他們的設(shè)計(jì)更多的花工夫在網(wǎng)站的上半部分

先看看效果圖

新建一文件,大小為760x770px,設(shè)置前景色為# 292929 ,背景色為#515151 (這里設(shè)置的顏色是之后漸變的漸變色)選擇矩形工具選框工具繪制如下圖區(qū)域

使用漸變工具,從選框底部向上拉一條漸變線

按ctrl+d取消選框,隨后再次使用矩形選框工具繪制如下圖區(qū)域

同樣用漸變工具填充此區(qū)域,完成后ctrl+d取消選框

你可能會(huì)發(fā)現(xiàn)兩個(gè)漸變矩形之前有一條白色線條,我們將繪制一條藍(lán)色線條取代它,使用直線工具,顏色選擇#009aff ,在頁面上繪制線條覆蓋前面的白色線條

導(dǎo)入一些icon圖標(biāo)

現(xiàn)在我們將用PS為這些圖標(biāo)制作3D效果

編輯>變換路徑>透視,將圖標(biāo)制作成如圖效果

隨后為圖標(biāo)添加圖層樣式

完成后的效果如下圖

現(xiàn)在圖標(biāo)已經(jīng)有了3D效果,但還不夠立體,這里我們將圖標(biāo)多復(fù)制幾次,每次復(fù)制后將圖標(biāo)往上移動(dòng)幾象素,這樣重疊后就變得更加立體

選擇圖標(biāo)的所有圖層,隨后將這些圖層進(jìn)行復(fù)制,我們這樣做是為了制作一個(gè)倒影效果

將復(fù)制的圖標(biāo)圖層選中,按ctrl+e將這些圖層合并為一個(gè)圖層

將復(fù)制出的圖標(biāo)向下移動(dòng)幾個(gè)象素(注意復(fù)制出的圖標(biāo)圖層因該在原始圖層之下)

設(shè)置不透明度為30%

效果如下

用同樣的方法制作其他圖標(biāo),隨后排成如圖半圓形狀

下載白云筆刷

將筆刷安裝進(jìn)PS.隨后選擇筆刷繪制如下圖

選中繪制出的白云,模式選擇正片疊底(Overlay)

復(fù)制白云圖層,編輯>變換>垂直翻轉(zhuǎn),向下移動(dòng)到如下圖位置

使用橡皮檫,將復(fù)制出的白云邊緣進(jìn)行檫除,設(shè)置不透明度為70%

隨后加入網(wǎng)站的主要文字與標(biāo)志LOGO