加入收藏
 地图
 用户登陆
 帮助中心
电子商务 SEO动态 SEO技术 SEO软件 SEO推荐 网站留言 SEO用户 SEO专栏 电子商务   SEO培训
今天是:2019年4月19日 星期五   您现在位于: 首页 →  SEO技术 → 计算机技术(软件频道)

创建Windows XP图标教程(中)

2019/4/19  电子商务网  浏览选项:    本文已被浏览 1205 次
投影
使用投影后,Windows XP 图标将更清晰且更具立体感。可在Photoshop 中实现这种效果。
若要为图像添加投影,请在 Photoshop 中双击图像的图层,并选择 Drop Shadow。然后将 Angle 更改为 135,Distance 更改为 2,Size 更改为 2。此时投影为 75% 不透明黑色。

                                      
图 10:为图标添加投影前后
轮廓
绘制 XP 样式图标时,为图像添加轮廓可使之更清晰,并可保证图像在不同背景色上都具有较好效果。
步骤 1:概念
设计新图标时,建议先用纸笔将基本思路绘制出来。
以下是 Windows XP “图片收藏”图标的初稿示例:

                                      
图 11:“图片收藏”图标初稿
设计图标时,请考虑以下因素:
使用已有概念以确保真实表达了用户的想法。
考虑图标在用户界面环境中以何种形式出现,以及如何作为图标集的一部分使用。
考虑图形的文化背景。避免在图标中使用字母、单词、手或脸。必须用图标表示人或用户时,请尽可能使其大众化。
如果图标中的图像由多个对象组成,应考虑如何使图像尺寸更小。建议在图标中使用的对象不超过三个。对于 16 × 16 的尺寸大小,还可考虑删除某些对象或简化图像使之更容易辨认。
注意:在图标中使用 Windows 标志时,请遵守以下规定:
为遵守商标及 Windows 品牌规则,除 Windows 的 Update 图标外,不要在图标中使用 Windows 标志。 
Windows 标志只能在 Microsoft® Windows® 操作系统所提供的图标中使用。
Microsoft 品牌组应审查图标中 Windows 标志的使用情况。
公用图标

                                      
图 12:Windows XP 的公用图标
公用工具栏图标

                                      
图 13:Windows XP 的公用工具栏图标
步骤 2:绘制图像
若要绘制 Microsoft Windows XP 的样式图标,建议您使用矢量工具,如 Macromedia FreeHand 或 Adobe Illustrator。按图标设计概述中指定的操作使用调色板和样式特征。
使用 FreeHand 或 Illustrator 绘制图像。 
分别创建三个尺寸的图像。因为稍后将为图像添加投影,所以创建的三个尺寸应为 46 × 46、30 × 30 及 14 × 14 像素。
复制矢量图,并将其粘贴到 Photoshop 中。 

                                       
图 14:Paste(粘贴)对话框
注意:建议使用 Photoshop 作为图像创建工具,因为创建 .ico 文件所用的 Gif Movie Gear 可以直接导入 Photoshop 文件。在 Photoshop 中通过“RGB”模式创建的图像都具有 alpha通道。如果图像或图层具有透明度,对图标而言,使用通道将非常有意义。
步骤 3:创建 24 位图像
将矢量文件粘贴到 Photoshop 中后,下一步就是完成 24 位图像。
将三个尺寸的图像粘贴到 Photoshop 中后,请检查图像的可读性和分辨率,特别是 16 × 16 大小的图像。可能需要进行像素推移。如果不能清晰地显示 16 × 16 的图像,应在 FreeHand 中简化该尺寸的图像。
若要为图像添加投影,请双击图像的图层,并选择 Drop Shadow。然后将 Angle 更改为 135,Distance 更改为 2,Size 更改为 2。此时,投影为 75% 不透明黑色。

                                       
图 15:设置投影
若要合并投影和 24 位图像,请新建一个空层。在 Layers 菜单中,选择 Merge Visible 将三层合并在一起。

                                       
图 16:合并图层保留投影
新建三个 Photoshop 文件,每个文件的尺寸分别为 48 × 48、32 × 32 和 16 × 16 像素。复制并粘贴相应图像。如果图像投影被截断,应在FreeHand 中缩小图像尺寸,然后重新执行这些步骤。
将每个文件保存为 .psd 文件。不要将图像图层与背景图层合并在一起。最好在文件名中包含尺寸和色彩深度。
步骤 4:创建 8 位和 4 位图像
创建 8 位图像
既然已经制作完成了 24 位图像(用于合成 32 位图标),下一步则是创建 8 位图像。8 位图标将以低于 32 位的任意颜色模式显示。
8 位图标不具有 8 位 alpha 通道。因此,要对 8位图标进行边缘清理,否则边缘会有锯齿。
在 Photoshop 中, 复制 24 位图像图层并将图层重命名为 8 位图像。
新建空层并用深色(如蓝色)填充图层。
将 8 位图像图层与新层合并。
用纯色清理边缘,去除已消除锯齿的像素。固定使用某种方法对边缘进行处理,淡化边缘的锯齿效果。
在浅色(如白色)背景上检查图像的外观效果。

                                       
图 17:清理 8 位色彩深度的图像
新建三个 Photoshop 文件,每个文件的尺寸分别为:48 × 48、32 × 32 和 16 × 16 像素。复制并粘贴相应图像。
接下来需将图像的索引颜色更改为 256 色。8 位图标可以具有自定义的调色板。
在 48 × 48 图像中,使用独特的颜色 — 图像中未曾使用的颜色填充背景。通常使用品红色 (R255 G0 B255)。 
转至 Image->Mode->Indexed Color,然后选择 Flatten Layers。
在 Palette 下拉菜单中,选择 Custom。在 Custom 对话框中,单击 OK。在 Indexed Color 对话框中单击 OK。 

将文件保存为 .psd 文件。
使用同样的背景色和自定义调色板保存另外两种尺寸的文件。
将每个文件保存为 .psd 文件。
创建 4 位图像
若要使图标在较低的显示环境中具有较好的显示效果,请使用 16 色图标。 
将 8 位图像的索引颜色改为 Windows 16 色调色板。
仅用 16 色调色板中的颜色清理图像。 
在图像的底部和右侧边缘处使用黑色轮廓。
在图像的左侧和顶部边缘处使用深灰或其它深颜色。
使用同样的背景色保存三种尺寸。确保图像中未使用背景色,因为背景色将作为透明色。

                                       
图 18:4 位图标示例
步骤 5:创建 .ico 文件
所有图像都准备好后,即可将它们编译成 .ico文件。若要创建 32 位图标,需使用 Gif Movie Gear (GMG) 工具。 在 Gamani(英文)网站可获得此工具。
在下面的步骤中,我们将讨论创建典型 .ico 文件(具有三种尺寸和三种色彩深度)的过程。

总共应有 9 个文件 — 每种色彩深度有三种尺寸: 
48 × 48,24 位 
32 × 32,24 位 
16 × 16,24 位 
48 × 48,8 位 
32 × 32,8 位 
16 × 16,8 位 
48 × 48,4 位 
32 × 32,4 位 
16 × 16,4 位
打开 Gif Movie Gear (GMG),将每个图像文件拖动到窗口中(或使用 File->Insert Frames)。 每个图像都将成为一个帧。
将 24 位图像(或带有图层的 .psd 文件)拖动到 GMG 中时,将会出现一个对话框:


                                       
图 19:在 Gif Movie Gear 中设置 24 位图像
请确认设置如下所示:
图层为多帧动画
未混合:每层为一个帧
保持背景透明
每个 24位图像的背景层都将显示为一个帧。选择帧,并按 Delete 键可删除这些空白帧。
现在,总共应有 9 个帧。图标应按颜色分辨率的递增顺序排序:前三个为 4 位(16 色),接下来的三个为 8 位(256 色),最后三个为 24 位颜色加上 8 位 alpha 通道(共 32 位)。 

                                       
图 20:Gif Movie Gear 中帧的顺序 
注意:若要检查图像的属性,请将鼠标移到图像上。将显示一个工具提示框,其中包含每个图像的分辨率信息。默认设置包括维度、透明度和位计数。可以通过 Edit->Preferences->Frame Tips 添加或删除所显示的项目。
对于 8 位和 4 位图像,背景应是透明的。GMG 使用暗黄绿色表示“透明”色。可以使用 View->Transparency As 菜单项设置自己的颜色(或仍然使用默认背景色)。所选颜色只用于查看图像效果,不会影响图像本身。 

若要使 8 位和 4 位图像透明: 
选择一个帧,并单击 Pick Transparency Color 工具栏图标(吸管)。 

                                       
图 21:使用透明工具
将打开一个对话框,其中显示您的图标。使用吸管工具单击图标的背景色。此颜色将更改为暗黄绿色(或在 GMG 中选作透明背景色的颜色)。 
重复所有 4 位和 8 位帧。
若要保存图标,请选择 File->Save Icon As...。
(作者:Windows 用户体验组)
 发布人:杰米  [ → 我要发表文章 ] 上篇文章:堵住网络Bug,垃圾短信走开!
下篇文章:创建Windows XP图标教程(上)
→ 主题所属分类:  计算机技术 → 软件频道 → 『关闭窗口』
压缩包文件查找利器ZipScan
杀毒软件在线升级文件的备份与恢复
让WinXP性能更优越的四技
资源放送:网上翻译好去处
让XP网桥功能发挥应有作用
个人网站向商业网站转型的必备条件分析
绝对最酷的QQ2005应用秘技
给虚拟内存起个中文名
踏网无痕小技巧
Google的原罪--网页序列等级
WinXP之后安装Win2000
五分钟全面打造你的安全防线
TCL称让数字电视都具备IPTV功能
巧存MSN的对话历史记录
批量转换Word文档
禁用服务有利有弊
TS与VT的使用及下载(上) Te..
近一年来RSS和Blog已逐渐成为..
毛伟:IP网络取代传统电话网 EN..
判断网站更新的SEO课堂笔记
百分百突破防火墙 PP点点通200..
9flash:个人网站商业化之蜕
安装和下载(上) 新干线Poco ..
实例1:不用光盘也能刻录(上) N..
加密三部曲:密码管理
让你一次HIGH个够--QQ酷玩技..
Excel中双击格式刷的妙用
信息化:中小企业也安全
让XP网桥功能发挥应有作用
关注!QQ下一版本独家信息
自动登录Win 2000技巧两则
据悉:微软牵手广州公司试验网络电视
什么是在线销售型的企业网站?
Linux与Win9x/2000打..
谈谈MP3原理及其应用
网上开店,功能和服务一样重要
小技巧:Coreldraw滤镜转彩..
论坛变色龙:想变就变
无线热点分布——呼和浩特
Windows 系统文件恢复全功略..
网络电话二季发牌成泡沫 一两年内放..
给商品定价的13种技巧
Web 2.0 网站成功的关键
爱车族的网上“买卖”
不得不看:长期损害硬盘的六款常用软件
 热门文章
 
 保存网页图片的八种方法 (53472)
 我的QQ 我的信息中心 (47644)
 2006年值得关注的十个web2.0网站 (39617)
 用OE邮件发短信不再是梦想! (26467)
 传统商务与电子商务的区别 (11232)
 让Windows序列号原形毕露 (10853)
 近一年来RSS和Blog已逐渐成为互联网发展的新潮流 (8269)
 如何让搜索引擎收录新网站 (8235)
 在Word中输入乘号和除号的几种方法 (7320)
 IE6用户如何升级到IE7.0浏览器版本 (7171)
 更换开机画面 Win XP开机画面随我定 (7059)
 Ping命令的使用技巧 常用网络命令使用技巧详解 (6369)
 智能ABC输入法中的使用技巧 (6110)
 抓就要抓最清晰的图片 (6024)
 如何保持网站排名课程记录 --  电子商务网原创 (6020)
 最近更新
 
 保存网页图片的八种方法 (8月1日)
 我的QQ 我的信息中心 (8月1日)
 2006年值得关注的十个web2.0网站 (8月1日)
 用OE邮件发短信不再是梦想! (8月1日)
 传统商务与电子商务的区别 (8月1日)
 让Windows序列号原形毕露 (8月1日)
 近一年来RSS和Blog已逐渐成为互联网发展的新潮流 (7月21日)
 如何让搜索引擎收录新网站 (8月14日)
 在Word中输入乘号和除号的几种方法 (8月1日)
 IE6用户如何升级到IE7.0浏览器版本 (12月28日)
 更换开机画面 Win XP开机画面随我定 (8月1日)
 Ping命令的使用技巧 常用网络命令使用技巧详解 (8月1日)
 智能ABC输入法中的使用技巧 (8月1日)
 抓就要抓最清晰的图片 (8月1日)
 如何保持网站排名课程记录 --  电子商务网原创 (8月15日)
 文章搜索
 
搜索选项:            
  → 评论内容 (点击查看)
(没有相关评论)
  → 发表我的评论
您的姓名:  您的E-mail:

评论内容:
发表评论:  
   电子商务网每日推荐文章: Google补充材料形成的原因 2019/4/19
    我们在Google中进行搜索时,如果搜索结果比较少,有时候会发现有的网页后面被标记为“补充材料”(Supplemental Result)。补充材料是什么东西呢?Google在Google向网站管理员提供的信息高级问题里是如此定义补充材料的:
    补充网站是Google辅助索引的一部分。对辅助索引进行抓取的限制少于主要索引。例如,一个网址的参量可能使该网站无法被抓取到主要索引中,但仍可能被抓取到我们的补充索引里。
    将网站包括其中的索引是完全自动的,没有任何方式可以选择或更改您网站的索引。请放心,包含网站的索引不会影响该网站的PageRank。
    根据Google的说法,作为补充材料的网页,只是一种辅助、补充的索引,并不作为主要索引。也就是说,这些网页并非在Google的主数据库中,而是在辅助数据库中。一般情况下,当我们在Google进行搜索时,他展现给我们的结果,是主数据库中的网页,并非辅助数据库中的网页。由此可以得出结论,作为补充材料的网页,在Google的表现会非常非常的差。
    根据yoo的观察,作为补充材料的网页,被Google爬虫爬行的间隔时间非常长,很多时候几个月、甚至半年都不会被Google爬虫造访,严重影响网页在Google数据库中的更新。同时这些网页的排名非常差,只有在搜索结果很少的时候,才会被Google列出来。一般情况下,根本无法在搜索结果里看见这些网页。......查看详细内容
关于我们 ┋ 网站留言 ┋ 电子商务网成员网站 ┋ SEO培训基地 ┋ 地图 ┋ SEO培训 ┋ 管理 ┋ TOP
合作站点: 杰晶网络 | 建材互联 | Herbal | 淘宝优惠券 | 中国保健品网 | OilPainting | NHE | 杰米世界 | 南强新网
电子商务网 网络营销顾问:杰晶网络 版权所有
Copyright © 2006 ECSoon.com All Rights Reserved