CPI x CSS Nite x 優クリエイト「After Dark」（17） 「Illustratorでサクサク作るSVG」

webクリエイターのための情報交換所スペシャル

「webクリエイターのための情報交換所」

ちょっとユル目の振り返りスペシャル

Illustratorでサクサク作るSVG

Facebook : t akash i . k i t amu ra .99Tw i t t e r : @ tah_ t im ing

T IM ING　北村 崇

東京都在 ロゴマーク、キャラクター、グッズ、グラフィックデザインを中心に活動を開始し、現在はWebデザイン、ディレクションなども行っている。

「WordP re s s『テーマカスタマイズ』徹底攻略」 「WordP re s sデザインのメソッド」 　他

泣き叫ぶ人

万能感のある人

影武者をあやつる人

Webで食ってるわたし

サイズ多すぎ

iPhone 51136×640

iPhone 4S960×640

iPad2048×1536

HTC/Xperia/GALAXY などの一部1920×1080

URBANO/AQUOS などの一部1280×720

iPhone 6750×1334

iPhone 6 Plus1242×2208

ピクセルパーフェクト？

・・,@2x,@3x,@？x

@[email protected]

@2x@3x

全部やったら神

なんとかしたい

SVG

神はいる

ベクターといえばコレ

Illustratorでサクサク作るSVG

AI SVG

・XML

・ベクター形式

・フィルターやアニメーション

・テキストも入る

<text><textPath xlink:href="#">Illustratorでサクサク作れる！SVGでもっと幸せになろう！</textPath></text>

・サイズごとに書き出す必要がない

？

じゃなんで流行んないんだ

img object

iframe CSS background

http://caniuse.com/

Difficult?

Quick and Easy!

AiAi

コピペでOK

⌘+c ⌘+v

レスポンシブ

フォントの埋め込み

SVG用フィルターあります

Step1

SVGからフィルター取れます

Step2

SVGからフィルター取れます

これが

こうなる

らくらくパ●れます

2015年はSVGで

脱ビットマップ!

「webクリエイターのための情報交換所」

ちょっとユル目の振り返りスペシャル

ありがとうございました。

良いお年を！