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