icon 制作

简介: 引用:http://apps.hi.baidu.com/share/detail/30039475 ico是Icon file的缩写,是Windows的图标文件格式的一种,可以存储单个图案、多尺寸、多色板的图标文件。

引用:http://apps.hi.baidu.com/share/detail/30039475

ico是Icon file的缩写,是Windows的图标文件格式的一种,可以存储单个图案、多尺寸、多色板的图标文件。图标是具有明确指代含义的计算机图形。其中桌面图标是软件标识,界面中的图标是功能标识。

 

  图标有一套标准的大小和属性格式,且通常是小尺寸的。每个图标都含有多张相同显示内容的图片,每一张图片具有不同的尺寸和发色数。一个图标就是一套相似的图片,每一张图片有不同的格式。从这一点上说图标是三维的。图标还有另一个特性:它含有透明区域,在透明区域内可以透出图标下的桌面背景。在结构上图标其实和麦当劳的巨无霸汉堡差不多。

 

  一个图标实际上是多张不同格式的图片的集合体,并且还包含了一定的透明区域。因为计算机操作系统和显示设备的多样性,导致了图标的大小需要有多种格式。

 

  操作系统在显示一个图标时,会按照一定的标准选择图标中最适合当前显示环境和状态的图像。如果你用的是Windows98操作系统,显示环境是 800x600分辨率,32位色深,你在桌面上看到的每个图标的图像格式就是256色32x32象素大小。如果在相同的显示环境下,Windows XP操作系统中,这些图标的图像格式就是:真彩色(32位色深)、32x32象素大小。下面就是Windows各个操作系统中的标准图标格式:(单位:大小象素—颜色)

  Windows 98 SE/ME/2000

  48 x 48 - 256 32 x 32 - 256 16 x 16 - 256

  48 x 48 - 16 32 x 32 - 16 16 x 16 - 16

  Windows XP

  48 x 48 - 32bit 32 x 32 - 32bit 24 x 24 - 32bit * 16 x 16 - 32bit

  (32位真彩色支持多通道透明。)

  48 x 48 - 256 32 x 32 - 256 24 x 24 - 256 * 16 x 16 - 256

  48 x 48 - 16 32 x 32 - 16 24 x 24 - 16 * 16 x 16 - 16

  * 这种格式在XP图标中并不是必须的。

  在Vista系统下最大可以支持256 x 256

  同时,非标准的ico格式文件也支持不规则尺寸的存储。

  注意:Windows98/2000对24 x 24格式的图标不兼容。你可以在相关应用软件中打开含有这种图像格式的图标,但操作系统却认为是无效的。你必须确保你所设计的图标中至少含有以上所列的图像格式来获得良好的显示效果。如果操作系统在图标中找不到特定的图象格式,它总是采用最接近的图象格式来显示,比如把大小为48 x 48的图标缩小为24 x 24象素大小。当然,效果就差些了。

方法一

可以在线生成,但是背景不是透明的 http://www.bitbug.net/

方法二

步骤1) 用HyperSnap-DX6或者Photoshop和Fireworks软件,制作出你需要的16×16像素的透明背景png或gif格式收藏夹图片,然后把该图片导入Axialis IconWorkshop软件(该软件可以百度一下下载)。

这里我现在用HyperSnap-DX6来制作

(图文教程如下:)

icon可以用多个软件制作,也可以通过一些网站把普通图片转换为.ico文件,但通常存在的问题是图片本该透明的地方经转换后变为了黑色或者白色,十分影响效果。难道一定要制作正方形的.ico文件方能掩盖此缺陷?

首先,我们得下载个HyperSnap,这里推荐使用的是绿色版本的HyperSnap-DX6, 不用安装,解压使用,此软件的经典用途是用来抓图,多中抓图方式十分强大,同时它又具有很多图片格式的转换功能,包括转换为.ico和.cur(Windows光标文件,就是鼠标形状文件)。是个十分厉害的家伙!

 

在软件中打开图片,最好是.png,因为.png文件该透明的部分是可以做成透明的。其实呢,能显示透明的图片文件也不外乎是.png或.gif等几个。这里以.png文件为例。

 

接着就是把图片放大到800%,我为什么选800%呢?因为HyperSnap最多就是放大到800%了。要做成.ico文件的图片要不就是32*32px要不就是16*16px,太大太小都不行,所以进行转换之间就先把图片转换成如此大小了哦!

 

放大为800%的图片你就能看清楚每个像素了,每个方格就是一个像素,图3的.png就是32*32px的。

 

接着我们要设置前景颜色,这里暂不说为什么我们得设置前景颜色。

 

纯白色得红、绿、蓝三色都为255,我们把红、绿、蓝设置为3个254是为了那个颜色很接近白色但又不是白色,这可是十分有玄机的哦,不过还是暂时卖个关子。

 

设置了前景颜色后画线工具的颜色就是我们刚才设置的3个254了。在这个.png中,鱼的眼睛和鱼以外的部分是白色的,但经过用画线工具处理鱼眼睛以后,鱼眼睛就看上去是白色,但实际上只是近似白色而已,放大到像素阶段尚且很难察觉,更不用说是正常大小了。如此操作,真正是纯白色(3个255)的部分就只剩下鱼以外的地方了。而我之前所说的技巧也正是这里。

 

第7步是关键步骤,第4步到第6步所做得一切工作都是为第7步做准备!!!!废话少说,看看第8步的效果先!

 

第7步的处理那些该透明的地方变成了透明了!!!原因是在第7步我们选择了纯白色的区域转换为透明!我们之前先要把鱼眼睛弄成很接近纯白色的白色目的就是为了让它和真正得纯白色分开,那么我们进行第7步处理的时候我们就不会把眼睛也弄成透明了。并不是制作的所有icon都必须要进行如此操作,如果你的icon的核心部分的颜色没有和透明部分的颜色一样,那么就只需要把透明部分的颜色设置为透明。通常来说,.png文件在HyperSnap中打开,透明部分的颜色为白色,于是只要你要处理的图案中没有白色,那么你就可以跳过第4步到第6步,从第3步直接跳到第7步。到达第8步后就算完成了,你可以把它另存为.ico文件。

 

保存为.ico文件后图片会自动变成这个样子。建议你选择“撤消”回到上一步,把图片也保存为.gif格式,有另一个玄机的哦!

 

从Windos对比图我们可以分明看出,fish1.ico是利用上面的方法做出来的,而fish2.ico只是直接把.png输入到HyperSnap然后用.ico输出,本该透明的地方并不透明。

 

步骤2) 导入以后,点击上方的“从图像创建Windows图标”按钮,这时会自动弹出一个对话框,生成好几种图像格式,我们只需选择16X16 -XP,然后点击确定按钮。

3) 从菜单栏点击另存为,弹出对话框以后保存类型选择*.ico格式,文件名写favicon,然后点击保存。

4) 把制作好的favicon.ico图片,上传到网站根目录。清除浏览器的缓冲,搞定。

相关文章
|
6月前
|
移动开发 JavaScript 小程序
uView Icon 图标
uView Icon 图标
98 2
|
6月前
el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果
el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果
|
小程序
微信小程序项目中使用icon图标
微信小程序项目中使用icon图标
249 0
1、小兔鲜icon图标制作
1、小兔鲜icon图标制作
170 0
1、小兔鲜icon图标制作
|
前端开发
项目中自定义icon(类似ElementUI的icon)
项目中自定义icon(类似ElementUI的icon)
200 0
|
人工智能
在程序中使用自己设计的ICON图标
使用thymeleaf模板引擎,少不了图标,常用的图标库:FontAwesome、glyphicons;那么如何把自己设计的图标引用到自己的程序中去呢?
485 0
在程序中使用自己设计的ICON图标
|
Web App开发 前端开发 JavaScript
用SVG 制作 Sprites的图标系统(一)
我一直是图标字体的大力支持者。很多网站真的需要一个图标系统,图标字体提供了一个该死的精细系统。但是,我认为假设你对 IE 9+ 很好,使用内联 SVG 并且 <use> 引用图标的元素是一个优秀的系统。
245 0
用SVG 制作 Sprites的图标系统(一)
|
Web App开发 缓存 前端开发
用SVG 制作 Sprites的图标系统(二)
我一直是图标字体的大力支持者。很多网站真的需要一个图标系统,图标字体提供了一个该死的精细系统。但是,我认为假设你对 IE 9+ 很好,使用内联 SVG 并且 <use> 引用图标的元素是一个优秀的系统。
221 0
|
前端开发 IDE 开发工具
Blend_技巧篇_导入PSD文件制作ToggleButton (Z)
原文:Blend_技巧篇_导入PSD文件制作ToggleButton (Z) 系统: Win7sp1 32位 IDE: Microsoft VisualStudio 2013 Ultimate Blend 2013 工程: .
1295 0
|
C# Windows
C# 获取系统Icon、获取文件相关的Icon
原文:C# 获取系统Icon、获取文件相关的Icon 1、获取系统Icon 工具下载SystemIcon.exe using System; using System.Collections.
2391 0