2020年的第14篇原创文章,距离年底30篇目标还剩16篇
(本文约3800字,预计阅读时间6分钟)
高尔基说过的一句非常经典的话:时间永远是最公平合理的,它从不多给谁一份。
但这句话其实又因为现实的问题充满了相对性。因为我们每个设计师所在公司的制度、职级或者需求各不一样,你永远不会知道你的下一份需求将会占用你的多少时间,而你又将如何从中挤出额外的时间进行自我成长。
所以,我们唯一可以挤出时间的办法就是,提效。因为只有提效,你才有更多的时间去进行思考和成长!
而且如何系统而正确得提效一直是我乐于实践并追求的,之前分享过一次切图提效,这次我拿出我一直在用的提效工具分享给各位。有一些是之前sky盖哥分享的工具,这里一并拿出来了,如果你在使用过后真的提高了效率,希望能得到你的反馈!~
图片压缩类
图片体积是老问题了,我之前就因为几次直接切了原图给下游同事,没注意体积问题导致网页性能变差,用户进入到网页会看到图片一截一截的加载,相当影响体验。所以,现在每次切完后我会手动压缩一遍再传给下游。下面这些图片压缩类的工具就是我目前在用的:
jpg和png压缩
https://tinypng.com/
tinypng大家应该都很熟悉,我基本每次压缩banner、切图体积时第一个都会用到它。免费而且无损谁不爱呢?
gif压缩
gif压缩我推荐给大家三个,
https://www.tuhaokuai.com/gif第一个是图好快。它的无损压缩比例是最高的,可惜的是每个ip有免费使用次数,一旦超过后需要收费,不过他在双十一推出了5年299的优惠套餐,有兴趣的童鞋可以去了解下(怎么有种写软文的感觉- -)https://gifcompressor.com/zh/第二个是gifcompressor。
这个网站压缩比例实测确实不如图好快,但好在它是免费的。而且它相比于其他多了些gif格式转换的选项。唯一明显的缺点就是,节目广告贼多,不过不影响使用。
图片处理类
我们设计师时常会有一些商品、人物图片处理的需求。以往我和大多数设计师一样使用ps抠图,由于我是ai、sketch习惯性双开,加上浏览器标签页开很多,一开ps电脑就会非常非常得卡。时常打开ps的过程就是个尿点,直到我发现了这一款线上ai抠图的神器!
这个神器是凡客快图,可能会有不少设计师也在用。https://kt.fkw.com/koutu.html
我们先随便找个商品,就这个毛茸茸的拖鞋好了! 网站上传图片后,直接点一键AI抠图,
DUANG~~~一秒扣完。有了这个神器,ps都没打开就已经完成在线抠图了。
而且它还配备了很多实用的工具,需要保留或者删除的部分直接用画笔划拉几下就行。
因为上面ai扣完还是有些粗糙,我们这里用发丝工具划拉。DUANG~~~几秒的功夫,完事儿!
而且扣完后你可以直接云保存到线上的素材,以后再使用直接下载就行! 可以说有了这个工具,我抠图的效率直线up。当然,如果你要扣的边缘和背景色过于接近的话那这个就不太给力了,比如之前扣的京东logo,狗头和背景色都是白的,这种情况更适合回ps钢笔勾。
邮箱自动生成
https://10minutemail.net/10分钟邮箱这个工具是产品推荐给我的。由于我们属跨境行业,主要服务于海外零售商买家,所以竞品当然也是国外的产品。然鹅,老外的有些产品会先给你注册的邮箱免费试用大概两个礼拜,到期后除非自动续费否则就无法正常使用大多数的功能。dropbox、shopify等工具都是这个套路。
不过国外产品相对更注重隐私,他们注册账号不像国内全部可以用手机号,国外全部是邮箱。所以,只要使用不同的邮箱注册就可以了。但是我们平时也没那么多精力一个个注册。这时候,这个10分钟邮箱就会派上用场了。
进入页面后,它会自动生成一个仅存在10分钟的邮箱地址,并且这10分钟内所有发到此邮箱的邮件都会在页面中直接看到。
配色
color hunt
https://colorhunt.co/不必多说,谁用谁知道。上面有大量好看丰富的色彩,而且每天会根据浏览量进行热度排序。看到好看的配色直接hover点击色值就复制了。我平时配色没什么点子的时候就会在这里寻找配色灵感。
Material Design Color Palettes
https://material.io/design/color/the-color-system.html#tools-for-picking-colors
Material Design官方提供的调色器。google通过内置的一套算法调整每个颜色的色相、饱和度和明度,以此创造出各种各样美艳的色彩。
下图就是分别用紫色和黄色作为主色(primary)和辅色(secondary)时所自动生成的调色版,你可以在延展出的色板任意选择。比如我们按钮的hover、pressed状态就可以在这套色板中选择浅色和深色。
当然,你嫌麻烦的话也可以直接在下面的所提供的各个主流色相的色板中挑选。
网页翻译
chrome自带翻译
我不会告诉你们,我之前在chrome浏览器中翻译网页一直是很蠢得右键翻译。然后手动刷新还原成英文。
直到我在地址栏中发现了这个。
点开之后,你可以通过tab进行中英自由切换。(顿时感觉自己火星了)
但是很多时候不知道为啥,经常出现无法翻译此页的情况。而接下来我要分享的这个工具将完全不会出现此问题,而且好用到爆。。
它就是我们的——
彩云小译!
这个是sky推荐的一款相当的产品。它最吸引我的功能在于双语显示!对于一些翻译不准的地方,我可以随时手动查询对应的单词。而chrome自带的翻译由于仅显示一门语言所以并不方便查询。
比如这是沃尔玛的会员页的物流板块。
当你激活了彩云小译后,随着一个“彩云小译火力全开中”生动的toast飘过,翻译结果会自动展示,同时会显示原语言。而且位置正好置于英文旁边,塞不下时会强制折行英文,以打造更好的阅读体验。
这里再展示一些其他的信息。你可以发现汉译结果都放在离英文最近的地方,翻译后的观看感觉非常得舒服。 更厉害的是,彩云小译拥有同声传译的功能。比如youtube中的很多视频是没有配备字幕的,这时只要激活彩云小译,视频在播放的同时,你可以在下方看到翻译的结果!是不是超给力? 而且彩云小译同时开发了移动端产品,所以当你出国旅游、或者和老外聚会时,同声传译的功能让你们可以自由交流,语言不再成为障碍。(彩云小译打钱!)
品牌规范
findguidelin
http://www.findguidelin.es/这个网站集合了目前全球著名的互联网公司的品牌规范,Facebook、ins、behance、airbnb、twitter、adobe等等。可以了它是我迄今为止看到的品牌规范最全的网站了,如果苦于logo设计不知如何定制规范的童鞋,相信这个网站会给予你丰盛的一餐。不过它没有及时同步一些网站的更新,所以有的url对应的可能并不是规范页面,大家可以自己在页面配合彩云小姨查找下。
Gif录屏
很多时候,我们做教程分享、工作提案时会临时需要动画演示,这就需要用到gif。
除了principle可以直接输出gif外,一类是ae,一类是各种录屏软件。但是这两个办法都需要借助其他的手段输出gif。ae要么是转ps导出gif,要么是用adobe自带的ame导出,而录屏软件录制的是一般是mp4格式,需要借助格式转化工具转为gif。一旦gif量较多就得花费相当的时间成本。
windows相对比较友好,gifcam、screentogif这些软件都可以直接录屏gif,但是它们都没有mac版这一点实在可惜。之前也有设计朋友询问我那篇切图提效文章用的什么软件录的gif,我就不自己藏着掖着了,没办法,我这人喜欢分享~
它就是我们的 KAP!
https://getkap.co/KAP是一款轻量而优美的gif录屏产品,正如它的官网一样,迷幻渐变搭配大留白的风格令人印象深刻。
打开界面后,会弹出一个非常简洁的功能面板,五个功能分别对应者“自定义尺寸”(你可以自己设置录屏的宽高及比例)、“软件窗口”(比如你设定微信,录屏就会只录屏微信)、“录制/停止”、“全屏录制”和“更多”。 比如,你现在看到的,就是我写文时录制的一段动画 而且,你可以在软件的preferences中设置“highlight cursor”,这时你在录制过程中所有的点击、拖延都效果都会显示!
你可以自己设置帧率和尺寸,因为我设置的低所以看上去很糊。当然,你觉得体积过大可以配合我上面分享的gif压缩软件进行体积压缩。而且你可以自己截取动画的起止位置进行简单的裁剪。
另外,更厉害的这款软件是开源的,所以开发者们可以制作并上传各种各样的插件来满足人们不同的需求。你可以在plugins中找到这些插件~
小结
今天把这些一直在用的提效工具放出来了,希望能帮助到你们节省足够的时间来成(xiao)长(sa)。
如果你觉得这些工具能帮到你,欢迎点个在看,让我知道我写的这篇文章是有价值的,这也是让我继续下一篇分享的最佳动力~!
我是Andrew臣,下期见。