ps 切图

作者: black白先森 | 来源:发表于2016-10-07 20:40 被阅读86次

本文以 PS CC 2015 为例

旨在熟悉简单的切图步骤,更为巧妙的切图技巧--请自行Google 搜索
慕课网上也有相关切图教程

关于手动切图的步骤

  • 1.1 选择按钮

    点击选择按钮时,记得勾选 自动选择
    这里有问题,更正下,同学告诉笔者,用自动选择,可能会切换到图层,也可能切换到图片,所以用 同时按住 Ctrl 键,单击鼠标左键,点击想选的图层,这样也是OK的。

选择按键-选项.png
  • 1.2 建立图层组

    如果想自己保存几个图片,按住ctrl,单击想要的图层,点击右键,选择其中 从图层中建立组 下图中就是 依次弹出的窗口

新建组选项.png 图层建立组.png
  • 1.3 图层组导出为png

    在新建组之后,我们想要导出这个组作为整张PNG图片,选中组,右键,单击导出为png,得到下面的图片
    这里也不一定要新建组,也可以按住Ctrl键,鼠标左键单击多个想要的图层,右键直接导出PNG,也可以快速整合为一张图片

把选中的组导出为png.png

整合后的图片,虽然有点丑,将就下看看

自己组装.png
  • 2.1 切片工具

    下面要开始手动切片,开始切图了

切片选择工具.png

笔者不太想随意的切图,强迫症伤不起,拉了几条辅助线,切了3个切片,下面是切出来的切片
这里当切了一堆切片后,为了避免心烦意乱,直接Ctrl+H,可以快速隐藏选区,切片等乱七八糟的

切片选中后.png

然后点击 文件,鼠标移到 导出,会有二级菜单,点击 存储为web所用格式(旧版)

储存为web所用格式.png
  • 2.2 切片储存

    注意点:想要切图时,关闭其他图层,只留当前图层会更好

    然后会弹出下面的窗口,

储存为web所用格式窗口.png

Now,按住Shift,鼠标左键单击,你切好的,并且想要的切片,而且在右边的选项卡中,点击GIF,选择png-24,

格式png-24.png

别问我为什么,因为大家都这样用,哦,对了,png-6格式的图片,IE..低版本不兼容

  • 2.3 切片保存格式

    然后弹出下面的窗口

保存图片格式.png

我更改后的选项卡,应该是下面的状态,把 所有切片 更改为 选中的切片,
文件名 改为 png

保存图片格式我改的.png
  • 2.4 最终储存图片

    最终结果如下
    很显然,我漏选了一个切片,因为我一开始,是想选中三个切片 T_T

最终结果.png
简单的切图就到这里,谢谢观看

这里再补充下

腾讯在线制作雪碧图

我在此文件夹下测试了下,用几张简单的切片测试了合成为sprite.png

制作雪碧图简单介绍

雪碧图gulp-sprity

sprity-github-介绍

相关文章

  • ps切图

    ps ps首选项设置 编辑 > 首选项 > 单位与标尺 > 把文字和标尺设置成像素单位 > 确定 放大图片:”CT...

  • ps切图

    按住ctrl鼠标左击图片上元素,右侧会高亮元素对应的图层 在图层上按住鼠标左键不放能拖动该图层到指定位置 多个图层...

  • ps切图

    1)清除参考线--- 视图->清除参考线 2)切图-----------图层->基于图层的切片1,使用切片工具Pa...

  • ps 切图

    本文以 PS CC 2015 为例 旨在熟悉简单的切图步骤,更为巧妙的切图技巧--请自行Google 搜索慕课网上...

  • PS切图

    ​ 因为网页美工大部分效果图都是利用 PS(Photoshop)来做的,所以以后我们大部分切图工作都是...

  • PS切图

    常用知识点 网页常用尺寸:1920px*1080px 快速使用工具栏工具的快捷键:先按Alt,菜单栏下部会出现短横...

  • PS切图

    除了用切片工具一个一个框起要切的部分进行分割,还可以使用参考线,使用参考线划分之后,会出现这样的按键 点击这个基于...

  • PS 切图

    一、安装和基本设置(二)界面设置: 视图:显现>智能参考线、标尺 窗口:设置四大常用选项卡:信息、字符、图层、历史...

  • ps切图

    切图 1、找到切片工具 2、导入psd后,找到要切的图片 把其他一些图片点掉,留下你要切的那个图层 3、保存 保存...

  • 网页(UI)设计--切图标注工具

    cutterman(免费)--切图(ps 插件) parker(收费)--标注(ps 插件) PxCook(免费)...

网友评论

      本文标题:ps 切图

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