Photoshopで繰り返してる作業に効く！JSX自動処理！•ワンフットシーバス 田中正吾

1

2

注意書き

私の本ライトニングトーク（LT）は、スライドは後ほど共有しますので、話す内容に注力いただいて大丈夫です！

3

自己紹介

自己紹介

田中正吾（たなかせいご）屋号：ワンフットシーバス

2004年よりフリーランス。

以後、FLASH制作を中心にインタラクティブコンテンツを主に行い現在に至る。

最近はソーシャルゲーム制作界隈で

JavaScriptやHTML5アニメーション、

スマートフォン演出制作の

ワークフロー改善に関わったりしています。

4

5

では早速。

6

自分をとりまくPhotoShopの作業

自分はデザイナーの方々と連携することが多く、いただいたPSDから素材を取り出すことが多い。

7

一番行う作業は・・・。

8

こちらのとり出す素材感に合わせて、レイヤーを整理し、書き出すこと。

9

重なり合わないデザインなら、

スライス機能で取り出しやすいですが、

ヘッダー

コンテンツ

フッター

メニュー メニュー メニュー

10

最近はHTML5アニメーションさせたりしますし、レイアウトで画像を重ねてレイアウトされることもしばしば。

コンテンツ

フッター

ヘッダー

メニュー メニュー メニュー

11

そうなると、スライス機能が太刀打ち出来ないことも多い。

コンテンツ

フッター

ヘッダー

メニュー メニュー メニュー

12

そんなわけで

13

例えばこんなPSDファイル

14

レイヤーはこんな感じ

15

例：魚部分を取り出す作業

16

該当のレイヤーだけを表示して

レイヤーをONにする

レイヤーをOFFにする

17

WEB書き出し（実際は別途余白とるけど割愛）

→ contents_fish.png

18

例：タイトルを取り出す作業

19

該当のレイヤーだけを表示して

レイヤーをONにする

レイヤーをOFFにする

20

WEB書き出し（実際は別途余白とるけど割愛）

→ header.png

21

これを繰り返し

22

なかなかに手間がかかる

23

なぜか？作業を見なおしてみる。

24

作業1↓

取り出したいレイヤーのON/OFF↓

WEB書き出し、ファイル命名保存↓

作業２↓

取り出したいレイヤーのON/OFF↓

WEB書き出し、ファイル命名保存

25

図にしてみる

レイヤー

ON/OFF

ファイル

命名・保存

レイヤー

ON/OFF

ファイル

命名・保存

26

「レイヤーをどうON・OFFするか」は、いつも頭で覚えている。

レイヤー

ON/OFF

ONOFF

27

「どんな名前で保存するか」も、いつも頭で覚えている。

ファイル

命名・保存

名前

28

作業ごと一つ一つの画像を書き出すと、のレイヤーONOFF情報が一回失われてしまう。

レイヤー

ON/OFF

ファイル

命名・保存

レイヤー

ON/OFF

ファイル

命名・保存

頭リセット！

29

つまり、万が一レイヤー間違えた時、ファイル名やり直したいとき、後戻りがしにくい。思い出し直し。

レイヤー

ON/OFF

ファイル

命名・保存

レイヤー

ON/OFF

ファイル

命名・保存

後戻りしにくい

（思い出し直し）

ON

OFF名前

30

これはまずい何とかしたい。

31

そこで、このJSX。

32

レイヤー名に合わせてPNGに書き出すJSX

33

http://www.1ft-seabass.jp/memo/2014/03/04/jsx_layer_to_png/

私のサイトにあるので、あとでURL伝えます。

34

各レイヤーを結合してJSX書き出し。

35

レイヤーの名前で書き出してくれる。しかも自動で。

36

デモ（やれたら）

37

このJSXを使うとこうなる。

レイヤー

整理・結合

レイヤー

命名

各レイヤーを保存

38

• レイヤー結合時に見た目をチェックしやすい（Undoもできる）

• ファイル名を直すときもレイヤーの名前を修正するだけ

• ファイル保存は自動でやってくれる

39

便利だ！

40

まとめ

41

• 感じている作業のストレスが溜まってきたら一度作業を見なおしてみる。

• 問題点を探して解決できないか考えてみる。

• 作業量の多さや繰り返しになっているところは自動化出来ないか探ってみる

××

42

• そんな作業を自動化できるのはJSX。是非いろいろ試してみてください！

ありがとうございました！

43