doors doors

Illustrator|整列パレットを活...

  • HOME
  • TRY
  • Illustrator|整列パレットを活用する

Illustrator|整列パレットを活用する

Adobe Illustrator|整列パレットを活用する

イラストレータにアートボードができて、特にWEBデザインをするには便利な仕様です。そして、アートボードを基準にすることで「整列」が格段に使いやすくなっています。

WEBデザインを始めるための準備

「整列」パレットの話の前に、少しだけWEBデザインをIllustratorでおこなう際、気をつけたいことを説明します。
ドキュメントカラーモードを「RGB」にすることはもちろんですが、意外とされていないのが「スナップオプション」です。(説明はAdobe Illustrator2021です。名称やツールがバージョンによって違うことはご了承ください)

最近のIllustratorにはプロパティパレットがあり、そのパレットで大まかな設定が可能です。「コントロール」と言われるバー内にもありますが、見やすさからプロパティパレットをよく使います。
まずは、ドキュメントの単位を「ピクセル」にすることです。この単位をピクセルにしないとオブジェクトを作る際、必ずと言ってよいほど端数がでます。WEBデザインにおいて端数はなるべく避けたいことです。
そしてもう1ヶ所が、オブジェクトを何も選択していない状態で「スナップオプション」の右側にあるアイコン「ピクセルにスナップ」をオンにします。
ピクセルにスナップさせるとオブジェクト同士の位置合わせがうまくいかないこともあります。その場合はオン・オフを切り替えて対応します。逆にスナップさせることで、不用意にすき間があくなどを防止できます。

プロパティパレット

アートボードに対して「整列」させる

タイトル、本文を整列させる

今まではガイドラインに頼ったり、見た目で合わせていましたが、「整列」パレットの「アートボードに整列」を使えば、センターに合わせることは容易です。
応用として、頭揃え(左側)にして任意の位置へ配置したい、といったことも「整列」パレットと「移動」を使えば、より正確に配置できます。

整列と移動で早く、正確に

この時、テキストの段落の揃え(左揃えや中央揃えなど)は関係ありません。選択ツールでオブジェクトを選択した状態で、整列パレットの左揃えをクリック(整列はアートボードにしておく)。アートボードの左辺へオブジェクトが移動します。
この状態のまま、キーボード「enter」キーを押すと「移動」パレットが表示されるので、移動距離を入力して確定します。

関連記事

WEBデザイン|PhotoshopかIllustratorか、はたまたXDかという議論

2大巨頭のPhotoshopとIllustrator、そこへ参入する新生XD この課題はアプリケーションの習熟度やコーディングを受け持つエンジニアの視点から検討...

【CSS】比率指定にも使える!heightとpadding、marginの計算方法

前回、calc計算で100vwを基準にすれば画像や要素の比率が維持できるというお話をしました。 要素のアスペクト比(縦横比)を維持する方法 しかしPCとなると話...

Illustrator|画像効果

Illustrator|画像に可逆的効果を与える WEBデザインや印刷物デザインを行う場合にIllustrator(以下、AI)を使いますが、画像に効果を加える...

WEB:企業サイト、PRサイト、ランディングページ、バナー制作やCMS構築、モーショングラフィックス、VP、動画制作、パンフレット、ポスター、チラシ、DMなど制作から印刷・納品まで。 お気軽にお問い合わせください。

Illustrator|3Dとマテリアル

イラストレータの3Dが復活! しかもパワーアップして戻ってきました!  バージョ...

Dreamweaver|ライブラリのリンク

状況 Dreamweaverのライブラリを使用する場合で、トップページ(inde...

Brackets|サポート終了からその後・・・

Brackets|サポート終了からその後 結論からお伝えすると、今は「Brack...

Brackets|サポート終了

Brackets|突然、告げられるサポート終了 参りました・・・2021年9月を...