前端高效开发之“一键切图”_html/css_WEB-ITnose
刚到新公司不久,见有同事使用切片工具切图。此法为了将图切好需将图片放大n倍而不见得能切得准确,同时产生一大堆无用图片产物,总之好麻烦!
对此我倍感幸运,庆幸自己从第一次切图的时候就被一位牛逼设计师好友传授了‘一键切图’的技巧??选中图片之后只需轻轻一按F2,图片便乖乖进到碗里来!
这里提供一个思路:将您复杂的操作流程记录为一个简单的photoshop‘动作’。
快捷通道【下载】您只需要温柔滴点击下载‘一键切图动作’,并在你的ps中载入动作便可轻松搞定。
如果你知道如何载入动作,则可在自己的ps中直接运用,也便不必往下看了。
演示 一:载入动作下面演示的是在photoshop cs6导入动作
【步骤】菜单栏?>窗口?>动作
按照此步骤打开动作面板,点击面板右上角(见图中红框),出现下拉菜单,选择‘载入动作’,然后将刚才下载的‘一键切图动作’载入。ok!
二:一键切图效果演示成功载入‘一键切图动作’之后,就可以尝试使用F2,一键切出你想切的图片了!
打开任一psd,演示如下
【目标】将图中的’爱心‘切出来。
【步骤】
1.如图中左上角,在‘移动工具’下,将‘自动选择’勾选并选择‘图层’。
2.点击’爱心‘小图标,在图层面板中我们可以看到爱心对应的图层已经被定位到。
3.点击图层前面的小眼睛,观察’爱心‘是否被隐藏,以此判断我们是否真的选中了爱心。
4.接着就是见证奇迹的时刻:点击F2,爱心小图标就到碗里来了,如下图。
最后用你习惯的方式将其‘存储为web所用格式’,你可以从菜单栏中找到这项。我习惯的方式是ctrl+shift+alt+s四个键一起按,操作起来好像很牛逼的样子。当然,你也可以用本文提供的这种思路,将这个简单的操作保存为动作,然后一个快捷键搞定一切。
【结语】从此,妈妈再也不用担心我的切图。理想状态下,希望本文能够给你提供一个思路或是启发:将复杂的ps操作记录为一个简单的动作快捷键。
【附件】提供两个动作给大家选择。
1.一键切图(只包含‘一键切图’动作)
2.敏捷开发(包括‘一键切图’动作和‘一键保存为web所用格式’动作)
原创文章,转载请注明来自:让周飞[http://www.cnblogs.com/rangzf/]
本文地址:http://www.cnblogs.com/rangzf/p/3279848.html
推荐阅读
-
前端工程师技能之photoshop巧用(从效果图到雪碧图)5--理论篇_html/css_WEB-ITnose
-
前端工程师技能之photoshop巧用(从效果图到雪碧图)5--理论篇_html/css_WEB-ITnose
-
前端开发基础之HTML--标签系列(1)_html/css_WEB-ITnose
-
Web前端切图你需要知道的几件事情_html/css_WEB-ITnose
-
前端工程师技能之photoshop巧用(从效果图到雪碧图)4--优化篇_html/css_WEB-ITnose
-
前端开发利器CSS之完美容颜_html/css_WEB-ITnose
-
Web前端切图你需要知道的几件事情_html/css_WEB-ITnose
-
前端工程师技能之photoshop巧用(从效果图到雪碧图)4--优化篇_html/css_WEB-ITnose
-
web前端开发之div+css教程精华收集一_html/css_WEB-ITnose
-
前端高效开发之“一键切图”_html/css_WEB-ITnose