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

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

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > ps制作立體效果的網站導航教程

ps制作立體效果的網站導航教程

時間:2024-02-23 18:45作者:下載吧人氣:14

學好Photoshop最好的方法之一是解構、再現設計,以此來激發自己的靈感。懷著這樣的心情,讓我們走近 LittleLines.com 導航,去看一下,從他們最初是如何設計出這么精致的導航欄中,我們能學到什么。

最終效果圖:

ps制作立體效果的網站導航教程

步驟一

注意下面放大圖像中所有的細節,邊框、漸變、尺寸、顏色。在這種情況下,放大鏡將是你最好的朋友。

ps制作立體效果的網站導航教程

步驟二

新建一個Photoshop文件,出于圖解的目的,我將文件大小設置為540*200像素,分辨率72像素,但如果你要設計一個網頁,你就要將文件大小設置得足夠大,而不是現在的尺寸。

我們暫且忽視木質紋理背景,為導航欄設計一個純色背景。點擊工具欄底部的調色板的前景色,打開拾色器,然后為背景選擇一個比較好的顏色。我選擇橙色#e07814。

ps制作立體效果的網站導航教程

步驟三

點擊圖層面板底部的“創建新圖層”圖標新建一個圖層。在新圖層名稱上雙擊,將圖層重命名為“Nav Background”。

從現在起,當我告訴你新建一個圖層,給它命名時,這就是你要做的。

(注意:如果你的圖層面板不可見,執行主菜單中的“窗口—>圖層”將它打開。)

ps制作立體效果的網站導航教程

步驟四

現在點擊M鍵選擇矩形選框工具進行選擇。我們在步驟一中知道,導航欄背景高50像素。我習慣將信息面板打開,方便查看選區的詳細信息(“窗口—>信息”),這樣,當我點擊或者移動選區時,有一定的標準,可以一次得到選區。

得到選區后,按“Ctrl-Backspace”為選區填充背景色,然后按“Ctrl-D”取消選區。

ps制作立體效果的網站導航教程

步驟五

現在為按鈕設計背景。新建一個圖層,并命名為“Button Background”,設置前景色為#47361f,在Nav Background 圖層上新建選區,高38像素,按照自己的需要設置足夠的寬度。按“Alt-Delete”為選區填充新的前景色,按“Ctrl-D”取消選區。

ps制作立體效果的網站導航教程

步驟六

現在為“Button Background”圖層增加發光漸變。新建圖層并命名為“White Gradient”,根據之前的方法用拾色器設置前景色為白色,或者點擊D鍵重置前景色為黑色、背景色為白色,然后點擊X鍵將前景色轉換為白色。

ps制作立體效果的網站導航教程

步驟七

在我們應用漸變之前,在“White Gradient”圖層上右擊,從菜單中選擇“創建剪切蒙版”,從“White Gradient”圖層到“Button Background”圖層創建剪切蒙版,這樣就使得“White Gradient”圖層上的像素只有與“Button Background”圖層上像素重疊的地方可見。當你看到一個箭頭指向所剪掉的圖層時,那么剪切蒙版創建成功了。

(注意:有一個創建剪切蒙版的簡單方法,按住Alt鍵,移動光標到圖層面板上兩個圖層之間,當光標變為看起來是兩個重疊的圓時,單擊鼠標左鍵,創建剪切蒙版。)

ps制作立體效果的網站導航教程

步驟八

當圖層重疊在一起后,我們可以繼續往下進行,添加漸變了。 點擊并拖動漸變工具,從棕色按鈕頂部到大約中間部分。

(注意:當點擊并拖動漸變工具時要按住Shift鍵,這樣會保證它是一條垂直線。)

ps制作立體效果的網站導航教程

步驟九

很顯然,我們創建的漸變太強,所以設置“White Gradient”圖層“填充”20%,“混合模式”為“顏色減淡”。

ps制作立體效果的網站導航教程

步驟十

接下來,在棕色按鈕頂部創建雙邊框。新建一個圖層,命名為“Double Border”,設置前景色和背景色分別為#644239和#866d53 。

找到工具面板頂部的矩形選框工具,點擊并按住使其顯示彈出菜單。從列表中選擇“單行選框工具”,在棕色按鈕背景頂部點擊,在畫布上新建一個一像素高的水平選區。不要擔心定位不準確,你的邊框創建后可以上下移動。

ps制作立體效果的網站導航教程

步驟十一

建立單行選區后,點擊“ Alt-Backspace”,用上一步設置的前景色為其填充。按鍵盤上的向下鍵,使選區向下移動1像素,按Ctrl-Backspace用新的背景色為其填充,然后按“Ctrl-D”取消選區。

如果你的線位置不合適,按V鍵選擇移動工具,用鼠標或者上下鍵上下移動它,直到它覆蓋棕色按鈕背景上部2像素。我已將下面的圖片放大,以便你看清楚。

ps制作立體效果的網站導航教程

步驟十二

最后我們需要做的是將雙邊框添加到我們已經在“Button Background”圖層上創建的剪切蒙版,像我們之前做的,在圖層面板中右擊“Double Border”,從菜單中選擇“創建剪切蒙版”。

ps制作立體效果的網站導航教程

步驟十三

在我們現在完成的背景基礎上,按T鍵選擇文字工具,準備好字體和樣式。LittleLines用的是Lucida Grande字體,這種字體是從OSX操作系統上找到的一種Apple系統字體,但是Windows Users不用擔心,只管往下讀。我們可以在字符面板上設置字體樣式。(如果字符面板不可見,在主菜單中選擇“窗口”—>“字符”打開)。

Lucida Grande是Apple獨有的一種字體,直到Safari 瀏覽器在含有Lucida Grande和Grande Bold字體的PC機上發布。因為這是一種Apple字體,我不能在我的教程里提供下載。如果你需要這種字體,你可以登錄到Windows version of the Safari browser from the Apple’s website ,然后瀏覽Program Files > Safari > Safari.resources folder,在這里你可以找到標準和加粗版本的字體來下載安裝。然后將這些文件拖動到控制面板中的字體文件夾中安裝。(注意:你需要重啟Photoshop更新字體列表。)

在字符面板的左上角的字體下拉菜單中找到Lucida Grande字體并選中它,如果由于某些原因你的Lucida Grande字體沒有安裝成功,你可以用一種相似的sans-serif字體,比如Verdana, Arial 或者 Helvetica來達到相似的效果。設置字體樣式為Bold,字號11像素,顏色為#bcb19b,在字符面板底部選擇“平滑”。

ps制作立體效果的網站導航教程

步驟十四

在畫布上點擊,新建一個新的文本實例,輸入你的文字鏈接。像這樣來模擬一個網站,我利用空白來將鏈接分開,現在,我在鏈接項之間用了9處空白。當輸入完文本之后,點擊Photoshop頂部字體文字工具選項卡上的復選標記圖標。你會看到,在你的圖層面板中新生成了一個文字圖層。

ps制作立體效果的網站導航教程

步驟十五

在文字圖層仍在選中狀態下,按住Ctrl鍵,點擊圖層面板底部的“創建新圖層”圖標,這樣會在當前圖層下面新建一個圖層,將新圖層命名為“Button Current”。

按M鍵選擇矩形選框工具(如果之前我們用來創建水平線的單行選框工具仍在當前,要確保從彈出菜單中返回到矩形選框工具),如下所示,從左上角到前兩個按鈕中間創建一個矩形選區。

ps制作立體效果的網站導航教程

步驟十六

按D鍵重置你的前景色和背景色分別為黑、白,按“Ctrl-Backspace”鍵用白色填充選區。先不要按“Ctrl-D”鍵取消選區。

ps制作立體效果的網站導航教程

步驟十七

下面我們要用“圖層樣式”為“Button Current”圖層添加漸變和描邊,但是,首先,點擊工具面板中的前景色板,將前景色設置為#c8a282。

在“Button Current”圖層上右擊,從菜單中選擇“混合選項”,打開“圖層樣式”對話窗口,然后設置如下圖層樣式,根據下面仔細檢查你的設置。我們可以注意到,在“漸變疊加”選項區中,當我們點擊“漸變選擇器”時,到透明色板的前景色用了你剛才設置的前景色。用這種方法,我們避免了用當前顏色創建自定義漸變。

(注意:如果你的漸變定位不合適,可以在畫布上點擊并拖動它到合適的位置。)

ps制作立體效果的網站導航教程

ps制作立體效果的網站導航教程

步驟十八

如果你做的正確,那么現在你的菜單應該如下所示。

ps制作立體效果的網站導航教程

步驟十九

在當前畫布上,LittleLines當前按鈕上有黑色文本,選擇你的文字圖層,點擊T鍵激活“文字工具”,選中第一個按鈕上的文字,在字符面板上將選中的文字顏色改為黑色。

ps制作立體效果的網站導航教程

步驟二十

在按鈕準備方面,最后一步為在剩余按鈕中間添加黑色分隔線。點擊“Double Border”圖層,然后在它上面新建一個新圖層,命名為“Divider Lines”。右擊新圖層,從菜單中選擇“創建剪切蒙版”,為“Divider Lines”圖層創建一個剪切蒙版。如下所示,現在已經有三個圖層重疊到“Button Background”圖層上。

ps制作立體效果的網站導航教程

步驟二十一

為了創建黑線,按D鍵將前景色重置為黑色,然后從矩形選框工具的彈出菜單中選擇可以生成1像素寬豎直選區“單列選框工具”。

從之前的例子中我們可以看到,這些小的黑色分隔線只放在每個按鈕的左邊框,所以,在兩個按鈕之間點擊,創建1像素寬的選區,如果位置不合適,按左、右箭頭鍵輕輕移動它,然后按“Alt-Delete”鍵為其填充黑色。重復此操作,直到將所有剩余按鈕劃分完畢,不要忘記也要在最后一個按鈕右邊緣畫線。做完后按“Ctrl-D”鍵取消選區。

ps制作立體效果的網站導航教程

步驟二十二

對那些想深入了解,為背景添加木質紋理的同學,在這里我也解釋一下(因為我知道,如果我不這樣做,我會收到50封電子郵件)。

首先,你需要先找到你喜歡的一種木質紋理,我覺得defcon-x 是能找到這種紋理的最好的網站之一,它們擁有很多種高分辨率的木質紋理可供選擇。在圖片上右擊選擇復制圖片,然后返回到Photoshop文件。

選中“Nav Background”圖層(有橙色紋理的那個),按“Ctrl-V”將紋理復制到文件中。這樣將會自動產生一個新圖層,命名為“Wood”。木質圖層現在填充到整個文件中,我們對它進行修剪。像前面那樣,在新建的“Wood”圖層上右擊,在菜單中選擇創建剪切蒙版。

(注意:如果你覺得由于高分辨率而不能足夠看清木質紋理,可以用自由變換工具將紋理縮小到合適的尺寸。)

ps制作立體效果的網站導航教程

步驟二十三

最后一步工作,為“Nav Background”圖層添加一個由淺黑色到透明的漸變疊加圖層樣式。右擊“Nav Background”圖層,從菜單中選擇混合選項,然后設置如下漸變疊加圖層樣式。

ps制作立體效果的網站導航教程

步驟二十四

就這樣,你的導航欄完成了。希望你能在這個實例中有所收獲!

ps制作立體效果的網站導航教程

標簽網站導航,教程,效果,立體,制作,Photoshop

相關下載

查看所有評論+

網友評論

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

公眾號

主站蜘蛛池模板: 日本 欧美 在线 | 91精品国产91热久久p | 成人黄色三级 | 成人男女网18免费91 | 亚洲国产精品综合久久 | 欧美日韩一区二区综合 | 大学生一级一片第一次欧美 | 亚洲国产第一 | 美女免费在线视频 | 精品国产一区二区三区四区vr | 日韩 国产 欧美 | 午夜91理论片 | 国产香蕉成人综合精品视频 | 你懂的国产精品 | 亚洲视频在线一区二区 | 中文字幕在线看片成人 | 国产精品一区二区丝瓜 | 国产片91人成在线观看 | 久久精品一区 | 欧美日韩一区二区三区视视频 | 久久综久久美利坚合众国 | 亚洲欧美国产中文 | 国产免费一区二区在线看 | a理论片| 日韩理论视频 | 国产欧美日韩成人 | 国产综合久久久久 | 久久精品视频5 | 国产一级特黄aa级特黄裸毛片 | 久久免费小视频 | 亚洲伊人久久综合影院2021 | 国产激情一级毛片久久久 | 日本一级看片免费播放 | 久久怡红院亚欧成人影院 | 黄色毛片视频校园交易 | 欧美精品高清在线观看 | 成人国产网站 | 美女视频网站永久免费观看软件 | 日本精品一在线观看视频 | 啪啪一级视频 | 91热播 |