こんにちは。
はてなブログの管理画面で、何気なくデザインの変更をしたら、元に戻せなくなったクボッチです。
でも、ほとんどカスタマイズしていなかったはずなので、気にしないことにしました。
この記事は、ブログのトップに表示する画像（ヘッダー画像）とプロフィール画像を作成した時のメモです。
画像を見つけてくる
世の中にはフリー素材画像をタダでダウンロードできるウェブサイトがたくさんあります。
私は、kicks.jpというドメインでこのブログを運営しているので、キックをイメージしたアイコン画像を見つけてきてダウンロードしました。
画像の加工
取ってきた画像が黒一色だったので、色を変えることにしました。
単色だとイマイチなのは想像がついたので、グラデーションをつけます。
試したのは、firealpacaというツールとGIMPというツールです。
firealpacaは、ブログ記事で使う写真をちょっと加工するときに使っていました。画像のサイズ変更と、人の顔をぼかす処理です。
元の画像は、足の箇所が左上に向けて伸びていたので、右肩上がりの方がいいだろうと思い、画像を反転させました。
firealpacaで試す
画像を開いたら、背景が透明（アルファ100%）で、そこに黒いロゴがある画像でした。
まずは、ロゴの部分だけ選択するために「ファジー選択」を使います。
同じ色で連続している領域を自動選択してくれる機能です。
Adobe製品では、Magic Wand Tool（魔法の杖ツール）という名前のツールですね。 GIMPは、Fuzzy select tool（ファジー選択ツール）でした。
この機能でロゴの部分だけ選択してグラデーションをかけてみました。
そうしたら、ロゴの外側に輪郭のように黒い線が残ってしまいました。
グラデーションでの塗り潰しはできたけど、仕上がりがイマイチです。
これの原因は、アンチエリアスと思われます。
アンチエイリアスとは、、
アンチエイリアスとは、コンピュータで文字や図形を描画・表示する際に、斜線や曲線などに発生する微細な階段状のギザギザした部分（ジャギー）を目立たなくする手法。
アンチエイリアス（スムージング）とは - IT用語辞典 e-Words
「ファジー選択」ツールの、Expandを1 pixelにしたらだいぶ良くなったものの、まだ黒い輪郭的なものが残っていました。
2 pixelのすると今度は黒い枠はなくなるものの、輪郭がデコボコに。。
直し方が分からなかったので、別のツールを使ってみることにしました。
GIMPで試す
GIMPとは、、
オープンソースで開発されている画像処理ソフト。高価な有償グラフィックソフトにも引けをとらない多機能性が魅力となっている。
だそうです。 GIMP - GNU Image Manipulation Program
GIMPでは、Fuzzy select toolでの選択は上手くいきました。塗りつぶしで黒い輪郭が残らない！
でも、グラデーションしようとしたら、灰色でグラデーションされる。。。
結論としては、「モード」を「グレーススケール」から「RGB」に変えればカラーでグラデーションされるようになりました。
4.7. モードを変える
元の画像が白黒だと、開いたときに自動でグレースケールが設定されるんですかね。
解決方法を見つけるのに結構苦労しました。
なんでグレースケールでファイルが開かれるのか。。
誰得？って感じですが、サイズが少なくなるとかメリットもあるんでしょうね。
これで画像の加工はできました。
次回は、はてなブログに作った（加工した）ロゴを設定します！
感想
今まで、はてなブログ標準のデザインを使っていたので、差別化できておらずイマイチでしたが、ブログのヘッダーとプロフィールに画像をつけて、他のブログと見分けが付きやすくなりました！
ただ、モバイル版のヘッダーで出る画像がジャギー、ギザギザになっているのが気になります。
思った以上に時間がかかってしまいました。
途中でめんどくさくなって中断しましたが、累計で1日分(8時間)以上の作業をしてしまったような気がします。
慣れている人がやれば1時間もかからないはずなのに。クラウドソーシングを使った方が良かったかもしれません。
