几年前扁平化设计(Flat Design)备受关注,最初是由微软开始使用,在Windows Media Center 及后来发布的Zune MP3 都采用此设计元素,苹果在2013 年iOS 7 介面首次使用扁平化设计,相对于早先的设计确实有让使用者吓了一跳!除此之外,Google 产品页面的设计质感也被大部分使用者认为是一种扁平化设计的改良,不过Google 后来推出「Material Icons」和苹果的扁平化设计不太一样,加入包括阴影及动态效果等元素,当然很难就这些介面设计来评断好坏,我们还是可以学习这中间的优点,将这概念应用到自己开发的网站或介面。

本文要介绍的「FlattyShadow」是一款免费图示网站,不过不单单只有下载扁平化图示功能,更棒的是可线上调整图示及背景颜色、形状、阴影变化和尺寸大小,直接客制化最适合你的图示集!对于像我没有什么绘图软体使用经验的人来说,FlattyShadow 无疑解决了困难复杂的编辑问题,让图示能完全整合到我的开发专案中,不会因为颜色而看起来不太协调。

FlattyShadow 允许在设计后将图示一键打包下载,不用注册或登入帐户,区分成两种不同格式:PNG 格式或包含CSS 原始码的格式,两者是用情境可能不太一样,如果你单纯需要图示图案,可直接选择「Download」下载取得图片档,假如是用于网页设计,可能带有原始码的格式会更适合用于网页中显示,而且开发者也不用再次编辑原始码。

网站名称:FlattyShadow

网站地址:http://flattyshadow.com/

使用教学

STEP 1

开启FlattyShadow 网站后直接点击右上角的「Get Started」开启编辑器并开始使用,如果点击其他按钮可能会看到介绍说明,或连接到其他网站来购买图示,但在网站里编辑、下载图示是完全免费的。

STEP 2

开始前先从左侧的选单选择「Icons」,点击你要编辑、使用的图片将它们加入右侧预览区,上方也有搜寻功能,输入关键字后就会筛选出特定图案。

这里操作方式比较特殊一点,如果你想将图示移除,请先点击右侧预览区图示,然后按下上方选单的垃圾桶图案,就能将不要的图示删除(若是操作错误就将图案全部清除后重新选择吧!)。

STEP 3

接着点一下左侧选单的「Colors」开始自定颜色,原则上背景、阴影和图示颜色都能自由选择,如果没有想法,可直接使用底下的调色盘配色,将配好的颜色套用到当前图式。

STEP 4

另一个大家会用到的是「变更图示形状」,预设的预览图式为圆形,你可以调整成正方形或圆角,让它更符合你的网页或应用程式设计,只要点击左侧选单「Shape」就能开始修改。直接点击对应的图案选项快速变更,或者可拖曳底下的卷轴来设定圆角的弧度。

STEP 5

如果你觉得图示上的图案歪歪的,没关系,从「Icons」底下的「Icon Position」图示位置重新调整图案定位,不过在一些浏览器(或萤幕解析度)下好像无法正常显示,例如下图可以看到定位点就无法显示于正确的位置,但只要换个浏览器应该就能解决。

STEP 6

最后,从左侧选单点选「Size」来设定你要的图示大小,这也是一般图示网站无法做到的功能。从这里可以调整图示大小、背景大小,预设提供16、32、64、128、256、512 等选项,但也可以透过自定尺寸来输入你需要的大小数值,设定后会直接提供预览图。

当图示全部自订完毕,点击右上角的「Download」来将所有图案打包,下载为PNG 格式,这也是一般较常会用到的图片格式;假如你是要套用到网站、部落格,可选择「Code」来下载另外一种格式,也就是带有CSS 程式码及网页应用范例的档案,就能试着把图示加入网站使用。

关注天时,分享价值

更多内容,请到天时网