网站导航 专题 首页

办公软件
WordExcelPPTWPS
操作系统
Win7Win10Win11
常用软件
工具软件视频播放图片处理
数码产品
笔记本手机教程平板电脑
安卓教程
应用教程刷机教程游戏攻略
苹果教程
iphone越狱iphone备份教程
游戏攻略
游戏新闻网络游戏单机游戏
生活攻略
美食/营养汽车旅游出行

PS像素图标绘制基础知识及教程【3】

教程之家 聊天社交

图标是网页中的常见元素,主要功能是表意,也包含装饰及品牌传递的作用。存储为gif、png等位图格式的图标,称为像素图标,大小通常为16px、24px、32px等。当然像素图标也可以理解为像素风格的图标,不一定是位图格式存在,本文中我们按格式去理解。与像素图标相对的是矢量图标,通常以svg格式及字体格式存在,大小可以随意调整。这篇文章主要介绍个人的一些像素图标绘制经验,不足之处还请各位高手多多指教。

一、基本知识

1.图片格式与透明

全透明、alpha透明、图片格式及兼容性

全透明是指图片的格式只支持完全透明和不透明两种状态,alpha透明是指图片格式可以支持不同的透明程度。

各种图片格式对透明的支持程度以及浏览器兼容性见下表

PS像素图标绘制基础知识及教程

全透明和alpha透明对图标有什么影响

那么这些东西对我们做像素图标有什么影响呢?看下图

PS像素图标绘制基础知识及教程

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

我们看一个没有针对不同背景优化的例子

PS像素图标绘制基础知识及教程

可以看到,在暗色背景下使用了针对白色背景优化过的全透明图像。结果是出现很多白色杂边,严重影响了品质感。

这样看来,用支持Alpha透明的PNG-24才是王道呀。可惜,在ie6下,PNG-24的Alpha透明需要ie特有的css滤镜配合才能实现,所以如果你的产品有很多ie6用户,在做图标前,先跟前端沟通。

2.矢量工具与像素对齐

在画图标的整体大关系或者画扁平化风格图标时,我们会用到矢量工具,这里会碰到一个新手常常遇到的问题-像素对齐。

什么是像素对齐

在位图文件内使用矢量工具时(例如PS里用形状工具、钢笔工具),会遇到下图的这种情况。

PS像素图标绘制基础知识及教程

可以看到右边的正方形的边缘是有虚的,这是因为这个正方形的边缘没有与像素的边缘对齐。

相关教程:

相关下载:

本类最新

微信怎么快速删除表情包_快速操作删除微信表情包方法分享

微信怎么快速删除表情包_快速操作删除微信表情包方法分享

那种免费看的直播软件_真正免费的直播软件大全(一对一视频)

那种免费看的直播软件_真正免费的直播软件大全(一对一视...

微信朋友圈如何搜图找同款 一键搜朋友圈图片同款方法

微信朋友圈如何搜图找同款 一键搜朋友圈图片同款方法

翻译器软件排行榜前十名_免费好用翻译APP下载排名(可下载)

翻译器软件排行榜前十名_免费好用翻译APP下载排名(可下载)

附近人全免费约会APP下载 附近人免费交友app排行榜大全

附近人全免费约会APP下载 附近人免费交友app排行榜大全

图文教程