分享此网站可得100G教程,联系小洁领取点击这里给我发消息

十分简单的足球场ICON教程

icon图标 学UI设计 668次浏览 0个评论

我本来是不喜欢踢足球的,但是上周为凑人数被同事强行拉去踢球,踢的屎都快飙出来了,全程连球都没碰到,光在场上来回跑了……

回来全身疼了三天才缓过来,所以画个简单的足球场ICON,纪念一下我悲哀的球场生涯。

图标的PSD已经整理好 上传了。

十分简单的足球场ICON教程

之前出过一期教程,当时画的是金属材质的唱片ICON,所以这次打算画一下木头材质ICON。

这里写了基本ICON绘制的步骤,所以这一篇不再讲基本绘制方法了,直接进入主题去画。

我们开始吧……

①ICON基本形状绘制

十分简单的足球场ICON教程

使用黑白灰填充的形状先勾勒出想要画得ICON基本图形和层次,可以先在纸上画一画草稿,脑补一下最终的样子。

②效果和材质的制作

在上一步的基础上,我们开始深入细化ICON每一部分的效果和材质。

(1)外边框的绘制

首先我们确定最外侧边框的原色,这里可以按照一般的木头颜色进行调色即可。

具体情况还要参照实际视觉效果,切忌颜色不要过暗或者过亮,过度要柔和,这个多调几次就可以了。

十分简单的足球场ICON教程

十分简单的足球场ICON教程

基本色确定后,这里我们使用木纹贴图进行材质的制作。

利用剪贴蒙版把贴图剪贴进ICON外边框,但是原贴图表面纹理不够逼真,所以这里使用滤镜–>杂色–>添加杂色进行了一次处理。

添加杂色这个滤镜效果是图标效果制作中经常使用的滤镜之一。

注意:通常找到的材质贴图都是带有颜色的,我们使用是要进行去色处理,也就是

图像–>调整–>去色

然后贴图的图层混合模式设置为叠加,大部分材质贴图应用在图标之中混合模式都会设置为叠加,因为我们对贴图进行了去色处理,叠加之后既可以保留贴图纹理,还能显示下层设置好的渐变色。

贴图透明度设置为40%,根据实际视觉效果去判断纹理层的强弱。

十分简单的足球场ICON教程

十分简单的足球场ICON教程
十分简单的足球场ICON教程

(2)内边框的绘制

   内边框使用和外边框反向的填充色,同时微调一下即可。因为我们的光源使用的是90度,所以需要设置一个底边的亮投影,具体设置见下图。

这里说一下,多数时候,图层效果的混合模式也多采用叠加,正片叠底等等,这样可能比“正常”有更好的视觉效果,绘制的时候建议多尝试一下其他的混合模式效果。

十分简单的足球场ICON教程

十分简单的足球场ICON教程

十分简单的足球场ICON教程

(3)球场的绘制

球场没什么太难的技术点,主要搞清楚需要绘制哪些元素就可以了。

草坪的绘制:

为了模拟球场草坪效果,这里还是使用到了滤镜效果里的添加杂色。形状需要转换为智能对象才可以使用滤镜效果。

球场的深浅交替纹理,自己画几个黑色矩形,然后剪贴进去一叠加,调整一下透明度就可以了。

白色球场的绘制:

球场本身画完之后添加了蒙版,然后用画笔擦一擦,模拟了油漆掉漆的情况。

阴影的绘制:

阴影对于图标来说,是很重要的组成部分。

仅仅针对这个图标来说,因为我们的光源角度为90度,所以阴影是至上而下的渐变。

同时球场四周需要有阴影的散射。

所以这里新建个图层,使用渐变填充来绘制从上至下的主阴影,注意透明度;

然后新建另一个图层,用画笔点几笔,之后进行滤镜–>模糊–>高斯模糊,作为阴影的漫反射。

十分简单的足球场ICON教程

十分简单的足球场ICON教程

③优化图标

画到这里其实图标已经完成,但我们还需要对图标进行优化和润色。

调出属性面板里的色相/饱和度,对饱和度,明度以及色相进行微调,就得到了最终的效果。

所有图标的绘制最后都可以进行这一步操作进行深一步的优化。
十分简单的足球场ICON教程

十分简单的足球场ICON教程

到这里就结束啦,就这样吧。


推荐:查看最受欢迎的设计导航网站 → http://www.xueuisheji.com

交流:结交更多有才华的设计师?请加入UI设计QQ群 ,与设计师交流设计。

喜欢 (1)
[关注:设计军团]
分享 (0)
关于作者:
学UI设计网专业的UI设计师交流、学习与展示的平台。我们将打造中国最专业的UI设计交流平台,为UI设计师做最好的职业生涯一站式服务,提高UI设计乃至互联网设计的行业价值!