Photoshop

現在ホームページリニューアル中なんですがコンテンツに幅が可変の影付きで角丸のテーブルをつけることにしました。

■設置対象ページ

今回はホームページ制作のフロー詳細を素敵なテーブルで作っていきたいと思います。

■必要な物

1.テーブル用画像

2.CSS

3.やる気

1と2につきましてはチュートリアルを書きますが3については何とかしてください。

それではまず画像を作りましょう。

サイズは幅が可変ですので特に気にしなくてもOKですが、実際設置するページに配置するのが良いでしょう。

1.Photoshopの角丸矩形ツールで上記のように角丸矩形を描きます。

（今回は半径6pxで作成しました）

2.グラデーション・ドロップシャドーを追加

3．画像を刻む

7つに刻んで保存

・上左・・・tl.png

・上右・・・tr.png

・中左・・・ml.png

・中右・・・mr.png

・下左・・・bl.png

・下右・・・br.png

・中央・・・ms.jpg

CSSを書き込む（iG:Syntax Hiliterがうまくいかないので見にくくてすいません）

.dialog {

width:80%;

margin:0px auto;

min-width:20em;

max-width:500px; /* お好みにより編集してください */

color:#333;

width:expression(document.body.clientWidth > 502? “500px” : “auto”);

}

.dialog .hd .c,

.dialog .ft .c {

font-size:1px;

height:18px;

}

.dialog .ft .c {

height:14px;

}

.dialog .hd {

background:transparent url(images/tl.png) no-repeat 0px 0px;

margin-right:19px; /* 右角スペース */

}

.dialog .hd .c {

background:transparent url(images/tr.png) no-repeat right 0px;

margin-right:-18px; /* 上余白からの引き込み */

}

.dialog .bd {

background:transparent url(images/ml.png) repeat-y 0px 0px;

margin-right:18px;

}

.dialog .bd .c {

background:transparent url(images/mr.png) repeat-y right 0px;

margin-right:-18px;

}

.dialog .bd .c .s {

margin:0px 10px 0px 9px;

background:#ededed url(images/ms.jpg) repeat-x 0px 0px;

padding:1em;

}

.dialog .ft {

background:transparent url(images/bl.png) no-repeat 0px 0px;

margin-right:18px;

}

.dialog .ft .c {

background:transparent url(images/br.png) no-repeat right 0px;

margin-right:-18px;

}

/* テーブル内コンテンツ */

.dialog h1 {

/* ヘッダー */

font-size:2em;

margin:0px;

padding:0px;

margin-top:-0.6em;

}

p {

font-family:Arial, ‘ＭＳ Ｐゴシック’, sans-serif;

}

.dialog p {

margin:0.5em 0px 0px 0px;

padding:0px;

font:0.95em/1.5em Arial, ‘ＭＳ Ｐゴシック’, sans-serif;

}

html>body .dialog pre {

font-size:1.1em;

}

完成系はこんな感じです。

めんどくさいという人はここから全部ダウンロードしてください。

パスワードは『castage』です。

かっこいいアナログ時計の待ち受けを作りましょう。

必要なもの

1.かっこいいアナログ時計の画像

2.ちょっとしたFlashの知識

以上。

下ごしらえ編はざっくりとしたPhotoshopCS3を使用した画像の作成方法を載せます。

完成イメージはこんな感じです。

完成イメージ

1.新規ファイルをキャンバスサイズ240*320で開く。（携帯の画面サイズにより変更してください）

2.ガイドとなる円を描く

3.ガイドに沿って時計盤を作成する

4.無駄な機能の3つの円を配置

今回は無駄に月齢や生活防水機能がついているので3つの円を配置します。

12時、3時、6時、9時は短くなってます。

コツとしては12時と6時を作成しマージ、マージしたものを複製しCWに90°回転しまたマージ、またマージしたものを複製し30°ずつ回転していくときれいな円になります。

5.金属エフェクトを追加する

円達は下記のような設定でメタルさを出します。

5.無駄な円達にディテールを作成

新規ファイルを追加し、長い白線（6*15px）を均等に12個配置し、その間に短い白線（2*10px）を配置（下図04参照）

6.作成したベースを円形にする

ディテール用ベースをキャンバスの中心に配置（Ctrl+CをしてCtrl+Vをすると中央に配置されます）し、フィルター　＞　変形　＞　極座標　＞　OK

7.ディテールを追加する

最初のファイルに上記で作成したレイヤーをコピーしリサイズする。

（左の円の中身はなんとなく変えてあります。）

8.針や数字を入れる

これで3つの円達は完成。

9.センターにポイントを追加しガイドをはずして完成

お疲れ様でした。

アレンジ次第で無限の可能性を秘めています。

短針、長針、秒針についてはFlashのベクトルで作成したほうが仕上がりがきれなので次号（？）Flash作成の際に解説いたします。