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

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

軟件下載吧

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

Photoshop教程:繪制另類的3D網頁布局

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

作者:佚名 出處:ximumu

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

先來目睹為快了:

Photoshop教程:繪制另類的3D網頁布局


效果不錯吧

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

Photoshop教程:繪制另類的3D網頁布局

漸變效果如下圖:

Photoshop教程:繪制另類的3D網頁布局


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

Photoshop教程:繪制另類的3D網頁布局

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

Photoshop教程:繪制另類的3D網頁布局

Photoshop教程:繪制另類的3D網頁布局

Photoshop教程:繪制另類的3D網頁布局

Photoshop教程:繪制另類的3D網頁布局


最終的效果如下圖:

Photoshop教程:繪制另類的3D網頁布局


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

Photoshop教程:繪制另類的3D網頁布局

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

Photoshop教程:繪制另類的3D網頁布局

Photoshop教程:繪制另類的3D網頁布局

最終效果如下圖:

Photoshop教程:繪制另類的3D網頁布局


再次選擇“圓角矩形工具”并設置圓角的大小為:5px。畫一個比較小的矩形,按ctrl+enter把路徑變為選區,然后給這個選區填充白色。

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

Photoshop教程:繪制另類的3D網頁布局

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

Photoshop教程:繪制另類的3D網頁布局

Photoshop教程:繪制另類的3D網頁布局

其效果如下圖:

Photoshop教程:繪制另類的3D網頁布局


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

Photoshop教程:繪制另類的3D網頁布局

Photoshop教程:繪制另類的3D網頁布局

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

Photoshop教程:繪制另類的3D網頁布局

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

Photoshop教程:繪制另類的3D網頁布局


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

Photoshop教程:繪制另類的3D網頁布局

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

Photoshop教程:繪制另類的3D網頁布局

Photoshop教程:繪制另類的3D網頁布局

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

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

Photoshop教程:繪制另類的3D網頁布局


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

Photoshop教程:繪制另類的3D網頁布局

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

Photoshop教程:繪制另類的3D網頁布局

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

Photoshop教程:繪制另類的3D網頁布局

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

Photoshop教程:繪制另類的3D網頁布局

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

Photoshop教程:繪制另類的3D網頁布局

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

Photoshop教程:繪制另類的3D網頁布局


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

Photoshop教程:繪制另類的3D網頁布局

Photoshop教程:繪制另類的3D網頁布局

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

Photoshop教程:繪制另類的3D網頁布局

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



Photoshop教程:繪制另類的3D網頁布局 Photoshop教程:繪制另類的3D網頁布局 Photoshop教程:繪制另類的3D網頁布局
標簽網頁,布局,3D,另類,教程,繪制,Photoshop

相關下載

查看所有評論+

網友評論

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

公眾號

主站蜘蛛池模板: 新版天堂资源中文在线 | 91精品免费看 | 乱人伦中文视频在线 | 免费高清特级毛片 | 国产大学生自拍 | 国产精品不卡无毒在线观看 | 亚洲久草视频 | 国产精品亚洲专一区二区三区 | 久久久这里只有精品加勒比 | 国产精品亚洲精品日韩已满 | 毛片大片免费看 | 久久国内精品自在自线观看 | 激情欧美一区二区三区 | 草草影院www色极品欧美 | 男操女b| 精品无码久久久久国产 | 扒开两腿猛进入爽爽视频 | 国产区精品一区二区不卡中文 | 亚洲欧美日韩三级 | 色色视频免费网 | 中文字幕一区二区精品区 | 天天草综合| 欧美一级大片在线观看 | 毛片美国| 日本三级香港三级网站 | 免费人欧美成又黄又爽的视频 | 岛国在线免费观看 | 久久91这里精品国产2020 | 欧美成人aaa大片 | 一级特黄a免费大片 | 91视频国产91久久久 | 亚洲精品一区二区在线播放 | 免费精品一区二区三区在线观看 | 成人亚洲综合 | 亚洲欧美国产精品久久久 | 青青影院一区二区免费视频 | 国产成人99久久亚洲综合精品 | 一区二区三区亚洲视频 | 国产午夜精品理论片免费观看 | 欧美 亚洲 丝袜 清纯 中文 | 天天亚洲 |