フリーソフトを使って素材に文字を入れる方法

バナー・アイコン・プレートなどと呼ばれる、使用者が加工するタイプのweb素材に文字を入れる手順をいくつか説明します。絵心のない人間が説明するのでその点の不備はお見逃しください……。また、より美しく減色・軽量化したい、手の込んだ処理を行いたい、と望まれる方は有料ソフトを購入されることをお勧めします。

サンプルこのサンプル素材に、画像ファイルを作るためのソフトを使って文字を入れてみます。

サンプル素材はExpressionで生成した画像をPhotonickで補正、それを再びExpressionで取り込んで8ビットPNG形式で減色・保存したものをMediaJuicerでGIF形式に変換し、Transparencyで透過指定、透過GIF形式で保存したものです。

手順は以下のようになります。

  1. 文字を入れる
  2. 減色する(8ビットPNG形式・GIF形式の場合のみ)
  3. web用に保存する

このページを作成するにあたり、Little Eden:Atelier Little Eden:涼夜のペイント講座を参考にさせていただきました。

文字を入れる

Photocnickを使って文字を入れる

レタッチソフトのPhotonickを使って文字を入れてみます。

好きな位置に文字を入れる

  1. 文字を入れる元の素材をPhotonickで開きます。JPEG・透過なしPNG形式なら直接ドラッグ&ドロップできます。透過ありPNG・GIF形式の場合はMediaJuicerで開いて編集→コピーして、Photonickで新規ウインドウを作成して編集→ペーストしてください。
  2. ツール→文字を選択して画像の文字を入れたい位置をクリックするとダイアログが開くので文字を打ち込み、OKを押します。
  3. すると点線で囲まれた状態の文字が画像の上に載せられます。これは“移動可能な選択範囲”で文字だけ動かせるので、ここで位置の微調整を行うことができます。
  4. 完成した画像はファイル→別名で保存...→PNG形式で保存してください。

完成サンプル“好きな位置に文字を入れる”完成サンプル

画像中央に文字を入れる

  1. 文字を入れる素材と同じ大きさの新規書類を作成して文字を入力します。
  2. 点線で囲まれた文字が全て見えているかどうか確認し、はみ出していたら中央に移動して、点線で囲まれた状態のまま編集→カットします。
  3. 編集→ペーストします。これで文字が画面中央に配置された画像ができます。
  4. PICT形式で保存します。
  5. 文字を入れる素材をPhotonickで開いて画像→合成→上絵をファイルから読み込む...を行い、文字を入力した画像ファイルを選択します。
  6. 透過色で文字を入力した画像ファイルの背景色を選択して、好きな合成方法で合成します。

完成サンプル“画像中央に文字を入れる”完成サンプル

3.の画像をコピーして、画像→合成→上絵をクリップボードから読み込む...でも行えます。

輪郭がなめらかな文字の場合、上の方法では中央にならないことがあります。その時は下の手順で行います。

画像中央に文字を入れる(アンチエイリアス)
  1. 文字を入れる素材と同じ大きさの新規書類を作成して文字を入力します。
  2. 点線で囲まれた文字が全て見えているかどうか確認し、はみ出していたら中央に移動します。
  3. 編集→色域選択...を選び、範囲の値は0で背景色の箇所をクリックして実行します。
  4. 背景色が選択された状態で編集→選択反転を行います。
  5. 文字が選択された状態で編集→カットします。
  6. 文字を入れる素材と同じ大きさの新規書類をもう1つ作成して編集→ペーストします。これで文字が画面中央に配置された画像ができます。

完成サンプル“画像中央に文字を入れる(アンチエイリアス)”完成サンプル

合成について

合成機能は他レタッチソフトのレイヤーに相当します。レイヤーの枚数だけ画像を用意して様々な合成処理を行えば、下のサンプルのような効果も可能です。

素材旧サンプル 完成サンプル“合成について”完成サンプル

ADrawを使って文字を入れる

ADrawは複数行の文章や文字ごとに色や大きさ・形を変える文字入れに向いています。

文字を画像中央に入れる

  1. ADrawで新規書類を開き、MediaJuicerで開いて編集→コピーした画像を新規書類上で編集→ペーストしてください。
  2. テキストツールを選択して文字を入力します。文字の大きさ・書体・色などを図形→各項目カラーパレットから1文字ずつ指定できます。
  3. 配置した画像と重ね合わせます。文字を画像中央に入れる場合は、画像とテキストフレームを両方選択した状態で調整→位置合わせ→中心で行えます。
  4. 処理が完了したら新規書類はADraw書類として保存します。再加工の時はこちらを使用します。
    それとは別に別形式で保存...→PICTで保存...を行います。減色やweb用の保存はこちらを用います。

ADrawで文字入れした画像には余白が付くことがあります。その場合はADrawのイメージ編集の調整→イメージサイズ...調整→選択矩形で切り取る、もしくはPhotonickの画像→切り抜き画像→サイズ変更→画素サイズ...で余白を断ち切ってください。

完成サンプル“ADrawを使って文字を画像中央に入れる”完成サンプル

変倍文字を入れる

  1. ADrawで入力した文字を同じように変倍をかけるグループごとに分けます。1文字ずつ異なった変倍をかける場合は1文字ずつ別々に文字を置くようにします。
  2. 文字を1つずつ選択してそれぞれ調整→PICT画像に合成を行います。
  3. 画像化された文字は自由に拡大縮小できるようになります。

完成サンプル“変倍文字を入れる”完成サンプル

AppleWorksを使って文字を入れる

一部のMacintoshを購入した際にバンドルされているAppleWorks(またはクラリスワークス)のドロー機能をADrawと比べると機能が勝っている点があります。複数行の文章の行間の変更や、画像化したテキストの反転・回転が可能なところです。

参考ページ:■Let's MAC■:クラリスワークス

完成サンプル“AppleWorksで変倍文字を入れる”完成サンプル

Expression Ver.3.3bを使って文字を入れる

高機能・多機能なドローソフト、Expression Ver.3.3bを使って文字入れします。多機能すぎて説明できないので、ぜひ実際にさまざまな効果を試してください。

完成サンプル“Expression Ver.3.3bを使って文字を入れる”完成サンプル

減色する

文字入れした画像をGIF形式や8ビットPNG形式で保存する場合は256色以下に減色する必要があります。フルカラーPNG形式・JPEG形式で保存する場合は減色してはいけません。MacOS9用のフリーソフトで試してみて結果が好ましいと感じたのがExpression Ver.3.3bによる減色です。

Expression Ver.3.3bを使って減色する

あらかじめファイル(File)→カラーマネジメント...(Color Management...)の“カラーマネジメントを使用(Enable Color Management)”のチェックを外してください。このチェックが入っていると色が変わってしまう場合があります。

文字を入れた画像をPNG形式にしておいてください。それ以外の形式(PICT等)の場合はPhotonickかMediaJuicerでPNG形式に変換できます。

  1. Expression Ver.3.3bを起動して、ファイル(File)→新規(New)を行い、新規書類を開きます。
  2. ファイル(File)→ビットマップを読み込み...(Insert Bitmap...)で文字を入れた画像を選びます。
  3. 編集(Edit)→トンボ(Crop Marks)→バウンディングボックスを使用(From Baunding Box)を選択し、追加間隔(Extra Border Width)を0cmにしてOKします。
  4. ファイル(File)→ビットマップとして保存...(Save As Bitmap...)を行い、フォーマット(format):PNG formatを選択してOKします。
  5. 画像サイズ(ピクセル)(Pixel Dimention)と出力寸法(Output Size)はそのまま、“縦横比を保つ(Keep Aspect Ratio)”と“トンボの内側のみを保存(Save CropMark Region Only)”にチェックを入れて、他の項目のチェックを外してOKします。
  6. 色数(Bits per pixel):8ビットパレット色(256色)(8-bit Indexed)を選択し、ハーフトーン(Halftoning)のチェックを絵柄に合わせて選択してOKします。
    元画像ハーフトーンあり ハーフトーンありハーフトーンあり ハーフトーンなしハーフトーンなし

減色された画像は8ビットPNG形式で保存されます。

web用に保存する

文字入れ(と減色)を行った画像の最終的なweb用の保存形式は、以下のように使い分けてください。

わずかでも劣化させたくない画像
PhotonickMediaJuicerExpression Ver.3.3bなどを使ってフルカラーPNG形式で保存します。重くなります。
なめらかな階調のある画像
PhotonickMediaJuicerExpression Ver.3.3bなどを使ってJPEG形式で保存します。
色数の少ない画像
透過する必要がある画像
  1. Expression Ver.3.3bで減色された8ビットPNG形式のファイルをMediaJuicerで開き、GIF形式で保存し直します。
  2. Transparencyで開き、透過したい色を指定して上書き保存します。
    ※PNG形式の方がよい場合はgif2pngを使って変換します。透過部分もそのまま引き継がれます。
透過する必要のない画像
Expression Ver.3.3bで減色された8ビットPNG形式のファイルをそのまま利用できます。
※GIF形式の方がよい場合はMediaJuicerで変換します。
動画画像
GifBuilderを使ってアニメーションGIF形式で保存します。
完成サンプルアニメーションGIF形式完成サンプル
動画画像
Expression Ver.3.3bを使ってFlASH形式で保存します。
完成サンプルFLASH形式完成サンプル

注)一部の旧いwebブラウザは(透過)PNG形式の表示に対応していません。詳しくは娘娘飯店しるきぃうぇぶ:娘娘文書楼:PNG についてあれこれ:主要ブラウザの対応状況 でご確認ください。

無料レンタル無料ホームページ無料オンラインストレージ