Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Illustrator のカンプと  うまく付き合う方法            西 谷 卓 也
自己紹介   西谷卓也   Takuya Nishitani   略歴     ・印刷営業 (1年)          ・DTPオペレーター 年)                    (5          ・DTPデザイナー 年)     ...
自己紹介                !            大 好き          岡山       !       地元        好き             ーノ大            ア        ファジ
artboard 1    Illustrator はウェブ制作に使っちゃダメなの?
デザインカンプを作るツールは?          デザインカンプは          どのツールで          作成していますか?
Illustratorカンプの評判    輪郭がぼやけてしまう…    作業効率が悪いからキライ!    Web用のツールじゃない?
どうしてIllustratorで作るの?    印刷会社ではIllustrator の    ユーザーがもっとも多い    ワイヤーフレームやカンプ    制作に適した機能がある
デザインカンプに適している点   ライブカラーで   お手軽カラーバリエーション
Web用の機能がちゃんとあるのにどうしてダメなのだろう?
Illustrator の問題点?     初期設定がDTP     作り手の理解不足
artboard 2Illustrator の環境設定をWeb 制作に最適化しよう    !
(1)単位を「ピクセル」に「環境設定」「単位・表示パフォーマンス」       の は「ピクセル」に変更
(2)グリッドを活用「環境設定」「ガイド・グリッ の数値を、      の           ド」「グリッド→10px、分割数 10」
(3)キー入力は「0.5px」「環境設定」「キー入力」「0.5px」       の     は ※1でないところがポイント
「表示」「ピクセルプレビュー」    →          で…
Illustrator がピクセル仕様に!
補足:カラーについて CMYK RGBRGB と CMYK で透明効果の結果が違う!
artboard 3よくあるIllustratorデータの   トラブルと対処法
(1)ファイルサイズ             重すぎ…
(1)ファイルサイズの確認・調整      解像度は    150dpi 以下に     Photoshop のバッチが便利
(2)原寸サイズ           小さっ 原寸サイズで作られていない!
(2)原寸サイズ    横幅を基準に   全体をサイズ変更     ロック解除の確認を忘れずに
(3)オブジェクトのピクセル合わせ  端数だらけで気持ち悪い…
(3)オブジェクトのピクセル合わせ    ピクセルグリッドに整合
(4) 線の調整       線がぼやけます…
(4) 線の調整 キー入力で 0.5px 移動
(5)テキストのレイヤー分けスライスしないテキストが混在してる…
(5)テキストのレイヤー分け画像にしないテキストは レイヤーで分ける
(6)フォントのラスタライズ   文字の輪郭が滲んでしまう。
(6)フォントのラスタライズ      「効果」         →  「ラスタライズ」→    「文字に最適」
(7)スライスオプション   スライス名を付けるのが面倒
(7)スライスオプション        ショートカットを         カスタマイズ 例えば…   Ctrl   Shift   Alt   A
artboard 4 最後に
バージョンアップの度にWeb 向けの機能が充実!
Web 向けの情報もたくさんあります!
Illustratorカンプとは  ポイントさえ押さえれば、Web 制作に対応している!
Illustratorは異業種を繋ぐ   データの架け橋!
ご静聴ありがとうございました。                  西谷卓也  taq.nishitani          Capybara_TAQ     お気軽にリクエストしてくださいね!
Illustratorのカンプとうまく付き合う方法
Prochain SlideShare
Chargement dans…5
×

Illustratorのカンプとうまく付き合う方法

20 094 vues

Publié le

2012年7月7日
CSS Nite in OKAYAMA vol.3にて講演

Publié dans : Design
  • Login to see the comments

Illustratorのカンプとうまく付き合う方法

  1. 1. Illustrator のカンプと うまく付き合う方法 西 谷 卓 也
  2. 2. 自己紹介 西谷卓也 Takuya Nishitani 略歴 ・印刷営業 (1年) ・DTPオペレーター 年) (5 ・DTPデザイナー 年) (4 ・WEBデザイナー(NOW!) 主な資格 ・JAGAT 認証 DTPエキスパート ・JWDA 認証 初級ウェブ解析士
  3. 3. 自己紹介 ! 大 好き 岡山 ! 地元 好き ーノ大 ア ファジ
  4. 4. artboard 1 Illustrator はウェブ制作に使っちゃダメなの?
  5. 5. デザインカンプを作るツールは? デザインカンプは どのツールで 作成していますか?
  6. 6. Illustratorカンプの評判 輪郭がぼやけてしまう… 作業効率が悪いからキライ! Web用のツールじゃない?
  7. 7. どうしてIllustratorで作るの? 印刷会社ではIllustrator の ユーザーがもっとも多い ワイヤーフレームやカンプ 制作に適した機能がある
  8. 8. デザインカンプに適している点 ライブカラーで お手軽カラーバリエーション
  9. 9. Web用の機能がちゃんとあるのにどうしてダメなのだろう?
  10. 10. Illustrator の問題点? 初期設定がDTP 作り手の理解不足
  11. 11. artboard 2Illustrator の環境設定をWeb 制作に最適化しよう !
  12. 12. (1)単位を「ピクセル」に「環境設定」「単位・表示パフォーマンス」 の は「ピクセル」に変更
  13. 13. (2)グリッドを活用「環境設定」「ガイド・グリッ の数値を、 の ド」「グリッド→10px、分割数 10」
  14. 14. (3)キー入力は「0.5px」「環境設定」「キー入力」「0.5px」 の は ※1でないところがポイント
  15. 15. 「表示」「ピクセルプレビュー」 → で…
  16. 16. Illustrator がピクセル仕様に!
  17. 17. 補足:カラーについて CMYK RGBRGB と CMYK で透明効果の結果が違う!
  18. 18. artboard 3よくあるIllustratorデータの トラブルと対処法
  19. 19. (1)ファイルサイズ 重すぎ…
  20. 20. (1)ファイルサイズの確認・調整 解像度は 150dpi 以下に Photoshop のバッチが便利
  21. 21. (2)原寸サイズ 小さっ 原寸サイズで作られていない!
  22. 22. (2)原寸サイズ 横幅を基準に 全体をサイズ変更 ロック解除の確認を忘れずに
  23. 23. (3)オブジェクトのピクセル合わせ 端数だらけで気持ち悪い…
  24. 24. (3)オブジェクトのピクセル合わせ ピクセルグリッドに整合
  25. 25. (4) 線の調整 線がぼやけます…
  26. 26. (4) 線の調整 キー入力で 0.5px 移動
  27. 27. (5)テキストのレイヤー分けスライスしないテキストが混在してる…
  28. 28. (5)テキストのレイヤー分け画像にしないテキストは レイヤーで分ける
  29. 29. (6)フォントのラスタライズ 文字の輪郭が滲んでしまう。
  30. 30. (6)フォントのラスタライズ 「効果」 → 「ラスタライズ」→ 「文字に最適」
  31. 31. (7)スライスオプション スライス名を付けるのが面倒
  32. 32. (7)スライスオプション ショートカットを カスタマイズ 例えば… Ctrl Shift Alt A
  33. 33. artboard 4 最後に
  34. 34. バージョンアップの度にWeb 向けの機能が充実!
  35. 35. Web 向けの情報もたくさんあります!
  36. 36. Illustratorカンプとは ポイントさえ押さえれば、Web 制作に対応している!
  37. 37. Illustratorは異業種を繋ぐ データの架け橋!
  38. 38. ご静聴ありがとうございました。 西谷卓也 taq.nishitani Capybara_TAQ お気軽にリクエストしてくださいね!

×