1999同款丁达尔光 十四行诗用了都说好 | 设计技巧

用户头像
上海/UI设计师/1年前/318浏览
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧
是什么设计能得到1999的青睐,出现在其主界面中用来吸引玩家(骗氪)?这种方法又该如何运用在自己的设计上?本期设计技巧将带你揭秘1999同款氛围感小妙招 ——丁达尔光效果。据说认真看完这期内容的同学,都被维尔汀拉进箱子,去那里开心打工了呢!
(本文共1700个字,阅读需6分钟)
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
说到氛围感,你想到的画面是什么?
是芙莉莲与布满青苔的辛美尔雕像物是人非的相见?
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0MDQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
林克在白龙头顶拔出穿越万年的大师之剑?
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0MDg=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
还是1999中与十四行诗(老婆)的林中初见?
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0MTI=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
这些场景之所以氛围感满满,是因为它们通过视觉化的手段呈现出了丁达尔效应—这种物理现象,也即光被悬浮的胶体粒子散射。艺术来源于生活诚不欺我!
说人话就是,
灯光打得好,氛围没得跑!
那么如何将这种技巧运用到自己的画面中呢?
你以为我要拿出“99+特效通用高级感光效素材包”了吗?
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0MTY=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
当然不是!就像虽然有大把能白嫖的武器,但!还是有追求自推外观毕业的人,比如认真看到这里的你和认真写到这里的我(骄傲),为了捞专武库而kuku氪金。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0MjA=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
那作为设计师,我们当然也要自己kuku搞光效。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0MjQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
我们就以重返未来1999的这张图为例。
日间场景的丁达尔光
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0Mjg=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
首先使用矢量工具(如钢笔或形状工具)沿光源方向绘制光线整体的大范围,并调整羽化值,模拟自然光的扩散效果。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0MzI=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
在完成范围绘制后,添加蒙版。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0MzY=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
用黑色柔边画笔或渐变工具,在蒙版上对边缘做柔和的擦除,模拟光线的自然衰减。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0NDA=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
之后需要突出重点,也就是提取高光区域。在菜单栏的选择中找到色彩范围。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0NDQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
选择高光,适当调高色彩容差以选中窗户等明亮部分。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0NDg=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
Ctrl+J复制选区,将生成的独立图层拖到画面最上面。这种调整图层可以多叠几层,多尝试几种不同的模糊效果和图层模式。我这里第一层用了
高斯模糊
+强光。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0NTI=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
第二层用了径向模糊,拖动中心点调整合适的光束放射⻆度,数量设为100。降低图层透明度让光线看上去更自然。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0NTY=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
在整体氛围有了之后呢,我们加入一些烟雾和颗粒效果。使用烟雾笔刷沿光线路径绘制烟尘。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0NjA=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0NjQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
应用半径5到10像素的高斯模糊,模拟烟雾的弥散感。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0Njg=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0NzI=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0NzY=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
除了直射的光束,空气中飘散的颗粒与发光的尘埃也是构成氛围感的关键。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0ODA=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0ODQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
我们选择喷溅颗粒效果的笔刷在光线路径上轻点。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0ODg=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0OTI=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
复制一层并轻微模糊,增强漂浮颗粒的立体感。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc0OTY=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1MDA=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
我们看一下这张场景添加丁达尔光前后的对比,氛围感提升还是很明显的。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1MDQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1MDg=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
夜间场景的丁达尔光
不仅是白天,夜晚的场景中也可以使用丁达尔光来增强氛围感。以同一场景的夜晚为例。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1MTI=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
还是先使用钢笔或形状工具沿光源方向绘制光线路径,确定光线范围。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1MTY=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
之后用高斯模糊+羽化营造光的衰减。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1MjA=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
接着,突出重点。这里我们用钢笔工具绘制光束。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1MjQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
调整羽化柔化边缘。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1Mjg=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1MzI=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
再调整图层模式为叠加。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1MzY=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1NDA=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
这里为什么要画斜切的光束呢?
通过观察可以看到这张场景中,窗户上有很多直上直下的十字结构,
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1NDQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
而使用斜切光束可以在空间上打破这些相似结构,让画面的表现更生动。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1NDg=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
对作为主光的月光进行刻画后,使用笔刷进行烟雾和颗粒效果的添加。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1NTI=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
如果想让画面的信息量更丰富,我们可以在光的色相上做变化。就像冬天里的一把火,万绿丛中一点红,利用对比色突出主体。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1NTY=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
新建色相饱和度调整图层。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1NjA=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
在这张蓝色调的夜晚场景中,可以加入紫粉色丰富画面。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1NjQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1Njg=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
光色改变后,画面整体色调也要进行相应的调整。新建色彩平衡图层。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1NzI=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
分别调整阴影、中间调和高光的色彩倾向
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1NzY=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1ODA=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1ODQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
使整体氛围更协调,符合我们想要表现的效果和表达的情绪。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1ODg=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
使用色相饱和度和色彩平衡图层呢,我们也可以整点花活,比如在夜晚做出烟火的效果,使暖色光与冷色环境形成冷暖对比,丰富画面信息量。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1OTI=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc1OTY=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
我们开关调整图层看一下对比,做光效前后的差别还是蛮大的。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc2MDA=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc2MDQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
如果第一个画面能让玩家充198,那第二个画面就能让玩家充648了对吧。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc2MDg=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
丁达尔效应
出现,光便有了形状。希望通过白天和夜晚两个场景的演示,让同学们不仅学会实现丁达尔光的技法,也积累根据氛围和想传递的情感灵活处理光线角度和光色搭配的思路。
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc2MTI=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
1999同款丁达尔光 十四行诗用了都说好 | 设计技巧(图ZMTUwODc2MTY=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
那么,今天的分享就到这里啦,如果你喜欢我们的分享内容,别忘记点赞,转发和收藏。同学们对操作步骤有疑问,或是有其他想了解的设计技巧,欢迎在评论区留言,期待与同学们的互动!
8
阅读原文
|
举报
|
19
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
【新年UI图标】游戏/娱乐icon
【新年UI图标】汽车icon
拟物风质感写实UI卡片合集源文件
Security Camera UI kit
UI通用设计素材1
【新年UI图标】银行卡icon
高级表盘系列UI源文件
手表表盘UI系列
科技医疗透明柜UI界面设计
钱包ui模板
【新年UI图标】优惠券icon
智能家居中心 简约 UI设计组件库
3D渐变流体抽象矢量UI背景图
高级感金属拟物 UI设计组件库
新拟态风格 UI设计组件库
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】30个图标
【新年UI图标】影音icon
【新年UI图标】钱包icon
新能源APP应用UIKit
盲盒APP UI设计
我的钱包-UI界面设计-app
UI应用平面图标
UI界面 组件
你可能喜欢
相关收藏夹
大家都在看
登录注册