Download as PDF, PPTX
Uploaded byYasuhito Yabe
イラレでWebデザインしても嫌われないデータ作成術
http://knock3.hamnaly.com/vol20/20thKnock-follow-yabe-illustrator-de-WebDesign.html
イラレでWebデザインしても嫌われないデータ作成術
- 1. イ ス レーターでWebデザンしても ラ ト イ 制作現場で嫌われないデータ作成術 2013年12月6日 Knock! Knock! 勉強会 矢部靖人
- 2.
- 3.
- 4.
- 6. ・ ラレ て…DTPの人がデザインしたんでし？ イ っ ょ → Webのお作法とかわかっ てないんだか ら… ・ ん りイ あ ま ラレ得意じゃないんだよね → 普通Psでし ？ 微妙に使いにく ょ いんだよね… ・ エッジがにじむし、 画像が足 りなかった るし りす → データ が汚いんだよね…
- 8.
- 9. CS4まではWeb向きではなかった 今は？ り使え うにな ま るよ りした Webでもかな イ ラレだっ てデキ る子なんです ！
- 10.
- 11.
- 13.
- 15. 求められるマルチデバイ ス対応 ・ 多様なデバイ （PC スマホゲーム機…） ス ・ ・ ・ 多様なスク リーンサイ （スマホ∼PC） ズ ・ 多様な画面解像度 device pixel ratio） （ 個別最適化は不可能 → 汎用的に構築したい
- 16. 汎用的なパーツ制作 ・ ・ ・ CSS3によるグラデーション 角丸 変形etc... ・ ォン Webフ ト ・ （ベク ター形式によ Web用画像） る SVG ベク ター形式 = 拡大縮小に強い → 画面サイ ・ ズ 画面解像度に依存しない
- 18.
- 19.
- 20.
- 21. 問題 ：エッジがにじむ 原因 ：ピクセルに整合し ていない
- 25.
- 26.
- 27.
- 30.
- 31. ・ 「ピクセルグリ ドに整合」 ェ ッ にチック ・ 「新規オブジェ ト ク をピクセルグリ ドに整合」 ェ ッ にチ ック ・ 情報パネル / 変形パネルでこ まめに確認 ・ ただし例外もあ （数幅が奇数の線など） る ・ と、 あ 安易な拡大縮小はデータ を汚す原因
- 32. 基準点は左上がベター Webのお作法） （ チ ック ェ ※「線幅と効果も拡大縮小」 ェ を入れないのがオススメ ・ はチ ック
- 33.
- 34. イ ラレ上のオブジェ トサイ ク ズはすべて30px ×30px 赤のエリ ア 29px × 29px 赤のエリ ア 28px × 28px 赤のエリ ア ３ px × 30px ０ 線を中央に揃え る 線を内側に揃え る 線を外側に揃え る
- 35.
- 36.
- 37.
- 38.
- 39. 「新規ドキ メン ダアログでは Web」 ュ ト」 イ 「 を選択 ドキ メント製作時の設定で、 ュ 大半はク アでき リ ます
- 40. プロフ イ ァ ルはWebを選択 複数ページをファ ルに入れるな １ イ ら ページごとにアート ボードを分けま ょ しう ※ 設定を変更す と カスタ にな ます る ム り サイ ズは任意 らいが一般的？） （w1200く プレビューモードは 「ピクセル」 に変更
- 41.
- 42. ・ そんなフ ト、 ォン 普通入っ てませんか！ ら （デバイ ステキストのフ ォント指定 / アウト ライン化） ・ 画像にし て欲しいテキスト / 画像にしないテキ スト ・ マウスオーバー時の変化 （ボタ / リ ン ンクテキ スト） ・ （アニメーション）/ ギミ 動き ックは伝わるよ うに ・ 画像は72dpiで くは150dpi） 350dpiとか重いだけです （もし 。 ・ ブラウザによ る差異もあ 完璧な再現は不毛です り、
- 43.
- 44. DTPにはDTPの、 WebにはWebのお作法がある つま 「郷に入 ては郷に従え」う と り、 り とい こ
- 45. デザイナー： 今度のWebデザイン、 ラレでいいですか？ イ コーダー：うーん （仕方ない っすね） デザイナー： あ りWebに慣れてないん ま で、 何か不都合があ ったら直すので言っ てくださいね コーダー ：じゃあ、 っちでいい感じに直し こ ますよ。 う く ま ないとこ ろは、 らチ ック てく 後か ェ し ださい。 両者 ：そんな感じでお願いし ます
- 47.
- 48. ・ 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
- 49.
- 50. 本日はあ がと ございま りう した ご連絡 ご質問など下記までお願いし ・ ます E-mail : info@hamnaly.com Facebook / Twitter : yabecchy