56下载通 - 高速下载,丰富资源,一站式下载平台

首页 软件教程 零基础也能掌握的AI插画技巧:打造独特的哈利波特主题图标

零基础也能掌握的AI插画技巧:打造独特的哈利波特主题图标

时间:2024-06-28
来源:56下载通

教程效果图

AI教程!零基础也能学会的插画风格哈利波特主题图标

教程步骤

步骤一:绘制草稿

根据哈利波特里面主要元素结合游戏的形式,进行草稿制作。

步骤二:新建文档

打开Adobe Illustrator,点击文件->新建(快捷键Ctrl+N),创建一个新文件,参数设置如下:

AI教程!零基础也能学会的插画风格哈利波特主题图标

图标一:魔法棒-冒险图标

思路:哈利波特里面标志性的物品-魔杖,结合使出魔法的气息,会更加灵动性。但为了权衡每个图标的比重关系,单单一个魔杖还是太细小了,因此加上哈利波特最有标志性的死亡圣器,将魔杖竖放,刚好对应的是死亡圣器中间的竖线魔杖标志。

1. 先绘制一个89*63px的矩形,无填色,描边为1pt,颜色为#ffce00;使用小白工具(直接选择工具)将左右上角往中间点移动得出一个等边三角形。

AI教程!零基础也能学会的插画风格哈利波特主题图标

2. 在三角形中间添加一个41*41px的正圆,再使用直线段工具绘制一条直线,便能得出下图死亡圣器的形状。

AI教程!零基础也能学会的插画风格哈利波特主题图标

3. 绘制一个7*104px的矩形,在矩形下方使用钢笔工具增加两个锚点,使用小白将锚点往里面移动,再将四个圆角往内拉,得出下图魔杖的外形。

AI教程!零基础也能学会的插画风格哈利波特主题图标

4. 在绘制几个形状不一的圆,使用路径查找器的交集,便能得出以下的图。

AI教程!零基础也能学会的插画风格哈利波特主题图标

5. 接下来绘制阴影和光影,使用钢笔工具在魔杖对半的位置画个形状出来,再全选,使用形状生成器将右边不要的部分按alt键del掉。

AI教程!零基础也能学会的插画风格哈利波特主题图标

6. 接下来,选中右边阴影部分的形状,添加外观,混合模式为正片叠底,不透明度为70%(里面的图标阴影部分均一样)。

AI教程!零基础也能学会的插画风格哈利波特主题图标

7. 光影部分也跟投影的操作是一样的,在左边使用钢笔工具绘制一个大概的受光面,全选使用形状生成器将不要的部分按alt键del,再点击外观,混合模式为滤色,不透明度为50%(里面的图标光影部分数值均一样)。

AI教程!零基础也能学会的插画风格哈利波特主题图标

8. 最后绘制魔法,使用钢笔工具勾勒出一个大概的形状,颜色为#dcbdff,降低不透明度80%,使得有魔法的气息。选中魔杖和魔法点击形状生成器,分别在往下数第一个第三的转弯处截断,如右下图黄色箭头往上拉。最后将魔杖和魔法右键编组放在死亡圣器上就好啦。

AI教程!零基础也能学会的插画风格哈利波特主题图标AI教程!零基础也能学会的插画风格哈利波特主题图标AI教程!零基础也能学会的插画风格哈利波特主题图标

图标二:魔法书-任务图标

思路:魔法课的书籍再结合哈利的眼镜作为标志,会比较能体现这一系列的ip。

1. 绘制三个矩形,分别为12*52px,45*52px,57x15px,颜色为#995936

2. 使用直接选择工具+钢笔工具移动锚点,得到以下形状。

AI教程!零基础也能学会的插画风格哈利波特主题图标AI教程!零基础也能学会的插画风格哈利波特主题图标

3. 选中下边的形状,点击对象-路径-偏移路径-位移-2px,颜色为#d89f79.

AI教程!零基础也能学会的插画风格哈利波特主题图标

4. 接着是边角套,绘制两个7*24px的矩形,和一个14*14的正圆,拼在一起全选使用路径查找器的联集。按住alt键可复制一个到右下角。边角套就完成啦。

AI教程!零基础也能学会的插画风格哈利波特主题图标AI教程!零基础也能学会的插画风格哈利波特主题图标

5. 然后绘制哈利波特的眼睛,绘制两个35*35的正圆,无填充,描边为2pt,颜色为#ffce00,在两个圆中间使用钢笔工具连接一起即可。

AI教程!零基础也能学会的插画风格哈利波特主题图标

6. 最后绘制光影啦!

AI教程!零基础也能学会的插画风格哈利波特主题图标

7. 绘制暗部和亮部方法跟上面的图标是一样的,分别在书的右面,书的下面,眼镜添加阴影。

AI教程!零基础也能学会的插画风格哈利波特主题图标

眼镜的投影可ctrl+c复制一个,右键排列->后移一层,将描边颜色改为书的颜色再添加外观就好啦。

图标三:行李箱-背包图标

思路:哈利每一次回霍尔沃兹学院的行李箱很适合作为游戏图标内的冒险背包图标~

1. 先绘制一个100*64px的矩形,颜色为#d89f79,为行李箱的面。

2. 再绘制4个颜色为#995936的边角,可使用钢笔工具勾勒,接着是每个边角都绘制两个颜色为#d89f79的正圆,并加上内阴影,内阴影部分需复制两次本身的圆,最上面复制的圆往左侧移动一点,选中两个圆按路径查找器的减去底层,便得到一个月亮形状,给它添加外观,正片叠底->70%不透明度即可。

3. 使用钢笔工具绘制把手颜色为#995936;绘制三个矩形颜色#c28c5e的开关按钮。

AI教程!零基础也能学会的插画风格哈利波特主题图标AI教程!零基础也能学会的插画风格哈利波特主题图标AI教程!零基础也能学会的插画风格哈利波特主题图标

4. 绘制两个颜色为#995936的矩形;使用钢笔工具绘制颜色为#c28c5e的行李箱带子;

5. 使用圆角矩形绘制一个无填充,描边为3pt、颜色#995936的扣子,和填充色#995936、描边为1pt、颜色#7d5219的扣子钉。

6. 接着是哈利波特的标志,底框为#ffce00,“H”#72321c,可使用钢笔工具或者矩形叠加后联集。(关于形状叠加联集方式详情可看步骤二~)

AI教程!零基础也能学会的插画风格哈利波特主题图标

7. 最后是投影部分!

方法也是跟前面的一样,在背光面使用钢笔工具勾勒出投影,再使用形状生成器按alt键del就可以了。

AI教程!零基础也能学会的插画风格哈利波特主题图标

图标四:徽章-成就图标

思路:哈利波特所在的格兰芬多学院,颜色主要以红黄搭配,由于画狮子很复杂,游戏小小的图标不易于有太多细节,因此直接简化省略掉啦~

1. 先使用钢笔工具勾勒出徽章的外形,无描边,填充色为#995936,使用上面所说的对象-路径-偏移路径-位移数值改为一个适当的负数即可,重复两次,便得出颜色为#d89f79、#72321c的形状。

AI教程!零基础也能学会的插画风格哈利波特主题图标

2. 接下来是里面的格子,先绘制一个#72321c的矩形,覆盖在徽章上,然后点击对象-路径-分隔为网格,行数、列数分别为2。接着还是选中矩形点击路径查找器-分割-右键矩形取消分组,这时候就分离成四格格子,右上角和左下角颜色改为#ffce00。

AI教程!零基础也能学会的插画风格哈利波特主题图标AI教程!零基础也能学会的插画风格哈利波特主题图标

3. 将四格选中右键-排列-后移一层-选中四格和最上面的徽章-点击路径查找器的裁剪,便能得出下图最右边的图案。

AI教程!零基础也能学会的插画风格哈利波特主题图标

4. 阴影部分

将最上面那层ctrl+c复制两次得出两个一样的图形,选中两个图形使用形状生成器将最里面的形状按alt键del掉。最后将裁剪好的外框放入徽章内,点击外观-正片叠底-不透明70%。

AI教程!零基础也能学会的插画风格哈利波特主题图标

5. 彩带部分

使用钢笔工具绘制颜色为#ffe6ae的彩带形状,再用钢笔工具勾勒出阴影部分使用形状生成器alt键del掉多余的形状,外观-正片叠底-不透明度70%就完成阴影。

AI教程!零基础也能学会的插画风格哈利波特主题图标

图标五:活点地图-地图图标

活点地图是哈利波特内的魔法地图,里面的脚步印最能体现独有的特点。

1. 先绘制4个形状等大的矩形,颜色#d89f79,使用小白工具分别改变它们的四个锚点。

AI教程!零基础也能学会的插画风格哈利波特主题图标

2. 添加地图上的形状#ffe6ae,边边的形状可绘制椭圆,再使用形状生成器alt键del,其余形状使用钢笔工具随意勾出一个形状即可。脚印也是一样的道理,颜色为#5f408,不透明度降低至70%。

AI教程!零基础也能学会的插画风格哈利波特主题图标

3. 最后是阴影部分!

由于阴影部分涉及到不止一种底色的颜色,因此不能使用形状生成器。

先把地图编组,ctrl+c复制多一层地图后隐藏。

AI教程!零基础也能学会的插画风格哈利波特主题图标

接着在地图拐弯处绘制三个无描边无填充的矩形,选中地图和矩形,点击路径查找器的分割,再回到地图右键-取消编组。

AI教程!零基础也能学会的插画风格哈利波特主题图标

这时候已经将每一个矩形根据底下的图案分割成几等份,再分别进行外观设置就好啦~

AI教程!零基础也能学会的插画风格哈利波特主题图标

图标六:魔法药剂-商店图标

思路:魔药是哈利波特内类似一种巫师的药水,有各式各样的功效,能充分作为商店图标的标志。

1. 使用钢笔工具绘制颜色#dcbdff,不透明度80%的瓶身;以及颜色#5f4089,不透明度为80%和#724d83,不透明度为80%的魔药液体。2. 使用矩形工具绘制一个瓶塞,用小白工具移动下面的两个角往中间稍微移动一点,再继续用小白点击四角使得变成圆角。接着使用矩形工具绘制一个小正方形,使用小白点击左右上角往中间移动成一个三角形。将三角形旋转90度移动到圆角矩形内,使用路径查找器点击“减去顶层”即可得出最后的造型,再使用小白稍微将下面的三角往上拉成圆角。

3. 使用椭圆工具绘制几个颜色#000000的等圆作为瓶塞的点缀。

4. 最后是瓶头,使用圆角矩形工具颜色#dcbdff,不透明度80%。再将以上的拼凑在一起。

AI教程!零基础也能学会的插画风格哈利波特主题图标AI教程!零基础也能学会的插画风格哈利波特主题图标

5. 接着是魔药的底座,绘制一个矩形和使用钢笔工具描绘出一个底座形状,再拼凑一起使用路径查找器的“联集”。

AI教程!零基础也能学会的插画风格哈利波特主题图标

6. 最后是投影部分!

方法跟上述的投影方式基本一样的,使用钢笔工具勾勒形状或者形状工具矩形、椭圆+形状生成器alt键del掉,最后组合起来就好啦~

AI教程!零基础也能学会的插画风格哈利波特主题图标AI教程!零基础也能学会的插画风格哈利波特主题图标

最终效果图

AI教程!零基础也能学会的插画风格哈利波特主题图标

  • 零基础插画入门:AI新手教程之彩色渐变小鸟图标绘制技巧

    关于教程 本期视频为你带来一个彩色渐变风格的卡通小鸟扁平图标绘制过程,用到了AI中最常用的几种图形处理方法,非常适合新手学习喔~ 关键步骤提示 详细操作请看文章开头的视频教程演示。 Step01渐变背景 吸取预先准备好的配色方案,制作一张渐变色背景,和一个白色的圆角矩形底版。 Step02扁平...

    时间:2024-06-17
  • 零基础速成!AI打造质感天气图标全攻略

    关于教程 本期视频继续为你带来轻质感图标系列的设计教程,需要注意对图形间投影和透光效果的刻画,非常适合零基础新手一边学习一边熟悉软件,快来试试吧! 教程效果图 关键步骤提示 详细操作请看文章开头的视频教程演示。 Step01图形绘制 完成软件设置后,用圆形绘制出图标的基本形状,并填充相应的颜色。 ...

    时间:2024-06-26
  • AI教程!适合零基础学习的质感电话图标教程

    关于教程 本期教程继续为大家带来质感电话图标的绘制教程,零基础新人也可以快速上手的AI设计小技巧! 教程效果图 关键步骤提示 详细操作请看文章开头的视频教程演示。 Step01图形绘制 用基础图形勾勒出图标的造型,注意电话圆角的调整和wifi对称圆弧的绘制。 Step02渐变添加 依次给图标中的...

    时间:2024-06-26
  • 零基础插画入门:AI新手教程——扁平矢量小图标绘制指南

    关于教程 为新人设计师准备的【零基础学插画】系列视频教程来啦~ 第一期先教大家用钢笔勾勒出插画的基本造型,快来试试看吧~ 点此跳转到下半部分: 关键步骤提示 详细操作请看文章开头的视频教程演示。 Step01准备工作 预先准备好一张草图作为参考,然后对AI软件的基本参数进行设置。 Step0...

    时间:2024-06-17
  • AI进阶教程:轻松掌握复古色调商务办公主题图标的绘制技巧

    教程步骤 Step01新建文档 1.1打开Adobeillustrator,点击文件→新建(快捷键Ctrl+N)创建一个新文件,宽800px,高600px,颜色模式RGB。 1.2新建矩形,宽800px,高600px,颜色#FFE8CA,对齐到画板中间,命名为背景并锁住。 Step02绘制钟...

    时间:2024-06-23
  • 新年特辑:零基础也能飞速入门的C4D教程全集!

    这几年,随着人们慢慢对扁平化的审美疲劳,3D效果开始刮大风,从电商页面,到UI界面,都悄咪咪地变立体了,就连微信8.0更新的小黄人表情包,似乎也没有那么平了…… 图源:dribbble (图源:TranMauTriTam✪) 而作为最容易上手的3D软件,MaxonCinema4D有多火,想必你也...

    时间:2024-06-12