首頁 > web前端 > PS教程 > 主體

photoshop巧用系列第三篇-切圖篇

高洛峰
發布: 2017-02-18 14:04:00
原創
1283 人瀏覽過

前面的話

  前端工程師除了使用photoshop進行測量之外,更重要的是要使用該軟體進行切圖。本文是photoshop巧用系列的第三篇-切圖篇

 

切圖資訊

  在網頁製作中有哪些圖片是需要被切出來的呢?主要分為兩類,一類是修飾性圖片,另一類是內容性圖片

  【1】修飾性圖片

  修飾性圖片主要對網頁內容進行修飾,一般會被製作為雪碧圖,用在background屬性中,通常儲存為png24(IE6不支援半透明)和png8格式。修飾圖片主要包括以下幾類:

    1、圖標、logo

    2、有特殊效果的按鈕、文字等(如果設計師設計的字體不太常見的話,把文字圖片來切出來、有特殊效果的按鈕、文字等(如果設計師設計的字體不太常見的話,把文字圖片來切出來

) 3.非純色的背景

  【2】內容性圖片

  一圖勝千言,這裡的「一圖」就是指內容性圖片,主要為網頁提供內容,一般用在photoshop巧用系列第三篇-切圖篇標籤中。內容性圖片顏色較豐富,一般存為JPG格式,且需要一定的壓縮。內容性圖片主要包括以下幾類:

     1、Banner、廣告圖片

     2、文章中的配圖

    2、文章中的配圖

    2、文章中的配圖

   圖 。即可

 切圖步驟

【1】

隱藏文字只留背景

  若文字上有特殊效果,無法用代碼寫出,則把文字和背景一起切出來  若文字上有特殊效果,無法用代碼寫出,則把文字和背景一起切出來1㟜文字為獨立圖層,則隱藏文字圖片

    先找到文字圖層,然後去掉眼睛圖示    a、若背景是可以拉伸的,用矩形選框工具在背景上畫一個小的矩形框,用自由變換工具(ctrl+t)拉伸背景,將文字覆蓋,然後雙擊或按回車鍵
photoshop巧用系列第三篇-切圖篇 、相片和背景,文字義鋪背景覆蓋文字

    b、若背景有紋理,不可以拉伸,用矩形選框工具在背景上畫一個小的矩形框,用移動工具+alt來複製當前圖層,一次次地按下方向鍵或用鼠標移動(鼠標移動時,按住shift鍵時可以保證圖層按照直線移動),最終將文字全部覆蓋為止

photoshop巧用系列第三篇-切圖篇 photoshop巧用系列第三篇-切圖篇
photoshop巧用系列第三篇-切圖篇 photoshop巧用系列第三篇-切圖篇
photoshop巧用系列第三篇-切圖篇 photoshop巧用系列第三篇-切圖篇


【2】移動工具選取所需圖層(ctrl+點選圖層的長方形區域),出現螞蟻線

【3】合併圖層(ctrl+e)(ctrl+e)(可選

  勾選自動選擇,然後將需要的多個圖層合併

【4】複製圖層(ctrl+c) ->新檔案(ctrl+n),並按確定-> 貼上圖層( ctrl+v)

photoshop巧用系列第三篇-切圖篇 photoshop巧用系列第三篇-切圖篇
實戰  下面將從切不同類型的圖片的角度出發來進行實戰說明
photoshop巧用系列第三篇-切圖篇 photoshop巧用系列第三篇-切圖篇  

【切png8】

  因為png8圖片不支援半透明,所以需要帶背景切

  1、合併可見圖層(shift+ctrl+e)

  1、合併可見圖層(shift+ctrl+e)

『 1、合併可見工具選擇一個大的區域

  3、魔棒工具去除多餘部分(從選區中減去: 按住alt)

photoshop巧用系列第三篇-切圖篇 photoshop巧用系列第三篇-切圖篇
🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜

 

【切不規則小圖示】

  切法和png8的切法類似

    [注意]選擇鏤空小圖示時,一定要取消[連續連續[連續]

【切可平鋪背景】  2、複製貼上到新文件中(平鋪內容充滿文件的寬(  2、複製貼上到新文件中(平鋪內容充滿文件的寬(yx)或高(yx)或高(yx) )
 photoshop巧用系列第三篇-切圖篇 photoshop巧用系列第三篇-切圖篇  1、用矩形選框工具選取一塊區域
     若沿x軸平鋪,則鋪滿x軸;若沿y軸平鋪,則鋪滿y軸

【切片工具一頁切】 、拉參考線

  2、選擇切片工具

  3、點擊基於參考線的切片按鈕

  4、從切片工具切換到切片選擇工具(在同一個按鈕下)photoshop巧用系列第三篇-切圖篇  4、從切片工具切換到雙擊切片,更改需要的名稱

  6、保存

  [注意]全選切片不可用ctrl+a,只能拖曳矩形框來選取所有切片,選取後顏色變亮,然後統一設定儲存格式

photoshop巧用系列第三篇-切圖篇 photoshop巧用系列第三篇-切圖篇 圖文
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!