CPI x CSS Nite After Dark 17 「webクリエイターのための情報交換所 スペシャル」

1. webクリエイターのための
情報交換所スペシャル

2. イマドキのスライス事情
CSS Nite After Dark 17
「webクリエイターのための情報交換所 スペシャル」
2014.12.18

3. Sou-Lab.
森田 壮
@sou_lab
フリーランス
デザインとかコーディングとか
ディレクションとか
Web制作者のための
Sassの教科書
Web制作者のための
SublimeTextの教科書

4. スライスといえば…

5. このスライス作業が、
イマドキは減ってきている。

6. このスライス作業が、
イマドキは減ってきている。
※ここでいうイマドキとは、Adode CC 以降を指します。

7. 画像アセット
Adobe GeneratorでWebグラフィックを作成し、生成する
https://helpx.adobe.com/jp/photoshop/how-to/generate-
web-graphics-automatically.html

8. 画像アセット

9. 画像アセット

10. Renamy
Renamy
http://klaia.com/Renamy/

11. PSDアセット抽出ワークフロー
https://helpx.adobe.com/jp/photoshop/how-to/extract-
psd-assets-browser.html
アセット抽出 ※CC 2014以降

12. アセット抽出 ※CC 2014以降
PSDアセット抽出ワークフロー
https://helpx.adobe.com/jp/photoshop/how-to/extract-
psd-assets-browser.html

13. MacRabbit - Slicy
http://macrabbit.com/slicy/Slicy

14. 画像アセット
Layer Exporter for Adobe Illustrator
http://dehats.com/illustrator-layer-exporter/Layer Exporter

15. Layer Exporter for Adobe Illustrator
http://dehats.com/illustrator-layer-exporter/Layer Exporter

16. そもそもイマドキは、
スライスをしない。

17. そもそもイマドキは、
スライスをしない。
※ここでいうイマドキとは、Windows 8.1やOS X Mavericks以降、
スマートフォンデバイスを指します。

18. フォントにする。

19. 游ゴシック・游明朝
OS X MavericksとWindows 8.1にプロフェッショナル用書体の
游ゴシック体と游明朝体が標準搭載
http://blog.petitboys.com/archives/yugothic-yumincho-
jiyukobo.html

20. 游ゴシック・游明朝
CSSでのフォント指定について考える（2014年）
www.dtp-transit.jp/misc/web/post_1881.html

21. 游ゴシック・游明朝
OS X MavericksとWindows 8.1にプロフェッショナル用書体の游ゴ
シック体と游明朝体が標準搭載
http://blog.petitboys.com/archives/yugothic-yumincho-
jiyukobo.html
font-family : Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3",
"Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;

22. IcoMoon
IcoMoon
https://icomoon.io/

23. コードにする。

24. CSSをコピー

25. CSS Hat
‒ Turn Photoshop Layer Styles to CSS3. Instantly.
https://csshat.com/
CSS Hat 2

26. CSS Hat
‒ Turn Photoshop Layer Styles to CSS3. Instantly.
https://csshat.com/
CSS Hat 2

27. PNG Hat: Source
http://pnghat.madebysource.com/PNG Hat

28. PNG Hat: Source
http://pnghat.madebysource.com/PNG Hat

29. 今後、期待できそうな
イマドキツール

30. 今後、期待できそうな
イマドキツール
※ここでいうイマドキとは、2015年以降を指します。

31. PSD 変換
- HTML、CSS ¦ Creative Cloud Extract - Adobe
http://www.adobe.com/jp/creativecloud/extract.html
Extract

32. コードベースのデザイン用にデザインアセットを抽出する
ワークフロー
https://helpx.adobe.com/jp/creative-cloud/how-to/
extract-assets-browser-workflow.html
Extract

33. Extract

34. PSD Web Editiong
https://blogs.adobe.com/conversations/2014/10/the-
creative-magic-of-max-2014-sneaks.html
PSD Web Editing

35. Avocode
‒ Preview and inspect designs without Photoshop
http://avocode.com/
Avocode

36. 今後のイマドキの情報は、
webクリエイターのための
情報交換所でチェック！
&シェア！

37. ありがとうございました
@sou_lab