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

          軟件下載吧

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

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

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

          作者:佚名 出處: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久久精品一区二区三区 | 国产一区二区三区夜色| 成人精品一区二区三区校园激情| 久久精品国产一区二区三| 日韩有码一区二区| 成人免费视频一区| 精品国产一区二区三区AV| 亚洲天堂一区在线| 亚洲国产精品一区第二页| 91久久精一区二区三区大全| 国产产一区二区三区久久毛片国语| 无码人妻精品一区二区蜜桃网站| 色欲AV蜜臀一区二区三区| 亚洲一区二区三区夜色| 性色A码一区二区三区天美传媒 | 国产av熟女一区二区三区| 色多多免费视频观看区一区| 国产成人一区二区三区电影网站| 97精品国产一区二区三区| 亚洲国产一区在线观看| 人妻少妇精品视频一区二区三区| 亚洲AV无码一区二区二三区入口| 国产自产在线视频一区| 国产一区二区女内射| 亚洲爆乳精品无码一区二区三区| 国产亚洲一区二区三区在线观看 | 国产福利一区二区精品秒拍| 国产精品99精品一区二区三区| 无码中文字幕乱码一区| 亚洲国产AV一区二区三区四区| 精品国产一区二区三区www| 国产一区二区三区美女| 一区二区三区免费在线观看| 精品人妻少妇一区二区| 国产区精品一区二区不卡中文| 99精品国产高清一区二区|