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

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

3. 3
自己紹介

4. 自己紹介
田中正吾（たなかせいご）
屋号：ワンフットシーバス
2004年よりフリーランス。
以後、FLASH制作を中心にインタラク
ティブコンテンツを主に行い現在に至る。
最近はソーシャルゲーム制作界隈で
JavaScriptやHTML5アニメーション、
スマートフォン演出制作の
ワークフロー改善に関わったりしています。
4

5. 5
では早速。

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

7. 7
一番行う作業は・・・。

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

9. 9
重なり合わないデザインなら、
スライス機能で取り出しやすいですが、
ヘッダー
コンテンツ
フッター
メニュー メニュー メニュー

10. 10
最近はHTML5アニメーションさせた
りしますし、レイアウトで画像を重ね
てレイアウトされることもしばしば。
コンテンツ
フッター
ヘッダー
メニュー メニュー メニュー

11. 11
そうなると、スライス機能が太刀打ち
出来ないことも多い。
コンテンツ
フッター
ヘッダー
メニュー メニュー メニュー

12. 12
そんなわけで

13. 13
例えばこんなPSDファイル

14. 14
レイヤーはこんな感じ

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

16. 16
該当のレイヤーだけを表示して
レイヤーをONにする
レイヤーをOFFにする

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

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

19. 19
該当のレイヤーだけを表示して
レイヤーをONにする
レイヤーをOFFにする

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

21. 21
これを繰り返し

22. 22
なかなかに手間がかかる

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

24. 24
作業1
↓
取り出したいレイヤーのON/OFF
↓
WEB書き出し、ファイル命名保存
↓
作業２
↓
取り出したいレイヤーのON/OFF
↓
WEB書き出し、ファイル命名保存

25. 25
図にしてみる
レイヤー
ON/OFF
ファイル
命名・保存
レイヤー
ON/OFF
ファイル
命名・保存

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

27. 27
「どんな名前で保存するか」
も、いつも頭で覚えている。
ファイル
命名・保存
名前

28. 28
作業ごと一つ一つの画像を書き出すと、
のレイヤーONOFF情報が一回失われて
しまう。
レイヤー
ON/OFF
ファイル
命名・保存
レイヤー
ON/OFF
ファイル
命名・保存
頭リセット！

29. 29
つまり、万が一レイヤー間違えた時、
ファイル名やり直したいとき、後戻りが
しにくい。思い出し直し。
レイヤー
ON/OFF
ファイル
命名・保存
レイヤー
ON/OFF
ファイル
命名・保存
後戻りしにくい
（思い出し直し）
ON
OFF
名前

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

31. 31
そこで、このJSX。

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

33. 33
http://www.1ft-seabass.jp/memo/2014/03/04/jsx_layer_to_png/
私のサイトにあるので、あとでURL伝えます。

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

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

36. 36
デモ（やれたら）

37. 37
このJSXを使うとこうなる。
レイヤー
整理・結合
レイヤー
命名
各レイヤーを
保存

38. 38
• レイヤー結合時に見た目をチェック
しやすい（Undoもできる）
• ファイル名を直すときもレイヤーの
名前を修正するだけ
• ファイル保存は自動でやってくれる

39. 39
便利だ！

40. 40
まとめ

41. 41
• 感じている作業のストレスが溜まってき
たら一度作業を見なおしてみる。
• 問題点を探して解決できないか考えてみ
る。
• 作業量の多さや繰り返しになっていると
ころは自動化出来ないか探ってみる
×
×

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

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