案例實(shí)戰:分割圖像

  • 2019-12-09 15:40:13
  • 閱讀次數:次
  • 作者:盈嵐科技小編
  • 來(lái)源:http://amzcoolest.com

網(wǎng)頁(yè)設計中,分割圖像最大的作用就是可以局部?jì)?yōu)化圖像,從而易于在網(wǎng)絡(luò )中傳輸;另外一個(gè)作用則是可以給同一圖像中的各個(gè)分割區域設置超鏈接。例如,如圖8.92所示的圖像是一個(gè)網(wǎng)頁(yè)主圖,這么一個(gè)大圖在設計網(wǎng)頁(yè)時(shí)直接應用到網(wǎng)頁(yè)中是不合適的,因為圖像文件太大,瀏覽者需要很長(cháng)時(shí)間才能下載此圖片。為了解決這一問(wèn)題,可以使用Photoshop的分割功能,將大圖變成小圖,這樣就有利于瀏覽了。

【操作步驟】

第1步,啟動(dòng)Photoshop,打開(kāi)制作好的網(wǎng)頁(yè)圖像。

第2步,在工具箱中選擇【切片工具】,然后移動(dòng)鼠標指針至窗口中,單擊并拖動(dòng)鼠標即可拉出一個(gè)分割區域?!?/p>

提示:建立切片之后,如果不滿(mǎn)意,可以按Ctrl+Z快捷鍵還原操作,即可重新創(chuàng )建新切片。也可以在工具箱中單擊【切片工具】右下方的下三角,從彈出的下拉選項中選擇【切片選取工具】,然后單擊選擇切片,拖動(dòng)切片邊框來(lái)調整切片區域大小。

第3步,用同樣的方法將圖像分割成如圖8.94所示的8個(gè)區域,這樣在輸出時(shí)就會(huì )被分為8個(gè)圖像文件進(jìn)行保存。在網(wǎng)絡(luò )上傳輸時(shí),就能分開(kāi)傳輸了,從而加快了圖像傳輸速度。

第4步,圖像被分割后,分割區域左上角會(huì )顯示一個(gè)順序編號,這塊區域就是分割區域。使用【切片選取工具】可以選中某個(gè)切片區域,該切片四周會(huì )顯示控制柄,表示此時(shí)可以對該切片區域進(jìn)行編輯操作,如改變大小、位置。

提示:在使用【切片工具】分割效果圖時(shí),應該注意3個(gè)問(wèn)題:   

?切片之間不要預留空隙。在切分圖片時(shí),應該確保切片之間不要留出空隙,讀者可以通過(guò)切片編號觀(guān)察,從上到下,從左到右,如果切片編號出現跳躍,則可能中間出現空隙區域。   

?切片之間不要重疊。除了切片之間不要預留空隙外,也不能夠出現切片重疊現象。如果出現重疊現象,應該及時(shí)使用【切片選取工具】進(jìn)行調整。   

?確保切片之間對齊??紤]到切片最終都被轉換為表格,因此不規則的切片會(huì )產(chǎn)生大量嵌套表格,并產(chǎn)生很多冗余代碼。在操作時(shí),應該盡量確保上下、左右切片之間保持對齊。

第5步,右擊當前編輯狀態(tài)切片,在彈出的菜單中可以選擇為切片執行各種操作。

第6步,如果從快捷菜單中選擇【編輯切片選項】命令,可以打開(kāi)【切片選項】對話(huà)框,定義切片的類(lèi)型、名稱(chēng),以及輸出為網(wǎng)頁(yè)后會(huì )產(chǎn)生的URL、鏈接目標(目標)、描述的信息文本(信息文本)、鼠標經(jīng)過(guò)時(shí)的提示文字(Alt標記)。另外,在【尺寸】選項組中可以精確定位切片的坐標位置(X和Y),以及切片大?。╓和H)。設置完畢,單擊【確定】按鈕即可。

提示:在網(wǎng)站建設實(shí)際操作中網(wǎng)頁(yè)圖像會(huì )被分割得很細,這樣方便在Dreamweaver中進(jìn)行編輯。新建切片之后,除了使用【切片選取工具】調整切片的位置和大小外,也可以使用【切片選取工具】雙擊切片區域,打開(kāi)【切片選項】對話(huà)框。


當前文章標題:案例實(shí)戰:分割圖像

當前URL:http://amzcoolest.com/news/wzzz/3140.html

上一篇:案例實(shí)戰:最優(yōu)化圖像

下一篇:案例實(shí)戰:導出為網(wǎng)頁(yè)圖像

網(wǎng)站建設、網(wǎng)絡(luò )營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線(xiàn):181-8386-5875(點(diǎn)擊可一鍵撥號)
亚洲精品无码mv在线|新国产精品视频福利免费|日韩高清在线观看不卡一区二区|一本久久a久久精品免费不|亚洲私人无码内射免费观看