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

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

Wordでロゴをデザインする

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

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


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

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

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

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

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

GIMPで背景透明化する

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

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

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

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

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

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

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

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

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で水没するみたいです!!

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

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

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

ピンタレスト風

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

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

ピンタレスト解説ページ

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

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

設定

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

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

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

まとめ

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

お前のブログには足りないものが2つある!

前回のBBQ記事の方読んでもらえたでしょうか。
ちょっと雰囲気が変わったかなと思うんですが、どうでしょうか。
ネット広告とかで稼いでいる(?)という友人が
「読んでもらえる記事の書き方」
を伝授してくれたので、シェアしたいと思います!!

 

読んでもらえるブログに必要なもの2点

当ブログに足りていないものとして2点挙げてくれた。
曰く

「目次」 と 「まとめ」

だそうだ。
確かに、普段読んでるほとんどのブログには目次とまとめがある。
目次もまとめも、それだけで記事の大まかな内容を把握できるし。
むしろ要約になってないようじゃダメだ。
忙しい人向けってわけではないにせよ、目次とまとめを眺めて、
読む価値のある記事なのか一瞬で判断できるようになってないとイカンって事なんだろう。

大学でも、学術論文を書く時は結論(まとめ)から書けって教わったし。
まとめ大事。
結論を先に書いて、そこから逆算して本文を組み立てていくやり方。
通ずるものがある。

さっそく取り入れるべし!

目次を実装する

プラグインTable of Contents Plus

目次を自動作成してくれる仕組みがWordpressにはあるらしい。
「Table of Contents Plus」というプラグイン。
本文中に見出しタグを挿入していくと、最終的に目次を仕上げてくれるという。
即インストール。
設定のやり方はこちらのサイトを参考にさせてもらった。

http://netaone.com/wp/table-of-contents-plus/

自分がインストールしたバージョンは日本語化されてたので、簡単に設定できた。

見出しをつける

見出しタグに従って目次を作ってくれるTable of Contents Plus。
当然、見出しタグを本文に挿入しないと機能しない。
が、しかし!
見出しタグなんて今まで使ってなかった!!
いい機会だ
さっそく使ってみよう。

151127hutatu01

ダサい!
地味!
字が大きくなって、上下の間隔が大きくなっただけだし。
よそ様のようにカッコイイ見出しを付けたいよう!
教えて!Google先生!!

~~~~検索中~~~~

CSSで装飾するのか・・・
なるほど。
CSSとはホームページ本文に色を指定したりするプログラムのこと。
(だと思う)

見出しのソースコードはこちらのサイトを参考にした。

http://web-dou.com/tool/css_gen_h.php

形状や色を指定して、好きな見出しを作れるらしい。
コードを書く技能は無いので、こういうサイトは実にありがたい。

またここで少しつまづく。
見出しの色はすたじばんで使っている赤色にしたいんだけど、色コードがわからない。

そこで利用したのがこちらのサイト。

http://pick.v-colors.com/?url=http%3A%2F%2Fstajivan.com%2Fhttp://

URLを入れるとページで使われている色情報を解析してくれるというすごい技術。
ウチの赤色は#e04040だそう。
OK。
できました~

151127hutatu02

なんだか一気に雰囲気変わったような!
ブロガーっぽいぞコレ!

 

まとめを書く

始めの方で、「結論から書き始める」という作文法の話をしたけど、
自分は、書きながら考えるので結論から書いても内容がズレてしまう。
当初は書こうと思っていなかった事がどんどん出てくるんだよね。
もちろん結論を想定して書くことは、話の道筋がそれてしまうのを防ぐのに大切なのはまちがいない。
何にしても”まとめ文”の書き方に上手なメソッドが思いつかない。
これは今後記事を書きながら経験を積んで独自の方法を己の手で編み出すのを期待しよう。
前回は箇条書きにしたけど、それもどうかなぁ~。

 

まとめ

以上、読んでもらえるブログにになるには大事な事が2点。
「目次」と「まとめ」
という話でした。
目次をプラグインで実装するにあたって見出しのCSSを編集する所に行きついたのはよかった。
いつかはやらないといけない所だし。
良い記事を書くには、文体とか文字数とか、まだまだ多くのメソッドがあるみたいだけど、
とりあえず一歩前進ん!
これからもがんばるぞい!