机上ラボ ＞ 小技
	それっぽい見出し画像・ボタン画像を簡単に作成する。

---

デザイナーならまだしも、デザインに長けているわけでもない一般の人でも、Webサイトなどを運営する上で、ちょっとした画像を用意しないといけない場面に直面する。普通は、デザインされた素材等、既製品を用いて何とかする事になるわけだが、見出し画像や、ボタン画像等、画像にテキストを挿入する等のちょっとした小回りが必要となる場合もある。
今回はそういった場面に最適なツールをご紹介したいと思う。

画面設計向け Pencil Project 

---

■　PencilProjectを画像作成に利用する。

フリーソフトの「Pencil Project」。通常は画面設計等に利用されるソフトであるが、画像としてエクスポートすれば、画像作成ツールとして大変有効である。文字の「アンチエイリアシング」や透過PNG等も対応できてしまう優れものである。基本英語のソフトだが、日本語文字列の扱いには問題はない。（一部、フォント種別の仕様がかみ合わないせいか、対応ができないフォントは存在するが、メイリオ等一般で使われているフォントは対外認識する。）英語が極端にできない人でなければ大体使いこなせる代物である。

⇒ Pencil Project Portable (PortableApps.com)

• 「画面設計に利用されるPencil Projectを利用して簡単作成」
• 「英語ソフトだが、日本語フォント表示には問題ない。（一部フォントは使用不可）」

 

画像作成のコツ

---

■　「Pencil Project」で画像を作成する際の勘所

作成の上で、まずつまづく所は、「画像のサイズ」英語が読めてもちょっと分かりづらいところにあるので、説明する。

新規作成後のドキュメントペインにタブがついているので、そのタブの右クリックメニューを開く。「Properties（プロパティー）」メニューを選択する。

開いたダイアログ内で、サイズを変更できます。サイズ変更後「Apply（反映）」ボタンを押せば、サイズが変更できる。

左ペインに色々なデザインが用意されており、そこからドラッグアンドドロップで配置することができる。

「Text」となっている個所は自由に編集できる。フォントやサイズもスタイルが崩れない程度に変更することができる。また、Pencil Prjectの強みとも言えるガイド（図形を配置する時、隣の図形の中央、上端、下端等を基準として吸着する）がとても役立つ。

▲そうして作成した画像。左のアイコン等は「Icon」という図形から選択できる。

その他、見たことがあるようなボタンも作成できる。背景が白いが、PNGとして出力すれば背景は透過になるので、色や模様付の背景でも違和感なく配置することができる。

「Export Page as PNG」でPNG画像ファイルが出力できる。中間ファイルも保存しておけば、テキスト違いの画像がすぐに作成できる。

• 「画像サイズの変更は上のタブを右クリック」
• 「右ペインから図形をドラッグアンドドロップ」
• 「PNGで出力することにより、背景は透過する」

その他、見出しやボタン以外にもいろいろな利用方法が見いだせるPencilProject。これは使えそう。
※各画像については各々のライセンス関係をご確認の上、ご利用ください。