photoshop自动切图
自动切图
前面的话
随着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自动切图的更多相关文章
- 前端工程师技能之photoshop巧用系列扩展篇——自动切图
× 目录 [1]初始设置 [2]自动切图 前面的话 随着photoshop版本的不断升级,软件本身增加了很多新的功能,也为切图工作增加了很多的便利.photoshop最新的版本新增了自动切图功能,本文 ...
- Photoshop如何实现UI自动切图?
切图严格来说并不是UI设计师的工作, 而是前端工程师的工作,指的是将UI设计师的设计(大部分为photoshop创建的PSD文件)转化为界面(网页或窗体等)所需要资源的过程.切图是衔接UI设计和应用程 ...
- 利用PS自动切图、支持svg且支持icoMoon——再也不用四处去转格式了
今天想导出svg格式的图片支持webFont,结果AI打不开了,文件好像损坏了,于是就想办法在PS里面导出. 网上搜索到一篇文章,腾讯的 http://isux.tencent.com/ps-phot ...
- Sketch 和 PS中的设计图如何实现“自动切图”?
切图是很多UI设计师的一项日常工作.平时做完设计图,要将设计稿切成便于制作成页面的图片,并标注好尺寸和间距,交付给前端来完成html+css布局的静态页面,有利于交互,形成良好的视觉感. 但有的认为前 ...
- Photoshop之切图
基本(繁琐)操作: 切JPG图(即带背景的图): 1. 选切片工具(另外,切片选择工具能选择切片和删除切片),切 2. 存储为Web所用格式(快捷键Ctrl + Shi ...
- 【随笔】Photoshop简单切图
一.首先准备一张需要切割的图: 二.打开Photoshop,在ps里打开这张图片: 三.在界面的左边选择切片工具: 四.根据需要,鼠标点住上方和左边的标尺拖动,给图片加上分割辅助线: 五.用切片工具点 ...
- photoshop 快速切图
发现一个详细好方法:http://blog.csdn.net/zhangxiaowei_/article/details/42143307 具体如下:
- 使用Photoshop切图的三种方式
PhotoShop切图的三种方式 1. 原始切图 (1)选择工具栏中的切片工具 (2)找到要切片的元素,在右侧的图层框中,使元素背景隐藏,然后用切片工具选择需要切片的元素 (3)导出为web常 ...
- photoshop 切图技巧
前端切图技巧 手动切图 参考线切图 精准切图 自动切图 原文地址 http://www.cnblogs.com/w-wanglei/p/5598336.html
随机推荐
- IOS 技术层概览
IOS 技术层 Cocoa Touch 框架 ui 等 帮助开发者搭建程序 UIKit 它负责启动和关闭应用程序 控制界面和多点触摸事件,并让你能访问常见毒数据试图(比如网页以及word.execl文 ...
- LDAP基础
超级好的LDAP文章: Linux下基于LDAP统一用户认证的研究 : http://chenguang.blog.51cto.com/350944/285602利用LDAP实现windows和Lin ...
- iOS 使用UILocalizedIndexedCollation实现区域索引标题(Section Indexed Title)即拼音排序
UITableView在行数相当多的时候,给人的感觉是非常笨重的.通常为了方便用户使用,采用的方法有:搜索框.按层级展示.区域索引标题. 前两种就不用介绍了,此文就介绍区域索引标题的实现. 区域索引标 ...
- UICollectionView 简单的使用和注意事项
UICollectionView 在创建的时候,要给它一个UICollectionViewFlowLayout (不然会崩溃),就像tableview一样,也要为它注册自定义的cell. UIColl ...
- .Net平台-MVP模式初探(一)
为什么要写这篇文章 笔者当前正在负责研究所中一个项目,这个项目基于.NET平台,初步拟采用C/S部署体系,所以选择了Windows Forms作为其UI.经过几此迭代,我们发现了一个问题:虽然业务逻辑 ...
- 读书笔记 - 设计模式(Head First)
设计模式让你和其他开发人员之间有共享的词汇,设计模式可以把你的思考架构的层次提高到模式层面,而不是停留在琐碎的对象上. 设计原则: 封装变化:找出应用中可能需要变化之处,把它们独立出来,不要和那些不需 ...
- 一篇入门的php Class 文章
刚在大略浏览了一下首页更新的那篇有关Class的文章(指PHPE的那篇 http://www.phpe.net/articles/389.shtml ),很不错,建议看看. 对类的摸索--俺用了半年 ...
- 【转】Centos 设置IP地址的几种方式
对于很多刚刚接触linux的朋友来说,如何设置linux系统的IP地址,作为第一步,下面小编以centos系统为例,给大家演示如何给centos设置IP地址,如何修改linux 系统IP地址? 查看I ...
- Ubuntu Server 14.04在VMware安装的一些事儿
这几天一直在折腾Ubuntu Server 14.04,故记录下: 安装前的准备: 1.建议安装英文版,像15.04.16.04等安装中文版时存在bug,而且中文版字体显示也有问题. 2.Ubuntu ...
- CSS3 旋转 太阳系
参考https://www.tadywalsh.com/web/cascading-solar-system/ 首先 旋转有两种方式 一种是使用 transform-origin 另一种是tran ...