blueroll

読者です 読者をやめる 読者になる 読者になる

シンプルなアルファベットのアイコンを無料で作成する方法

Web

f:id:blueroll:20160216161455p:plain

当ブログでも使用している、アルファベット頭文字のシンプルなアイコン。【7/14追記:現在は変更しています。】誰でも簡単に、短時間で、無料で作ることができます。デザインに苦手意識があっても大丈夫!

今回はアルファベット頭文字のアイコン作成方法をご紹介します。

※当方の制作環境は、Windows8.1、Google Chromeですが、オンライン画像編集ソフトを使用するので、基本的にはどの環境でも作成可能です。

 

 

 

オンライン画像編集ソフト
Pixlr Editor(ピクセラエディタ)

画像編集ソフトの定番と言えば、Adobe社のPhotoshopがありますが、値段も難易度も高く敷居が高い…。無料の画像編集ソフトもありますが、いちいちインストールするのもめんどくさい…。

そんなときに便利なのがオンラインの画像編集ソフトです。

その名の通り、ネットに繋がってさえいれば画像編集ができちゃいます。オンラインの画像編集ソフトも数多くありますが、今回はPixlr Editor(ピクセラエディタ)を使用します。 

Online Photo Editor | Pixlr Editor | Autodesk Pixlr

日本語に対応していること、操作性の良さが決め手です。

 

ファイルの作成

まずはOnline Photo Editor | Pixlr Editor | Autodesk Pixlrサイトにアクセス。

f:id:blueroll:20160216164452p:plain

「新しい画像を作成」をクリックします。

f:id:blueroll:20160216164014p:plain

「名前」がファイル名になりますので、任意の名前を付けます。「プリセット」には各種サイズが設定されていますが、アイコン用の正方形サイズが無いので、「幅」「高さ」に数値を直接入力し、「OK」をクリック。

※今回は、facebookのデスクトップコンピュータ表示に使用されるサイズ、160×160で作成します。

 

背景色の指定 

f:id:blueroll:20160216165002p:plain

まず、背景の色を指定します。ツールボックス下部の「Set main color」をダブルクリックします。 

f:id:blueroll:20160216165151p:plain

色を選択する画面が出てきますので、アイコンの背景の色を指定します。中央のひし形と周りの円部分を直感的に選択する方法と、下の「H」「S」「L」のスライダを動かす方法どちらでも構いません。色が決まったら「OK」をクリック。

f:id:blueroll:20160216165814p:plain

ツールバーの「ペイントバケツツール」をクリック。 

f:id:blueroll:20160216170152p:plain

キャンバス上でクリックすると… 

f:id:blueroll:20160216170118p:plain

指定した色でキャンバスを塗りつぶします。これで背景は完成。

 

アルファベット頭文字の入力 

f:id:blueroll:20160216170701p:plain

続いてアルファベットを入力します。ツールバーの「タイプツール」をクリック。 

f:id:blueroll:20160216170825p:plain

キャンバス上でクリックすると、テキスト編集画面が出てきます。ここではまず「色」をクリックして、文字色を「白」にします。 

f:id:blueroll:20160216171826p:plain

先ほどの色を指定する画面が出てきますので、中央のひし形の一番上にポインタを移動すると「白」を指定できます。

f:id:blueroll:20160216170825p:plain

テキストは任意の頭文字を、フォントもお好みのフォントを指定してください。サイズ、スタイルもお好みで調整して、「OK」をクリックします。

f:id:blueroll:20160216172223p:plain

テキストが上部に表示されてしまっているので、テキストを動かして位置を調整します。ツールバーの「移動」ツールを選択。 

f:id:blueroll:20160216172527p:plain

クリックしたまま下の方にドラッグします。 

f:id:blueroll:20160216172712p:plain

テキストがだいたい真ん中に来るように調整します。

 

 

ファイルの保存 

f:id:blueroll:20160216173244p:plain

「ファイル」から「保存」を選択。 

f:id:blueroll:20160216173322p:plain

フォーマットをPNG形式に指定します。JPG等でも良いのですが、劣化の少ないPNGをおすすめします。「OK」をクリックし、任意の場所にファイルを保存します。 

f:id:blueroll:20160216173447p:plain

完成です~!! 

f:id:blueroll:20160216173513p:plain

デスクトップアイコンにしてみました。なんとなくそれっぽい?

 

おわりに

ちょっとの手間で簡単にアイコンができちゃいます。フォント選びが肝になるので、お好みのフリーフォントを探してみるのも楽しいかと思います。

それにしてもオンラインで画像編集できるなんて、一昔前なら考えられなかったけど、今や当たり前なんですね…。

時代は変化しているんだなぁ。(遠い目)