Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

イマドキのスライス事情

5,043 views

Published on

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

Published in: Software
  • Login to see the comments

イマドキのスライス事情

  1. 1. webクリエイターのための 情報交換所スペシャル
  2. 2. イマドキのスライス事情 CSS Nite After Dark 17 「webクリエイターのための情報交換所 スペシャル」 2014.12.18
  3. 3. Sou-Lab. 森田 壮 @sou_lab フリーランス デザインとかコーディングとか ディレクションとか Web制作者のための Sassの教科書 Web制作者のための SublimeTextの教科書
  4. 4. スライスといえば…
  5. 5. このスライス作業が、 イマドキは減ってきている。
  6. 6. このスライス作業が、 イマドキは減ってきている。 ※ここでいうイマドキとは、Adode CC 以降を指します。
  7. 7. 画像アセット Adobe GeneratorでWebグラフィックを作成し、生成する https://helpx.adobe.com/jp/photoshop/how-to/generate- web-graphics-automatically.html
  8. 8. 画像アセット
  9. 9. 画像アセット
  10. 10. Renamy Renamy http://klaia.com/Renamy/
  11. 11. PSDアセット抽出ワークフロー https://helpx.adobe.com/jp/photoshop/how-to/extract- psd-assets-browser.html アセット抽出 ※CC 2014以降
  12. 12. アセット抽出 ※CC 2014以降 PSDアセット抽出ワークフロー https://helpx.adobe.com/jp/photoshop/how-to/extract- psd-assets-browser.html
  13. 13. MacRabbit - Slicy http://macrabbit.com/slicy/Slicy
  14. 14. 画像アセット Layer Exporter for Adobe Illustrator http://dehats.com/illustrator-layer-exporter/Layer Exporter
  15. 15. Layer Exporter for Adobe Illustrator http://dehats.com/illustrator-layer-exporter/Layer Exporter
  16. 16. そもそもイマドキは、 スライスをしない。
  17. 17. そもそもイマドキは、 スライスをしない。 ※ここでいうイマドキとは、Windows 8.1やOS X Mavericks以降、  スマートフォンデバイスを指します。
  18. 18. フォントにする。
  19. 19. 游ゴシック・游明朝 OS X MavericksとWindows 8.1にプロフェッショナル用書体の 游ゴシック体と游明朝体が標準搭載 http://blog.petitboys.com/archives/yugothic-yumincho- jiyukobo.html
  20. 20. 游ゴシック・游明朝 CSSでのフォント指定について考える(2014年) www.dtp-transit.jp/misc/web/post_1881.html
  21. 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. 22. IcoMoon IcoMoon https://icomoon.io/
  23. 23. コードにする。
  24. 24. CSSをコピー
  25. 25. CSS Hat ‒ Turn Photoshop Layer Styles to CSS3. Instantly. https://csshat.com/ CSS Hat 2
  26. 26. CSS Hat ‒ Turn Photoshop Layer Styles to CSS3. Instantly. https://csshat.com/ CSS Hat 2
  27. 27. PNG Hat: Source http://pnghat.madebysource.com/PNG Hat
  28. 28. PNG Hat: Source http://pnghat.madebysource.com/PNG Hat
  29. 29. 今後、期待できそうな イマドキツール
  30. 30. 今後、期待できそうな イマドキツール ※ここでいうイマドキとは、2015年以降を指します。
  31. 31. PSD 変換 - HTML、CSS ¦ Creative Cloud Extract - Adobe http://www.adobe.com/jp/creativecloud/extract.html Extract
  32. 32. コードベースのデザイン用にデザインアセットを抽出する ワークフロー https://helpx.adobe.com/jp/creative-cloud/how-to/ extract-assets-browser-workflow.html Extract
  33. 33. Extract
  34. 34. PSD Web Editiong https://blogs.adobe.com/conversations/2014/10/the- creative-magic-of-max-2014-sneaks.html PSD Web Editing
  35. 35. Avocode ‒ Preview and inspect designs without Photoshop http://avocode.com/ Avocode
  36. 36. 今後のイマドキの情報は、 webクリエイターのための 情報交換所でチェック! &シェア!
  37. 37. ありがとうございました @sou_lab

×