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

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

一、摳圖技巧

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

二、修圖技巧

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

三、圖層操作

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

四、文字編輯

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

五、切圖

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

六、圖像合成

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

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

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

本文版權(quán)歸傳智播客前端與移動(dòng)開(kāi)發(fā)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！

作者：傳智播客前端與移動(dòng)開(kāi)發(fā)培訓(xùn)學(xué)院

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