あれこれ見比べながら作った見出し画像。いざ掲載してみるとなんかしっくりこなかったので微調整を施してようやくできあがりました。最終的にできた見出し画像がコチラ。
![]()
全体的に眺めてみたところ、どうも白が多くて寂しい感じだったので、ラインの色を青系に、背景も薄い水色を入れてみました。これでなんとなく締まった感じがしたので、今度はその下に配置する小見出し用の画像を作成することに。
この小見出し用の画像、どんな感じにするかかなーり悩みました。だって、すぐ上にくる見出しが文字だけで作られてるんですよ。しかも、小見出しが付くのはこのサイトの中心であるレビューのタイトル。実際に小見出しもテキストだけで作ってみたんですが、どうもレビューが目立たないというかパッとしません。
そこで、こんなん作ってみました。



見出しってゆーか、バナーですね。右側にレビューしたそれぞれのHDDの画像を配置して重みをつけてみました。ちょっと文字のインパクトが薄いような気もするんですが、その辺は後で微調整することにして、実際掲載するとどうなるかってゆーと、こーなりました。

ただ見出しを画像化して、小見出しに写真を入れただけなんですが、当初のデザインより格段に華やかになりました☆また、小見出しに入れたHDD写真があることで、どんなHDDをレビューしているのかというのがパッと見て分かるように。うん、我ながらいい感じ。
ちなみに、HDD写真を枠からはみ出させたのはノンデザイナーズ・デザインブックに書いてあったテクニックのひとつ。全般的なデザインのお勉強にと購入した本なんですが、いろんなところで参考になってます^^
でもまだなんか寂しい感じがするんですよねぇ。せっかく3種類18件ものレビュー記事があるのになんとなく寂すぃ.....。ということで、次はこの辺に手を加えてみたいと思います。
「ウェブデザイン奮闘記」関連記事
- [リニューアル]HDDサイトのレイアウト再考
- [リニューアル]デザインの基礎知識を学ぶ
- [リニューアル]サイトの内容を整理する
- [リニューアル]レイアウト案を作る
- [リニューアル]レイアウト2パターンの比較
- [リニューアル]レイアウト決定
- [リニューアル]Photoshopで画像作成
- [リニューアル]見出し画像の作成
- [リニューアル]見出し画像のフォント
- [リニューアル]小見出し用のバナーを作る
- [リニューアル]記事タイトルを画像にしてみる
- [リニューアル]全体のコントラストを見る
- [MT]HTMLからMTテンプレートへ(ヘッダー編)
- [MT]HTMLからMTテンプレートへ(記事リスト編)
- [MT]HTMLからMTテンプレートへ(まとめ)
- [リニューアル]リニューアル完了
この記事に関連情報
同一カテゴリ内の新着記事
- 完全に1カラムになりました
- 今年3度目のリニューアル、ほぼ完了
- うかブログ デザインVer.5
- うかブログ デザインVer.4
- うかブログがなぜ黒/白を選択しているのか?
- ブログのデザインはシンプル イズ ベスト
- メモリ増設レビューサイトをリニューアル
- ブログに掲載するのに適当な写真のサイズ
- うかブログ デザインVer.3.1
- Photoshopで簡単レタッチ
- このカテゴリの記事を全て見る
関連カテゴリ一覧
トラックバック
トラックバック先URL:
この記事に関するコメント・クチコミ情報
- 2007/09/06
- ちあき.
- 2007/09/07
- うか
>ちあき.さん
普段もあれこれ試しながら作ってるんですが、今回はブログにレポートを書いてるってんで普段以上に考えてます(笑)
ちあき.さんちの記事タイトルの背景画像、あれはもともとタイトル=1行を前提に作ったものなので、2行になるようであれば別のものの方がよろしいかと思います。少なくとも左側にワンポイントあるようなもの(今のようなもの)は複数行には向かないかもしれないですねぇ。
いっそのこと記事タイトル部の背景はなくしちゃって、CSSで下線を引く程度にした方がすっきりするような気がします。
こんにちは♪
先日からのウェブデザイン講座、ものすごく興味深く拝見してますっ!!!
見出し画像一つ作るのにも、こんなにいろいろ試行錯誤されてるなんて、やっぱりスゴイですよねぇ……(。´Д⊂)うぅっ。
実は、ウチのサイト、作っていただいたタイトル背景画像、ちょっといじって変えてみたんです。クローバーワンポイントのライン、見やすくて気に入ってたんですが、私のつけるタイトルが長すぎて、1行に納まりきらないことも多くて……(;´▽`A``。そうなると、ラインとかぶってしまって、読みづらくなるので、ちょっと幅を広げようかと……。でも、ただ、広げただけじゃ、1行タイトルの時に、白い隙間が多くて寂しげかと、ラインにグラデーションをプラスしてみたり……。
あれこれいじってみたんですが、私の今の画像作成技術と、素材作りに当てられる時間を考慮すると、もう、これが限界か。。。orz……ってかんじだったので、とりあえず、差し替えてみました。
……そ、そしたら、なんかめっちゃ印象濃ゆい!Σ(・`д・ノ)ノ とりあえず、すこしはあっさりするかと、右のサイドバータイトルの背景をオフにしたりしてみてるんですが、なんだかな~~(;-_-) =3……ってかんじです。デザインって、ほんと、奥が深くてムツカシイですよねぇ~~。。。。(。・ε・。)ムー ……まぁ、またそのうちに、少しずついじっていこうとは思ってますが……。そのためにも、この、ウェブデザイン講座、しっかり読ませていただきますねっっ!!!
超長文、失礼しましたぁ~~っm(_ _)m