前端必备的切图知识

作者: 该帐号已被查封_才怪 | 来源:发表于2018-01-25 13:01 被阅读506次

不相干的前言:
希望大家在电脑面前工作时注意身体,别久坐否则眼睛、颈椎、肩周、脊椎、腰间盘、痔疮、坐骨神经等等各种相关的病会找上门。

本文以Adobe Photoshop CC 2018 (32 Bit)版本为例介绍,不同版本可能有细微差异。

一、Photoshop预设准备

1、默认单位设置

由于ps默认的是以厘米为单位,因此需要修改为我们前端所用的以像素为单位:
编辑-->首选项-->单位与标尺-->按下图修改即可:

默认单位修改及屏幕分辨率.png
2、视图设置

由于ps默认未启用标尺及智能参考线等,因此需要自行开启:


视图.jpg
3、窗口设置
窗口设置.jpg

如果左侧工具栏未开启显示,则也可在此设置让其显示;另外需要提的是,信息面板需要一些额外的设置:

信息面板设置.jpg

信息面板选项设置


信息面板选项设置
4、新建文件存储预设
新建文件存储预设.png
5、新建工作区

以上设置完后,建议保存工作区以保存之前预设的一些设置。
保存工作区方法:窗口-->工作区-->新建工作区

二、切图方法

1、普通切图

这里就不解释了,直接上图:


image.png
2、智能对象切图法

选择移动工具 ---> 勾选自动选择及选择图层选项(不是组) --->选择预切图的位置(选择后会自动跳至相应图层)--->右键相应的图层--->选择转换为智能对象--->启用选框工具框选相应区域--->复制--->新建文件--->粘贴--->选择图像菜单--->选择裁切--->选中基于透明像素--->确定即可;
此方法比较适合不规则的图像,比如logo等;

3、参考线切图法

拉好参考线后,选择切片工具--->点击 基于参考线的切片


image.png

--->文件--->导出--->存储为web所用格式--->选择png24--->存储--->选中所有用户切片;

由于有很多条参考线存在时会相互干扰,我们可以将原有图片裁剪成几个独立的部分,然后再使用参考线切图法即可。

4、导出切图法

文件--->导出(Photoshop低级版本此处是脚本而不是导出)--->将图层导出到文件--->设置文件类型(PNG24,勾选透明区域、交错及裁切图层)

完成后,ps脚本会自动运行。可能耗时比较长。

5、生成切图法

该方法需要事先设置两个地方:
a、编辑-->首选项-->增效工具-->启用生成器
b、文件-->生成-->图像资源
上述两个设置完成后,启用移动工具,选择需要的切图,在其图层上加后缀名,则在原始psd文件目录下的xxxxxx-assets文件夹中会自动生成相应格式的图片(甚至svg)。

当然我们还可以在后缀名添加数字来表示图片的质量。比如logo.jpg8(表示80%的质量),logo.png24,logo.png8等。当然如果不加数字的话则默认取最大值;


不仅如此,我们还可以设置生成后的大小倍数 比如命名300% logo @2x.png 则表示会在原有基础上放大三倍大小导出。这一点对视网膜屏很有用。

** 本文版权归本人即简书帐号:该账号已被查封https://www.jianshu.com/u/e0c3321672f5 所有,如需转载请注明出处。谢谢!

相关文章

  • 前端必备的切图知识

    不相干的前言:希望大家在电脑面前工作时注意身体,别久坐否则眼睛、颈椎、肩周、脊椎、腰间盘、痔疮、坐骨神经等等各种相...

  • 技术文章地址

    Web前端开发CSS、JS 廖雪峰的JS教程 JQuery基础 前端工程师必备的PS技能—切图篇 前端入门方法 A...

  • 前端必备:PS切图小技能

    一、准备工作:工作区设置 1.新建图层的参数设置: 宽度一般是:1920px;颜色:RGB;背景内容:透明;可以存...

  • Web框架体系

    Web 前端知识体系精简 web前端知识体系图 web前端知识体系大全 HTML,CSS,JavaScript知识...

  • 前端切图

    准备工作 1、设置:首选项-》单位与标尺-》像素窗口-》面板-》选项、工具、信息(F8)、图层(F7)、历史记录 ...

  • 前端切图

    前端技能之切图如何一稿适配iOS、AndroidAndroid适配的那些P事 切图的基本要素 清楚需要切出什么样的...

  • 前端切图

    https://www.imooc.com/article/43991切图:从UI给的PSD文件中切出前端可以用的...

  • 前端必备知识集合

    git相关 git上传代码 上传代码全 本地和github上不一致上传代码 git cherry-pick

  • nginx前端必备知识

    nginx在应用程序中的作用 解决跨域请求过滤配置gzip负载均衡静态资源服务器 正向代理与反向代理 代理是在服务...

  • 前端跳槽必备知识

    一、页面布局 CSS盒模型 标准模型和IE模型image.png 标准模型和IE模型的区别标准模型计算宽高时,只包...

网友评论

    本文标题:前端必备的切图知识

    本文链接:https://www.haomeiwen.com/subject/vhgmaxtx.html