主流的网页栅格化线 – 嵌入 graaf

Graaf 可以直接在页面上显示栅格线,而且可以自定义栅格结构,大大减少前端或设计师检测页面的烦恼。
工具名称:graaf
工具地址:http://graaf.space/

自带多个栅格样式

目前自带了有10多个流行的栅格样式,只需要替换对应样式表名称就行,如下图,如果你需要 Bootstrap 的栅格,就点击 bootstrap.css 就能看到样式表链接,然后直接嵌入网页即可。 继续阅读主流的网页栅格化线 – 嵌入 graaf

让指定区域背景图像高斯模糊Nice! CSS

在网页设计中很多时候我们只看到半透明效果的层级效果,然而半透明+模糊背景,这种超漂亮的视觉却很少见,其中一个原因就是实现方式有难度,难道真这么难实现吗?No~ 现在只需要用 CSS 也能实现了!

今天分享的 Blur 案例就是使用纯 CSS 实现,可以指定某个区域、元素的背景模糊,这效果真的比普通的半透明漂亮多了,目前作者还写了多种模糊特效,能满足不同需求的你。

继续阅读让指定区域背景图像高斯模糊Nice! CSS

CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像

现在很多客户都买高分屏的电脑,如果直接发 JPG 图给客户,会影响设计质量。为了让网站设计效果图更加真实,最近把设计提案直接做成 Web 版,模拟浏览器真实视觉效果,同时能自动识别是否为视网膜显示屏,并自动切换为 2X 或 3X 图像。

继续阅读CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像

Sketch常用小技巧帮助提高工作效率

一、文件整理小技巧

sketch 在使用过程中,图层往往会比较多且一旦不注意整理的话,就会变得很混乱。如何快速整理好,快速输出成为设计师们的一大需求,我在使用过程中觉得有几个小技巧还挺实用:

当画板、文件夹很多又都是打开的情况下,要一个一个收起,非常麻烦。这时可以选择 View – Layer List – Collapse All Groups 快速收起所有画板,便于选择。

设计过程中,可能经常会复制很多飞机稿与设计稿混在一起,由于 sketch 画板之间缺乏标记,又不能对画板进行文件编组操作,所以往往很多时候要批量操作需要的画板时就会比较痛苦。此时其实用一个非画板的对象(可以是图形或者图片等)作为间隔,用来区分,就会很方便选择了。
继续阅读Sketch常用小技巧帮助提高工作效率

来自阿根廷视觉艺术家/插画家199HATES (Mau Lencinas)他通过插图将神话和街头装扮结合在一起

阿根廷视觉艺术家/插画家199HATES (Mau Lencinas)设计,他笔下的日本“不良少年”以游走在东京街头的小混混为设计主题,嘻哈复古未来主义和城市街头时装的混搭,并使用大量日本传统元素。

本月,某位视觉艺术家引起了我的注意。他是一位阿根廷2D艺术家,他的风格结合了来自各种亚洲传统的都市街头艺术和神话,尤其是日本的传统。

Glitch x 潮牌EASY DEMONS CLUB:般若恶男 HANNYA BOY 1:6可动人偶     购买这里

他的名字是Mau Lencinas,他的成绩199hates

我认为他的风格从他的角色所穿的衣服到用来突出他的主题的大胆色彩是如此迷人。我很想看到他所展示的图画小说或动画电影。
继续阅读来自阿根廷视觉艺术家/插画家199HATES (Mau Lencinas)他通过插图将神话和街头装扮结合在一起

FUI编年史

第一部完整中文FUI编年史,希望大家喜欢。不足之处烦请各位勘误,多多指正。

Image title

什么是FUI

作为我们这个时代的人,您一定有偏爱的好莱坞超级英雄吧?你喜欢复仇者联盟的钢铁侠还是小正太蜘蛛侠?或者你是银河护卫队的粉丝钟爱社会小浣熊?还是说你更迷异型这种怪物呢?作为科幻迷我和您一样迷恋这些关于太空和外星人的电影。我更迷恋这些佳作里的FUI。所谓FUI可以是幻想界面(Fantasy User Interfaces)、科幻界面(Fictional User Interfaces)、假界面(Fake User Interfaces)、未来主义界面(Futuristic User Interfaces)、电影界面 (Film User Interfaces)的简称。不管F代表什么,都是代表了未来和科幻的意义。在我们的年代我们可能终生都无法得见我们这个年代的FUI变成现实。但我们看到了五六十年代科幻电影里的神奇之物变成了现实:安德的游戏寓言了iPad,星球大战则给了好多战斗机灵感,少数派报告里出现了leap motion和空气投影的技术。所以科幻电影就像一艘巨大的外星飞船降临到我们百般聊赖的现实生活,令人着迷和眩晕。FUI主要的目的就是在电影或游戏中展示科技的发达,比如钢铁侠的HUD FUI。当然你可能会说,这些FUI就是瞎编呗,但是说的容易做得难,要知道让八只触手的外星生物或者斯塔克土豪顺利地操作什么钢铁盔甲或者一艘从超人老家来的飞船并让观众相信这些都是真的还是蛮难的:需要以用户(不一定是地球用户)为中心设计。

Image title

图为《钢铁侠》中的FUI

继续阅读FUI编年史

蒙德里安论艺

艺术必须超越现实,必须超越人性,否则,它对人毫无价值。对于注重物质利益者来说,这种超验的品质是含糊和虚幻的,但对于超凡脱俗者而言,它是确实是明确而清晰的。

现代绘画作品打动我们之处在于它们伟大的精神性的表现,我们也能在周围观察到写实的造型、写实的体块以及形体的存在,但这只能导致我们从物质意义上去看事物。

 

用AE bodymovin制作动画(网页和移动App中动画的实现方法)

1. 关于

关于网页端动画实现

web端做动画有多种形式,可以用CSS的animation,也可以用Canvas,或者是用JS控制CSS的属性形成动画。我们经常使用CSS做一些比较简单的动画,像过度、加载的动画,对于一些比较复杂的,可能会做成gif,或者是用Canvas,使用Canvas的控制粒度可以很细,同时工作量相对也比较大。做动画还有其它的方式,那就是使用After Effect(AE)/Flash/Premiere(Pr)/会声会影等视频软件,这种可视化的制作方式相对于直接写代码来说,会更容易简单自然。做动画本身应该使用工具进行制作,但是这种视频软件做出来的动画最后都是生成视频文件,并且通常体积还很大,没有办法直接移植到网页上去。然而好消息是,现在我们可以使用AE做动画,然后使用bodymovin插件导出成html文件进行播放。
继续阅读用AE bodymovin制作动画(网页和移动App中动画的实现方法)