知らなかった…イラストレーターで等間隔にブロック分け

こんにちは。

デザイナーの皆さんイラストレーター使ってますか?

XDやFigmaなど新しいデザインツールが普及していますがまだまだイラストレーターでWEBデザインやられてる方、多いのではないでしょうか。

今回は自分が最近知ったイラストレーターの機能をご紹介します。

等間隔配置

まずはこの図をごらんください。

WEBでよくみるレイアウトです。
この画像を見るとすぐ気づくのが…

「隙間A」と「隙間B」の幅が違いますよね。
デザイナーならどうするか?

これまでの揃え方

ブロック間を同じ幅にイラストレーターで揃えたい場合、まあ方法はいくつかありますが一番メジャーな方法はこれじゃないでしょうか

決まった数値を「 シフト + 矢印 」同時押しでピコピコ押す!!

たとえばブロックしたのマージンボトムが80pxなら「 シフト + 矢印 」同時押し8回ですよね。

ただし!この方法で揃えるには一旦ブロック間の隙間を0にしてそれぞれをピコピコ落としていかなければなりません。

つまり…

一旦こうするんですよね。 しかもイラストレーターはフォトショのように要素感の距離をリアルタイムで図ってくれるような機能がないので目で合わします。より丁寧なひとなら「command + Y」で校正モードにしてピッタリくる位置を見極めているのではないでしょうか。

自分もいままでこの方法以外で揃える作業をしたことがなかったので疑いもしなかったんですが、なんともっともっと楽な方法がデフォルトで実装されていたのです…

それはここ!!

え、なにこの数字のとこ?

整列ツール内の「等間隔に分布」って頻繁に使う割にこの数字の存在しってましたか?

普通につかってるだけでは表示されません、複数要素を選択後、基準となるオブジェクトをさらに選択したときにだけ現れます。

↑ この状態

新しい揃え方

それではこの機能を使って先程のブロック間を修正してみましょう。

はい、あらためてずれていますね。

この状態でブロック同士を選択します。
さらに基準となるオブジェクトを選択、今回は一番上のオブジェクト。

と、この状態で先程の数字部分に任意の数字を設定。

そのまま「縦」方向の等間隔配置ボタンを押すと….

一発でそろいました。

どうでしょうか!
小さい作業時間ではありますが毎回、ボタン同時押しを続けるのは大変ですよね。

塵も積もれば…ということで日々のデザイン作業で役立ちそうなおすすめ機能でした。

■□■□■□■□■□■□■□■□■□■□

福岡のホームページ制作・運用は
株式会社レッドキリン

営業時間:平日9:00〜18:00

●福岡オフィス
〒810-0042
福岡市中央区赤坂1-12-6 赤坂Sビル2F
TEL:092-726-5550 FAX:092-726-5558

●宮崎出張所
〒880-0001
宮崎県宮崎市橘通西3-10-32
宮崎ナナイロ東館8FATOMica内

メールでのお問合せ
ホームページ制作実績
会社案内

■□■□■□■□■□■□■□■□■□■□

contact

ホームページ制作に関することなら、
バナー1個からでもお気軽にご連絡ください。

お電話でのお問い合わせ

<福岡本社・宮崎サテライトオフィス共通>
平日9:00〜18:00まで。営業・セールス目的のお電話は固くお断りいたします。

092-726-5550 092-726-5550

メールでのお問い合わせ

ご相談をご希望の場合、まずはお問い合わせフォームよりご連絡ください。
確認後、担当者よりご連絡させていただきます。

お問い合わせフォーム

会社案内ダウンロード

社内で検討されたい方のために、弊社の特徴や実績、会社概要などをまとめた会社案内をご用意しています。ご自由にダウンロードください。

ダウンロードはこちら
yahoo!japanプロモーション広告

当社はYahoo!プロモーション広告の代理店です。
(福岡県福岡市中央区赤坂)

採用関連の電話営業やセールス目的でのお電話は業務の妨げとなりますので固くお断りいたします。
一度電話口でお断りした企業様は着信拒否登録をしております。ご了承ください。