摘要:今天这期教程,是阴影系列的下篇,如果没看过上篇的同学,建议先看完第一篇,再来看今天的文章。 上篇地址: https://12ui.cn/uijc/71.html 好了,接着上篇教程的内容走起。 手机阴影 这几年在苹果的带动下,手机行业的设计突飞猛进,在各大手机官网我们随处可见精致的光影效果。 下面我们就来看看几种...

今日推荐 【网页设计教程博客】设计方案输出如何做得更好?

今日推荐 【设计教程】苹果产品图标的那些高级阴影效果怎么做的?

今日推荐 【ui设计教程】实战案例告诉ui设计师如何高效设计字体LOGO?

今天这期教程,是阴影系列的下篇,如果没看过上篇的同学,建议先看完第一篇,再来看今天的文章。

上篇地址:

https://12ui.cn/uijc/71.html

好了,接着上篇教程的内容走起。

 

手机阴影

这几年在苹果的带动下,手机行业的设计突飞猛进,在各大手机官网我们随处可见精致的光影效果。

下面我们就来看看几种特别典型的手机阴影是怎么做的。

 

一、手机躺面

这种阴影相对简单,先来练练手。

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

具体制作步骤:

第一步,

用矢量图形画一下阴影的大概形状。(当然你也可以直接把手机复制一层,然后填充颜色)

这里注意,因为机身和背景都是金色,所以我们的阴影采用颜色相近的褐色,这样画面不会显脏。

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

第二步,高斯模糊后,用蒙版处理一下阴影的形状,再调整好透明度,阴影主体大致就完成了。

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

阴影的主体完成后,还需要处理背景等一些细节,这样看起来会更加真实。

OK,下一个。

 

二、手机立面。

最常见的阴影形式之一,这种长长的投影能让画面十分具有空间感。

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

图中的例子光线比较复杂,应该是棚拍之后修图的。不过这种投影其实PS做起来也很容易。

我以图中最右边的一个手机为例,让大家看看这种阴影是怎么做的。

第一步将手机抠出来,然后在背景上用画笔点一些光影效果。

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

第二步做接触阴影和倒影。这样手机就立起来了。

第三步将手机的长阴影形状画出来。

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

第四步,将牛逼的移轴模糊滤镜调出来。

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

最后,来看看高清大图效果:

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

 

三、手机正侧面

这个非常帅的光影,我见到大部分手机厂商都曾在官网上使用过这种效果。

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

看起来非常酷炫的效果,其实做起来挺简单的。

我们观察一下它的光影结构就知道,在手机的左右两端,分别有一个光线的焦点。因此,它是由两个角度渐变效果拼起来的。

先将图抠出来:

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

然后在背景层上做角度渐变,要注意颜色的过度

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

在角度渐变中,中心点是可以随意拖动的,我们把中心点拖到手机的一端就行了。

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

这样左边的光影就做好了,将做好的这一层栅格化,复制一层水平翻转挪到右边。

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

左右的阴影叠在一起,再用蒙版擦掉重叠的部分,即可以得到最终效果:

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

很简单,很高级!

简直装逼于无形之中。

 

四、手机包装盒

这个盒子的阴影最大特点是左右两边各有一道高光向外延伸。就是这道高光让整个阴影变得与众不同。

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

制作过程分解:

长沙12UI设计教程网,长沙设计教程,毛玉萌博客长沙12UI设计教程网,长沙设计教程,毛玉萌博客长沙12UI设计教程网,长沙设计教程,毛玉萌博客

这个盒子的阴影看着简单,实际上制作步骤还挺复杂的,如果有不太明白的地方,大家可以下载PSD对照里面的分层文件来参照。

再看一下最终的效果图:

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

确认过眼神,基本和官方图一模一样。

 

特殊的阴影

有时候我们可以看到一些很特别的阴影效果,例如下面两张图:

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

因为在现实当中我们很难看到类似的光影,所以会显得非常特别,看过之后容易让人留下很深的印象。

特殊的效果偶尔用一下会让人眼前一亮,不过切记不可滥用。

好了,来看下制作方法吧。

这两种阴影效果的制作方法其实也是前面讲的那些,我来一个个给大家讲解下。

 

案例一

第一种阴影我用的是beats音箱:

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

相当的帅气吧!

分解步骤走起。

第一步,抠好图后,在部分做一个渐隐的长方形。

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

第二步,调出“移轴模糊”滤镜。

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

这个滤镜是不是很爽?

反正我每次都要玩好久。拉到你喜欢的效果之后,按确定。

最后再调整下透明度,就是最终的效果啦!

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

简单3步,高大上阴影就搞定咯!

 

案例二

这是种金属质感十分强烈的光影效果。

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

这个阴影的特别之处在于四个角都有聚焦的光影渐变。

所以它的做法,我们可以参考之前手机正侧面的效果,用角度渐变来做。

来看看具体步骤:

第一步,在左下角做一个角度渐变,将渐变的焦点放在主体的左下角。

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

角度渐变的制作方法大家可以参照前面手机侧面的内容。

第二步,将左边的角度渐变复制一层到右边,再用蒙版工具将中间的过度部分处理好,这样下面两个就做好了。

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

第三步,同样的操作,将上面两个也做好。

请注意,上面两个渐变的颜色对比不要那么强烈,这样才会有主次。

一顿操作后,最终效果如下:

长沙12UI设计教程网,长沙设计教程,毛玉萌博客

好了,阴影教程到这里就结束了。

希望这两篇文章可以帮你在以后的设计中做出更漂亮的阴影效果!

本文《教程网:苹果产品进行设计的阴影,原来是这么做的!》来源互联网学习所得,技术支持:920seo

本文《教程网:苹果产品进行设计的阴影,原来是这么做的!》所属栏目:UI设计教程   设计教程

本文《教程网:苹果产品进行设计的阴影,原来是这么做的!》请注明出处,链接:https://12ui.cn/uijc/94.html

发表评论

◎欢迎参与讨论,留言审核通过将公布在留言本。