• 2013年12月13日 カラーの16進数でのコピペを追記

Illustratorは昔っからそれなりに使っていたんですが、最近あんまりしっかり触ってなかったのと、Web用に使うという目的の違いで、いくつか操作しながらわからないことが出てきました。
「Fireworksにあったアレは、Illustratorではどうやるんだ。できないのか?」という視点で制作しつつ調べたことをメモ書きしていきます。
Illustrator自体は使えるという前提です。
随時追加、調査、修正予定。

初歩の初歩

紙じゃないのでピクセルベースで作成したい : 新規の時にプロファイル「Web」を選んでおく。
もう作っちゃった場合は、すべてのオブジェクトを選択して、「変形」パネルの「ピクセルグリッドに整合」にチェックを入れる。

パスじゃなくて、ピクセル表示のままルーペで拡大表示したい : 表示>ピクセルプレビュー を選ぶ。
精密に作った上でピクセル表示も確認できるので、FWよりもいい。

「ピクセルグリッドに整合」してると、位置が合わずに1px間が開いたり被ったりするところがある : 合わないオブジェクトを選択して、変形パネルか画面上のコントロールバーの「位置、サイズ」の数字をそれぞれ整数に直す。
数値の横にある上下ボタンか、矢印キーの上下を使うと楽。
そのとき、「基準点」は左上にしておく。

制作

アンチエイリアスを消したい : 効果>ラスタライズ で、アンチエイリアスにチェックをいれないでOKする。
実際にラスタライズされるわけではなくアピアランスなので、パスはそのまま残ってるし、効果を消すこともできる。
ラインをラスタライズしたら、パスでタイルパターンも描ける。

内側にシャドウを落としたい : 効果>スタイライズ>光彩(内側) をかけたあと、パスの変形>変形... を選ぶ。
「オブジェクトの変形」のチェックを外して(自動的に「パターンの変形」にチェックが入る)、移動の数値を変更すれば、光彩の効果のみを移動させることができるので、それで代用する。

ページ機能便利だったよな : マスタページは無理だけど、おおよそ「アートボード」で代用できる気がする。

16進数で色(#ffffffみたいな)コピペしたい : まず、調べたい色をスポイトで吸うかスウォッチから選ぶ。
その後、画面左のツールパネル下部にある線色・塗色をダブルクリック、あるいは「カラー」パネルを開いて、カラーチップをダブルクリックする。
そうすると、16進数のカラーコードをコピペできるカラーピッカーが表示される。
スウォッチパネルのチップをダブルクリックしても、思ったようなダイアログは出てこない(なぜ)。

スライス

スライスの数字とかが邪魔 : 我慢しましょう。

スライスが一緒に選択されてウザい : 表示>スライスをロック

Webレイヤーみたいなのはないの? : ないです。自力でスライス用レイヤーを用意する。
その場合、レイヤーのロック状態はスライスに作用するものの、Show/Hideは連動しない…。

スライスをコピペしたらただの矩形になった : スライスをコピーして、ペースト以外の貼付け(前面にペースト、背面にペースト、同じ位置にペースト)をすると、「スライスなのにスライスじゃない」という謎の状態になる?
その場合、コピペした「スライスだったもの」を選択した状態で、オブジェクト>スライス>解除 した後にあらためて オブジェクト>スライス>作成 をすると、もとに戻る。

書き出し

スライスを書き出すたびにダイアログが「書類」フォルダになっててウザい。書き出し先を覚えてくれない : 多分仕様。

書き出しフォルダの名前を変えたい : できません。

というわけで、滅びゆくFireworksを惜しみつつ、主な描画にはIllustratorを使おうと思っています。
概ねFireworksのような使い方は可能なものの、スライスについては、Fireworksのほうが断然便利ですね。PhotoshopもIllustratorも、スライスをぞんざいに扱っているというか(Illustratorに至っては、Web用に書き出しダイアログが退化している始末…)、非常に謎仕様なところが多いです。
スライスの概念の代用が、Photoshopの「画像アセット」なんでしょうか。はたして、十数年に渡るスライスに引導を渡すことができるか?


タグ:ノウハウ デザイン Fireworks Illustrator