注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

jinrl100的博客

 
 
 

日志

 
 

用PS制作动画--“手机相册”  

2015-01-11 08:21:09|  分类: 用ps制作动画 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

目前手机几乎是每人一台,随时随地都在玩。是否可以用PS来制作一个模拟的手机呢,这可是一个学习PS的好课题。

用PS制作动画--“手机相册” - jinrl100 - jinrl100的博客
 

上图为一个“手机相册”的动画,该动画手机能够在手指的拨动下翻阅一张一张的照片。看看有没有兴趣自己动手做一个?下面介绍制作的步骤:

1 新建一个背景层为白色的绘图文件400X500。

为了画一个手机的外壳,请按照下图所示的尺寸拉好辅助线:

用PS制作动画--“手机相册” - jinrl100 - jinrl100的博客

  

2 新建透明图层1,用“园角矩形工具”,选用“路径”按钮,半径25,沿外圈辅助线,拉出园角矩形。把路径转换成选区,在选区内填充金色。

用PS制作动画--“手机相册” - jinrl100 - jinrl100的博客

  

3 用矩形选择工具沿内圈辅助线,拉出矩形选区。删除矩形区域,形成手机的显示窗口。

用PS制作动画--“手机相册” - jinrl100 - jinrl100的博客

  

4  图层样式—斜面和浮雕,数据如下:

用PS制作动画--“手机相册” - jinrl100 - jinrl100的博客

 图层样式—投影,数据如下:  做出手机的立体感。

用PS制作动画--“手机相册” - jinrl100 - jinrl100的博客

  

5  在图层1的下面,用蓝色新建图层2。沿内圈辅助线,拉出矩形选区,删除矩形区域。做好以后把图层1向下合并到图层2。

用PS制作动画--“手机相册” - jinrl100 - jinrl100的博客

 

6  在手机的下部,拉出辅助线准备画按钮。尺寸如下:

用PS制作动画--“手机相册” - jinrl100 - jinrl100的博客

  

7  在图层2上面新建图层3,关闭图层2,在辅助线方框内拉出一个45像素的选区,填充金色。把选区域缩小3个像素,删除区域内图像,成为一个金色的圆环。

用PS制作动画--“手机相册” - jinrl100 - jinrl100的博客

  

8  图层样式—斜面和浮雕,数据如下:完成后打开图层2,把图层3向下合并到图层2,手机外壳基本完成。

用PS制作动画--“手机相册” - jinrl100 - jinrl100的博客

 

用PS制作动画--“手机相册” - jinrl100 - jinrl100的博客

  

9 查看辅助线的刻度,获得手机显示窗口的像素大小,略微增加几个像素后定为手机内所用照片的像素(这里定为266X370)。清除原来的辅助线,在显示窗口的上侧和右侧外加几个像素拉二条辅助线,用于照片的定位。然后关闭图层2。

用PS制作动画--“手机相册” - jinrl100 - jinrl100的博客

  

10  选择要放入“手机”的8-10张照片,另外用PS的裁剪工具将照片裁剪为266X370像素,然后分别拖入本绘图文件。等照片全部拖入后,再把手机外壳的图层2移到最上面一层,另外将最后一张照片复制一层放到背景层的上面。

用PS制作动画--“手机相册” - jinrl100 - jinrl100的博客

  

11 为了在动画中有一个拨动照片的手指,特地拍了一张“手指”的照片。也把它拖入文件放在最上面一层(图层13)。现在把辅助线调整为如图所示的情况,用于手指移动时的定位。

用PS制作动画--“手机相册” - jinrl100 - jinrl100的博客

  

12  下面进行动画的设置。动画的目的是在手指的拨动下,轮流显示这十张照片。我们设定一张照片的持续显示时间为1秒, 而移走一张照片的时间为0.5秒。这样每一张照片需要1.5秒,十张照片共15秒。我们用时间轴动画来制作比较方便。打开动画面板,点击动画面板右上角的菜单,选择“文档设置…”, 设置持续时间为15秒,帧速率为24帧。

用PS制作动画--“手机相册” - jinrl100 - jinrl100的博客

  

13  动画的设置见下图,说明一下设置的情况:

先看图层12到图层3,从上到下共10个图层,每个图层中画面的“位置”上设置二个关键帧,第一个关键帧之前留出1秒,这时照片的位置始终对正显示窗口不变,向后相距12个帧设置第二个关键帧,这时照片向左移出窗口之外。下一个图层的关键帧,比上一个图层的关键帧推迟1.5秒,以此类推。

在图层3的下面放置一个图层12副本,该图层不移动所以也不设置关键帧,其作用是当图层3在向左移动时,逐步显示出图层12副本来,如果没有它的话将会露出白色的背景层从而出现错误。

再来看图层13,该图层为一个操纵照片移动的手指,该手指除了移动以外,还要在显示与不显示之间转换。所以除了控制它的位置外还要控制它的不透明度。手指的移动时间我们定为照片移动时间的一半,使得照片在跟随手指移动以后,还有一段惯性移动的时间,所以每一次动作设置二个关键帧,前一个关键帧与相应照片的起始关键帧对齐,前后二个关键帧相距6个帧。

图层13在每一次动作中的不透明度设置了4个关键帧,分别把不透明度设为2% 100% 98%和 0% 。在100-98之间表示显示,而0-2之间表示不显示。其中第2和第3个关键帧与上面一行的位置关键帧对齐,第1和第2个关键帧之间相距2个帧,第3和第4个关键帧之间也相距2个帧。

图层2在图层面板中不作设置。

用PS制作动画--“手机相册” - jinrl100 - jinrl100的博客

  

这些数据设置好以后,现在就可以观看动画了。

14完成后,用下拉菜单: 文件—储存为Web和设备所用格式(D)…   命令把动画储存为GIF格式。

用PS制作动画--“手机相册” - jinrl100 - jinrl100的博客

 

 

  评论这张
 
阅读(367)| 评论(51)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017