搜索
免费下载
设计灵感
设计规范
👑
充值会员
流体渐变
渐变配色
色彩搭配
注册
登录
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
APP设计
原型demo
GUI
小程序界面
网页UI
网页设计
原型demo
软件设计
字体下载
衬线字体
非衬线字体
圆角字体
手写字体
网页字体
图标字体
书法字体
交互动效
加载loading
转场动效
ICON图标
面性图标
线性图标
拟物图标
2.5D图标
卡通图标
像素图标
按钮图标
多色图标
活动图标
插图/插画
扁平化插画
多彩渐变插画
2.5D插画
样机贴图
手机样机
名片样机
动画样机
电脑样机
笔记本样机
穿戴设备样机
UI作品样机
设计导航
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
网页UI
字体下载
交互动效
ICON图标
插图/插画
样机贴图
设计导航
炫酷霓虹灯动效教程-有PSD源文件
搜UI
>
文章/作品
>
设计教程
>
设计规范
© 共享素材,请勿商用
举报
电商
首页
教程
psd
节日
UI自学
发布时间:2020-05-08
关注
通过ps里面的色相/饱和度工具,可以调整色相360度变化,再通过帧动画制作,实现颜色循环变化的炫酷的霓虹灯动态效果。
炫酷的霓虹灯动态效果图教程
原理:色相是环形360度的,可以循环变化。通过ps里面的色相/饱和度工具,可以调整色相360度变化,再通过帧动画制作,实现颜色 循环变化的动画效果。
关于这个图片的静态效果是怎么一步步制作出来的,请看我上一篇文章《超赞的霓虹灯效果教程-带PSD源文件》地址:http://www.zhisheji.com/jiaocheng/1334540.html回到正题方法:1.复制——备份源文件(这一步是很重要的,因为将要发生的是你无法估计,比如断电文件损坏。)2.打开——把刚复制的文件拖到PS里面打开3.拼合图像——在顶部菜单栏上选择图层-拼合图像-确定(我提供的原图是JPG,这一步可以跳过)
4.复制图层——以色相15度为循环单位, 360/15=24应该是有24个图层,减去背景图层24-1=23帧,结果就是复制23个图层。
5.调整色相——用色相/饱和度工具,色相向右:0(背景图层) 15 30 45 60 75 95 105 135 150 165 180; 180度与-180度, 在色相环上是相同的位置,所以色相是相同的;接下来继续: -165 -150 -135 -120 -105 -90 -75 -60 -45 -30 -15总共调 整23个图层。
第四步,第五步,是比较枯燥的过程,为了站友们,我特意录好了一个动作,只要一点击播放动作,瞬间这两步就做完了。6.创建帧动画——6-1.激活帧动画——窗口-时间轴;调出时间轴面板 点击创建时间轴右边的下拉箭头-选择创建帧动画-再点击创建帧动画这个按钮
6-2.建立序列:在时间轴面板最右边菜单图标上单击-选择从图层建立帧,得到一个24帧的序列(如果觉得顺序反了,在刚才的菜单选择反向帧就可以了)
6-3.设置时间:默认第一帧是选中的状态的,在键盘上按SHIFT键+鼠标左击最后一帧,全选整个序列帧,然后在帧图像下面的向下箭 头左击(随便哪一帧都是可以的),选择0.1秒(0秒太快,0.2秒太慢)。如果想在第一帧或最后一帧或者中间某一帧或多帧,就选择相应的帧在它们下面改变时间就可以了
6-4.循环方式:在时间轴面板左下角第二个是循环方式切换,将默认一次要改为永远
6-5.播放:直接点击下面的播放按钮就可以了
看一下结果大致如下:
7——导出:Ctrl+Shift+Alt+S;在出现的导出对话框的右边的预设下面的那个框把默认的JPEG改为GIF,然后点击存储-选择保存路径就可以了
8——打开——系统的照片查看器打开是静止的,打开上网浏览器,将刚导出的GIF图片直接拖进去,图片就会动起来了。
9——您的点赞是我的动力,点赞 点赞 点赞!!!10——请到百度云提取源文件和动作文件, 地址: https://pan.baidu.com/s/187csEWig7iV1wcyWYWs8jg 密码: gdc6我很开心你能看完我的文章,如果能在工作中帮到你,是我的荣幸。一起努力,坚持做最好的自己!
UI自学作品
炫酷霓虹灯动效教程-有PSD源文件相关作品
收藏
页面设计
收藏
网页设计
收藏
网页设计
收藏
页面设计
收藏
APP设计
收藏
网页设计
收藏
小程序设计
收藏
APP设计
其他设计规范
最新素材
其他设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
Load More
最新素材
收藏
像素图标
收藏
原型demo
收藏
APP设计
收藏
原型demo
收藏
面性图标
收藏
线性图标
收藏
线性图标
收藏
多色图标
Load More