SlideShare ist ein Scribd-Unternehmen logo

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

•
•
Takashi Kitamura
Takashi Kitamura

CPI x CSS Nite x 優クリエイト「After Dark」（17）「webクリエイターのための情報交換所」ちょっとユル目の振り返りスペシャル で話したIllustratorでSVGを作る基礎のスライドです。

Design
1 von 34
Downloaden Sie, um offline zu lesen
webクリエイターのための 情報交換所スペシャル
「webクリエイターのための情報交換所」 ちょっとユル目の振り返りスペシャル Illustratorでサクサク作るSVG
F a c e b o o k : t a k a s h i . k i t a m u r a . 9 9 T w i t t e r : @ t a h _ t i m i n g T I M I N G  北 村 崇 東 京 都 在 ロ ゴ マ ー ク 、 キ ャ ラ ク タ ー 、 グ ッ ズ 、 グ ラ フ ィ ッ ク デ ザ イ ン を 中 心 に 活 動 を 開 始 し 、 現 在 は W e b デ ザ イ ン 、 デ ィ レ ク シ ョ ン な ど も 行 っ て い る 。 「 W o r d P r e s s 『 テ ー マ カ ス タ マ イ ズ 』 徹 底 攻 略 」 「 W o r d P r e s s デ ザ イ ン の メ ソ ッ ド 」   他
泣き叫ぶ人
万能感のある人
影武者をあやつる人
Webで食ってるわたし
サイズ多すぎ iPhone 5 1136×640 iPhone 4S 960×640 iPad 2048×1536 HTC/Xperia/GALAXY などの一部 1920×1080 URBANO/AQUOS などの一部 1280×720 iPhone 6 750×1334 iPhone 6 Plus 1242×2208
ピクセルパーフェクト？ ・・,@2x,@3x,@？x
@1.5x @1.33x @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! Ai Ai
コピペでOK +c +v
レスポンシブ
フォントの埋め込み
SVG用フィルターあります
Step1 SVGからフィルター取れます
Step2 SVGからフィルター取れます
これが
こうなる らくらくパ●れます
2015年はSVGで 脱ビットマップ!
「webクリエイターのための情報交換所」 ちょっとユル目の振り返りスペシャル ありがとうございました。 良いお年を！

Empfohlen

マスクに関するアレコレ（「生でエキスパートが語る」第3回）
マスクに関するアレコレ（「生でエキスパートが語る」第3回）マスクに関するアレコレ（「生でエキスパートが語る」第3回）
マスクに関するアレコレ（「生でエキスパートが語る」第3回）swwwitch inc.
 
page 2015「クリエイティブゾーンセミナー」『Illustratorでの配置画像事情 2015』
page 2015「クリエイティブゾーンセミナー」『Illustratorでの配置画像事情 2015』page 2015「クリエイティブゾーンセミナー」『Illustratorでの配置画像事情 2015』
page 2015「クリエイティブゾーンセミナー」『Illustratorでの配置画像事情 2015』swwwitch inc.
 
第170回バンフーセミナー Illustrator・Photoshop・InDesignデータ駆動グラフィックの基本
第170回バンフーセミナー Illustrator・Photoshop・InDesignデータ駆動グラフィックの基本第170回バンフーセミナー Illustrator・Photoshop・InDesignデータ駆動グラフィックの基本
第170回バンフーセミナー Illustrator・Photoshop・InDesignデータ駆動グラフィックの基本swwwitch inc.
 
2015年のフォント総括／鷹野 雅弘（スイッチ）
2015年のフォント総括／鷹野 雅弘（スイッチ）2015年のフォント総括／鷹野 雅弘（スイッチ）
2015年のフォント総括／鷹野 雅弘（スイッチ）swwwitch inc.
 
Best of MAX「ベテランほど知らずに損してる IllustratorとPhotoshopの新常識（CCライブラリ編）」
Best of MAX「ベテランほど知らずに損してる IllustratorとPhotoshopの新常識（CCライブラリ編）」Best of MAX「ベテランほど知らずに損してる IllustratorとPhotoshopの新常識（CCライブラリ編）」
Best of MAX「ベテランほど知らずに損してる IllustratorとPhotoshopの新常識（CCライブラリ編）」swwwitch inc.
 
SkyVerge - Remote Factory Tour
SkyVerge - Remote Factory TourSkyVerge - Remote Factory Tour
SkyVerge - Remote Factory TourFulvio Notarstefano
 
Understanding Underscores 〜「_s」テーマってなんだろう〜
Understanding Underscores 〜「_s」テーマってなんだろう〜Understanding Underscores 〜「_s」テーマってなんだろう〜
Understanding Underscores 〜「_s」テーマってなんだろう〜Naoko Takano
 
Webサイトの設計を考えてみよう（前半）
Webサイトの設計を考えてみよう（前半）Webサイトの設計を考えてみよう（前半）
Webサイトの設計を考えてみよう（前半）kenji goto
 

Empfohlen

マスクに関するアレコレ（「生でエキスパートが語る」第3回）
マスクに関するアレコレ（「生でエキスパートが語る」第3回）マスクに関するアレコレ（「生でエキスパートが語る」第3回）
マスクに関するアレコレ（「生でエキスパートが語る」第3回）swwwitch inc.
 
page 2015「クリエイティブゾーンセミナー」『Illustratorでの配置画像事情 2015』
page 2015「クリエイティブゾーンセミナー」『Illustratorでの配置画像事情 2015』page 2015「クリエイティブゾーンセミナー」『Illustratorでの配置画像事情 2015』
page 2015「クリエイティブゾーンセミナー」『Illustratorでの配置画像事情 2015』swwwitch inc.
 
第170回バンフーセミナー Illustrator・Photoshop・InDesignデータ駆動グラフィックの基本
第170回バンフーセミナー Illustrator・Photoshop・InDesignデータ駆動グラフィックの基本第170回バンフーセミナー Illustrator・Photoshop・InDesignデータ駆動グラフィックの基本
第170回バンフーセミナー Illustrator・Photoshop・InDesignデータ駆動グラフィックの基本swwwitch inc.
 
2015年のフォント総括／鷹野 雅弘（スイッチ）
2015年のフォント総括／鷹野 雅弘（スイッチ）2015年のフォント総括／鷹野 雅弘（スイッチ）
2015年のフォント総括／鷹野 雅弘（スイッチ）swwwitch inc.
 
Best of MAX「ベテランほど知らずに損してる IllustratorとPhotoshopの新常識（CCライブラリ編）」
Best of MAX「ベテランほど知らずに損してる IllustratorとPhotoshopの新常識（CCライブラリ編）」Best of MAX「ベテランほど知らずに損してる IllustratorとPhotoshopの新常識（CCライブラリ編）」
Best of MAX「ベテランほど知らずに損してる IllustratorとPhotoshopの新常識（CCライブラリ編）」swwwitch inc.
 
SkyVerge - Remote Factory Tour
SkyVerge - Remote Factory TourSkyVerge - Remote Factory Tour
SkyVerge - Remote Factory TourFulvio Notarstefano
 
Understanding Underscores 〜「_s」テーマってなんだろう〜
Understanding Underscores 〜「_s」テーマってなんだろう〜Understanding Underscores 〜「_s」テーマってなんだろう〜
Understanding Underscores 〜「_s」テーマってなんだろう〜Naoko Takano
 
Webサイトの設計を考えてみよう（前半）
Webサイトの設計を考えてみよう（前半）Webサイトの設計を考えてみよう（前半）
Webサイトの設計を考えてみよう（前半）kenji goto
 
38回/デザイン勉強会@赤羽「これからはじめるWebデザイン〜Webデザイナーに必要なもの〜」
38回/デザイン勉強会@赤羽「これからはじめるWebデザイン〜Webデザイナーに必要なもの〜」38回/デザイン勉強会@赤羽「これからはじめるWebデザイン〜Webデザイナーに必要なもの〜」
38回/デザイン勉強会@赤羽「これからはじめるWebデザイン〜Webデザイナーに必要なもの〜」Takashi Kitamura
 
「人にやさしいデザイン（はモテる）」
「人にやさしいデザイン（はモテる）」「人にやさしいデザイン（はモテる）」
「人にやさしいデザイン（はモテる）」Takashi Kitamura
 
大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」
大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」
大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」Takashi Kitamura
 
WordCamp Tokyo2015 (Lt kitamura)
WordCamp Tokyo2015 (Lt kitamura)WordCamp Tokyo2015 (Lt kitamura)
WordCamp Tokyo2015 (Lt kitamura)Takashi Kitamura
 
20150619デザイン勉強会34「本のリ・デザイン アイデアソン」
20150619デザイン勉強会34「本のリ・デザイン アイデアソン」20150619デザイン勉強会34「本のリ・デザイン アイデアソン」
20150619デザイン勉強会34「本のリ・デザイン アイデアソン」Takashi Kitamura
 
20150417デザイン勉強会33
20150417デザイン勉強会3320150417デザイン勉強会33
20150417デザイン勉強会33Takashi Kitamura
 
第32回デザイン勉強会 「web制作のプロトタイピングツール」
第32回デザイン勉強会 「web制作のプロトタイピングツール」第32回デザイン勉強会 「web制作のプロトタイピングツール」
第32回デザイン勉強会 「web制作のプロトタイピングツール」Takashi Kitamura
 
WP-D Fes03 Osaka Kitamura Tah
WP-D Fes03 Osaka Kitamura TahWP-D Fes03 Osaka Kitamura Tah
WP-D Fes03 Osaka Kitamura TahTakashi Kitamura
 
イマドキWEBデザイン/140712fsumi
イマドキWEBデザイン/140712fsumiイマドキWEBデザイン/140712fsumi
イマドキWEBデザイン/140712fsumiTakashi Kitamura
 
2014/03/29 WordBench TOKYO
2014/03/29 WordBench TOKYO2014/03/29 WordBench TOKYO
2014/03/29 WordBench TOKYOTakashi Kitamura
 
2014/02/01 WP-D Fes #01(sat) Megane Fes in GMO
2014/02/01 WP-D Fes #01(sat) Megane Fes in GMO2014/02/01 WP-D Fes #01(sat) Megane Fes in GMO
2014/02/01 WP-D Fes #01(sat) Megane Fes in GMOTakashi Kitamura
 
W ctokyo2012 timing
W ctokyo2012 timingW ctokyo2012 timing
W ctokyo2012 timingTakashi Kitamura
 
Osc2012tokyo timing
Osc2012tokyo timingOsc2012tokyo timing
Osc2012tokyo timingTakashi Kitamura
 

Weitere ähnliche Inhalte

Mehr von Takashi Kitamura

38回/デザイン勉強会@赤羽「これからはじめるWebデザイン〜Webデザイナーに必要なもの〜」
38回/デザイン勉強会@赤羽「これからはじめるWebデザイン〜Webデザイナーに必要なもの〜」38回/デザイン勉強会@赤羽「これからはじめるWebデザイン〜Webデザイナーに必要なもの〜」
38回/デザイン勉強会@赤羽「これからはじめるWebデザイン〜Webデザイナーに必要なもの〜」Takashi Kitamura
 
「人にやさしいデザイン（はモテる）」
「人にやさしいデザイン（はモテる）」「人にやさしいデザイン（はモテる）」
「人にやさしいデザイン（はモテる）」Takashi Kitamura
 
大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」
大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」
大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」Takashi Kitamura
 
WordCamp Tokyo2015 (Lt kitamura)
WordCamp Tokyo2015 (Lt kitamura)WordCamp Tokyo2015 (Lt kitamura)
WordCamp Tokyo2015 (Lt kitamura)Takashi Kitamura
 
20150619デザイン勉強会34「本のリ・デザイン アイデアソン」
20150619デザイン勉強会34「本のリ・デザイン アイデアソン」20150619デザイン勉強会34「本のリ・デザイン アイデアソン」
20150619デザイン勉強会34「本のリ・デザイン アイデアソン」Takashi Kitamura
 
20150417デザイン勉強会33
20150417デザイン勉強会3320150417デザイン勉強会33
20150417デザイン勉強会33Takashi Kitamura
 
第32回デザイン勉強会 「web制作のプロトタイピングツール」
第32回デザイン勉強会 「web制作のプロトタイピングツール」第32回デザイン勉強会 「web制作のプロトタイピングツール」
第32回デザイン勉強会 「web制作のプロトタイピングツール」Takashi Kitamura
 
WP-D Fes03 Osaka Kitamura Tah
WP-D Fes03 Osaka Kitamura TahWP-D Fes03 Osaka Kitamura Tah
WP-D Fes03 Osaka Kitamura TahTakashi Kitamura
 
イマドキWEBデザイン/140712fsumi
イマドキWEBデザイン/140712fsumiイマドキWEBデザイン/140712fsumi
イマドキWEBデザイン/140712fsumiTakashi Kitamura
 
2014/03/29 WordBench TOKYO
2014/03/29 WordBench TOKYO2014/03/29 WordBench TOKYO
2014/03/29 WordBench TOKYOTakashi Kitamura
 
2014/02/01 WP-D Fes #01(sat) Megane Fes in GMO
2014/02/01 WP-D Fes #01(sat) Megane Fes in GMO2014/02/01 WP-D Fes #01(sat) Megane Fes in GMO
2014/02/01 WP-D Fes #01(sat) Megane Fes in GMOTakashi Kitamura
 

Mehr von Takashi Kitamura (13)

38回/デザイン勉強会@赤羽「これからはじめるWebデザイン〜Webデザイナーに必要なもの〜」
38回/デザイン勉強会@赤羽「これからはじめるWebデザイン〜Webデザイナーに必要なもの〜」38回/デザイン勉強会@赤羽「これからはじめるWebデザイン〜Webデザイナーに必要なもの〜」
38回/デザイン勉強会@赤羽「これからはじめるWebデザイン〜Webデザイナーに必要なもの〜」
 
「人にやさしいデザイン（はモテる）」
「人にやさしいデザイン（はモテる）」「人にやさしいデザイン（はモテる）」
「人にやさしいデザイン（はモテる）」
 
大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」
大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」
大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」
 
WordCamp Tokyo2015 (Lt kitamura)
WordCamp Tokyo2015 (Lt kitamura)WordCamp Tokyo2015 (Lt kitamura)
WordCamp Tokyo2015 (Lt kitamura)
 
20150619デザイン勉強会34「本のリ・デザイン アイデアソン」
20150619デザイン勉強会34「本のリ・デザイン アイデアソン」20150619デザイン勉強会34「本のリ・デザイン アイデアソン」
20150619デザイン勉強会34「本のリ・デザイン アイデアソン」
 
20150417デザイン勉強会33
20150417デザイン勉強会3320150417デザイン勉強会33
20150417デザイン勉強会33
 
第32回デザイン勉強会 「web制作のプロトタイピングツール」
第32回デザイン勉強会 「web制作のプロトタイピングツール」第32回デザイン勉強会 「web制作のプロトタイピングツール」
第32回デザイン勉強会 「web制作のプロトタイピングツール」
 
WP-D Fes03 Osaka Kitamura Tah
WP-D Fes03 Osaka Kitamura TahWP-D Fes03 Osaka Kitamura Tah
WP-D Fes03 Osaka Kitamura Tah
 
イマドキWEBデザイン/140712fsumi
イマドキWEBデザイン/140712fsumiイマドキWEBデザイン/140712fsumi
イマドキWEBデザイン/140712fsumi
 
2014/03/29 WordBench TOKYO
2014/03/29 WordBench TOKYO2014/03/29 WordBench TOKYO
2014/03/29 WordBench TOKYO
 
2014/02/01 WP-D Fes #01(sat) Megane Fes in GMO
2014/02/01 WP-D Fes #01(sat) Megane Fes in GMO2014/02/01 WP-D Fes #01(sat) Megane Fes in GMO
2014/02/01 WP-D Fes #01(sat) Megane Fes in GMO
 
W ctokyo2012 timing
W ctokyo2012 timingW ctokyo2012 timing
W ctokyo2012 timing
 
Osc2012tokyo timing
Osc2012tokyo timingOsc2012tokyo timing
Osc2012tokyo timing
 

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