スポンサーサイト

記事タイトル枠
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
ページトップへ戻る

フリーフォントで効率よくデザインする

記事タイトル枠

こんにちは!初心者のためのWEBデザイン教室、何とか3回目の授業です。
今日は、デザイン初心者でも何だかプロっぽい作品ができるかもしれない、そんな素敵なお話です。

何か作りたいものがあって、大体イメージはできている。
でもそのイメージに登場する何やら複雑な部品を自作するのは今の自分のスキルじゃ無理っぽい…。

そういう時には、フリー素材にお世話になりましょう。

フリー素材にはいろいろなデータ形式がありますが、今回はフォントを使った方法を取り上げたいと思います。

「フォント」と聞いてまず思いつくのは、文字のスタイルですね。
MSゴシックだとか小塚明朝だとかArialだとか。

いろんなフォント

PCに初めからインストールされているフォントの他にも、様々なフォントが販売されていたり、配布されたりしていることは既にご存じの方も多いと思います。

そしてそのフォントの中には、文字ではない、図形や絵柄ばかりが登録されているものもあるのです。
☆とか♪とかの超リッチ版といったところでしょうか。

そのようなフォントがたくさん見つかる、下記サイトを紹介します。

他にも同じようなサイトはありますが、取りあえずはこのサイトだけで十分でしょう。
今回はこのサイトを元に、下記のような手順でデザインを作っていきます。

  1. 使いたいフォントを探す
  2. 使用条件を確認する
  3. フォントをダウンロードし、PCにインストールする
  4. Illustrator(Photoshop)でテキストを入力する
  5. 文字のアウトライン化(Psの場合ラスタライズ)をする
  6. あとはお好きに、変形、着色、レイアウト!
  7. 【おまけ】このフォントをWordで使う場合

使いたいフォントを探す

サイトのページ上部の赤枠の中がカテゴリ一覧になっています。図形のフォントが多いのは右の方の「Dingbats」「Holiday」あたりかなと思います。

110617_02.jpg

カテゴリのリンクをクリックすると、登録されているフォントのイメージが並んでいます。
イメージをクリックすると、そのフォントの詳細(キーボードの割り当て)が見られます。

110617_03.jpg

イメージの右側には[Download]ボタンが。でも、クリックはちょっと待った!!

使用条件を確認する

[Download]ボタンをクリックすればダウンロードされるのですが、その前に、必ず使用条件を確認してください。
それは、[Download]ボタンの上に書かれてある「Free」「Free for personal use」「Donationware」などです。

このサイトに掲載されているフォントは全て無料、何にでも使い放題というわけではありません。
Helpのページにはこうあります。

【Q:Are all fonts free of charge?】
A:The fonts presented on this website are their authors' property, and are either freeware, shareware, demo versions or public domain. The licence mentioned above the download button is just an indication. Please look at the readme-files in the zips or check the indicated author's website for details, and contact him/her if in doubt. If no author/licence is indicated that's because we don't have information, that doesn't mean it's free.

意訳すると、
「このサイトに掲載されているフォントはそれぞれの作者の所有物であり、フリーウェア、シェアウェア、デモ版、パブリックドメインのどれかに当たります。ダウンロードボタン上部のライセンス表記は単なる指標であり、詳細については、ダウンロードしたZIPファイル内のreadmeファイルを見たり、作者のWEBサイトをチェックしてください。疑問があれば作者に直接お問い合わせください。作者やライセンスが表記されていないものについては当サイトが情報を持っていないということであり、自由であるということではありません。」
ということです。

110617_04.jpg

「Free for personal use」と表記のあるものは「個人使用なら無料」ということですが、どこまでが個人使用か、何が商用利用か、という基準もフォントごとに違います。「Free」であれば一応大丈夫ではないかとは思いますが、もし商用利用をする場合は、必ず条件を確認しましょう。その際は翻訳サイトでどうぞ。

フォントをダウンロードし、PCにインストールする

[Download]ボタンをクリックすると、ZIPファイルがダウンロードされます。解凍する必要があるので、ファイルを右クリックで「すべて展開」を選びます。
解凍されたファイルの中に「readme.txt」などがあれば、使用条件の詳細が書かれてありますのでそちらも確認しておきましょう。

110617_05.jpg

フォントのファイルは「.ttf」「.otf」などの拡張子が付いたものです。このファイルを、コントロールパネルの「フォント」フォルダ内にドラッグ&ドロップします。

110617_06.jpg

正常にコピーされたら、ダウンロードした元のフォルダは削除しても構いません。

もし、この時点でIllustratorやPhotoshopを起動していた場合は、いったん終了して、もう一度立ちあげましょう。(ソフトの再起動)
これで、インストールしたフォントがフォント一覧に表示されるようになります。

Illustrator(Photoshop)でテキストを入力する

サイトでキーの割り当てを確認していた場合もあるかと思いますが、どんな図形が登録されているか、取り敢えず一通り見てみましょう。

文字ツールでテキストの入力ができる状態にし、半角英数でキーボードのキーを全て入力します。
し終えたら、[Shift]キーを押しながら、もう一度全てのキーを入力しましょう。

110617_07.jpg

そして、そのテキストを選択して、フォントの種類を変えます。

[書式]メニューのフォントからだと、サムネイルが出ているので探しやすいです。

110617_08.jpg

見やすい大きさにサイズ変更して、キーの割り当てがなく英字がそのまま表示されているところは削除します。

文字のアウトライン化(Psの場合ラスタライズ)をする

テキストのままだと編集がしづらいので、[書式]メニュー→アウトラインの作成でオブジェクトにしてしまいます。
これで、グラデーションが適用できたり、パスやアンカーポイントをいじって変形することもできるようになります。

110617_09.jpg

ただしPhotoshopの場合は、ラスタライズしてしまうと変形が簡単にできなくなるので、もし変形させたいという場合はいったんIllustratorでフォントをアウトライン化→変形してからPhotoshopへ貼り付け、またはシェイプレイヤーとして貼り付けてPhotoshopで変形、という手順がいいかと思います。

あとはお好きに、変形、着色、レイアウト!

複数の図形を一度にアウトライン化した場合はグループ化されているので、個々に動かしたい場合はグループ解除をしましょう。

これで、文字ではなくオブジェクトになったので、拡大縮小、グラデーション、効果などを使って好きにレイアウトしましょう!

110617_10.jpg

よく使いそうなものであれば、次回以降で手順の4と5を省略するため、登録された図形全てをアウトライン化したファイルを参照用として別に保存しておいてもいいですね。

【おまけ】このフォントをWordで使う場合

Wordでこのようなフォントを使いたいという場合は、文字を入力してフォントを切り替える方法ではなく、ワードアートを使います。

ワードアートのダイアログ内に文字を入力し、フォントを切り替えます。[OK]で挿入しましょう。

110617_11.jpg

 

ワードアートに表示された文字は既に画像化されているので、アウトライン化する必要がありません。
Wordはテキストをアウトライン化する機能がないので、画像として表示されるワードアートを使うわけです。

ちょっと素敵なデザインが仕上がりましたか?

では、お疲れさまでした!

関連記事
このエントリーをはてなブックマークに追加
ページトップへ戻る

コメントの投稿

非公開コメント

ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。