腾讯CDC:掌控像素的虚实


3月份,Photoshop CS6 Beta版(下文简称PS CS6)发布公测,有着多项惊艳的新特性,工作中整天和像素打交道,感触比较深的特性就是PS CS6支持矢量对象绘制、变换时像素自动对齐网格。

当然,对象绘制、变换时像素对齐网格并不是PS CS6独有的功能,只是更智能更好用了,PS CS6的像素自动对齐网格功能在绘图过程中,无疑方便了很多,不必再担心图形边缘会出现模糊,但是我们在实际的图形设计过程中会发现,还是会经常需要调整一些路径没有完全对齐到网格产生的半透明的过渡像素,用来平滑图形边缘减少锯齿感,或让图形看上去更饱满、更细腻,我们称其为次像素 (或亚像素,Sub-pixel,一般用于屏幕显示技术等领域),如下图所示。

浅析·平面与网页设计的差异性

这段时间,一直在做印像派的商品设计,如照片书、台历之类。从网页产品设计转行过来的我,时常在想,平面设计和网页都是设计,但区别又是那么大,那不就与大自然中的猫和老虎一样嘛,它们都属于猫科动物,但又不是同一种生物,有着很大的差别。

现在就让我们来分析一下同样作为视觉传达设计,她们之间的差异性。

关于网页设计的几点不得不吐的槽


今天想聊一聊关于网页设计方面的一些问题。最近在公司做网站,遇到很多客户,听了一些客户关于对自己网页设计的意见,其中有很多条值得吐槽。我随便举几个栗子。

用一张图片实现水平和垂直方向点状线背景

众所周知,IE6是不支持dotted边框的,显示的效果和dashed一样。如果为了美观,就需要用到背景图片了。

之前做这些竖直和水平的点状线,经常是分别做一张点状线的背景图片来对应实现。
最近做页面的时候忽然想出下边的图片来:

设计稿标注首屏线的确定始末


这是内部的一个邮件记录,分享出来听下业内同行的声音。

事情是这样的..

==

先是 A 推荐了白鸦的推到内部群:

“设计师们一定要养成一个习惯:无论是原型设计还是视觉设计,一定要标注一下首屏线,明确首屏需要、可以显示到哪里。”

==

然后,B 觉得这点子不错,根据内部统计系统中的操作系统、浏览器分布和屏幕分辨率等数据,结合浏览器状态栏、任务栏等高度进行分析:

网页图像优化技巧

设计之美

身为一个网页前端开发人员,不免要经常处理一些图片。如何使图片体积更小,质量又有保证是一个问题。

图像格式概念:

.gif格式适合于动画、透明等类型图片。如果要做透明背景的logo,可以考虑输出.gif格式的,但是要注意,.gif格式透明虽然是IE6也支持的,但是它所支持的透明度较差,应用在某些颜色背景上时可能会时图片出现毛刺和白边等。.gif也适用于图片颜色较为单一的时候使用。

.png格式是一种比较好的图片格式,根据支持的色位,又分为png-8和png-24。png-8较好的一点是透明度效果好,且也被IE6支持。如果输出为png-24格式的包含透明度的图片,那就会在IE6下失去透明度,成为白色背景。如果图片颜色不是很复杂,但是也不是很单一的话,试试png-8格式,一般会比.gif格式体积更小。

.jpg(jpeg)格式适用于颜色丰富的图片,比如产品图片,风景,人像摄影等。但是不支持透明度和动画。用PS输出此类图片时,一般质量设为60-70%就比较合适了,可以兼顾到质量和体积。