页面载入中...

Photoshop制作像素画入门教程详解

xingphotoshop, 2016-12-211

 

来源:太平洋电脑网  作者:exang     

首先声明我是菜鸟,近些日子做了一些像素图,得到了一些朋友的好评,在这向你们表示感谢对我的支持。很多朋友希望我做一个类似教程的东西想了解像素的绘制方法,我也是刚接触像素,教程谈不上,只是向朋友介绍一下我所了解的知识。

1、什么是像素。

画这个自然要知道什么是像素图。电脑中的图形分矢量图和位图(像素图)两种。

矢量图:

Photoshop制作像素画入门教程详解,PS教程,素材中国网

像素图:

Photoshop制作像素画入门教程详解,PS教程,素材中国网

区别在于矢量图根据的是数学公式,所以可以无限放大。像素图是由点组成,因此放大后你就能看到放大的点[ ],这些点成为像素[pixel],像素图创作需要的是点绘。

2、优点

就因为它由很小的点组成,我认为它最适合运用到带液晶屏的电子设备上。具体如下:

掌上游戏机,别怀疑所有的掌上游戏机,gameboy什么的都是像素图,当然我的文曲星也属于这类。

电脑屏幕:桌面图标、网页gif、QQ秀、字体等。

手机:手机上的手机电池、信号等图都是。

玩具:有没有感觉乐高玩具都像是像素一样。

3、工具

不像矢量图需要专门的工具。像素只需要[开始]>[所有程序]>[附件]>[画图],不是开玩笑的。最简单的就是最有效的,这一款免费的无需安装的及破解的绿色软件。要是复杂的创作还是选用photoshop吧,功能上很多优势,最低版本都可以。当然像素也分很多类,需要不同的工具,我只介绍上面这两种软件。像素不需要技术,需要的是细心。

4、基本元素举例

在ps里工具就是铅笔工具。快捷键是,导航器最好放大到400%

点:

Photoshop制作像素画入门教程详解,PS教程,素材中国网

线:

Photoshop制作像素画入门教程详解,PS教程,素材中国网

角:

Photoshop制作像素画入门教程详解,PS教程,素材中国网

面:

Photoshop制作像素画入门教程详解,PS教程,素材中国网

友情提示:常用的线条可以设置为画笔,选中线条>编辑>定义画笔预设。之后用铅笔工具时就右键就会看到在列表的最后。

5、字体

自然在图形中需要出现字体。这个就不需要你费事了,有专门的字体,推荐几个。

英文

Photoshop制作像素画入门教程详解,PS教程,素材中国网

中文

Photoshop制作像素画入门教程详解,PS教程,素材中国网

友情提示:如果字体不想变形,一定要成倍放大。如英文字体上面举例的都是8号,放大就要变成16号,依此类推,当然图形也是如此。

6、下面举一些实例来说明

例1:先教大家画一个MP3,以后有时间再写点“教程”,没有固定的方法,看自己的习惯,仅演示我做的过程。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

Photoshop制作像素画入门教程详解,PS教程,素材中国网

通常640*480就足够了

Photoshop制作像素画入门教程详解,PS教程,素材中国网

放大到400%,选择铅笔工具或者按键盘。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

Photoshop制作像素画入门教程详解,PS教程,素材中国网

要在新的透明层上绘制选择一种笔形,设置为1像素。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

Photoshop制作像素画入门教程详解,PS教程,素材中国网

绘制几种线条,存为笔形之后就方便了。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

选中线条>编辑>定义画笔预设。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

常见的,当然也可设一边的,之后进行水平或垂直翻转。可以在画笔预设管理器中把这几种放到最前面。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

Photoshop制作像素画入门教程详解,PS教程,素材中国网

友情提示:绘制过程中难免有错的地方可用历史记录挽回。如果是多出来的点,可以先填充成白色,之后通过[选择]>[色彩范围]。选中白色再删除就可以了。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

接下来填充颜色要去掉这个,否则颜色会溢出。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

最外面的描边填充颜色最好是黑色。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

开始画一个虫虫的图举例说明

Photoshop制作像素画入门教程详解,PS教程,素材中国网

新建一张画布,不用太大。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

上来先放大400%。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

开始画1/4脑袋的半圆,不用画完。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

选中后再复制三个即可,因为是圆。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

再把嘴和脸部稍改改。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

加上触角。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

接着是身子。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

同上面的脑袋,画身体相同的部分也只需复制即可。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

接着开始上色步骤,先用魔术阳选择脑袋里面任何处。

接下来按住[shift]键,多蜒身子都选上。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

选取填充工具,按住[alt]键在色板处选择一个深绿色,

直接按[alt]+[delete]进行填充。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

选择菜单>[选择]>[修改]>[收缩]>

Photoshop制作像素画入门教程详解,PS教程,素材中国网

看图操作,默认[1]像素。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

在原选区基础上整体收缩1个像素,并选择一个浅绿色。直接按[alt]+[delete]进行填充。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

开始高光等部分。用魔术棒[shift]进行多选,选取图上的部分。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

然后按左键将选取移动到图上高光部分。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

选取亮色后直接按[alt]+[delete]进行填充。

(上面的选取感觉有些多了,因此下面又去掉多余部分了。)

Photoshop制作像素画入门教程详解,PS教程,素材中国网

填充高光也是用上面的复制选取填充方法。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

然后是修改黑色轮廓线,先到右面[图层]面板,按住[ctrl]键在层上点击一下,选取了整个图形。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

之后菜单>选取]>[色彩范围]>

Photoshop制作像素画入门教程详解,PS教程,素材中国网

用鼠标单击原有轮廓的黑色部分,将图形黑色轮廓选中。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

填充工具选中满意的颜色进行轮廓线填充。使得图形不呆板。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

当然[单色]轮廓线和[渐变]轮廓线效果也是不同的。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

由于是像素图,原有渐变样式也需要改变一下使画面整体均为像素形式。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

举例说明我讲的意思,下图是矢量形式的渐变。

经过修改后的渐变,图中的左面的即为像素风格的渐变。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

轮廓选区渐变后,菜单>[图像]>[调整]>[色调分离]>

Photoshop制作像素画入门教程详解,PS教程,素材中国网

根据具体情况调整数值。下面是三种轮廓线填充后的对比,小图来说不太明显。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

加上其他修饰,基本完成。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

先看看效果图

Photoshop制作像素画入门教程详解,PS教程,素材中国网

1. 放大存储

很多人不知道怎么放大,因为一旦放大,图像就会变得模糊,就算不放大出来的效果也不是太清楚。这是因为像素的特殊性,所以保存只能为gif或png。作任何操作前,最好备份一份psd文件,以免出错后无法挽回。

首先ctrl+s保存一下当前文件

然后把模式改为[索引模式]会提示合并所有图层,不用担心,存完会自动恢复。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

然后根据需要放大。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

然后下面这一步一定要注意,一定是[另存为],不然没有保存副本的话,你可能把源文件覆盖,里面的层都会丢失。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

推荐为png格式,当然为了保护版权,允许你存为jpg。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

现在关闭当前文件,选择不保存。

因为合并图层了,保存的话之前的层就都没有了。

2. 填充色出现毛边

很多人上色的时候不知道一些设置,结果出现毛边。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

字体也是一个道理,这是几种选项结果。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

3. 替换颜色

像素的色彩通常很鲜艳,如果做完后发现要调色,不必再去一个个点绘方式去修改,那样等于重画一遍,有两种方式:

(1) 选择工具

到要改颜色的层,然后下面的菜单

Photoshop制作像素画入门教程详解,PS教程,素材中国网

直接用滑鼠选取图像中的颜色,以墙壁为例。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

选取确定后,到调色板选色,直接按alt+delete即可填充。

当然在选择的模式下也可操作修改这部分的其他属性。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

(2) 颜色替换工具

到要改颜色的层,然后下面的菜单

Photoshop制作像素画入门教程详解,PS教程,素材中国网

依然是选择墙壁,然后可以修改其中的选项、色相等,

也可以点击标注区域的色框。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

点击标注区域的色框后,出现调色板,即可选色更改。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

4. 线条的注意

此幅作品线条有一些问题

Photoshop制作像素画入门教程详解,PS教程,素材中国网

首先此类像素作品是没有透视的,因此地基的线条均以下方式开始绘制

Photoshop制作像素画入门教程详解,PS教程,素材中国网

两边线的线也一定要准确,这样才会美观

Photoshop制作像素画入门教程详解,PS教程,素材中国网

其次直线不要打好几个弯

Photoshop制作像素画入门教程详解,PS教程,素材中国网

这是我重绘的,像素最重要的就是线条和颜色,如果线条都错了,之后的工作将是徒劳的。

Photoshop制作像素画入门教程详解,PS教程,素材中国网

 


分享:

设计原的发展离不开您的支持与帮助,如果您觉得设计原对您有所帮助 可以用微信扫描

相应二维码打赏设计原,赏金将全部用于网站建设

微信