スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
総合案内当ブログについて
Windowsの目次Linuxの目次Linuxの目次2・ ・自作PC関連の目次Web技術関連の目次
全記事一覧情報サイト新着RSS一覧

Sponsored Link

【Project】GIMPでバナー作成など【Mikunchu】

MaCoPix以来ほとんど何もできてなかった僕ですが、バナーを作りました!!
Mikunchu468x60.png
468x60
Mikunchu200x40_2.png Mikunchu200x40.png
200x40
Mikunchu88x31.png
88x31

Webのバナーは一般的にこの3つのサイズらしいです。
ここまでに使ったのはGIMPのみ。忘れないうちに手順などを。

まず、初音ミクの「公式」イラストは(知ってる限り)この3つっぽい。
miku_.jpgノーマル。 miku_sd.jpgSD。 miku_sing.jpg歌うミク。
これらは基本的にピアプロの利用規約、ガイドライン内で自由に使っていいはずです。たしか。
他の絵は厳密には作者さんの許可がいるんですね。自由に使ってください、って言う方もいらっしゃいますが。
というわけで、バナーに使用する絵はこの公式イラストから作ることにしました。

まず、なんとなーく頭の中でデザインを考えつつ、一番大きいサイズ、468x60から。いじりやすいので。
公式の3つの絵の中から、歌うミク、SDミクなら上半身だけ切り抜いて、ロゴの横に配置しやすそう、などと考えてみます。

まず元素材となるイラストの加工。とりあえず扱いやすいように(扱い慣れてるように)pngに変換して保存。
「画像」→「複製」でとりあえず複製して(失敗してもいいようにw)
Screenshot-画像の保存「ファイル」→「名前をつけて保存」でpngを選択。(ファイル名に.pngでもOK)

以前Gimpで画像の背景透過処理などでやったように、適当に上半身を切り抜いて、背景に透過処理。
このときの切り抜きサイズは結構適当です。サイズよりデザイン的にバランスがいいあたりを大体選択して切り抜き。
で、前の記事で教えてもらったように、「レイヤー」「透明部分」→「アルファチャンネルを追加」しておいてから、
Screenshot-ツールボックスファジー選択で背景の白い部分選択して、「選択」→「選択範囲の拡大」にて1px拡大(輪郭きっちり出すため)
これを選択領域ごとに何度か繰りかえして、キャラの画像以外、背景部分を透過処理したら、バナーサイズに合わせて高さを60pxに縮小。
mikux60.png sdmikux60.png
で、できたのがこの二つ。左右に余ってる部分があってもキニシナイ。どうせ透明だから。

さて、次はロゴの製作ですが、まずはフォント挿入でやってみました。
「新規画像の生成」に親切なことにWebバナーで468x60が用意されてます。これで生成。真っ白な468x60の画像ができます。
ツールボックスから「A」ってあるとこ、「フォント」を選んで、フォント名やらサイズをまずは適当に。
画像の中のフォント入れたい辺りをダブルクリックすると、Screenshot-GIMP テキストエディタ-1テキストエディタが出てくるので、これで入力。「Project Mikunchu♪」
サイズを分けたいときは、まずは一つ「Project」で、右ないしは下のまた適当な部分ダブルクリックで、フォントサイズ変えておいて「Mikunchu♪」
ここでのフォントはインストールされてる物全部選べるみたい。

で、さっきの高さ60pxにした画像から、「編集」→「可視部分をコピー」して、フォントを入れた468x60な画像に「貼り付け」。で、いい感じに端のほうまで貼り付けた画像を移動。
Mikunchu1.png
そんなこんなでできたのがこんなの。
ちなみにWikiのトップにある、かおりんさん作のロゴ。ロゴを作ってみた。(笑)のロゴ、これのデータも頂きましたので、レイヤー切り替えとか色々やって「みくんちゅ♪」の部分を頂いて。
Mikunchu.png
で、できたのがこれ。
まぁ他にもいくつかこの時点で試作ができてましたが。

ロゴがただのフォントじゃビミョーだなー、とか思ってたら、あるじゃないっすか!GIMPに「ロゴ」生成機能が。
フォント入ってるレイヤーで「フィルタ」→「ロゴ効果」で色々試してみる。
Screenshot-Script-Fu: エイリアン発光効果を選択して。
Screenshot-色の選択 (Script-Fu)効果の色とか、背景の色とか、効果の範囲とかを試行錯誤。
で、結局今回使ったのは「ネオン」で水色っぽく。効果の範囲も少し小さめに。
MikunchuROGO1.pngで、できたのがこれ。
MikunchuROGO2.pngProjectを小さくしてみたもの。
MikunchuROGO4.png同じく小さく「してもらった」ものw
まぁこのあたりは画像との配置の兼ね合いで若干変更することとして。

さて、ここまでできればさっきと同じ手順でミク画像を配置していけばいい。
とはいえ、ロゴの背景が白いままだと画像入れてからロゴ入れるときに重なった部分が消されてしまったりするので、こちらも透過処理して「可視部分をコピー」で貼り付けていくことにしました。
「新しい画像」で468x60の画像を生成→左右にミク画像の「可視部分をコピー」してそれぞれ配置→ロゴ画像の「可視部分をコピー」してバランスいいあたりに配置→pngとして出力保存。
これで一番上の大きいバナー完成。

同じく中・小もまた「新しい画像」で200x40、88x31をそれぞれ作り、ミク画像の方はあらかじめ高さを合わせるように縮小。
ここでは高さと幅はリンクさせときます。ミク様の姿はそのまま小さくするのです。
で、中の画像はロゴの文字の配置を変えて、余計な部分を極力落とせばおさまったので楽だったのですが。
小の画像は細かかった・・・
まず、ロゴはチェーンしたままでは到底収まらないので、高さを31に合わせたままリンク切って幅だけ縮めていきました。
最初SDミクの後ろにロゴ入れればいいや、と思ってたんですが、ロゴが隠れて読めないので。幅を詰めます。
で、ギリギリまで幅を削り、88x31の画像にロゴを貼り、ミクを貼り。何度か繰り替えしてやっといい感じに収まったのが一番小さい画像。
最終的にはレイヤーとしてフォントの画像の方を貼り付けてリサイズ。これに早く気づけよ俺。
まぁ176x62くらいで作業して、後で縮小してもよかったんだけど。細かかった。。。

今回覚えたことは「ロゴ効果」ですね。使いこなせればかなり強力。多機能だな。GIMP。

関連記事
Gimpで画像の背景透過処理など
GIMPのレイヤーの超基礎
【Project】Mikunchu♪Wiki作りました。【Mikunchu】
【Project】GRUB2のOS選択画面背景変更【Mikunchu】
【Project】そして至☆高のTwitterクライアント「みくった~♪」公開と進展【Mikunchu】

早速バナーとして・・・
Mikunchu468x60.png
関連記事
総合案内当ブログについて
Windowsの目次Linuxの目次Linuxの目次2・ ・自作PC関連の目次Web技術関連の目次
全記事一覧情報サイト新着RSS一覧

Sponsored Link

コメントの投稿

管理者にだけ表示を許可する
ブログ内検索

カスタム検索

フリーエリア

クリックで救える命がある。

レンタルサーバー

さくらのマネージドサーバ
さくらインターネットのVPS
ConoHaのVPS
WebARENA VPSクラウド
99円レンタルサーバー
【CloudCore VPS】
GMOクラウドのレンタルサーバー
転送量無制限 ABLENET
@WAPPYレンタルサーバー
SPPDレンタルサーバー

カテゴリー+月別アーカイブ

 

アクセスカウンター

現在の閲覧者数:

プロフィール

Author:tmin
PCヲタ。ライト2ちゃんねら。
スロット好きのギャンブラー。(元
むしろ人生がギャンブルだが目下のところ負けっぱなし。
座右の銘は「結果オーライ」。故に基本適当。
トラブルもまた楽しみのひとつ

コメント、トラバ、相互リンク歓迎。お気軽にどうぞ。
当ブログについて
Twitterでこっちとあっちの更新情報流すことにしてみます。
http://twitter.com/t_min
Project Mikunchu♪Wikiできました。
Mikunchu200x40.png


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。