初学PhotoShop画网站效果图所作 – AliTee

虽然接触网站设计比较早,而且很早就习惯了不用可见即可得工具(比如DreamWeaver)而直接写HTML和CSS,但是到了要帮别人做设计的时候,效果图是必要的。 而且,以前没有学习过“网页设计”,一开始就凭空动手写代码了,做出来的页面缺乏一些美感。 在以前做老GeeKaa那阵,只有我和H大大俩人,他作为程序员负责一些技术实现,我负责技术外的事情,我们没有设计师,那我自然要学习一点设计。 何况,我对Web设计,是真的爱啊…… 就是缺乏正规的教育背景和理论知识去支撑。 但是我非常爱上一些相关的网站,从早期的蓝色理想到后来天天翻NetTuts+和Smashing Magazine。 然后也动手做了一些实践,比如结合当时阿里妈妈刚出的淘客,设计一个T恤推荐分享站点。 You Cant’t decide who you are but you can decide what’s your look. 其实也不知道这英文对不对,我的英文很烂。 但是我总是会在做设计的时候不由自主的把相应的文案配上去,而不是单纯的Lorem ipsum。 个人感觉是,灵感往往会在你正在专注做某件还没完成的事情时迸发,万事具备后很难吹到东风。 当时文案也写了个中文的版本: 现在看来,整个页面的头部应该再压缩一些,如上面中文版所截的位置差不多。 而且当时的文案应该更精简。

从纯CSS蒙娜丽莎说起

从 1行HTML+纯CSS画蒙娜丽莎 说起。 复制那段HTML代码, 保存成.html文件,然后用Safari或者Chrome等先进的浏览器打开。 看到了什么? 这实际上是一个只用1个HTML5标签和一段CSS绘制出来的达芬奇名作蒙娜丽莎! 不含任何JavaScript哟! 上回还分享过CSS3画出来的超级英雄,可是人类似乎无法阻止CSS hacker们用CSS捣鼓更多玩意儿的步伐了。 这回硬生生画出了个这么复杂的图像。 不过如果去了解“成像原理”,发现其实是两码事。 这个蒙娜丽莎其实是将一张jpg图片转格式生成的,所以说只要你有那个转格式工具,小白也可以充大黑。和其他CSS作画行为比起来,好比是拍照和画画的区别。 而实现这一切的这部相机就是: image2css 这是Web设计师Jay Salvat在Github上的一个开源PHP项目。 git clone https://github.com/jaysalvat/image2css.git index.php上还提供了一些初始化选项,用来设置像素点的大小以及画面的柔化等,并且可以选择调用的图片。 $img = new PointlessImageToCssConverter(“monalisa.jpg”); $img->setWidth(200); $img->setPixelSize(4); $img->setBlur(4); 演示代码在CodePen: 纯CSS已经是某些人所追求的境界了,下次有机会和大家分享我玩过的一些纯CSS游戏。 欢迎到 GeeKaa HTML5 节点 分享和讨论更多HTML5相关资讯。 Update 一位叫Techird的网友分享了他的基于Canvas方案的相关文章「Image […]