photoshop界面设计:精美可爱小鸟UI细致教程

2018-09-2408:30:34UI设计Comments3,889 views字数 2219阅读模式

偶然间看到了最近的电影《愤怒的小鸟》电影版的预告片的时候,顿时想到了·~何不画只鸟呢!今天折腾先生就简单的教大家用photoshop画出这只似(鸡)似(鸟)的萌物~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

难度:★★★☆☆文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

工具:Photoshop、手绘板文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

绘制思路:身体→翅膀→脚丫→阴影→眼睛→嘴巴→细节调整文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

身体文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

-- 新建文档,800X800px文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

-- 在工具栏中使用钢笔工具,按下图画出鸟身体的一半(颜色随意),这里需要注意的是A,B两点的控制线需保持水平(如下图),这是为了下一步的镜像合并。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

-- 复制这个图形,然后执行 Ctrl+T(mac用户为Command),右键选择“水平镜像”。然后选中左右两半执 行Ctrl+E合并起来。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

-- 选择“路径选择工具”选中刚合并的形状,执行“合并形状组件”。(如下图)这样他们两个就是一个形状了,而不是分开的组件了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

在图层面板,双击此图层执行“渐变填充”,设置如图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

将形状转换为智能对象。执行“滤镜-添加杂点”,设置如图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

继续对此图层执行“滤镜-模糊-径向模糊”,设置如图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

继续对此图层执行“滤镜-锐化-进一步锐化”,设置如图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

将此图层栅格化,执行“Ctrl+U”调整颜色饱和度,如下图(这里的数值主要看你自己喜欢,不必完全安全我的参数~):文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

接下来要做边缘的小绒毛。运用“指尖涂抹工具”,并设置笔刷为我们刚才创建笔刷。耐心的将边缘顺着形状逐渐涂抹,这一步相当关键,一定要有耐心。 如下图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

新建一层选择一个较深的近似色,用画笔涂抹暗部,将混合模式设置为“正片叠底”,然后运用“剪切蒙版”嵌套到下面的身体图层,进一步加强立体感。如下图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

继续新建一层,运用“椭圆工具”画一个白色的椭圆形状,将混合模式设置为“柔光”,作为它的小肚子。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

复制刚才做好的小肚子,对图层添加蒙版,将前景色设置为黑色,用画笔将下半部分擦除掉。这样小肚子的立体感立马出来了。最后将这两个图层都嵌套到下面身体的图层里去。如下图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

接下来我们来画头顶的羽毛,思路其实和身体的毛差不多。如下图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

1.先用钢笔工具画出基本形状;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

2.复制它,然后高斯模糊并置于形状图层下;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

3.将钢笔画出的形状栅格化,用指尖涂抹工具顺着毛的方向耐心的涂抹出羽毛的质感;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

4.新建图层,用画笔工具选择毛发笔刷轻轻画在毛与身体处,羽毛就画完啦。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

身体部分基本完成,目前整体效果图就像这样~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

翅膀文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

翅膀的画法基本和身体的思路一致的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

先用钢笔工具画出基本形状,并设置图层样式如下图;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

将形状转化为智能对象-添加杂点-径向模糊-锐化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

栅格化后,用涂抹工具按照翅膀的形状耐心的涂抹出羽毛。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

新建图层,用画笔工具画出翅膀的亮面,并用剪切蒙版将这个图层嵌套在涂抹好的图层里。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程
photoshop界面设计:精美可爱小鸟UI细致教程

完成这一部后~可爱的小翅膀就这么出现了~n(*≧▽≦*)n文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

脚丫文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

由于脚丫被圆鼓鼓的肚子遮挡了不少,所以我就偷懒啦,并没有将脚丫画全。而且这里并不是重点,所以没必要花太多的精力。只要简单的图层样式就可以表现啦。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

好了~目前的效果就是这样。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

阴影文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

阴影制作的方法很多,可以直接画一个椭圆填充重一些的近似色;也可以直接画一个圆,高斯模糊,通过Ctrl+T来改变形状大小。由于篇幅有限,这里就不说太多(因为太简单了嘛~一定难不倒你~)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

so,目前的效果就是这样~是不是发现重量感有了~♪(^∇^*)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

眼睛文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

眼睛一般都是一幅画的点睛之笔,有了眼睛就有了故事。所以我们需要花多一点的精力在眼睛上。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

用椭圆工具画一个圆,然后用直接选择工具调整如图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

对圆形添加图层样式,分别是外描边、内阴影、渐变填充、阴影。具体设置如图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程
photoshop界面设计:精美可爱小鸟UI细致教程

眼白完成了~接下来画内部的瞳孔。用椭圆工具画一个正圆,添加图层样式,参数如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程
photoshop界面设计:精美可爱小鸟UI细致教程

再画一个正圆,添加图层样式,如图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

眼睛内部的纹理。新建两个矩形,填充为#45270b,然后旋转360°。添加蒙版,放射渐变(外虚内实)。最后将混合模式选为叠加。将纹理图层放在黑色瞳孔图层下面,如图所示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程
photoshop界面设计:精美可爱小鸟UI细致教程

分别画两个正圆用于高光和反光,这样眼睛顿时就有了神~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

为了增加眼睛的通透感,新建图层,画一个大小如下图箭头所指的圆略小一圈的圆。填充为白色,添加蒙版擦除上半部分。最后将混合模式设置为叠加文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

复制眼白部分的圆形,放大,然后添加图层样式,让它有一个眼眶的感觉,然后“滤镜-高斯模糊”。最后用“涂抹工具”选择毛发笔刷耐心的涂抹出眼眶周围的毛~一只眼睛就这样完成啦!如下图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

右眼稍微调整下形状~样式基本可以复制左眼的~这样眼睛部分正式完成~越来越萌了~~~!!!!文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

嘴巴文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

嘴巴属于五官都是相对点睛之笔,所以不能马虎哦~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

画一个椭圆,通过"直接选择工具"调节节点,直至调整出一个嘴的形状来。张口处也是这样画出。如下图所示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

对嘴的形状添加图层样式,如图所示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

进一步对嘴进行描绘,增强立体感。如下图所示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

1.画一个椭圆在嘴形状之上;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

2.羽化,数值为7;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

3-4.栅格化,框选右侧,并删除文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

5.右侧增加一个反光。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

画一个矩形,填充为白色,将混合模式设置为“叠加”,将图层透明度降至55%,利用蒙版将上下部分擦除。这样嘴巴的形状结构更加明显,如下图所示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

最后画出张开的嘴巴,添加图层样式,如下图所示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

到现在为止,整体效果基本出来啦!是不是萌翻了!!文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

photoshop界面设计:精美可爱小鸟UI细致教程

细节调整文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

细节调整主要是为了能够在最后输出时能够更加精致一些。例如可以调整下色彩的纯度,让它看上去更加可人;也可以加入背景;或者换个颜色什么的。。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

真是瞬间被萌化~不知你学会了木有~这篇教程属于偏中高阶难度~关键主要有以下几点:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

对光影的理解文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

对形体的理解文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

对质感的熟悉程度文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

以及够不够有耐心哦~​​​​文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/5747.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/ui/5747.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定