搜索
免费下载
设计灵感
设计规范
👑
充值会员
流体渐变
渐变配色
色彩搭配
注册
登录
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
APP设计
原型demo
GUI
小程序界面
网页UI
网页设计
原型demo
软件设计
字体下载
衬线字体
非衬线字体
圆角字体
手写字体
网页字体
图标字体
书法字体
交互动效
加载loading
转场动效
ICON图标
面性图标
线性图标
拟物图标
2.5D图标
卡通图标
像素图标
按钮图标
多色图标
活动图标
插图/插画
扁平化插画
多彩渐变插画
2.5D插画
样机贴图
手机样机
名片样机
动画样机
电脑样机
笔记本样机
穿戴设备样机
UI作品样机
设计导航
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
网页UI
字体下载
交互动效
ICON图标
插图/插画
样机贴图
设计导航
PS野教程:腰腿乏力腿抽筋?来一套Adobe特效胶囊吧!
搜UI
>
文章/作品
>
设计教程
>
设计规范
© 共享素材,请勿商用
举报
设计
UI教学
发布时间:2020-05-08
关注
前几天群里童鞋发了一组Adobe的胶囊药丸图,然后我转发了朋友圈,有不少童鞋也觉得这个很有意思:
这个好像是属于Ui设计吧?不太懂,而且野郎确实也不太会绘图,不过看图感觉这个应该不会太难,而且确实是蛮有意思的一组图,所以,尝试一下啰!开始之前我们先根据原图本身分析一下这个图又大体的哪几部分组成吧:
我感觉大概是分这么几个部分吧,其他的阴影效果一类的先不算,虽然绘图形的话Ai要方便的多,但是我觉得原图上有很多效果。而不知道是不是自己的设置问题,我的Ai每次开效果就会很卡,所以索性今天我们就来用Ps自己画一组Adobe全家福胶囊吧!
以Ps胶囊为例,打开Ps新建画布,尺寸随意,我这里分辨率选择300,这样后面画图形的锯齿不会太明显:
用圆角矩形工具,半径大概80像素的样子,画一个圆角正方形,颜色的画,我选择的是比纯白色稍微浅一点的灰色:
接下来是给外壳添加效果,双击调出图层样式,添加内阴影、渐变叠加,图案叠加和投影。参数我是自己慢慢着着来的,内阴影的话选择的是白色,让外壳的边缘有一层白色的高光的感觉。渐变叠加的话还是选择的一个灰色到白色的渐变。图案叠加我选的是系统自带的一个web图案,当然你也可以去网上找更加真实的图案也行,投影就看着办吧:
画保护套底板,选择一个比外壳更灰一点的颜色,使用圆角矩形工具,半径调到100左右:
接着再给保护套底板添加一个灰到白的渐变叠加,让它看起来有质感一点,参数大家看着办吧:
然后是画保护套,我选择的是纯白色,然后半径再大一点,120左右:
调出图层样式,添加斜面和浮雕以及内阴影,参数也是试出来的,主要是要做出那种有点圆浮的感觉:
再把圆角矩形工具的半径搞大一点,画胶囊,同时复制两份出来,分别命名投影和投影渲染,隐藏掉,一会弄:
因为胶囊的话通常上下盖的中间会有一条线,而我们Ps胶囊主要是分成蓝色和紫色,所以我选择了一个蓝色到紫色的渐变。然后顺便加了一个投影,这个参数大家就看着办吧:
接下来处理投影,选中投影图层,将其位置调整一下,然后填充颜色改为黑色:
转为智能对象以后,执行滤镜-模糊-高斯模糊,参数大家看着办:
接着再把不透明度降到百分之50左右:
选中投影渲染图层,填充一个深灰色,位置不用移动:
然后同样转为智能对象以后,执行滤镜-模糊-高斯模糊,参数大家还是看着办吧,然后将不透明度降到百分之50左右:
接下来做胶囊的颜色了,复制一层胶囊图层出来,清除图层样式:
添加图层蒙版,用矩形选区工具套出一半的选区出来,然后再蒙版上填充黑色:
双击调出图层样式添加,内阴影、渐变叠加和外发光的效果,参数大家看着办。这里特备说一下渐变叠加的颜色,想要渐变得更加有层次感,就要多加一些相近色渐变。而我们不同的胶囊可能会涉及到不同的颜色,所以这个蓝色为例,如果蓝是中间值,大概的添加思路是:浅蓝-浅蓝偏白-蓝-深蓝-深蓝偏黑,至于位置大家就看着调:
另外半边胶囊的制作方法也是相似的就不赘述了,区别只是把渐变色改为以紫色为主而已:
然后蓝、紫色分别向左向右平移一丢丢,中间留出到缝来:
再画个白色圆角矩形,命名为高光:
转为智能对象以后,高斯模糊2-3个像素,混合模式改为叠加,再降低不透明度:
同样的方法再画一个柔光图层,高斯模糊参数翻一倍,混合模式还是叠加,不透明度的话看着调就好:
最后再选一个合适的字体,选择合适的渐变色进行叠加,以及外发光:
然后其他的胶囊的话,只要改渐变色,以及修改文字就行啦,我们一起来看看最后的成品吧:
别问我为啥没有Br一类的:因为朋友圈只!能!发!九!张!图!所以就只做九个吧!嘛~又一个第一次,除了外壳的纹路可以再尝试换一换之外,渐变色上也没有太细致的去调整。不过由于时间关系,大概就这样吧!今天的分享就到这里,想要练习的童鞋后台撩我获取吧!本文由“野鹿志”发布转载前请联系作者“马鹿野郎”私转必究
UI教学作品
PS野教程:腰腿乏力腿抽筋?来一套Adobe特效胶囊吧!相关作品
收藏
小程序设计
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
其他设计规范
最新素材
其他设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
Load More
最新素材
收藏
像素图标
收藏
原型demo
收藏
APP设计
收藏
原型demo
收藏
面性图标
收藏
线性图标
收藏
线性图标
收藏
多色图标
Load More