美文网首页
psd切图技巧

psd切图技巧

作者: raining_804f | 来源:发表于2018-02-22 19:13 被阅读0次

     作为一名Web前端人员,工作中难免都会要接触切图这一块,那么如何把图快速切好且又不浪费时间呢?相信很多人切图都是先把图片放大再使用矩形工具或切片工具来切图,这样其实好麻烦且有时不一定切得精准,下面笔者将介绍两种快速切图的方法—— “一键切图”。

         方法一:如果你的photoshop版本是CC 或CC2014及更高版本的,那么你可以在你的photoshop中安装一款叫 Cutterman的插件。Cutterman是一款运行在photoshop中的插件,能够自动将你需要的图层进行输出, 以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程; 它支持各种各样的图片尺寸、格式、形态输出,方便你在pc、ios、Android等端上使用; 它不需要你记住一堆的语法、规则,纯点击操作,方便、快捷,易于上手。

   插件下载地址及官网教程:Cutterman - 最好用的切图工具

    方法二:如果你的photoshop版本是CS6,那么可以在你的photoshop中载入“一键切图”的动作,让你选中图片后只需轻轻一按F2,图片就快速精准的切好了。

   思路:将你复杂的操作流程记录为一个简单的photoshop‘动作’。

   下载地址:一键切图

演示:

  1:载入动作

   步骤:菜单—窗口—动作

   按上述步骤打开动作面板,点击右上角(图中1),出现下拉菜单,选择载入动作(图中二),将下载的“一键切图”动作载入。

  2:一键切图

  目标:将图中的“日历”小图标切出

  步骤:①点击“移动工具”,将“自动选择”勾选并选择“图层”(见下图步骤1)。

      ②点击图中的日历小图标,右下角(图中步骤2)可以看到已经选中图层了,再点击图层上的“小眼睛”,查看日历图标是否隐藏,用来确定我们是否选中了图标。

      ③按下键盘“F2”(图中步骤3),这样就完成了切图,具体如下:

  最后,点击菜单选择“存储为Web格式”,或同时按下键盘“ctrl+shift+alt+s”把图片保存起来,当然,你也可以根据笔者的思路来把这个流程操作保存为“动作”,然后一键搞定。

相关链接:http://blog.csdn.net/plm15987/article/details/60345473

相关文章

  • psd切图技巧

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

  • psd切图小试

    用移动工具点击要切的图标 Ctrl+Alt+E转化为图层 使用选择工具选择图标 Ctrl+C Ctrl+N Ctr...

  • 产品开发流程

    产品经理:项目需求说明 UI设计师:产品结构图+原型图+交互设计说明+页面流程图;psd效果图;标注稿+psd+切...

  • 2019-06-24 用ps切图的步骤

    用PhotoShop和pxCook切图的步骤 1、安装一个切图的工具PxCook。 2、用PS打开需要切的psd ...

  • 页面制作1—Photoshop切图

    1.三问切图 什么是切图?从设计稿(如.psd文件)中切出图片素材(如.png、.jpg文件)DIV+CSS切图1...

  • photoshop更改图片文字内容

    一:psd图 对于psd图很简单啦,直接文字工具(T)选中所要更改的文字,出现光标后更改就好了。 二:非psd图(...

  • PS前端切图 、快捷键

    切图,方法一 适用于无法选择图层的图片,如.png,.jpg格式的图片 切图:方法二 如果图片格式为psd格式图片...

  • 第五章——第一次做页面

    好吧。公司的业务。就是3个页面。 第一次、嗯,知道制作文档,psd文件。 psd可以用ps切图来使用,制作文档就是...

  • python生成@2x,@3x图片小脚本

    Slicy能够从PSD文件中根据图层命名来生成切图,确实是一个很好的切图神器。但是Slicy只能生成.png和@2...

  • 设计师必备移动端切图技巧

    适配及切图得到分解,详细的介绍适配原则及切图注意事项,很好的将设计师的“理想”转化为“现实”。将psd进行切片重组...

网友评论

      本文标题:psd切图技巧

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