Illustrator

webデザインのトレンド!文字によって変形するゴーストボタンをイラレで作る方法


こんにちは、mayukouです。
九州は梅雨入りしました〜。今日は天気も良く涼しいですが皆様いかがお過ごしでしょうか。
さて今回は、文字によって変形し、伸縮の効くゴーストボタンの作り方をご紹介します。

ゴーストボタンは、今ではいろんなサイトで使われていて、よく目にするようになりました。
見た目もスッキリした印象で、サイトをちょっとおしゃれな感じに仕上げられるので
結構デザインに使っています。

スポンサードリンク

ゴーストボタンとは?

ゴーストボタンとは、背景色は透過し、囲み線だけで表現されるボタンです。

普通だったら、四角ツールで描いた四角の中に文字を入れて終わり、となりますが、
それだと、文字量によって手動で四角をリサイズしなければいけません。
しかし、アピアランスを使うことで、伸縮し文字を入力するだけで四角も伸縮してくれる方法があるのです。
そう、テキストに応じて変形してくれるんです。

26-ghostbtn

 

1.イラレを開き、文字ツールで文字を入力します

27-text-ghost

2.アピアランスパレットを出します

「ウィンドウ」メニュー→「アピアランス」をクリック

3.アピアランスで新規線を追加します。

28-apearance

(そうすると普通は文字が太くなったようになります)

「新規効果を追加」ボタンをクリックし、「形状を変換」→「長方形」を選択

29-choho

「値を追加」にチェックを入れ、縦横の余白となる値を記入します。

30-padding

プレビューボタンにチェックを入れ、四角を確認しましょう。

ゴーストボタンのようにできているのがわかります。

好みによって、角丸四角形や、丸にすることもできます。

 

最後に

いかがでしたか?文字によって変形するゴーストボタンをイラレで作る方法をご紹介しました。
ぜひ、試してみてください。

投稿者プロフィール

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

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

関連記事

  1. Tutorial

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

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

  2. Photoshop

    Photoshopのウィンドウを見やすく!ワークスペースを工夫してみよう

    こんにちは、mayukouです。なんだかすっきりしない天気です。九…

  3. Illustrator

    面倒じゃない!簡単なIllustratorでシームレスなパターンの作り方

    みなさんこんにちは、mayukouです。デザインを作る上で、背景がシ…

  4. Photoshop

    便利!Photoshopで描いた絵をIllustratorで使えるパスに変換する方法!

    みなさんこんにちは、mayukouです。今回は、Photoshopで…

  5. Illustrator

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

    みなさんこんにちは、mayukouです。今回は、アピアランスに関す…

コメント

  • コメント (0)

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

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

CAPTCHA


スポンサー

instagramもやっています

最近の記事

  1. 現像すると写真が生き生きする!Macの写真アプリが素敵
  2. 売り上げアップを実感♪目から鱗の本「どうすれば売れるのか」を…
  3. 購入して半年♪iPad Proで描いたイラストをご紹介。(主…
  4. ブロガーの味方?高級コンデジ、Panasonic LX9を買…
  5. デザインが成功するテンプレがここに。「なるほどデザイン」を読…

facebook更新中!

  1. Web Design

    今後のデザインのトレンドとして注目!コンテンツファーストのサイトをまとめてみた
  2. Illustrator

    簡単!Illustratorで写真の淵をぼかす方法
  3. 日記

    2015年の振り返りと今年の抱負
  4. 写真

    現像すると写真が生き生きする!Macの写真アプリが素敵
  5. Photoshop

    点線もかける!Photoshopでラインを引く方法を新たに発見(ストローク機能)…
PAGE TOP