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

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

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > 6-8 制作網(wǎng)頁翻轉(zhuǎn)按鈕

6-8 制作網(wǎng)頁翻轉(zhuǎn)按鈕

時間:2024-03-07 12:47作者:下載吧人氣:17

大家經(jīng)常在一些網(wǎng)頁中看到一種會隨著鼠標的接觸而變色的按鈕,參見范例網(wǎng)頁。這稱之為鼠標翻轉(zhuǎn)效果,這是根據(jù)英文rollover翻譯而來的,其實不是很符合中文的語境。其原理是利用兩張圖片,平時顯示一幅,當鼠標接觸后換成另外一幅圖片。如下圖。這樣看起來好像是鼠標接觸的時候按鈕變亮了。現(xiàn)在我們來動手制作,首先在Photoshop中將它們制作成圖片,然后再做成網(wǎng)頁。

6-8 制作網(wǎng)頁翻轉(zhuǎn)按鈕

首先新建一個400×300的白底圖像,新建一層,利用形狀工具橢圓〖U/SHIFTU〗,在公共欄選擇第3種繪圖方式(填充像素),調(diào)出信息調(diào)板〖F8〗觀看數(shù)值,用任意顏色在新建層中間位置畫一個直徑40左右的正圓(按住SHIFT保持正圓)。如下左圖。
0614【窗口>樣式】調(diào)出樣式調(diào)板,點擊右上角圓三角按鈕,選擇“替換樣式”,在出來的樣式列表目錄中選擇“Web翻轉(zhuǎn)樣式”,確認目前選擇的是新建層,然后使用“選中狀態(tài)的藍色膠體按鈕”樣式。如下中圖紅色箭頭處。大家也可以自己選擇其他顏色的。
0615將新建層與背景層合并,然后【圖像>修整】,如下右圖所示。確定操作后圖像將被裁剪為和所畫的圓同等大小。這個命令的作用是根據(jù)左上角第一個像素處,或右下角最后一個像素處的顏色,在我們這幅圖像中這兩個地方都是白色。然后就將畫面中連續(xù)的白色部分裁剪掉。這就好像現(xiàn)實中打印圖像之后將紙張的邊緣裁剪掉一樣。

6-8 制作網(wǎng)頁翻轉(zhuǎn)按鈕6-8 制作網(wǎng)頁翻轉(zhuǎn)按鈕6-8 制作網(wǎng)頁翻轉(zhuǎn)按鈕

接著將背景圖層復(fù)制一層,對復(fù)制出來的圖層使用曲線工具,合并高光和暗調(diào)區(qū)域(高光點229,255;暗調(diào)點60,0),形成加亮按鈕的效果。如下左圖。完成后我們得到兩個圖層,分別是暗色按鈕的背景層,和亮色按鈕的背景復(fù)制層。如果以上步驟無法完成,點此下載范例文件
0616使用【文件>在ImageReady中編輯】〖CTRLSHIFTM〗,或點擊工具欄最下方6-8 制作網(wǎng)頁翻轉(zhuǎn)按鈕按鈕,將會跳轉(zhuǎn)到ImageReady中,這是Photoshop附帶的一個軟件,用來制作動畫和網(wǎng)頁。我們找到Web內(nèi)容和圖層兩個調(diào)板,如下右圖。后面的操作就是由這兩個調(diào)板配合完成。

6-8 制作網(wǎng)頁翻轉(zhuǎn)按鈕-6-8 制作網(wǎng)頁翻轉(zhuǎn)按鈕

在完成以上5個步驟后,我們就可以開始制作鼠標翻轉(zhuǎn)效果了。開始之前我們先簡要介紹一下制作的原理。范例網(wǎng)頁大家也看過,是隨著鼠標的接觸而發(fā)生的。這里涉及一種概念,叫事件和方法。我們的日常生活就是由許多事件和方法組成的,比如口渴是事件,喝水就是解決這個事件的方法。肚子餓是事件,吃東西就是方法。想學習是事件,看《大師之路》就是方法等等。
這其實就是一種編程的思想,和人一樣,電腦也是由事件和方法組成的一套邏輯系統(tǒng)。所以下面我們也要按照這種思路,去創(chuàng)建一個事件和解決方法。這個事件就是鼠標接觸事件。平時鼠標不接觸,我們只顯示暗色按鈕層(背景層)。而在鼠標接觸的事件發(fā)生后,顯示亮色按鈕層(背景副本層)。

0617點擊Web內(nèi)容調(diào)板下方的新建按鈕,將建立一個翻轉(zhuǎn)設(shè)定。位于上方的s060101代表正常狀態(tài),因此我們要在圖層調(diào)板中隱藏背景副本層,如下左圖。
位于下方的Over代表鼠標接觸事件,因此我們在圖層調(diào)板中顯示背景副本層并隱藏背景層(在這里由于圖層的遮蓋關(guān)系即使不隱藏也不影響最終效果)。如下右圖。可以從Web內(nèi)容調(diào)板中看到平時和鼠標接觸兩種不同的效果。

6-8 制作網(wǎng)頁翻轉(zhuǎn)按鈕-6-8 制作網(wǎng)頁翻轉(zhuǎn)按鈕

0618好,這樣我們就已經(jīng)完成了制作,記得保存文件。現(xiàn)在點擊工具欄上的6-8 制作網(wǎng)頁翻轉(zhuǎn)按鈕按鈕即可在ImageReady中預(yù)覽將來做成網(wǎng)頁后的實際效果。注意有可能在圖像窗口可能會出現(xiàn)如下圖的標有序號的橙色外框,這是切片的序號。如果覺得有礙視覺可點擊工具欄中的6-8 制作網(wǎng)頁翻轉(zhuǎn)按鈕按鈕隱藏切片。有關(guān)切片的概念和使用我們將在以后介紹。現(xiàn)在大家不必深究。
0619如果要做成實際的可以在網(wǎng)頁瀏覽器中打開的網(wǎng)頁,就要使用【文件>將優(yōu)化結(jié)果存儲為】〖CTRLALTSHIFTS〗。在出現(xiàn)的保存對話框中,保存類型要選擇為“HTML和圖像”,設(shè)置選項為“默認設(shè)置”,切片選項為“所有切片”。文件名可自行決定,但不要使用中文。保存的位置默認是個人文檔的位置,可自行更改(如桌面)。確定之后可能會出現(xiàn)一個如下右圖的警告框,提示文件名兼容性問題,可不必理會,按下好按鈕即可。這樣將會在指定的目錄中會產(chǎn)生一個.html文件和一個images目錄,如果要移動目錄位置必須兩者一起移動,否則圖片無法在網(wǎng)頁中顯示。因為網(wǎng)頁文件并不能包含圖片,圖片存放在images目錄中。

6-8 制作網(wǎng)頁翻轉(zhuǎn)按鈕6-8 制作網(wǎng)頁翻轉(zhuǎn)按鈕

這樣的操作就成為輸出操作,將Photoshop中的圖象輸出成為了其他的格式。同時大家也要保存好這個圖像的原始psd格式,因為以后我們還要“老瓶裝新酒”,在這個范例的基礎(chǔ)上增加動畫效果。參見范例網(wǎng)頁。大家也可自行打開s0603.psd文件研究一下。注意要退出預(yù)覽模式(按鈕6-8 制作網(wǎng)頁翻轉(zhuǎn)按鈕)才可以保存文件。ImageReady可以直接保存psd格式,動畫設(shè)定也會隨之保存。

雖然曲線工具在這一小節(jié)只占有很少的部分,但也是很重要的,沒有曲線的加亮效果,后面的一切也都無從談起。曲線的類型運用在網(wǎng)頁設(shè)計制作中是很常見的。
這是我們第一次真實地將自己的作品做成網(wǎng)頁格式,大家肯定有很多地方不明白。有種云里霧里的感覺,這沒關(guān)系,隨著本系列教程在以后的課程逐步增加更多的網(wǎng)頁相關(guān)知識,這片迷霧也會逐漸散去,大家將會發(fā)現(xiàn)來到一個更廣闊的天地。

事實上Photoshop和ImageReady在網(wǎng)頁制作方面來說功能十分有限,如果要有更多更好的功能,還是要使用專門的網(wǎng)頁制作軟件才行。我們在以后課程將學習到一個專門與Photoshop和ImageReady配合的網(wǎng)頁制作軟件GoLive,它可以完全兼容ImageReady產(chǎn)生的網(wǎng)頁代碼。在其中我們也可以創(chuàng)建以上的翻轉(zhuǎn)效果,并且還能有更多的變化。在文字教程發(fā)布之前,大家可以先通過GoLiveCS2視頻教程來學習。

標簽ps基礎(chǔ)教程,新手教程,ps新手教程,ps新手入門,ps入門

相關(guān)下載

查看所有評論+

網(wǎng)友評論

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

公眾號

主站蜘蛛池模板: 亚洲国产二区三区久久 | 人久热欧美在线观看量量 | 韩国good三级在线观看久 | 男女扒开双腿猛进入爽爽视频 | 日本成本人视频 | 日韩在线观看一区二区三区 | 亚州男人天堂 | 亚洲欧洲国产精品 | 欧美一级黄色毛片 | 亚洲日本视频在线 | 台湾一级特黄精品大片 | 久久高清一级毛片 | 国产三级国产精品 | 日本aaaa级片 | 久久777国产线看是看精品 | 99久久国产综合精品国 | 成年女人毛片免费视频 | 悠悠影院欧美日韩国产 | 国产精品久久久久久久久久久不卡 | 日韩欧美在线视频一区二区 | 一区二区三区免费视频 www | wwwxxx黄色| 日韩亚洲成a人片在线观看 日韩亚洲精品不卡在线 | 一区二区三区免费视频网站 | 国产欧美日韩在线人成aaaa | 男女午夜性爽快免费视频不卡 | 国产理伦 | 欧美成人性做爰网站免费 | 全部免费国产潢色一级 | 97青青草原国产免费观看 | 在线视频精品一区 | 老少配性xxxxxx | 一区二区三区国模大胆 | 日韩精品在线一区二区 | 国产男女猛烈无遮档免费视频网站 | 伊人国产在线视频 | 国产精品7m凸凹视频分类大全 | 国产欧美一区视频在线观看 | 欧美综合成人网 | 亚洲人成影院午夜网站 | 免费看一级毛片欧美 |