【無限の可能性】GIMPでクリッカブルマップを作りました【相関図】

サイトの画像制作や文章記述など、基本的に宗岡が行っています。そのため、このサイトはメイド・イン・俺という感じなのですがなかなか大変です。

特に画像作りは非常にセンスと技術が問われるので苦戦をしております。
本日は、愛用をしているGIMPの便意な使い方、カスタマイズ情報をお送ります。

GIMPお役立ち情報

魔王を護らNEVERの相関図を作りました

こんな感じの相関図になっています。この相関図は「クリッカブルマップ（イメージマップ）」になっており、キャラクター画像部分をクリックすると各キャラページに飛べる仕組みになっています。

簡単に言うと、座標を取ってリンク範囲を指定することで画像の一部にリンク要素を持たせることが出来るというものです。一昔前の技術なようで今では別の方法があるとかないとか…

それはさておき、この「クリッカブルマップ」をGIMPでは結構簡単に作成可能です。魔王を護らNEVERの相関図を例に実際に作り方を解説していきたいと思います。

①クリッカブルマップを作成したい画像を開く
②フィルタ→ウェブ→イメージマップを開く

こんな感じで、イメージマップを作成するためのウィンドウが自動で開きます。このウィンドウでリンクの設置を行っていきます。

③サイドバーにある「□」「○」などのアイコンで範囲を囲むことができます。囲みたいかたちに合わせて選択を行います。今回は「○」を使いたいと思います。

範囲を指定するとポップアップが表示されます。ここで実際のリンク先を指定が可能になっています。

リンクを指定していくとリストがサイドバーに表示されます。ここから修正などが可能になっています。

④リンクの埋め込みが終わったら「テキストとして保存」を行います。
⑤保存したテキストの修正

いらない部分の削除と画像のリンク先を指定してください。
あと、サイトの表示したい場所にコピペをすれば完成です。簡単でしょ？

レスポンシブサイトにも対応をしたい

レスポンシブサイトの場合は画像のサイズが変わってしまい、座標の位置とリンクをさせたい場所に位置がズレてしまいます。そのため意図してない場所にリンク要素が付いてしまい厄介です。

この問題はGIMPでは解決が出来ないので、jQueryプラグインで対応をしましょう。

基本的には上記のサイト様で書かれている通りで簡単にレスポンシブサイトに対応が可能になります。このサイトでも導入しているのでスマホやタブレットなどで試しに相関図を見てみてください。ちゃんとキャラクター画像がリンクになっているのがわかると思います。

GIMPで「.jpg」を高解像度で保存する方法

凄い今更な話題ですが、GIMPはデフォルトでjpgを保存すると低解像度で保存を行います。ちょとした画像保存であれば問題ないのですが、このサイトのような画像が重要な場合は困りモノです。

高解像度で保存をする方法は非常に簡単で、保存時の設定を変更すればOKです。

①別名で保存→保存を選択
②ファイルのエクスポート→エクスポートを選択

③品質を100に変更（デフォルトでは85になっています）

④詳細設定内のサブサンプリングを最高品位に変更して保存

これで高解像度で保存ができます。デフォルトと高解像度で保存をした画像を比較してみましょう。

使用キャラクター：魔王を護らNEVER キーディ＝クロード＝ゴウホーン

フォントまわりの大きな差が出ると思います。綺麗に文字を表示出来ない…と困っている場合は、保存時の設定を見なおしてみれば改善が出来るかもしれません。

GIMPでPhotoshopレイヤースタイルを使う

スーパー便利です。Photoshopに馴染みがある方であれば、この機能の素晴らしさをより理解出来ると思います。GIMP使いの方もこの機能をまずは入れて頂いて便利さを実感して頂ければと思います！

まとめ

本日は、GIMPの便利な使い方というかたちで記事を書かせて頂きました。
最強の画像系フリーソフトなので、末永くGIMPとはお付き合いしていきたいものです。

こちらのページの画像もすべてGIMPで制作しております。ほんまGIMPさま様やで…
製作中の「魔王を護らNEVER」の体験版を今週行われるコミケ86で無料配布予定です。

日時：2014.8.17（3日目・日曜日）
委託場所①：絵動-kaiDO-様 東地区 イ – 55 a
委託場所②：SUOMI（すおみ）様 西地区 く – 40 a

上記の2つのサークル様に委託予定です。どうかよろしくお願い致します。
それでは、本日はこの辺で失礼致します。