PS-前端切图教程(切jpg图和切png图)

ps:多日后的补充说明

部分看了文章的设计师,来找我说怎么切图。sorry?在我的理解,这就是切图啊,但是他们所指的“切图”是,怎么把设计图制作成html页面。

在我看来,现在人们对于前端都是有误区的。认为前端是切图的,(也确实是这么叫的,本人情感上很不愿意听前端被叫做“切图的”)所以也会误认为我的这篇文章是写给设计师的。

其实不然,这篇文章适用于计算机出身的前端甚至后端、对于ps等设计软件没有基础的人使用的,用来把设计师交于前端工程师的设计图稿或者psd源文件提取、整理,转化成布局页面时使用的图片。

再者,前端这个职业,很不希望被人认为是切图的,现如今的前端工作,并不是单纯的切一下ps图那么简单的事情。

本篇文章所展示的也只是前端工作中的沧海一粟、九牛一毛。。。

微微一运功,把家底都抖出来了。

不过,作为一个设计出身的前端来说,摸ps就和摸键盘一样了

PS切图步骤说明

一共分两大项:切jpg图、切png图。

我用的是PS CC 版本,教程中用到的除了界面和摆放位置不一样外,其他应该和低版本的都一样了。

一、切JPG图

1.打开ps导入图片的步骤是铁定的了

2.选择左边工具栏里的“切片工具”

事先自己没用过或上一次ps工具使用时没有使用过“切片工具”的,打开ps工具栏里默认是“裁剪工具”的图标

你可以鼠标左键点住“裁剪工具”不松手,他会在右边展开(我这是工具栏在ps界面左侧的情况下)这一组的所有工具,在里边选择“切片工具”即可

我图中之所以框选了两个工具,是因为后期还要用到“切片选择工具”,这里先认识一下他的位置在哪。

3.用“切片工具”切出想要的范围,框选范围就像平时用qq的截图工具一样。

如下,我需要这个小图标,我就框选了他。

框选中:

框选后:

如果你框选好了松开了鼠标,他还是这种黄色的边线,你把“切片工具”移到附近,他还能调整框的大小范围。

但是如果你框选了好几个了,想改前边已经框选好的:

像如上这样,要知道,ps切片工具最近一个选区的切片是用黄色框包裹的,其他前边切得都是蓝色边线,这时候你再用“切片工具”去调整蓝色边线的选区是动不了的。

这就要用上“切片选择工具”了

4.“切片选择工具”调整范围:

切片选择工具就在“切片工具”的下边,寻找方法见上解。点击选择要调整的切片蓝线,待其变成黄色后,调整范围。

切片选择工具只能选择并调节范围,不能切片。

5.切好后保存

  • 保存方法:文件——存储为web所用格式【快捷键ctrl+shift+alt+s】
  • 在弹出的【存储为web所用格式】对话框中,下拉选择框选择JPEG格式
  • 按需求更改质量(低、中、高、非常高、最佳。这五个模式)
  • 点击存储后弹出【将优化结果存储为】的对话框

选择存放位置、设置文件信息——

一般存储时,ps会自动建立一个images文件夹,你要找到刚才自己设定的位置中,找images文件夹,在她里边才有你刚才切好的图。

  • 命名文件名
  • “格式“——仅限图像
  • 在“切片”那里,可以选择是存储全部切片还是只存储选中的切片,

一般默认就存储全部切片就好了,有时候只需要一小块切片时,可以选择存储选中的切片,他会只保存一张你当前切得图,这样省的自己去一大堆切片中捡出来自己要用的了。

二、切PNG图

切透明图的核心理念是,你要把不需要的背景图给隐藏掉,只让需要的留下来,底部背景变成像马赛克那样的样式。

1.打开ps拖进来你要切的psd或者tif文件,

一定得是带图层的。

2.先选择移动工具

3.并在顶部选项栏里勾选自动选择,

4.下拉框里选择图层

若没有选项栏或者图层栏的:

在菜单栏点击窗口——选项。打了对勾后就能调出工具对应的选项面板了。

5.然后用“移动工具”点击你不需要的背景图,ps会自动选中该背景所在的图层,

6.你在图层面板中,把对应这层的左边小眼睛关掉就好了,让背景图先隐藏起来。

有时候设计会有好几层,他为了光效或者其他效果做了好几层不同透明度的背景叠加在你要切的东西后边,

你就用移动工具(快捷键v【英文输入法下按v就可以锁定移动工具】)点击它然后关掉它,有几层就多做几步,直到你不需要的背景全部隐藏掉。

但是良心的设计一般会把背景都放到一个图层中,你找到一层背景,所有的都和他在一个组里边,你把组的小眼睛关掉即可

7.然后切片工具切出你要的那个图标

8.保存:文件-存储为web所用格式(ctrl+shift+alt+s)

9.选择png-8/png-24格式,看你对图标的要求了

PNG8”是指8位索引色位图,“PNG24”是24位索引色位图;

png8:

每一张“png8”图像,都最多只能展示256种颜色,所以“png8”格式更适合那些颜色比较单一的图像,

例如纯色、logo、图标等;因为颜色数量少,所以图片的体积也会更小;

png24:

每一张“png24”图像,可展示的颜色就远远多于“png8”了,最多可展示的颜色数量多大1600万;

所以“png24”所展示的图片颜色会更丰富,图片的清晰度也会更好,图片质量更高,当然图片的大小也会相应增加,

所以“png24”的图片比较适合像摄影作品之类颜色比较丰富的图片;

这是二者的区别,根据自己的需求选择吧。

10.然后就是一定要勾选透明度,其他默认设置就好。

Png-8的透明度位置

Png-24的透明度位置

11.”保存全部切片“或者“保存选中切片”

这里还要说明一个问题,有时候一个页面中,我用切片工具选出好几张png图标准备切,然后保存的时候也选择png格式都没问题,

但是到了选择保存位置这个对话框里,选择的是“保存所有切片“,

最后保存出来的图片,只有最后切得那张或者说切片工具选中的那张是png的,其他就都存成jpg格式了,背景是白色底

!!所以切png的图,还是建议,一张一张“保存选中切片”比较好。

或者你的图标与白色底差别大的话,你也可以不计较,让他保存成jpg后再去ps中魔棒抠图也好,不过这样比较麻烦不是。

有的说,背景图和图标每分图层咋办?那咋办?找设计吧。要不你自己选取工具扣吧,扣好了另存为png也是一种办法

三、其他技巧

1.Ctrl+ +号放大图片,

2.ctrl-缩小

3.按住空格,鼠标图标变成抓手工具,移动页面

四、重磅彩蛋!!!还有一个吊炸天的方法——针对单一小icon切成png的

  1. “移动工具”点击图标,选中图标所在的图层;
  2. 右击该图层,选择“转换为智能对象”;(ps这时候没反应,不要大惊小怪,是你看不到而已)
  3. 接着再次在这个图层上,右击——“编辑内容”
  4. 对话框点击确定

ps就自动生成一个新的文件,只有那个icon,而且是透明的哦!

很神奇有么有!

很省力有么有!

1秒搞定有没有!

以下是图解:

这是点击一个小图标

选中图标后的图层面板

右键点击该图层选择“转换为智能对象”

没转换前的图层样式:

转换后的图层样式:

所以别说“我转换了ps没反应”这样的话了,是有的,你不仔细看看不到

接着再右击——“编辑内容”

点击“确定”

看,他就新建了一个“形状8”的页面,放的是我的png的小图标,

 最后你保存为png也好,“存储为web所有格式”也好,自由发挥吧。

 这个方法可能只能保存一个图标,

有的人说我好几个图:例如文字+图片都有咋弄?

那就切图呗!

那还要纠结的话那就合并图层吧!

原创文章,转载请注明来自:xing.org1^[http://www.cnblogs.com/padding1015/]

本文地址:http://www.cnblogs.com/padding1015/p/7085539.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

学习纲要:HTML 基础概念

711
来自专栏HTML5学堂

Form 表单 问题多多(上)

HTML5学堂 - 刘国利:2013年8月时,曾在给学生讲解WEB前端开发的HTML和CSS基本知识,学生要面对“表单”的制作。我喜欢把“表单”称之为初入前端的...

38810
来自专栏PPV课数据科学社区

【高手捷径】Excel数据操作与处理

作者:聂春霞,2001年毕业于南京邮电大学,在中国移动通信集团江西有限公司工作近4年,2005年加入腾讯公司,现就职于腾讯公司MIG运营商业务部,专注数据分析岗...

3759
来自专栏非著名程序员

Android弹软键盘时之ListView的变化控制

前几天有个人问我,说在最底下有个输入框,弹出键盘时整个界面都一起跟着移动,上面的标题栏都移到上面看不到了,界面非常难看。其实这种问题一般存在于这样的界面布局中那...

1847
来自专栏小程序的道路

微信小程序布局

开始我们的入门后,接下来就可以开始创建我们的第一个demo页面了。按照官网的步骤,在pages模块下新建我们自己的模块demo,添加好对应的文件,然后在app....

3206
来自专栏前端知识分享

第10天:CSS初始化操作

       在写页面过程中,每个浏览器都会有默认样式,为了避免浏览器的样式兼容问题,我们会在样式开始部分对常用标签进行重置样式。这样我们在写样式时,就不会有误...

1282
来自专栏张善友的专栏

The jQuery UI CSS Framework

jQuery UI是 jquery官方推出的配合jquery使用的用户界面组件集合!包含了许多的界面操作功能,如我们常用的表格排序,拖拽,TAB选项卡,滚动条,...

2106
来自专栏AndroidTv

一起撸个简单粗暴的Tv应用主界面的网格布局控件(下)

上一篇中我们已经一起学了怎么简单粗暴的撸个支持动态布局的网格控件出来,但在上一篇的介绍中,并没有学习实现网格控件的滑动效果,所以本篇就来讲讲,要如何让我们的网格...

3508
来自专栏Jacklin攻城狮

翻译_iOS视图编程指南(View Programming Guide for iOS)之介绍

在iOS中,你可以使用窗口和视图将你应用的内容呈现在屏幕上。窗口本身是不具备呈现可视化内容的功能的,但它可以用作装有应用视图的容器。视图可以规定在窗口的某一部分...

1173
来自专栏软件开发

CSS3与页面布局学习总结(四)——页面布局大全

一、负边距与浮动布局 1.1、负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%。当一个元素与另一个元素m...

7526

扫码关注云+社区