Illustrator

webデザインに活用するゴーストボタンを作るときの文字をセンタリングする方法


みなさんこんにちは、mayukouです。
今回は、アピアランスに関するノウハウです!
ゴーストボタンなど、Illustratorのアピアランスで形状に変換ツールを使ったときに、
文字が少し中心からずれることがありました。

そこで、中心にセンタリングする方法をご紹介します。

Illustratorでのゴーストボタンなど形状に変換の使い方は、こちらをご覧ください
参考記事>>https://web-design-cafe.com/archives/1036

スポンサードリンク

デフォルトで作ると、少し上の方にずれるのがわかりますね。

164-ghost

文字を少し下に移動したい場合の対処法です。

アピアランスパネルを出しましょう

ボタンオブジェクトを選択します。
アピアランスの「線」が選択された状態で、
アピアランスパネルの新規効果ボタンをクリック。

165-appearance

パスの変形>変形

 

を選択します。

 

パスの変形で、線を上下に動かします

 

166-appearance

変形効果パネルが出てきますので、

167-panel

垂直方向>-1px

とします。

すると、線が少し上に動いて、
うまくセンタリングできます。

168-button

これで、完成です!

最後に

いかがでしたか?ゴーストボタンの文字をセンタリングする方法をご紹介しました。
細かいところですが、アピアランスの便利な機能、
よりうまく活用できるといいですね!
ぜひ試してみてください!

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めて約4年が経ちました。ここでは、仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Web Design

    webデザインのトレンドと取り入れよう!デザインの参考になるwebリソース 〜海外編〜

    みなさんこんにちは、mayukouです。あっという間に土曜の半日が…

  2. Photoshop

    表現の幅が広がる!photoshopのパスでラインを引く方法

    味のあるイラストを描きたい時に。Illustratorでラインを描…

  3. illustration

    簡単!Illustratorでキラキラ星を作る方法

    みなさんこんにちは。mayukouです。だいぶ秋らしくなってきまし…

  4. Tutorial

    ワイヤーフレームがプロ仕様に!素敵なグラフィックスタイル「WireMagic」

    みなさんこんにちは、mayukou です!目薬が欠かせない今日…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


スポンサー

instagramもやっています

最近の記事

  1. 一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作…
  2. モバイルフレンドリーなwebデザインするときにおすすめなツー…
  3. かすれや濃淡が出る!かわいい手描き感のあるブラシのご紹介♩(…
  4. 今や欠かせない存在!iPad Pro “9.7を…
  5. iPad Proを液タブに♫Astropad Studioは…

facebook更新中!

  1. Mac

    仕事が早く終わる!集中力を持続して生産性アップできるPomodoroのアプリがオ…
  2. Web Design

    自分の頭をデザイン脳に!CSS nite fukuoka vol.8に参加しまし…
  3. illustration

    混色できる水彩画テイストの表現が可能なipad proアプリ!Tayasui S…
  4. CSS

    一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作る方法
  5. Web Design

    CSS nite in FUKUOKA vol.6に行ってきました。
PAGE TOP