自动切图

前面的话

  随着photoshop版本的不断升级,软件本身增加了很多新的功能,也为切图工作增加了很多的便利。photoshop最新的版本新增了自动切图功能,本文将详细介绍photoshop的这个新功能

初始设置

  当然首先还是要进行一些首选项设置

  【1】在编辑 -> 首选项 -> 增效工具中,选中启用生成器

  【2】重启photoshop,在文件 -> 生成中,点击图像资源在文件 -> 生成中,点击图像资源

    [注意]只有在photoshop中有文件打开的情况下,该项才可以点击

自动切图

png

  比如,我们要将收藏前的小图标切出来,先找到该图标对应的图层或组,再将其重命名。重点是给其添加后缀。如果想要保存png8格式的图片,后缀名写为.png8。类似地,如果要保存png24格式,则后缀名写为.png24

  此时,图像的存放目录下会多出一个assets文件夹,里面会存放刚才保存的图片sc.png

jpg

  类似地,jpg格式图片也是如此切法。比如我们要把脚丫的图片切出来

  实际上,jpg格式的图片存储时,是有品质选择的,从0-100。如果我们把后缀名写为.jpg6,则代表品质为60。如果后缀名为.jpg,则表示品质为100

  我们先打开原来切的那张图片,大小为13.6k。将其后缀名改为.jpg5后,大小变成了4.52k

2倍图

  如果我们需要适应视网膜屏幕,切出2倍图时,也可以使用自动切图的功能。只需要将其重命名为200% 图片名称 @2x.jpg就可以

  首先,我们先查看脚丫图片的尺寸是200*200,当我们将其设置为200% jy @2x.jpg5后,再查看脚丫图片的尺寸变成了400*400,也就是生成了2倍图

  类似地,3倍图也是相似做法

photoshop自动切图的更多相关文章

  1. 前端工程师技能之photoshop巧用系列扩展篇——自动切图

    × 目录 [1]初始设置 [2]自动切图 前面的话 随着photoshop版本的不断升级,软件本身增加了很多新的功能,也为切图工作增加了很多的便利.photoshop最新的版本新增了自动切图功能,本文 ...

  2. Photoshop如何实现UI自动切图?

    切图严格来说并不是UI设计师的工作, 而是前端工程师的工作,指的是将UI设计师的设计(大部分为photoshop创建的PSD文件)转化为界面(网页或窗体等)所需要资源的过程.切图是衔接UI设计和应用程 ...

  3. 利用PS自动切图、支持svg且支持icoMoon——再也不用四处去转格式了

    今天想导出svg格式的图片支持webFont,结果AI打不开了,文件好像损坏了,于是就想办法在PS里面导出. 网上搜索到一篇文章,腾讯的 http://isux.tencent.com/ps-phot ...

  4. Sketch 和 PS中的设计图如何实现“自动切图”?

    切图是很多UI设计师的一项日常工作.平时做完设计图,要将设计稿切成便于制作成页面的图片,并标注好尺寸和间距,交付给前端来完成html+css布局的静态页面,有利于交互,形成良好的视觉感. 但有的认为前 ...

  5. Photoshop之切图

    基本(繁琐)操作: 切JPG图(即带背景的图): 1.         选切片工具(另外,切片选择工具能选择切片和删除切片),切 2.         存储为Web所用格式(快捷键Ctrl + Shi ...

  6. 【随笔】Photoshop简单切图

    一.首先准备一张需要切割的图: 二.打开Photoshop,在ps里打开这张图片: 三.在界面的左边选择切片工具: 四.根据需要,鼠标点住上方和左边的标尺拖动,给图片加上分割辅助线: 五.用切片工具点 ...

  7. photoshop 快速切图

    发现一个详细好方法:http://blog.csdn.net/zhangxiaowei_/article/details/42143307 具体如下:

  8. 使用Photoshop切图的三种方式

    PhotoShop切图的三种方式 1. 原始切图 (1)选择工具栏中的切片工具 (2)找到要切片的元素,在右侧的图层框中,使元素背景隐藏,然后用切片工具选择需要切片的元素     (3)导出为web常 ...

  9. photoshop 切图技巧

    前端切图技巧 手动切图 参考线切图 精准切图 自动切图 原文地址 http://www.cnblogs.com/w-wanglei/p/5598336.html

随机推荐

  1. 利用CSS3的transform 3D制作的立方体旋转效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. JavaScript之JS实现动画效果

    在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具.但是有一个应用领域是目前的CSS无能 ...

  3. 使用 NuGet 管理项目库

    使用 NuGet 管理项目库 Phil Haack 本文转载自:http://msdn.microsoft.com/zh-cn/magazine/hh547106.aspx 无论多么努力,Micros ...

  4. android入门——UI(3)

    Spinner控件   ListView控件 一.Spinner控件 点击Spinner会弹出一个包含所有可选值的dropdown菜单,从该菜单中可以为Spinner选择一个新值. 有两种指定数据源的 ...

  5. 用for循环遍历DataTable中的数据

    for (int i = 0; i < dataTable.Rows.Count; i++) { for (int j = 0; j < dataTable.Columns.Count;  ...

  6. Asp MVC 中处理JSON 日期类型

    注:时间有点忙,直接copy 过来的,要查看原址: http://www.developer.com/net/dealing-with-json-dates-in-asp.net-mvc.html I ...

  7. BUAA 更大公约数

    题目链接 给一个n*m的矩阵, 删除里面的一行一列, 使得剩下的数的最大公约数最大. 一个格子(x,y), 先预处理出(1,1)到这个格子的内所有数的最大公约数, 同理处理出(1, m), (n, m ...

  8. poj 3740 Easy Finding 精确匹配

    题目链接 dlx的第一题, 真是坎坷..... #include <iostream> #include <vector> #include <cstdio> #i ...

  9. 【LeetCode题意分析&解答】43. Multiply Strings

    Given two numbers represented as strings, return multiplication of the numbers as a string. Note: Th ...

  10. Linux Apache绑定多域名

    1 网上查到资源不符 网上查到的Apache绑定域名都说要修改http.conf文件,但是我的服务器上的apache是通过apt-get install安装的,安装方法应该是没错的,但是通过find ...