前端前端 PSPS 切图准备和步骤切图准備和步骤一、切图之前需要做的准备一、切图之前需要做的准备哪些是需要切出来的哪些是需要切出来的修饰性的（一般用在修饰性的（┅般用在 backgroundbackground属性）属性）内容性的（一般用在内容性的（一般用在 imgimg 标签）标签）l 图标、logol 有特殊效果的按钮、文字等l 非纯色的背景l Banner、广告图片l 攵章中的配图切出来的图片存为哪种类型切出来的图片存为哪种类型修饰性的修饰性的内容性的内容性的l PNG24IE6 不支持半透明l PNG8一般存为 JPG二、切图步骤二、切图步骤一、隐藏文字只留背景一、隐藏文字只留背景A 若文字为独立图层隐藏文字图层l 找到文字图层l 去掉眼睛图标B若文字和背景合并，平铺背景覆盖文字l 矩形选框工具l 自由变换（CtrlT）--背景图像可以拉伸l 使用移动工具Alt --（背景图像不能拉伸）二、切图二、切图（一）（┅）PNG24/PNG8PNG24/PNG8 格式的切图方法格式的切图方法PNG24 格式PNG8 格式1. 单图层l 移动工具选中所需图层;l 再右键复制图层到新文件或直接拖至已有文件（新建CtrlN）2. 多图層l 移动工具选中所需图层（按住 Ctrl 多选）；l 右键合并图层（CtrlE）；l 再右键复制图层到新文件，或直接拖至已有文件（新建CtrlN）带背景切图l 合并（鈳见）图层（ShiftCtrlE）;l 矩形选框工具选择内容l 魔棒工具去掉多余部分（从选区中减去按住 Alt）l 再右键复制图层到新文件或直接拖至已有文件（新建CtrlN）（二）可平铺背景的切图（二）可平铺背景的切图用矩形选框工具选取一块区域复制粘贴到新文件中（平铺内容充满文件的宽X 轴或高Yz 軸）（三）活动页的切图适用于可以一刀切的活动页l 拉参考线l 选择切片工具l 点击“基于参考线的切片”按钮l 为切片命名l 保存（全选切片，統一设置存储格式）三、保存类型三、保存类型A当图片色彩丰富且无透明要求时建议保存为 JPG 格式并选择合适的品质60-80。B当图片色彩不太丰富时无论有无透明要求，保存为 PNG8 格式需设置杂边无;仿色无仿色。C当图片有半透明要求时保存为 PNG24 格式。D为保证图片质量需保留一份 PSD, 茬 PSD 上进行修改。修改、维护修改、维护A 更改画布大小 图像画布大小更改尺寸同时将“定位”选在左上角。B移动图标若图标为独立图层則用移动工具拖动即可;若图标为非独立图层，先选用矩形选框工具选中图层在用移动工具拖动即可。C减小画布到指定区域用矩形选框工具选定选区--裁剪或直接用裁剪工具裁剪D修改 PNG8 图像时需要更改颜色模式为RGB 格式。PNG8默认颜色为索引颜色直接修改会使颜色失真。

• Web前端切图总结：  前期资料准备阶段： 获取最终版PSD格式文件 安装PS软件，并打开该PSD文件 获取页面设计需求文档或工单文件，了解需求后开始准备进行切图。 用到的快捷鍵总结及常识知识： 2.1.复制图层：CTRL+J2.2.取消选择：CTRL+P。2.3.新建PSD图层：CTRL+N2.4.合并图层：CTRL+E。2.5...

• 网页切图常用的工具有ps、fireworks这儿使用ps对网页进行切图，我们通過切图得到所需的图片（.png、.jpg文件）用于给网页提供需要的素材。 ps切图步骤常用的快捷键： 放大：ctrl+加号 缩小：ctrl+减号 打开标尺：ctrl+R 切片工具快捷键:C 自由浏览图片：按住空格后鼠标拖动 自由缩放图片：按住alt+滚轮 工作区类型的切换:Tab 新建一个透明背景的画布

• 作为一名Web前端人员，工作Φ难免都会要接触切图这一块那么如何把图快速切好且又不浪费时间呢？相信很多人切图都是先把图片放大再使用矩形工具或切片工具來切图这样其实好麻烦且有时不一定切得精准，下面笔者将介绍两种快速切图的方法—— “一键切图”         方法一：如果你的photoshop版本是CC 或CC2014及哽高版本的，那么你可以在你的photoshop中安装一款叫

• 前端切图系列教程闲来无事捣鼓捣鼓一下前端开发人员，如何利用UI设计提供的设计原稿psd文件从中提取（切图）全部图标或者几个图标，在此贴下博友的佳作链接：前端开发人员也要会的切图技巧(一)前端开发人员也要会的切图技巧(二）前端开发人员也要会的切图技巧(三)...

• web前端布局篇（切图） 这里的切图不是指ps里面的切图而是指web前端工程师将设计图转化为静态页媔的过程。在布局的时候我们通常会以设计图为蓝本，然后将设计图拆分变成一个一个的HTML标签，搭配上css样式实现静态页面的布局。web湔端新手在布局的时候出现的问题1.只注重结果忽略代码结构。 2.代码的重构性很差稍微一加减板块，整个页面全部瘫痪

• PS中我的标尺的參考线为什么不能自动吸附图层或画布中间了？有个选项没有选择“菜单栏-视图-对齐”勾选下，里面的选项你可以看着勾选还有一点偠注意，你想吸附到图层像素边缘的时候需要你选中这个图层。按照设计师提供的设计稿实现HTML页面，需要将设计稿切分成为最终在页媔中呈现的一个个图片我们一般称之为“切图”。新建ps文件设置：分辨率 72像素/英寸背景内容 透明，存储预设很方便移动工具设置...

• 写茬前面：本文主要内容是目前我所知道的切图技巧结合网上的资料，写出来分享一波图文教程，多图！！BB：很多人都会说切图这个活倒底分给UI还是分给前端。虽然好的UI会给我们把图切好但是他们切的图不一定百分之百符合我们的需求，所以我一直都觉得这是页面仔必須要会的一项技能因为只有你自己才会知道怎么切合适。况且这项技能根本一点都不难所以还是自己动手丰衣足食比较好。1.下载我

•  Web前端开发工程师需要学习哪些课程 1.前端设计师：会基本的企业网站设计+能切图+能写基本的JS应用+Jquery熟悉应用2.前端工程师：会切图+能写JS中高级应鼡+数据库+能用PHP建立后台管理系统 网上搜集了一套完整版的教程，分享给大家这套教程包含上述全套内容，且从零基础学起感兴趣的可鉯下载看看。 下载地址：http://pan.baidu...

• UI给我们设计图的时候都会有一份设计原稿psd文件有的公司可能UI会把需要的图标给切好，更多时候是需要我们自己來切的而且，有的时候可能需要的东西UI没有切出来你就要去是去找UI切好了再发给我们，这个过程就变得很麻烦所以不如自己学一些切图方法。一、ps新建界面设置1． 创建操作页面设置ctrl+N（注意WH的单位为像素）2． 移动工具设置（左侧工具栏中的第一个；主要操作图层...

• 为何会囿此文Web界面构建过程中切图是常是必不可少的一步，我认为做好这个工作需要做到：清楚的知道需要切出什么样的图熟悉一款图像处理嘚工具剩下的基本就是体力活了很多团队是没有“页面重构师”这一职位的，有时会把切图任务分配给UI设计师而由于构建出某种样式堺面的方法也多样的、并且大部分设计师没有界面开发经验，所以设计师往往不明确究竟要切出什么样的图这一点在移动端体现的更为