Ⅰ 前端需要會ps嗎
很多招聘信息中，要求前端開發工程師需要掌握ps技能。
學前端找工作必須要ps,這個印象是歷史遺留下來的。以前是沒有前端這個職位的，只有「頁面美工」或「UI」這個職位，這時候當然需要會ps了。因為那時候開發，需要大量的圖片製作，流程大概是：美工設計大圖；審稿；切圖；寫CSS和html。
我的觀點是，既然市場需要掌握ps技能的前端開發人員，那我覺得有必要去學習一下，在前端開發中ps工具的應用。反正技多不壓身，趁現在還學的動！
Ⅱ PS-前端切圖教程（切jpg圖和切png圖）
轉發自： PS-前端切圖教程（切jpg圖和切png圖） - xing.org1^ - 博客園 (cnblogs.com)
———————-------------------------------------------------------------------- PS切圖步驟說明 ————————————————————————————————
一共分兩大項：切jpg圖、切png圖。
我用的是PS CC 版本，教程中用到的除了界面和擺放位置不一樣外，其他應該和低版本的都一樣了。
一、 切JPG圖
1．打開ps導入圖片的步驟是鐵定的了
2．選擇左邊工具欄里的「切片工具」
事先自己沒用過或上一次ps工具使用時沒有使用過「切片工具」的，打開ps工具欄里默認是「裁剪工具」的圖標
你可以滑鼠左鍵點住「裁剪工具」不鬆手，他會在右邊展開（我這是工具欄在ps界面左側的情況下）這一組的所有工具，在里邊選擇「切片工具」即可
我圖中之所以框選了兩個工具，是因為後期還要用到「切片選擇工具」，這里先認識一下他的位置在哪。
3．用「切片工具」切出想要的范圍，框選范圍就像平時用qq的截圖工具一樣。
如下，我需要這個小圖標，我就框選了他。
框選中：
框選後：
如果你框選好了松開了滑鼠，他還是這種黃色的邊線，你把「切片工具」移到附近，他還能調整框的大小范圍。
但是如果你框選了好幾個了，想改前邊已經框選好的：
像如上這樣，要知道，ps切片工具最近一個選區的切片是用黃色框包裹的，其他前邊切得都是藍色邊線，這時候你再用「切片工具」去調整藍色邊線的選區是動不了的。
這就要用上「切片選擇工具」了
4．「切片選擇工具」調整范圍：
切片選擇工具就在「切片工具」的下邊，尋找方法見上解。點擊選擇要調整的切片藍線，待其變成黃色後，調整范圍。
切片選擇工具只能選擇並調節范圍，不能切片。
5．切好後保存
保存方法：文件——存儲為web所用格式【快捷鍵ctrl+shift+alt+s】
在彈出的【存儲為web所用格式】對話框中，下拉選擇框選擇JPEG格式
按需求更改質量（低、中、高、非常高、最佳。這五個模式）
點擊存儲後彈出【將優化結果存儲為】的對話框
選擇存放位置、設置文件信息——
一般存儲時，ps會自動建立一個images文件夾，你要找到剛才自己設定的位置中，找images文件夾，在她里邊才有你剛才切好的圖。
命名文件名
「格式「——僅限圖像
在「切片」那裡，可以選擇是存儲全部切片還是只存儲選中的切片，
一般默認就存儲全部切片就好了，有時候只需要一小塊切片時，可以選擇存儲選中的切片，他會只保存一張你當前切得圖，這樣省的自己去一大堆切片中撿出來自己要用的了。
二、 切PNG圖
切透明圖的核心理念是，你要把不需要的背景圖給隱藏掉，只讓需要的留下來，底部背景變成像馬賽克那樣的樣式。
1．打開ps拖進來你要切的psd或者tif文件，
一定得是帶圖層的。
2．先選擇移動工具
3．並在頂部選項欄里勾選自動選擇，
4．下拉框里選擇圖層
若沒有選項欄或者圖層欄的：
在菜單欄點擊窗口——選項。打了對勾後就能調出工具對應的選項面板了。
5．然後用「移動工具」點擊你不需要的背景圖，ps會自動選中該背景所在的圖層，
6．你在圖層面板中，把對應這層的左邊小眼睛關掉就好了，讓背景圖先隱藏起來。
有時候設計會有好幾層，他為了光效或者其他效果做了好幾層不同透明度的背景疊加在你要切的東西後邊，
你就用移動工具（快捷鍵v【英文輸入法下按v就可以鎖定移動工具】）點擊它然後關掉它，有幾層就多做幾步，直到你不需要的背景全部隱藏掉。
但是良心的設計一般會把背景都放到一個圖層中，你找到一層背景，所有的都和他在一個組里邊，你把組的小眼睛關掉即可
7．然後切片工具切出你要的那個圖標
8．保存：文件-存儲為web所用格式(ctrl+shift+alt+s)
9．選擇png-8/png-24格式，看你對圖標的要求了
PNG8」是指8位索引色點陣圖，「PNG24」是24位索引色點陣圖；
png8：
每一張「png8」圖像，都最多隻能展示256種顏色，所以「png8」格式更適合那些顏色比較單一的圖像，
例如純色、logo、圖標等；因為顏色數量少，所以圖片的體積也會更小；
png24：
每一張「png24」圖像，可展示的顏色就遠遠多於「png8」了，最多可展示的顏色數量多大1600萬；
所以「png24」所展示的圖片顏色會更豐富，圖片的清晰度也會更好，圖片質量更高，當然圖片的大小也會相應增加，
所以「png24」的圖片比較適合像攝影作品之類顏色比較豐富的圖片；
這是二者的區別，根據自己的需求選擇吧。
10．然後就是一定要勾選透明度，其他默認設置就好。
Png-8的透明度位置
Png-24的透明度位置
11．」保存全部切片「或者「保存選中切片」
這里還要說明一個問題，有時候一個頁面中，我用切片工具選出好幾張png圖標准備切，然後保存的時候也選擇png格式都沒問題，
但是到了選擇保存位置這個對話框里，選擇的是「保存所有切片「，
最後保存出來的圖片，只有最後切得那張或者說切片工具選中的那張是png的，其他就都存成jpg格式了，背景是白色底
！！所以切png的圖，還是建議，一張一張「保存選中切片」比較好。
或者你的圖標與白色底差別大的話，你也可以不計較，讓他保存成jpg後再去ps中魔棒摳圖也好，不過這樣比較麻煩不是。
有的說，背景圖和圖標每分圖層咋辦？那咋辦？找設計吧。要不你自己選取工具扣吧，扣好了另存為png也是一種辦法
三、 其他技巧 ：
1．Ctrl+ +號放大圖片，
2．ctrl-縮小
3．按住空格，滑鼠圖標變成抓手工具，移動頁面
四、重磅彩蛋！！！還有一個吊炸天的方法——針對單一小icon切成png的
「移動工具」點擊圖標，選中圖標所在的圖層；
右擊該圖層，選擇「轉換為智能對象」；（ps這時候沒反應，不要大驚小怪，是你看不到而已）
接著再次在這個圖層上，右擊——「編輯內容」
對話框點擊確定
ps就自動生成一個新的文件，只有那個icon，而且是透明的哦！
很神奇有么有！
很省力有么有！
1秒搞定有沒有！
以下是圖解：
這是點擊一個小圖標
選中圖標後的圖層面板
右鍵點擊該圖層選擇「轉換為智能對象」
沒轉換前的圖層樣式：
轉換後的圖層樣式：
所以別說「我轉換了ps沒反應」這樣的話了，是有的，你不仔細看看不到
接著再右擊——「編輯內容」
點擊「確定」
看，他就新建了一個「形狀8」的頁面，放的是我的png的小圖標，
最後你保存為png也好，「存儲為web所有格式」也好，自由發揮吧。
這個方法可能只能保存一個圖標，
有的人說我好幾個圖：例如文字+圖片都有咋弄？
那就切圖唄！
那還要糾結的話那就合並圖層吧！
Ⅲ 前端主要學什麼
（1） html + css。
（2）JavaScript。不是所有的網頁都必須有js，但是要想實現一些超酷的功能和界面的時候，就需要涉及到js。如果沒有其他編程語言的基礎的話，學起來可能要費些力。
（3）Photoshop、flash。熟悉會一點兒就行了，沒必要全部都學得精通，當然如果你在學習的過程中，發現你ps或者flash比較感興趣的話，也可以嘗試做美工這一行。
（4）html5和css3。可以先了解一下，然後再入手。畢竟IE的瀏覽器大多還不支持。
（5）瀏覽器兼容。懂web標准，熟練手寫 xhtml css3 並符合 符合w3c標准。代碼能兼容主流瀏覽器Firfox，Chrome、Safari、IE、Opera。雖然IE6很多都不兼容，但現在還使用的人還是有的。
（6）熟悉一門後台編程語言 asp、php、jsp等
Ⅳ Photoshop CC與前端的那些事
自動切圖(含WebP、SVG格式)：
前端開發人員經常需要將很多圖層切出成獨立的圖片。有了自動切圖功能，無需花更多時間來切圖了。只需在圖層名後添加相應格式後綴(如.png)，即可自動輸出所需格式的圖片。
請保持菜單「編輯-首選項-增效工具」中的「生成器」為啟用狀態;
依次點擊菜單「文件-生成-圖像資源」，確認該菜單項已被勾選;
試著修改某個圖層命名(如 iTunes.png)，然後檢查當前 psd 文件所在目錄下的「文件名-assets」 的目錄，打開此目錄，發現 iTunes.png 已經躺在裡面了。
常用技巧：
@2x Retina 圖片的輸出，在圖層前添加 200% 即可，如 200% [email protected] ;
開啟 WebP、SVG 格式的自動輸出： 新建 generator.json 文件，內容如下：
{
"generator-assets": {
"svg-enabled": true,
"webp-enabled": true
}
}
將此配置文件拷貝至： Windows: (Win+R後輸入 %USERPROFILE% )目錄下，如 C:Usersxxx Mac OS: $HOME 如「Macintosh HDUsersxxx」 目錄下 WebP 輸出暫只支持 Mac OS。
復制 CSS
Photoshop CC 終於推出了「復制CSS」 功能。它能讓開發人員快速獲取形狀的 CSS 代碼。其實不少設計師也很想學習 CSS，有了這個功能，可以讓這些愛學習的設計師熟悉 CSS 代碼與圖形的對應關系;
右擊圖層面板上的圖層，選擇「復制 CSS」，或點擊菜單「圖層-復制 CSS」;
多個圖層的批量獲取，請選擇多個圖層，執行 Ctrl+G，將所選圖層轉為圖層組。然後在該組上右擊，選擇「復冊基制 CSS」，即可批量獲取 CSS 代碼。
智能對象暫不支持「復制 CSS」功能，您可以柵格化該圖層再來使用。
當前的版本的此功能，包含了很多冗餘信息和不太友好的寫法，可能不是大家真正需要的。於是 ISUX 前端團隊改進了這個功能，您可以下載「PhotoshopCopyCSS」來增強 Photoshop CC 自帶的「復制 CSS」功能，提升 CSS 代碼的真正採用率;目前的優化有：
* 自動識別 CSS Sprite 圖片，獲取 background-position 信息;
* 自動識別是否圖標;
* 優化 CSS3 漸變、文字、邊框、陰影等 CSS 代碼;
* 優化 RGB 顏色值成 十六進制顏色;
* 去除冗餘 CSS 屬性，如 position, z-index, left, top 等。
您也可以反饋更好的建議，讓這個功能真正為大家州大謹所用。
前端開發同學接手的 psd 文檔，往往有大量圖層，我們需要對其進行整理。例如刪除空白、鎖定、文本等圖層。我們還可以通過圖層類型、名稱、效果、屬性等條件進行快速定點陣圖層。
使用此功能可以很方便定位到當前選定圖層，非常適合含有大量圖層的 psd 文檔。
另外隔離圖層也是個很不錯的功能。開啟隔離圖層功能之後，我們可以通過移動選擇工具，點選畫布上的內容，找出我們需要的圖層將其整理成一個獨立的 psd 文件。
WebP 插件
WebP 是 Google 為減少數據量、加速網路傳輸的目的而開發的圖片格式。特別適合移動端圖片的傳輸。大大節省帶寬，目前只有 Google Chrome 瀏覽器對其原生支持。
Photoshop CC 的 Mac OS 版自帶輸出 WebP 功能。Windows 下您可以下載此插件來輸出 WebP 格式。安裝後，可以在 Photoshop 菜單「文件-另存為」 對話框中選擇「WebP格式圖片」。
WebP for Photoshop v0.5b5, 16 December 2013 Mac | Win
動作條件
Photoshop CC 新增了動作條件，可以根據不同條件執行命令或其他動作。
智能參考線/使用圖層顏色
這兩個功能並不是 Photoshop CC 的新功能。為什麼要在仿枯這里說呢，因為它能輔助我們一秒居中對齊、一秒貼邊，這個非常實用。另外也建議設計師使用圖層顏色來標出改動位置，這樣前端開發同學便能快速定點陣圖層。
Ⅳ 前端需要學習哪些軟體多嗎
前端開發要學的內容主要有：
①計算機基礎以及PS基礎
②前端開發基礎（HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架）
③移動開發
④前端高級開發（ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等）
⑤小程序開發
⑥全棧開發（MySQL資料庫、Python編程語言、Django框架等）
⑦就業拓展（網站SEO與前端安全技術）
互聯網行業目前還是最熱門的行業之一，學習IT技能之後足夠優秀是有機會進入騰訊、阿里、網易等互聯網大廠高薪就業的，發展前景非常好，普通人也可以學習。
web前端工程師是程序員裡面入行門檻較低的一個職業，有意轉行web前端的小夥伴可以對比一下開設有相關專業的熱門學校，好的學校擁有根據當下企業需求自主研發課程的能力，建議實地考察對比一下。
祝你學有所成，望採納。
北大青鳥學生課堂實錄
Ⅵ 前端對ps要求高不高
當前的前端開發，對PhotoShop的要求並不高，主要要求是基本的使用以及切圖即可
當前的WEB前端開發（HTML5） 與 以前的 網頁設計與製作 並不相同
原有的網頁設計與製作，主要針對PC平台，進行網頁網站的設計與製作，相對會涉及一部分設計工作，並將美工圖實現成網頁。通常使用的工具是網頁三劍客——PhotoShop、Flash、Dreamweaver。然而，行業的發展使得「網頁設計與製作」這一職業逐漸遭到了淘汰。
該職業已經進行了分工，分成了「WEB前端開發工程師」和「網頁設計師」，所以前端工程師也不需要去掌握設計方面的內容了。
資料來源：《HTML5是什麼》
Ⅶ web前端需要掌握哪些ps的操作
學習web前端不僅僅是PS那麼簡單啦，當然會PS切圖，是最基本的，之前PS版本問題，可能無法實現自動切圖，現在有PS版本實現自動切圖，想PS cc 2014，html，html5 css css3，js都作為前端的基本標配，學習前端要拿下
Ⅷ 零基礎學做網站視頻教程（全套）新手如何做網站
建立網站就是購買自己的房子居住一樣，仍然是線上推廣的必經之路，附上一個從零開始用SAAS搭建網站的教程。
做網站隱雹岩的教程步驟：
1、網路搜索「鳴蟬自助建站平台」，進入平台網頁，如圖所示。
6、在設計編輯完工後，即可聯系平台協助綁定獨立灶御域名，發布上線。
Ⅸ 有哪些網站可以自學PS有推薦的嗎
網上學習PS的網站有很多，眼花繚亂不知道選哪個怎麼辦？個人著重推薦這8個襪滑網鋒旦站給你，不論小白入門，還是高手進階，裡面都可以找到適合你的平台。
1.PS家園網：http://www.psjia.com/
設計派並不是專門的PS學習網站，但它開辟了PS教程這一專欄，在其他欄目也可以查看或者下載與PS有關的素材。不再是簡單地詳解一些基礎知識，比較適合那些有一定PS基礎的人作進一步拓展之用。
但是，不知什麼原因，近期該網站打不開或者打開速度極慢，甚為可惜。
收集、整理不易，如果認為有用，不妨點個贊，關注一波再走吧！
Ⅹ 前端需要學ps嗎對前端有什麼幫助
不用學PS，PS是作圖修圖工具軟體，前端設計離不開圖片對吧，這個當然得有工具裁剪和繪制了。現在正規公司都有UI設計師給前端提供設計圖和圖片，所以現在的前端不用學PS了。當然你想做全棧就可以學學，技多不壓身嘛。