架空サイトを作ってみた 猫カフェpart2

WEBデザイン

こんにちは星りんごです!

前回に引き続き、「架空の猫カフェのサイト」のメイキングを紹介します。
架空サイトの完成形はこちら

サイトを作る手順
  1. 構成とデザインを考える
  2. 画像の作成
  3. HTMLを書く
  4. CSSを書く
  5. スマートフォン対応

前回の記事では、構成とデザインを考えるプロセスをご紹介しました。
今回は画像作成について書きます。よろしくお願いします。

画像の作成

サイト内で使用する画像を作成します。
使用したツールは、イラストを描くときにも使う「ClipStudio」

Photoshopやillustratorでももちろん大丈夫です。というかその方がいい。
どっちもない方はGIMPやPXIAなどのフリーソフトでも全然OK!

今回のサイトは、全体的にアンティークで落ち着く雰囲気にしたかったので
「大人可愛い素材集」を使わせていただきました。

サイトのロゴ

サイトのロゴは大事ですよね!

ジャン!
こんな感じにしました。シンプルめですね。

フォントはさっき紹介した素材集から。
猫は自分で描いた。にゃーん
サイト名は適当ですw

ファビコン

ファビコンっていうのはページの上部にある、

これのことです!

「favicon.ico」っていう形式のファイルで、サイトのアイコンみたいなものです。

ロゴの猫ちゃん部分を切り取ってファビコンにしました。

ナビ用の画像

ナビゲーション部分は文字で作るのが一般的ですが、今回は画像を使いました。
設計の段階でナビの項目が6つと分かっているので、画像を6つ作ります。

イラストは「Clip Studio」で手描き
文字は「あずきフォント」というフリーフォントを使っています。
丸くてかわいい!


メニュー

柔らかい感じにしたかったので、四隅をすこし削りました。
次に、マウスをのせると絵が変わるようにしたいのでマウスをのせた時用の画像を作ります。


変化が大きすぎてもうるさいので、少し変わる程度に抑えました。
背景色にも変化をつけて、どこにマウスを置いているか分かりやすくしています。

これをHTML書くときにあーしてこーすると、マウスオーバーが完成します。詳しいことはまた今度。

リンクバナー

サイドバーに設置する、ブログとTwitterのリンクバナーを作ります

 

これも素材集の素材を使って作りました。
素材集、可愛い画像がいっぱいあって迷った・・・

その他画像

その他画像を必要に応じて作っていきます。

・トップページ用画像
・猫紹介用の画像
・メニュー用の画像

などなど。

 

例えば、猫紹介用の画像は・・・


正方形にしてフレームをつけたり!

 

メニュー用の画像は・・・

背景を削除したり!

というようなことを地道にたくさんやります。
写真はすべて、フリー写真サイトからダウンロードしました!
フリー写真めっちゃ助かる

まとめ

以上で、画像の準備は終了です!
必要な画像ができたらいよいよコーディング作業に入ります。
ということで次回はHTMLです。
どこまで詳しく書くかはまだ決めてませんが(;´・ω・)

次回もよろしくお願いします。ではまた~

 

タイトルとURLをコピーしました