2012年11月22日
ドット文字を作る方法
ホームページを制作していると、タイトルやバナーを作る機会も増えてきます。
特に気にしなければいいのですが、スマホや携帯向けにバナー広告を作り宣伝したい場合などは、やはり綺麗に制作したいところです。
今回は、バナーなどの画像にドット（Dot）文字を使った文字の作成例を紹介します。
ここでは、 Excel（エクセル） と PhotShop（フォトショップ） を使って紹介します。
まず Excel（エクセル） を起動して、入力したい文字の種類とサイズで下記の図のように作ります。
文字の背景色は、白で塗りつぶし、スクリーンショットで画像を撮ってください。
文字の色は、後で簡単に塗りつぶせますので白以外なら気にすることはありません。
多くのパソコンの右上の ”PrtScr” キーが、スクリーンショットになります。
スクリーンショットが撮とれるフリーのソフトウェアもありますのでそちらを使ってもよいでしょう。
・Excel をスクリーンショットした画像
フォトショップを起動して、「 Ctrl+N 」でファイルを新規作成します。
フォトショップでは、クリップボードにある画像サイズで新規ファイルのサイズが作成できます。
次に「 Ctrl+C 」でクリップボードにある画像を新規画像にコピーします。
コピーした画像をから、再度編集しやすいように切り出したい文字の部分を下記の図のように選択します。
フォトショップで切り取りたい画像をマウスで囲み選択します。
・選択範囲を指定
先ほどと同じように「 Ctrl+N 」と「 Ctrl+C 」を繰り返します。
すると次のような画像が制作できます。
・文字のみの画像
この画像をフォトショップの「 選択範囲(S) 」、「 色域指定(C)... 」を選択し、スポイトを白の部分にあてクリックします。
この時の許容量は適当でかまいません。
（低目が良いでしょう)
すると白い部分が選択状態となります。
そこで「 Delete 」ボタンを押すと、白い部分を削除し文字だけが残ります。
この文字の画像を使うことで、ドット文字のバナーが制作できます。
フォントやサイズを替えても大抵の文字は綺麗に削除できます。
以下の画像は、ドット文字とそうでない文字で作成したものです。
ドット文字の場合は、文字の周りのボケた感じがなくハッキリとしています。
画像は、拡大や縮小をすると文字がボケやすいのでサイズに合わせて制作するとよいでしょう。
特に気にしなければいいのですが、スマホや携帯向けにバナー広告を作り宣伝したい場合などは、やはり綺麗に制作したいところです。
今回は、バナーなどの画像にドット（Dot）文字を使った文字の作成例を紹介します。
ここでは、 Excel（エクセル） と PhotShop（フォトショップ） を使って紹介します。
まず Excel（エクセル） を起動して、入力したい文字の種類とサイズで下記の図のように作ります。
文字の背景色は、白で塗りつぶし、スクリーンショットで画像を撮ってください。
文字の色は、後で簡単に塗りつぶせますので白以外なら気にすることはありません。
多くのパソコンの右上の ”PrtScr” キーが、スクリーンショットになります。
スクリーンショットが撮とれるフリーのソフトウェアもありますのでそちらを使ってもよいでしょう。
・Excel をスクリーンショットした画像
フォトショップを起動して、「 Ctrl+N 」でファイルを新規作成します。
フォトショップでは、クリップボードにある画像サイズで新規ファイルのサイズが作成できます。
次に「 Ctrl+C 」でクリップボードにある画像を新規画像にコピーします。
コピーした画像をから、再度編集しやすいように切り出したい文字の部分を下記の図のように選択します。
フォトショップで切り取りたい画像をマウスで囲み選択します。
・選択範囲を指定
先ほどと同じように「 Ctrl+N 」と「 Ctrl+C 」を繰り返します。
すると次のような画像が制作できます。
・文字のみの画像
この画像をフォトショップの「 選択範囲(S) 」、「 色域指定(C)... 」を選択し、スポイトを白の部分にあてクリックします。
この時の許容量は適当でかまいません。
（低目が良いでしょう)
すると白い部分が選択状態となります。
そこで「 Delete 」ボタンを押すと、白い部分を削除し文字だけが残ります。
この文字の画像を使うことで、ドット文字のバナーが制作できます。
フォントやサイズを替えても大抵の文字は綺麗に削除できます。
以下の画像は、ドット文字とそうでない文字で作成したものです。
ドット文字の場合は、文字の周りのボケた感じがなくハッキリとしています。
画像は、拡大や縮小をすると文字がボケやすいのでサイズに合わせて制作するとよいでしょう。
【ブログ・制作Tip！の最新記事】
この記事へのコメント