イマドキのスライス事情

CPI x CSS Nite After Dark 17
「webクリエイターのための情報交換所 スペシャル」のスライドです。
https://cssnite.jp/afterdark/cpi/vol17/

Transcript

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/generateweb-graphics-automatically.html
8. 画像アセット
9. 画像アセット
10. Renamy “Renamy” http://klaia.com/Renamy/
11. アセット抽出 ※CC 2014以降 “PSDアセット抽出ワークフロー” https://helpx.adobe.com/jp/photoshop/how-to/extractpsd-assets-browser.html
12. アセット抽出 ※CC 2014以降 “PSDアセット抽出ワークフロー” https://helpx.adobe.com/jp/photoshop/how-to/extractpsd-assets-browser.html
13. Slicy “MacRabbit - Slicy” http://macrabbit.com/slicy/
14. 画像アセット Layer Exporter “Layer Exporter for Adobe Illustrator” http://dehats.com/illustrator-layer-exporter/
15. Layer Exporter “Layer Exporter for Adobe Illustrator” http://dehats.com/illustrator-layer-exporter/
16. そもそもイマドキは、 スライスをしない。
17. そもそもイマドキは、 スライスをしない。 ※ここでいうイマドキとは、Windows 8.1やOS X Mavericks以降、 スマートフォンデバイスを指します。
18. フォントにする。
19. 游ゴシック・游明朝 “OS X MavericksとWindows 8.1にプロフェッショナル用書体の 游ゴシック体と游明朝体が標準搭載” http://blog.petitboys.com/archives/yugothic-yuminchojiyukobo.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-yuminchojiyukobo.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 2 “CSS Hat ‒ Turn Photoshop Layer Styles to CSS3. Instantly.” https://csshat.com/
26. CSS Hat 2 “CSS Hat ‒ Turn Photoshop Layer Styles to CSS3. Instantly.” https://csshat.com/
27. PNG Hat “PNG Hat: Source” http://pnghat.madebysource.com/
28. PNG Hat “PNG Hat: Source” http://pnghat.madebysource.com/
29. 今後、期待できそうな イマドキツール
30. 今後、期待できそうな イマドキツール ※ここでいうイマドキとは、2015年以降を指します。
31. Extract “PSD 変換 - HTML、CSS | Creative Cloud Extract - Adobe” http://www.adobe.com/jp/creativecloud/extract.html
32. Extract “コードベースのデザイン用にデザインアセットを抽出する ワークフロー” https://helpx.adobe.com/jp/creative-cloud/how-to/ extract-assets-browser-workflow.html
33. Extract
34. PSD Web Editing “PSD Web Editiong” https://blogs.adobe.com/conversations/2014/10/thecreative-magic-of-max-2014-sneaks.html
35. Avocode “Avocode ‒ Preview and inspect designs without Photoshop” http://avocode.com/
36. 今後のイマドキの情報は、 webクリエイターのための 情報交換所でチェック！ & シェア！
37. ありがとうございました @sou̲lab