Edited at

PhotoshopとSwipeGeneratorでアニメーションを作る 1

More than 1 year has passed since last update.


SwipeとSwipeGeneratorについて

SwipeとSwipeGeneratorの説明やインストールについては以下のページを参照してください。

PhotoshopからSwipeを作成するSwipeGenerator


画像を動かす、拡大、縮小

SwipeGeneratorでは、レイヤーグループを2つ入れ子にした中に素材を配置することにより、ページに配置した画像を動かしたり、拡大、縮小することができます。

実際に作成したSwipeのサンプルはこちらです。

http://to-kyo.to/~isamu/swipe_sample_move/


レイヤーグループの構成

このSwipeに使ったレイヤーの構造はこのようになっています。

スクリーンショット 2018-05-26 8.54.41.png

1階層目のレイヤーグループがページをまとめるグループ、2階層目のレイヤーグループが各ページです。各ページには、スマートオブジェクトで画像が配置されています。


ページ内の素材の配置

各ページの素材の配置はこのようになっています。わかりやすくする為に背景を青にしていますが、実際は透明です。


1

swipe_sample_movie1.jpg


2

swipe_sample_movie2.jpg


3

swipe_sample_movie3.jpg


4

swipe_sample_movie4.jpg

各素材はスマートオブジェクトの形式でおいています。同じグループのページ内のスマートオブジェクトは、そのidが同じであれば次のページでも同じ素材として扱われるので、ページ間で同一のオブジェクトの位置や大きさを変えることにより、Swipeで動きを表現したりや素材を拡大、縮小されるように扱われます。

そのため、上記例では、page1に素材を配置してからレイヤーグループごとpage2にコピーして、page2の素材を動かしたり、大きさを変えて配置しています。


関連

PhotoshopとSwipeGeneratorでアニメーションを作る 2