切图

★ 传统网页切图的两种实现办法 1.直接利用“切片工具”； 2.设置“参考线” → “切片工具” → “基于参考线的切片”； 提示 为了 切图的 提高速度和准度，一般会将网页的psd图片 分割成不同的部分，然后进行局部划分切片 ； 保存：制作好切片之后，ctrl + shift + alt + s （ 快捷键 ）“存储为Web所用格式”，图片保存一般选择“PNG-24” ★ 精准切图 △ 方法 1 利用“脚本” 是一种比较快捷准确的切图方法（PS CS6以上都支持），是将所有图层中的图像全部转储出 来。（转储的图片格式还可以是svg，WebP等） 1，自动化切图，省时省力；2，计算机自动计算，尺寸更准确； 关键操作：文件 → 脚本 → 将图层导出到文件。。。 优点，可以一次性地批量将多图层的psd文件导出，同时可自定义的图片格式和图片名称。 △ 方法 2 利用“生成器”生成“图像资源” （PS CC 开始支持自动化切图功能） 关键操作（三步走）： a.编辑 → 首选项 → 增效工具 → 生成器； b. 文件 → 生成 → 图像资源； c.选中目标图层 → 更改名称为“ name.文件格式 ”就会自动 在assets文件夹内生成该图层内相关图片指定格式的文件 完成操作设置以后，我们回到打开的psd文件所在的文件夹，会发现自动生成了一个assets 文件

PS参考线及其辅助 视图-->新建参考线 也可以快捷键Ctrl+R，显示区的上侧和左侧就会出现标尺。任意点选中，并拖动标尺，便会出现浅蓝色的辅助线。只有在移动工具下，才能拖动某一条参考线。 删除参考线的方式，哪里来的回哪里去，拖动参考线把它移动到标尺处。上面的标尺对应的是水平参考线，左边的标尺对应的是竖直参考线。 新建参考线的快捷键：Alt+V+E Alt+V是打开视图菜单，不放，然后再按E就是新建参考线 对于规则图形，选中图层后，再拖动参考线，默认参考线会吸附到图层边缘部分。参考线所在的地方都是实在的东西。对于不规则图形，边缘都是虚化的，所以拖动参考线时，会找到实在的地方进行吸附。 把参考线隐藏：Ctrl+；，再按Ctrl+；显示参考线。 PS传统切图(不精确，误差不可避免) 切图和切片 鼠标点击选择切片工具，然后在psd素材上选取需要切片的区域。目前HTML，css等代码已经可以实现很多的页面效果，但有些我们还是倾向于使用图片。对于一个网站而言，往往需要切取很 多的图片。比如电商网站，可能需要切几百乃至几千张图。如果一个个选取那实在太麻烦。比较简便的做法，是先设定参考线。针对每一部分都设置参考线。再次点击选择切片工具，菜单栏上 方有一个按钮，基于参考线的切片。点击后，整张图就会被切成很多的小图。有些切图我们并不需要，而且如果参考线密集，切片后看上去也比较混乱

1、从psd中获取资源 2、基本了解 3、简单的图片操作和调整 4、对自己的审美提高 一、界面设置： 1、新建设置：ctr+n; 预设：Web,大小Web(1920*1080) 背景：透明 2、移动工具设置： 右上角选择自动选择，后面选择图层。在后面选中可以移动。trl单机选中（自动选择未选） 3、视图设置 智能参考线，标尺选中。 窗口：打开信息，字符，信息右侧设置，修改单位像素，颜色RGB，文档尺寸大勾。编辑，首选项中：单位标尺修改称像素。trl左击，在信息，字符中显示一些信息。 窗口=》工作区=》新建工作区=》Web切图存储 二、photoshop基本操作： 1、简单的工具操作： 工具：像素移动，选中后会在属性菜单栏中出现相应的属性，更具属性进行设置。 选区：M选中图层，填充颜色，选中颜色，右击填充。选取属性常见的*，+，-可多选。可扩展的属性。按住shit键，成为正方形或圆，但先放鼠标，再放shit键。alt圆形，alt+shit组合成正圆。画一个选区后，增加选区按shit会默认增加选区，放开鼠标再放开快捷键，减少是alt. 套手选区：按鼠标左键走，几种选择的使用。 快速选择工具：括号是快捷键。不断地托就可以选中。 采选工具：出现一些晓得可控角，可拖动，单机对勾，其他的会去掉。 选中选区，按住ctr,单机裁剪工具，按回车可选择选区。 吸码工具：吸取颜色。 2、图层的原理： 3

1.打开要切的图片（常规打开/ctrl +o) 2.选择切片工具（ctrl + /- 可控制图片放大/缩小） 3.用切片切出想要的区域，右击编辑切片 4.存储为web所用格式，点击存储，选择仅限图像&所有用户切片（不然会有好多空白图） 5.ok 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。 tips :存储的时候选择所有用户切片！所有用户切片！！，不然。。。有好多空白图 切图技能get~ 来源： https://www.cnblogs.com/makeupforever-carrie/p/10904327.html

前端photoshop最常见问题： 字体单位换成像素 ：按下ctrl+k调出首选项，选择单位与标尺，在里面把文字单位由点改为像素就行了。不过要注意的是，点是很多软件里面文字的默认单位。像素是虚拟单位，如果以它做基本单位在输出的时候可能会出问题。 切雪碧图 ：接着魔棒或者快速选择icon图，点击裁剪，把所有的小icon图都拖拽到一个新建的透明的图层中，然后用标尺定位，回车确认裁剪，在文件-储存为web所用格式，预设PNG-24，存储即可。 切海报大图 ：隐藏其他图层，只选择可视海报图所在的组，如果图上有文字之类的就会是一个组，隐藏组中不需要的内容。将整个组复制到新的文档，然后合并为一张图。接着魔棒或者快速选择所需要的图，点击裁剪，自动得到最合适的大小，回车确认裁剪，在文件-储存为web所用格式，预设PNG-24，存储即可。 切片切图 ：用切片把需要的图片都裁剪出来，然后去掉背景，剪切，选择储存为web所用格式。 切按钮图 ：按钮是渐变色无法用颜色设置的，需要保存1px宽度图片然后用平铺来完成的图，在切图时裁剪好后选择图像-画布大小-width为1即可。 切多图层的图 ：要么合并它们拖拽到新建的透明的图层中，裁剪，保存。要么直接用裁剪保存。 获取背景颜色 ：选择吸管工具，右击保存十六进制代码。 自动选择图层 ：在移动工具下选择左上角自动选择-图层。ctrl+鼠标左键。 仅选择一图层

这里我们首先说的就是网页切图的需要 第一种情况 前提是只有一个图层 1、那么可以用工具栏里的切片工具进行切图， 2、切好之后，存成web格式的时候，把图片所在切片的格式选成PNG 第二种情况 1、可以每个图片层单独显示单独存有点麻烦 第三种情况 前提是单独保存按CTRL+N新建一个文件保存 1、先用切片工具切好范围截入选区 2、CTRL+C复制 截好的选区 3、CTRL+N新建文件，保持刚才复制的尺寸别调，直接确定新建 4、CTRL+V粘贴，然后保存PNG。 一、视图设置 1、打开页面后。ctrl+n新建 弹出窗口可以设置页面大小、透明度之类的，还可以存储预设 2、视图设置 右边保留图层，还有历史记录，其他基本关闭 后打开页面窗口，选中信息和字符，其他属性关闭 3、菜单栏上的编辑——》首选项——》单位与标尺——》单位都改为像素 4、按ctrl键单击选中的图层，可显示width和height的高度 5、要保存以上4点设置的界面 窗口——》工作区——》新建工作区——》名称可以设置为（web切图）——》捕捉全部勾选 二、photoshop的基本操作 1、简单工具的操作 工具栏： 1、移动工具 快捷键：V 选中移动工具，属性栏——》有自动选择和组或者图层，去掉自动选择并选中组即可 ctrl可以选中多个图层，可操作对齐方式 2、选取工具之——矩形或椭圆选框工具 顾名思义选中一块区域(CTRL

文章目录 4.4. photoshop批量切图技巧 photoshop批量切图技巧 4.4. photoshop批量切图技巧 photoshop批量切图技巧 切图，就是从效果图中把网页制作需要的小图片裁剪出来。 1、使用psd格式并且带有图层的图像切图 2、在图像上用切片工具切出需要的小图 3、双击切片，给切片命名 4、将需要制作透明背景图像的切片的背景隐藏 5、执行菜单命令 存储为web所用格式 6、点选切片，设置切片的图片格式 7、存储切片，选择“所有用户切片”，点存储(多个切片会自动存到所选文件夹中的images文件夹中) 来源： CSDN 作者： 汪雯琦 链接： https://blog.csdn.net/qq_35456045/article/details/104116731

文章目录 4. Photoshop 课程介绍 4. Photoshop 课程介绍 学习使用Photoshop的基本使用，以及Photoshop中关于切图这一块的知识，目的是能熟练使用Photoshop查看UI设计师的设计效果图，同时利用Photoshop切图来制作专业html页面。 来源： CSDN 作者： 汪雯琦 链接： https://blog.csdn.net/qq_35456045/article/details/104116370

1. 用CTRL + ++ 放大图像，ctrl + --缩小图像 将图像放大至每像素（最大） 2.用标尺将要切的图形框住，如果面板上没有标尺，请在“视图”菜单选中标尺即可 3.用工具栏里的“矩形选框工具” 将要切的图形按标尺划分的框全部选中 4.用ctrl + shift + c 合并复制 选中的图形 5.用ctrl +n新建文件，该文件尺寸已按刚被复制的图形尺寸设定，注意选择图像为透明状态 6.在新建文件内按ctrl + v 粘帖到新文件上 7.用ctrl + shift + alt + s 或者在“文件”菜单选择“存储为web所有格式” 8.最后选择需要的图片格式保存即可 另外如果需要切的是一个图层 在选中环节，按住ctrl ，点击图层面板中该图层， 即出现选中边框 然后按ctrl + shift + c 复制，其他步骤相同 来源： https://www.cnblogs.com/jacktu/archive/2008/11/13/1332513.html

几个概念： 1） 屏幕密度（dpi） ：dot per inch，即每英寸像素数。 ldpi（120），mdpi（160），hdpi（240），xhdpi（320） 计算方法： 以480x854,4.0inch手机为例，其对角线为4.0inch，对角线的像素数为：(480^2 + 854^2)开根号 = 979. 所以其dpi = 979 / 4 = 245,约为240 2）屏幕尺寸：对角线长度。有small，normal，large，extra large 3）方向：横屏和竖屏 4）分辨率：一个物理屏幕上总的像素点数，如480x800等。我们应用中并不使用分辨率这个概念，主要是dpi和尺寸 5）dp（density-independent pixel）独立像素单位。一个抽象概念，用来定位UI布局，包括尺寸和位置。 1、可以在android工程目录res下有四个文件夹，主要是为了支持多分辨率的图片 drawable-hdpi drawable-mdpi drawable-ldpi drawable-xhdpi 当设计给出切图时，我们首先需要明确一点，设计给出的切图是在什么尺寸下给出的。如果是480x800的切图，则应该放入drawable-hdpi目录下，如果是320x480的切图，则应该放在mdpi目录下。如果是720x1280的切图，则应该放在xhdpi目录下。 当使用该图片时