Adobe Illustrator CC は、毎年6月に CC 2014 → CC 2015 のようにメジャーアップデートされますが、2016年6月は CC 2016 ではなく「CC 2015.3」というマイナーアップデートでした。
しかし、Web制作者にとっては嬉しい機能も追加されたため紹介します。
アセットの書き出し
Photoshop には随分前から付いていましたが、ようやく Illustrator にも付きました。
アセットの書き出し方法はいくつかあり、
- 書き出したいオブジェクトやグループを「アセットの書き出し」パネルにドラッグする
- 書き出したいオブジェクトやグループを選択してアートボード上で右クリックし、[収拾 (書き出し用)]メニューを選択する
- 書き出したいオブジェクトやグループを選択してアートボード上で右クリックし、[選択範囲を書き出し…]メニューを選択する
- 書き出したいオブジェクトやグループを選択し、メニューバーの[ファイル>選択範囲を書き出し…]を選択する
パネルから書き出し
1 か 2 の場合、[アセットの書き出し]パネル内に、ドラッグしたり選択していたオブジェクトが追加されていきます。
サムネイルの下の[アセット 1]など部分をクリック(ダブルではなくシングルクリック)するとファイル名を変更できます。
[+ スケールを追加]をクリックし、2x や 3x の書き出し設定を追加し、[書き出し…]をクリックするとフォルダーを選択し、書き出すことができます。
ダイアログから書き出し
3 か 4 または[アセットの書き出し]パネルの[書き出し…]の左にある小さなアイコンをクリックすると[画面に書き出し]ダイアログが表示されます。
3 か 4 の場合と、[書き出し…]の左にある小さなアイコンをクリックした場合の違いは、前者は選択したオブジェクトが既にチェック済みの状態になります。
このダイアログで、[先頭文字列]に文字を入力すると、ファイル名の先頭に特定の文字列を追加することができます。
たとえば、[選択を解除]ですべての選択を解除し、グローバルナビゲーション用の画像だけにチェックを入れてから[nav_]と入力するといった使い方ができそうです。
書き出しは PNG や JPEG だけでなく、SVG も対応しています。
[フォーマット]の横にある[Android]ボタンをクリックすると、ファイル末尾に hdpi、xxhdpi などの文字列を追加することもできます。
ピクセルが整数値でないとぼやける場合も
[変形]パネルの X, Y, W, H の値が整数でないと、書き出した時にぼやける場合があります。
アセット書き出しするアイテムの座標がちゃんとピクセルグリッドに整合してないと、やっぱり書き出し後の画像にも影響するみたい pic.twitter.com/3naiJXgEXX
— 高橋としゆき (@gautt) 2016年6月21日
[新規]ダイアログや[変形]パネルで[ピクセルグリッドに整合]にチェックを入れる、ピクセルグリッドにスナップさせるなどしておいたほうが良さそうです。
マスクがかかっている場合は注意
たとえば、縦長の長方形の上に横長の長方形を配置し、command+7 でマスクしたとします。
この場合、書き出すとマスクされて不可視になっている青い領域まで含まれた画像になってしまいます。
マスクを使った場合は、
- パスファインダーパネルで[合流]をクリック
- スライスする
- Photoshop でバッチ処理[イメージ>トリミング]
などする必要がありそうです。
ライブ多角形(2015.2から)
Affinity Designer では既におなじみでしたが、楕円形ツール→パックマンの形などの変形がドラッグでリアルタイムにできるようになっています。
多角形の角の数の増減、直線の延長などもできます。
スマートガイド(2015.2から)
Photoshop と同様に、等間隔にスナップするようスマートガイドが表示されます。
ライブ多角形、スマートガイドなどの新機能については以下のページで紹介されています。
ライブシェイプの操作 | Adobe Illustrator CC tutorials
不具合について
Illustrator CC(2013)の頃からある、有名な回転バグ(回転ツールで 90° や180° 回転させると、微妙に歪みが発生する)は直っていませんでした。
このバグについて: Illustrator CCの回転が雑な件について – saucer
対処用スクリプト: 3flab inc. | #Illustrator の左回転/左右反転すると形状が乱れるバグを回避する
Mac で、Illustrator をアクティブにすると日本語入力が勝手にオフになる不具合も直っていませんでした。
今後のWebデザインカンプ制作はIllustratorへ?
現在、Webデザインカンプ制作で最も高いシェアのアプリは Photoshop で、最近は Sketch が伸びていると感じていましたが、Sketch 4.0 からはアップデートをうける場合年間99ドル支払わなければいけなくなりました(料金を支払わないとアップデートはされませんが、古いバージョンを利用し続けることは可能)。
Sketch ユーザーの方が今後もアップデート料金を払って使い続けるのか気になったのでアンケートをとってみたところ、「料金を払って利用する」と回答した方は 27% しかいませんでした。
Sketchユーザーの方へ: Sketch が 4.0 から年間99ドルのサブスクリプションになることを予定していますが、今後も料金を払って利用する予定ですか?
Twitter Web の投票機能でご回答ください。— なつき@スマフォ講座やります (@Stocker_jp) 2016年6月9日
Illustrator はスマートフォン用のベクターアイコンも作成しやすいですし、複数アートボードには昔から対応していますし、標準でアセットパネルが付いて、2x、3x や SVG もまとめて書き出せるようになったため、今後はWebデザインカンプ制作はもちろん、スマートフォンアプリの制作でも広く使われるようになるのでは、という予感がしています。
追記: 今後どのアプリを利用するかのアンケート
Twitter で、今後Webデザインカンプでどのアプリを利用するかのアンケートを実施しました。
アンケート: 今後、Webデザインカンプ制作でどのアプリを利用する予定ですか? (Twitter Webのアンケート機能でご回答ください。)
— なつき@スマフォ講座やります (@Stocker_jp) 2016年6月22日
結果は Photoshop が最も多かったものの、Illustrator を選んだ方も 22% いました。
「その他」は Adobe XD というリプを頂きました。