web前端需要掌握哪些ps的操作呢？

12-09

web前端需要掌握哪些ps的操作呢？比如切圖等等，我現在只知道切圖，還有哪些ps 操作需要掌握呢？

切圖的話，其實主要是要先做好布局的構思，再動手切圖，布局和切圖這兩者是聯繫在一起的。不過現在一般都是別的部門切好給我的，我也很久不切圖了。

一些圖層的顯示/隱藏，元素的放大/縮小，編輯文本框什麼的，這些通用的操作總是要會的。
否則設計給你一份設計稿，你卻不會「閱讀」，無形中增加了溝通成本。 而在頁面製作方面，如果有一些UI設計/臨摹的經歷，事實上是會在編寫CSS時起到一定作用的(比如:after，:before等偽類的一些應用技巧之類的)

======================================================================

至於別的PS技能，我則是因為各種機緣巧合學了一點，大概都是中二病期間的時候混論壇做簽名圖他喵的做多了吧.......

找了些很早以前的習作.....歷史略悠久，那時候居然還有點小得意，現在看看，只能捂臉.....

有年暑假無聊跟著教程嘗試學3dsMax時做的些鬼東西，車模做的太糟心，就不放上來了。

你看這就是中二比較嚴重的時候幫朋友做的簽名...

幫好友的GF做的邀請函....

當年用VB寫程序時做的UI....
至於現在....我還是老老實實的滾去寫代碼吧。沒做過設計的人是不知道千幸萬苦做好一版psd然後被唰唰的槍斃是一種什麼滋味。看著飛機稿那叫一個五味雜陳老淚縱橫。

我們在做WEB前端，常常會用到的PS操作有以下四種：

1、常規切圖
2、生成圖片資源
3、生成CSS代碼
4、批量壓縮圖片

一、前面三種PS操作演示

△視頻演示：切圖、生成圖片、複製CSS樣式

二、用PS批量壓縮圖片

在WEB前端開發過程中，一些專題頁面中，時常會包含有大量的案例圖片需要展示，比如：圖集、相冊、新聞配圖等。直接從相機或手機得到的圖片，其解析度大小不一、體積巨大，在這樣的情況下，我們往往需要對這些圖片進行壓縮處理。

△視頻演示：用PS批量壓縮處理圖片

三、批處理的其他用處

除了像上述視頻中展示的那樣，可以用PS批量處理壓縮圖片，我們還可以借鑒到：給圖片批量添加水印、批量調色、裁剪圖片等。總之在工作過程中，有大量簡單、重複，類似流水線生產的操作時，你都可以考慮用Photoshop的批處理功能，來提升工作效率。

關於@酷coo豆

「平面設計學習日記網」的站長，非科班平面設計師，樂於分享自學平面設計的書籍、教程、經驗等資源參考，希望和初學平面設計的你一起進步！

推薦視頻教程：網頁設計高級教程

訂閱我的專欄：平面設計學習日記 - 知乎專欄

（完）

看你走哪個方向了，像我走前端工程方向的，就不需要

最主要的會切圖，其次才是各種奇技淫巧，必要的時候，是半殘廢設計師。
利益相關，小弟我剛工作時做過某婚戀網站編輯後來轉作前端，要求會一點ps設計，於是我做的這幅圖片，除了文字部分發現後來被修改了，但是整個構圖和按鈕都沒變，就這樣靜靜的在網站上待了兩年，然而我兩年前就不在那公司幹了，真是難得啊

PS切圖應該已經過時了，往全棧發展的話需要學矢量繪圖。不過這不是PS的長處，建議再學一下AI（此AI非彼AI）或Mac上的Sketch，矢量圖可以生成svg直接拿出來用。但是如果有設計師就交給他做，不要搶活。

你可以嘗試一下adobe的fireworks，很快就可以上手的。

這個就是看方向的問題了。我現在乾的活就是前端頁面展示方向的需要和設計圖打交道，但是我也有同學乾的活是前端工程方向的，他就不用和設計圖、PS打交道。

至於掌握的PS操作，首先你的懂PS的一些基礎，分清它的圖層概念；工作中常用到的操作就是切片，吸管操作，我工作上是要用到這些操作的

用PS切圖還是我大一學的，已經有很多年過去了。當年CSS3還沒有普及，圓角還是需要切下來的，漸變還是切1像素寬然後repeat的。想想這些技巧真是費勁，不過現在CSS3已經很強大了，各種UI庫很全，我覺得前端已經不需要切圖了。

至於其他PS功能，工作場景用的不多。專業UI設計師很多已經轉向了Sketch，Sketch很多插件很好，比如可以Mock Data，或者直接調真實的數據。可能平面設計師用PS比較多吧，那些精美的圖，UI設計師是不做的理論上，當然小公司就不那麼細了。

選區，陰影，透視

最新的ps 2015.5屌的不行尤其是切圖。。。。

做為全能大前端，PS的切片工具最起碼要會，否則設計師切的圖分分鐘不符合CSS的需求，你還得重切。

會把需要的素材從psd里切出來即可