非デザイナーがフリー素材を使ってロールオーバーする画像リンクを作ってみた

誤解されることが多いのですが私はデザイナーではなくてプログラマーなんです。ということで、デザインは全然できません。けれどもサイトの作成をするにあたって画像を加工したりCSSで色々やってみたりはしています。今回「株式会社RYUS XOOPSサービス」のサイトをプチリニューアルするときもフリー素材を使ったり、CSSを使ってロールオーバーしてみたりと色々やってみたのでそれについて書きます(^^)/

絵が描けなければフリー素材を探せばいいじゃない!?

ということでサイトに載せるような絵は全然描けません。といってもやはり画像があるとインパクトが違うので画像を入れたい、外注するほどの予算も無し…ということでフリー素材を探してみました。

株式会社RYUSはペンギン好きなのでとにかくペンギンの素材を探してみました。そしてこちらでペンギンの素材を見つけました。

シルエットデザイン

ここにある検索に

ペンギン と入力して検索します。

このようにいくつかのかわいいポーズをしたペンギンの素材を見つけました。DOWNLOADをクリックします。

penguin1.zip

というファイルがダウンロードされますので解凍します。

penguin1.ai

というファイルがあるのでこれをFirefoxで開きます。

横幅が467ピクセルなのであまり大きくないのですが、

クリックするとこのようなベクター素材だということがわかります。ベクター素材なので拡大しても縮小してもきれいなままなので好きな大きさにすることができます!

素材はこのペンギンを使いました。

吹き出しは

小樽総合デザイン事務局 【商用OK】漫画風フリー素材ふきだし編40個【無料】

のものを使わせていただきました(^^)/

そしてフォントは、

ラノベPOPフォント は可愛くて印象的なフリーフォントです!

でご紹介した ラノベPOPフォント を使わせていただきました(^^)/

ロールオーバー画像ボタンを作る

ロールオーバー画像ボタンとは画像の上にマウスを載せたときだけ別の画像が表示される画像ボタンです。

まず、通常表示される画像を上記の素材を使って作りました。

こんな感じで trouble_penguin.png という名前で作ってみました。そしてそれをコピーして trouble_penguin_hover.png という名前の画像を作ります。マウスが載ったときにちょっとだけ変えてみます

ペンギンのポーズと吹き出しの背景色を変えました。

あとはHTMLとCSSでロールオーバーの動きを指定します。

HTML


CSS

xoops_banner_1 というidを持つdivの表示をCSSで指定します。画像はbackground-imageで指定して通常はtrouble_penguin.pngを表示します。a:hoverリンクされている部分にマウスが載った時の指定となります。その際、background-imagetrouble_penguin_hover.pngになるように指定しています。

これでマウスを載せたときに、別の画像が表示されるようになります。

実際の動作は 注文の多いXOOPS屋 こちらから確認してみてください(^^)/
3つある画像ボタンがそれぞれ違う動きをしますよ~

1コマ漫画的画像を「コミpo!」で作りました

その他1コマ漫画的画像を「コミpo!」で作りました。

「コミpo!」は漫画を書くソフトなので背景や、びっくりしたときの効果線などもたくさんあるのでちょっとした漫画的な素材を作るのに便利です。

私が持っているバージョンは

こちらで、ビジネススーツを着た人物などもあるのでWebサイトを作るときに時々利用しています(^^)/

まとめ:絵が描けなくてもなんとかなりますね

このようにフリー素材やCSSを使ったり、有料だけど「コミpo!」のように素人でも漫画が描けるようなソフトがあることで非デザイナーでも予算の関係とかで(^_^;、なんとかしなきゃいけないときはとりあえずなんとかなる、感じがします。

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る