经典像素游戏大全 [像素图标绘制技巧]
图标是网页中的常见元素,主要功能是表意,也包含装饰及品牌传递的作用。存储为gif、png等位图格式的图标,称为像素图标,大小通常为16px、24px、32px等。当然像素图标也可以理解为像素风格的图标,不一定是位图格式存在,本文中我们按格式去理解。与像素图标相对的是矢量图标,通常以svg格式及字体格式存在,大小可以随意调整。这篇文章主要介绍个人的一些像素图标绘制经验,不足之处还请各位高手多多指教。
基本知识
一、图片格式与透明
全透明、alpha透明、图片格式及兼容性
全透明是指图片的格式只支持完全透明和不透明两种状态,alpha透明是指图片格式可以支持不同的透明程度。
各种图片格式对透明的支持程度以及浏览器兼容性见下表

全透明和alpha透明对图标有什么影响
那么这些东西对我们做像素图标有什么影响呢?看下图:

可以看到,全透明的图标需要根据应用场景的背景色进行优化,背景色变化了就要重新优化,如果不想优化并且要通用的话,就必须限制设计的表现手法,这样通常会让图标边缘锯齿感增强。而半透明的图标不用优化,也可以多处通用。
我们看一个没有针对不同背景优化的例子:

可以看到,在暗色背景下使用了针对白色背景优化过的全透明图像。结果是出现很多白色杂边,严重影响了品质感。
Ie6
这样看来,用支持Alpha透明的PNG-24才是王道呀。可惜,在ie6下,PNG-24的Alpha透明需要ie特有的css滤镜配合才能实现,所以如果你的产品有很多ie6用户,在做图标前,先跟前端沟通。
二、矢量工具与像素对齐
在画图标的整体大关系或者画扁平化风格图标时,我们会用到矢量工具,这里会碰到一个新手常常遇到的问题-像素对齐。
什么是像素对齐
在位图文件内使用矢量工具时(例如PS里用形状工具、钢笔工具),会遇到下图的这种情况。

可以看到右边的正方形的边缘是有虚的,这是因为这个正方形的边缘没有与像素的边缘对齐。
再看一个实际例子:

可以看到,对齐了像素的图形有着更清晰锐利的效果。
PS内的设置帮助我们对齐像素
我们可以在PS里通过一些设置方便地对齐像素,以CS6为例。
1.将网格线设置为以像素为单位的,方便我们随时查看是否对齐像素。顺便提一句,网格显示/隐藏的快捷键 ctrl+’。
首选项 – 参考线、网格和切片 – 根据自己需要设置网格大小,单位选择像素。

2. 使用矢量工具时,勾选对齐边缘,绘制的图形会自动对齐像素
选择矢量工具(钢笔、形状工具) – 顶部工具栏里找到对齐边缘 – 勾选

3. 设置变换矢量图形时自动对齐像素。缩放、变换矢量图形时也可以自动对齐了,注意这个是CS6才有的功能。
首选项 – 常规 – 勾选将矢量工具变换与像素网格对齐

从Ai复制到Ps怎样保留可编辑性
从Ai复制矢量图形到Ps时,应当选择粘贴为形状图层,这样就可以在Ps内继续编辑图形,用形状选择工具将锚点一一调整以对齐像素。

像素对齐并不是绝对的
个人观点:是否要像素对齐应该是根据想要的效果和图形复杂程度决定的。见下图:

左边五角星需要平滑、饱满的效果,并没有对齐像素,但是不能说他比对齐像素的五角星差。
三、铅笔工具与像素画技巧
在刻画像素小图标的细节时,常会用到铅笔工具。这里会涉及到一些像素画的技巧。
像素画基本技巧

更详细的像素画教程网上很多,可以自行百度。
次像素的使用
虽然像素画没有次像素的概念。但在画图标时,用好次像素可以使线条、图形更加平滑。

绘制像素图标的流程
1,明确图标的功能
图标主要功能是表意,即以图形化的方式表达网页上的一项操作的意义。但在表意外还有装饰性及品牌性的功能需要考虑。装饰性是指图标的视觉效果能够带来品质感、美感;品牌性是指图标的风格应该与产品品牌特性保持一致。
在不同的需求下,表意、装饰性、品牌性的权重是不一样的。例如网页的favicon,首先要考虑品牌性(与产品自身品牌形象保持一致),其次要考虑装饰(针对不同平台及使用场景,需要提供多种尺寸以达到图片不虚化)。
那么假设现在我们要画一个SNS网站功能菜单的icon——私信和收藏。
先看应用场景:

可以看到在这里,表意更多依靠文字。图标主要是用来引导视线,增强视觉比重,辅助于文字的。同时一列图标会对网页的风格产品影响,应与网站风格保持一致。所以这里的图标,表意、装饰、品牌的权重差不多一致。
2,信息提炼,画草稿
接下来我们要思考如何表达私信、收藏夹。根据要表达的内容,提炼出最具代表性的相关事物、图形、色彩等视觉元素。然后画一些草稿表达自己的想法,当然草稿也可以打在脑子里。

3,画大关系
思路确定了,绘制的过程就很简单。在PS新建16*16像素大小的文件,主要使用矢量工具画出整体的形状、大关系,用矢量工具时注意该对齐像素的地方要对齐。

4,添加细节
接下来用铅笔工具绘制细节,细节的程度根据需要决定。这里我们不准备把图标画的特别有质感,所以高光、反光相对不要太强烈,细节变化不用太多。

5,输出及管理
输出的时候要考虑之前提到的格式问题,尽量与前端沟通决定。网页中的图标通常使用CSS Sprite方法,把图标放在一张图上以减少服务器请求。所以这里也要跟前端沟通,确定好图标排列的方式。
此外在画一组图标时还需要考虑图标的视觉风格及视觉大小的一致性。

全部图标画完以后,要养成良好的存档习惯,确定更新的流程及负责人。

总结一下
画像素图标前
要注意输出格式及应用场景,因为这对绘制时的技法会有影响,所以不明确要多跟前端沟通。
思考时
首先要明确图标的作用,装饰、表意、品牌权重不同,表现方法也不同,通常表意性越强,图标越符号化。明确作用后提炼概念,转换为日常生活中常见的事物,要注意除非是约定俗成很常见,否则少用抽象的符号表达。多用手绘画画草稿,比较不同方案。
画的过程中
先矢量工具铺大关系,再铅笔工具细化,要注意对齐像素会更清晰锐利,次像素可以更平滑。一套图标要有视觉上的一致性。
画完之后
输出过程中保持和前端的沟通,画好的图标要良好存档,确定更新流程及负责人。
- 经典像素游戏大全 [像素图标绘制技巧] 相关文章:
- 爱情文章
- 亲情文章
- 友情文章
- 随笔
- 哲理
- 励志
- 范文大全
-
魅族EP2X耳机_魅族新一代耳机EP2X发布:129元/佩戴更舒适
几周前,魅族就预告今天要发布一款代号为“X”的新品,到底它是什么?现在,官方
【爱情文章】 日期:2020-02-10
-
【历史惊人相似?谈Intel与高通的发展轨迹】 高通历史
1PC霸主遇上移动王者:相似的发迹史回顶部Intel,毫无疑问的CPU界霸主,掌握着除美帝外所有国家
【爱情文章】 日期:2020-02-09
-
努比亚(nubia)官网 [中兴无边框手机nubia,Z9,努比亚nubia,Z9来袭]
对手机厂商来说,今天可能是个好日子:早上小米正式发布了顶配版小米Note,降价到了2999元;下午,
【爱情文章】 日期:2020-02-13
-
天正坐标标注快捷命令【DIMORDINATE命令坐标标注讲解】
AutoCAD2013坐标标注用于标注相对于坐标原点的X、Y坐标值。1 执行【DIMORDINATE
【爱情文章】 日期:2018-08-08
-
[AutoCad菜单文件的类型,结构及其使用] 文件逻辑结构类型
34 1 1菜单文件简介菜单文件用于定义菜单,AutoCAD系统中所使用的菜单均保存在相应的菜单文件
【爱情文章】 日期:2018-08-08
-
电信ADSL猫变成无线路由器让手机上网的破解方法 电信猫怎么连接
很多网友使用的是中国电信的“我的e家”的ADSL宽带服务,很多人所不知道的是
【爱情文章】 日期:2020-02-14
-
客厅进门玄关隔断【2013最新客厅玄关隔断】
玄关专指住宅室内与室外之间的一个过渡空间,也就是进入室内换鞋、更衣或从室内去室外的缓冲空间。进门玄关
【爱情文章】 日期:2018-08-08
-
黑胡桃木家具的优缺点|胡桃木与黑胡桃木区别
选用家居时,面临着众多的问题,首先是选用哪种材质最合适,根据很多人的喜好,越来越多人选择黑胡桃木家具
【爱情文章】 日期:2018-08-09
-
【魅族pro5,M码怎么得,魅族pro5,M码获取教程】 魅族M15和魅族pro7
魅族pro5M码怎么得?魅族pro5正式发布,该机分为低配版和高配版,最低容量32GB起。魅族在发布
【爱情文章】 日期:2020-02-09
-
装修细节决定成败 细节决定成败的素材
家装是件费力又劳神的事情,谁都不愿意让一些小小的瑕疵影响到整体的家装效果。刚刚装好新房的韩先生感慨地
【爱情文章】 日期:2018-08-09
-
父组件调用子组件的方法【开发IOS关于子UIViewController和父UIV
今天在做iphone开发时碰到了一个常用的需求,即在一个viewController中添加另外一个v
【亲情文章】 日期:2020-05-29
-
狗牙根种子【迅雷影音怎么播放bt种子?】
迅雷影音怎么播放bt种子?1、在电脑上找到迅雷影音播放器,然后点击打开播放器;迅雷影音2、打开播放器
【亲情文章】 日期:2020-03-10
-
【ASP.NET中上传并读取Excel文件数据示例】sop文件示例
如何打开Excel数据库文件,想必有很多朋友都不清楚吧,下面通过一个简单的例子,实现读取Excel数
【亲情文章】 日期:2020-05-27
-
微信可以离线支付吗 [HUAWEI,WATCH怎么使用离线支付]
离线支付作为HUAWEIWATCH的杀手级应用之一,为用户提供了更加便捷的支付体验。虽然苹果宣布Ap
【亲情文章】 日期:2020-04-11
-
低价主板都是垃圾吗,听买家讲述使用心得 卖家怎样搞垃圾买家
什么才是真正的性价比?“一分钱一分货”,笔者曾经问过很多人都相信这句话,可是笔者认为这句话在今天竞争
【亲情文章】 日期:2020-02-10
-
微信语言设置【微信修改语言设置在哪里?】
微信现如今已经成为了众多用户使用的聊天软件,不过一些用户想要修改微信软件版本语言,但又不知道如何操作
【亲情文章】 日期:2020-04-02
-
处理器14nm与10nm [Intel,跳票:10nm处理器,14nm,Kaby,Lake将顶上]
上个月时,俄媒Mustapekka曝光了一份Intel的新品路线图,消息显示,采用10nm工艺制程的
【亲情文章】 日期:2020-02-09
-
【电脑网速慢怎么办?】 手机网络速度慢怎么办
网速慢有很多原因,如果以前正常,最近才变慢的话,可能是电脑需要清理或减肥了,程序越来越多 ,建议
【亲情文章】 日期:2020-05-29
-
游戏特效师的职业寿命 [Dreamweaver制作网页打开特效教程]
下图就是一个特效,这是从一个页面切换到另一个页面的效果。1、按快捷键ctrl+n新建一个页面,选择基
【亲情文章】 日期:2018-08-10
-
酷冷cpu风扇拆卸图解 [cpu风扇怎么拆下来,cpu风扇正确拆卸方法图解]
随着技术的更新,现在的CPU风扇越来越好拆,只要明白它的道理,一切都很好办cpu风扇怎么拆下来?很多
【亲情文章】 日期:2020-02-09
-
美图秀秀怎么排字? 美图秀秀一寸照片制作
怎样使用美图秀秀排字?绿茶小编每次逛论坛,都会看到有的人的签名图片特别好看,上面有按各种方式排列的字
【友情文章】 日期:2020-05-28
-
董明珠:董事长虚衔,没有你们想象的那么重要:格力董事长董明珠
今天之所以撰文谈一谈董小姐,皆因格力电器今日发布的一则公告:格力电器公司于2016年11月16日收到
【友情文章】 日期:2020-03-03
-
瑞典哥德堡精致公寓_瑞典哥德堡旅游
这套小巧精致的公寓位于瑞典的哥德堡,简洁的装饰、清新的色彩令全屋充满了安宁祥和的气息,令居住者回想起
【友情文章】 日期:2018-08-08
-
通道抠图适用于很多毛发及细发|抖音人像抠图软件
通道抠图是实用的技能之一,适用于很多毛发及细发的抠图!这一次分享全面详细,素材也提供,可以拿去练习
【友情文章】 日期:2020-04-29
-
Maya制作脸部表情的动画教程|动画制作专业
1、导入一个模型,这里用POLYGON,因为我们要减少工作量,当然用SMOOTH模型也行,只不过工作
【友情文章】 日期:2018-08-08
-
意大利极简风格装修效果图 [意大利极简风装修效果图]
意大利极简风装修效果图除此之外,餐厅面向后院,偌大的落地窗,创造明亮的用餐环境。
【友情文章】 日期:2020-03-15
-
拼多多店铺如何共用淘宝的菜鸟单号 [淘宝店铺怎么申请开通菜鸟
电子面单是使用热敏纸按系统预先设置的格式打印的面单。热敏纸打印依靠热感应显示文字,打印速度是普通针式
【友情文章】 日期:2020-02-28
-
西城区安装制作彩钢房别墅阁楼搭建 243平小阁楼三房别墅
吉普赛人游走于世界各地,善于发现美,并将所有美丽收藏。形成既时尚又古典,既色彩斑斓又色调统一的波西米
【友情文章】 日期:2018-08-08
-
[5平米卫生间装修效果图,悠然自在享受浴室空间]卫生间浴室效果图
5平米卫生间装修属于中型格局卫生间设计,在5平米的空间中可以自由的配置和发挥。足够大的浴室、干湿分区
【友情文章】 日期:2018-08-08
-
范冰冰的直播号是多少【花椒直播范冰冰直播间id是多少】
花椒直播已经和范冰冰正式签约!范爷将担任花椒直播首席体验官!那么范冰冰花椒直播间id是多少。范冰冰花
【友情文章】 日期:2020-03-07
-
vivo,X6,手机桌面怎么编辑管理|vivo桌面编辑在哪里找
在安卓智能手机中,当我们在解锁手机后,进入手机的第一个界面就是我们的手机桌面,而通常情况下很多用户喜
【生活随笔】 日期:2020-04-07
-
淘宝装修代码:淘宝装修代码安装步骤、网店代码装修教程_开网店3
·步骤 方法淘宝首页装修代码装修步骤(1)进入开淘装修网,选择你喜欢的淘宝装修模板,并
【生活随笔】 日期:2020-05-28
-
[显卡性能好坏怎么看,显卡天梯图2016年12月最新版] 笔记本显卡
显卡天梯图是可以查看历来重要的显卡性能排行榜,一目了然的梯度排名可以为购买显卡的用户带来很大的帮助。
【生活随笔】 日期:2020-03-05
-
抖音文本文档作图_Powerpoint技巧,美化文档大全
下面就详细给大家介绍一下!教程技巧一:为图像添加边框在PowerPoint中为图像添加边框最简便的方
【生活随笔】 日期:2020-05-20
-
【Photoshop人物合成技巧】 素描人物头像步骤
使用矩形工具创建选区如下图所示执行Ctrl+C命令后,将其Ctrl+V粘贴到要合成的图像中按下键盘上
【生活随笔】 日期:2020-03-31
-
[虚拟内存是什么] 虚拟内存怎么设置最好
什么是虚拟内存?在使用电脑过程真,我们会接触到虚拟内存这个概念。比如电脑内存不足的时候,就可以设置虚
【生活随笔】 日期:2020-03-16
-
PhotoShop制作泼墨山水风景画_水彩风景画详细步骤图
中国画以水调墨,在生宣纸上用墨色的浓淡变化绘出美丽的画面。下面我们用Photoshop将一幅照片处理
【生活随笔】 日期:2020-04-05
-
【Win8.1系统开机黑屏只显示鼠标怎么办】Win10开机黑屏只有鼠标
1、首先在启动黑屏,只有鼠标的情况下,通过Ctrl+SFHIFT+ESC调出任务管理器;2、点击任务
【生活随笔】 日期:2020-03-12
-
锤子坚果u1【锤子坚果手机u1配置怎么样?坚果手机配置参数信息介
罗2015年8月25日,锤子科技在上海梅赛德斯-奔驰文化中心举行发布会,正式发布了全新的品牌&mda
【生活随笔】 日期:2020-02-09
-
2016年广西高考分数线公布_2016高考分数线公布
连日来,今年各地高考成绩已经陆续放榜。据记者统计,截至发稿时,目前已有包括北京、上海等近20个省份公
【生活随笔】 日期:2020-03-16
-
YY语音怎么取消YY的开机启动|YY怎么取消收藏频道
YY语音取消YY的开机启动方法:可以点击“个人头像”—》弹出&l
【人生哲理】 日期:2020-05-27
-
83平米居室装修,打造韩式田园风格:2018最流行的装修风格
家是人们生活中最温馨舒适的一个港湾,小编为大家介绍一套3万轻松搞定的家庭装修设计加部分家具配置,83
【人生哲理】 日期:2018-08-08
-
5款不同色彩墙面漆设计|多乐士墙面漆大桶价格
房子小,怎么办?房间小,还喜欢鲜艳色彩,又怎么办?当我们走进房子时,对房间的色彩感觉是第一位的,因此
【人生哲理】 日期:2018-08-08
-
[89㎡田园三居]手机一条街90㎡54万三居
本案是89平米三居室,三口之家,女主人主要负责照料四岁可爱男宝的生活与学习,厨房是本案最大的亮点,快
【人生哲理】 日期:2020-04-15
-
Photoshop调出唯美暖色效果的风景照片 很美很阳光的个性签名
本教程主要使用Photoshop调出风景照片唯美的暖色效果,这个效果很多人非常的喜欢,下面就一起来研
【人生哲理】 日期:2020-04-04
-
【解决GPS盲区,WiFi室内定位跟踪成可能】WiFiGPS
人所在的位置是一个重要的信息。和过去十年里每一种技术发展类似,室内位置跟踪背后的技术已经实现了长足进
【人生哲理】 日期:2020-02-16
-
淘宝红包领取后在哪里【2015淘宝双12红包怎么免费领取,淘宝双十
2015淘宝双十二主会场入口,随着双十一的过去,双十二的到来,要说大家都在期待什么,当然是淘宝推出的
【人生哲理】 日期:2020-02-27
-
[中兴v5和红米note参数配置对比区别是什么?哪个好?] 骁龙636
红米note:顶级参数配置红米note有两个配置:联发科8核MT6592,前置摄像头500万像素,后
【人生哲理】 日期:2020-02-24
-
20个使用隐藏式菜单导航的优秀网页设计 如何自学网页设计
Navicon,也就是汉堡图标,已经成为越来越多网页设计导航模块时的首选了。相比于传统的导航栏,隐藏
【人生哲理】 日期:2018-08-11
-
【Intel(英特尔),酷睿i5,2代系列和3代系列的区别是什么?】第七
Intel酷睿i52代系列和3代系列的区别?二代和三代的区别就是在核心工艺从32纳米提升到了22纳米
【人生哲理】 日期:2020-02-09
-
【别墅设计的五个要素】 三层30万别墅图片大全
1:地段、地形、地貌、地脉好的别墅应具备山水,世界很多著名的别墅豪宅群都很注重地形地貌,建在半山环水
【励志文章】 日期:2020-05-08
-
[怎样删除WinPE桌面ie图标] 删除桌面ie图标
一般来说,在WinPE下我们如果想删除桌面的InternetExplorer图标时,往往是在WinP
【励志文章】 日期:2018-08-08
-
天猫精灵位置 天猫直播的位置在哪?
天猫直播在哪? 打开天猫app,有着海报预告,可以看到最新的即将要要直播的明星,而且往下滑动,在这里
【励志文章】 日期:2020-03-07
-
坚果锤子手机怎样截屏_坚果手机怎么截图?3种锤子坚果U1手机截屏
截图已经是智能手机最常用的操作之一,作为关注度极高的坚果手机,相信大多数用户拿到新机后,都会截图分享
【励志文章】 日期:2020-02-09
-
酷派大神F1忘记锁屏密码如何解锁_酷派大神F1锁屏个性签名修改称
酷派大神F1锁屏界面的个性签名是可以修改的,那该怎么修改呢?1、在我们的手机界面上,找到并打开的是&
【励志文章】 日期:2020-02-16
-
华为官方固件怎么刷_HTC,X920E,(Butterfly),刷回官方RUU固件教程
其实htc手机的线刷刷机是最容易的了,因为htc的官方包就是exe格式的,直接可以下载下来运行刷入就
【励志文章】 日期:2020-02-25
-
并非越大越好-漫谈CPU与缓存_CPU缓存
说到CPU,不得不说的就是CPU缓存,目前CPU的缓存已经成了衡量CPU性能的一个必要指标,那么CP
【励志文章】 日期:2020-02-09
-
努比亚nubia,z9,max怎么样?nubia,z9max参数配置介绍_努比亚z9max
nubiaz9max怎么样呢?在MWC2015大会上,nubia新旗舰z9max正式亮相,下文小编就
【励志文章】 日期:2020-02-18
-
ins为什么中国被禁用 [Instagram怎么读]
Instagram是开发商Instagram的一个发布在AppStore上的一个高人气图片分享应用
【励志文章】 日期:2018-08-08
-
【tdw89741n增强型路由器无法获取获取PVC该怎么办?】 PVC
TP路由器获在【设置向导】一步一部正常操作的时候到最后提示【自动获取PVC失败】,其中TD-W897
【励志文章】 日期:2020-02-11
-
软件开发专业就业方向 [iPhone拍照/摄像软件开发实例]
这个App基于lolfriend的源码改写,完全使用官方API。目前还没实现的功能有:替换UIIma
【范文大全】 日期:2020-05-29
-
YY歪歪语音星级公会的审核流程和审核时间_做yy公会
在达到星级公会申请标准后,OW先提交实名认证(3个工作日内完成审核)→签约劳务协议(实名认
【范文大全】 日期:2020-05-29
-
ADO,存取数据库时如何分页显示:数据库分页显示
ADO存取数据库时的分页显示?如果你使用过目前众多网站上的电子公告板程序的话,那你应该会知道电子公告
【范文大全】 日期:2020-05-29
-
淘宝美工前景怎么样_如何做好淘宝美工
下面是如何做好淘宝美工的解决方法,希望对您有帮助
【范文大全】 日期:2020-05-29
-
YY歪歪语音如何取消视频直播的开播消息提示?|下载歪歪视
取消视频直播间开播提示有以下两种方式:① 在弹出开播提示时,进入该歌手直播间内,视频框右下角,去掉&
【范文大全】 日期:2020-05-29
-
网络传播专业就业前景【如何缓解网络传播恶意软件的风险
现在,很多人使用网络作为其日常生活的自然延伸。无论是与朋友聊天、关注时事新闻、进行专项研究还是看电影
【范文大全】 日期:2020-05-29
-
activex控件怎么安装 实现DataGridView控件中CheckBox列的使用实例
最近做WindowsForms程序,使用DataGridView控件时,加了一列做选择用,发现Che
【范文大全】 日期:2020-05-29
-
asp.net中WebResponse,跨域访问实例代码 跨域实例
一篇朋友很久前写的中WebResponse跨域访问示例,下面我转过来与大家一起学习学习,希望文章对大
【范文大全】 日期:2020-05-29
-
复合索引【SQLCE建复合索引】
CREATETABLE[PT_check3]([FCheckPlan_ID]NVARCHAR(20)
【范文大全】 日期:2020-05-29
-
asp.net,webservice返回json的方法_json webservice
webservice默认的返回为XML要返回json可以用json工具类把对象转为json字符串,需
【范文大全】 日期:2020-05-29