 このページでは、レシピで紹介した実際の出来上がりイメージをWeb上で確認することができます。レシピ番号の横にある［見る］をクリックすると、別ページで画像やページを表示します。またデータはpartごとにzip形式で圧縮してあります。partの横にある［ダウンロード］をクリックすると、各partの名前がついたzipファイルをダウンロードできます。zipファイルを解凍すると、Photoshop 7.0で作成したデータやHTMLと画像が入ったレシピごとのフォルダにまとめられています。使用環境によってインストールされているフォントやソフトウェアのバージョンの違いにより画面と違う表示になる場合もありますがWindows、MacOSのどちらでも使用できます。 なお、サンプルデータのグラフィックデータの2次利用はできませんので、あらかじめご了承ください。 (C)1997-2003 Mainichi Communications Inc. 書籍情報ページへ戻る |
| part1 目を引くトップページのグラフィック | サンプル | データのダウンロード | |
| recipe1 | ドットを強調したグラフィックイメージ | 見る | ダウンロード part1.zip (28.6MB) |
| recipe2 | グラデーションとエンボスを使って立体的なボタンを作成 | 見る | |
| recipe3 | 切り抜いた文字の中に風景が見えるタイトルの作成 | 見る | |
| recipe4 | シールのような縁取りのあるグラフィックを作成 | 見る | |
| recipe5 | 輝くゴールドのロゴ | 見る | |
| recipe6 | 木目の板に埋め込まれた金属質のタイトルとボタン | 見る | |
| recipe7 | 段ボールの素材を使ってロゴを作る | 見る | |
| recipe8 | イラスト風のイメージ写真 | 見る | |
| recipe9 | 輪郭検出で手書きタッチに写真を変化させる | 見る | |
| recipe10 | 写真画像をポスターのようなタッチのグラフィックに | 見る | |
| recipe11 | 青空から夕焼けに変化するグラフィック | 見る | |
| recipe12 | 背景画像をぼかして、手前にある画像を目出たせる | 見る | |
| recipe13 | 一瞬の動きを撮った写真に残像効果を加える | 見る | |
| recipe14 | 撮影した風景に疾走感を加える | 見る | |
| recipe15 | カラー写真を変換して、粗めの網点で表現する | 見る | |
| recipe16 | 写真に走査線を入れてテレビ映像のような効果を加える | 見る | |
| recipe17 | 写真の上に気泡のような効果を加える | 見る | |
| recipe18 | 2つのグラデーションを重ねて幻想的な写真を作る | 見る | |
| recipe19 | 写真をテープで壁に貼ったような効果 | 見る | |
| recipe20 | 凹凸のある金属の質感を持った矢印を作る | 見る | |
| recipe21 | メタリックな質感のオブジェクトを作成する | 見る | |
| recipe22 | 隙間から光が洩れている透明感のあるボタン | 見る | |
| recipe23 | 道路にペイントされているようなロゴを作成する | 見る | |
| recipe24 | デジカメで撮影したプレーヤーのボタンをアレンジ | 見る | |
| recipe25 | 家電のボタンを利用したサイングラフィック | 見る | |
| recipe26 | 付箋を貼ったノートの写真を使ったボタン | 見る | |
| recipe27 | 空き看板の写真を利用したタイトル画像 | 見る | |
| recipe28 | 撮影した標識をタイトルやナビゲーションに活用する | 見る | |
| coffee break 1 | レイヤー効果のスタイルを上手に活用して作業時間を短縮しよう | ||
| part2 データを小さく、キレイに保存するテクニック | |||
| recipe29 | 背景が透過する角丸長方形のボタンを作る | 見る | ダウンロード part2.zip (2.9MB) |
| recipe30 | 使用したい色だけをロックして減色する | 見る | |
| recipe31 | ディザを使って、なめらかなグラデーションを作成 | 見る | |
| recipe32 | 変換後のファイルサイズを指定して、自動的に減色 | 見る | |
| recipe33 | インデックスカラーで画像の色数を減色する | 見る | |
| recipe34 | 画質の設定を変更してファイルサイズを小さくする | 見る | |
| recipe35 | JPEG画像のノイズを、ぼかしを加えて抑える | 見る | |
| recipe36 | 透明なドロップシャドウで背景に溶け込ませる | 見る | |
| recipe37 | アルファチャンネルでJPEG画像の画質を部分的にコントロール | 見る | |
| recipe38 | 文字やシェイプレイヤーのディザをコントロールする | 見る | |
| coffee break 2 | PNG画像のメリットと保存方法 | ||
| part3 組み合わせて使えるWebエレメント | |||
| recipe39 | レンガが重なったような飾り罫を作る | 見る | ダウンロード part3.zip (260KB) |
| recipe40 | 段階的に濃度の変わるラインを作る | 見る | |
| recipe41 | 方向の違うグラデーションを重ねて立体的なラインを作成 | 見る | |
| recipe42 | 複雑な色合いのグラデーションでラインを作成 | 見る | |
| recipe43 | ライン部分がくぼんだ立体的なイメージ | 見る | |
| recipe44 | 立体的な飛び出すブロックを使ったライン | 見る | |
| recipe45 | 自由に大きさや色が変えられる角丸コラム | 見る | |
| recipe46 | 破った紙に書いたメモのようなコラム | 見る | |
| recipe47 | スライドマウントのような写真枠 | 見る | |
| recipe48 | スライドのフィルムロールを使った写真枠 | 見る | |
| recipe49 | 写真の形に合わせて表示されるドロップシャドウ | 見る | |
| recipe50 | 写真のコメントが書けるポラロイド風の写真枠 | 見る | |
| recipe51 | 2つのテーブルを使って罫線の幅を変える | 見る | |
| recipe52 | 角丸タブ画像を使ったナビゲーション | 見る | |
| recipe53 | タブの重なり順序を変えられるインデックス風ナビゲーション | 見る | |
| coffee break 3 | Dreamweaverのライブラリ機能 | ||
| part4 オリジナルを感じさせるレイアウトデザイン | |||
| recipe54 | 常にウィンドウの中心に表示されるレイアウト | 見る | ダウンロード part4.zip (1MB) |
| recipe55 | ウィンドウが可変しても均等表示される段組レイアウト | 見る | |
| recipe56 | ウィンドウに合わせて大きさの変わるタイトルバー | 見る | |
| recipe57 | ページの左側に縦の帯があるレイアウト | 見る | |
| recipe58 | 帯の一部を切り込んだレイアウト | 見る | |
| recipe59 | ノートブック風レイアウト | 見る | |
| recipe60 | 背景を自由に変えられる逆L字型レイアウト | 見る | |
| recipe61 | メタリックな質感を持ったレイアウト | 見る | |
| recipe62 | チェック模様の枠を使ったレイアウト | 見る | |
| recipe63 | 木目画像を使った半立体レイアウト | 見る | |
| coffee break 4 | Dreamweaverのテンプレート機能でサイトの作成をスムーズに | ||
| part5 効率よくページをデザインできるスタイルシート | |||
| recipe64 | ドキュメント全体の文字サイズや行間を指定する | 見る | ダウンロード part5.zip (636KB) |
| recipe65 | リンクの下線を非表示にして、文字色を変更する | 見る | |
| recipe66 | リンクにポインタを合わせると文字色や背景色が変化する | 見る | |
| recipe67 | 見出しの書式を好みのスタイルに変更する | 見る | |
| recipe68 | 罫線の位置や色、太さを設定する | 見る | |
| recipe69 | 立体的に見せる罫線 | 見る | |
| recipe70 | ドットを使った罫線 | 見る | |
| recipe71 | ダッシュ線を使った罫線 | 見る | |
| recipe72 | 二重の罫線 | 見る | |
| recipe73 | 繰り返し表示のない背景画像を設定する | 見る | |
| recipe74 | 背景画像を水平方向の帯状に表示する | 見る | |
| recipe75 | 背景画像を固定してコンテンツだけをスクロールする | 見る | |
| recipe76 | タイトルの先頭にマークを付ける | 見る | |
| recipe77 | タイトルの背景にグラデーションの帯を敷く | 見る | |
| recipe78 | リストの行頭マークに画像を使用する | 見る | |
| recipe79 | マージンと枠線を設定してコラムを作成 | 見る | |
| recipe80 | 指定したテキストの背景に画像を表示する | 見る | |
| recipe81 | ポインタと合わせると変化する画像 | 見る | |
| recipe82 | 本文とコラムスペースに分割したレイアウト | 見る | |
| recipe83 | ボーダーの設定で、ボタンが押されたように見せるワザ | 見る | |
| coffee break 5 | CSSスタイルの基礎知識 | ||
| part6 Webページに動きを加えて楽しさアップ | |||
| recipe84 | マウスの動きに合わせて光ったり、へこんだりするボタン | 見る | ダウンロード part6.zip (7.2MB) |
| recipe85 | マウスを合わせると回転するボタン | 見る | |
| recipe86 | マウスを合わせるとグラデーションが変化するロゴ | 見る | |
| recipe87 | リンク先ページの紹介文を表示するナビゲーション | 見る | |
| recipe88 | ピントがだんだん合っていく写真 | 見る | |
| recipe89 | 回転しながら現れる写真 | 見る | |
| recipe90 | ペンで書いたように現れるタイトル | 見る | |
| recipe91 | 車窓から景色のように風景が動いていく写真 | 見る | |
| recipe92 | 手書きのパラパラマンガをアニメーション化する | 見る | |
| recipe93 | マウスを合わせると表情が変化するキャラクター | 見る | |
| recipe94 | 発光しながら浮遊するボタン | 見る | |
| recipe95 | 文字が次第に表示されるタイトル | 見る | |
| recipe96 | 光の反射が変化するメタリックボタン | 見る | |
| recipe97 | 球体が回転するアニメーション | 見る | |
| recipe98 | マウスの動きに合わせて表示されるガイド | 見る | |
| recipe99 | スライドしながら登場するタイトルロゴ | 見る | |
| recipe100 | クリックしてメニューを引き出すナビゲーション | 見る | |