首頁  >  文章  >  web前端  >  前端工程師技能之photoshop巧用系列第五篇-雪碧圖

前端工程師技能之photoshop巧用系列第五篇-雪碧圖

高洛峰
高洛峰原創
2017-02-20 09:13:172307瀏覽

前面的話

  前面已經介紹過,描述性圖片最終要合併為雪碧圖。本文是photoshop巧用系列第五篇-雪碧圖

 

定義

  css雪碧圖(sprite)是一種網頁圖片應用處理方式,它允許將一個頁麵涉及到的所有零星圖片都包含到一張大圖中。使用雪碧圖的處理方式可以實現兩個優點:

    【1】減少http請求次數

      【1】減少圖片大小,提升網頁加載速度(多張加載速度小於拼合成的圖片的加載速度)

  凡事都不完美,實現優點的同時也帶來了缺點,即提高了網頁的開發和維護成本。

 

應用場景

  前面提到過,並不是所有的圖片都可以用來製作雪碧圖,只有描述性圖片才適合

  【1】對於img標籤設定的內容性圖片才適合

  【1】對於img標籤設定的內容性圖片,是不能合併到圖片雪碧圖的,如果合併這些圖片會影響頁面可讀性,語義化降低且可調整的範圍小

  【2】對於橫向和縱向都平舖的圖片,也不能合併到雪碧圖中。如果是橫向平鋪,只能將所有橫向平舖的圖合併成一張大圖,只能垂直排列,不能水平排列;如果是縱向平鋪,只能將所有縱向平舖的圖合併成一張大圖,只能水平排列,不能垂直排列前端工程师技能之photoshop巧用系列第五篇——雪碧图

合併

  雪碧圖的製作實際上就是零星小圖合併成一張大圖,但小圖合併需要遵循以下規則:

  1】圖片在 1]必須保留空隙

  1、如果是小圖標,留的空隙可適當小一些,一般20像素左右

  2、如果是大圖標,要留的空隙就要大一點,因為大圖標在調整的時候,影響到的空間也會比較大前端工程师技能之photoshop巧用系列第五篇——雪碧图

  【2】圖片排列方式有橫向和縱向前端工程师技能之photoshop巧用系列第五篇——雪碧图

  【3】基於合併分類的原則

『尺寸和基於色彩

    a、把同屬一個模組的圖片進行合併前端工程师技能之photoshop巧用系列第五篇——雪碧图

   『b、把大小相近的圖片進行合併的圖片相近的圖片進行色彩相近前端工程师技能之photoshop巧用系列第五篇——雪碧图

前端工程师技能之photoshop巧用系列第五篇——雪碧图   【 4】合併推薦

    在實際的雪碧圖製作中,一般採用兩種方法:一種是只本頁用到的圖片合併;另一種是有狀態的圖標合併

前端工程师技能之photoshop巧用系列第五篇——雪碧图  

  在以前,我們可能需要手動實現雪碧圖,這是一件非常麻煩的且容易出錯的事情。現在有了很多方便的工具來製作雪碧圖。我常用是一個叫做css背景合併工具的小工具。

  使用方法如下圖:

 

維護

【放大畫布】

  圖像-> 畫布大小 -> 選擇定位位置(一般為左上角)

前端工程师技能之photoshop巧用系列第五篇——雪碧图

【減小畫布】

    [注意]PNG8的顏色模式預設為索引顏色模式,在修改png8圖片時需要更改其顏色模式為RGB模式,步驟為圖像-> 模式-> RGB;顏色

前端工程师技能之photoshop巧用系列第五篇——雪碧图

   『1、選擇圖像-> 裁切

   〜切
前端工程师技能之photoshop巧用系列第五篇——雪碧图
前端工程师技能之photoshop巧用系列第五篇——雪碧图 前端工程师技能之photoshop巧用系列第五篇——雪碧图     2、先選定要保留的區域,然後選擇圖像-> 裁剪

【移動圖示】
前端工程师技能之photoshop巧用系列第五篇——雪碧图   1、若圖示為獨立圖層,則用移動工具拖曳即可 前端工程师技能之photoshop巧用系列第五篇——雪碧图

  2、若圖標為非獨立圖層

    a、先用選取工具選取圖標區域,再用移動工具拖曳圖標,這樣可以移動該圖層

    b、先用選取工具切,貼上,可以將原來的圖層分成兩個圖層,更有利於操作

前端工程师技能之photoshop巧用系列第五篇——雪碧图 前端工程师技能之photoshop巧用系列第五篇——雪碧图

🎜多前端工程師技能之photoshop巧用系列第五篇-雪碧圖 相關文章請關注PHP中文網! 🎜
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn