2013年3月21日にCo-Edoで行われた、Fireworks User Group Lightning Talkで発表したスライドです。

1. 敢えて@1x で
Retina 対応をしてみる
Fireworks User Group LightningTalk
in Co-Edo
2013.3.21
@littlebusters

2. 自己紹介
@littlebustersです。
2

3. デザインをしています。
ë ë
/ j Y
パッケージ グラフィック
&
ウェブ & UI
S
イマココ
3

4. Font Mixer
作りました。
http://creative-tweet.net/tools/font_mixer/detail.html
4

5. 本日のお題
能を
拡張機
使って
敢えて@1xで
Retina対応をしてみる
5

6. こんな感じで
¢
)
キッカケ
°
メリット・デメリット
X
気を付けること ちょっとデモ
スライド中のスクリーンショットは、Mac版パッケージのFw CS6です。
6

7. キッカケ的なこと
} 8 e
過去資産の 一発で Advent
再利用 書き出したい Calendar
7

8. Retina 画像書き出し
拡張機能ができました。
http://creative-tweet.net/tools/retina_image_exporter/detail.html
8

9. 拡張機能の特長
•@1xを拡大した@2xと
そのままの@1xを
1アクションで書き出し。
•実はネタのつもりだった…
なんて言えない。
9

10. @1x のメリット
¢
いろいろと
ハンドリングがいい
ぐらい…？
10

11. @1x のデメリット
° ビットマップ関連が
壊滅的！ 拡大するので。
11

12. 作成時に気を付けること
 j w
シンボル ビットマップ関連 フィルター
12

13. シンボル
9スライス
13

14. 9スライスはオフに！
オン オフ
14

15. 9スライスのオフ設定
1. 9スライスが有効なシンボルを、
シンボル編集モードへ。
2. プロパティパネルの「9スライスガイド
を有効にする」チェックをオフに！
15

16. ビットマップ
j
———
————
———
写真関連 パターン テクスチャ
16

17. 写真関連
•@2x用画像を別途準備。
•
@2x用画像をシンボル化→
大きさを50%以下にして配置。
17

18. パターン
•
ニアレストネイバー法でスケールして
も問題ないならそのままで。
•
写真と同様に@2x用をシンボル化、
大きさを50%以下にしマスクを適用。
18

19. テクスチャ
•
スケールされないため、
そのままで許容できるなら触らない。
•要スケールならシンボル化で対応。
•
カラー調整→反転し、階調を逆転。
合成モードはスクリーンで。
19

20. フィルタ
Photoshop
ライブエフェクト
20

21. ストローク（線）
•
外側以外の処理が残念な線に変換。
場合によってはサイズ変更も…
PsLE
–
Fw
内側 中央 外側
21

22. ドロップシャドウ
•
PsLEのサイズから-1した値を、
柔かさにするといい感じ。
PsLE Fw
サイズ: 10
−1 柔かさ: 9
22

23. シャ （内側）
ドウ
•前項のドロップシャドウと同じ。
PsLE Fw
サイズ: 10
−1 柔かさ: 9
23

24. 光彩（内側）
•やや鬼門。
•
小サイズの場合は、Fwの光彩では再現
できないため、シャドウ（内側）で。
•
サイズが大きくなれば
光彩（内側）だけで再現可能。
24

25. 光彩（内側）の再現性
PsLE
サイズ: 3 サイズ: 6 サイズ: 9
Fw
シャ （内側） 3
ドウ × 光彩 光彩
25

26. 光彩（外側・Fwではグロー）
•鬼門。
•小サイズなら、何となく再現可能。
•
サイズが大きくなった場合、
2つ重ねることで、何となく再現可能。
•サイズ10ぐらいから、再現困難。
26

27. 光彩（外側）の再現性
PsLE
サイズ: 3 サイズ: 6 サイズ: 9
Fw
グローのみ グロー × 2 グロー × 2
＆
ドロップシャドウ
27

28. 拡張機能デモ
28

29. まとめ

シンボル
9スライスはオフに
j
ビットマップ
@2x用画像のシンボル化が安定
w Photoshopライブエフェクトの
利用は計画的に
フィルタ
29

30. Thank You!
@littlebusters
 http://creative-tweet.net/
30