Ⅰ 做前端开发必需要掌握切图技能吗
前端开发最重要的基础就三门技术 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所有格式”也好，自由发挥吧。
这个方法可能只能保存一个图标，
有的人说我好几个图：例如文字+图片都有咋弄？
那就切图呗！
那还要纠结的话那就合并图层吧！