当サイトのレスポンシブデザインへのリニューアル変更に向けて、ワイヤーフレームの作成へと着手し始めました。ただ、今回はあまり使い慣れない Adobe の Illustrator CC(2014) で作成しようと一念発起!そのため、Web デザイン向けへの環境設定へと変更する必要がありましたので、ご紹介しようと思います。また、ご紹介させて頂く設定方法は Adobe Pinch In にて紹介されているので、そちらをご参考にしてみると良いと思います。
ちなみに、Illustrator CC(2014) はベクター画像という描画を基本としたドローイングアプリケーションです。特にイラストの作成、雑誌などの紙媒体デザイン(DTP)で利用される事などで知られています。ただ、近年では Web デザイン用のツールとしても注目されているので、この機会に触ってみるのも良いかもしれません・・・。
Web サイトの作成で最低限覚えておくべき必要なポイントを見ておきましょう。
- 1.基本単位が整数値の「px」
- 2.カラーモデル「RGB」
- 3.Web サイトで使用できる画像フォーマット「JPEG」、「GIF」、「PNG」、「SVG」など
Web サイト向けのデザインやパーツ画像を作成するツールには、これらの条件に合うようにデータを作成しましょう。特に、Illustrator には効率よくデザインしたりパーツを管理する機能、Tips も多く搭載しています。最新バージョンでは、Web デザインに特化した機能も充実しています。
※ 今回使用している Illustrator CC(バージョン 18.0.0)になります。また、ショートカットキーは基本的に OS X を基準に表記していますので、Windows の場合の操作は括弧内の表記を参照してください。
1.基本単位を「px」に変更する
Web デザインは、基本単位に「pixel(px)」に整合させる事が重要になります。ただし、初期設定の基本単位が「mm」などになっているので、「pixel(px)」基準に設定変更しましょう。
1.「Illustrator>環境設定>一般」を選択して「環境設定」ダイアログボックスを開きます。
※ なお、「環境設定」ダイアログボックスは「command(Ctrl)+ K」でも開きます。
2.「一般」メニューの「キー入力」を「1px」に変更します。
3.左側にある「単位メニュー」を選択し、設定できる4項目全てを「ピクセル」に変更します。
4.「ガイド・グリッド」メニューを選択して、「グリッド」を「10px」、「分割数」を「2」に変更しましょう。
※ これらの変更で、入力する数値やカーソル移動する時の基本単位が「px」になります。
2.Web デザイン向けのワークスペースへの変更
パネル、バー、ウィンドウなどの Illustrator の操作に使用するインターフェースを「ワークスペース」と呼びます。Illustrator CC では、あらかじめ Web デザイン向け「ワークスペース」設定が用意されています。Web デザイン向けの「ワークスペース」に変更しておきましょう。
1.「ウィンドウ>ワークスペース>Web」を選択します。
なお、個々のパネルについては「ウィンドウ」メニューから表示/非表示切り替えが可能です。
Adobe Illustrator CC(2014)
- 価格:2,180円(単体プラン)
- 4,980円(コンプリートプラン)
- CPU:Intel Pentium 4 または AMD Athlon 64 プロセッサー(Windows)
- Intel マルチコアプロセッサー(64 bit 対応必須)
- システム条件:Windows 7 Service Pack 1(日本語版)、Windows 8 または Windows 8.1(日本語版)
- OS X 10.7 Lion、OS X 10.8 Mountain Lion、OS X 10.9 Mavericks
- RAM:Windows 1GB 以上の RAM(32 bit)→ 3GB 以上推奨、2GB 以上の RAM(64 bit)→ 8GB 以上を推奨
- OS X 2GB 以上の RAM(8GB 以上を推奨)
- HDD 空き容量:2GB 以上の空き容量(Windows)
- ※ インストール時には追加の空き容量が必要になります
- ※ 取り外し可能なフラッシュメモリを利用したストレージデバイス上にはインストール不可
- 2GB 以上の空き容量のある HDD(OS X)
- ※ インストール時には追加の空き容量が必要になります
- ※ 大文字と小文字の区別されるファイルシステムを使用している場合や取り外し可能なフラッシュメモリを利用したストレージデバイス上にはインストール不可
- リリース:2014年6月18日
- バージョン:18.0.0
- ディスプレイ:1,024 × 768 以上の画面解像度をサポートするディスプレイ(1,280 × 800 以上推奨)
- HiDPI モードの Illustrator の表示にはモニターが 1,920 × 1,080 以上の解像度をサポートが必須
- GPU:Quadro K シリーズ、Quadro 6xxx、Quadro 5xxx、Quadro 4xxx
- Quadro 2xxx、Quadro 2xxxD、Quadro 5xx、GeForce GTX シリーズ(4xx、5xx、6xx、7xx、Titan)
- NVIDIA ドライバー:推奨ドライバー 335.23 以降(GeForce シリーズ)
- 332.76 以降(Quadro シリーズ)
関連リンク
- Illustrator で Web デザインをはじめよう!第1回デザイン前に行う環境設定と覚えておきたい基礎知識|Adobe Pinch In:http://www.adobe.com/jp/jos/pinchin/start/illustrator-web-design-01-preference-and-basic.html