談Fireworks像素化文字的制作方法_Fireworks教程
推薦：炫出我的個(gè)性——QQ聊天表情的繪制在本例教程中選用的是我自己繪制的一套名為“大眼綠豆"的聊天表情，由于表情較多，加之教程篇幅所限，也就不可能將全部表情的繪制過程逐一講述。但萬變不離其宗，繪制方法卻是有限的。因此，我將以下三款集中了較多的FireworksGIF動(dòng)畫制作功能的表情，作一個(gè)具體講解。
1、打開fw，新建文件，大小為50 x 50 像素，背景色采用默認(rèn)的白色即可。
2、在編輯區(qū)輸入文字對(duì)象，這里輸入了“風(fēng)"這個(gè)字，字體為“華文行楷"，字號(hào)大小隨意，此處采用了“45"，并且“加粗"文本對(duì)象，將邊緣效果設(shè)為“不消除鋸齒"，具體設(shè)置如下圖所示。
3、選中文本對(duì)象，單擊菜單“修改--平面化所選"命令，或者按快捷鍵“Ctrl Shift Alt Z"，將文本對(duì)象轉(zhuǎn)化為位圖對(duì)象，繼續(xù)后面的操作。
注重：此處務(wù)必要將文本對(duì)象轉(zhuǎn)化為位圖對(duì)象，否則后面的操作就沒有意義了。
4、在編輯區(qū)以外的任意地方單擊鼠標(biāo)左鍵，屬性面板成為“文檔"屬性面板的顯示狀態(tài)。單擊面板上“圖像大小"按鈕，在彈出的“圖像大小"設(shè)置框中，將圖像的“像素尺寸"區(qū)域的寬和高的數(shù)值大小都設(shè)為 500，然后單擊“插值法"的下拉菜單，將插值方式設(shè)為“最近的臨近區(qū)域"，具體設(shè)置如下圖所示。
注重：有關(guān)“插值法"的幾種計(jì)算方式的知識(shí)，將在教程最后做一個(gè)簡(jiǎn)單的講解。這里假如不太了解的話，可以先不用管它，繼續(xù)后面的操作步驟即可。
5、此刻編輯區(qū)的圖形對(duì)象如下圖所示。
6、接下來，我們要制作一個(gè)用來產(chǎn)生像素化效果的填充紋理圖片。再次新建一個(gè)文件，文件的大小為 10 X 10像素大小，背景色采用白色即可。
7、使用矩形工具在編輯區(qū)繪制一個(gè)矩形對(duì)象，在屬性面板上設(shè)置矩形對(duì)象的填充色為“無"，描邊色采用“紅色"，描邊類型為“1像素"，寬，高均為10像素大小，具體設(shè)置如下圖所示：
8、一切設(shè)置完畢，保存文檔到你知道的地方 :)。
9、返回到剛才編輯的像素文字效果的編輯窗口， 打開層面板，按下“Ctrl"鍵，然后單擊“位圖層"，即可得到轉(zhuǎn)化為位圖對(duì)象的文字的選區(qū)，具體操作參看如下圖。
10 、單擊工具箱上的“油漆桶"工具，然后調(diào)整屬性面板的填充設(shè)置。單擊“填充類別"的下拉菜單，選擇“圖案——其他"，在彈出的“定位文件"的對(duì)話框中選擇我們第8步操作保存的文件即可，顏色填充井就會(huì)顯示出我們剛剛制作保存的紋理圖案了，屬性面板此刻如下圖所示，
注重1：將邊緣設(shè)為“實(shí)邊"，“容差"值設(shè)為“0"并且取消“填充選區(qū)"前面的復(fù)選框。
注重2：假如我們將將“邊緣"設(shè)為“羽化"，并且給予一個(gè)數(shù)值大小，并且將“容差"值設(shè)為任意一個(gè)數(shù)值，如下圖所示。
假如我們按照上圖設(shè)置繼續(xù)隨后步驟的操作的話，效果會(huì)有一些不同，具體操作結(jié)果請(qǐng)參看第12步的操作。
11、此刻編輯區(qū)的“文字"區(qū)域應(yīng)該處于選中狀態(tài)，在選擇區(qū)域內(nèi)單擊鼠標(biāo)，即可完成對(duì)選區(qū)的圖案填充了，按快捷鍵“Ctrl D"取消選區(qū)，編輯區(qū)的像素化文字效果已經(jīng)出現(xiàn)了。
假如這樣來看的話，使用FW來制作像素化的文字效果，比起PS來，要快了許多，大家不妨比較一下。
13、假如按照第11步“注重2"的設(shè)置進(jìn)行上一步的填充操作的話，會(huì)出下如圖所示的效果。
圖形邊緣的顏色會(huì)以先前文字填充的顏色顯示出來，從而形成了一種簡(jiǎn)單的立體效果。
好了，有關(guān)像素文字的制作方法我們就先介紹到這里。有關(guān)制作中出現(xiàn)的問題及其“插值法"的相關(guān)知識(shí)介紹，請(qǐng)參看后面的補(bǔ)充介紹內(nèi)容。
[補(bǔ)充介紹1 出現(xiàn)的問題]接下來我們一起再來看一下，有的朋友在制作的過程中可能會(huì)出現(xiàn)的一些問題。哪就是在第2步的文字輸入操作中，字號(hào)大小那就是進(jìn)行了第11步的操作后，有可能編輯區(qū)對(duì)象的填充的效果并非如同我們所期望的那樣，而是出現(xiàn)了下面的填充效果，如下圖所示。
也就是說，圖形的部分邊緣效果并非如我們所期望那種閉合狀態(tài)，這樣需要我們做進(jìn)一步的修整工作，將圖形對(duì)象的邊緣部分徹底必合起來。操作步驟如下。
（1）按下“Ctrl"鍵，單擊位圖對(duì)象所在圖層，這樣即可獲得該位圖對(duì)象的選區(qū)。
（2）選擇菜單“選擇——邊框選取框"命令，在彈出的“邊框選取框"的對(duì)話框中，將寬度設(shè)為“1"像素，單擊確定按鈕即可。
（3）將視圖縮放到“300%"狀態(tài)，可以看到選框已經(jīng)變成了寬度為1像素的選區(qū)狀態(tài)，如下圖所示。
（4）為了一次性將選區(qū)做一個(gè)填充，此刻單擊層面板上
“新建位圖圖像"按鈕，這樣就會(huì)新建一個(gè)只包含第（3）步操作得到的選區(qū)的位圖圖層，如下圖所示。
（5）選擇工具箱的“油漆桶"工具，在屬性面板上將填充類別變?yōu)椤皩?shí)心"填充，顏色選擇剛才字體的顏色——“紅色"，其他設(shè)置不用更改。在新建位圖圖層的選區(qū)上單擊鼠標(biāo)進(jìn)行填充，這樣就快速得到了圖像的邊緣填充效果。如下圖所示。
[補(bǔ)充介紹2 “插值法"的知識(shí)了解]在前面進(jìn)行的圖像大小的調(diào)整操作中，我們特意強(qiáng)調(diào)要將插值方式設(shè)為“最近的臨近區(qū)域"。那么有關(guān)“插值法"的知識(shí)想必大家也想簡(jiǎn)單的了解一下，接下來我們就一起通過幾個(gè)小試驗(yàn)來共同了解一下有關(guān)“插值法"包含的幾種類型，及其對(duì)應(yīng)的應(yīng)用效果，從而對(duì)其有一個(gè)大概的了解。
一般來說，假如現(xiàn)有圖像的尺寸和分辨率與我們的要求不符的話，就需要使用菜單“修改——畫布——圖像大小"命令（或者在文檔屬性面板上單擊“圖像大小"按鈕）打開“圖像大小"設(shè)置窗口來進(jìn)行相關(guān)的設(shè)置，如下圖所示。
在“圖像大小"面板中，可以了解到當(dāng)前圖像對(duì)象的有關(guān)“大小"內(nèi)容的各個(gè)參數(shù)。通過改變這些參數(shù)，即可對(duì)圖像的大小做相關(guān)的改變調(diào)整。在調(diào)整中有三點(diǎn)需要注重：
1.假如只是改變“像素尺寸"區(qū)域的寬、高的大小，那么它與圖像的最終輸出尺寸、及其文件的容量成正比關(guān)系，而圖像分辨率則不受任何影響。也就是說，只改變圖像的尺寸，并不會(huì)改變圖像的分辨率，這在我們前面像素文字制作的實(shí)例中已經(jīng)得到了驗(yàn)證。
2.假如改變圖像的分辨率，那么它與像素寬度、高度的數(shù)量以及文件容量成正比關(guān)系，而與圖像的打印尺寸沒有關(guān)系。也就是說，只改變分辨率的大小，并不會(huì)影響到圖像的打印尺寸大小，請(qǐng)看下圖操作示范。
3.選中“約束比例"前面的復(fù)選框，取消“圖像重新取樣"前面的復(fù)選框，此刻圖像的打印尺寸大小與分辨率大小成反比的關(guān)系，也就是說在圖像的像素大小確定的前提下，假如要求圖像的分辨率越大，其打印尺寸就會(huì)相應(yīng)的越小。具體的操作如下圖所示。
根據(jù)以上這三個(gè)需要注重的內(nèi)容，那么我們將一個(gè)圖像從小尺寸改變?yōu)榇蟪叽绲臅r(shí)候，就肯定要增加新的像素；假如將一個(gè)低分辨率的圖像提高分辨率，也需要增加新的像素，這些新增加進(jìn)來的像素，就被稱為“插值"。而插值的方法在fw中總共提供了四種：雙立方、雙線性、柔化、最近的臨近區(qū)域。使用過ps的朋友可能注重到了，fw中提供的插值方式比ps要多一種“柔化"，幾種具體的插值方式算法是不同的，所以其產(chǎn)生的效果也是各不相同的，具體到那種插值算法更好，更科學(xué)，我們不能下出結(jié)論，因?yàn)橥ㄟ^隨后的操作試驗(yàn)我們會(huì)感受到各種插值算法產(chǎn)生的效果是各有千秋的，具體倒使用那種算法來進(jìn)行我們的像素填充工作，就看看隨后的每一個(gè)試驗(yàn)吧！
1、 在編輯狀態(tài)下，截取屏幕上任意一小部分圖像，建立一個(gè)新文件，并且將這個(gè)圖像文件制作三個(gè)副本以備隨后的操作。打開“圖像大小"設(shè)置窗口，即可看到當(dāng)前圖像文件大小的各項(xiàng)參數(shù)。 截圖對(duì)象及其該對(duì)象圖像大小的有關(guān)參數(shù)如下圖所示。
2、選中編輯區(qū)的圖像對(duì)象，打開“圖像大小"的設(shè)置窗口，將圖像大小由106 X 67像素改成212 X 134 像素，單擊確定按鈕圖像即以默認(rèn)的雙立方插值方式大大增加了圖像大小。我們已經(jīng)知道二次立方的插值方式是在原有的兩個(gè)像素之間插過渡值，因此我們看到：盡管畫面已經(jīng)虛了，可畫面中的圖像部分還是合乎情理的，但文字部分虛的比較厲害。請(qǐng)參看下圖。
3、將圖像大小由106 X 67像素改成212 X 134 像素，設(shè)定插值方式為“最近的臨近區(qū)域"，單擊確定按鈕，我們可以看到：畫面中的圖像部分出現(xiàn)了明顯的像素化效果，尤其是邊緣部分更為明顯，但文字部分卻比較“硬"，這樣反而顯得清楚了很多，不過圓滑度卻缺少了很多。請(qǐng)參看下圖。
4、將圖像大小由106 X 67像素改成212 X 134 像素，設(shè)定插值方式為“雙線性"，單擊確定按鈕，我們可以看到：圖像比起“雙立方"方式設(shè)定后產(chǎn)生的效果要更為柔和，而文字也較“最近的臨近區(qū)域"要柔和些，能體現(xiàn)出文字的柔和度來。也就是說這種方式是介于“雙線性"和“最近的臨近區(qū)域"兩種方式中間的一種方式。請(qǐng)參看下圖。
5、將圖像大小由106 X 67像素改成212 X 134 像素，設(shè)定插值方式為“柔化"，單擊確定按鈕，我們可以看到：圖像比起“雙線性"方式設(shè)定后產(chǎn)生的效果要稍微“硬"些，從而表現(xiàn)得更為清楚些，而文字也是較“雙線性"方式產(chǎn)生的效果在圓滑的基礎(chǔ)上更為清楚些。請(qǐng)參看下圖。
6、下面來一起看看原圖和經(jīng)過幾種插值算法放大后的效果圖的比較，這樣我們能夠比較直觀的看到經(jīng)過不同插值算法后產(chǎn)生的不同的效果。
這樣，我們可以暫且得出一個(gè)結(jié)論，假如我們?cè)诜且黾酉袼夭豢傻那疤嵯拢偃鐖D片的質(zhì)量需要得到較好的保證，那么采用“雙立方"和“柔化"的方式來處理是一個(gè)不錯(cuò)的選擇，假如以文字質(zhì)量保證為前提，那么“最近的臨近區(qū)域"是一個(gè)不錯(cuò)的選擇，我們這次制作的“像素文字效果"也就是使用“最近的臨近區(qū)域"插值算法實(shí)現(xiàn)的一個(gè)最好理解的文字效果。
假如我們既想要圖片的質(zhì)量，有想要清楚的文字效果，那么不妨把原始圖片分別做兩種插值計(jì)算，一方面進(jìn)行“柔化"或“雙立方"方式做插值來獲得較好的圖像效果，另一方面，采用“最近的臨近區(qū)域"方式做插值來獲得較清楚的文字效果。最后將兩方面做插值得到的不同效果來進(jìn)行“修補(bǔ)"，把文字清楚的部分“挖"到圖像清楚的圖像上，如下圖所示。
好了，假如想了解“插值法"的更具體的知識(shí)，請(qǐng)大家再去找一些相關(guān)的專業(yè)書籍來尋找答案，在這里，我們對(duì)“插值法"的相關(guān)講解就到這里了。
分享：Fireworks描繪QQ企鵝screen.width-333)this.width=screen.width-333" border=0> 第一步：做身體：兩個(gè)橢圓，左右各一個(gè)沒有手指頭的小手。 screen.width-333)this.width=screen.width-333" border=0> 手的部分 screen.width-333)this.width=screen.width-333" border=0> 路徑聯(lián)合后，效果
- 相關(guān)鏈接：
- 教程說明：
Fireworks教程-談Fireworks像素化文字的制作方法
。