① Photoshop中的哪些知識點是用來前端切圖的
1、Photoshop中的切片工具、web格式等知識點與切圖有關。
2、切圖是指將設計稿切成便於製作成頁面的圖片，並完成html+css布局的靜態頁面。把一張設計圖 利用到切片工具 把所需的大圖切成一張張小圖，然後用DIV+CSS完成靜態頁面書寫，完成CSS布局。
3、切圖不是切片，把圖片切出來這個過程是叫切片。切圖的目的一是讓網頁稿有了交互性，實現各種各樣的功能；所以切圖時候注意少用圖片工具，採用div+css布局，更能減小網頁體積 。
② Photoshop中的哪些知識點是用來前端切圖的
1).基本信息：
以圖層為主要的編輯對象，通過不同層細節的編輯，使整體效果更為絢麗或多變。
以工具為主要的編輯手段，通過多個工具的結合，滿足大部分編輯要求。
通過濾鏡的組合，呈現很多不錯的效果，達到平民人士也能參與互聯網炒作的大軍中不能自撥，在當下PS已經由有一個名詞轉為一個動詞了。
對前端來說切圖時注意：優化切圖流程，提升切圖效率，增加崗位競爭優勢
具體經驗分享：修改PS的快捷鍵，使其符合前端操作的習慣，側面提升工作效率。從而擴展，可以修改其它軟體的快捷鍵，整體提升工作效率，增加就業資本或信心。
圖片格式那些事兒
一般新手不太注意頁面的性能問題，而性能容易出現在圖片上面，如何在一個大頁面中處理好圖片是一個前端必備的技能之一。
一般應用比較多的格式有：gif,png-8,png-24,jpg。而新手經常混淆png-8,png-24的區別。
按我經驗4k以下gif,png-8差別不大，4k-100k: png-8,gif占優勢，大於100k果斷是jpg。
png-8不支持alpha透明，在IE6下需要一個JS或透明濾鏡來處理。
圖片格式與設計那點事兒
Web性能優化：圖片優化
2). 提高切圖效率思路之擴展：
從客觀上來講，提高效率的基礎在於豐富的實戰經驗或長年的填坑經歷，本質上軟體的操作差別不是特別大。一個五年經驗或一年經驗的開發人員，使用同樣的工具，主要差別還是一個熟練度。這里只分享我個人積累的一些經驗：
在上一點提到的修改快捷鍵，分享一下我修改的幾個快捷鍵（修改這個快捷鍵，有個缺點，換台電腦可能就不能使用，除非能夠熟悉的記得兩套快捷鍵，即修改過的，或原始的）：
新建圖層: F1
使用頻率比較強，所以放在一個容易的地方。
新建文件：F2
僅次於新建文件，也是使用使用頻率比較高的一個鍵。由於切圖是會從原始圖層上多次的分離圖層，所以這個快捷捷由原來的按兩鍵，變為一鍵。並且有效的分離左右手操作的特點，盡量讓使用頻率高的鍵從左側起步。以下的幾個快捷鍵，都是按照這個思路來進行優化或設置的。
按屏幕大小：F3
按畫布大小：F4
這兩個鍵操作思路主要借鑒於CorelDraw，CorelDraw是一款優秀的平面廣告設計軟體，多用於名片，包裝設計。這是由加拿大Corel產品，他們公司另外一個比較著名的繪畫類軟體是Painter。
存儲為web格式：F5
由原來的5鍵優化為一鍵，還有一個流程是通過Ctrl+Shift+S來存儲圖片，很明顯這個流程步驟過於繁多，很浪費時間。有興趣的可以做一個對比。
裁剪命令：F6
由原來的3鍵優化為一鍵，另外一個是裁剪工具(C)，裁剪工具對整個畫面的破壞力比較大，且不易控制，尤其在PS的版本升級中對這個工具進行了優化。而這個命令相對更為輕量或方便。
F7,F8,F9保持不變
轉換為RGB模式：ctrl+=
因為Gif是索引模式，顏色信息較少，如果要進行編輯，首先得轉換成RGB模式。
從圖層建立組：ctrl+,
由於剛入行的設計師沒有經驗，一個設計稿是沒有分圖層組。其實合理的圖層組可以有效的引導前端，所以這個快捷鍵主要是解決這個問題。
自由變換：F10
變換內容
前端主要還是對現有的PSD文件進行編輯，所以這兩個鍵是可以單獨拿出來的。
變換選區：F11
變換邊框
畫筆：F12
因為前端不像設計師，對PSD只是一個切割，而設計師注重於創造的過程。所以對畫筆工具的依賴不是很大，由原來的F5移動到F12。
復制圖層 Ctrl+ / 原有位置在菜單欄：圖層->復制圖層
這個快捷鍵，可以快速的把原始PSD中的一個或多個圖層復制到一個新文件當中。
演示：
3). 切圖的幾個辦法：
切片(k):
優點：能夠一次切除多個圖片。
缺點：需要後退一步，降低效率，容易產生多餘無用圖片
選區(先用選區工具來畫一個范圍，然後裁剪):
優點：區域精確目標單一
缺點：需要後退一步，容易誤操作
拷貝(Ctrl+C):
優點：拷貝單層的內容到新文件，能夠快速的切除圖片。
缺點：不容易找到相應的圖層。
合並拷貝(Ctrl+Shift+C):
優點：拷貝所有可見層的內容到新文件，能夠快速的切除圖片。
缺點：不容易找到相應的圖層。
③ 做前端開發必需要掌握切圖技能嗎
個人認為前端自己會切圖是最好，現在的』切圖『是一種思路。看到設計稿，腦子里迅速形成』』切圖『『思路，哪些平鋪、哪些用純css實現，哪些用png24，哪些合並, UI的層次是怎樣的, 模板怎麼組織...... ，這是現在的』』切圖」方式，是前端工程師必備的最基本能力。而最終只是把必須分離出來的圖用PS「切」出來。
④ web前端開發需要哪些技能
一、HTML5+CSS3
HTML5和CSS3是通往Web工程師路上必須學會的基本內容，主要包括了解常用瀏覽器和瀏覽器內核;了解語義化的概念;掌握HTML5語法及使用技巧;掌握HTML5常用標簽。掌握CSS語法及使用技巧;掌握DIV+CSS布局方式;掌握常見網頁布局模式。掌握HTML5新布局標簽、多媒體標簽;掌握CSS32D、3D變換、動畫效果;能夠使用CSS3新屬性美化修飾網頁;了解移動端屏幕、移動端瀏覽器、操作系統的不同等內容。
二、JS交互設計
JS交互技術可以賦予頁面一個動態的效果展示，提升用戶的瀏覽體驗，這部分主要是通過JS的學習掌握JavaScript基本語法;掌握常見JavaScript演算法;掌握DOM的各種操作;熟練使用面向對象思想進行DOM編程;掌握JavaScript的高級語法;掌握JavaScript常見兼容性方案。熟練使用jQuery操作DOM;熟練使用和編寫jQuery案例。
三、Node開發
Node.js不僅僅是一個框架，它是一個完整的JavaScript環境，配備了開發人員可能需要的開發工具。所以學好Node是在打通前後端開發中需要掌握的技術。這部分需要掌握ES6的基礎用法和兼容性;掌握ES6的核心語法;使用ES6實現前端模塊化開發。使用Webpack模塊打包器;使用Node.js進行Web服務端開發;掌握JavaScript非同步編程模型;掌握JavaScript模塊化編程方式;使用Node.js操作MongoDB資料庫;獨立開發基於後台介面的動態網站、Ajax數據交互的項目;獨立完成企業網站從前台到後台的基本開發工作。
四、前端框架
前端框架是Web開發人員需要熟練掌握的技能，並且在實際開發中是會被廣泛應用的，那麼對於前端框架方面需要掌握現在主流的Vue、React、Angular等，掌握D3.js進行大數據可視化交互開發;掌握Vue技術棧進行項目開發;掌握React技術棧進行項目開發;掌握使用主流框架開發門戶網站、管理系統、移動Web等客戶端;掌握Webpack項目構建配置流程;掌握Web項目的部署與發布模式;掌握常見網站業務模塊開發等。
五、小程序與APP開發現在移動應用越來越受歡迎，掌握了小程序和APP開發技術可以增強自身競爭力，這就需要掌握小程序的開發基礎;能夠獨立開發小程序項目;能夠掌握Canvas的使用;能夠掌握小程序的部署與發布;能夠掌握小程序開發框架mpvue的使用;掌握第三方AI平台的使用。能夠掌握小游戲開發基礎;能夠獨立開發小游戲項目;能夠掌握小游戲的部署與發布;能夠獨立使用ReactNative開發原生App。
視頻教程：
網頁鏈接
⑤ Web前端工程師必須掌握哪些技能
現在，前端工程師終於前所未有的在web中佔有了一席之地。隨著多設備、瀏覽器和Web標準的演變革命，前端正在成為兼顧邏輯、性能、交互、體驗的綜合性崗位，前端編程也變得越來越有挑戰和意義。
優秀的前端工程師都掌握哪些技能？
1、DNS解析、使用CDN和關於multiple Hostnames as part of resources request.
2、HTTP Headers (Expires, Cache-Control, If-Modified-Since)
3、Steve Souders的所有規則(High Performance Websites)
4、如何解決PageSpeed, YSlow, Chrome Dev Tools Audit, Chrome Dev Tools Timeline顯示的所有問題；
5、何時把任務傳到伺服器和客戶端；
6、緩存，預取和負荷技術的使用；
7、Native JS，知道何時從頭開始做，何時查找別人的代碼，同時可以評估這樣做的優缺點；
8、modern MVC Javascript libraries (e.g. AngularJS, EmberJS, ReactJS), graphic libraries (e.g. D3, SnapSVG), DOM manipulation libraries (e.g. jQuery, Zepto), lazy loading or package management libraries (e.g. RequireJS, CommonJS), task managers (e.g. Grunt, Gulp), package managers (e.g. Bower, Componentjs) and testing (e.g. Protractor, Selenium)的相關知識和用法；
9、CSS標准、modern conventions、 strategies (e.g. BEM, SMACSS, OOCSS)的知識和用法；
10、JS的電腦知識（內存管理，單線程的性質，垃圾收集演算法，超時，范圍，提升，模式）
⑥ 前端要學什麼
web前端開發都包括哪些技術？下面分享一份
1、PC端頁面製作與動畫特效
學習HTML+CSS搭建網頁、CSS動畫特效、PhotoShop切圖等基礎知識，獲得初級Web前端工程師技能，主要進行PC端網頁製作與樣式設計實現，能夠配合UI設計師進行項目開發。
2、移動端頁面製作與響應式實現
講解移動端布局與設備適配、響應式設計與實現等，獲得移動端頁面適配工程師技能，主要進行移動端網頁的布局製作與樣式設計實現。可以適配各種手機尺寸，並能利用響應式進行移動端與PC端適配。
3、JavaScript與jQuery開發
同HTML5基礎知識一樣，JavaScript開發與jQuery開發是職業晉升必備的技能包，獲得中級Web開發工程師技能，主要進行頁面行為交互，實現網站常見特效，加輪播圖，選項卡，拖拽效果等，並能配合UI和後端進行項目開發。
4、HTML5高級框架技術開發
常用的Vue框架開發，React框架開發，Angular框架開發，數據可視化技術。可獲得中級Web前端工程師技能，主要適用框架開發企業項目，實現單頁面應用開發。可以完成復雜的數據交互應用場景，具備獨立開發項目能力。
5、全棧前後端技術開發
Node.JS技術，其他後端技術，如Java或PHP。可獲得高級Web前端工程師技能，主要進行前後端全棧樣式開發，能獨立完成一個中小型項目的前後台，對於網站開發有著非常熟練的編程能力。
可以從零開始，一步步的掌握前端開發的各項相關技能，最終達到企業對初級前端開發工程師、中級前端開發工程師、高級開發工程師等職位的要求。
學web前端一般在2萬左右，4-6個月左右的時間。應該根據自己的實際需求去實地看一下，先好好試聽之後，再選擇適合自己的。只要努力學到真東西，前途自然不會差。
⑦ 前端如何切圖（超詳細，超小白）
身為一名前端開發者，$\color{red}{ 切圖 } $雖然可以被UI或者藍湖等工具解決，但是這也是屬於前端er的必修課。因此，我也是把切圖分享作為我第一篇博客的分享內容。
下面是直接操作的步驟，如何打開psd圖等操作應該也不用我廢話了。
1.第一步就是找到你需要的圖或者icon的圖層，並選中它（如果有疊加需要多選就按住ctrl進行多選）。
2.選擇上方工具欄，選擇 圖層—>復制圖層，
然後會彈出一個編輯框，重點：文檔一定要選擇 新建 ,名稱可以填寫自己需要的，然後點擊確定，就會有新的圖了。
3.因為畫片大小可能不太符合自己的預期，可以選擇上方工具欄 圖像—>裁切，會自動切成合適的大小。
4.到這一步基本上就已經成功了，最後就是保存了。依然是上方工具欄，左上角，文件--->導出--->存儲為web所用格式--->選擇四聯--->選擇PNG-24格式（根據自己需要，我一般使用這個），最後點擊 存儲 就可以了。
⑧ 前端必備的切圖知識
本文以Adobe Photoshop CC 2018 (32 Bit)版本為例介紹，不同版本可能有細微差異。
由於ps默認的是以厘米為單位，因此需要修改為我們前端所用的以像素為單位：
編輯-->首選項-->單位與標尺-->按下圖修改即可：
由於ps默認未啟用標尺及智能參考線等，因此需要自行開啟：
如果左側工具欄未開啟顯示，則也可在此設置讓其顯示；另外需要提的是，信息面板需要一些額外的設置：
信息面板選項設置
以上設置完後，建議保存工作區以保存之前預設的一些設置。
保存工作區方法： 窗口-->工作區-->新建工作區
這里就不解釋了，直接上圖：
選擇移動工具 ---> 勾選自動選擇及選擇圖層選項（不是組） --->選擇預切圖的位置（選擇後會自動跳至相應圖層）--->右鍵相應的圖層--->選擇轉換為智能對象--->啟用選框工具框選相應區域--->復制--->新建文件--->粘貼--->選擇圖像菜單--->選擇裁切--->選中基於透明像素--->確定即可；
此方法比較適合不規則的圖像，比如logo等；
拉好參考線後，選擇切片工具--->點擊 基於參考線的切片
--->文件--->導出--->存儲為web所用格式--->選擇png24--->存儲--->選中所有用戶切片；
由於有很多條參考線存在時會相互干擾，我們可以將原有圖片裁剪成幾個獨立的部分，然後再使用參考線切圖法即可。
文件--->導出（Photoshop低級版本此處是腳本而不是導出）--->將圖層導出到文件--->設置文件類型（PNG24，勾選透明區域、交錯及裁切圖層）
完成後，ps腳本會自動運行。可能耗時比較長。
該方法需要事先設置兩個地方：
a、編輯-->首選項-->增效工具-->啟用生成器
b、文件-->生成-->圖像資源
上述兩個設置完成後，啟用移動工具，選擇需要的切圖，在其圖層上加後綴名，則在原始psd文件目錄下的xxxxxx-assets文件夾中會自動生成相應格式的圖片（甚至svg）。
當然我們還可以在後綴名添加數字來表示圖片的質量。比如logo.jpg8（表示80%的質量），logo.png24，logo.png8等。當然如果不加數字的話則默認取最大值；
不僅如此，我們還可以設置生成後的大小倍數 比如命名 300% logo @2x.png 則表示會在原有基礎上放大三倍大小導出。這一點對視網膜屏很有用。
⑨ 網站前端切圖是什麼意思，主要做什麼
我們做網站的時候是要根據程序化來進行實現的，特別是做一個精品網站的時候，首先第一步就是設計網站，網站設計好之後即是切圖，切圖完就要加入div+css實現效果圖，以及flash動畫等功能了，切圖完成之後才到下一步開發程序，這就是從前端的設計、切圖到網站程序開發的一個過程。
網站的好壞，前端很重要，這是我們重視的一部分，前段必須把div+css做好，不能有多餘的代碼程序在裡面，前端要是沒有做好，往後的程序很影響seo的推廣，這是很多企業做網站的時候忽略掉的問題，我們應該一手抓，俗話說的好，贏在起跑線上，只有系統化的前端div+css，設計，切圖功能實現之後才有後面的程序製作，很多網站前端div+css做的亂七八糟的，不說兼容性行不行了，就是網路蜘蛛來獲取頁面的時候都很排斥的，所以說，切圖是一個精品網站必備的，重中之重，不可忽視。
我們經過美工的設計頁面，從每一張圖片的整合到功能的實現都是切圖來做的，切圖人員必須具備有細心的品性，要嚴格要求每一步的到位，否則將會給後面的程序帶來麻煩，一個精品網站的建設是要分為四個大的步驟進行的
第一、網站設計
第二、網站切圖+div+css+功能美化
第三、網站程序製作
第四、後台的調用
⑩ web前端 切圖
正常來說，挺大，但也分公司
現在的公司有的分專做css與js的。
樓主也可以考慮javascript工程師