O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

イマドキのスライス事情

4.676 visualizações

Publicada em

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

Publicada em: Software
  • Seja o primeiro a comentar

イマドキのスライス事情

  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

×