イラレでWebデザインしても嫌われないデータ作成術
Upcoming SlideShare
Loading in...5
×
 

イラレでWebデザインしても嫌われないデータ作成術

on

  • 17,594 views

http://knock3.hamnaly.com/vol20/20thKnock-follow-yabe-illustrator-de-WebDesign.html

http://knock3.hamnaly.com/vol20/20thKnock-follow-yabe-illustrator-de-WebDesign.html

Statistics

Views

Total Views
17,594
Views on SlideShare
5,195
Embed Views
12,399

Actions

Likes
17
Downloads
17
Comments
0

25 Embeds 12,399

http://coliss.com 11050
http://feedly.com 999
http://www.feedspot.com 115
http://knock3.hamnaly.com 100
http://wpnews.wp.xdomain.jp 43
http://s.deeeki.com 32
http://rss.ameba.jp 9
http://digg.com 9
http://reader.aol.com 5
http://japanese-slideshare.com 4
https://twitter.com 4
http://www.inoreader.com 4
http://yoleoreader.com 4
http://mutya.info 3
http://www.pinterest.com 3
http://www.newsblur.com 3
http://webpad.felicyle.com 3
http://jp.pinterest.com 2
http://translate.googleusercontent.com 1
http://feeds.feedburner.com 1
http://beta.inoreader.com 1
http://reader.aol.co.jp 1
http://ivystar.jp 1
https://www.commafeed.com 1
http://www.google.co.jp 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

イラレでWebデザインしても嫌われないデータ作成術 イラレでWebデザインしても嫌われないデータ作成術 Presentation Transcript

  • イ ス レーターでWebデザ ンしても ラ ト イ 制作現場で嫌われないデータ作成術 2013年12月6日 Knock! Knock! 勉強会 矢部靖人
  • 1)Webデザインでイ ラレはなぜ嫌われるのか 2)今イラレが注目される理由 3)Webデザイ ンでイ ラレを使うTips
  • 今日の話は Webデザインの良し悪し」 「 ではなく、 「Webデザイ “データ” ン用 の良し悪し」 です View slide
  • 1) ラレはなぜ嫌われるのか Webデザインでイ View slide
  • ・ ラレ て…DTPの人がデザインしたんでし ? イ っ ょ → Webのお作法とかわかっ てないんだか ら… ・ ん りイ あ ま ラレ得意じゃないんだよね → 普通Psでし ? 微妙に使いにく ょ いんだよね… ・ エッジがにじむし、 画像が足 りなかった るし りす → データ が汚いんだよね…
  • イ ラレがWeb制作現場で嫌われる原因 その多く は先入観… お互いに歩み寄 ませ り んか DTPもWebもない、
  • CS4まではWeb向きではなかった 今は? り使え うにな ま るよ り した Webでもかな イ ラレだっ てデキ る子なんです !
  • ただ、 これだけだと “積極的にイ ラレ” とはいかない…
  • 2) ラレが注目される理由 今イ
  • Fireworks CS6で事実上の開発停止 なく なったわけないけど、 次を考えないと…
  • 求められるマルチデバイ ス対応 ・ 多様なデバイ (PC スマホ ゲーム機…) ス ・ ・ ・ 多様なスク リーンサイ (スマホ∼PC) ズ ・ 多様な画面解像度 device pixel ratio) ( 個別最適化は不可能 → 汎用的に構築したい
  • 汎用的なパーツ制作 ・ ・ ・ CSS3によるグラデーション 角丸 変形 etc... ・ ォン Webフ ト ・ (ベク ター形式によ Web用画像) る SVG ベク ター形式 = 拡大縮小に強い  → 画面サイ ・ ズ 画面解像度に依存しない
  • ター形式といえば Adobeでベク Illustrator! Illustrator! Illustrator!
  • このあた りのお話は、 またいずれかの機会に…
  • 3) ラレを使うTips Webデザインでイ
  • 問題 :エッジがにじむ 原因 : ピクセルに整合し ていない
  • 要は、 ピクセルとい“単位” の上手なお付き合い う と
  • 大原則:単位はピクセル、 数値は整数
  • 単位はピクセル
  • 数値は整数
  • ・ 「ピクセルグリ ドに整合」 ェ ッ にチ ック ・ 「新規オブジェ ト ク をピクセルグリ ドに整合」 ェ ッ にチ ック ・ 情報パネル / 変形パネルでこ まめに確認 ・ ただし例外もあ (数幅が奇数の線など) る ・ と、 あ 安易な拡大縮小はデータ を汚す原因
  • 基準点は左上がベター Webのお作法) ( チ ック ェ ※「線幅と効果も拡大 縮小」 ェ を入れないのがオススメ ・ はチ ック
  • 線の位置
  • イ ラレ上のオブジェ トサイ ク ズはすべて30px × 30px 赤のエリ ア 29px × 29px 赤のエリ ア 28px × 28px 赤のエリ ア 3 px × 30px 0 線を中央に揃え る 線を内側に揃え る 線を外側に揃え る
  • ・ 線の位置は 「内側に揃え or る」「外側に揃え る」 ・ 「外側」 がいいとい う話も… → http://www.dtp-transit.jp/adobe/illustrator/post_1797.html
  • 参) スモデル Webのボック (外側の余白) Margin (内側の余白) Padding Width Height ( Border 線)
  • イ ラレ上でピクセル描画を確認す る
  • ちなみに 「校正設定」 は 「インターネッ ト標準RGB(sRGB)」
  • 「新規ドキ メン ダ アログでは Web」 ュ ト」 イ 「 を選択 ドキ メント製作時の設定で、 ュ 大半はク アでき リ ます
  • プロフ イ ァ ルはWebを選択 複数ページを ファ ルに入れるな 1 イ ら ページごとにアート ボードを分けま ょ しう ※ 設定を変更す と カスタ にな ます る ム り サイ ズは任意 らいが一般的?) (w1200く プレビューモードは 「ピクセル」 に変更
  • ・ Web特有のデザイン 情報
  • ・ そんなフ ト、 ォン 普通入っ てませんか ! ら (デバイ ステキストのフ ォント指定 / アウト ライン化) ・ 画像にし て欲しいテキスト / 画像にしないテキ スト ・ マウスオーバー時の変化 (ボタ / リ ン ンクテキ スト) ・ (アニメーション)/ ギミ 動き ックは伝わるよ うに ・ 画像は72dpiで くは150dpi) 350dpiとか重いだけです (もし 。 ・ ブラウザによ る差異もあ 完璧な再現は不毛です り、
  • 結局は人と人
  • DTPにはDTPの、 WebにはWebのお作法がある つま 「郷に入 ては郷に従え」 う と り、 り とい こ
  • デザイナー: 今度のWebデザイン、 ラレでいいですか? イ コーダー :うーん (仕方ない っすね) デザイナー: あ りWebに慣れてないん ま で、 何か不都合があ ったら直すので言っ てくださいね コーダー :じゃあ、 っちでいい感じに直し こ ますよ。 う く ま ないとこ ろは、 らチ ック てく 後か ェ し ださい。 両者 :そんな感じでお願いし ます
  • 参考
  • ・ IllustratorでWeb向けの作業を行 ときのチ ック スト DTP Transit) う ェ リ ( http://www.dtp-transit.jp/adobe/illustrator/post_1160.html ・ IllustratorでWEBデザインを納品す る方法 CS5版)く ( ( ずはて) http://www.kuzuhate.com/web-soft/illustrator/553/ ・マルチデバイ ス時代にあ りがたい イ ! ラレのあれこれ http://www.slideshare.net/awayukin/gachinko-awayuki-share
  • 実装に困っ ら た ご連絡く ださい !
  • 本日はあ がと ございま り う した ご連絡 ご質問など下記までお願いし ・ ます E-mail : info@hamnaly.com Facebook / Twitter : yabecchy