全网流行的像素风插画怎么做?看这篇教程就够了!(下)-网页设计-365手机app_彩票365app老版本软件下载_365网站打不开了 建设 365手机app_彩票365app老版本软件下载_365网站打不开了

<legend id="h4sia"></legend><samp id="h4sia"></samp>
<sup id="h4sia"></sup>
<mark id="h4sia"><del id="h4sia"></del></mark>

<p id="h4sia"><td id="h4sia"></td></p><track id="h4sia"></track>

<delect id="h4sia"></delect>
  • <input id="h4sia"><address id="h4sia"></address>

    <menuitem id="h4sia"></menuitem>

    1. <blockquote id="h4sia"><rt id="h4sia"></rt></blockquote>
      <wbr id="h4sia">
    2. <meter id="h4sia"></meter>

      <th id="h4sia"><center id="h4sia"><delect id="h4sia"></delect></center></th>
    3. <dl id="h4sia"></dl>
    4. <rp id="h4sia"><option id="h4sia"></option></rp>

        365手机app_彩票365app老版本软件下载_365网站打不开了 建设

        全网流行的像素风插画怎么做?看这篇教程就够了!(下)

        发布时间 :2020/08/21

        那么前面讲了辣么多,也不知道你们学会了没有。接下来就是我们本次教程的重头戏了!!!用ps绘制像素风插画场景!!!在开始前,我们先来说一说用ps绘制像素风插画的优点是掌控比较灵活,对于复杂的光影处理也比较灵活。缺点是,虽然鼠标也可以画,但是对手的灵活度有较高要求。


        使用的工具及注意要点


        画布的大小会影响终线条的粗细感


        一般画布尺寸单位都为「像素」,尺寸尽量设置一个整数。

        例如:50px*50px,100px*100px,200px*200px,500px*500px....在这个基础上再根据实际的需求调整长宽中的一项。


        我们分别新建这几个的大小的画布,并将「笔刷」和「橡皮」的模式切换为「铅笔」。

        我分别在不同尺寸的画布中,使用系统自带的「硬边圆角」笔刷,大小为1,画出相同的线段,并导出相同的大小给大家感受一下线条的区别。


        可以发现在画笔大小和导出图片大小相同的情况下, 画布越小,线条越粗。所以大家一定要在画之前考虑好画布的大小。例如50*50px,100px*100px的画布更适合做粗描边的设计,例如图标,稍微大画布更适合做场景插画。




        线条的绘制方式


        直线:直线按住shift,长按鼠标左键拖动即可。手不稳的同学,可以按住shift,在直线的尾各点击一次鼠标左键即可。


        斜线:斜线可以分为45°斜线和其他斜线。按住shift,鼠标左键点击一下开头端和末尾端就出来了。

        当然,很多把控不好的同学,也可以像前面ai作一样,一个一个去点出来。觉得线太长,找不到起点和终点,也可以按住shift分段点,例如5格一次。


        线条的绘制原则


        我们再来回顾一下,前面说的线条原则:多用直线和45°斜线,曲线保证曲率在下降或上升时保持递增或者递减的状态。



        绘制场景线稿


        选择一张场景的照片,托进ps中,先调整照片的布局。我个人比较习惯的方式是,先把照片放大,让主体建筑大化体现。保存得到一张新的场景。



        新建200px*200px的画布,适当调整画布的长或者宽中其中的一项。因为一开始更想突出晚霞,所以我把高度稍微拉高了一些。拉完之后的画布高度是200px*262px。




        将照片放置进画布中,照片不透明度,新建图层,对边缘进行勾描。



        TIPS:对照片进行大化的概括,如果画面出现的斜线和曲线比较多,能用45°斜线的尽量用45°斜线代替,曲线部分一定要注意曲线率在上升和下降时递增或递减的关系。


        加入窗户,窗户不需要还原,可以尽量画的大一些。

        接着画草丛。由于图片上没有草丛,如果同学们没有把握,可以去再找一张草丛的素材贴上去再去勾勒。

        勾完之后我们用比较圆的曲线画出云的轮廓。同理,如果不会画可以用圆形工具先拼出来。再去勾线。

        这个时候天空会有点空,所以再加入一些电线杆做装饰。

        在这样和那样之后,我们的线稿就完成了。其实在一些画风中是没有描边的,但是画出线稿之后,等于直接处理完了轮廓边缘,对我们之后的上色更加的容易。但是,如果对画面掌控胸有成竹的同学,所选择的画面风格又是不需要描边的,我们就可以直接省掉线稿的部分。


        上色


        由于绘制的是一个晚霞的场景,所以在颜色的选择上,使用的是紫色调。饱和度相对比较低,天空的明度较高,房子的明度较低。


        将线稿不透明度,我们先填充一个背景色。

        将笔刷放大,沿着描边,填充房子的颜色。切记房子和房子之间的颜色要隔开。窗户都统一使用墙面颜色的深色进行填充。每一个块面分一个图层,方便后面做细节。

        后,对云层进行以及电线杆进行填充。

        细节光影的制作


        先,在背景的基础上加入一些渐变。



        TIPS:天空的渐变部分我们需要使用系统自带的「柔边压力不透明度画笔」并且画笔来过渡一下。



        给云层加入变化。这一步尤为关键,云层是起到氛围感的作用的。

        在开始画之前我们可以来观察一下真实云层的结构。可以看到,云层分为明暗灰以及受晚霞影响的环境色。其中,亮部在外部,暗部分散在亮部中间,其余部分为灰部,形成云层的体积感。而晚霞,集中在云层的下方。


        这里还要强调一点,云层的明暗灰边缘一定要做的不规则一些,可以稍微处理的小块一些,如果太过规则并且大块会显得没有细节。

        按照上面的原则,我们在云层色块新建一个图层,并做剪切蒙版,先给云层加入亮部。

        接着加灰部。

        加入受晚霞影响的云层颜色,与云层同理,也可以分为明暗灰。

        由于整体的云层有点不透气,加入橘色和黄色去增加透气感。

        给房子加入墙面一些变化,渐变的变化颜色不需要太大,房顶靠近天空的位置可以用「柔边压力不透明度画笔」,吸取天空的颜色过渡一下,颜色可以只调整几个单位的「明度」去做变化。

        给窗户加入线条,并选择几个窗户做云层的颜色。

        后,天空加入几颗星星和月亮去做点缀。当然也可以把上半部分截掉


        导出



        「文件」— 「导出」—「存储为web所用格式」。选择JEPG和PNG都可以,如果你要导出的是透明通道就选择PNG。输入自己想要导出的图片大小。这里一定要注意,品质一定要选择邻近,不然导出的图片会糊。





        作为像素风教程,当然要涉及到每个方面!接下来,我来教你们在ps制作图标的快速方法。

        新建一个50*50的画布,新建一个图层。然后双击图层,弹出图层样式。


        接下来设置图层样式,勾选一个内阴影和两个投影,设置参数,并改变颜色。以下是数值参数。


        接下来拖进图片,将图片透明度,放大笔刷,根据图片去涂出来就可以了。

        为了保证对称,可以使用ps2018以上版本的绘画对称工具。



        可以发现我们设置的内内阴影其实是白色的描边,大小其实就是决定了描边的粗细,粉色的部分是个投影,距离是决定了描边粗细,后一层阴影是第二个投影,因为改变了不透明度,所以颜色在背景色上有阴影的感觉。

        TIPS:投影除了改变不透明度,也可以改变混合模式:正片叠底去体现。


        后我们来说说Aseprite。这是一款专门用于绘制像素风的软件,界面风格包括字体的设计,也延续了像素风格,复古。

        优点相较于ps和ai来说,画像素风插画更加有针对性,可以直接开始画。有专门针对曲线斜线调整的工具,大大减少出现锯齿的情况,同时,也可以完成逐帧动画,缺点就是需要重新学习一个新的英文软件,门槛大大提高。(我也是先学,好玩是真的好玩)

        于具体的软件作,实在是工具多。我写了,没有接触过软件的同学大概率也是看不懂的,接触过这款软件的同学也无需我多说。(其实,我是真的肝不动了,自封的“全的像素风教程”,就此打脸)

        感兴趣的同学可以上百度搜索一下软件和教程。


        那么今天的教程就这么愉快的结束啦。此我已经写了4447个字了,相当于六

        篇800字的高考小作文了,看在我如此勤奋的份上,请大家点再看并踊跃转发哟~


        我们下次再见!


        文章来源:胡晓波工作室公众号,网址:https://mp.weixin.qq.com/s/MjWBhghnHL5ReYxL0qmktA



        相关新闻
        标签: 网页设计  

        Contact

        地址:呼和浩特市金川开发区宽城小区#A6-4

        电话:18698468112

        0471-4599590