主流的网页栅格化线 – 嵌入 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常用小技巧帮助提高工作效率