返回首頁

Photoshop中使用切片工具的技巧詳解

時間:2012-07-04 17:07來源:知行網www.f1globe.com 編輯:麥田守望者

Photoshop切片工具主要是用來將大圖片分解為幾張小圖片,這個功能用在網頁中比較多,F在的網頁中圖文并茂,打開一個網頁比較耗時,為了不讓瀏覽網頁的人等待時間太長,所以將圖片切為幾個小的組成部分。打開網頁時,多個小圖片會同時下載,可以明顯提高網頁刷新的速度。
  幾乎所有的圖象處理軟件都包括切片功能,并能方便地輸出切片和包括切片的html文件。當使用大圖作網頁,需要把它們切成多個圖片(切片)時,可以借助這些軟件的幫助,而無須用插入表格的方法。
  下面舉例說明如何在Photoshop中切割圖片:


  1.打開一張圖片,選擇工具欄上的“切片工具”,有三種樣式選擇。
  2.選中“切片工具”后,按住左鍵拖拽一個方形,就出現一個切片。如果在樣式中設置了固定大小,在圖片上任意點擊一下左鍵,也出現一個切片。
  3.切片選擇工具
 、偃绻枰儞Q切片的位置和大小,直接用左鍵按住某個已選中的切片,就可以隨意挪動切片位置;用左鍵按住切片四周的小黑點,也可隨意伸展或收縮切片大小。
 、谌绻卸鄠切片,選取不同的切片,就需要選擇工具欄上的“切片選擇工具”。
 、廴绻谀硞切片上單擊右鍵,彈出的菜單上可以選擇刪除切片或者編輯切片。
  4.切片塊的層次順序:①置為頂層②前移一層③后移一層④置為底層


  5.切片選項:這一項是對切片塊進行細致的設置,切片類型分為圖像和無圖像。
 、賵D像,表示這個切片塊為原圖,就是顯示這個切片塊原來的圖像。
   名稱:這個塊的名字。
   URL:單擊這個塊時它所鏈接的網址。
   目標:表示是在原窗口打開鏈接,還是在新窗口中打開鏈接,即html中的target屬性。
   信息文本:鼠標移到這個塊時瀏覽器左下角顯示的內容。
   Alt標記:圖片的屬性標記,鼠標移到這個塊時顯示在鼠標旁的文本信息,當圖片不能正常顯示時可告訴瀏覽者這個圖片的信息。
   尺寸:設置塊的x、y軸坐標,W、H塊的精確大小,這個用于需要設置十分精確的切片塊。
   切片背景類型:切片塊的背景信息設置。
 、跓o圖像,顯示的不是切片塊的原圖,若不設置文本或背景色就是空白。
   顯示在單元格中的文本:顯示在這個塊的文本信息。
   尺寸:設置塊的x,y軸坐標,W,H塊的精確大小,這個用于需要設置十分精確的切片塊。
   切片背景類型:切片塊的背景信息設置。


  6.提升到用戶切片:圖片中暗的切片塊是我們切片時自動生成的,左鍵單擊選中,單擊“提升到用戶切片”可以讓它變亮,變成用戶切片。


  7.劃分切片:可以把某個切片智能細分成更多小切片。
  選擇工具欄上的“切片選擇工具”,選中某個切片,單擊頂上的“劃分切片”按鈕,可以按切片個數等分劃分,也可以按精確像素劃分。


  8.隱藏自動切片:把不是用戶手動切片的塊隱藏起來。


  9.文件-->存儲為Web所用格式(快捷鍵Ctrl+Shift+Alt+S)。
 、偃绻x擇“雙聯”,左側為圖片原稿,右側為將來在網頁上出現的圖像,可以用鼠標選中右側任意一個切片,設置每個小切片圖片的類型等等,同時可以設置圖片品質用于壓縮圖片大小。
 、诒4嫱瓿珊,電腦上就會出現一個名叫index.html的web文件和一個名叫images的圖片目錄,切分后的圖片就保存在這里。index.html就是用切分后的小圖片組成的網頁文件。
  
  下面介紹保存單個切片的方法:
 、賵绦-->存儲為Web所用格式
 、谠诖蜷_的“存儲為web格式”對話框中,選中要單獨保存的切片,然后執行存儲。
 、墼诖鎯υ捒虻南旅嬗兴膫選項:第一個是文件名,自己任意起;第二個是存儲圖片類型,一般是僅限圖像(*jpg);第三個是默認設置,不變;第四個,一定要選擇“選中的切片”。
 、苓@樣單個一張切片圖就保存好了。
  注意:當圖片較大,切片較多時,可能會只看到上面幾張切片,看不到下面的切片,這時只需點擊左下角的顯示比例,默認100%,你將100%改為50%或者25%即可看到全部切片了。
  
  其它幾個問題
  1.還可以使用選區(PhotoshopCS8.0)或從參考線創建切片,并且可以在ImageReady中從選區創建切片。
  “基于參考線創建切片”這一項一直是暗的,是因為畫布中沒有參考線,視圖-->標尺(ctrl+R)可以將參考線顯示出來。從參考線創建切片時,將刪除所有現有切片。
  注:無法劃分基于圖層的切片。


  2.如果切片不顯示,視圖-->顯示-->切片,可以將切片顯示出來。
  
  3.打開一張圖片或新建一個圖層的時候,總是默認顯示有切片標記符號如01,按快捷鍵Ctrl+H(不顯示額外內容)就可以取消。
  
  4.用戶切片和自動切片:保存PS切片后,會自動生成許多小的碎切片(差一個像素都會現成一個圖片)。使用“劃分切片”對話框以便沿水平方向、垂直方向或同時沿這兩個方向劃分切片;不論原切片是用戶切片還是自動切片,劃分后的切片總是用戶切片。
  
  5.切片把圖片分割成幾個部分,如果丟掉其中一個部分,系統會自動給這一部分填充上純色的。

------分隔線----------------------------
標簽(Tag):photoshop photoshop實例教程 Photoshop技巧 photoshop源代碼 photoshop基礎教程
------分隔線----------------------------
推薦內容
猜你感興趣
99久久免费高清热精品