スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

サイト模写(Paul) 1 ヘッダ、メイン、フッタ画像配置

1.ヘッダ、メイン、フッタ画像作作成・配置

サイト「Paul」の模写の第一回目は、何と言ってもPaulのサイトの象徴とも言える
サイトデザイン部分です。
全体を額縁で囲み、落ち着いた色合いでまとめることで品が良くグッとオシャレな感じが出ていますね。

オシャレ、という事はその分作りが単純ではないという事ですね(笑)

額縁部分ですが、上部は名前のロゴを売れるヘッダに、
中央は、コンテンツを入れるメインに、
下部は、copylightのお決まり文句を入れるフッタにします。
これらを画像ですべて繋げる必要があります。

この画像をすべてバックグラウンドイメージで表示
その上にDIVを使用していろいろな要素を配置していくと、画像がずれたり背景の画像が消える等にトラブルが起きやすくなる為(解決方法があれば教えてもらいたいです。)
今回は構成にDIVを使用せず、TABLEで構成していこうと思います。

それでは、イラストレータ又はフォトショップで画像を作成します。
四角い枠を作ってしまって後から保存する際に分割して保存するのがベターです。
額縁は外側に行くにつれて黒くする事で、バックの黒と途中から融合するような深みのある雰囲気になります。
影を付けるのならフォトショップの方が簡単にできるような気がします。

ヘッダ部分

まんなかの画像はy軸をリピートするので長くする必要がありません。
メイン部分

フッタ部分


この画像を各DIVの背景画像に設定します。


 

トラックバック

コメント

コメントを残す

Secret


スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。