読者です 読者をやめる 読者になる 読者になる

のんじゃんる

何でも書こう、ネタになる

GIMP でバナーを作ろう!

どうも、@とよしー です。

今日は練習用Webサイトの方を少しいじりました。
どうもこのへんは苦手です。そう、バナーの作成です。

GIMP でバナーを作ってみる

Web業界では、バナーなどの素材は、Adobe Illustrator や、 Adobe Photoshop などを使うと思うんですが、僕はフリーソフトGIMP を使ってみました。一連の流れをまとめてみました。

まずは GIMP を起動します。
f:id:tktyo:20140806214128p:plain

「ファイル」-「新しい画像」を選択して・・・
f:id:tktyo:20140806214148p:plain

テンプレートで「Web banner common 468×60」を選択します。
f:id:tktyo:20140806214231p:plain

480×60 のキャンパスが作成されるので、背景を青と白のグラデーションで塗りつぶしてみました。
f:id:tktyo:20140806214318p:plain

さらに新しいレイヤーを追加して
f:id:tktyo:20140806214404p:plain
f:id:tktyo:20140806214429p:plain

ちょっと見にくいですが、透明な背景の上に「Service」という文字をいれました。
この時、最初に作った背景のレイヤーは非表示にしています。
f:id:tktyo:20140806214436p:plain

背景のレイヤーを表示させると・・・
f:id:tktyo:20140806214520p:plain

2つのレイヤーを重ねた画像が表示されます。
ここまで出来たら、「ファイル」-「Export As」を選択し、png形式でエクスポートします。
ファイル名は「bnr_service.png」としました。
f:id:tktyo:20140806214559p:plain

バナーを読み込むソースは以下のとおりです。
ul、li タグで画像のリンクを張っています。

<!-- Information コンテンツ -->
<section>
	<h2>INFORMATION</h2>
	<ul>
	    <li><a href="#"><img src="images/bnr_reclute.png" alt="reclute"></a></li>
	    <li><a href="#"><img src="images/bnr_service.png" alt="service"></a></li>
        </ul>
	</section>

うまく Webサイトに反映されました。
f:id:tktyo:20140806214948p:plain


しかし、色の統一感がない・・・(;´Д`)
webサイトで使用する色については Adobe Kulerを使うと便利です。
これも追々紹介していきたいと思います。

では、今日はこのへんで