photoshop画像素画(ps像素绘画教程)

本文主要介绍photoshop像素绘画(ps像素绘画)，下面跟着东辰网详细了解一下吧。

一、基础知识

1.图片格式和透明度全透明、alpha透明、图片格式和兼容性全透明是指图片格式只支持完全透明和不透明两种状态，alpha透明是指图片格式可以支持不同程度的透明。有关透明度和浏览器兼容性的各种图像格式的支持，请参见下表。

Fmod=forumdisplayfid=156filter=typeidtypeid=131

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

可以看出，全透明图标需要根据应用场景的背景颜色进行优化。如果背景颜色改变，需要重新优化。如果没有优化和通用，就要限制设计的表达，通常会增强图标边缘的锯齿感。半透明图标可以用在很多地方，不需要优化。

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

正如你所看到的，一个完全透明的图像优化为白色背景用于黑暗的背景。导致出现很多白边，严重影响品质感。ie6

这样，使用支持Alpha透明的PNG24才是王道。遗憾的是，在ie6下，PNG24的Alpha透明性只有在ie专用css滤镜的配合下才能实现，所以如果你的产品有很多ie6用户，在制作图标之前先和前端沟通一下。

2.矢量工具和像素对齐我们在绘制图标整体关系或者绘制平面风格图标时会用到矢量工具，会遇到一个新手经常遇到的问题——像素对齐。什么是像素对齐？

在位图文件中使用矢量工具时(例如在PS中使用形状工具和钢笔)，会遇到以下情况。

你可以看到右边方块的边缘是虚的，因为这个方块的边缘没有和像素的边缘对齐。

再看一个实际例子。

(图片来自Dribbble，链接地)

可以看出，像素对齐的图形效果更清晰、更锐利。PS中的设置帮助我们对齐像素。

我们可以通过PS中的一些设置轻松对齐像素，以CS6为例。1.将网格线设置为像素，这样我们可以随时检查像素是否对齐。顺便说一下，快捷键ctrl用于网格显示/隐藏。

首选项–参考线、网格和切片–根据您自己的需要设置网格大小，并选择单位中的像素。

2.使用矢量工具时，检查对齐边缘，绘制的图形会自动对齐像素。

选择矢量工具(钢笔、整形)在顶部工具栏中找到对齐边缘检查它。

3.设置变换矢量图形时自动对齐像素。在缩放和变换矢量图形时，也可以自动对齐。请注意，该功能是CS6独有的。

首选项–常规–选中将矢量工具转换与像素网格对齐。

从Ai复制到Ps如何保持可编辑性？

将矢量图形从Ai复制到Ps时，要选择粘贴为形状层，这样可以在Ps中继续编辑图形，并使用形状选择工具逐个调整锚点，使像素对齐。

像素对齐不是绝对的。

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

左边的五角星需要平滑饱满的效果，不按像素对齐，但不能说比按像素对齐的五角星差。

3.铅笔工具和像素绘画技巧在描绘小像素图标的细节时，经常会用到铅笔工具。像素绘画会涉及到一些技巧。像素绘画的基本技巧

网上有很多更详细的像素画教程，可以自己用百度分像素。

虽然像素画没有子像素的概念。但是画图标的时候，用好亚像素可以让线条和图形更流畅。

二、画像素图标的过程

1.明确图标的主要作用是表达意思，也就是用图形化的表达网页上某个操作的意思。但是桌子事故也有装饰和名牌功能要考虑。装饰性是指图标的视觉效果能带来质感和美感；品牌化是指图标的风格要与产品的品牌特征相一致。

在不同的需求下，表意性、装饰性、品牌性的权重是不同的。比如一个网页的favicon，首先要考虑品牌(与产品本身的品牌形象)，然后再考虑装饰(针对不同的平台和使用场景，需要提供多个尺寸，以达到画面的错)。所以假设现在我们要画一个icon——私信和收藏的SNS网站功能菜单。先看应用场景。

可见，在这里，表意文字更依赖于文字。图标主要用来引导视线，提升视觉比例，辅助文字。同时，一列图标会影响网页的风格，要和网站的风格保持一致。所以这里的图标，表意，装饰，品牌权重都差不多。

2.提取信息，画草稿。接下来要思考如何表达私信和收藏夹。根据要表达的内容，提取相关事物、图形、色彩等最具代表性的视觉元素。然后画一些草稿来表达你的想法。当然，草稿也可以在脑子里打出来。

3.确定了画大关系的思路，画的过程很简单。在PS中创建16*16像素大小的文件时，主要使用矢量工具绘制整体形状和关系。使用矢量工具时，注意像素的对齐。

4.接下来添加细节，用铅笔工具画出细节，细节的程度根据需要确定。在这里，我们不打算绘制具有特殊纹理的图标，因此它被突出显示和反转。光线不要太强烈，细节不要变化太大。

5.在导出和管理输出时，要考虑前面提到的格式问题，尽量和前端沟通决策。网页中的图标通常使用CSSSpritmod=forumdisplayfid=156filter=typeidtypeid=131

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

可以看出，全透明图标需要根据应用场景的背景颜色进行优化。如果背景颜色改变，需要重新优化。如果没有优化和通用，就要限制设计的表达，通常会增强图标边缘的锯齿感。半透明图标可以用在很多地方，不需要优化。

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

正如你所看到的，一个完全透明的图像优化为白色背景用于黑暗的背景。导致出现很多白边，严重影响品质感。ie6

这样，使用支持Alpha透明的PNG24才是王道。不幸的是，在ie6下，PNG24的Alpha透明度只能用ie特有的css滤镜来实现，所以如果你我们的产品有很多ie6用户。制作图标前请与前端沟通。

2.矢量工具和像素对齐我们在绘制图标整体关系或者绘制平面风格图标时会用到矢量工具，会遇到一个新手经常遇到的问题——像素对齐。什么是像素对齐？

在位图文件中使用矢量工具时(例如在PS中使用形状工具和钢笔)，会遇到以下情况。

你可以看到右边方块的边缘是虚的，因为这个方块的边缘没有和像素的边缘对齐。

再看一个实际例子。

(图片来自Dribbble，链接地)

可以看出，像素对齐的图形效果更清晰、更锐利。PS中的设置帮助我们对齐像素。

我们可以通过PS中的一些设置轻松对齐像素，以CS6为例。1.将网格线设置为像素，这样我们可以随时检查像素是否对齐。顺便说一下，快捷键ctrl用于网格显示/隐藏。

首选项–参考线、网格和切片–根据您自己的需要设置网格大小，并选择单位中的像素。

2.使用矢量工具时，检查对齐边缘，绘制的图形会自动对齐像素。

选择矢量工具(钢笔，形状工)找到顶部工具栏对齐的边缘检查。

3.设置变换矢量图形时自动对齐像素。在缩放和变换矢量图形时，也可以自动对齐。请注意，该功能是CS6独有的。

首选项–常规–选中将矢量工具转换与像素网格对齐。

从Ai复制到Ps如何保持可编辑性？

将矢量图形从Ai复制到Ps时，要选择粘贴为形状层，这样可以在Ps中继续编辑图形，并使用形状选择工具逐个调整锚点，使像素对齐。

像素对齐不是绝对的。

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

左边的五角星需要平滑饱满的效果，不按像素对齐，但不能说比按像素对齐的五角星差。

3.铅笔工具和像素绘画技巧在描绘小像素图标的细节时，经常会用到铅笔工具。像素绘画会涉及到一些技巧。像素绘画的基本技巧

网上有很多更详细的像素画教程，可以自己用百度分像素。

虽然像素画没有子像素的概念。但是画图标的时候，用好亚像素可以让线条和图形更流畅。

二、画像素图标的过程

1.明确图标的主要作用是表达意思，也就是用图形化的表达网页上某个操作的意思。但是桌子事故也有装饰和名牌功能要考虑。装饰性是指图标的视觉效果能带来质感和美感；品牌化是指图标的风格要与产品的品牌特征相一致。

在不同的需求下，表意性、装饰性、品牌性的权重是不同的。比如网页的favicon首先要考虑品牌(以及产品本身的品牌形象保)一)，其次还要考虑装饰性(针对不同的平台和使用场景，需要提供多个尺寸，以达到画面的错)。所以假设现在我们要画一个icon——私信和收藏的SNS网站功能菜单。先看应用场景。

可见，在这里，表意文字更依赖于文字。图标主要用来引导视线，提升视觉比例，辅助文字。同时，一列图标会影响网页的风格，要和网站的风格保持一致。所以这里的图标，表意，装饰，品牌权重都差不多。

2.提取信息，画草稿。接下来要思考如何表达私信和收藏夹。根据要表达的内容，提取相关事物、图形、色彩等最具代表性的视觉元素。然后画一些草稿来表达你的想法。当然，草稿也可以在脑子里打出来。

3.确定了画大关系的思路，画的过程很简单。在PS中创建16*16像素大小的文件时，主要使用矢量工具绘制整体形状和关系。使用矢量工具时，注意像素的对齐。

4.接下来添加细节，用铅笔工具画出细节，细节的程度根据需要确定。这里不打算画特殊纹理的图标，所以高光和倒影不要太强，细节不要变化太大。

5.在导出和管理输出时，要考虑前面提到的格式问题，尽量和前端沟通决策。网页中的图标通常使用CSSSprite方法，将图标放在一张图片上以减少服务器请求。所以这里也要和前端沟通，确定图标的排列。此外，在绘制一组图标时，我们还需要考虑图标的视觉风格和视觉大小的一致性。

所有图标都画好之后，你要养成良好的归档习惯，确定更新流程和负责人。

第三，总结一下

画像素图标之前要注意输出格式和应用场景，因为这样会影响画图技法，所以多和前端沟通就不清楚了。

思考的时候，首先要明确图标的作用。不同的装饰、表意、品牌权重有不同的表达。通常，表意性越强，图标的象征性越强。明确功能后，提炼概念，转化为日常生活中常见的东西。应该注意的是，除非约定俗成，否则应该用抽象程度较低的符号表示。使用手绘草图来比较不同的方案。

在绘画过程中，先用矢量工具铺开关系，再用铅笔工具细化。需要注意的是，对齐后的像素会更清晰锐利，子像素可以更平滑。一组图标应该在视觉上保持一致。

画好之后在输出的过程中与前端保持沟通，将画好的图标做好存档，确定更新流程和负责人。

了解更多photoshop像素绘画(ps像素绘画教)相关内容请关注东辰网。