【実践】photoshop elementsで作る簡単サイトアイコン

スポンサーリンク
フォトショップでサイトアイコンを作るHP作成

サイトアイコンの作り方は分かったけど、できるかしら?

今回はこういったお悩みに添いたいと思います。

以前にも、サイトアイコンの作り方をお伝えしましたが、今回はPhotoshop Elementsで実際に作って説明します。

2万円以下の画像編集ソフトで使いやすいのがAdbeのPhotoshop Elementsです。写真しか編集できないように思われている人が多いようですが、イラストや画像の編集もできます。通常のPhotoshopに比べレイヤーやフィルタなどの機能は制限されていますが、プロではない限り十分な機能を備えています。

今回紹介する方法はサイトアイコン以外にもアイキャッチ画像にも使えますよ。

そっそく作ろう、サイトアイコン

サイトアイコンのサイズは20種類くらいあるそうですが、今回は32pxのサイトアイコンを作ります。WordPressのサイトアイコンは512pxですので、参考にしてくださいね。

元になる画像を選ぶ

神社サイト運営に必要な画像サイト12選から、サイトアイコンに向く画像が揃っているICOOON MONOから気に入った画像を選びます。

32pXの黒、PNGを選んでダウンロードします。

PNG背景など透明も保存できます。ロゴに向きます
JPG写真などの色が豊富でなめらかな色使いに向きます
SVGベクター形式で拡大縮小する画像に向きます

フォトショップやイラストレータに使えるファイルがありますが、「Photoshop Elements」では使えなかったので、PNGかJPGをダウンロードします。

Photoshop Elementsで編集します

「Photoshop Elements」を立ち上げ、保存したフィアルを開きます。

モノクロアイコンの色を変える

アイコンがモノトーンなので、好きな色にかえましょう。

  • 画像の上に新規レイヤーを重ねます
  • 新規レイヤーに好きな色を塗ります。
  • レイヤーの重ねを「比較(明)」「カラー比較(明)」にします。

この方法は背景が透明では使用できませんので、JPGがいいでしょう。

ダウンロードしたままの色でよければPNGで開きます。そうすれば後で背景を消す手間が省けます。

背景を透明にする

次は、保存します。もしまだ何か足りないようであれば、文字を追加したり画像加えます。

  • バラバラになったレイヤーを一枚に統合します
  • 統合した画像「背景」をレイヤーにします
  • 右の統合した画像のアイコンをwクリックします
  • マジック消しゴムツールを選びます
  • 中央の画像の白い部分をクリックします
  • 白い部分が削除されます

そして、「WEB用に保存」を選んで、保存します。ただの「保存」は作業中のレイヤーが重なったファイルを保存します。

「GIF128ディザ」で保存しました。このあたりは「GIF64ディザ」でもよかたかもしれません。ファイルが小さいので大体でいいです。

「.ico」ファイルに変換します

次にファイルを変換します。「.ico」にすれば、勝手に認識してくれるので、ラクです。

「ファビコン作成 favicon.icoを作ろう!」でファイル変換します。

  • 32×32用画像ファイルを選択して、先ほど作ったファイルを開きます
  • favicon.ico 作成をクリックします
  • 「ダウンロード」ボタンを押して画像をダウンロードします

どんな感じに出来たか確認することができます。

まぁまぁですかね?イマイチなのは画像が細かったからだと思います。

また、白は必ずしも透明にしなくてはならないことはありません。そこはデザインです。「透明になっていない」ことをとやかくいう人がいますが、それは余計なお世話です。ファビコンをデスクトップやホーム画面に置く人は少ないと思うので、白でもいいと思いますよ。なんなら、背景の色を変えばいいです。

 

HP作成
スポンサーリンク
いつもありがとうございます!
楽カミほむぺ★
タイトルとURLをコピーしました