美文网首页码农的世界互联网科技
前端小技能:切图小技巧

前端小技能:切图小技巧

作者: 秋风_bdfd | 来源:发表于2018-12-29 23:25 被阅读0次

一名web前端工程师,在工作中都要接触到切图这一方面,那么我们如何提升切图的能力呢?

我相信很多人都是先把图片图片放大再使用矩形工具或切片工具来切图,这样其实好麻烦且有时不一定切得精准,下面我就为大家说两种快速切图的方法 — “一键切图”。

方法一:

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

方法二:

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

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

这里还是要推荐下小编的web前端学习 群 : 687958461,不管你是小白还是大牛,小编我都欢迎,不定期分享干货,包括小编自己整理的一份最新的web前端资料和0基础入门教程,欢迎初学和进阶中的小伙伴。在不忙的时间我会给大家解惑。

演示:

1:载入动作

步骤:菜单—窗口—动作

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

2:一键切图

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

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

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

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

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

相关文章

  • 前端小技能:切图小技巧

    一名web前端工程师,在工作中都要接触到切图这一方面,那么我们如何提升切图的能力呢? 我相信很多人都是先把图片图片...

  • 前端必备:PS切图小技能

    一、准备工作:工作区设置 1.新建图层的参数设置: 宽度一般是:1920px;颜色:RGB;背景内容:透明;可以存...

  • 前端小技能

    ​ 固定定位是否相对的父元素只能是body呢? position:fixed固定定位 用 left、top 都是相...

  • 17个前端切图快捷键,你知道几个?

    都说前端切图很简单,好吧, 那起码我比你快! 相对于设计,web前端切图用到的PS技能较少,在切图过程中掌握一些必...

  • 前端实战系列之---两种快速切图的方法

    今天给大家分享一下我自己在前端工作中的一些切图小技巧,虽然好的UI会给我们把图切好,但是他们切的图不一定百分之百符...

  • 前端小技巧

    1.让图文不可复制 这点应该大家 都很熟悉了, 某些时候【你懂的】为了快捷搜索答案,可是打死也不让你复制 -web...

  • 前端小技巧

    1.版权置底 2.图标变小手 3.页面跳转 4.设置全局变量

  • 前端小技巧

    作为前端新手,总结了一下自己在做项目中,遇到了问题,在这里记录一下解决办法。 计算文字的高度,展开收起 在工作中经...

  • 技术文章地址

    Web前端开发CSS、JS 廖雪峰的JS教程 JQuery基础 前端工程师必备的PS技能—切图篇 前端入门方法 A...

  • 《前端工程师必备技能Vue移动开发实战技巧》——读后感

    《前端工程师必备技能Vue移动开发实战技巧》——读后感 前端工程师必备技能:Vue移动开发实战技巧 Kindle电...

网友评论

    本文标题:前端小技能:切图小技巧

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