photoshop cc 切片工具教程

2023-10-31 17:31:14 來源/作者: / 己有:2人學習過

三、編輯切片信息

創(chuàng)建切片之后,您可以編輯切片信息通過以下兩種方式中的任一種。一種要做的就是點擊切片選擇工具,單擊你想編輯的切片,然后點擊菜單欄中>為當前切片設置選項的按鈕。

photoshop cc 切片工具教程

另一個選擇是右鍵單擊切片,在彈出的菜單中,選擇編輯切片選項。

photoshop cc 切片工具教程

兩種選擇都將彈出如下的切片選項對話框。

photoshop cc 切片工具教程

正如您所看到的,對話框里有許多設置。

a.切片名稱:打開網(wǎng)頁之后顯示的名稱

b.URL:點擊這個被編輯的圖片區(qū)域后,會跳到你輸入的目標網(wǎng)址內

c.目標:指定載入的URL幀原窗口打開,表示是在還是在新窗口打開鏈接

d.消息文本:鼠標移到這個塊時瀏覽器左下角顯示的內容

e.Alt標記:圖片的屬性標記,鼠標移動到這塊時鼠標旁的文本信息

f.切片的尺寸:設置塊的x、y軸坐標,W、H的精確大小

四、保存網(wǎng)頁

一旦你滿意你的布局后,選擇文件>存儲為Web所用格式,保存圖片。

photoshop cc 切片工具教程

在這里,您可以為切片設置文件類型或者使用網(wǎng)頁對話框中列出默認設置。完成設置后,單擊存儲按鈕。

photoshop cc 切片工具教程

這時會彈出一個存儲優(yōu)化結果的對話框,底部的對話框是幾個重要的設置。

a.格式:你有三個選擇,分別是HTML和圖像,僅限圖像和僅限HTML。

b.設置:您選擇自定,背景圖像,默認設置,XHTML和其他。

c.切片:所有切片,所有用戶切片和選中切片。

對于本教程我使用的是HTML和圖像(一般都這么保存),默認設置和所有切片。完成設置后,選擇您想要保存文件的文件夾,并單擊保存按鈕。這時會創(chuàng)建一個HTML文件和一個包含六個圖像文件,它們在同一個大文件夾中。

這是一個在Adobe Dreamweaver中的分區(qū)屏幕的HTML文件。你可以看到,代碼很簡單也很好用。

photoshop cc 切片工具教程

五、結論

正如您可以看到的,當你有一個大圖片時,圖像分割是非常有用的。通過將它分解成小圖,加載時小圖一個一個加載,讓用戶逐步看到更多。這對于網(wǎng)速慢的用戶很有幫助。