doors doors

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

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

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

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

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

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

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

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

プロパティパレット

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

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

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

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

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

関連記事

AfterEffectsでボーリングやってみよう

最近無性にボーリングがやりたくなる自分です。昔のようにパワーがないので、行く人に声かけて、グループ分けして、賞品考えて… なんてことを考えると急に億劫になってし...

doors 1f

【会社概要】ところでデザインスタジオドアーズって何者?

はじめまして。noumyonと申します。最近の流行りにのっかり、弊社もSNSやオウンドメディアに力を入れていこうということになりましてドキドキしながら投稿してお...

WEBデザイン|PhotoshopかIllustratorか…

WEBデザインをするならPSかAIか、という問題(その後・・・) アプリケーションに慣れているかということが最大の要因になると思いますが、Illustrator...

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

Illustrator|3Dとマテリアル

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

Dreamweaver|ライブラリのリンク

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

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

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

Brackets|サポート終了

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