《網頁設計與制作教程》第2章 photoshop

第2章photoshop2.1網頁標志的制作2.2網頁素材處理2.3網頁頁面的規(guī)劃與制作2.4其他頁面的處理2.5圖片切割導成網頁格式2.1網頁標志的制作2.1.1實例介紹1.新建文件打開【文件】菜單，單擊【新建】命令，彈出如圖2.1所示的【新建】對話框。設定文件名“l(fā)ogo”，尺寸:C500×300，分辨率:72等信息。一般圖像分辨率設定為每英寸72線(約28像素/厘米)。在“模式”中設定為彩色模式類型。在“文檔背景”中，設定新建文件的背景顏色。白色即背景為白色;背景色即以“色板”調板中的背景色作為背景的顏色;透明即尤色背景。下一頁返回2.1網頁標志的制作(1)新建圖層打開【窗口】菜單，選擇【圖層】選項，調出【圖層】、【通道】、【路徑】和【歷史紀錄】活動面板。在【圖層面板】，創(chuàng)建一個透明圖層。如圖2.2所示。(2)設定顏色打開【窗口】菜單調出【工具】活動面板，設置前景色為“RGB紅”。如圖2.3所示。(3)畫矩形并用前景色填充在【工具】活動面板上選取【矩形選框工具】在透明圖層上畫出一個矩形選擇區(qū)。如圖2.4所示。上一頁下一頁返回2.1網頁標志的制作使用【編輯】菜單中的【填充】命令進行前景色填充(前景色填充快捷鍵:Alt+Del)。取消選擇區(qū)域(快捷鍵:Ctrl+D)如圖2.5所示。3.畫一個紅色的菱形(1)新建圖層。(2)使用【工具箱】中的【多邊形套索工具】，畫出一個菱形(畫直線擊同時按住Shift鍵)。如圖2.6所示。(3)使用前景色填充，取消選取。如圖2.7所示。4.繪制紅色字母D(1)新建一個圖層。上一頁下一頁返回2.1網頁標志的制作(2)畫一個紅色的矩形。(3)將矩形右側修整成圓角。在矩形外圍畫一個橢圓，【選擇】菜單【反選】，按Del。如圖2.8所示。(4)取消選取，在圖形內部畫一個小矩形，按Del。如圖2.9所示。5.繪制紅色飄帶(1)新建圖層。(2)使用鋼筆路徑工具繪制飄帶。使用【工具箱】中的【鋼筆工具】。在繪制飄帶起點處單擊，以定義第一個錨點。在適當位置單擊鼠標左鍵不上一頁下一頁返回2.1網頁標志的制作放并向右側拖動以定義第一個錨點;以同樣方法定義第二個錨點，單擊定義第四個錨點(不需要拖動鼠標)，繼續(xù)用單擊并用拖動的方法定義第五個和第六個錨點，最后在第一個錨點處單擊并拖動完成整個飄帶路徑的繪制。(3)將路徑作為選取載入。(4)調出路徑調板，選擇剛才繪制完的工作路徑并單擊下方的將路徑作為選取載入圖標。(5)填充紅色。6.畫出紅色文字框(1)畫一個矩形，如圖2.13所示。上一頁下一頁返回2.1網頁標志的制作(2)【編輯】菜單中的描邊命令，寬度為10像素。7.繪制標志右上角的注冊標記“R"(1)新建圖層。(2)用橢圓選框工具畫一個圓，按住Shift+橢圓選框工具。(3)【編輯】菜單中的描邊命令，寬度為4像素。(4)用文字命令寫一個字母R，并移動放置到圓內。效果如圖2.16所示。8.輸入紅色文字(1)使用文字工具輸入【黑體】字，調整合適字號。上一頁下一頁返回2.1網頁標志的制作(2)【圖層】菜單中【文字】中的【消除鋸齒強】命令，強化文字邊緣。(3)使用移動工具到合適的位置，效果如圖2.17所示。9.圖形整理和保存(1)刪除背景圖層(2)合并可見圖層(3)保存文件2.1.2相關知識1.Photoshop的基本知識(1)認識Photoshop基本界面如圖2.20所示。上一頁下一頁返回2.1網頁標志的制作(2)本章可以參考使用的快捷鍵刪除選框中的圖案或選取的路徑DEL用背景色填充所選區(qū)域或整個圖層Ctrl+BackSpace或Ctrl+De1用前景色填充所選區(qū)域或整個圖層Alt+BackSpace或Alt+De1全部選取Ctrl+A取消選擇Ctrl+D重新選擇Ctrl+Shift+D羽化選擇Ctrl+Alt+D上一頁下一頁返回2.1網頁標志的制作反向選擇Ctrl+Shift+l路徑變選區(qū)數(shù)字鍵盤的Enter2.1.3知識拓展1.Photoshop軟件版本說明本例所使用的軟件版本為PhotoshopCS，本教材編寫時的最新版本為PhotoshopCS3。2.常用圖像格式介紹(1)PSDPhotoshop格式(PSD)是默認的文件格式，它允許保存圖層等一些信息。上一頁下一頁返回2.1網頁標志的制作(2)BMPBMP是DOS和Windows兼容計算機上的標準Windows圖像格式。(3)GIF圖形交換格式(GIF是在WorldWideWeb及其他聯(lián)機服務上常用的一種文件格式，用于顯小超文本標記語言(HTML)文檔中的索引顏色圖形和圖像。(4)JPEG聯(lián)合圖像專家組(JPEG)格式是在WorldWideWeb及其他聯(lián)機服務上常用的一種格式，用于顯小超文本標記語言(HTML)文檔中的照片和其他連續(xù)色調圖像。上一頁下一頁返回2.1網頁標志的制作(5)PDF便攜文檔格式(PDF)是一種靈活的、跨平臺、跨應用程序的文件格式?；赑ostScript成像模型，PDF文件精確地顯示并保留字體、頁面版式以及矢量和位圖圖形。(6)TIFF標記圖像文件格式(TIFF用于在應用程序和計算機平臺之間交換文件。TIFF是一種靈活的位圖圖像格式，所有的繪畫、圖像編輯和頁面排版應用程序都可以支持。上一頁下一頁返回2.1網頁標志的制作(7)PNG便攜網絡圖形(PNG)格式是作為GIF的尤專利替代品開發(fā)的，用于尤損壓縮和顯小Web上的圖像。與GIF不同，PNG支持24位圖像并產生尤鋸齒狀邊緣的背景透明度。但是，某些Web瀏覽器不支持PNG圖像。上一頁返回2.2網頁素材處理2.2.1實例介紹(1)新建一個大小為600×90像素的頁面，命名為menu的文件。(2)背景色圖層漸變效果的設置。在前景色上雙擊，設置【拾色器】中的值為R:219，G:236，B:193。設置背景色為白色。選取工具箱中的漸變工具按住左鍵，從矩形選區(qū)的左側邊緣拖拽到右側邊緣，實現(xiàn)漸變填充效果。完成效果如圖2.24所示。下一頁返回2.2網頁素材處理(3)文本框制作。①新建textbox圖層，使用工具箱中的【矩形選框工具】畫出一長條形選區(qū)，填充選區(qū)為白色。②取消選取后雙擊textbox圖層會彈出【圖層樣式】窗口，在其樣式選項上選擇【投影】中的【內陰影】，將兩者的距離和大小的像素值都設為1。接著在【外發(fā)光】選項上將距離和大小值也都設為“1”。單擊【好】按鈕。(4)圖片按鈕的制作①新建go圖層。②使用【工具箱】中的【橢圓選框工具】，在頁面畫出一個正圓形(需同時按住Shift鍵)。上一頁下一頁返回2.2網頁素材處理③將選區(qū)填充色設置為R:120，G:118，B:117，進行填充。④在go圖層上雙擊，將圖層樣式中的【投影】選項打開，設置距離和擴展選項值均為1，大小值為2，其他值不變。再將【外發(fā)光】選項打開，設置大小值為1，其他值不變。單擊【好】。⑤將前景色設置為白色，使用文字工具輸入英文Go，選擇合適的字型和字號后防置在相應位置。(5)菜單項的制作①新建heading圖層②用矩形選框工具在參考線交義點位置畫出一小段長條形選區(qū)，填充25%的灰色。上一頁下一頁返回2.2網頁素材處理③選擇動作調板下創(chuàng)建新圖層后，返回圖層調板將剛才繪制的矩形拖拽到創(chuàng)建新圖層的圖標上④移動新復制出的圖層到適當位置⑤再次返回動作調板，單擊停止記錄后，再重復單擊播放選區(qū)，復制出相應數(shù)量的圖形⑥用文字工具輸入文字(整行輸入后按空格鍵，間隔出詞距離)，移動到適當位置。完成效果如圖2.34所示。2.banner制作(1)新建一個大小為585×105像素，命名為banner的文件。(2)新建圖層1。上一頁下一頁返回2.2網頁素材處理(3)調整前景色為白色，背景色為:R:248，G:213(4)使用漸變工具在圖層1上從左向右填充透明漸變。(5)在彈出的漸變編輯器中單擊【不透明性色標】滑塊，將色標選項中【不透明度】設定為0%，單擊【好】，完成編輯。(6)打開保存在光盤素材中的tree.jpeg文件，將它拖拽到文件上，再將其圖層位置移動到透明漸變圖層之下。使用【縮放】命令調整到合適的大小，移動到畫面的相應位置。(7)將當前圖像的窗口最大化，使用橢圓選框工具在tree層上畫出橢圓形選區(qū)，執(zhí)行【選擇】→【反選】命令，將上一頁下一頁返回2.2網頁素材處理選擇區(qū)反向選擇。再執(zhí)行【選擇】→【羽化】命令將羽化值設定為50。按鍵盤中的Delete鍵3次。完成后效果如圖2.39所示。3.images操作(1)打開保存在光盤素材中的產品文件SG-208.jpeg，此時的圖片整體效果較灰暗，可以執(zhí)行菜單欄中的【圖像】→【調整】→【曲線】命令適當調節(jié)圖片整體效果。(2)使用菜單欄中的【圖像】→【圖像大小】命令調節(jié)圖片的尺寸。將約束比例關閉，修改像素大小的寬度為600像素，高度為450像素。單擊【好】。上一頁下一頁返回2.2網頁素材處理(3)使用文字工具輸入相應的文字。(4)新建一個圖層，使用文字工具下的圓角矩形工具在圖像上畫出一帶圓角的矩形，再切換到路徑調板，單擊將路徑作為選區(qū)載入。(5)執(zhí)行菜單欄中的【選擇】→【反選】命令。使用淺紅橙色作為前景色進行填充。取消選擇區(qū)，雙擊圖層調板上的當前圖層，在彈出的圖層樣式窗口中選擇【斜面和浮雕】選項，將方向修改為“下”，暗調顏色值為R:147，G:91，B:2。再選擇【描邊】選項，調整顏色為白色，大小為2像素，完成設置。(6)使用菜單欄中的【圖像】→【圖像大小】命令調節(jié)圖上一頁下一頁返回2.2網頁素材處理片的尺寸。將約束比例打開，修改像素大小的寬度為190像素，單擊【好】。(7)將文件另存為SL-280G.jpeg。(8)使用同樣方法將其他5個產品的圖片修改并保存，以備隨后使用。完成效果如圖2.43所示。4.middle制作(1)創(chuàng)建大小為480×44像素，文件名為“middle”的文件。(2)創(chuàng)建相應圖層制作文字框和Go搜索按鈕(創(chuàng)建方法參照導航欄制作)。(3)制作下拉菜單標記:上一頁下一頁返回2.2網頁素材處理①新建一圖層，命名為“square”。②使用【矩形選框工具】配合鍵盤上的shift鍵在文字框的右側畫出一矩形選區(qū)，用25%的灰色進行填充。③雙擊“square”圖層，在彈出的【圖層樣式】菜單中點選【斜面和浮雕】選項，將其中【大小】值子選項設置為“1”像素。再選擇【顏色疊加】選項，在其拾色器中設置顏色為R:210，G:210，B:210。單擊【好】按鈕，結束編輯。⑦使用【矩形選框工具】框選【arrow圖形上半部后按鍵盤上的Delete鍵刪除。⑧取消選區(qū)后將其向下移動到適當位置。上一頁下一頁返回2.2網頁素材處理⑨保存文件為middle.jpeg，以備后面使用。5.content制作(1)創(chuàng)建大小為290×185像素，文件名為“content”的文件。(2)打開保存在光盤素材中的產品文件leaf.jpeg，拖拽到content窗口中，移動到適當位置。(3)使用工具欄中的【鋼筆工具】在圖像上畫出波浪狀封閉路徑。(4)使用【路徑選擇工具】選擇路徑，移動到適當位置后將路徑作為選區(qū)載入。上一頁下一頁返回2.2網頁素材處理(5)使用菜單欄中的【編輯】→【拷貝】后再使用【粘貼】命令進行粘貼。(6)調整圖層的不透明度為80%。(7)單擊【路徑調板】，單擊【從選區(qū)生成工作路徑】。對路徑上的錨點作一些位置的修改，使其與上次編輯的路徑有所不同。(8)修改結束后移動整個路徑在圖像上的上下位置。使用【路徑調板】中的【將路徑作為選區(qū)載入】，復制并粘貼選區(qū)。(9)將粘貼的新圖層移動到適當位置，調整圖層的不透明度為40%。上一頁下一頁返回2.2網頁素材處理(10)使用菜單欄中的【編輯】→【粘貼】命令進行粘貼，調整圖層的不透明度為23%。使用【編輯】→【變換】→【垂直翻轉】命令進行位置調整。(11)在【路徑調板】上單擊【工作路徑】。使用文字工具在路徑的適當位置單擊鼠標，輸入文字。(12)文字輸入后刪除工作路徑，移動文字到適當位置。(13)雙擊文字圖層調出【圖層樣式】菜單。選擇【外發(fā)光】選項，調整【擴展】為40%,【大小】為6像素。(14)打開保存在光盤素材中的fruitl.jpeg文件，將該圖像拖拽到編輯畫面中，放置到適當位置。如圖2.55所示。上一頁下一頁返回2.2網頁素材處理(15)合并所有圖層后保存文件為content.jpeg，以備后面使用。6.foot制作(1)創(chuàng)建大小為800×80像素，文件名為“foot”的文件。(2)設置前景色為55%的灰色，使用文字工具在頁腳底部輸入企業(yè)和網站的相關信息，并選好位置。如圖2.56所示。(3)創(chuàng)建一個新圖層。使用工具箱上的【單行選框工具】在圖像最頂部邊緣單擊會出現(xiàn)一個高為1個像素的選區(qū)，用25%的灰色進行填充。(4)確保當前選區(qū)狀態(tài)，單擊一下鍵盤的向下移動鍵。仍然使用25%的灰色進行填充。上一頁下一頁返回2.2網頁素材處理(5)使用【矩形選框工具】從灰色線的左右各選取一部分刪除掉。(6)打開保存在光盤素材中的map.jpeg文件，將該圖像拖曳到編輯畫面中，縮放適當大小后放置到適當位置。(7)將前景色設為紅色，使用文字工具輸入相關文字，調整其在地圖上的大小和位置。完成效果如下如圖2.60所示。(8)合并所有圖層后保存文件為foot.jpeg，以備后面使用。2.2.2相關知識1.漸變工具漸變工具可以創(chuàng)建多種顏色間的逐漸混合，可以從預設上一頁下一頁返回2.2網頁素材處理漸變填充中選取或創(chuàng)建自己的漸變。通過在圖像中拖移用漸變填充區(qū)域。起點(按下鼠標處)和終點(松開鼠標處)會影響漸變外觀，具體取決于所使用的漸變工具?！緷u變編輯器】對話框可用于通過修改現(xiàn)有漸變的拷貝來定義新漸變。還可以向漸變添加中間色，在2種以上的顏色間創(chuàng)建混合。2.鋼筆工具鋼筆工具可以創(chuàng)建更為精確的直線和平滑流暢的曲線，鋼筆工具提供了最佳的繪圖控制和最高的繪圖準確度。3.文字工具當使用文字工具在圖像上輸入文字時，可以使用【圖層】上一頁下一頁返回2.2網頁素材處理→【文字】→【消除鋸齒方式為無】的命令來使文字邊緣清晰，這樣可以使圖像上的小文字看起來更清晰。2.2.3知識拓展1.色彩模式當新建一個photoshop文檔時可以為該文檔設定一種色彩模式(默認狀態(tài)下為RGB顏色);打開一幅圖像后也可以通過使用菜單命令中的【圖像】→【模式】來重新設定一種色彩模式。通‘常清況下制作網頁效果應使用RGB顏色模式，但有些時候根據(jù)特殊效果的擊要，還可以使用其他的色彩模式。上一頁下一頁返回2.2網頁素材處理2.鋼筆工具“鋼筆工具”常被用來從一幅圖像中“摳出”主體物，它比【磁性套索工具】和【魔棒工具】摳圖效果都要完美。但靈活使用該工具是擊要勤加練習的。上一頁返回2.3網頁頁面的規(guī)劃與制作2.3.1實例介紹1.新建主頁文件打開【文件】菜單，單擊【新建】命令。設定文件名"index"、尺寸:800×1020像素、分辨率:72像素等信息。設定新建文件的背景顏色為白色。2.利用標尺和參考線對首頁頁面進行版面規(guī)劃設計(1)調出標尺，顯小參考線(2)設定參考線根據(jù)頁面版面規(guī)劃需要來設定所需的參考線，以為下一步進行各種頁面素材的擺位與制作作準備。將鼠標左鍵下一頁返回2.3網頁頁面的規(guī)劃與制作放在當前頁面窗口的標尺位置向內拖動即可定義一條參考線。(3)根據(jù)頁面素材關系創(chuàng)建相應的圖層組圖層組的作用是方便對繁多的圖層素材進行有序地管理和操作。3.將相應素材打開，使用拖曳的方法加入到對應的圖層組中完成后效果如圖2.67所示。上一頁下一頁返回2.3網頁頁面的規(guī)劃與制作2.3.2相關知識1.使用參考線與網格參考線是浮在整個圖像上但不打印出來的線條，可以移動或刪除參考線，也可以鎖定參考線，以免不小心移動它。2.使用【對齊】命令對齊有助于精確放置選區(qū)邊緣、裁切選框、切片、形狀和路徑。2.3.3知識擴展1.網格上一頁下一頁返回2.3網頁頁面的規(guī)劃與制作網格對于對稱地布置圖素很有用。網格在默認情況下顯小為不打印出來的線條，但也可以顯小為點。2.參考線和網格的特性相似拖移選區(qū)、選區(qū)邊框和工具時，如果拖移距離小于8個解幕(不是圖像)像素，則它們將與參考線或網格對齊。參考線移動時也與網格對齊，可以打開或關閉此功能。參考線間距、是否能夠看到參考線和網格，以及對齊方式均因圖像而異。網格間距、參考線和網格的顏色及樣式對于所有的圖像都是相同的。3.設置參考線和網格預置在Windows中，選取【編輯】→【預置】→【參考線、網上一頁下一頁返回2.3網頁頁面的規(guī)劃與制作格和切片】?！绢伾?，是為參考線、網格或兩者選取一種顏色。如果選取了【自定】，清單擊顏色框，選取一種顏色，然后單擊【好】按鈕?！緲邮健?，是為參考線、網格或兩者選取一個顯小選項?！揪W格線間隔】，輸入網格間距的值?！咀泳W格】，是指輸入劃分網格的值。如果愿意，可更改此選項的單位?！景俜直取窟x項創(chuàng)建均勻劃分圖像的網格。上一頁返回2.4其他頁面的處理2.4.1實例介紹1.新建售后服務的子頁文件打開【文件】菜單，單擊【新建】命令。設定文件名"register"，尺寸:800×1020像素、分辨率:72像素等信息。設定新建文件的背景顏色為白色。2.將首頁原文件中可用的素材導入到新頁面(1)將做完首頁原文件index.psd打開，將其圖層調板中的"menu"，"foot"和"logo"圖層組拖拽入新頁面中，移動到與主頁相同的位置。(2)選擇“menu”圖層組中的“background”，使用菜單欄中下一頁返回2.4其他頁面的處理的【圖像】→【調整】→【色相/飽和度】命令進行色彩的調整。(3)選擇“menu圖層組中的“heading”，同樣使用菜單欄中的【圖像】→【調整】→【色相/飽和度】命令進行色彩的調整。調整后的效果如圖2.69所示。3.利用標尺和參考線對當前頁面進行版面規(guī)劃設計4.banner及左側圖片處理(1)新建“banner”圖層組。(2)使用菜單欄中的【窗口】→【信息】命令調出信息調板。上一頁下一頁返回2.4其他頁面的處理(3)使用【矩形選框工具】利用輔助線選擇指定的選區(qū)。(4)查看信息調板中右下角選擇區(qū)域的寬度和高度值。(5)根據(jù)信息調板中看到的數(shù)值新建一圖像。(6)打開素材文件夾中的work.jpeg文件。使用菜單欄中的【編輯】→【變換】→【水平翻轉】命令水平翻轉圖形，接著拖曳到剛建立的空白圖像中并調整縮放到適當位置。(7)新建一個寬度為1像素，高度為2像素的圖像。(8)使用【縮放工具】滿畫布顯示該圖像。接著使用【矩形選框工具】選擇圖像上部的一個像素后填充顏色為R:247，G:181，B:220。上一頁下一頁返回2.4其他頁面的處理(9)使用菜單欄中【選擇】→【全選】命令全選該圖像。(10)執(zhí)行【編輯】→【定義圖案】命令，將選區(qū)定義為圖案。(11)切換到需要編輯的圖像窗口。創(chuàng)建一新圖層后，使用菜單欄中【編輯】→【填充】命令調出填充窗口，選擇相應選項完成填充。(12)使用菜單欄中的【圖像】→【調整】→【色彩平衡】命令對“人像”圖層進行色彩傾向的調整。(13)選擇底紋圖層，使用漸變工具，調整為白色透明漸變。按住shift鍵后單擊鼠標左鍵從下向上拖動，填充白色透明漸變。上一頁下一頁返回2.4其他頁面的處理(14)使用【裁切工具】將裁切框框選整個圖相后雙擊鼠標完成裁切。(15)將處于鎖定狀態(tài)的白色背景圖層刪除，余下的兩個圖層使它們之間處于鏈接關系。(l6)將圖層拖曳入“register”圖像中并調整位置。將拖曳入的圖層放置在“banner”圖層組中。調整位置如圖2.81所示。5.繪制表單內容框(1)在“form”圖層組中創(chuàng)建一圖層，命名為“l(fā)ine”。(2)使用【矩形選框工具】框選出圖像中部輔助線圍出的上一頁下一頁返回2.4其他頁面的處理區(qū)域，執(zhí)行【編輯】→【描邊】命令對選區(qū)進行1個像素的描邊。6.制作標題色帶(1)在“form”圖層組中創(chuàng)建一圖層，命名為“title”。(2)設置填充前景色為R:247，G:181，B:220，背景色為白色。(3)使用【矩形選框工具】在中部輔助線圍出的區(qū)域畫出一矩形選區(qū)，使用【漸變工具】進行填充。(4)執(zhí)行【全選】命令，再使用【描邊】命令作1個像素的描邊。上一頁下一頁返回2.4其他頁面的處理(5)在圖層調板上將“title”復制出副本，移動到適當?shù)奈恢谩?.制作按鈕(1)在“form”圖層組中創(chuàng)建一圖層，命名為“push”。(2)使用【圓角矩形工具】，調整圓角半徑為3個像素。在表單內容框的右下角位置畫出一個圓角矩形。(3)設置前景色為20%的灰色，背景色為白色。(4)在路徑調板中選擇當前的工作路徑，單擊下面的【將路徑作為選區(qū)載入】。(5)使用“漸變工具”進行填充。上一頁下一頁返回2.4其他頁面的處理(6)在“push”圖層上雙擊，在彈出的【圖層樣式】選擇【內發(fā)光】和【描邊】選項，設置描邊大小為1像素，顏色為灰色。(7)復制"push"圖層，移動到適當位置。8.輸入文本信息(1)在“form”圖層組中使用文字工具在相應位置輸入文本信息。(2)選擇文本信息圖層，使用菜單欄中【圖層】→【文字】→【消除鋸齒無】。9.繪制文本輸入框、勻選框和點選圈上一頁下一頁返回2.4其他頁面的處理(1)在“form”圖層組中新建“frame”圖層，使用【矩形選框工具】繪制矩形選選區(qū)，接著再使用55%的灰色進行描邊。復制出其他的文本輸入框，在圖像上排列好位置。(2)在“form”圖層組中新建“gx”圖層，使用【矩形選框工具】配合Shift鍵繪制出等邊矩形選區(qū)，接著再使用55%的灰色進行描邊。復制出其他的勾選框，在圖像上排列好位置。(3)在“form“圖層組中新建“round”圖層，使用【橢圓選框工具】配合Shift鍵繪制出正圓形選區(qū)，接著再使用55%的灰色進行描邊。復制出其他的勾選框，在圖像上排列好位置。上一頁下一頁返回2.4其他頁面的處理(4)在“form”圖層組中新建“textbox”圖層，使用【矩形選框工具】在【意見和建議】下邊繪制矩形選區(qū)，接著再使用55%的灰色進行描邊，調整位置。2.4.2知識拓展1.定義圖案使用【編輯】→【定義圖案】命令可以創(chuàng)建個性化圖案作為頁面背景的底紋。2.信息調板使用【窗口】→【信息】命令，信息調板可顯小以下信息:上一頁下一頁返回2.4其他頁面的處理(1)當使用【選框工具】時，【信息】調板會隨著您拖移鼠標顯小指針位置的x坐標和y坐標以及選框的寬度(W)和高度(H)。(2)在使用【裁切工具】、【形狀工具】、【切片工具】和【縮放工具】時，隨拖移變化的選區(qū)的寬度(W)和高度(H)。該調板還顯示裁切選框的旋轉角度。(3)使用【變換】或者【自由變換】命令時，寬度(W)和高度(H)的變化白分比、旋轉角度(A)以及水平切線(H)或垂直切線(V)的角度。上一頁返回2.5圖片切割導成網頁格式2.5.1實例介紹1.打開制作完成的網站首頁圖像，如圖2.87所示，設置和顯示參考線2.使用【切片工具】按照【參考線】規(guī)劃出的區(qū)域對頁面進行切片處理(1)在【工具】活動面板上點選【切片工具】，在展開的項目中選擇【切片工具】。(2)使用菜單欄下方的【切片工具】選項欄中的【基于參考線的切片】，讓軟件自動對當前圖像進行一次切片。(3)按照自己的規(guī)劃意圖，在“參考線”的交義區(qū)域使用“切下一頁返回2.5圖片切割導成網頁格式片工具”工具在需要進行切片的圖像區(qū)域的對角上單擊左鍵拖動鼠標，切出區(qū)域(在切出的區(qū)域邊緣會有藍色線框和左上角切片編號的顯示)，實現(xiàn)更為精確的二次切片。切片后效果如圖2.90所示。3.保存已經完成的切片(1)使用菜單命令【文件】一【存儲為Web所用格式】，在出現(xiàn)的窗口中單擊【存儲】。(2)保存的文件名為“index”，保存類型為“HTML和圖像”。(3)退出軟件。2.5.2相關知識1.使用切片