PhotoShop制作gif动态广告效果示例

本文将通过三个示例介绍gif制作广告,gif 动态广告网页展示效果

米扑博客:开业了

本示例需要用到的软件环境:

MacOS High Sierra Version 10.13.4

PhotoShop CS6 13.0.6 x64

示例1:制作 gif 文字广告动图

1. 新建 180 * 60 透明背景图

PhotoShop制作gif动态广告效果示例_第1张图片

2. 窗口 - 时间轴 - 创建帧动画

PhotoShop制作gif动态广告效果示例_第2张图片

3. 默认第一帧,添加字体格式,输入“米扑”

PhotoShop制作gif动态广告效果示例_第3张图片

4. 点击下方小箭头,新建两帧

PhotoShop制作gif动态广告效果示例_第4张图片

5. 复制第一个图层“米扑”为“米扑2”,输入文字“米扑科技”,调节字体颜色

PhotoShop制作gif动态广告效果示例_第5张图片

6. 复制第二个图层“米扑2”为“米扑3”,输入文字“米扑科技公司”,调节字体颜色

PhotoShop制作gif动态广告效果示例_第6张图片

7. 选中全部三帧,设置间隔为“1秒”,播放循环为“永远”

PhotoShop制作gif动态广告效果示例_第7张图片

8. 点击“文件” - “存储为Web所用格式”,​保存为 gif 图片

PhotoShop制作gif动态广告效果示例_第8张图片

9. 查看 gif 动图的效果

示例2:制作 gif 图片广告动图(视频时间轴制作

1. 提前准备好两张图片素材,两图之间只是稍微调整了字体颜色、字体位置

2. 新建透明 980 * 120 背景画布

PhotoShop制作gif动态广告效果示例_第9张图片

3. 调整“窗口 - 时间轴”,选择“创建视频时间轴”

PhotoShop制作gif动态广告效果示例_第10张图片

4. 导入准备的两张图片素材,并排两张图片,缩短播放时间轴,播放试看动画效果

PhotoShop制作gif动态广告效果示例_第11张图片

5. 点击“文件” - “存储为Web所用格式”,​​保存为 gif 图片

PhotoShop制作gif动态广告效果示例_第12张图片

6. 查看 gif 动图的效果

示例3:制作 gif 图片广告动图(动画时间轴制作

1. 提前准备好两张图片素材,两图之间只是稍微调整了字体颜色、字体大小

PhotoShop制作gif动态广告效果示例_第13张图片

PhotoShop制作gif动态广告效果示例_第14张图片

2. 新建透明 258 * 258 背景画布

PhotoShop制作gif动态广告效果示例_第15张图片

3. 调整“窗口 - 时间轴”,选择“创建帧动画”

PhotoShop制作gif动态广告效果示例_第16张图片

4. 拖入准备的两张图片素材到画布,会自动生成两个图层

PhotoShop制作gif动态广告效果示例_第17张图片

5. 点击时间轴右侧小箭头,新建一帧,每张图片对应一帧

PhotoShop制作gif动态广告效果示例_第18张图片

6. 每一帧对应一张图片,用右侧图层的小眼睛控制是否显示,两帧时间间隔为“1秒”,播放循环为“永远”

PhotoShop制作gif动态广告效果示例_第19张图片

7. 点击“文件” - “存储为Web所用格式”,​​保存为 gif 图片

PhotoShop制作gif动态广告效果示例_第20张图片

8. 查看 gif 动图的效果

PhotoShop制作gif动态广告效果示例_第21张图片

gif 动态广告网页展示效果

米扑博客:开业了

https://blog.mimvp.com/article/1.html

你可能感兴趣的:(photoshop,gif,gif图处理,广告,ps)