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