注册本站  论坛  繁體中文

电脑技巧
手机 | MP3 | MP4 | 显卡 | 主板 | 显示器 | 光存储 | 笔记本 | 网络设备 | 移动存储 | 数码相机
键鼠 | CPU | 音箱 | GPS | 电视 | 服务器 | 投影机 | 机箱电源 | 品牌电脑 | 办公打印 |
| 网站首页 | Cisco | Windows | Linux | Java | Dotnet | Oracle | 网页设计 | 平面设计 | 安全 | 软件应用 | 电脑维修 | 办公维修 |
您现在的位置: 电脑技巧 >> 网页设计 >> Dreamweaver >> 基础教程 >> 网页设计正文

解决缩小图标变样问题

文章来源:blueidea 作者:佚名 更新时间:2007-10-10 【 】 【加入收藏

在这个冠冕堂皇的标题之下,我想回答一个土方,有人在博客提出很久了。该土方很好的描述了很多图标设计师所面临的典型问题。

这里是那个问题:

"你好,我也是做图标的,我有一个问题:如何合适地缩小一个图标?我做的大图标清晰而且漂亮,但缩小的图标就变得肮脏和讨厌了,我很想纠正这种情形"

在缩小图标的过程中,至少有两点。首先是和人们所能感知的具体特点细节有关,另外是和屏幕分辨率有关。

让我们开始第一项。

对一个大图标(或其他图像) ,我们潜意识对物体的大小进行分类,选出大型,中型和小型。对较小的图标,我们可以更粗略地划分:大(涉及图标大小)和小的物体。小的图标只有很微小的局部,如果一个设计师没有作出特别努力来帮助用户区分它们,那么所有内容都会被混合成一个密集点。

以一个抽象图形为例。在大的版本中,我们可以分辨出3大对象(圆,三角形和正方形) ,然后几个中型物体和一些小件物品。
单纯地缩小图形,我们只得到一塌糊涂的图形。

为了修正这种情形,我们需要清理图形中所有琐碎细节,只留下基本形状(大中型物体) 。

我们已经除去了细小的东西,而现在我们面临着第二个挑战:恢复图标上的大中型物体间的从属关系。事实上,当降低图标大小,我们减少了大中型物体的差异,因此我们要故意地夸大来弥合这一差距。

对大画面,我们清楚地看到要素间的关系和从属:三绿圆被蓝色条纹相连接。

那些会在缩小图形时消失,因而我们会看到的只是一个三角形。

放大圆和缩小条纹,强调元素间的差异会恢复最初的元素层次。

所以,请记住:摆脱琐碎,并强调从属地位。

现在让我们谈谈电脑屏幕功能,这是一个小图标创造中困难工作的一个基本原因。像素格。

为什么清晰漂亮的图标变得混浊和乏味?这是因为像素格把图标隐藏在折痕中,失去了所有的细节,虽然你已经那么狂热得画了这些细节。所以图标缩小之后,就会像"犯罪周刊"电视节目里演得那样。

你怎么办?

你已经做了一件事:你摆脱了无论如何将陷入湮没的小细节。你已经做了另一件事:强调基本部分,因此现在这些部分获得了更多的像素空间。

第三:注意,你现在不仅仅是画一幅画,实际上是从方形像素框建立起来的。显然,你对水平和垂直线没有问题,也是方形的形状。但其他的图形就不会那么容易画了,你研究严格的几何越深,你就会发现你的困难也越艰巨。它会在正面投影中呈现出来,这正是为什么建议把图标以这种方式转换。并且你一定要调整的所有物体的边到像素格。

现在我将以一个活生生的例子证明上面所说的一切:

[1] [2] [3] 下一页  

一个叫 Hedwig 的英俊猫头鹰同意协助我。

现在,我们有一个128 × 128大小的大的白猫头鹰,然后进行下面工作:缩小到48 × 48 ,然后到16 × 16 。什么是我们的常识忠告? " 将它变换比例到所需最小值" -细语那些喜欢复杂而巧妙的短语。那些的熟用photoshop人说 "按下ctrl+T,并按住shift键缩小" 。 ?Seize and squeeze!? -对那些喜欢简单而快速的人巧辩。

那么,让我们跟随它的建议,并看看结果。

上一页  [1] [2] [3] 下一页  

尽管事实上48 × 48的版本似乎是可以接受的,但是还有一定的改进余地。

甜美的。

但目前16 × 16版让人觉得是猫头鹰粪而非一个猫头鹰本身,因此把它重新涂画一遍。

这是由于它使我们相当不知羞耻地看到人的眼睛里去。

Hedwig 飞,飞!飞向第七部哈利波特,我不会告诉那里什么东西等着你,到时候你就知道了。

上一页  [1] [2] [3] 

  • 上一篇网页设计:

  • 下一篇网页设计:
  • 最 新 热 门
     Flash教程:if条件语句的用法
     Flash教程:测试AS代码的执行速度
     Flash教程:trace()的使用
     实现在AJAX下的前进、后退功能
     创建吸引访问者的网站内容的14种方法
     LBS功能:图片的自适应实现代码
     LBS增加引用地址和永久地址点击复制功能
     学习CSS布局网页的一些实例
     CSS学习者:2008年不要作浮躁的人
     网页设计制作之改进超级链接效果
    最 新 推 荐
     玩转Dreamweaver-CSS属性
     玩转 Dreamweaver速记 CSS 属性
     举例熟悉网页的头部信息表示涵义
     网页WEB字体,CSS如何控制?
     用HTML和CSS写出漂亮正规的BLOG
     blockquote标签应该怎样使用?
     解决缩小图标变样问题
     未知高度的非表格垂直对齐
     样式表CSS中div、span和center元素
     用CSS来控制网页背景解说
    相 关 文 章

    网页表格或div层在网页中被撑开解决之道
    CSS解决文字环绕图片问题
    用XMLHTTP Post/Get HTML页面时的中文乱码之…
    ajax中文乱码解决方法
    Flash AS解决中文mp3乱码
    输入法下keyup失效的解决方案
    js+css图片自动等比例缩小且垂直居中
    dedecms发布分页问题完全解决方案
    dede(织梦)CMS常见问题及解决方法
    解决Dreamweaver中关于应用CSS的小问题

    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站公告

     

    Copyright 2006-2008 pcjx.com All Rights Reserved
    电脑技巧 版权所有 粤ICP备06059145号 地图
    本网站所有内容未经许可不得转载或做其他使用