初心者WEBデザイナー必見!イラレ書き出し作業が一括一瞬簡単きれいに!魔法の設定と手順!

こんにちは管理人のかわうそ29です。
イラレでのスライス作業って本当に時間かかりますよね。こんな単純作業に何でこんなんに時間がかかんねん!ってお怒りのあなたも、生産性向上に熱心なあなたも、この記事読めばハッピーになれます!これ読めば今まで30分かかっていたスライスの書き出し作業が2分に短縮できます。設定と手順理解含めて5分もかからないと思います。現場で使っているテクニックです。しかもめちゃくちゃ簡単です。

かわうそが気になる人はこちらもチェックしてみてください

現在コーダー兼エンジニアとして40サイト程の自社ECサイトを運営するIT企業で働いています。未経験転職後入社8か月で社内サイトリニューアルプロジェクトのリーダーになり、そのまま役職が主任になるも、奮闘の日々です。

こんなん作ったり

youtubeやったりしてます

  • 実際に魔法の処理手順をやってみよう
  • 次回はちょっとしたコツを紹介したい
  • 手順

    初期設定

    まず初期設定から進めます。といってもそんなに難しいことは全くなく、2クリックで済みますのでご安心ください。この設定内容に関しては、別記事で詳しく説明していきたいと思っています。ざっくり説明しておくと、この設定に関しては、書き出し時にスライス範囲より1pxサイズが大きくなって書き出されてしまうという問題を未然に防ぐために必要なものです。結論から言うと、オブジェクトの座標が整数でなく小数点単位である場合、オブジェクトの大きさが整数でなく小数点単位である場合、1px書き出しサイズが大きくなります。説明の優先度、問題の種類としてこの記事のテーマとは別の記事で紹介したいと思うので、とりあえずこうするものだと設定して下さい。

    ピクセルプレビュー

    f:id:may29kh:20181021220022j:plain

    メニューコマンドの『表示』からピクセルプレビューを選びクリックしてください。これでベクターデータでも、ラスターデータのようにドット単位で標示してくれるようになります。これはオブジェクトの座標位置を整数に(つまりピクセル単位のグリッド=ドット単位)に整合させるために重要です。書き出し時の1pxを防ぐための設定の1つです。

    ピクセルグリッド整合

    f:id:may29kh:20181021220558j:plain

    メニューコマンド右端にあるボタンもクリックしておいて下さい。これはオブジェクトを作成したときや画像やテキストを配置したとき、拡大縮小・移動をした際に、座標を整数にしてくれる機能です。つまり、座標位置をピクセルグリッドに自動で整合してくれるんです。ということはこのボタンにチェックさえ入れておけば、ピクセル単位のグリッドに勝手に整合してくれるんです。とりあえずクリックしてチェックしておいてください。

    キー入力 1px

    f:id:may29kh:20181021223516j:plain

    メニューコマンドの『表示』→『環境設定』→『一般』を押すと、上の画像の画面が開きます。キー入力が1px(整数)になっているか確認してください。ここが0.5pxとかになっていると、意図せぬ操作で(拡大・縮小・移動)で小数点単位の大きさや座標位置が発生してしまう原因になります。デフォルトが1pxなので、特別設定をいじっていなければ問題ないはずですが、念のため見ておきましょう。

    これで初期設定は終わりです。続いてショートカットキーの登録を進めていきます。

    ショートカット登録

    目的は効率化のみです。頻繁に使用するキーはショートカットに登録することで、作業はスピーディになります。特にメニューコマンドから階層深い場所にある選択範囲からスライス作成のようなコマンドは、ショートカットに登録することで圧倒的に作業時間を短縮できます。設定自体も簡単に終わりますので、迷わず設定して使いこなしましょう。

    ショートカット登録方法

    『ctrl+shift+alt+k』でショートカット登録画面が開きます。

    選択範囲から作成

    スライス範囲を選択範囲から作成できるコマンドです。メニューコマンドから『オブジェクト』→『スライス』→『選択範囲から作成』で設定できます。その名の通り、いちいちスライス範囲をドラッグしなくても、選択したオブジェクトの選択範囲から自動生成してくれるので、必須です。僕は『ctrl+shift+alt+y』で登録してます。

    f:id:may29kh:20181021231644j:plain

    このように選択範囲から自動でスライス範囲を作成してくれます。

    解除

    これはスライス解除のコマンドです。間違ってスライス範囲を作成してしまった場合、スライスのパスを選んで消したり、レイヤーから選んで消したりというのは時間の無駄です。スライス範囲を選択している状態で、このスライス解除をしましょう。『オブジェクト』→『スライス』→『解除』で設定完了です。僕は『ctrl+shift+alt+I』で設定してます。

    スライスオプション

    これ、重要です。スライス範囲を選択している状態でこのショートカットを使うと、スライス範囲に名前をつけることができます。つまり、書き出し時にスライス名がファイル名となって書き出されます。このショートカットのメリットは2つあります。1つ目は時短です。スライス範囲の命名は、書き出し作業画面でのスライス範囲ダブルクリックで可能です。しかし、書き出し作業画面は動作が重たくなりやすい点、画面の拡大や縮小がしづらく、画面移動に時間がかかる点、そもそもダブルクリック自体がしんどいし、時間がかかる点を考慮すると、絶対に通常画面で事前に設定しておいたほうが時短にります。そのための設定します。『オブジェクト』→『スライス』→『スライスオプション』から設定できます。僕は『ctrl+shift+alt+o』で設定してます。

    f:id:may29kh:20181021233116j:plain

    この画面が開くので、スライス範囲に名前を付けておきましょう。

    テキスト選択

    これ、重要です。メニューコマンドの『選択』→『オブジェクト』→『全てのテキストオブジェクトを選択』で登録しましょう。このショートカットを使うと、アートボード上にある全ての文字要素を選ぶことができます。つまりこの状態で『文字に最適』のラスタライズをかければ、テキスト情報へのラスタライズが完了します・・・凄すぎる・・・僕は『ctrl+shift+alt+t』で登録してます。textだからtです。

    ラスタライズ

    ラスタライズも登録しておきます。メニューコマンドの『効果』→『ラスタライズ』でOKです。ラスタライズには2種類あります。『アートに最適』『文字に最適』です。オブジェクトはアート、テキストは文字でラスタライズしましょう。僕は『ctrl+shift+alt+r』で登録してます。rはラスタライズのrでもあります

    f:id:may29kh:20181021234104j:plain

    この赤の枠線で『アート・文字・なし』を選べます。

    web用に保存

    これも結局よく使うので登録しておきましょう。メニューコマンドの『ファイル』→『書き出し』→『web用に保存』でOKです。僕は『ctrl+shift+alt+e』で登録してます。

    スライス選択ツール

    これもよく使うので登録しておきましょう。ツールバーの『スライス選択ツール』です。僕は『shift+l』で登録してます。ちなみに、『shift+k』はデフォルトで『スライス作成ツール』です。隣のキーなので覚えやすいですよね。

    以上で設定は完了です。勘のいい方ならお気づきかと思いますが、僕は『ctrl+shift+alt』をスライス用の基準に設定しています。もちろん作業の流れも考慮して、割り振っています。次は実際の手順と流れを教えます。

    実際に魔法の処理手順をやってみよう

    設定が完了したのでやってみましょう。まずはどういう作業を行うか流れを説明します。その後、実際のイラレ上だとどんな感じの動きになるのかを伝えていきたいと思います。一緒に魔法をかけようぜ!!

    流れ

    1. 『ctrl+shift+alt+t』で全テキストオブジェクトを選択
    2. 『ctrl+shift+alt+r』で『文字に最適』のラスタライズを適用
    3. 『ctrl+2』で選択されている全テキストオブジェクトをロック
    4. 『ctrl+a』でロックした全テキストオブジェクト以外のオブジェクトを全選択
    5. 『ctrl+shift+alt+r』で『アートに最適』でラスタライズ
    6. 『ctrl+shift+alt+y』などを使用し、スライス範囲を作成していく
    7. 『ctrl+shift+alt+o』でスライス範囲を命名
    8. 『ctrl+shift+alt+e』で『web用に保存』を実行し、書き出し場面へ移動
    9. 書き出したいスライス範囲をshiftを押しながら連続で選択し、書き出す

    以上です。めっちゃ簡単ですよね??たぶん本当に2分どころか慣れたら20秒でできます。じゃあ実際にやってみましょう。

    ●いざ魔法を実行!

    ①まず全部のテキストオブジェクトだけを選択します。僕なら『ctrl+shift+alt+t』です。

    f:id:may29kh:20181022003223j:plain

    ②次に『文字に最適』のラスタライズを適用します。僕なら『ctrl+shift+alt+r』です。

    f:id:may29kh:20181022003223j:plain

    ③テキストオブジェクトが選択されているはずです。そのまま『ctrl+2』で選択されている全テキストオブジェクトをロックしてください。(ctrl+2で選択範囲をロック、ctrl+alt+2で全ロック解除がデフォルトショートカットです)ロックの代わりにctrl+3で表示を隠してあげてもOKです!(ただし、書き出し時にctrl+alt+3で表示させてあげる必要があるので、ロックのほうが便利です)

    『ctrl+a』でロックしたテキストオブジェクト以外のオブジェクトを全選択してください。ctrl+aは全選択コマンドです。つまり、テキストオブジェクトが全てロックされているので、ctrl+aではテキストオブジェクト以外の全オブジェクトが選択されます。

    f:id:may29kh:20181022003927j:plain

    『ctrl+shift+alt+r』で『アートに最適』でラスタライズしましょう。

    f:id:may29kh:20181022004144j:plain

    『ctrl+shift+alt+y』などを使用し、スライス範囲を作成していきましょう。ラスタライズの後にスライス範囲を作成するのにも意図があります。そんなに大事なことではないのですが、スライス範囲が変わってしまう可能性があるので。このショートカットだけで全てのスライス範囲を簡単に作成できるわけではありません。その他にスライスがやりやすい方法もまた別記事でまとめます。

    f:id:may29kh:20181022004641j:plain

    『ctrl+shift+alt+o』でスライス範囲を命名しましょう。この時に、先に設定した『ctrl+l』を使えば、『スライス範囲を選択』に切り替えることができます。これでさらに時短を加速させましょう。

    f:id:may29kh:20181022004426j:plain

    『ctrl+shift+alt+e』で『web用に保存』を実行し、書き出し場面へ移動しましょう。この画面になると、重くなりやすいですし、通常の操作画面よりも圧倒的に操作し辛くなり効率が落ちます。万が一作業途中にキャンセルを押してしまったら、全てのスライスオプションや画像拡張子の設定がパーになります。注意するとともに、事前に⑦の項目を処理しておくことを忘れないでおきましょう。

    ⑨書き出したいスライス範囲をshiftを押しながら連続で選択し、書き出す。複数選択できるので、これは利用しない手はないです。1枚1枚書き出すなんでありえないです。必ず複数選択して、一気に書き出しましょう。

    f:id:may29kh:20181022005240j:plain

    ぜひ試してほしい。

    いかがでしたか。最初は難しく感じるかもしれませんが、慣れれば一瞬で終わりますし、作業量が多ければ多いほど効果を感じられるはずです。気づいた方もおられるかもしれませんが、僕なんかは、『ctrl+shift+alt』+『o・i・y・t・r・e』とスライスで使用するショートカットキーをエリアで決めることで、覚えやすくかつ流れ作業でできるように仕組んだりしています。ぜひ試して使いこなして下さい。

    次回はちょっとしたコツを紹介したい

    次回は、今回書ききれなかったちょっとした書き出しのコツを伝えていきたいと思います。今回さらっと触れた1pxずれてしまう問題にについてもアプローチします。ぜひ読んでみてください。

    フォローする