当ブログでも使用している、アルファベット頭文字のシンプルなアイコン。【追記】現在は変更しています。】誰でも簡単に、短時間で、無料で作ることができます。デザインに苦手意識があっても大丈夫!
今回はアルファベット頭文字のアイコン作成方法をご紹介します。
※当方の制作環境は、Windows8.1、Google Chromeですが、オンライン画像編集ソフトを使用するので、基本的にはどの環境でも作成可能です。
オンライン画像編集ソフト「Pixlr Editor(ピクセラエディタ)」
画像編集ソフトの定番と言えば、Adobe社のPhotoshopがありますが、値段も難易度も高く敷居が高い…。無料の画像編集ソフトもありますが、いちいちインストールするのもめんどくさい…。
そんなときに便利なのがオンラインの画像編集ソフトです。
その名の通り、ネットに繋がってさえいれば画像編集ができちゃいます。オンラインの画像編集ソフトも数多くありますが、今回はPixlr Editor(ピクセラエディタ)を使用します。
日本語に対応していること、操作性の良さが決め手です。
ファイルの作成
まずはOnline Photo Editor | Pixlr Editor | Autodesk Pixlrサイトにアクセス。
「新しい画像を作成」をクリックします。
「名前」がファイル名になりますので、任意の名前を付けます。「プリセット」には各種サイズが設定されていますが、アイコン用の正方形サイズが無いので、「幅」「高さ」に数値を直接入力し、「OK」をクリック。
※今回は、facebookのデスクトップコンピュータ表示に使用されるサイズ、160×160で作成します。
背景色の指定
まず、背景の色を指定します。ツールボックス下部の「Set main color」をダブルクリックします。
色を選択する画面が出てきますので、アイコンの背景の色を指定します。中央のひし形と周りの円部分を直感的に選択する方法と、下の「H」「S」「L」のスライダを動かす方法どちらでも構いません。色が決まったら「OK」をクリック。
ツールバーの「ペイントバケツツール」をクリック。
キャンバス上でクリックすると…
指定した色でキャンバスを塗りつぶします。これで背景は完成。
アルファベット頭文字の入力
続いてアルファベットを入力します。ツールバーの「タイプツール」をクリック。
キャンバス上でクリックすると、テキスト編集画面が出てきます。ここではまず「色」をクリックして、文字色を「白」にします。
先ほどの色を指定する画面が出てきますので、中央のひし形の一番上にポインタを移動すると「白」を指定できます。
テキストは任意の頭文字を、フォントもお好みのフォントを指定してください。サイズ、スタイルもお好みで調整して、「OK」をクリックします。
テキストが上部に表示されてしまっているので、テキストを動かして位置を調整します。ツールバーの「移動」ツールを選択。
クリックしたまま下の方にドラッグします。
テキストがだいたい真ん中に来るように調整します。
ファイルの保存
「ファイル」から「保存」を選択。
フォーマットをPNG形式に指定します。JPG等でも良いのですが、劣化の少ないPNGをおすすめします。「OK」をクリックし、任意の場所にファイルを保存します。
完成です~!!
デスクトップアイコンにしてみました。なんとなくそれっぽい?
おわりに
ちょっとの手間で簡単にアイコンができちゃいます。フォント選びが肝になるので、お好みのフリーフォントを探してみるのも楽しいかと思います。
それにしてもオンラインで画像編集できるなんて、一昔前なら考えられなかったけど、今や当たり前なんですね…。
時代は変化しているんだなぁ。(遠い目)