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

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

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

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

ピンタレスト風

心機一転、ブログの方リニューアルしました。
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を編集する所に行きついたのはよかった。
いつかはやらないといけない所だし。
良い記事を書くには、文体とか文字数とか、まだまだ多くのメソッドがあるみたいだけど、
とりあえず一歩前進ん!
これからもがんばるぞい!

ブレイクする日までがんばろう

目下のところ、ブログ更新が続かないのが悩みな訳で。
読まれている方からすれば、「いいから更新しろよ」という話なんだろ。
実際更新し続けるしかないよね、という結論に至ったので報告。

なかなかブログ更新できないのには色々と理由があって。
・音楽やっている身としては音楽ブログにしたい
・音楽ブロガーとしてブランド力を養いたい
などなど。
無駄に意識高いエゴが邪魔して、ネタを吟味しているうちに書きたい勢いを削がれているのかなぁと。

一方で、記事そのものの出来に自身がないという点も気になっていて。
・記事として残るからには価値のある物を書きたい
・SNSで拡散するからには読んでもらうに値する記事を書かなくてはいけない
と、自分にプレッシャーをかけている所もあるのではないかと思う。

世論や定説が時代の流れと共に相当なスピードで流転するネット社会。
ブログのありかたをどう考えるか?
なんて自分の小さな脳みそでは流れを読みきるなんてできない芸当なわけで。
敏腕プロデューサーでもいて、「次はコレがくる!」とか教えてくれるといいんだけど。

でもそれは音楽もいっしょなんじゃないか。
新しい音楽をやっている人は常に一定数いて、
その中から、様々な社会的な要因によって形成される音楽的トレンドの波に乗った人がブレイクするのではないか。
さらに、流れを読んでうまく乗り続けられる、
流れを意識して自分をうまく変えていける人がレジェンドとして歴史に名を残すのではないかな。

いまさらそんなことに気づいて、自分の才能のなさに絶望しているんだけど。
もはやレジェンドにはなれないので、せめてブレイクを狙いたい所。
自分のスタイルを貫いて、時流の方が偶然乗っかってくれるのを待つしかない。
結果的に「やっと時代がおれに追いついたわ~」という状態を狙うのだ!
くぅ~意識高いww

まずは自分のスタイルを確立していかないと、流れが来ても乗ることができない。
スタイルを確立せねば・・・
どうすれば?

更新を続けていくしかない

一番面倒くさい結論に至ってしまった!
となると何でいままで更新サボってたんだよ!
なんかもう後悔の嵐だ。

ということでブレイクする日を夢見て更新継続。
がんばっていく所存。
炎上だけはかんべんな。

ドリームラッシュ情報ページ作成&告知

固定ページにドリームラッシュの紹介ページを作成。
4日前に公開済みなので今更ではあるけど!
150311tab1
トップページからはブログタイトルの下にあるタブをクリック。

いざ「ライブやるよ!」となった時
『ドリーム・・・ラッシュ・・・?誰・・?』
となるので、参照先を用意しないといかんと思ったゆえ。
いまだ活動が有るか無いかわからないようなバンドなんだけど
いつかはGoogle検索で上位に行けるようになりたいですな。

ついでに告知を一つ。
3月22日(日)に南浦和は宮内家にてオープンマイクに参加!
午後2時開場、入場無料の1オーダー制。
3曲ぐらい弾き語る予定。
バターチキンカレーが超絶美味いので、よかったら是非!

更新がんばろう

久々更新。
2月は短いとは言え、丸一ヶ月ぶりの更新!
なんでまた書き始めたかというと、
「ブロガーの才能とは、結局は続けることだと思う」
というエントリーを読んで。
ブログを生かすポイントは、更新する習慣を維持できる環境作りだそうで。
まったくおっしゃる通り。
実感として、更新が続いている期間は習慣的にブログをいじるサイクルが生まれていた気がする。

自分は2003年ぐらいからブログを書いたり書かなかったり、書いても消したりしてるんだけど。
息が長い方かと思うけど続いているとは言いがたいからねー。
トータルで見ると書いていない日の方が絶対多い。

読む価値のあるブログをめざして頑張ってきたつもりなんだけどぉ
内容にこだわらなければそこそこ書ける気もするぅ
なんて余裕ブッこいていると後ろから撃たれそうで怖いが。
クオリティーを気にしたゆえにお蔵入りしたネタもいっぱいあった(気がする)ので、
何でも書いていってネタを逃さない方が大事か。
いざとなったら断捨離だ!
断捨離ィィ!!

やる気が出てきたので活かす方向で。
いつまで続くかご期待ください。