Help us understand the problem. What is going on with this article?

PhotoshopからSwipeを作成するSwipeGenerator

More than 1 year has passed since last update.

Swipeとは

Swipeとは、JSON形式の宣言型のマークアップ言語で記述されるオープンなリッチメディアコンテンツです。Swipeのファイルを表示するSwipe EngineはiOS, javascript, Android版と様々なバージョンが用意されています。すべてオープンソースで提供されています。
https://github.com/swipe-org/swipe (iOS)
https://github.com/swipe-org/android (androin)
https://github.com/isamu/swipejs (javascript)

Swipeファイルは、iOS版とweb版のSwipe Studioで作成するか、直接JSON形式のファイルを記述することが可能です。

https://studio.swipe.net/studio/#0 (Swipe Studio on Web)
https://itunes.apple.com/us/app/swipe-studio/id1148461767 (Swipe Studio app)

PhotoshopのGeneratorとは

PhotoshopのGeneratorは、開発者がPhotoshopを拡張するために用意されている環境で、プログラムによりPhotoshopの機能を追加することができます。具体的にはユーザのアクションなどのイベントによりnodeで記述されたプログラムが呼ばれ、そのプログラムからPhotoshopのデータを読みファイルを生成するなどができるような仕組みになっています。Photoshopの14.1以降で利用できるようです。

SwipeGeneratorとは

SwipeGeneratorは、PhotoshopのGeneratorを使って、Swipeファイルを生成する機能です。Photoshopのレイヤーを使って、各レイヤーグループを1つのページとし、レイヤーグループ内に配置された各レイヤーの画像をelementとしてSwipeファイルを生成します。

インストール

SwipGeneratorは、以下からダウンロードできます。
https://github.com/isamu/swipeGenerator/archive/master.zip
ダウンロードしたファイルは、解凍してPhotoshopのGeneratorのディレクトリーにおきます。
Macでは、 /Applications/Adobe Photoshop CC 2018/Plug-ins/Generator でした。
このフォルダの中に、解凍したswipeGeneratorフォルダをおきます。
スクリーンショット 2018-05-24 7.57.31.png

これでインストールはおしまいです。

使い方

Photoshopを起動します。インストールが成功していれば、
ファイル -> 生成 -> に Generate swipeというメニューが追加されています。

スクリーンショット 2018-05-23 11.02.32.png

画像を配置した複数のレイヤーを1つのレイヤーグループにまとめます。この例ではpagesグループに各ページのレイヤーグループを配置しています。

スクリーンショット 2018-05-23 11.41.49.png

先ほどのメニューから「Generate swipe」を選択します。選択すると直ちにSwipeファイルが生成され、コンピュータのデスクトップに、フォトショップのファイル名と同じ名前のフォルダーが生成されています。
その中のmain.swipeがswipeファイルです。 index.html をブラウザで開くとそのswipeファイルのコンテンツが表示されます。 index.htmlはjavascript版のSwipe Engineを読み込むようにしているので、そのままHPなどにアップすればコンテンツとして利用可能です。
生成されたコンテンツをWebに置いておきます。
http://to-kyo.to/~isamu/swipe_test/#0

関連

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

isamua
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした