Illustrator(ai)のインストール

体験版、もしくはAdobe Createve Cloud(月額5000円で最新のAdobe製品が使いたい放題のサブスクリプション)に登録してダウンロードする

iPhone用アートボードの設定

  • 幅と高さは、iPhone4Sの解像度である「640 x 960」を指定
  • 単位は、IOSでの指定に揃え、ポイントを指定(1px = 72分の1。基本的に、1pt = 1px だが、retinaの場合は、1pt = 2p)
  • カラーモード:RGB、ラスタライズ効果:スクリーン(72ppi)
  • 「新規オブジェクトをピクセルグリッドに整合」にチェック
    • オブジェクトの垂直・水平方向のパスを、ピクセルのグリッドに一致させる

環境設定

単位・一般

  • 全てptに統一。この項目の「一般」とは、矢印キーを使ってオブジェクトを移動するときの移動値の設定

ガイド・グリッド

-> 設定後、「表示」> 「グリッドを表示」を選択

カラー設定

  • 「編集」>「カラー設定」>「設定:Web・インターネット用-日本」を選択する
    • iPhone、/iPadを含む、Webを表示するデバイスは、一般的にRGBカラーである
    • カラー設定を行うことで、製作用のMacと、iPhoneとの色の誤差を少なくする

スライスと書き出し

  • スライスによる書き出しは、4つの方法がある
    • スライスツール(Shift+K)でドラッグして分割
    • 選択中のオブジェクトから作成する
    • ガイドから作成する
      • ガイド位置の調整は、選択ツールでガイドを選択し、ツールボックスの[選択ツール]をダブルクリック > [コピー]などを行うと正確に作成できる
    • 選択範囲から作成する

  • スライスにつけた名前が、書きだす画像のファイル名となる
    • 「ファイル > Web用に保存」 [スライス選択ツール] > [スライスオプション] > 任意の名前を選択
  • ファイル形式は、基本的に「PNG-8」。そのほか、減色アルゴリズムは初期設定のまま

  • スライス専用レイヤーを作成する
    • スライスすると、塗りと線の設定の無いオブジェクトが作成され、作業が妨げられてしまうので、別レイヤーで集中管理しておく。

その他

  • ウインドウ > ワークスペース > 「Web」を選択
  • ウインドウ > アプリケーションフレーム を選択
  • 「⌘ + R」で、「定規」を表示(iPhone App同様、アートボードの左上角(X=0,Y=0)が原点になっていることを確認する)
  • デザインは、整数による数値入力で行う
    • ツールボックスのアイコンをダブルクリックしたり、ツールを選択してアートボードを[option]キーを押したままクリックすると、数値入力を行うダイアログが開く。配置位置や大きさのヘン国などは、コントロールパネルか、「変形」パネルを使う
  • ピクセルプレビュー
    • 「表示 > ピクセルプレビュー」を選ぶと、オブジェクトはピクセル画像として書きだした時の状態で表示される。プレビュー状態のまま作業できる為、端数がでてぼやけてしまったオブジェクトをピクセルに整合させることなどが可能。ピクセルプレビュー中は、オブジェクトはピクセルグリッドに吸着されてレイアウトしやすくなり、600%以上の表示倍率にすると、ピクセルグリッドが表示されて位置合わせの確認などがしやすくなる

プラグイン

その他参考サイト



blog comments powered by Disqus

Categories

Tags

iPhone Sales

Books

Pinboard