- 1、本文档共9页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
火星时代Photoshop像素图标绘制方法
火星时代()-中国移动互联网设计高端品牌!
火星时代Photoshop像素图标绘制技巧
众所周知,网页中最常见的非图标莫属,下面火星时代为大家带来Photoshop像素图标绘制技巧。图标,其功能是表达意义,同时也起到装饰作用。像素图标也可以理解成像素风格的图标,与其相对的是矢量图标。
一、基本知识
1.图片格式与透明
全透明是指图片的格式只支持完全透明和不透明两种状态,Alpha透明是指图片格式可以支持不同的透明程度。各种图片格式对透明的支持程度以及浏览器兼容性见下表:
那么这些东西对我们做像素图标有什么影响呢?请看下图:
可以看到,全透明的图标需要根据应用场景的背景色进行优化,背景色变化了就要重新优化,如果不想优化并且要通用的话,就必须限制设计的表现手法,这样通常会让图标边缘锯齿感增强。而半透明的图标不用优化,也可以多处通用。
我们看一个没有针对不同背景优化的例子:
可以看到,在暗色背景下使用了针对白色背景优化过的全透明图像。结果是出现很多白色杂边,严重影响了品质感。
这样看来,用支持Alpha透明的PNG-24才是王道呀。
2.矢量工具与像素对齐
在画图标的整体大关系或者画扁平化风格图标时,我们会用到矢量工具,这里会碰到一个新手常常遇到的问题:像素对齐。
什么是像素对齐?在位图文件内使用矢量工具时(例如PS里用形状工具、钢笔工具),会遇到下图的这种情况:
可以看到右边的正方形的边缘有虚的,这是因为这个正方形的边缘没有与像素的边缘对齐。
再看一个实际例子:
可以看到,对齐了像素的图形有着更清晰锐利的效果。
以CS6为例,我们可以在PS里通过一些设置方便地对齐像素。
1.将网格线设置为以像素为单位的,方便我们随时查看是否对齐像素。顺便提一句,网格显示/隐藏的快捷键ctrl+’。
首选项–参考线、网格和切片–根据自己需要设置网格大小、单位选择像素。
2.使用矢量工具时,勾选对齐边缘,绘制的图形会自动对齐像素。
选择矢量工具(钢笔、形状工具)–顶部工具栏里找到对齐边缘–勾选
3.设置变换矢量图形时自动对齐像素。缩放、变换矢量图形时也可以自动对齐了。
首选项–常规–勾选将矢量工具变换与像素网格对齐:
那么从AI复制到PS怎样保留可编辑性?从AI复制矢量图形到PS时,应当选择粘贴为形状图层,这样就可以在PS内继续编辑图形,用形状选择工具将锚点一一调整以对齐像素。
像素对齐并不是绝对的,是否要像素对齐应该是根据想要的效果和图形复杂程度决定的。
左边五角星需要平滑、饱满的效果,并没有对齐像素,但是不能说他比对齐像素的五角星差。
3.像素画技巧
虽然像素画没有次像素的概念,但在画图标时,用好次像素可以使线条、图形更加平滑。
二、绘制像素图标的流程
1.明确图标的功能
图标主要功能是表意,即以图形化的方式表达网页上的一项操作的意义。但在表意外还有装饰性及品牌性的功能需要考虑。装饰性是指图标的视觉效果能够带来品质感、美感;品牌性是指图标的风格应该与产品品牌特性保持一致。
在不同的需求下,表意、装饰性、品牌性的权重是不一样的。例如网页的Favicon,首先要考虑品牌性(与产品自身品牌形象保持一致),其次要考虑装饰(针对不同平台及使用场景,需要提供多种尺寸以达到图片不虚化)。
那么假设现在我们要画一个SNS网站功能菜单的icon——私信和收藏。
先看应用场景:
可以看到在这里,表意更多依靠文字。图标主要是用来引导视线,增强视觉比重,辅助于文字的。同时一列图标会对网页的风格产品影响,应与网站风格保持一致。所以这里的图标,表意、装饰、品牌的权重差不多一致。
2.信息提炼,画草稿
接下来我们要思考如何表达私信、收藏夹。根据要表达的内容,提炼出最具代表性的相关事物、图形、色彩等视觉元素。然后画一些草稿表达自己的想法,当然草稿也可以打在脑子里。
3.画大关系
思路确定了,绘制的过程就很简单。在PS新建16*16像素大小的文件,主要使用矢量工具画出整体的形状、大关系,用矢量工具时注意该对齐像素的地方要对齐。
4.添加细节
接下来用铅笔工具绘制细节,细节的程度根据需要决定。这里我们不准备把图标画的特别有质感,所以高光、反光相对不要太强烈,细节变化不用太多。
5.输出及管理
输出的时候要考虑之前提到的格式问题,尽量与前端沟通决定。网页中的图标通常使用CSS Sprite方法,把图标放在一张图上以减少服务器请求。所以这里也要跟前端沟通,确定好图标排列的方式。
此外在画一组图标时还需要考虑图标的视觉风格及视觉大小的一致性。
全???图标画完以后,要养成良好的存档习惯,确定更新的流程及负责人。
以上就是今天的Photoshop像素图标绘制技巧,希望能对大家有所帮助!更多PS资
您可能关注的文档
- 湖南餐谋天下董事长厨师成功路.doc
- 湖头中心学校2010年度秋季教学教研工作计划.doc
- 湖州-嘉兴TS16949-TS16949-2002汽车认证的方案.doc
- 湖州《备案协议》_中国E动网.doc
- 湖南财政经济学院115实践教学工作总结.doc
- 湖州市科技的计划项目申报书.doc
- 湖州师范学院信息和工程学院概况.doc
- 湖州市区2011年度中考普高分数线.doc
- 湖湘建筑元素在湖南保障性住房外观设计中运用研究.doc
- 湖明小学第3届读书节评选材料.doc
- 广西桂林市第十八中学2017-2018学年高一下学期期中考试生物试题2.doc
- 2018高考人教政治二轮巩固练题(三)及解析.doc
- 高考生物一轮浙江选考总复习课件第三单元细胞的生命历程热点题型突破二.ppt
- 高考物理课标版一轮复习考点规范练14天体运动与人造卫星.doc
- 湖南省部分学校2024-2025学年高三下学期2月联考生物试题.docx
- Unit3EnvironmentalProtectionWordsandExpressions单词词汇讲解课件-高中英语人教版选择性.pptx
- 深度解析《GBT 44771-2024压水堆核燃料组件制造工艺和产品合格性鉴定要求》.pptx
- 深度解析《GB 44917-2024食用植物油散装运输卫生要求》.pptx
- 深度解析《GBT 44777-2024知识产权(IP)核保护指南》.pptx
- 深度解析《GBT 44741-2024农产品产地土壤有效态砷的测定方法》.pptx
最近下载
- 2025年湖北省武汉市高考数学模拟试卷(附答案解析).pdf VIP
- 河北省2025年12月普通高中学业水平合格性考试数学试题(含答案解析).pdf VIP
- 浙江省嘉兴市南湖区2023-2024学年四年级下学期语文期中试卷 解析版.docx VIP
- 《华为战略管理法》读书笔记PPT.pptx VIP
- 电网工程设备材料信息参考价(2024年第四季度).xlsx
- 2025商业广场哪吒沉浸式 (童魔闹海主题)主题展活动策划方案-47P.docx
- 义务教育版(2024)四年级信息技术 第6课 古往今来话编码 课件.pptx VIP
- 企业筹资问题研究--以小米公司为例.doc
- 式与方程复习课.doc VIP
- 《鸡兔同笼》教学设计优质课公开课一等奖 .pdf VIP
文档评论(0)