このページでは、レシピで紹介した実際の出来上がりイメージを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 クリックしてメニューを引き出すナビゲーション 見る