WordとGIMPで作るファビコン講座!?

前回の記事で、ファビコンを新しくしました旨報告しました。
が、GIMPの使い方等ブン投げ。
ろくに説明していない次第でありまして。
個人的に反省しているところです。
なので今回はGIMPの使い方紹介から、
実際にやったアイコンのデザイン方法まで紹介したいと思います。
自分が会社等で会得した技術でデザイン作ったので、
デザイナーの皆様からするとアリエナイ方法を取っているかと思いますが、
その辺は温かい目で見てやってください

Wordでロゴをデザインする

まずはアイコンというかロゴのデザインから。
最近はセンスの良いロゴメーカーが多数あるみたいで。
利用するのもいいかなと思いますが、頑張って自作しました!

使ったのは、みんな一度はお世話になった事がある!
Microsoft Word !


オートシェイプで太線外枠丸の字を描いて、
中にテキストボックスで文字を入れ、
ワードアートでちょっと斜体っぽくしました!
今のWordではオートシェイプではなく、単に図形っていうんですね。

Twitterで使っている青版以外にもカラーバリエーションあるんですよ実は。

配置や線太さ等、何回か試行錯誤して今のバランスに落ち着きましたが、
多分デザイン的には黄金比とか理論的にベストなバランスがあるのかなぁと思う所。

オートシェイプ(図形)を画像データにするため、
Word上で可能な限り拡大してスクリーンショットを保存しましょう!

保存形式はPNGでいきます。
JPEGは透明背景に対応していないらしいですよ。

GIMPで背景透明化する

保存したスクリーンショットPNG画像をGIMPで読み込みます。

アイコンなので絵と円の中心を揃えて正方形にしましょう。
縦横比を1:1に固定して切り抜き。
何か手段があるのかもしれませんが、
上下左右の余白が同じ幅に見えるように切り抜きました。

次に画像背景を透明にするために
レイヤーにアルファチャンネルを追加
というのをやります。
↓のサイトを参考にしました!

GIMPで背景を透過する方法(アルファチャンネルを追加)
GIMPで背景を透過するにはアルファチャンネルの追加が必要です。初心者でも分かるように説明します。「決まった色を透過する方法」や「背景が透明の新規ファイルを作成...

上記のサイトさんでファジー選択についても触れられているので、
そっちもご覧ください。
ファジー選択ツールで周囲を消去して、背景透明化完成!
白とグレーの市松模様になっているのが、透明になっているという表示です。

完成!と思いきやロゴのキワに白いのがちょっと残ってるような。

拡大してみると、ドット単位で白やグレーの領域がありますな。
これはフチがカクカクしないようグラデーションでボカしているんですな。
アンチエイリアス・・・
聞いたことある。
グレーはともかく、白が選択から漏れてるのはなんでなんだろう。
その辺がファジー(あいまい)たる所なのかな。

この際、白黒はっきりつけましょう!
画像の色彩を白と黒のみに変換することを2値化といいます!

白黒2価(モノクロ2階調) - niming538の日記
Webページを黒インキしかない安物プリンターで印刷しようとして工夫しているのですが、文字はどうにかなるのですが、画像を白黒で印刷するのがむずかしい。グレースケー...

2値化のやり方は↑サイトを参考にしました。
ザックリやるには色ディザリングを使うのがいいのかな。
滑らかさを排除するぶん、エッジがギザギザしてしまいますが。
まぁ縮小して使用するのでOKでしょう!

ふたたび ファジー選択→消去 で背景透明化完成!!

滑らかさを排除するぶん(略

まとめ

・Microsoft Wordでロゴデザイン(Excel,PowerPointでも可)
・GIMPで背景透明化
・やり方は全部ネット上にある

手元にあるソフトを駆使して、素人なりに頑張ってロゴ作ってみました。
感想としては「GIMPすげー」というところですが、
GIMPの操作法が検索かければボコボコ見つかるところがもっとすごい。

「…2値化とかモノクロ画像じゃないと使えないし…」
「…Wordでデザインってお前Excelを方眼紙にするタイプだろ…?」
等々
心に直接語りかけてくる声が聞こえるような感じですが。
何かしら参考になれば良いんですが、どうでしょうか?!

ファビコン新しくなりました!

ブログの方、プチカスタマイズしました。
さて、どこでしょう?
そうですね、ファビコンですね。

ファビコンとは

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。 favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。
Favicon – ウィキペディア
https://ja.wikipedia.org/wiki/Favicon

スマホだったりPCだったりと、皆さんの閲覧環境によって違うんですが、
ブラウザのタブに表示されているアイコンなんかがファビコンです。

GIMPでファビコン編集


前までは「四角い白地に丸書いて数字」だったのですが、


こうなりました!
お分かり頂けますか?


ファビコンを丸く表示できるようになりました!
四隅の白い余白が無くなっているでしょう!?
画像の背景を透明に設定することで実現できました!!

最初に設定した時から背景は透明にしたつもりだったんですが、
実際見ると透明になっていない。
Windowsペイントでは限界があったのかな。
悩みつつ放置してました。
この度、一念発起してGIMPで透明化トライ
そしたらカンタンに透明化できましたイェイ!

GIMPとは!?
無料で使える高性能画像編集ソフト!
触った感じ、大学の授業で使った(10年前の)Photoshopと同じ感じ。
高性能な分、操作が複雑になるのが難点!
自分の場合、そう頻繁に使うソフトではないので、
”GIMP + やりたい事” で検索かけて操作方法を調べてます。

今回検索したのは以下の3つ。
”GIMP 背景 透明”
”GIMP 2値化”
”GIMP 自動選択”

ファビコンのデザイン


左から、Googleはてなブックマークマイクロソフトデジマートすたじばん
やっぱり、ちゃんとしたサイトさん達のファビコンは遠くからでも見やすい!
ウチのマークは十分シンプルだと思うんですが、ファビコンとなると見づらいすね。
まぁいいや。
ファビコンなんて飾りです。

まとめ

ブログのシンボル、ファビコンを、ちょこっと改良!
画像編集ソフトGIMPを使って背景を透明化しました!
微妙な変更点ですが、見栄えが一歩理想に近づきました。

全体的にデザインがイケてないクズ当ブログですが、
ちょこちょこカスタマイズしていこうかなと思っております!
今後ともご贔屓に~!

好奇心は猫を殺す

10月始めに更新して以来間が空いておりますが、皆様お元気ですか!?
自分の方はライブやったりとそれなりに元気に活動しているんですが、
なんでブログは続かないかなー??

せめて「ブログやってます!!」と胸を張って言える程度には更新したいんですが。

思うに更新するネタ自体は転がっているんだけど、
それに気づかずにスルーしているのが実態なんじゃないかと!
ネタに対するアンテナの受信感度を上げていかないといかんのですな!!

マスプロ電工 マスプロ 地上デジタルアンテナ 【20素子 普及型】 U206
マスプロ電工 マスプロ 地上デジタルアンテナ 【20素子 普及型】 U206

アンテナといえば、
我が家はちょっとした窪地にありまして。

Flood Maps
こちらのサイトで、海抜を調べられます。
海抜というか、海面が何メートル上昇したら水没するかがわかるようです。
自宅は周囲の家々に先駆けて、海面上昇9mで水没するみたいです!!

何が言いたいかというと、
四方を台地に囲まれていて、地デジの受信感度が著しく低いです!
雨の日はテレ東がノイズで残念な事に!!

何事もアンテナ高くしていきたいですね!?
という話でした!!
好奇心強く!!