前端工程师技能之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巧用系列扩展篇——自动切图相关推荐
- php 自动切图,前端工程师技能之photoshop巧用系列扩展篇自动切图
× 目录 [1]初始设置 [2]自动切图 前面的话 随着photoshop版本的不断升级,软件本身增加了很多新的功能,也为切图工作增加了很多的便利.photoshop最新的版本新增了自动切图功能,本文 ...
- 前端工程师技能之photoshop巧用系列第二篇——测量篇
前端工程师使用photoshop进行的大量工作实际上是测量.本文是photoshop巧用系列第二篇--测量篇 测量信息 在网页制作中需要使用photoshop测量的信息分为两类,分别是尺寸信息和颜色信 ...
- 前端工程师技能之photoshop巧用系列第一篇——准备篇
前面的话 photoshop是前端工程师无法回避的一个软件,这个软件本身很强大,但我们仅仅需要通过这个工具来完成基本的切图工作即可.本文将开始photoshop巧用系列的第一篇--准备篇 作用 我们为 ...
- 从程序员到CTO的Java技术路线图 JAVA职业规划 JAVA职业发展路线图 系统后台框架图、前端工程师技能图 B2C电子商务基础系统架构解析...
http://zz563143188.iteye.com/blog/1877266在技术方面无论我们怎么学习,总感觉需要提升自已不知道自己处于什么水平了.但如果有清晰的指示图供参考还是非常不错的,这样 ...
- java职业发展路线图_从程序员到CTO的Java技术路线图 JAVA职业规划 JAVA职业发展路线图 系统后台框架图、前端工程师技能图 B2C电子商务基础系统架构解析...
http://zz563143188.iteye.com/blog/1877266在技术方面无论我们怎么学习,总感觉需要提升自已不知道自己处于什么水平了.但如果有清晰的指示图供参考还是非常不错的,这样 ...
- 自动切图生成html,Photoshop如何实现UI自动切图?_html/css_WEB-ITnose
切图严格来说并不是UI设计师的工作, 而是前端工程师的工作,指的是将UI设计师的设计(大部分为photoshop创建的PSD文件)转化为界面(网页或窗体等)所需要资源的过程. 切图是衔接UI设计和应用 ...
- web前端布局篇(切图)
web前端布局篇(切图) 这里的切图不是指ps里面的切图,而是指web前端工程师将设计图转化为静态页面的过程. 在布局的时候,我们通常会以设计图为蓝本,然后将设计图拆分,变成一个一个的HTML标签,搭 ...
- web前端工程师技能总结
编辑器: 1 webstorm(建议版本10.0), 2 sublimeTEXT(建议版本3), 3 dreamweaver (建议版本CS6, CC2015) 浏览器: 1 firefox 建议 ...
- 高性能网站建设指南---前端工程师技能精髓
题记:无意间在公司图书馆看到这本书,感觉内容写得很不错,很细很有条理.虽然自己并非前端工程师,然而也需要对此有所了解,供以后在架构设计.系统优化时考虑这些因素,特在此将对该书进行摘录,供不时之需.也希 ...
最新文章
- 混合装置实现了24/7的能量收集和储存
- PE文件数字签名信息读取存储及格式具体解释图之上(历史代码,贴出学习)
- 【UAV】从单个螺旋桨到四旋翼无人机运动学分析
- 被“轻视”的CV·AR的背后核心技术
- 关联表多数据的批量insert (批量导入,测试19W条数据用时46秒)
- argv python 提示输入_Python解释器
- Python unittest中初始化固件setUp和销毁固件tearDown详解
- wpspbc按钮是什么意思_AC只是英文单词缩写,在科技领域常见的有三种意思
- java 判断类型_Java中类型判断的几种方式
- win11虚拟机如何安装 Windows11虚拟机安装步骤教程
- JSK-135 数字加1【大数】
- 【软件需求工程与建模】13组组队项目——项目总结
- matlab软件moran值,MATLAB 的moran,LM值
- Go Context 原理详解
- Visual C++ 2008入门经典 Ivor Horton(书_在线阅读)
- 这所211怒将自己学生告成老赖:90后校友承诺捐母校1100万未兑现
- 图灵机器人:到基层去,做人工智能的开放平台
- [HNUOJ1140] Daily Division(树状数组+二分)
- Mac系统下Carina初体验
- 成为大数据工程师需要具备什么能力?发展前景好么