Dribbble码及填坑教程

用户头像
北京/设计爱好者/9年前/21481浏览
Dribbble码及填坑教程
用户头像
Brenton

之前没有详述高光阴影的绘制确实不是想留一手什么的,当时只是觉得应该是很基础的东西,没想到还是有很多朋友不太会,这次填坑,抱歉。

4d45589b3671a801219c77dcebbc.jpg

 

这次送码有如下要求:

 

  1. 首先看作品质量,是否有想法,是否重细节等。

  2. 其次看用功程度,或者说看平时在相关平台的活跃程度,是否常发作品等,不常发作品的童鞋就不要申请了哈,再次强调,不常发作品的童鞋就不要申请了哈。

  3. 关注我的追波并在追波上常发车,当然这都是后话。以后发不发车也是你自己的事。

  4. 妹子优先,汉子靠后...开玩笑,哈哈,来者不拒,男女通吃。

  5. 最后祝各位好运,今后一段时间会主要转战dribbble, https://dribbble.com/Brenttton,欢迎大家常来做客。站酷也会不定期更新一些内容,望大家支持!

     

     

接下来填坑...我们先来分析一下YOGA风图标里高光/阴影的类型和特点。对了,如果没看之前教程的话最好还是先去了解一下,以免一脸懵X。

 

91db589b3727a801219c775931dc.jpg

第一种大家应该都明白,第二种其实也就是等距高光/阴影。大家常用的方法可能是向上复制两个图层进行路径偏移,这里我还有一种讨巧的方法,跟大家分享一下。先看张动态演示,如果还不明白,我下面再作具体说明。

 

f951589b3d22a8012060c84ecb7a.jpg

 

 

其实这个方法主要就是用到了上次教程里步骤2的线稿。一般画完线稿我都会复制保留一份,以便最后绘制高光/阴影。32d2589b3eafa8012060c87ee9ad.jpg我们以这块的高光绘制为例。

 

b75b589b3f27a8012060c8ee71c1.jpg

 

 

我们先选中线稿里相对应的路径,也就是一条描边。可以先用剪刀工具把不需要的部分裁掉,然后我们把这个描边数值改大一些,比如说我要加一个6px的高光,那么我们就要取一个12px的描边,对半分。然后进行扩展,把描边转变为形状。


b97d589b447ea801219c7788cb9a.jpg3970589b44c4a801219c778caeae.jpg

 


接下来把扩展后的形状复制到主体色块上,这时候如果要取到合适的高光区域,就要涉及到很多的布尔运算,建议对布尔运算不太熟的童鞋先了解和多多练习一下布尔运算。如果对布尔运算熟悉的话,基本应该知道是什么套路了吧。


4ee4589b45d4a801219c774bcd3b.jpg



我们把这三个色块单独复制一份,进行联集运算(也就是合并三块为一整块),然后和高光条进行交集运算,切出高光的最终形态。


8ea1589b48c6a8012060c8d11606.jpg4ef4589b4758a8012060c87ec6ab.jpga41f589b487aa8012060c85a53e5.jpg



最后填充颜色,个人习惯高光用白色柔光模式,阴影用黑色柔光模式。渐变的话一般都是两头透明度为0,中间透明度100%,这样可以和主体更好地融合。


c8aa589b4a40a801219c778fbd8b.jpg


好了,这下应该都会了吧,确实都是很基础的东西,再不会我也没辙了...


还是那句话,你们的支持是我持续分享的动力!


选左选右你们自己看着办....= ̄ω ̄=

a610589b4d4aa801219c77559792.jpg

1221
举报
|
662
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
3D卡通UI界面图标可爱插画免扣素
新能源APP应用UIKit
我的钱包-UI界面设计-app
盲盒APP UI设计
3D渐变流体抽象矢量UI背景图
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】旅行icon
高级感金属拟物 UI设计组件库
【新年UI图标】秒杀icon
【新年UI图标】会员icon
手表表盘UI系列
Security Camera UI kit
新拟态风格 UI设计组件库
户外旅行飞机情侣假日出行
【新年UI图标】汽车icon
高级表盘系列UI源文件
拟物风质感写实UI卡片合集源文件
钱包ui模板
UI界面 组件
UI通用设计素材1
UI 登录界面设计模板包
智能家居中心 简约 UI设计组件库
【新年UI图标】30个图标
APP/小程序商业项目UI模板|99个高保真UI+79个原型
你可能喜欢
大家都在看
登录注册