前端開發(fā)工程師需要掌握的6大PS技能

前端開發(fā)工程師(簡稱前端)的上游是UI設(shè)計師，大部分的UI設(shè)計師都是用photoshop(簡稱PS)來設(shè)計產(chǎn)品效果圖的，而前端會使用這個效果圖來制作頁面，為了能很好地與UI設(shè)計師對接以及制作頁面，前端需要掌握以下6大PS技能：

一、摳圖技巧

摳圖是PS中的一個重要功能，它的作用是從圖像素材中截取局部需要的圖像素材，前端不需要掌握PS中高深的截圖技巧，但是工具欄上的矩形、圓形、多邊形、魔術(shù)棒等選框是需要掌握的，矩形選框可以直接框選透明背景的圖像元素，還可以量元素的尺寸，對于一些沒有去掉背景的圖像素材，如果不想返回到UI那里進行重新修改，可以用多邊形或者魔棒工具直接將素材選擇出來，提高開發(fā)的效率。比如下面的圖片，合并了圖層，需要把“l(fā)ogo”選擇出來，可以用魔術(shù)棒選擇“l(fā)ogo”以外的區(qū)域，然后反選，就可以把logo選出來了。

二、修圖技巧

修圖，是指對圖像進行一些細微的調(diào)整，比如去除掉圖像上一些不需要的元素，或者切圖時想隱藏圖層中的元素，但是UI使用的是合并了圖層的元素，可以用修圖技巧將這個元素去除掉。比如下面這張圖片，按鈕的文字和按鈕合并圖層了，我們想去掉文字，可以用矩形選框，然后執(zhí)行“自由變換”命令，就可以橫向拖動覆蓋掉文字。

三、圖層操作

UI在設(shè)計效果圖時，會建立很多特殊的圖層，這些圖層如果直接切圖，往往是得不到我們需要的圖片，常用的操作是，需要把應(yīng)用了圖層樣式的圖層執(zhí)行“柵格化圖層樣式”;需要把路徑繪制的圖層執(zhí)行“柵格化圖層”;需要把圖層組執(zhí)行“合并組”等操作，執(zhí)行了這些操作后，把這些特殊圖層轉(zhuǎn)化為普通層，才能方便后續(xù)的切圖操作。下面這張圖片顯示的是一個帶圖層的效果圖的圖層情況，我們需要認識這些圖層。

四、文字編輯

對于效果圖上的文字內(nèi)容，經(jīng)常會有所修改，一般是修改文字內(nèi)容，或者調(diào)整文字大小等等，而且這種修改經(jīng)常會反復(fù)幾次，如果將效果圖返回到UI那里修改，一定會增加許多不必要的開發(fā)時間，其實修改這些文字是比較簡單的操作，如果前端掌握這些操作，可以直接在切圖的時候修改文字，就不需要返回到UI那邊了。

五、切圖

切圖就是在效果圖上裁剪網(wǎng)頁制作中需要的圖片，切圖是前端必須掌握的技能，切圖的技能當(dāng)然也需要結(jié)合上面的一些技能才能完成操作。切圖分為單張切圖和批量切圖，通過工具欄上的切片工具來進行切圖，然后通過執(zhí)行文件/存儲為web所用格式，來存為我們制作網(wǎng)頁時所需要的圖片。下面圖片顯示的是切片設(shè)置面板。

六、圖像合成

前端掌握圖像合成的技能主要是為了做雪碧圖，雪碧圖就是把許多張網(wǎng)頁制作需要的小圖片合并到一張圖片上，這么做的目的是為了讓網(wǎng)頁加載時減少http請求數(shù)，提高網(wǎng)頁的性能，當(dāng)然有很多自動化工具可以生成雪碧圖，但是如果想精確地自定義制作需要的雪碧圖，用PS合成才是最好的方法。下面圖片顯示的是youtube網(wǎng)站上使用的雪碧圖，下面是一整張圖片的局部。

作為一名前端開發(fā)工程師，你可以對照上面的技能，檢驗自己是否掌握了這些技能，上面只是整體概括了這些需要的技能，如果想詳細學(xué)習(xí)某項技能，可以用上面提到的關(guān)鍵詞去找到對應(yīng)的詳細的教程。如果你能超過上面提到這些技能，一定可以讓你更好地理解產(chǎn)品和UI的設(shè)計意圖，對你的前端開發(fā)工作有更好的促進作用。

友情提示：獲得更多學(xué)科學(xué)習(xí)視頻+資料+源碼，請加QQ：3276250747。

本文版權(quán)歸黑馬程序員前端與移動開發(fā)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處。謝謝！

作者：黑馬程序員前端與移動開發(fā)學(xué)院

首發(fā)：http://web.itheima.com/