随着插画进入设计板块里,越来越多的企业和品牌开始采用这种更亲民活泼的元素,也使得用户的体验感大大增加。
(淘宝心选插画帆布包)
而区别于一般的插画师,商业插画师则是更为专业的存在,如果说一般的插画是以个人审美为主,那么商业插画则是为服务商家和大众而存在的,以达到吸引用户、引导转化和促进消费的目的。
(书籍配图的应用)
(手机壁纸的应用)
此外,在商业项目的插画设计上,也有着明显的区别,今天,数艺君就以一个精彩的案例,带大家领略一下它的风采。
手机QQ皮肤设计案例:《萌小兔》
《萌小兔》手机QQ皮肤是笔者2014年在腾讯手机QQ皮肤设计比赛中的获奖作品,从这个作品中我们可以看到插画在手机App皮肤设计中的应用效果。
《萌小兔》效果图
设计分析
在开始设计之前,需要对设计背景和界面进行分析。深入的分析有助于将插画元素与实际应用更准确地结合起来,从而设计出好看又实用的皮肤。
设计背景
由于是参加皮肤设计的比赛,因此需要从比赛要求、目标用户群和设计内容这几大方面展开分析。
腾讯手机QQ皮肤设计大赛的要求:风格不限,在不影响界面信息阅读的情况下自由发挥。手机QQ的多数用户相对年轻化。在了解了设计要求后,接下来要对界面进行分析。
界面分析
这个比赛需要设计的是手机QQ最主要的3个界面,即抽屉页、聊天页和消息页。通过观察可知,需要进行插画设计的地方包括界面内的图标、导航栏、操作栏、对话气泡和页面背景。
手机QQ的抽屉页、聊天页和消息页
图标
需要设计的图标有消息、联系人、动态、设置、搜索、表情和语音等。
导航栏/操作栏
导航栏用于指示当前页面的内容,承载了页面的标题和操作按钮等信息,需要设计的内容包括背景和分割线等。操作栏则是用户操作功能的区域,承载了操作按钮和信息输入框等信息,需要设计的内容同样包括背景和分割线等。
需要设计的图标
需要设计的导航栏/操作栏
对话气泡
对话气泡是信息交流的载体,承载了重要的对话信息。为了不影响其识别性,只需设计对话气泡的边框等内容。
界面背景
界面背景是指各个界面的背景。抽屉页的背景比较空,有大面积的区域,可以进行复杂化的主题设计;聊天页的背景也比较空,但需要通过这里阅读收发的信息,不适合做复杂化的主题设计;消息页是消息列表页,也不适合进行复杂化的主题设计。
分析和确定好需要设计的区域和设计的重点后,接下来就可以开始构思主题了。
提示:设计皮肤的界面时,需要先对界面进行分析,选择合做创意设计的地方。
主题构思与设计
在确定主题前,要先确定主题的风格,然后根据主题的风格设计主形象和辅助元素。完成主形象与辅助元素的设计后,就可以将其直接应用到界面的设计中。
确定主题和风格
由于这次比赛对作品风格没有限制,因此笔者结合自身的喜好将这次设计的风格设定为活泼可爱风。可爱风格的设计受众比较广泛,可接受度高。确定主题的风格后,考虑用可爱的动物来表现本次主题的形象,因此选择将兔子作为主形象,并采用描边、勾线和上色块的方式进行表现。
设计萌小兔的形象
确定使用兔子的形象来表达活泼可爱风格的主题后,接下来需要设计兔子的形象。先提取兔子的真实形象特征,然后进行草图设计,再绘制线稿,最后进行上色,直到完成整个画面。
萌小兔形象设计的过程
提取兔子的形象特征
从真实的兔子照片中可以总结出兔子的特点:长长的耳朵、小小的嘴巴、圆圆的身体、短短的手脚和尾巴。
提取兔子的形象特征
绘制草图
对兔子的特征进行简化和卡通化处理,在纸上画一些造型,将兔子的头身比例进行夸张表现,让它的头更大,身体更小,以凸显兔子可爱的特征。
绘制草图
刻画细节
01 绘制线稿。新建文档,因为设计的形象是应用到手机QQ软件中的,只要确保该形象在主流手机上能清晰显示即可,因此将尺寸设置为750像素×1334像素,将分辨率设置为72dpi。
考虑到在其他设备上应用的可能性,可以再新建一个1600像素×1600像素的文档。把确定的草图导入Photoshop,然后使用“钢笔工具” 刻画兔子的造型,之后再进行细节刻画。
a. 绘制头部,使用“钢笔工具” 画出圆形的头部。
b. 绘制耳朵,耳朵分为左侧的和右侧的,先画好一侧的效果,再将画好的这一侧耳朵进行镜像处理即可。
c. 画出小小的眼睛和嘴巴。
d. 画出兔子的腮红。
e. 画出兔子耳朵的细节。
f. 画出蝴蝶结。
g. 画出身体和脚,先画好一边的效果,再将画好的这一边进行镜像处理即可。
h. 画出手,先画好一边的效果,再将画好的这一边进行镜像处理即可。
绘制线稿
02 上色处理。将线稿绘制好后,继续为画面上色。这里选择将红色作为萌小兔的主色,使用浅白色填充身体部分,然后使用红褐色描边,再使用红色填充耳朵内的颜色,最后为萌小兔画上腮红,让萌小兔这一形象更加生动。
上色处理
03 绘制多角度视图。将萌小兔的正面画好之后,接着把萌小兔的侧面和背面也画出来。对形象进行多角度的设计,这样有助于我们在使用这一形象时,让形象保持统一。
画出萌小兔的多角度视图
设计道具
只有兔子的形象似乎有些单调,所以再添加一些与兔子相关的道具,如胡萝卜、水果、缎带和心形等。
道具的设计要与兔子的形象相匹配,从真实照片提取图形,然后绘制草图、画出线稿,最后进行上色。
绘制胡萝卜
给道具配色时,同样要考虑可爱的风格特点,这里使用了绿色、蓝色和红色作为道具的点缀色。
道具配色
至此,主形象和辅助道具就设计好了。下面需要将主题形象与界面进行结合。
提示:确定设计风格、选择与设计主题形象是皮肤设计的关键步骤。
形象与界面的结合
将主题形象萌小兔放到手机QQ界面中进行设计。萌小兔的颜色为粉色,手机QQ界面的颜色为蓝色,因此要先将界面的颜色统一设置为粉色,然后将蓝色作为点缀色。
手机界面大色块配色
对界面中需要设计的内容添加颜色,然后将这些内容组合在一起,再整体进行调整。
设计图标
萌小兔的形象比较可爱,所以图标的设计风格也要与萌小兔的风格相匹配。将“信息”“联系人”和“动态”的图标分为一组,将“表情”和“语音”的图标分为一组,再将“返回”和“更多”的图标分为一组。
图标分组
01 绘制“信息”图标。将信封图形作为“信息”的图标,收到消息就像收到了书信。
a. 搜集真实的信封图片,观察其结构。
b. 画出信封的草图。
c. 画一个矩形。
d. 添加白色的封口效果和红色的结构线。
e. 添加心形。
f. 添加装饰性的短线。
g. 将信封图形进行旋转。
a
02 绘制“联系人”图标。直接用萌小兔的头像表示“联系人”的图标即可。
“联系人”图标设计
03 绘制“动态”图标。将“动态”理解为来自远方朋友们的信息,从远处飘来的漂流瓶便是传递这些信息的工具,所以这里选择了漂流瓶来表示“动态”的图标。
a. 搜集真实的漂流瓶图片,分析其结构,包括瓶身、瓶塞和瓶里的液体。
b. 画出漂流瓶的草图,矩形的瓶身会使图标的视觉大小不一致,因此改为圆形的瓶身。瓶内有一卷纸,让整个图形看起来有一些复杂,于是去掉这一卷纸,改为心形。
c. 先画出圆形的瓶身、瓶口和瓶塞,然后画出蓝色的水,再添加一个心形。
d. 画出瓶口的飘带和水里的气泡。
e. 在瓶身、瓶塞和水中加上装饰性的短线条,丰富图标效果。
f. 将漂流瓶图标旋转至倾斜的角度。
“动态”图标设计
04 绘制“语音”图标。这里将话筒的图形作为语音的图标。
a. 搜集真实的话筒图片,分析其结构,包括拾音器、网头、手持管体、音频输出端口和话筒线等。
b. 画出话筒的草图,真实的话筒比较细长,但为了使它更符合设定的卡通风格,将草图画得偏圆润、可爱一些。
c. 画出圆形的拾音器和三角形的手持管体。
d. 在圆形的拾音器上添加一个横条作为装饰元素。
e. 在手持管体尾部增加两个横条。
f. 在圆形的拾音器上面画出网头。
g. 给拾音器、网头、手持管体加上装饰的短线条,以进一步丰富图标的效果。
“语音”图标设计
05 所有图标设计完成后,将它们放到界面中查看应用后的效果,从图标的图形特征及配色两个方面看是否与界面协调。
如果界面使用了粉色和蓝色,图标的配色也应该以粉色和蓝色为主。此时,虽然界面的图形还没有进一步设计,但是图标的整体特征还是比较符合可爱的卡通风格定位的。
图标设计效果
图标的应用效果
设计导航栏和操作栏
导航栏和操作栏需要承载的信息比较多,包括状态栏信息、头像、Tab栏、搜索框、返回、联系人信息和输入框等。
导航栏和操作栏
01 由于导航栏和操作栏承载的信息比较多,因此在设计界面的时候要尽量简洁一些。将多个不同大小的圆形放在不同的位置,形成丰富和有变化的边缘效果,然后添加心形的图案作为背景中的装饰纹样,这样可以丰富导航栏的效果。
设计区域
导航栏和操作栏的设计
02 导航栏和操作栏设计完成后,需要把它们放到界面中查看应用后的效果,看是否与界面及已完成的图标相匹配。导航栏和操作栏的颜色都是粉色的,形状都是圆形的,且浅粉色的心形也符合萌小兔可爱的特征。
导航栏和操作栏的应用效果
设计对话气泡
对话气泡是信息交流的载体,承载了重要的对话信息。为了不影响对话内容的识别性,只需要设计对话气泡的边框即可。
01 画出圆角矩形,将其作为气泡的底板,然后添加细节装饰效果。把画好的兔子头部和胡萝卜作为点缀元素加在圆角矩形上,再添加文字查看应用后的效果。
气泡设计步骤
02 分别用粉色和蓝色作为两个对话气泡的颜色。
颜色搭配
气泡分析
03 气泡设计完成后,需要把它们放到界面中查看应用后的效果,看是否与界面及已完成的图标、导航栏和操作栏相匹配。整个界面的元素都使用了粉色和蓝色来表现,结合圆润的图形,看起来是比较协调的。
气泡应用效果
设计界面背景
抽屉页的背景比较空,所以将其作为展示萌小兔的主要页面。
01 这里设计了一个萌小兔跳起来撒胡萝卜的样子,来表现兔子对胡萝卜的喜爱,这样更能活跃气氛。
a. 设计动作时,可以自己摆出这个动作作为参考,也可以找一些其他的参考图。
b. 绘制草图,画出能构思的元素。
c. 绘制萌小兔的线稿。
d. 为萌小兔上色。
画出萌小兔的动作
02 萌小兔的主要形象在这个页面中有两种摆放方式:一是展示在页面的侧面,二是展示在页面的底部。底部的面积比较大,放在底部显得比较中规中矩;侧面的面积虽然有限,但能表现出萌小兔活泼和有趣的形象,最后选择了侧面的摆放方式。
抽屉页的设计效果
03 聊天页的背景有很大的设计空间,可以设计一个完整的萌小兔形象,但考虑到聊天页需要阅读和收发信息,设计得简洁一些更为合适。
因此,降低萌小兔的不透明度,既能保证形象的完整性,又不干扰信息的阅读。在设计的过程中,将不透明度从10%调整到了60%,最终结合功能性与识别性,选择了30%的不透明度设计。
聊天页背景不同透明度尝试
04 消息页是展示消息列表的页面,不宜设计得太复杂。因此只改变了文字、 背景色和分割线的颜色。
消息页设计
整体的组合与调整
将各部分内容设计好之后,把它们结合到一起,再进行细节的调整。让导航栏和操作栏上的心形元素避开文字和图标,将操作栏的消息、联系人和动态图标调整至合适的大小。至此,主要界面的设计就完成了。
完成图
提示:将需要设计的内容进行拆分,然后逐一设计,这样可以降低设计的难度。虽然本案例是个性化的皮肤设计,但也要具备一定的识别性和可操作性。
相关内容的设计
主要的界面设计完成后,补充主题封面和Banner,方便用户在下载前能直接查看皮肤设计的效果。
主题封面的信息包括皮肤名字和皮肤的内容,最好使用与皮肤色调风格接近的图形表示。
主题的封面展示
主题的页面展示
推荐阅读:商道网
(正文已结束)
免责声明及提醒:此文内容为本网所转载企业宣传资讯,该相关信息仅为宣传及传递更多信息之目的,不代表本网站观点,文章真实性请浏览者慎重核实!任何投资加盟均有风险,提醒广大民众投资需谨慎!