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を方眼紙にするタイプだろ…?」
等々
心に直接語りかけてくる声が聞こえるような感じですが。
何かしら参考になれば良いんですが、どうでしょうか?!

5月14日はブログ記念日!

去る5月14日は当ブログの開設記念日だったみたいです。
開設記念日にあたって思う所をつらつら。

旧ブログざっくりレビュー

当ブログは2回移転してまして。
始めはJUGEMUブログ。

奇妙なスタラクタイト
移転しました。新アドレス→http://odstalactite.blogspot.com/

アイキャッチ画像はブログの自己紹介ページアイコン。

真面目に書いてて、過去の自分がまぶしい。
読んだ本の感想をちゃんと書いてるのが偉い。
アウトプットしたから内容おぼえてるわ!
と、言いたい所だけどそうでもなかった。
残念。
毎日更新に挑戦している時期があって。
乱読してネタをひねり出してたのも懐かしい。
この頃から「ブログとは何ぞや!」という疑問にブチ当たってた様子。
所々写真が消えてるのが惜しい。

次にGoogleのBloggerに移転。


レイアウトとフォントが超絶ダサいけど、けっこう見やすい?
JUGEMUブログのデータインポートがカンペキにできてるっぽいので、
本家JUGEMUで消えてる写真を閲覧できるところがGoodJob!昔の自分!

その後独自ドメインを取得してWordpressで運営し始めたのが今ココ。

継続はチカラなり

やっぱブログは積み重ねが大事。
書き続ける事書いた物を保持していく努力が多分大事なんだな。
最近はぜんぜん更新できてなくって本当に「お前が言うか」状態なんだけど。
バズった事はまったく無いけど、誰か記事を参考にしてくれる人もいるかもしれないし。
クズ記事ばっかりでも、書き続ければ自然とネットの海に埋もれてくれるから大丈夫かなぁと。

何はともあれ記念日なので、自分の中で祝おうと思う!
来年は笑顔でこの日を迎えられるように、
今日から少しずつでも更新していくとしよう。
いつまで続くかわからないけど(死

ブログの評価方法

続けるためには評価が必要!
何か自分のBlogを評価する体系を作らないと。
ヒット数(死語)にフォーカスすると心を病むのでやめる。
記事の質は評価しづらいし主観にすぎないのでむずかしい。
更新回数も、内容ない更新を重ねてもダメなのでダメだっ!

Blogの評価ってムズカシイ。

最後に考えられるのは
毎日執筆する
という一番面倒くさい方法。

何かに悩んでいる人は、解決策を知らないのではなく、最良の解決策を面倒でしたくないだけだ。
– 森博嗣 –

毎日更新よりは面倒ではないか。
まぁ自己満足ブログなので、書く方も自己満足でいいや。
やろう。

というわけでがんばっていきますので、
これからもよろしくおねがいしまっす。

ピンタレスト風テーマにリニューアルしました!

ピンタレスト風

心機一転、ブログの方リニューアルしました。
Surfaramaという無料テーマなんですが、投稿がザッと一覧になる感じでいいですね。
要は見た目です。
160801screenshot

ピンタレストという画像SNSをイメージした構成になっているらしいです。

ピンタレスト解説ページ

世の中には知らないSNSがたくさんあるみたいですね・・・。

カテゴリーごとにイメージカラーを指定することで、記事一覧が華やかになりました。
ナイス機能だと思います。

設定

細かい設定はこちらのサイトを参考にしました。
ありがとうございました。
設定が全部英語ですが、わりと直感的に決められるようにできているように感じます。

公式デモサイト
公式のデモンストレーションページがまたステキに出来てます。
やっぱり写真映えする感じですね。

160801Surfama_Demo
デモページのスクリーンショットで、赤線で囲んだ所。
自身のサイトだと文字出ないんですよね。
何度見回してもヘッダー下の所に文字を表示する設定が見当たらないので少々悩みました。
デモページのページソースを解析した所、ヘッダー部分に直接記述されている様子。
自分もマネしてみた結果が上の方の
「Welcome To Sta-JIVAN !!」
の所です。
まぁこんなもんでしょうか!?

まとめ

WordPress無料テーマSurfaramaでブログリニューアルしましたよっ
という話でした。
最近更新滞っているので、これが良い刺激になるとイイナと期待。
写真が映えるテーマなので、毎回アイキャッチ画像が必要ですね。
そこはかとなくダルそうだったりしますががが。