切图应该说是前端经常要做的事情，在切图的过程中如果遇到图层过于复杂图片又过于渺小的情况，我们往往需要放大整个图片并隐藏额外的图层来选择我们需要的图形区域，这相当的浪费时间和精力。这里介绍下我们如何通过Photoshop的动作功能来实现一键切图的效果。 （1）下载动作请戳这里下载动作文件：https:
原创
2022-04-06 11:13:36
221阅读
前端切图 第一步，确定设计给的是什么，我接触过得设计稿1.PS， PSD格式的用PS打开 1.切小图标，在设计稿给的尺寸下，进行切图，一般设计稿的尺寸都是给的1920 PC,750 移动 比较大的，这样缩小以后，图片也会比较清晰 （1）ps中 切图 直接找到图层，然后单击右键 快速导出png 即可 1.关于一个页面上图标 将背景等无关东西关掉
原创
2022-07-06 12:20:35
222阅读
微微一运功，把家底都抖出来了。
不过，作为一个设计出身的前端来说，摸ps就和摸键盘一样了
所以可能教程中还是有没用过ps的人看不懂的地方，
欢迎加群讨论：613512106。。。
原创
2021-11-26 16:53:20
652阅读
部分看了文章的设计师，来找我说怎么切图。sorry？在我的理解，这就是切图啊，但是他们所指的“切图”是，怎么把设计图制作成html页面。 在我看来，现在人们对于前端都是有误区的。认为前端是切图的，（也确实是这么叫的，本人情感上很不愿意听前端被叫做“切图的”）所以也会误认为我的这篇文章是写给设计师的。
转载
2020-04-27 22:05:00
298阅读
2评论
一 界面设置预设WEB 1920*1080 自定义 *2000 72 RGB 背景：透明自动选择图层 Ctrl+单击视图》显示》智能参考线》标尺（Ctrl+R）窗口 图层，历史记录，信息，字符 信息面板中 单位：像素 一、
原创
2016-02-26 11:21:37
1263阅读
虽说切图技能小，但是还是很基础在遇到图片比较多的时候，掌握一个好的切图习惯是很有必要的。快速切图在最近的cc版本中，有一
原创
2022-07-11 10:40:59
71阅读
“切图”是指通过测量设计稿，从设计稿中提取图片等方式为页面开发提供支持的过程。整个“切图”过程主要分为以下五个主要步骤：分析设计图；测量元素；提取图片；保存图片；图片优化与合并；1.分析设计图以前我做练习时，往往是拿起一份PSD设计稿，大致看上两眼就开始边敲代码边切了，后来踩了一些坑才意识到这样的做法效率低下。有时代码敲着敲着会突然发现，哎？这里有一个下拉菜单？或者有时发现，哎？这里是不是可以重用
转载
2023-07-30 13:30:41
194阅读
图片.png图片.png 点击按钮div变色.html ...
转载
2018-05-14 14:55:00
156阅读
2评论
图片.png图片.png <!DOCTYPE html> <html> <head> <title>点击按钮div变色.html</title> <meta chars...
原创
2021-07-28 14:02:48
783阅读
图片.png图片.png <!DOCTYPE html> <html> <head> <title>点击按钮div变色.html</title> <meta chars...
原创
2022-04-24 15:10:12
150阅读
图片.png图片.png <!DOCTYPE html> <html> <head> <title>点击按钮div变色.html</title> <meta charset="utf-8" /&am
原创
2022-04-24 15:08:53
409阅读
图片.png图片.png <!DOCTYPE html> <html> <head> <title>点击按钮div变色.html</title> <meta charset="utf-8" /&am
原创
2021-07-28 14:03:30
622阅读
前端切图是前端工程师们还原设计稿的过程中必不可缺的一环。不过，切图工作究竟谁来做？这个问题我们在各大论坛也屡见不鲜：前端工程师认为设计师出了设计稿，那么相应的切图也应该一并交付；设计师则认为前端工程师给的要求太多太杂，不如他们自己动手来得专业。不过随着专业切图工具的发展，切图工作从几年前的“刀耕火种”，进化到了如今的“一键到位”，设计师和前端工程师之间的“纷争”自然也逐渐消散。那么近年来崛起的多款
原创
精选
2021-02-05 14:20:17
3342阅读
前端切图是前端工程师们还原设计稿的过程中必不可缺的一环。不过，切图工作究竟谁来做？这个问题我们在各大论坛也屡见不鲜：前端工程师认为设计师出了设计稿，那么相应的切图也应该一并交付；设计师则认为前端工程师给的要求太多太杂，不如他们自己动手来得专业。不过随着专业切图工具的发展，切图工作从几年前的“刀耕火种”，进化到了如今的“一键到位”，设计师和前端工程师之间的“纷争”自然也逐渐消散。那么近年来崛起的多款
原创
2021-02-05 14:20:14
1716阅读
前端切图是前端工程师们还原设计稿的过程中必不可缺的一环。不过，切图工作究竟谁来做？这个问题我们在各大论坛也屡见不鲜：前端工程师认为设计师出了设计稿，那么相应的切图也应该一并交付；设计师则认为前端工程师给的要求太多太杂，不如他们自己动手来得专业。 不过随着专业切图工具的发展，切图工作从几年前的“刀耕火
原创
2021-07-22 15:12:40
545阅读
这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程，相当于工作流程的介绍。这里写的不是一种规范，只是一种工作方法，加上技术的更新是非常快的，大家在具体工作中，一定要灵活运用。这里我们只说IOS系统下的设计，至于Android，因为尺寸太多，涉及的东西比较乱。1Part 1 项目立项文件结构项目名称v1.0 -> 01_源文件psd 02_效果图jpg 0
转载
2024-05-27 23:22:35
64阅读
兔课网——初学UI设计如何快速的学会切图？设计切图的原则：设计切图输出的目的是跟下游的工程师团队协同工作，那么在团队协作过程中首先应该保证切图输出能够满足工程师设计效果图的高保真还原的需求。其次切图输出应该尽可能的降低工程师的开发工作量，避免因切图输出而导致的不必要的工作量。最后输出的切图应当尽可能的压缩大小，以降低APP的总大小，提升用户使用时的加载速度。所以切图输出应当做到切图精准、便与协同和
首先下载PS 安装然后登录下载完成之后 重启PS就会看见 窗口 列表的拓展功
原创
2022-08-19 11:27:08
947阅读
Supporting Multiple Screens
首先和最后，还是先看好官方文档：http://developer.android.com/guide/practices/screens_support.html对应的翻译blog有牛人做了：Android屏幕适配全攻略(最权威的官方适配指导) android屏幕适配详解 屏幕级
转载
2024-08-07 10:02:54
36阅读
关于切图命名的规范，我个人觉得关键是在于团队能够有一个统一的规则，所有成员严格遵守并且和所有开发全盘拉通，不然一切都是空谈。不同的团队使用的软件都不一样，如果经常使用sketch软件中Symbols 的同学，可能在命名的时候会考虑更多内容，但是照顾到还有很多同学在使用PS 作图，所以这里只介绍一种通用的命名规则，当然大家也可以根据自己的实际情况去制定，这里只提供一种方法与思路，仅供参考。一、为什么
转载
2024-01-16 06:23:28
94阅读
