マウスオンでテキスト色だけが変わるボタンの作り方
こんにちは。
初心者も無料で魅力的なアメブロは作れます！
０円アメブロカスタマイズのペカルマンです。
先日、グロバルメニューの見本という事で記事を書きました。
マウスオン時にテキスト色だけが変わるボタンの作り方です。
通常時が
マウスオン時は
こんなボタンを作る際の１番のポイントは
テキストの位置が同じである・・・・という事です。
まぁクリックした事をわかりやすくする為に、若干位置をずらすという方法もあるんですが
今回はテキスト位置が同じ、テキスト色だけが変わるボタンの作り方です。
当ブログではおなじみ（笑 の 画像加工ツールPixlr で作ってみます。
【１】
上記リンクよりアクセスして頂き、
画面中央窓を「×クリック」で消します。
【２】
画面上部の「Language｣⇒「日本語」の順にクリック
【３】
「新しい画像を作成」をクリック
【４】
新しい画像のサイズ（幅、高さ）を半角数字で入力します。
今回は例としてこのようにしました。数値を入力後「OK」をクリック
【５】
①のカラーセレクターで色を選択後、②の「ペイントバケツツール」をクリック。
色を付けたい画像上で左クリック。
【６】
このように単色のボタン素材が出来ました。
*今回は例として、単色ボタンにしていますが、ここは色んなボタン素材でも
応用できます。
【７】
サイドツールバーより「テキストツール」を選択（タイプツール）
【８】
テキストを入れたい画像上にカーソルを合わせてクリック。
【９】
テキストの詳細を入力する窓が出ますので
②のフォント（字の種類）を選択
③でテキストのサイズを選択
④スタイル（レギュラーか太字）を選択
⑤色を選択。
①にプレビューが表示されるので、よければ「OK」をクリック。
【１０】
こんな感じです。
*この時、テキスト位置はあまり気にしなくていいです。
【１１】
移動ツールを選択後、入力した文字にカーソルを合わせて
左クリックしたままマウス移動で、文字を移動できます。
【１２】
文字位置がよければ、「ファイル」⇒「保存」で保存しておきます。
（PNG、JPEG、GIFどれでもいいですが、PNGで＾＾）
保存終了後、注意１の部分、レイヤー窓内の テキストのレイヤーが青色表示
されているのを確認し、「テキストツール」をクリック。
*テキストのレイヤーが青色になっていない場合は、レイヤー窓内のテキストのレイヤーを
１回クリックすれば、青色表示になります。
【１３】
先ほど書いたテキスト上でクリックしてください。
するとこのように、先ほど書いたテキストの修正窓が出ます。
色の箇所をクリックし、カラーセレクターで色を変更します。
【１４】
するとこのようにテキスト色だけが変わりました。
この画像も保存します。
これで、【１２】 【１４】の操作で２枚の画像を保存できました。
今回はグローバルメニューを例に、作ってみましたが
色んなボタンに応用できます。工夫してみてくださいね。
関連記事