Ⅰ 做前端開發必需要掌握切圖技能嗎
前端開發最重要的基礎就三門技術 jvascript+css+html，js是其中最重要的
ps可以不掌握，工作的時候一般只需要會切圖就行，而且很多公司會讓作圖的人切好圖，你可以不考慮
flash完全不用理會，pc上flash日漸消沉，無線上早就死光光了
我想說的 最重要的，就是基礎，深入掌握一下javascript和css基礎，這兩個是無論是面試相關，跟以後的項目開發，都是最息息相關的。如果時間不夠的話，重點掌握javascript，推薦兩本書，你選其中一本就行，一是犀牛書(javascript權威指南)，另外一本是javascript高級程序設計(尼古拉斯大神的書，目前第三版)，重點掌握js語法基礎，ajax，面向對象相關(基於原型的繼承等高級技術)。
css推薦 css權威指南一書，css學習是很枯燥的，一般在項目過程中才能不斷掌握，如果沒有條件，可以重點學一下選擇器，定位，盒模型和浮動這幾章。
jquery在很多公司或者整個前端界用的居多，但在很多大公司面試時(像我在網路面試時，人家都豪不理會)，因為這些公司重視的是基礎，項目經驗可以培養，但基礎需要花狠勁才能掌握牢固。這些框架對你現在的作用是熟悉一下源碼，看看它們怎麼實現的。我也是大三才學的前端，並且邊讀框架邊學的js，如果你對這樣學感興趣，推薦你讀一下prototype.js的源碼。jquery的源碼太過講究技巧，不太適合初學者去讀。
最後談一下准備作品這塊，去年開始前端界衍生了一個新的職位，叫無線前端開發工程師，說白了就是在iphone和android手機上做網站，用到的技術基礎還是js跟css，但不需要像pc那樣考慮兼容性(IE6是很惡心的)，最重要的，就是對html5和css3支持度比較高，這個職位目前還是很熱門的，你可以往這個方向發展，掌握好基礎後學這些新技術還是很容易的。利用css3和html5寫一些demo絕對可以讓考官眼前一亮。
如果你學了一學期掌握了基礎，可以嘗試聯系我，網路還是很歡迎熱愛技術的人的，特別是女生(嘿嘿)，最後祝你成功。
Ⅱ 做前端在mac上使用什麼切圖工具好
安裝藍湖插件進行切圖，PS、Sketch、XD 幾種工具都支持，用藍湖切圖效率很高，一鍵搞定，自動生成多格式，開發可以直接選擇下載需要格式的切圖進行使用，還能復制代碼進行開發，太贊了。
Ⅲ XD 怎麼配合前端切圖
切圖本應該是前端工程師的工作吧，設計師切的圖往往不專業，他們不知道把圖片壓縮，不知道把圖片合並，更不知道給圖片更好命名，這樣前端拿到切圖還是要重新處理。優秀的設計師會把圖層分類做的很好，圖層按照模塊化設計，很方便前端工程師來使用的。不會切圖的前端不是合格的前端。圖層亂七八糟的設計師也不是個合格的設計師
Ⅳ 前端工程師，請問切圖是什麼意思我會寫div﹢css已經比較熟練了，js也、jquery這些也學完
是的，做前端必須必須會切圖，但是 切圖 就是PS裡面的一步操作，十分簡單。QQ截圖和PS切圖是動作不一樣，但是基本上是一樣的，QQ是截取，而PS裡面有個工具張的像 刀 ，拿著這個刀在圖上面畫，所以叫切圖。
選擇選中的切片，在點擊保存，就這么先切，在選擇，在保存，就完成了切圖，但是PS切圖比qq截圖用著爽多了，因為在PS裡面可以將圖片放大N倍，在切，在小的圖也能切，而且可以一次切很多，也能一次保存很多，所以比QQ截圖用著爽。總體來講比QQ截圖專業吧。
Ⅳ UI設計師在完成界面設計後，切圖都改切哪些
網頁設計好後的切圖是將設計稿切成便於製作成頁面的圖片，並完成html css布局的靜態頁面，有利於交互，形成良好的視覺感。通俗來講，把一張設計圖利用到切片工具，把自己所需的切成一張張小圖，然後用DIV CSS完成靜態頁面書寫，完成CSS布局。
設計好的網頁都需要切圖，主流的是dreamweaver、photoshop軟體，還有sketch、firework等，低端QQ切圖，網頁切圖等。切圖為後端編程者帶來方便，提高效率，讓網頁稿有了交互性，實現平時看到的各種各樣的功能，畫面瀏覽速度快，有利於優化。
(5)前端切圖大全擴展閱讀：
一般我們從設計師那得到的都是psd文件，裡面有幾十或者上百個圖層，一般會根據內容分好文件夾，有文字有圖片，有的只在特殊情況下顯示的，這時候就需要根據自己的需要導出不同的圖。
切圖的時候也會有許多考慮，比如把哪些內容壓縮成一張圖片，什麼時候用透明背景PNG，什麼時候用CSS Sprite（把瑣碎的小圖比如按鈕、logo復制到一張透明背景的圖上然後保存為一張圖，再用background position去提取。）文字是切成圖片，還是復制到HTML里。
一般情況下都不會把文字切成圖，除非用到比較特殊的字體或者變形等等，然後即使是photoshop保存為web格式導出的圖，有時候尺寸也是很大的，特別是PNG，這時要使用一些專業壓縮工具進行二次壓縮。
當然有些有前端經驗的設計師會把切好的圖片發給你，這樣就可以直接開始寫HTML和CSS了，但是建議還是盡量自己切，掌握熟練的切圖技巧也是一個前端應該有的技能。
參考資料來源：搜狗網路-切圖
搜狗網路-靜態頁切圖
Ⅵ 前端如何切圖（超詳細，超小白）
身為一名前端開發者，$\color{red}{ 切圖 } $雖然可以被UI或者藍湖等工具解決，但是這也是屬於前端er的必修課。因此，我也是把切圖分享作為我第一篇博客的分享內容。
下面是直接操作的步驟，如何打開psd圖等操作應該也不用我廢話了。
1.第一步就是找到你需要的圖或者icon的圖層，並選中它（如果有疊加需要多選就按住ctrl進行多選）。
2.選擇上方工具欄，選擇 圖層—>復制圖層，
然後會彈出一個編輯框，重點：文檔一定要選擇 新建 ,名稱可以填寫自己需要的，然後點擊確定，就會有新的圖了。
3.因為畫片大小可能不太符合自己的預期，可以選擇上方工具欄 圖像—>裁切，會自動切成合適的大小。
4.到這一步基本上就已經成功了，最後就是保存了。依然是上方工具欄，左上角，文件--->導出--->存儲為web所用格式--->選擇四聯--->選擇PNG-24格式（根據自己需要，我一般使用這個），最後點擊 存儲 就可以了。
Ⅶ 網站前端切圖是什麼意思，主要做什麼
我們做網站的時候是要根據程序化來進行實現的，特別是做一個精品網站的時候，首先第一步就是設計網站，網站設計好之後即是切圖，切圖完就要加入div+css實現效果圖，以及flash動畫等功能了，切圖完成之後才到下一步開發程序，這就是從前端的設計、切圖到網站程序開發的一個過程。
網站的好壞，前端很重要，這是我們重視的一部分，前段必須把div+css做好，不能有多餘的代碼程序在裡面，前端要是沒有做好，往後的程序很影響seo的推廣，這是很多企業做網站的時候忽略掉的問題，我們應該一手抓，俗話說的好，贏在起跑線上，只有系統化的前端div+css，設計，切圖功能實現之後才有後面的程序製作，很多網站前端div+css做的亂七八糟的，不說兼容性行不行了，就是網路蜘蛛來獲取頁面的時候都很排斥的，所以說，切圖是一個精品網站必備的，重中之重，不可忽視。
我們經過美工的設計頁面，從每一張圖片的整合到功能的實現都是切圖來做的，切圖人員必須具備有細心的品性，要嚴格要求每一步的到位，否則將會給後面的程序帶來麻煩，一個精品網站的建設是要分為四個大的步驟進行的
第一、網站設計
第二、網站切圖+div+css+功能美化
第三、網站程序製作
第四、後台的調用
Ⅷ UI中的「切圖」是什麼意思為什麼要切圖
切圖是設計師交付給開發的產物之一，設計稿完成後，設計師需要將其切成便於製作成頁面的圖片。但因為開發經常需要不同平台不同尺寸的切圖，如果全部由UI來做，不僅費時費力，可能還會因為細微的差距造成開發不能很好的還原設計稿。
所以可以用摹客之類的專業工具來自動切圖。UI把Sketch、Adobe XD、PS的設計稿進行切圖標記，上傳至摹客後，開發就可以自主下載不同平台不同尺寸的切圖和使用了。
(8)前端切圖大全擴展閱讀：
切圖用於完成html+css布局的靜態頁面，有利於交互，形成良好的視覺感。通俗來講，把一張設計圖利用到切片工具 把自己所需的切成一張張小圖，然後前端開發用DIV+CSS完成靜態頁面書寫，完成CSS布局。
切圖大家都有個誤區，覺得切圖就是把圖片切出來，其實並不完全是這樣，首先處理的是什麼類型的頁面圖片型（EDM 或活動著陸頁等）、圖文型（門戶網站或電商網站等）、界面型（Web App 等），把圖片切出來這個過程是叫切片。
Ⅸ 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所有格式」也好，自由發揮吧。
這個方法可能只能保存一個圖標，
有的人說我好幾個圖：例如文字+圖片都有咋弄？
那就切圖唄！
那還要糾結的話那就合並圖層吧！