画像編集ソフトについて

このホームページで使用した画像は全てGIMPで編集しました。（写真は実際にデジタルカメラで撮影したものです）GIMPとはフリーの画像編集ソフトです。フォトショップとほとんど同じ機能を無料で利用できます。

 

背景画像

背景画像はグラデーションで作成しました。グラデーションは違う色の重ね合わせと透明度の調整で鮮やかな色を演出しました。

ヘッダー画像

昆陽池の端（昆虫館の反対側）から昆虫館を撮影した写真を使用しました。左上、右上を角丸の範囲選択により切り取り、角丸に編集しました。明るさとコントラストの設定を行い、ロゴがくる位置に白いレイヤーを重ね、不透明度を下げることで背景をうっすらと表現しました。

 

サイトロゴ

緑色をベースにガイドマップのタイトルっぽくシンプルにまとめました。

 

メインビジュアル

デジタルカメラで撮影した写真の中から「白鳥」が泳いでいる写真を選び加工しました。昆陽池の池の色は緑がかっているのでGIMPの明るさ・コントラストを調節し、色彩も少しだけ調節しました。左下と右下の角丸はヘッダー画像の要領で編集しました。

 

見出しの背景

各見出しの背景は角丸の範囲選択に単色で塗りつぶしただけです。見出しは分かりやすさが重要なので単純設計です。

 

コンテンツの背景

コンテンツの背景には角丸の白の背景を入れています。上、下2つの画像を使用し、背景が角丸になるようになっています。背景の作成は今までと同じように範囲指定に白で塗りつぶしたものです。この角丸設定はCSS3なら画像を使わなくても表現可能なので、今後はCSS3の勉強もしていこうと思います。

 

トップページの主要リンクの写真

範囲選択の周りをぼかす機能を使いました。

 

 

 

フッター背景

昆陽池公園の広場の芝生の写真を撮影し、使用しました。

 

サイドバーのバナー

リンク先が分かりやすいようなバナー作成を意識して作りました。背景、周りの枠、タイトル部分の背景、タイトル文字のレイヤーで作成しました。

 

 

サイドバーのサイト内リンクの画像

各ページで作成済みの画像を使いまわしているものと、画像サイズのみを合わせたものであまり加工していません。

 

 

 

 

各ページの写真

ドロップシャドウ効果をつけたものが多いです。写真ページの写真は元画像をリサイズしただけです。（写真として見る写真は自然のままが良いと思います！）

 

 

 

 

野鳥カレンダー

各野鳥のアイコンはそれぞれGIMPで個別で作成しました。最終的に背景になるカレンダー部分と合成しました。

 

 

 

2012年5月12日 2:03 PM | カテゴリー：サイト制作で使用した技術 | コメント（0）