zoukankan      html  css  js  c++  java
  • 两种快速切图方式

    今天给大家分享一下我自己在前端工作中的一些切图小技巧,虽然好的UI会给我们把图切好,但是他们切的图不一定百分之百符合我们的需求,所以还是自己动手丰衣足食嘛,看本教程之前希望大家能先看看慕课网的切图教程 http://www.imooc.com/learn/506 哦。

    这里给大家介绍我在实际工作中用的两种切图方法,一种是“图层切图”,这种切图方式比较适合切形状不规则的png格式的小图标,如企业logo等等,而另外一种是“切片切图”,这种切图方式比较适合形状规则的jpg格式的大图。

    一.图层切图:

    1.打开你的Photoshop,点击选择工具,将右上角的自动选择勾上,选择为图层,为下图:  


     

    2.用鼠标左击某一个图层,这里我选择了psd设计图中的企业logo新天杰股份。


     

    3.ps帮我们自动定位到了该图层所在的位置


     

    4.然后右击图层12,将图层转换为智能对象,至于为什么要转换为智能对象,大家可以参考这篇文章:http://www.jianshu.com/p/73bee622017f。


     

    5.选择选框工具,将你要切的图层圈起来:


     

    6.接着按ctrl+c复制,再按ctrl+n新建,注意背景颜色设置为透明:


     

    7.点击确定,再按ctrl+v粘贴,我们就得到要切的图层了:


     

    8.再按ctrl+shift+alt+s保存,记住背景图存为PNG24格式:


     

    9.存储到我们要存的文件夹下,就大功告成了,是不是很快,下面我们介绍切片切图,和慕课网的大同小异。

    二。切片切图:

    1.拉辅助线,如下:


     

    2.选择切片工具,将我们要切的所有图片区域,用切片工具选中:


     

     

    3.按住ctrl+alt+shift+s保存,保存的时候注意,保存为JPEG格式,选择为保存所有用户切片,这样子切出来的才是我们想要的图片:


     

    4.保存之后就完工了,切片切图的方法很方便,但是注意它只能切出形状规则的图片。



    作者:筆莘
    链接:http://www.jianshu.com/p/704a61080f82
    來源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    RabbitMQ 记录
    RabbitMQ 问题记录
    (转)非常完善的Log4net详细说明
    (转)【推荐】初级.NET程序员,你必须知道的EF知识和经验
    移动相关
    (转)2014年最新前端开发面试题(题目列表+答案 完整版)
    Unity IOC容器的简单应用(转)
    httpclient模拟post请求json封装表单数据
    《SpringMVC从入门到放肆》六、SpringMVC开发Controller的方法总结
    《SpringMVC从入门到放肆》五、SpringMVC配置式开发(处理器适配器)
  • 原文地址:https://www.cnblogs.com/syp172654682/p/7581152.html
Copyright © 2011-2022 走看看