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

画像アセット

画像アセット

Renamy “Renamy” http://klaia.com/Renamy/

“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

“MacRabbit - Slicy” http://macrabbit.com/slicy/Slicy

画像アセット “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;

IcoMoon “IcoMoon” https://icomoon.io/

コードにする。

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

“PNG Hat: Source” http://pnghat.madebysource.com/PNG Hat

“PNG Hat: Source” http://pnghat.madebysource.com/PNG Hat

今後、期待できそうな イマドキツール

今後、期待できそうな イマドキツール※ここでいうイマドキとは、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