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

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

Embed Size (px)

Citation preview

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クリエイターのための情報交換所」

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

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

良いお年を!