网页设计 » 视觉设计 » 使用iPad与PS相结合UI插画教程

使用iPad与PS相结合UI插画教程

发表于: 视觉设计. 评论
赞助商链接

很多童鞋都问过我,ipad绘画难吗?好入手吗?ipad和板绘哪个学起来更快速呢?那么通过上一篇《风景照片变手绘插画》文章,我大概介绍了它们两者之间的差别和专业度,那么对于ipad来说,是非常容易入手和使用的,并且它的优势也比较明显,比如方便携带,你可以带着它出去写生,可以拍摄照片,随时随地画,可以拿着给客户讲解,现场改画,不仅能表现出你的专业度,还能大大提升逼格(嘻嘻~~一看就是专业专业!!)

使用iPad与PS相结合UI插画教程

ipad绘画需要下载一个绘画软件Procreate,注意这个是收费的,我买的时候60多块钱吧。在这里我就先不分享其他的软件,因为软件多种多样,但这一款是比较全面,使用流畅,相对应来说使用率最高的一款。(绝对不是广告!!!)

使用iPad与PS相结合UI插画教程

一、软件优势小讲

这里就大概讲一下这个软件的一些比较明显的小优势,绝对不是广告哦!这里我买了好几种软件,但让我用着最舒服的还是这一款,那么接下来就大概介绍一下Procreate几个小优势:

第一个,就是笔刷

这款软件里面的自带笔刷非常丰富,几乎可以运用到很多的绘画中,无需进行导入,并可以轻易画出油画、素描、钢笔画、蜡笔、水彩等效果,而且就比如铅笔笔刷,就有不同粗细的铅笔样式,可以仿真的画出想要的效果。而且笔刷预设可以修改,如图:

使用iPad与PS相结合UI插画教程

可以根据自己的需求修改尺寸、透明度、柔和度、角度等不同的预设。

使用iPad与PS相结合UI插画教程

第二个是功能的强大。

功能很多,在这里我只说几个小点,比如,它有图层叠加样式,与PS的这个功能是一样的;还有选区工具,可以根据需求选择你想要的位置,进行填色,放大缩小或者移动。

再者,它有透视辅助功能,你可以设定开启一点、两点或三点透视,然后你画的线条就会自动沿着透视线变得笔直而准确,非常适用于室内设计师的使用。

它还有剪切图层的用法,在固定色块中,新建图层后,画出的样子只在色块中显示,此功能和PS一样。

对于颜色来说,它可以调节色彩饱和度、明度、对比度等,来对颜色进行进一步的调节。

……

功能十分的强大,如果你是个普通设计师,对于PS很熟悉的话,这些功能完全难不倒你!~

第三个就是导入导出非常方便

可以直接把拍摄好的照片导入到画布当中,当然如果你是用手机拍摄的,这里就可以用到一个苹果自带的功能,存储到iCloud,这样的话,你从手机拍摄的图片,会自动更新到你的ipad里,不过这样也有一些不太好的地方,比如,再看照片时,会加载。

导出功能也是十分方便的,可以导出psd、png、jpg等多种格式的文件,分享到微信、QQ等不同的第三方,这里我本人为了方便,就一直用导出到微信的方法,可以直接发朋友圈嘿嘿~~

导出这里还有一个很强大的功能,就是导出视频,可以导出全部视频或30秒视频,可以直接展示出你绘画的全过程,还是大大提升了逼格哈哈~~让客户爸爸知道你是如何绘制出的这幅画~~~

……

二、我的绘画过程

功能强大,但不需要完全记住,这里给大家介绍一些比较方便常用的快捷手势,请大家记住哦!

  1. 双指敲击:撤销当前操作 按着不动会一直撤销;
  2. 三指敲击:返回到当前操作
  3. 三指左右滑动:清除当前图层画面
  4. 四指敲击:隐藏/显示软件操作界面
  5. 画直线或圆圈时,按住笔不松手,可变圆滑线条;
  6. 画圆圈时,按住笔不松手变成椭圆,一手指按住屏幕,会成正圆;
  7. 图层内,图层向左滑动,可进行删除、复制等操作;
  8. 图层内,双指向右滑动:锁定透明;
  9. 图层内,多个图层,双指合并,可合并所有图层;
  10. 图层内,长按一个图层拖入另一个图层,可新建以这两个图层的文件夹;
  11. 图层内,点击一下图层,可进行剪切、蒙版等操作;
  12. 右上角色板,长按并拖拽至画布,可直接大范围填色。

这里只总结了一些非常常用的快捷键和手势,大家可根据需要多多观察学习。那么今天给大家演示的插画是一副美食类的插画:

使用iPad与PS相结合UI插画教程

这一张照片是我去吃火锅时,随意拍的一张冰粉的照片,拍好后导入到ipad中,在这里,绘画的步骤是:起稿→描边→上固有色→上明暗高光→整体调节。

我的这种画风呢,有点像卡通,或者美式,在之前的文章中,初步介绍了画风,是有很多种的,可以厚涂,可以卡通,随心所欲~不过根据初学者来说,卡通画法是最容易入门的,厚涂的话,以后咱们慢慢开教学哈~~~

大家跟着我的步骤来。

第一步:起稿

首先在这里,选择起稿所用的笔刷,一般在纸上用于起稿的都是铅笔,那么在这里,我们也选择用铅笔。

使用iPad与PS相结合UI插画教程

6B的铅笔会比较深一些,也可以根据自己的手感来控制颜色深浅,左侧的两个竖条配合使用,上边的竖条是控制笔刷大小,下面的竖条是控制笔刷透明度。(中间的呢?中间的是取色)。

起稿的方法非常简单~~~~我绝对不会告诉你描着画。。。(我好偷懒啊~~),其实正常来说,应该按ipad下方的短线向上滑动,将相册拖入至屏幕左侧,就是这个样子~~

使用iPad与PS相结合UI插画教程

这样的话,左边看,右边画,比较方便哒~~

但如果是想描着呢~~那就在右上角的图层面板里,在图片上方新建图层,将图片层的透明度降低,也就是图层中的“N”,这样的话可以清楚的看到你起稿的每一笔。

使用iPad与PS相结合UI插画教程

第二步:描边

稿起好了,那么在上方新建图层,开始描边。描边时就要用到上文提到的快捷键,画线不松手,让曲线变顺滑,不然你的曲线随着你的小手瑟瑟发抖~~~像被啃过的线~~~

在这里我用到的笔刷就是如下:

使用iPad与PS相结合UI插画教程

就是工作室笔,用下方的Technical Pen也是可以的,相比之下,工作室笔比较粗一点,用力明显,也就是说,根据你画笔的力度来控制粗细。这两种笔刷用来描边是最常见的。

第三步:上固有色

如果你对色彩不是特别敏感,那么可以直接按照原照片的颜色来取色,都画完以后再拖到ps里进行调节都是可以的。固有色的意思嘛,就是说,在这个物体中,能够代表这个物体的颜色,不是高光,也不是暗面。比如说那个水壶,它的固有色就是深红色,不管它的深红有深还是有浅,就吸中间的常见的红,直接按照边界涂上。涂多了咋办?不要问我,问问橡皮~~~

但是涂色的时候,如果用工作室笔,那是相当费劲了,这里有两种方法,一种是用工作室笔,在你想填色的物体周围画一个封闭的圈,再根据上文最后一个快捷方式,长按住色板拖拽到物体内;第二种方法,就是换个笔刷啦~~~

使用iPad与PS相结合UI插画教程

Nikko Rull这个笔刷是非常常见的填色笔刷,大胆的去画就好~~其他多余的可以橡皮擦掉。

固有色就这样上完啦,下一步就是明暗,画明暗的时候要切记,一定要新建图层,在图层上点击一下,剪切图层,也就是说,你给什么物体画明暗,就剪切到哪个图层上,这样画不会超过边界。画的时候也要用描边的笔来勾线,填色,一层一层,和画插画一样的流程。

这里的步骤,就不一一演示了,大家可以先画暗面再画亮面,最后点高光。画高光是一个很爽的过程~~

画完之后可以稍微修改一下背景色,之后是这个样子的:

使用iPad与PS相结合UI插画教程

就像我的这样,很多很多图层。如果你不记得分图层,小心后期改起来麻烦哦~~

到目前位置,这幅画就完成了哦~~绘画的过程大家一定要多多尝试,并不是我每一步每一笔都讲出怎么画,就会画了,换一张照片还是画不出来的。要多多练习哦~~

三、PS最后制作

画好之后就可以导出psd啦,就在上方的分享按钮里:

使用iPad与PS相结合UI插画教程

导出后放入ps中,此时的配色一定不是你想要的,那么我们去找一下,红色,都有什么样的颜色可以用的,而且为什么要用红色呢?

在大家的设计印象中,能够突出食物的味觉,应该以暖色为主,那么这个场景,为四川火锅里面的美食,那么我选择的,就是火热的红色。但因真实场景和光线问题,这个暖壶红色又太深,此时,就可以去寻找一些适合的红色。

使用iPad与PS相结合UI插画教程

可以找寻一些比较喜欢的配色,放在一起对比一下,选择出你喜欢的那一款。

将主体颜色进行重新调整。

之后进行排版布局,想象一下这个图,是可以用什么风格展现?它能代表着什么?

在这里,我首先想到的就是中国风,因为它的主体是四川火锅的美食,强烈的中国风感觉,并且中国风很适合于红色。那么中国风比较突出的元素都有什么?

山水、祥云、水墨、印章、锦鲤、荷花……

你可以把喜欢的元素都用用试一下,放在页面中,你认为怎么放好看就怎么放,当然要注意的是,不要太过于抢眼,因为主体是咱们的插画,突出的就是美食,其他元素就只是点缀,丰富页面。

使用iPad与PS相结合UI插画教程

我没有添加过多的元素,因为考虑到要加文案的关系,但是在背景上,我加了图案,若隐若现的质感,可以根据自己的需求来添加。对于中间的插画部分,我考虑到如果凭空出现,很奇怪的感觉,倒不如用不规则的形状遮挡一部分,这样整体还比较和谐。

再添加一些香味的图形,表现出香气扑鼻的感觉(实际是没有香味滴~~冰粉嘛,凉凉的,这种香味的图形比较适合于热气腾腾的感觉)。

最后,加上文案,稍微排版,文案的添加,更多以中国风的感觉来的,比如田字格,竖版文字,要遵守平衡感,上边有字下边空会头重脚轻,文字的排版要多看多练习。

于是,一副插画就完成了。

使用iPad与PS相结合UI插画教程

四、总结

今天的分享很快就到尾声了,那么这类插画需要用多久的时间呢?像这一幅,正常时间大概在1天~1天半之间,对于插画来说,也是比较快捷完成的作品,大家可以试试哟!

这次分享就到这里,感谢大家的关注~记得点赞哦!

掰掰~~~

作者:Lina琳
个人主页:https://zoulin.zcool.com.cn/

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。