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

前面的話

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

 

定義

  css雪碧圖(sprite)是一種網頁圖片應用處理方式,它容許將一個頁面涉及到的全部零星圖片都包含到一張大圖中。使用雪碧圖的處理方式能夠實現兩個優勢:webpack

    【1】減小http請求次數web

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

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

 

應用場景

  前面提到過,並非全部的圖片均可以用來製做雪碧圖,只有描述性圖片才適合工具

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

  【2】對於橫向和縱向都平鋪的圖片,也不能合併到雪碧圖中。若是是橫向平鋪,只能將全部橫向平鋪的圖合併成一張大圖,只能豎直排列,不能水平排列;若是是縱向平鋪,只能將全部縱向平鋪的圖合併成一張大圖,只能水平排列,不能豎直排列網站

合併

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

  【1】圖片在合併以前必須保留空隙url

  一、若是是小圖標,留的空隙可適當小一些,通常20像素左右

  二、若是是大圖標,要留的空隙就要大一點,由於大圖標在調整的時候,影響到的空間也會比較大

  【2】圖片排列方式有橫向和縱向

  【3】合併分類的原則

    有三種合併分類的原則,分別是基於模塊、基於大小和基於色彩

    a、把同屬一個模塊的圖片進行合併

    b、把大小相近的圖片進行合併

    c、把色彩相近的圖片進行合併

  【4】合併推薦

    在實際的雪碧圖製做中,通常採用兩種方法:一種是隻本頁用到的圖片合併;另外一種是有狀態的圖標合併

 

 

手工維護

【放大畫布】

  圖像 -> 畫布大小<alt+ctrl+c> -> 選擇定位位置(通常爲左上角)

【減少畫布】

    [注意]PNG8的顏色模式默認爲索引顏色模式,在修改png8圖片時須要更改其顏色模式爲RGB模式,步驟爲圖像 -> 模式 -> RGB顏色

    一、選擇 圖像 -> 裁切 選擇基於左上角像素顏色,能夠實現自動裁切的效果

    二、先選定要保留的區域,而後選擇 圖像 -> 裁剪或者選擇工具欄中的裁剪工具按鈕進行裁剪

【移動圖標】

  一、若圖標爲獨立圖層,則用移動工具拖動便可

  二、若圖標爲非獨立圖層

    a、先用選區工具選中圖標區域,再用移動工具拖動圖標,這樣能夠移動該圖層

    b、先用選區工具選中圖標區域,再剪切<ctrl+x>,粘貼<ctrl+v>,能夠將原來的圖層分紅兩個圖層,更有利於操做

 

客戶端實現

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

  使用方法以下圖所示:

 

在線實現

  https://www.toptal.com/developers/css/sprite-generator是一個在線製做雪碧圖的網站,實現很是簡單

 

gulp實現

  gulp中有一個gulp.spritesmith插件能夠用於雪碧圖的製做

  首先,安裝gulp及gulp.spritesmith插件

npm install gulp gulp.spritesmith

  而後在gulpfile.js中輸入以下配置代碼

var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');
 
gulp.task('img', function() {
    return gulp.src('src/img/*')
        .pipe(spritesmith({
            'imgName':'sprite.png',
            'cssName':'sprite.css',
            'padding':5 //合併時兩張圖片的距離
        }))
        .pipe(gulp.dest('dist/img'));
});

  運行gulp後,會在dist/img目錄下,輸出sprite.png和sprite.css這兩個文字,sprite.css文件的內容以下

.icon-emails {
  background-image: url(sprite.png);
  background-position: -107px 0px;
  width: 46px;
  height: 49px;
}
.icon-news {
  background-image: url(sprite.png);
  background-position: 0px -54px;
  width: 46px;
  height: 49px;
}
.icon-tels {
  background-image: url(sprite.png);
  background-position: 0px 0px;
  width: 49px;
  height: 49px;
}
.icon-top {
  background-image: url(sprite.png);
  background-position: -54px 0px;
  width: 48px;
  height: 48px;
}

 

webpack實現

  在webpack中自動生成雪碧圖,須要使用postcss-sprits插件

npm install postcss-sprites

  配置很是簡單

  "plugins": {
    "postcss-sprites": {
       spritePath: 'dist/assets/imgs/sprites/'
    }
  }
}
相關文章
相關標籤/搜索