• Save
マルチデバイス時代にありがたい!イラレのあれこれ
Upcoming SlideShare
Loading in...5
×
 

マルチデバイス時代にありがたい!イラレのあれこれ

on

  • 32,448 views

2013.08.24 Ps / Ai / Fw ガチンコバトル勉強会でお話した際に使用したスライドです。 ...

2013.08.24 Ps / Ai / Fw ガチンコバトル勉強会でお話した際に使用したスライドです。
Webデザインで Adobe Illustrator を使うにあたっての最低限注意したいポイントや、地味に便利なTipsをご紹介しつつ、Photoshop や Fireworks とは違う切り口での魅力を主張してみました。

Statistics

Views

Total Views
32,448
Views on SlideShare
12,285
Embed Views
20,163

Actions

Likes
72
Downloads
15
Comments
0

34 Embeds 20,163

http://coliss.com 10407
http://web-mimemo.com 3556
http://bikkuri.me 2685
http://feedly.com 1013
http://dtp.jdash.info 712
http://localhost 372
http://trident-com.net 346
http://moriko-log.tumblr.com 316
https://twitter.com 297
http://awayuki.hatenablog.com 225
http://www.feedspot.com 108
http://wpnews.wp.xdomain.jp 40
http://cloud.feedly.com 18
http://rss.ameba.jp 12
http://digg.com 9
http://tweetedtimes.com 9
http://www.inoreader.com 7
http://reader.aol.com 6
http://yoleoreader.com 3
http://s.deeeki.com 3
http://mutya.info 3
http://www.newsblur.com 2
http://translate.googleusercontent.com 2
http://192.168.33.10 2
http://reader.aol.co.jp 1
http://summary 1
http://webcache.googleusercontent.com 1
https://cybozulive.com 1
http://www.google.co.jp 1
http://webpad.felicyle.com 1
http://feeds.feedburner.com 1
http://ivystar.jp 1
http://beta.inoreader.com 1
https://www.commafeed.com 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

    マルチデバイス時代にありがたい!イラレのあれこれ マルチデバイス時代にありがたい!イラレのあれこれ Presentation Transcript

    • マルチデバイス時代にありがたい! イラレのあれこれ Ps/Ai/Fw ガチンコバトル勉強会 in 大阪 2013.8.24 あわゆき
    • コーダー(HTML / CSS / jQuery / CMS 実装 など) 時々デザイン ほんのりイラスト / アイコン芸人 / ねんど だいたい赤ジャージで出没 好きなアドビはイラレです。 こんにちは。あわゆき @awayuki です。 も っ
    • 好 き な アド ビ は イ ラ レ で す 。
    • ていうかw イラレで Webデザインとかwww 「カラーモードが CMYKになってる し…」 「どれがデバイステキスト か分からへんし…」 「なんか コンテンツ幅おかしい し…」 「フォントサイズ微妙 やし…」 「ピクセルとずれてる し…」 「ていうかイラレ使い慣れてないからめんど k(ry」 「カラーモードが CMYKになってる し…」 「どれがデバイステキスト か分からへんし…」 「なんか コンテンツ幅おかしい し…」 「フォントサイズ微妙 やし…」 「ピクセルとずれてる し…」 「ていうかイラレ使い慣れてないからめんど k(ry」
    • でもそれ、ほぼイラレのせいじゃないから Web 制作の基本だから PSD でもひどいデータの時あるから …とはいえ、 デフォルトの設定だと Web には使いづらい 分かる、分かるよ君の気持ち
    • イラレ Web デザインを Dis らせない大前提!
    • awayukiawayuki 「ピクセルプレビュー」で作業する! Command + Option + Y ピクセル整合できるもん! 2 大原則+α no.00 単位を全て「ピクセル」に Command + K(環境設定:一般 / 単位)
    • 「CMYKになってる」 「デバイステキスト」 「コンテンツ幅」 「フォントサイズ」 「CMYKになってる」 「デバイステキスト」 「コンテンツ幅」 「フォントサイズ」 「CMYKになってる」 「デバイステキスト」 「コンテンツ幅」 「フォントサイズ」 「CMYKになってる」 「デバイステキスト」 「コンテンツ幅」 「フォントサイズ」 カラーモード:RGB アンチエイリアス:なし アートボードのサイズ 閲覧に適したサイズ カラーモード:RGB アンチエイリアス:なし アートボードのサイズ 閲覧に適したサイズ カラーモード:RGB アンチエイリアス:なし アートボードのサイズ 閲覧に適したサイズ カラーモード:RGB アンチエイリアス:なし アートボードのサイズ 閲覧に適したサイズ 「イラレめんどい」「イラレめんどい」「イラレめんどい」「イラレめんどい」 うるせぇペン先ぶつけんぞ PSD 書き出しする手もあるPSD 書き出しする手もあるPSD 書き出しする手もあるPSD 書き出しする手もある あとは Web の基本なので…
    • これなら文句ないよね? ここからが イラレ推し本番 です。 地味…だけど 効率化!できる 便利なところがメイン
    • アートボード と 書き出し機能を うまいこと使う! 推し 1:データの取り回しが便利!
    • awayukiawayuki 画面ごとのファイル分け不要!アートボードで 1 ファイル管理 no.01 1 ファイルだから、シンボルやスタイルの管理が楽! 「アートボード」ツール(Shift + O)&「アートボード」パネル
    • awayukiawayuki 書き出しメニュー 書き出す解像度を調整して、1 つのデータで高解像度対応! no.02 「書き出し」メニューから、アートボードを PNG 書き出し! 「ファイル」⇒「書き出し ...」⇒ ファイル形式「PNG(png)」選択 ⇒ PNG オプション アートボード W:320px H:480px PNG 画像 W:640px H:960px 解像度の種類:その他 数値:144ppi を入力
    • グローバルカラースウォッチ や 合成フォントで デザインを楽に扱う! 推し 2:デザインにも、もちろん便利!
    • awayukiawayuki ここに操作画面や図版を配置 (引き出し線で説明を入れても OK) ※サイト公開用の操作説明テキストは、別途提出下さい。 「グローバルカラースウォッチ」で簡単カラーバリエーション no.03 後から色変え、余裕です。 「スウォッチ」パネル ⇒ 対象スウォッチのオプションで「グローバル」にチェック
    • awayukiawayuki 「合成フォント」で混植ラクラク! 人の振り見て 我が振り Now on sale ! かな・漢字・英数字に別々のフォントを設定できる 「書式」⇒「合成フォント ...」で設定 漢字・かな・全角約物・全角記号 半角欧文・半角数字 作成した合成フォントは、ふつうのフォントと ほぼ同じように使える。 例えば… no.04
    • アピアランス カコイイ! (・∀・) (けど今回は地味 Tips です) グラフィックスタイルで 便利に使い回す! 推し 2:続・デザインにも、もちろん便利!
    • Illustrator のアピアランスのみで水着美女を描こう http://in.spicagraph.com/illustrator/summergirl/ Illustrator Text Object Appearance https://jypg.net/works/6076 アピアランスがスゴすぎて変態(いい意味で
    • awayukiawayuki 変形効果 オブジェクト 1 つの状態で 見た目だけ複製出来る 例: 垂直に 30px 移動したものを 6 個複製 ※テキストは行送り 30px で  改行して記述すれば  ズレない+1 オブジェクト 「変形」アピアランスで、パーツ量産が便利! no.05 1 オブジェクト+1 テキストでボタンパーツを量産 「効果」⇒「パスの変形」⇒「変形 ...」
    • awayukiawayuki 共通パーツのアピアランスをグラフィックスタイルで管理 no.06 同じ効果を一元管理して効率 UP ! 共通化したいアピアランスのオブジェクトを「グラフィックスタイル」パネルにドラッグ こんなボタンのベース グラフィックスタイルに放り込む 新たに長方形を作って グラフィックスタイルを適用 同じの! (・∀・) 人 (・∀・)
    • 俺のイラレ推し…とりあえずこのへんで これらはほんの一例です。 デザインパーツの管理しやすさ 果てしない高解像度への対応しやすさ これもイラレのすてきなところ
    • 基本イラレ推しですが… 写真画像の処理、 有機的で繊細なテクスチャ、 グラデーションの精細さ Photoshop には敵いません Fireworks がいい局面もある 要は 適材適所だいじ (`・ω・´)
    • One more thing... ワイヤーフレームや提案資料、 デザインの前段階から効率的に巻き込める やり方があります 実は今どきの適材適所にもかなり食い込んいでる (時間があればちょっぴりお見せします)
    • まとめ? イラレ、Web でも けっこう出来る子だから たくさん使うといいよ!
    • おしまい ありがとうございました!