ps網(wǎng)站切圖網(wǎng)頁(yè)切圖教程詳解.doc

.Ps網(wǎng)站切圖詳解一，基本概念1，切圖，是一種網(wǎng)頁(yè)制作技術(shù)，他是將美工效果圖轉(zhuǎn)換為頁(yè)面效果圖的重要技術(shù)。Fireworks也提供了切圖技術(shù)，F(xiàn)lash則直接提供了網(wǎng)頁(yè)格式輸出技術(shù)（不需要切圖）。2，切片，是切圖的直接結(jié)果，切圖實(shí)際上就將圖切分為一系列的切片二，切圖操作過程1，切圖工具圖標(biāo)的識(shí)別2，切圖基本操作1）基本操作有兩個(gè)：劃分切片和編輯切片劃分切片，是使用切片工具，在原圖上進(jìn)行切分的操作。編輯切片，是對(duì)切分好的切片進(jìn)行編輯的操作，編輯包括對(duì)切片的名稱、尺寸等的修改等等下面我們看一下這兩個(gè)操作2）基本操作如果想移動(dòng)某個(gè)切片，可以使用“切片選擇工具”選擇某個(gè)切片，并用鼠標(biāo)進(jìn)行拖動(dòng)，也可以使用實(shí)現(xiàn)，另外如果想精確的細(xì)微移動(dòng)，則可以使用實(shí)現(xiàn)如果想將某個(gè)切片存為某個(gè)圖片輸出，可以使用“切片選擇工具”選擇某個(gè)切片，然后選擇“文件”菜單，并選擇“存儲(chǔ)為Web所用格式(W).”，然后在彈出的界面中.3，切圖技巧1）一張圖，可以有多種切分方式，如下：既然存在n多種切圖方式，那么是不是哪種方式都可以滿足要求？答案：不是的。一般對(duì)頁(yè)面的要求是，當(dāng)頁(yè)面大小發(fā)生變化時(shí)，頁(yè)面的各部分可以相對(duì)自由地伸縮，而不會(huì)使頁(yè)面發(fā)生錯(cuò)亂或變形等問題。我們切分好的圖是要輸出為Html格式的網(wǎng)頁(yè)文件的，然后通過網(wǎng)頁(yè)編輯器，將該頁(yè)面進(jìn)行加工，做成符合要求（例如可以根據(jù)內(nèi)容多少，自由伸縮等）的模板頁(yè)面。這其中，切圖的方式直接影響著模板頁(yè)面是否能夠滿足實(shí)際的要求。我們來(lái)看一個(gè)例子：2）切圖技巧主要有幾下幾點(diǎn)屬性均勻的區(qū)域適合分為一個(gè)切片，均勻主要是指顏色和形狀都沒有變化，或者在X或在Y方向上沒有變化。屬性漸變的區(qū)域適合分為一個(gè)切片，漸變有兩種表現(xiàn)形式顏色漸變形狀漸變根據(jù)原圖的內(nèi)容布局，確定整體的切分策略，即切分要有分塊的思想，要在想象中將整個(gè)布局看成是一個(gè)兩個(gè)table，然后在具體到每個(gè)table，去考慮里面應(yīng)該如何切。下面通過幾個(gè)圖例來(lái)說(shuō)明三，切圖的Html格式輸出切圖完成，就可以輸出為Html格式的頁(yè)面了。在“文件”菜單中，選擇“存儲(chǔ)為Web所用格式(W).”，在彈出的頁(yè)面中直接選擇“存儲(chǔ)”，然后在彈出的界面中，填入文件名，保存類型選擇“HTML 和圖像(*.html)”，設(shè)置為“默認(rèn)設(shè)置”即可，切片選擇“所有切片”。然后點(diǎn)擊“保存”按鈕就可以了。后面的事情，就是編輯輸出的Html頁(yè)面了。 網(wǎng)頁(yè)制作：從切圖到生成網(wǎng)頁(yè)鑒于很多朋友問到如何切圖這個(gè)問題，又鑒于這個(gè)問題可大可小，一兩句話是絕對(duì)講不清楚的，所以今天有空閑在家里就舉一個(gè)簡(jiǎn)單的例子來(lái)說(shuō)明這個(gè)問題吧!OK，讓我們開始： step1:在PhotoShop中打開設(shè)計(jì)稿，如下圖選擇工具板上的slice切片工具，先大刀闊斧的切上一番!技巧： 大面積的色塊單獨(dú)切成一塊，盡可能的保持在水平線上的整齊(這個(gè)問題你們?cè)诤竺娴闹谱黜?yè)面中深有感觸)切好的圖如下所示： step2:在PhotoShop中選擇file-save for web.來(lái)輸出，這里要注意一些參數(shù)的選擇： 我們來(lái)看看紅線所標(biāo)識(shí)的1，2，3部分，將1所示的切片工具選中，然后點(diǎn)選2所示的圖片，在3所示的地方選擇色值，如果色彩單一可以選擇盡量小的色值位;(為什么要這樣？)答案：這樣會(huì)大大減小文件的大小，同時(shí)又能比較好的保持圖片的色彩；設(shè)置好后點(diǎn)OK輸出文件，這里的文件包括了一個(gè)htm和images文件夾，如圖： 這里候你的頁(yè)面才算完成了一半，接下來(lái)在Dreamweaver里建立站點(diǎn)： step3:定義站點(diǎn)： 在圖示左邊的site name中為站點(diǎn)起一個(gè)名字，如example 然后在下面的local root folder中選擇我們剛才導(dǎo)出的站點(diǎn)所以的文件夾；站點(diǎn)建好后在site map中我們看到： (為什么要建立站點(diǎn)？)建立站點(diǎn)可以使我們養(yǎng)成一種很好的習(xí)慣，就是把一個(gè)網(wǎng)站所包含的文件，文件夾有條理的放在一起，同時(shí)我們很容易的將這個(gè)站點(diǎn)移動(dòng)到其它地方而不用對(duì)文件路徑進(jìn)行任何改寫!(當(dāng)然如果你實(shí)在不想建立站點(diǎn)也沒人強(qiáng)求你，我在事際工作中就遇到這樣的同事，沒有習(xí)慣為頁(yè)面建立站點(diǎn)，當(dāng)然后果的要麻煩少少了) step4:重新制作頁(yè)面表格(為什么？)通常在photoshop中直接導(dǎo)出的htm文件是不可以直接使用的，因?yàn)橛行┑胤皆趯?shí)際運(yùn)用時(shí)要作調(diào)整，比如有動(dòng)態(tài)文字的地方，我們需要在頁(yè)面中輸入頁(yè)不是使用圖片，那么圖片就要把它拿走，如果你在直接生成的htm中拿走不想要的圖片再加上你想要的東西，你們發(fā)現(xiàn)頁(yè)面將變得慘不忍睹，整個(gè)頁(yè)面可能完全亂了套! 好了，先來(lái)分析一下導(dǎo)出的htm文件吧： 根據(jù)這個(gè)頁(yè)面表格所示，我們?cè)谛碌捻?yè)面中建立一個(gè)三行一列的表格: 注意，把cellpadding,cellspacing,border三項(xiàng)值設(shè)為0，這個(gè)很重要；因?yàn)閳D片中我們不希望看到空隙和錯(cuò)位；然后再在第一行中插入一個(gè)三行兩列的表格，并合并左邊三列的表格，如圖： 插入表格的時(shí)個(gè)要注意對(duì)比原h(huán)tm文件中的內(nèi)容，思考為什么這樣做； 接下來(lái)在第二行中插入一個(gè)二行二列的表格，按上面的方法合并左邊的格子，并在右邊格子的第一行插入一個(gè)一行五列的表格如圖示： 最后在下面一行插入一個(gè)三行二列的表格，并將圖示中1,2外分別合并： 最后得到的頁(yè)面應(yīng)該是這樣的： 好了，現(xiàn)在我們的任務(wù)就是往表格里面加圖加內(nèi)容了!這里就不再贅述了!(其實(shí)已經(jīng)贅述得夠多了!) 還要提醒大家注意的是在加圖片和內(nèi)容時(shí)，表格單元格的align,valign這兩個(gè)屬性非常重要，要不遺余力的運(yùn)用它們來(lái)幫你做事!OK，自己實(shí)踐一下!不用切圖的頁(yè)面圓角首先看樣式表文件：.b1 height:1px; font-size:1px; overflow:hidden; display:block; background:#000; margin:0 5px;.b2 height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:2px solid #000; border-left:2px solid #000; margin:0 3px;.b3 height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:1px solid #000; border-left:1px solid #000; margin:0 2px;.b4 height:2px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;接著看頁(yè)面代碼：當(dāng)然你也可以用其他的標(biāo)簽或者之類，應(yīng)該也是可以的用Fireworks制作具有動(dòng)態(tài)效果的切圖在上一章中，我們說(shuō)到用fireworks2進(jìn)行切圖，可以將一個(gè)大圖片分割成不同色深的多個(gè)小圖片，并且生成相應(yīng)的網(wǎng)頁(yè)文件或代碼，從而減小網(wǎng)頁(yè)的重量。今天我要接著告訴您的是，功能強(qiáng)大的fireworks2不僅可以制作靜態(tài)切圖，更能夠?qū)С鰆avascript動(dòng)態(tài)特效！打開monitor.gif 件后你可以看到那上面畫的是一個(gè)電視機(jī)，現(xiàn)在我們要做的是將這個(gè)電視機(jī)放入一個(gè)網(wǎng)頁(yè)，并且當(dāng)瀏覽者的鼠標(biāo)按下電視機(jī)上的開關(guān)后，會(huì)在屏幕中播放內(nèi)容。第一步，要在圖象上制作用來(lái)調(diào)用javascript的熱區(qū)，制作熱區(qū)的方和上一章中切割圖象的方法一樣，都是使用工具欄最右下方的切割工具 （SliceTool）。由于我們?cè)O(shè)想中的這個(gè)javascript是通過按下電視機(jī)開關(guān)后在屏幕上出現(xiàn)變化，所以需要定義兩個(gè)熱區(qū)，分別是電視機(jī)開關(guān)和電視機(jī)屏幕。 然后選擇“windows Object”（Ctrl+I）選項(xiàng)，打開Object面板。先選中電視屏幕的熱區(qū)，Object面板即將顯示這個(gè)熱區(qū)的屬性，其中的連接地址默認(rèn)為“No URL(noHREF)”也就是當(dāng)前網(wǎng)頁(yè)的連接（#）；項(xiàng)內(nèi)容為鼠標(biāo)放到圖片上時(shí)顯示的提示；這下面那個(gè)紅色的靶心是target ， 用來(lái)確定連接標(biāo)簽的目標(biāo)的，在這兒就不多說(shuō)了；最關(guān)鍵的是：不要激活 target下的“Auto-Name Slices”功能，而需手動(dòng)給這個(gè)切割熱區(qū)起一個(gè)名字，這樣做是為了在指定behavior時(shí)能夠方便的辨認(rèn)目標(biāo)。還要注意的是在給slice命名時(shí)，不能使用中文，否則生成的javascript 代碼會(huì)在瀏覽器中長(zhǎng)時(shí)間報(bào)錯(cuò)。在這個(gè)例子中我給屏幕熱區(qū)起的名字是“screen”， 再以同樣的方法給電視開關(guān)取名為“button”。接著做一個(gè)電視上要顯示的圖象，選擇“File New”（Ctrl+N） 命令新建一個(gè)和屏幕熱區(qū)大小相同的圖片（注意：尺寸過大或過小都會(huì)被 javascript縮放到屏幕熱區(qū)的大?。?。新建文件后，您可以使用工具欄上各類工具隨心所欲地畫出自己喜歡的東東（工具欄中各個(gè)繪圖工具的使用 方法將在以后的教程中做詳細(xì)介紹）。對(duì)自己的作品滿意了嗎？您畫完后 請(qǐng)選擇“File Export”（Ctrl+Shift+R）將圖象導(dǎo)出為網(wǎng)絡(luò)圖形。 Fireworks的圖象導(dǎo)出功能非常強(qiáng)大，但現(xiàn)在您只要一路NEXT就可以了，并將生成的gif文件保存到指定的目錄下。 然后回到我們剛才編輯的電視機(jī)畫面，選定開關(guān)熱區(qū)，再選擇“ Windows Behaviors”（Ctrl+Alt+H）選項(xiàng)，打開behaviors面板。按下添加按鈕，選擇“Swap Image”，在隨后彈出的Swap Image對(duì)話框中的“ Swap Image in Slice”選項(xiàng)中選擇“screen”熱區(qū)（也可以在右邊的熱區(qū)畫面中直接選擇screen熱區(qū)，這樣做就可以讓button熱區(qū)調(diào)用一個(gè)使screen 熱區(qū)產(chǎn)生變化的javascript）；在“Source of Swap”中選擇“Image File”并在瀏覽面板中指定剛才制作的那個(gè)gif圖象。最后激活“Restor Image onMouseOut”（激活這個(gè)功能后，瀏覽者將鼠標(biāo)離開調(diào)用javascript 的熱區(qū)后，發(fā)生變化的圖象將恢復(fù)正常。 當(dāng)上面這步完成后，behaviors面板中將出現(xiàn)一個(gè)“OnMouseOver”的件處理器，這就說(shuō)明剛才做的熱區(qū)已經(jīng)成功調(diào)用了javascript。但我們期的效果是當(dāng)鼠標(biāo)按下開關(guān)后才在電視屏幕中顯示內(nèi)容，所以請(qǐng)按下“ OnMouseOver”旁的下拉菜單按鈕，在彈出的菜單中選擇“OnClick”。好，到這兒基本上該完工了。想看看作品的效果如何嗎？選擇“File Preview in Browser Preview in .”（F12）命令，就可以在新窗口 中預(yù)覽剛才的作品了。達(dá)到預(yù)期效果了嗎？滿意的話就可以導(dǎo)出成品了，這兒有個(gè)小技巧， 由于fireworks的預(yù)覽功能已經(jīng)生成了臨時(shí)的圖形和HTML文件，所以如您使用IE5行預(yù)覽的話，可以直接在自己滿意的預(yù)覽窗口中將所以文另存，就可以免去導(dǎo)出步驟而得到完整的作品了。如果您沒有IE，那只能乖乖地使用導(dǎo)出功能，具體地導(dǎo)出方法和我們?cè)谏弦徽轮兴f(shuō)的靜 態(tài)切圖的導(dǎo)出方法相同，在這兒就步重復(fù)了。Fireworks使用技巧迄今為止，F(xiàn)ireworks在一陣又一陣的喝彩聲中經(jīng)歷了4個(gè)成長(zhǎng)階段，目前已經(jīng)推出了4.0版本。最初，F(xiàn)ireworks同時(shí)又是互聯(lián)網(wǎng)的新生兒，它非常誠(chéng)懇地吸收了眾家的長(zhǎng)處。不管是平面設(shè)計(jì)軟件的圖層和色彩，還是動(dòng)畫制作的帆要領(lǐng)不管是它的Flash圖符和庫(kù)面析，還是Dreamweaver的快速啟動(dòng)欄；不管是矢量繪圖軟件中的工具，還是位圖圖像編輯軟件的面析，只要它們有優(yōu)點(diǎn)，它都學(xué)來(lái)。Fireworks在學(xué)習(xí)中創(chuàng)新，從而一步一步走向成熟，也越來(lái)越受大家的青睞。第一篇用Fireworks切割圖形 但傳統(tǒng)的切圖工作十分繁瑣，許多設(shè)計(jì)者都是使用Photoshop類軟件將圖一片片分好，然后在分別保存為不同色深的gif圖象，雖然可以使用action之類的自動(dòng)執(zhí)行命令集，但實(shí)際工作量依舊十分驚人，而且非常容易切錯(cuò)尺寸。現(xiàn)在用了Fireworks就可以非常輕松地切割圖片了，首先用Fireworks 打開要切割地圖形文件（File Open），當(dāng)圖片打開后選擇工具欄最右下方的切割工具（SliceTool），在圖中按住鼠標(biāo)左鍵任意畫出想要的切割效果（注意不要將選區(qū)重疊），圖中那些紅線表示就是最后生成的表格分欄情況。等全部的切割區(qū)域完成后選擇“FILE EXPORT”進(jìn)入導(dǎo)出，在Format 中選擇gif，再根據(jù)圖象的具體情況設(shè)置色深、調(diào)色板和透明色，然后按下 “Next”。最后再導(dǎo)出成HTML文件的對(duì)話框中指定保存的目錄，在“slicing:” 選項(xiàng)中選擇“Use Slice Objects:”按照剛才劃分出的切割情況來(lái)切圖， 并分別保存。在“Style選項(xiàng)”中選擇“Generic”導(dǎo)出成標(biāo)準(zhǔn)的HTML源碼。 OK，如果要和Dreamwever一同使用的話，可以選擇“Dreamweaver Libra- ry.lbi”將導(dǎo)出為DREAMWEAVER2的一個(gè)模板，而“Dreamweaver” 選項(xiàng)將 導(dǎo)出成DREAMWEAVER作出來(lái)的網(wǎng)頁(yè)源碼。就這樣，僅幾秒種的時(shí)間，就完成了一個(gè)非常專業(yè)的圖形切割。怎么樣，您是不是感受到了Fireworks的強(qiáng)大功能。 第二章 用Fireworks制作具有動(dòng)態(tài)效果的切圖在上一章中，我們說(shuō)到用fireworks2進(jìn)行切圖，可以將一個(gè)大圖片分割成不同色深的多個(gè)小圖片，并且生成相應(yīng)的網(wǎng)頁(yè)文件或代碼，從而減小網(wǎng)頁(yè)的重量。今天我要接著告訴您的是，功能強(qiáng)大的fireworks2不僅可以制作靜態(tài)切圖，更能夠?qū)С鰆avascript動(dòng)態(tài)特效！打開monitor.gif 件后你可以看到那上面畫的是一個(gè)電視機(jī)，現(xiàn)在我們要做的是將這個(gè)電視機(jī)放入一個(gè)網(wǎng)頁(yè)，并且當(dāng)瀏覽者的鼠標(biāo)按下電視機(jī)上的開關(guān)后，會(huì)在屏幕中播放內(nèi)容。第一步，要在圖象上制作用來(lái)調(diào)用javascript的熱區(qū)，制作熱區(qū)的方和上一章中切割圖象的方法一樣，都是使用工具欄最右下方的切割工具 （SliceTool）。由于我們?cè)O(shè)想中的這個(gè)javascript是通過按下電視機(jī)開關(guān)后在屏幕上出現(xiàn)變化，所以需要定義兩個(gè)熱區(qū)，分別是電視機(jī)開關(guān)和電視機(jī)屏幕。 然后選擇“windows Object”（Ctrl+I）選項(xiàng)，打開Object面板。先選中電視屏幕的熱區(qū)，Object面板即將顯示這個(gè)熱區(qū)的屬性，其中的連接地址默認(rèn)為“No URL(noHREF)”也就是當(dāng)前網(wǎng)頁(yè)的連接（#）；項(xiàng)內(nèi)容為鼠標(biāo)放到圖片上時(shí)顯示的提示；這下面那個(gè)紅色的靶心是target ， 用來(lái)確定連接標(biāo)簽的目標(biāo)的，在這兒就不多說(shuō)了；最關(guān)鍵的是：不要激活 target下的“Auto-Name Slices”功能，而需手動(dòng)給這個(gè)切割熱區(qū)起一個(gè)名字，這樣做是為了在指定behavior時(shí)能夠方便的辨認(rèn)目標(biāo)。還要注意的是在給slice命名時(shí)，不能使用中文，否則生成的javascript 代碼會(huì)在瀏覽器中長(zhǎng)時(shí)間報(bào)錯(cuò)。在這個(gè)例子中我給屏幕熱區(qū)起的名字是“screen”， 再以同樣的方法給電視開關(guān)取名為“button”。第三章 下面告訴你如何做動(dòng)畫，COOL！用Fireworks2制作動(dòng)畫一共有三中方法，由簡(jiǎn)到難的排列起來(lái)分別是： 合并圖象形成動(dòng)、使用符號(hào)（Symbol ）生成畫效果和手工繪制。 合并圖象形成動(dòng)畫，顧名思義就是將一系列圖片按序排列生成不同的幀而形成動(dòng)畫（很象Director中的Space to time功能），不過這種排列完全是程序自動(dòng)執(zhí)行的，免去了大量的手工操作。 具體的方法是這樣的（當(dāng)然使用這種方法的前提是必須有一連串連續(xù) 的圖片）：選擇“File Open Multiple ”命令。進(jìn)入系列圖片所在的目錄，然后按次序?qū)⒁贿B串的圖片加入（“Add”命令）對(duì)話框左下部的窗口，并且激活“Open as Animatio”選項(xiàng)，再按下“Done”按鈕就OK了。 在動(dòng)畫生成后，按下“Windows Frame”（Ctrl+ Alt+K）命令，您就看到原來(lái)的一系列圖片都按次序地從Frame1往下排到底。按下屏幕右下角的播放鍵就可以瀏覽動(dòng)畫效果了。這種純粹的懶辦法最合適我這樣畫不來(lái)線條的人了，一次有只用了10 秒鐘就搞定了一個(gè)小鳥飛飛的圖片，效果棒極了！不過，要是手頭沒有現(xiàn) 成的連續(xù)圖片，那只能勞駕，自己親自動(dòng)手了。而許多圖畫中有規(guī)則的動(dòng)態(tài)效果若是用手工制作，既費(fèi)時(shí)間也未必能夠達(dá)到理想的效果。所以Fireworks2提供了一個(gè)Tween功能，使用戶可以指定程序生成動(dòng)態(tài)過度效果（ 感覺就更Flash里的一樣）。在繪制動(dòng)畫前，我們事先必須明確動(dòng)畫的工作原理。我想簡(jiǎn)單的說(shuō)， 動(dòng)畫是有不變的物件（object）和會(huì)變的物件兩部分組成。通常不變的物是只如背景之類始終在動(dòng)畫中顯示的物件，而會(huì)變的物件是指通過變化 形成動(dòng)畫的物件。所以在制作動(dòng)畫之前得先制作不變的物件，為此Fire- works2提供了一個(gè)共享層的概念（Share Layer）。 我們都知道，動(dòng)畫是由一個(gè)個(gè)不同的幀（Frame）組成的，而共享層就是在所有幀中都顯示的一個(gè)層，這樣我們只要將動(dòng)畫中不變的物件全放在這個(gè)層中，以后只需要修改一個(gè)幀的共享層中內(nèi)容就可以使所有的幀都達(dá)到相應(yīng)變化，大大減少了工作量。設(shè)置共享層的命令是Layer 面版的彈 出菜單中的“Share Layer”命令，設(shè)置為共享的層在Layer面版中都有一 個(gè)特定的共享符號(hào)（Wegb Layer是系統(tǒng)自動(dòng)設(shè)置的共享層，用于放置熱點(diǎn)、 切割區(qū)）。在完成不變的物件（object）后就可以使用Tween 功能制作動(dòng)畫效果 了。Tween功能的原理是將物件（object）轉(zhuǎn)化為符號(hào)（symbol），然后 確定符號(hào)的初始和結(jié)束樣例（instance），再將這些樣例轉(zhuǎn)換為具有過度 效果的連續(xù)幀（frame）。Tween功能支持物件的位移、旋轉(zhuǎn)、縮放、扭曲、 以及透明度和層效果（effect）的過度。下面我來(lái)舉個(gè)實(shí)例：通過十個(gè)幀 讓我的名字“Arky”從圖象的左上角移動(dòng)到右下角同時(shí)逐漸變深。 第三章 下面告訴你如何做動(dòng)畫，COOL！用Fireworks2制作動(dòng)畫一共有三中方法，由簡(jiǎn)到難的排列起來(lái)分別是： 合并圖象形成動(dòng)、使用符號(hào)（Symbol ）生成畫效果和手工繪制。 合并圖象形成動(dòng)畫，顧名思義就是將一系列圖片按序排列生成不同的幀而形成動(dòng)畫（很象Director中的Space to time功能），不過這種排列完全是程序自動(dòng)執(zhí)行的，免去了大量的手工操作。 具體的方法是這樣的（當(dāng)然使用這種方法的前提是必須有一連串連續(xù) 的圖片）：選擇“File Open Multiple ”命令。進(jìn)入系列圖片所在的目錄，然后按次序?qū)⒁贿B串的圖片加入（“Add”命令）對(duì)話框左下部的窗口，并且激活“Open as Animatio”選項(xiàng)，再按下“Done”按鈕就OK了。 在動(dòng)畫生成后，按下“Windows Frame”（Ctrl+ Alt+K）命令，您就看到原來(lái)的一系列圖片都按次序地從Frame1往下排到底。按下屏幕右下角的播放鍵就可以瀏覽動(dòng)畫效果了。這種純粹的懶辦法最合適我這樣畫不來(lái)線條的人了，一次有只用了10 秒鐘就搞定了一個(gè)小鳥飛飛的圖片，效果棒極了！不過，要是手頭沒有現(xiàn) 成的連續(xù)圖片，那只能勞駕，自己親自動(dòng)手了。而許多圖畫中有規(guī)則的動(dòng)態(tài)效果若是用手工制作，既費(fèi)時(shí)間也未必能夠達(dá)到理想的效果。所以Fireworks2提供了一個(gè)Tween功能，使用戶可以指定程序生成動(dòng)態(tài)過度效果（ 感覺就更Flash里的一樣）。在繪制動(dòng)畫前，我們事先必須明確動(dòng)畫的工作原理。我想簡(jiǎn)單的說(shuō)， 動(dòng)畫是有不變的物件（object）和會(huì)變的物件兩部分組成。通常不變的物是只如背景之類始終在動(dòng)畫中顯示的物件，而會(huì)變的物件是指通過變化 形成動(dòng)畫的物件。所以在制作動(dòng)畫之前得先制作不變的物件，為此Fire- works2提供了一個(gè)共享層的概念（Share Layer）。 我們都知道，動(dòng)畫是由一個(gè)個(gè)不同的幀（Frame）組成的，而共享層就是在所有幀中都顯示的一個(gè)層，這樣我們只要將動(dòng)畫中不變的物件全放在這個(gè)層中，以后只需要修改一個(gè)幀的共享層中內(nèi)容就可以使所有的幀都達(dá)到相應(yīng)變化，大大減少了工作量。設(shè)置共享層的命令是Layer 面版的彈 出菜單中的“Share Layer”命令，設(shè)置為共享的層在Layer面版中都有一 個(gè)特定的共享符號(hào)（Wegb Layer是系統(tǒng)自動(dòng)設(shè)置的共享層，用于放置熱點(diǎn)、 切割區(qū)）。在完成不變的物件（object）后就可以使用Tween 功能制作動(dòng)畫效果 了。Tween功能的原理是將物件（object）轉(zhuǎn)化為符號(hào)（symbol），然后 確定符號(hào)的初始和結(jié)束樣例（instance），再將這些樣例轉(zhuǎn)換為具有過度 效果的連續(xù)幀（frame）。Tween功能支持物件的位移、旋轉(zhuǎn)、縮放、扭曲、 以及透明度和層效果（effect）的過度。下面我來(lái)舉個(gè)實(shí)例：通過十個(gè)幀 讓我的名字“Arky”從圖象的左上角移動(dòng)到右下角同時(shí)逐漸變深。 第五章 文字工具以及文字特效這章教程，我想單單給你介紹Fireworks的文字工具以及文字特效， 之所以要將對(duì)文字功能版塊的介紹獨(dú)立成一章，是因?yàn)镕ireworks中的文字以及相關(guān)功能，是目前我所見的圖象編輯軟件中最強(qiáng)大，最完善！完整的文字格式化功能，支持雙字節(jié)文字 這是所有成功的圖象設(shè)計(jì)軟件所必備的特點(diǎn)，當(dāng)然Fireworks也不例外。您可以在工具欄中按下文字按鈕（圖標(biāo)為“A”的那個(gè)按鈕），再在工作窗口中單擊以呼出文字編輯面版（Text Editor）。Fireworks的文字面版十分直觀，完全支持雙字節(jié)文字（當(dāng)然，前提是系統(tǒng)擁有相應(yīng)的字庫(kù) ），使用的方法與普通圖象編輯軟件中的同類功能十分相似，如果您有一些圖象設(shè)計(jì)經(jīng)驗(yàn)的話，完全可以輕松上手。 但與眾不同之處在于：Fireworks2的Text Editor功能支持定義單個(gè)文字的屬性。當(dāng)您在Text Editor中輸入一串文本后，可以自由地改變此 文本中任意字的屬性。也就是說(shuō)，用戶可以在Text Editor面版中同時(shí)輸 入一串字體、顏色、大小等等屬性完全不同的語(yǔ)句。 不僅如此，在用Fireworks編輯圖片的過程中，文字始終保持一種特殊 路徑形式。所以用戶可以隨時(shí)隨地地修改文字內(nèi)容，而不會(huì)象Photoshop5 那樣，一旦進(jìn)行“Rend Layer”操作，用戶就再也無(wú)法對(duì)文字層中的內(nèi)容 進(jìn)行修改了:( 方便的文字色彩填充功能 Firework將文字作為一種特殊的物件（object），它既能夠讓Text Editor工具識(shí)別，對(duì)文字的內(nèi)容進(jìn)行修改，又允許用戶象編輯普通路徑那 樣給文字著色、描邊（方法詳見教程的上一章）。這種特殊的設(shè)定給用戶 帶來(lái)了前所未有的方便，甚至當(dāng)用戶使用變形工具（快捷鍵為“Q”）給 選定的文字進(jìn)行變形后，聰明的Firewoks仍然能夠自動(dòng)匹配變形后的文字 的大小，依舊允許用戶使用Text Editor對(duì)文字進(jìn)行編輯。 別出心裁的文字對(duì)齊選項(xiàng) Fireworks 提供了一個(gè)矢量繪圖軟件所特有的文字對(duì)齊功能。您只要在畫面中文字上單擊右鍵，就可以在隨后彈出的菜單中的“Align”一項(xiàng)內(nèi)選擇文字的對(duì)齊方式。Fireworks2共提供了八種文字對(duì)齊方式：左對(duì)齊（left）；右對(duì)齊（right）；水平居中（center-1）；左右擴(kuò)展（Justified-1，這種方式是通過調(diào)節(jié)文字的水平間距使文 字按文字框的長(zhǎng)度對(duì)齊，使用非常廣泛）； 左右拉伸（Stretched-1，這種方式是通過拉伸文字的寬度，使之按 文字框的長(zhǎng)度對(duì)齊）；頂端對(duì)齊（top）；豎直居中（center-2）；底對(duì)齊（bottom）上下擴(kuò)展（Justified-2，這種方式是通過調(diào)節(jié)文字的垂直間距使文 字按文字框的高度對(duì)齊，使用非常廣泛）； 上下拉伸（Stretched-2，這種方式是通過拉伸文字的高度，使之按 文字框的高度對(duì)齊）； 文字的特色效果 Fireworks2 新增一個(gè)Style功能面版（“Windows Styles”快捷鍵 為Ctrl+Alt+J ）。Style功能提供了近300種內(nèi)值的路徑填充和描邊的特效，可以最快捷地生成適用于網(wǎng)頁(yè)制作的文字特效，當(dāng)然，Style 也適用于所有普通路徑。并且Fireworks2允許用戶自由擴(kuò)充Style，您可以將自己新創(chuàng)的路徑定義為一個(gè)Style（方法是使用Styles面版的彈出菜單中的“ New Style”命令），以便今后反復(fù)使用。文本環(huán)繞路徑功能這無(wú)疑是Fireworks2的文本功能中最激動(dòng)人心的效果，這個(gè)以前只有在矢量繪圖中才可能具備的功能大大縮短了用戶制作環(huán)繞文本的工序。您只須選定文字和文字要環(huán)繞的路徑，然后選擇“Text Attach to Path” （快捷鍵為 Ctrl+Alt+Y）,就可以將文字結(jié)合到特殊的路徑上。并且，結(jié)合后的文字依舊可以通過Text Editor進(jìn)行編輯，也可以使用不同的Align 方式定義不同的路徑圍繞效果，還可以用上述的方法修改文字的填充效果或套用Style。 查找和替換功能（Find & Replace） 這樣的新增功能聽上去似乎是一款文字編輯軟件才應(yīng)該具備的，不過細(xì)心macromedia已經(jīng)為用戶考慮到了方方面面，F(xiàn)ireworks2中的Find & Replace功能（“Windows Find & Replace”）不僅提供了普通的文字查找替換功能，并且可以修改文件中使用的顏色、字體、URL！這些匠心獨(dú)具的設(shè)計(jì)使Firework2成為最具創(chuàng)造力的圖象設(shè)計(jì)軟件， 它完全體現(xiàn)了macromedia的設(shè)計(jì)決心讓您的工作更具效率（Productivty）。網(wǎng)頁(yè)配色表制作主頁(yè)對(duì)色彩需要有一定的感覺，許多網(wǎng)友總是配不好顏色。阿捷教你一個(gè)竅門：就是用同一色系的色彩，色彩豐富但不花。 .#FFFFFF#FFFFF0#FFFFE0#FFFF00.#FFFAFA#FFFAF0#FFFACD#FFF8DC#FFF68F#FFF5EE#FFF0F5#FFEFDB#FFEFD5#FFEC8B#FFEBCD#FFE7BA#FFE4E1#FFE4C4#FFE4B5#FFE1FF#FFDEAD#FFDAB9#FFD700#FFD39B#FFC1C1#FFC125#FFC0CB#FFBBFF#FFB90F#FFB6C1#FFB5C5#FFAEB9#FFA54F#FFA500#FFA07A#FF8C69#FF8C00#FF83FA#FF82AB#FF8247#FF7F50#FF7F24#FF7F00#FF7256#FF6EB4#FF6A6A#FF69B4#FF6347#FF4500#FF4040#FF3E96#FF34B3#FF3030#FF1493#FF00FF#FF0000#FDF5E6#FCFCFC#FAFAFA#FAFAD2#FAF0E6#FAEBD7#FA8072#F8F8FF#F7F7F7#F5FFFA#F5F5F5#F5F5DC#F5DEB3#F4F4F4#F4A460#F2F2F2#F0FFFF#F0FFF0#F0F8FF#F0F0F0#F0E68C#F08080#EEEEE0#EEEED1#EEEE00#EEE9E9#EEE9BF#EEE8CD#EEE8AA#EEE685#EEE5DE#EEE0E5#EEDFCC#EEDC82#EED8AE#EED5D2#EED5B7#EED2EE#EECFA1#EECBAD#EEC900#EEC591#EEB4B4#EEB422#EEAEEE#EEAD0E#EEA9B8#EEA2AD#EE9A49#EE9A00#EE9572#EE82EE#EE8262#EE7AE9#EE799F#EE7942#EE7621#EE7600#EE6AA7#EE6A50#EE6363#EE5C42#EE4000#EE3B3B#EE3A8C#EE30A7#EE2C2C#EE1289#EE00EE#EE0000#EDEDED#EBEBEB#EAEAEA#E9967A#E8E8E8#E6E6FA#E5E5E5#E3E3E3#E0FFFF#E0EEEE#E0EEE0#E0E0E0#E066FF#DEDEDE#DEB887#DDA0DD#DCDCDC#DC143C#DBDBDB#DB7093#DAA520#DA70D6#D9D9D9#D8BFD8#D6D6D6#D4D4D4#D3D3D3#D2B48C#D2691E#D1EEEE#D1D1D1#D15FEE#D02090#CFCFCF#CDCDC1#CDCDB4#CDCD00#CDC9C9#CDC9A5#CDC8B1#CDC673#CDC5BF#CDC1C5#CDC0B0#CDBE70#CDBA96#CDB7B5#CDB79E#CDB5CD#CDB38B#CDAF95#CDAD00#CDAA7D#CD9B9B#CD9B1D#CD96CD#CD950C#CD919E#CD8C95#CD853F#CD8500#CD8162#CD7054#CD69C9#CD6889#CD6839#CD661D#CD6600#CD6090#CD5C5C#CD5B45#CD5555#CD4F39#CD3700#CD3333#CD3278#CD2990#CD2626#CD1076#CD00CD#CD0000#CCCCCC#CAFF70#CAE1FF#C9C9C9#C7C7C7#C71585#C6E2FF#C67171#C5C1AA#C4C4C4#C2C2C2#C1FFC1#C1CDCD#C1CDC1#C1C1C1#C0FF3E#BFEFFF#BFBFBF#BF3EFF#BEBEBE#BDBDBD#BDB76B#BCEE68#BCD2EE#BC8F8F#BBFFFF#BABABA#BA55D3#B9D3EE#B8B8B8#B8860B#B7B7B7#B5B5B5#B4EEB4#B4CDCD#B452CD#B3EE3A#B3B3B3#B2DFEE#B23AEE#B22222#B0E2FF#B0E0E6#B0C4DE#B0B0B0#B03060#AEEEEE#ADFF2F#ADD8E6#ADADAD#ABABAB#AB82FF#AAAAAA#A9A9A9#A8A8A8#A6A6A6#A52A2A#A4D3EE#A3A3A3#A2CD5A#A2B5CD#A1A1A1#A0522D#A020F0#9FB6CD#9F79EE#9E9E9E#9C9C9C#9BCD9B#9B30FF#9AFF9A#9ACD32#9AC0CD#9A32CD#999999#9932CC#98FB98#98F5FF#97FFFF#96CDCD#969696#949494#9400D3#9370DB#919191#912CEE#90EE90#8FBC8F#8F8F8F#8EE5EE#8E8E8E#8E8E38#8E388E#8DEEEE#8DB6CD#8C8C8C#8B8B83#8B8B7A#8B8B00#8B8989#8B8970#8B8878#8B8682#8B864E#8B8386#8B8378#8B814C#8B7E66#8B7D7B#8B7D6B#8B7B8B#8B795E#8B7765#8B7500#8B7355#8B6969#8B6914#8B668B#8B6508#8B636C#8B5F65#8B5A2B#8B5A00#8B5742#8B4C39#8B4789#8B475D#8B4726#8B4513#8B4500#8B3E2F#8B3A62#8B3A3A#8B3626#8B2500#8B2323#8B2252#8B1C62#8B1A1A#8B0A50#8B008B#8B0000#8A8A8A#8A2BE2#8968CD#87CEFF#87CEFA#87CEEB#878787#858585#848484#8470FF#838B8B#838B83#836FFF#828282#7FFFD4#7FFF00#7F7F7F#7EC0EE#7D9EC0#7D7D7D#7D26CD#7CFC00#7CCD7C#7B68EE#7AC5CD#7A8B8B#7A7A7A#7A67EE#7A378B#79CDCD#787878#778899#76EEC6#76EE00#757575#737373#71C671#7171C6#708090#707070#6E8B3D#6E7B8B#6E6E6E#6CA6CD#6C7B8B#6B8E23#6B6B6B#6A5ACD#698B69#698B22#696969#6959CD#68838B#68228B#66CDAA#66CD00#668B8B#666666#6495ED#63B8FF#636363#616161#607B8B#5F9EA0#5E5E5E#5D478B#5CACEE#5C5C5C#5B5B5B#595959#575757#556B2F#555555#551A8B#54FF9F#548B54#545454#53868B#528B8B#525252#515151#4F94CD#4F4F4F#4EEE94#4D4D4D#4B0082#4A708B#4A4A4A#48D1CC#4876FF#483D8B#474747#473C8B#4682B4#458B74#458B00#454545#43CD80#436EEE#424242#4169E1#40E0D0#404040#3D3D3D#3CB371#3B3B3B#3A5FCD#388E8E#383838#36648B#363636#333333#32CD32#303030#2F4F4F#2E8B57#2E2E2E#2B2B2B#292929#282828#27408B#262626#242424#228B22#218868#212121#20B2AA#1F1F1F#1E90FF#1E1E1E#1C86EE#1C1C1C#1A1A1A#191970#1874CD#171717#141414#121212#104E8B#0F0F0F#0D0D0D#0A0A0A#080808#050505#030303#00FFFF#00FF7F#00FF00#00FA9A#00F5FF#00EEEE#00EE76#00EE00#00E5EE#00CED1#00CDCD#00CD66#00CD00#00C5CD#00BFFF#00B2EE#009ACD#008B8B#008B45#008B00#00868B#00688B#006400#0000FF#0000EE#0000CD#0000AA#00008B#000080#000000/homepage/43/2538543.shtml網(wǎng)頁(yè)設(shè)計(jì)配色基礎(chǔ)：色彩三屬性與實(shí)例剖析2006-08-22 04:00 作者： 黎芳 原創(chuàng) 出處： 天極設(shè)計(jì)在線 責(zé)任編輯：Shiny 許多初學(xué)者對(duì)色彩的屬性和原色概念模糊，容易混淆，下面我們就先從幾個(gè)概念入手。今天介紹色彩的三個(gè)屬性。顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰色，而其他所有顏色均屬于彩色。從心理學(xué)和視覺的角度出發(fā)，彩色具有三個(gè)屬性：色相、明度、純度（彩度）?；旧喹h(huán) 色相（Hue）：也叫色調(diào)，指顏色的種類和名稱，是指顏色的基本特征，是一種顏色區(qū)別于其他顏色的因素。色相和色彩的強(qiáng)弱及明暗沒有關(guān)系，只是純粹表示色彩相貌的差異。如紅、黃、綠、藍(lán)、紫等為不同的基本色相。 明度（Value）： 也叫亮度，