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

軟件下載吧

當(dāng)前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > Photoshop教程:繪制另類的3D網(wǎng)頁布局

Photoshop教程:繪制另類的3D網(wǎng)頁布局

時間:2024-02-06 22:30作者:下載吧人氣:28

作者:佚名 出處:ximumu

大家好,好像沒有翻教程了,很不好意思了,因為換了個工作,所以沒有像以前有那么多空閑的時間來譯了。
今天我們來分享的這篇教程是一個比較另類的網(wǎng)頁布局--3D網(wǎng)頁布局。像這樣的網(wǎng)頁,做成個人主頁是一個不錯的選擇,但是如果用來做商業(yè)頁面的話,得有勇氣了,嘎嘎。。。

先來目睹為快了:

Photoshop教程:繪制另類的3D網(wǎng)頁布局


效果不錯吧

1。打開photohshop軟件,新建一個1200*1200文檔。設(shè)置前景色:“#424241″背景色: “#191919。然后在工具箱選擇“漸變工具”,設(shè)置如下圖:

Photoshop教程:繪制另類的3D網(wǎng)頁布局

漸變效果如下圖:

Photoshop教程:繪制另類的3D網(wǎng)頁布局


2。選擇“文字工具”打上你網(wǎng)站的名字和宣傳詞,效果如下圖:

Photoshop教程:繪制另類的3D網(wǎng)頁布局

接下來給這些文字添加一些圖層樣式:

Photoshop教程:繪制另類的3D網(wǎng)頁布局

Photoshop教程:繪制另類的3D網(wǎng)頁布局

Photoshop教程:繪制另類的3D網(wǎng)頁布局

Photoshop教程:繪制另類的3D網(wǎng)頁布局


最終的效果如下圖:

Photoshop教程:繪制另類的3D網(wǎng)頁布局


3。接下來我們給網(wǎng)頁添加一個搜索框,選擇“圓角矩形工具”并設(shè)其圓角的大小為:15px.在頁面的右上角畫一個圓角矩形。

Photoshop教程:繪制另類的3D網(wǎng)頁布局

接下來給這個矩形添加一個圖層樣式設(shè)置如下圖:

Photoshop教程:繪制另類的3D網(wǎng)頁布局

Photoshop教程:繪制另類的3D網(wǎng)頁布局

最終效果如下圖:

Photoshop教程:繪制另類的3D網(wǎng)頁布局


再次選擇“圓角矩形工具”并設(shè)置圓角的大小為:5px。畫一個比較小的矩形,按ctrl+enter把路徑變?yōu)檫x區(qū),然后給這個選區(qū)填充白色。

使用矩形選區(qū)工具,把這個小的圓角矩形裁剪后半截,按ctrl+x,再按ctrl+v復(fù)制到一個新的圖層,然后暫時隱藏起來,留到后面要用。

Photoshop教程:繪制另類的3D網(wǎng)頁布局

接下來給這個矩形的前半部添加一個圖層樣式,設(shè)置如下圖:

Photoshop教程:繪制另類的3D網(wǎng)頁布局

Photoshop教程:繪制另類的3D網(wǎng)頁布局

其效果如下圖:

Photoshop教程:繪制另類的3D網(wǎng)頁布局


下面我們把剛才隱藏的后半部打開,利用圖層樣式,把它做成一個按扭。

Photoshop教程:繪制另類的3D網(wǎng)頁布局

Photoshop教程:繪制另類的3D網(wǎng)頁布局

新建一個圖層,我們給這個按扭添加兩條1px的線條,一條填充白色,一條填充黑色。并設(shè)這個圖層的混合選項:soft light最后的效果下圖:

Photoshop教程:繪制另類的3D網(wǎng)頁布局

4。接下來我們來建一個3D導(dǎo)航。
新建一個圖層,在距離搜索框下的100 px左右,畫兩條1 px寬950 px長的線條,一條填充黑色,一條填充白色。并混合模式:疊加.

Photoshop教程:繪制另類的3D網(wǎng)頁布局


新建一個圖層,選擇“矩形選區(qū)工具”畫一個與線條一樣寬的矩形,并填充白色。
按鍵盤上ctrl+T組合鍵,右擊菜單選擇“透視”。把鼠標(biāo)移到左邊的節(jié)點上按住不放拖動,最終效果如下圖:

Photoshop教程:繪制另類的3D網(wǎng)頁布局

接下來雙擊這個圖層打開圖層樣式的對話框,設(shè)置如下:

Photoshop教程:繪制另類的3D網(wǎng)頁布局

Photoshop教程:繪制另類的3D網(wǎng)頁布局

選擇“橢圓選框工具”畫一個橢圓,效果如下圖:

給這個橢圓選取區(qū)填充黑色,并設(shè)置它的不透明度為:50%。如果你一步一步跟著我做的話,你就會得到下面的效果。

Photoshop教程:繪制另類的3D網(wǎng)頁布局


5。下面我們來給導(dǎo)航加一些元素。我在這個網(wǎng)頁下載一些圖標(biāo):http://apathae.deviantart.com/art/W-R-E-N-84310039
給第一個圖標(biāo)添加一個外發(fā)光的效果(在圖層樣式里添加哦)。

Photoshop教程:繪制另類的3D網(wǎng)頁布局

按ctrl+J復(fù)制圖標(biāo),再按ctrl+T,在右擊菜單中找到“垂直翻轉(zhuǎn)”。然后選擇:濾鏡-模糊-高斯模糊,給這些圖標(biāo)添加一些模糊的效果。

Photoshop教程:繪制另類的3D網(wǎng)頁布局

點擊圖層面板上的“蒙版”圖標(biāo),給這些圖標(biāo)添加一個蒙版,然后選擇“漸變工具”漸變色彩從“黑--白”。然后使用漸變工具從上到下拖拉。最終的效果如下:

Photoshop教程:繪制另類的3D網(wǎng)頁布局

最后我給第一個圖標(biāo)添加一個“小提示”的圖標(biāo),效果如下圖:

Photoshop教程:繪制另類的3D網(wǎng)頁布局

6。接下來我們來完成頁面的主體部分。
使用“矩形選區(qū)工具”來畫出主體的部分。要注意的一點是矩形的大小要和導(dǎo)航的一樣大。

Photoshop教程:繪制另類的3D網(wǎng)頁布局

給這個矩形添加一個圖層樣式,設(shè)置如下圖:

Photoshop教程:繪制另類的3D網(wǎng)頁布局


給主體添加你想要的內(nèi)容,在這里我把主體分成了三個部分來添加,其最終的效果如下圖:

Photoshop教程:繪制另類的3D網(wǎng)頁布局

Photoshop教程:繪制另類的3D網(wǎng)頁布局

7。嘎嘎。。。終于快大功告成了。最后我們來給頁面添加頁腳。
在主體的下面添加兩條1 px的直線,一條填充黑色,一條填充白色。并混合模式:疊加.(有沒有印象喲,上面我們也做過同樣的步驟).
最后加上你網(wǎng)站的信息,這樣一張較為較特殊的網(wǎng)頁布局就完成了。

Photoshop教程:繪制另類的3D網(wǎng)頁布局

---------
我們來回想下,這個教程特色在哪里



Photoshop教程:繪制另類的3D網(wǎng)頁布局 Photoshop教程:繪制另類的3D網(wǎng)頁布局 Photoshop教程:繪制另類的3D網(wǎng)頁布局
標(biāo)簽網(wǎng)頁,布局,3D,另類,教程,繪制,Photoshop

相關(guān)下載

查看所有評論+

網(wǎng)友評論

網(wǎng)友
您的評論需要經(jīng)過審核才能顯示

公眾號

主站蜘蛛池模板: 亚洲综合色婷婷| 美女扒开尿口给男人爽免费视频| 精品免费一区二区三区| 成在人线AV无码免费高潮喷水| 在线观看亚洲免费| 亚洲美女黄视频| 国产边打电话边被躁视频| 日韩欧美中文字幕在线视频| 国产在线高清理伦片a电影| 久久国产精品免费视频| 调教双乳玉势揉捏h捆绑小说| 日本伊人色综合网| 午夜高清视频在线观看| 一二三四国语在线观看视频| 狠狠综合久久久久综合网| 国内精品久久久久久99蜜桃| 你懂的国产视频| 91视频免费网址| 欧美videos娇小| 国产内射爽爽大片视频社区在线| 中文字幕日韩丝袜一区| 精品一区二区三区av天堂| 在打烊后仅剩两人接档泡面番 | 一级毛片免费播放试看60分钟| 皇上啊轻点灬大ji巴太粗太h| 国内精品久久久久影院一蜜桃 | 青青在线国产视频| 成人国产精品2021| 亚洲色图综合网站| 美女网站色在线观看| 日韩精品无码一区二区三区不卡| 国产三级电影在线播放| 一级做a爰片性色毛片中国| 欧洲一级毛片免费| 国产aa免费视频| kk4kk免费视频毛片| 欧美成人精品一区二区| 国产国产精品人在线视| www日本xxx| 欧美人善交videosg| 国产乱子伦手机在线|