tss2011aのブログ -22ページ目

tss2011aのブログ

治し屋TSSの
「みんなの知らない体の話」

意外と検索多いんですね。
私なりの作り方を載せておきます。
ちなみに、ワンピースのアイコン作品集はコチラです。

ワンピースアイコン色々作ってみたよ(クリック)



 必要なもの

・gimp (レタッチソフト):無料ですが、かなりの高機能なソフトです。
  フリーとて侮る無かれ、こんなことも出来ちゃいます。
   ・アバターミネーター(クリック)
   ・白黒写真のカラー化に挑戦(クリック)
・アイコンにしたい画像
  綺麗な画像程修正作業が入りませんが、目的のものが見つからない場合、修正を覚悟して使うのもありです。


 作り方

①まずは、アイコンにしたい画像を選びましょう。

 見て判るとおり、ストラップの「オーズ」です。
 レタッチさえ出来るなら、必ずしも絵である必要は無いです。

001

②まずはgimpで画像の修正作業です。
 選んだ画像などによってこの修正作業はまちまちですが、スマホのアイコンは人差し指程度の大きさしかありませんから、あまり神経質に修正する必要はないです。
スマホ以外にも流用する場合は、そのアイコンの大きさを考慮して修正してください。
(下の画像はストラップ部分を削り取っている作業)

002


③縁取りの修正もしくは追加
 これは経験上ですが、アイコンに縁取りを加えておかないと、あなたのスマホの背景(壁紙)の画像と同化して見づらくなりますので、加えるのがベターだと思います。
今回の写真の場合だと、すでに縁取りがされた状態ですが、縁取りの無い画像の場合、新たな「レイヤー」を設けて縁取りを追加するほうが後々変更が楽かと思います。
例えば、白い背景(壁紙)の場合だと写真の白色の縁取りはまったく役に立ちません。
こういった場合縁取りをグレーに変更したほうが見やすくなるとなった場合、レイヤーの色をグレーに置き換えるだけで変更が済むので楽だと思います。

003


④色合いの調整
 選んだ画像によって色合いが満足のいくものでない場合、ここで調整してしまうと良いです。
ちなみに私は「オーズ」ピンク色が褪せている様に思ったので濃くしてみました。

004


⑤色合いの修正前→修正後
 奥に見える「オーズ」が色合いの修正前。
 手前の「オーズ」が色合いの修正後になります。

005


⑥目的のアイコンの大きさに合わせて、画像の大きさを整える
 このアイコンはスマホ以外使わないのか?それともパソコンなどでも使う可能性があるのかで画像サイズの変更は変わります。
もし、アイコンの大きさがわからない場合、大きい画像のままで残す様にしてください。
大きい画像を小さく縮小する分には画像の精細さはさほど失われないのに対し、小さい画像を拡大すると画像が思いっきりぼやけてしまう為です。
下の写真は「256ピクセル×256ピクセル」の大きさにしてあります。

006


⑦透過背景の製作
 アイコンのボタンをどういう形にするのかは、好みの分かれる所です。
なので必ずしもアイコンの背景をこの様にする必要はありません。
透過背景というのは、スマホの背景(壁紙)がうっすら透けて見えるものの、何となくボタンらしきものが見えるという状態になる作り方です。
写真では黒色の部分にスマホの背景(壁紙)がぼんやり映り込む様になります。
(判りやすく黒色ですが、実際はグレーにしてあります)

007


⑧完成!
この「オーズ」のアイコンの場合、元々の画像に四角い透過背景を加えたボタン型のアイコンにしてみました。
先に③で説明した「レイヤー:透過背景」というのが見えるでしょう?
この透過背景をグレーじゃなく違う色に変えたいとなった場合、レイヤーでないと作り直しが大変になりますので私はレイヤーの状態で保存してあります。
後から修正やデザインを変える気がないのであれば、保存の際は拡張子「png」で保存。(レイヤー情報は消えてしまい、一つの画像として保存されてしまいます)
後に修正や変更などを行う場合レイヤー情報を残しておきたいので、まずは拡張子「psd」で保存します。
それとは別に、アイコン様にもう一つ拡張子「png」の画像を作って利用すればOKです。

重要:
アイコンの画像の大きさは、携帯の機種などによって変わります。
また、拡張子も同様です。(スマホの場合はpngだったと思います)
作る前にこれは良く調べておいて下さい。

008

一見面倒臭く見えますが、慣れればさっさと作れます。
それに、慣れてしまえば自分の好きなものを何でもアイコンにできちゃうので、私は自作をお勧めします。


 <各目次>このお話は1話で完結です

もくじへ戻る(クリック)