切图技巧

作者: 胡儒清 | 来源:发表于2018-01-25 16:04 被阅读12次

切图前的准备

  1. 设置好显示的窗口,需要显示以下几个:字符、段落、属性、信息、历史记录、图层,其他的一律不要,如下图


  2. 勾选自动选择,然后选择图层,点击某个图标时会自动定位到图层,如下图


  3. 快捷键

  • V-移动工具
  • M-矩形选择工具
  • Z-放大
  • Z、options缩小
  • C-切片工具
  1. 切图
  • 对于一整排的可以拉参考线
  • 按住option可以复制切片
  • 按住cmd+shift可以选择多个切片
  1. 保存
    文件-存储为web所用格式,在弹出的页面中按shift键选中你要导出的图片,选择png-2,如下图


    image.png

    点击存储,在弹出的页面中选择选中的切片,如下图


    image.png
  2. 切单个图标

  • 先确定你要切的图标由几个部分组成,然后右键-转换为智能对象,如下图


    image.png
  • 再右键-编辑内容,图标就出来了,然后按cmd+shift+s保存为png格式的图片就可以了


    image.png

相关文章

  • 切图技巧

    ctrl + 单击,选中图层图层右击,转换为智能对象双击进入(大小无需自己选中切割)保存为png透明格式 ===b...

  • 切图技巧

    切图前的准备 设置好显示的窗口,需要显示以下几个:字符、段落、属性、信息、历史记录、图层,其他的一律不要,如下图 ...

  • photoshop 制作雪碧图

    仅供学习,转载请注明出处 需求说明 在上一篇photoshop 切图技巧中,我使用批量切图的技巧切出了三张图片如下...

  • psd切图技巧

    作为一名Web前端人员,工作中难免都会要接触切图这一块,那么如何把图快速切好且又不浪费时间呢?相信很多人切图都是...

  • PS切图技巧

    压缩图片网址:https://tinypng.com

  • 切图技巧总结

    Cutterman 是我们常用的切图工具,简化了很多重复的works. 一.修改切图大小 1 规定大小输出(这个是...

  • Photoshop切图技巧

    photoshop界面设置 新建设置 高:1920像素 宽:2000像素 分辨率:72像素/英寸 颜色模式:RGB...

  • photoshop 切图技巧

    仅供学习,转载请注明出处 切图介绍 当在前端开发或者某些图片需要切下来的时候,可以使用photoshop的切图功能...

  • ps 切图

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

  • sketch切图入门技巧

    右下角Export直接导出icon 按住键盘快捷键S,当切片工具选择某一块图层时,鼠标单击即可切出选中的区域大小的...

网友评论

    本文标题:切图技巧

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