前端用到的PS切圖

需要掌握的幾個(gè)要點(diǎn)

  • 使用PS工具
  • 測(cè)量與取色
  • 切圖
  • 保存
  • 圖片優(yōu)化也合并

  • ps工具
    1.修改像素(編輯-首選項(xiàng)-單位與標(biāo)尺)
    2.面板(窗口-工具/選項(xiàng)/信息F8/圖層F7/歷史記錄)/*這些開啟之后,就要保存下來(lái)。窗口 > 工作區(qū) > 新建工作區(qū) > 保存 */
    3.常用工具
    1)切圖工具:移動(dòng)工具(最上面)、矩形選框工具、魔棒工具、裁剪工具+切片工具、縮放工具 、取色器
    2)輔助工具:視圖里面勾選,對(duì)齊標(biāo)尺,顯示參考線,就可以拉參考線了

  • 測(cè)量和取色
    1)測(cè)量:矩形選框工具&信息面板
    2)取色:拾色器&吸管工具

  • 切圖
    1.修飾性圖片:圖標(biāo)、網(wǎng)站的Logo,還有一些特殊效果的按鈕、文字等以及非純色的背景/PNG24/PNG8/
    2.內(nèi)容型圖片:內(nèi)容性的圖片一般我們應(yīng)用在HTML標(biāo)簽 img 上,比如網(wǎng)站上的廣告圖片以及一些網(wǎng)站文章中的配圖/存為JPG格式/

    - 適用于一刀切的圖片:
        1)根據(jù)需要的區(qū)域,分別拉參考線;
        2)選擇切片工具
        3)點(diǎn)擊“基于參考線的切片”按鈕
        4)保存(全選切片,選擇存儲(chǔ)為Web所用格式)
    
  • 保存
    1)當(dāng)圖片色彩豐富無(wú)透明要求時(shí),建議保存為JPG格式并選擇合適的品質(zhì)
    2)當(dāng)圖片色彩不太豐富時(shí)無(wú)論有無(wú)透明要求,建議保存為PNG8格式
    3)當(dāng)圖片有半透明要求,建議保存為PNG24格式

  • 圖片優(yōu)化與合并
    降切下來(lái)的圖片進(jìn)行合并,使用在線合成雪碧圖,網(wǎng)上搜索,可以自動(dòng)生成CSS,PS上也可以操作,但是不好定位。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 開始之前…… 這篇文章并不是教你如何美化圖片的,它針對(duì)前端開發(fā)的圖片操作。 這篇文章注重細(xì)節(jié),像是工具類文章。所以...
    黑白度閱讀 7,632評(píng)論 4 39
  • 1.三問切圖 什么是切圖?從設(shè)計(jì)稿(如.psd文件)中切出圖片素材(如.png、.jpg文件)DIV+CSS切圖1...
    LuckyPandaLee閱讀 2,257評(píng)論 0 14
  • 切圖工具 要點(diǎn):- 使用PS工具- 使用背景圖- 圖片合并方案- 瀏覽器兼容 使用PS工具 PS首選項(xiàng)設(shè)置,將單位...
    MrMagicWang閱讀 919評(píng)論 0 0
  • 準(zhǔn)備工作 1、設(shè)置:首選項(xiàng)-》單位與標(biāo)尺-》像素窗口-》面板-》選項(xiàng)、工具、信息(F8)、圖層(F7)、歷史記錄 ...
    Ryann閱讀 330評(píng)論 0 1
  • 界面快捷鍵 放大、縮小:alt+滾輪 or ctrl+"+/-"100%視圖:ctrl+1標(biāo)尺:ctrl+R參考線...
    小豸閱讀 837評(píng)論 0 48