① 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工程师