しかし その後 Photoshop を同時に利用することで 以下のように進化 しました ワン! ズダイレクトその後 以前後比べ デザインの見栄えが雲泥の差であることは 誰の目にも明らかだと思います なにが この差を生んでいるかわかりますか? 1

Transcription

1 Step1 2 PhotoshopElements でロゴや画像を作成する ホームページビルダーのような作成ソフトにも 画像を切り取ったり 小さくするなどの付属機能はあります ロゴ文字を挿入する機能もあります しかし この おまけの機能 では 趣味のホームページは作成できても ビジネスには利用できません 私が当初作成しはじめた時のホームページでも ロゴや画像がなんか間抜けで素人くささが抜けません しかし これがホームページビルダーなどの おまけ機能 の限界なんです ワン! ズダイレクト初期 0

2 しかし その後 Photoshop を同時に利用することで 以下のように進化 しました ワン! ズダイレクトその後 以前後比べ デザインの見栄えが雲泥の差であることは 誰の目にも明らかだと思います なにが この差を生んでいるかわかりますか? 1

3 それは ロゴ文字の作成 と 写真画像の処理 の 2 つです ロゴ文字とは こういうのだったり このような 文字を 画像として 作成することです 写真画像処理とは このような 素人くさい恥ずかしい写真を このように 商売用のホームページに乗っけられるような 写真に 編集すること をいいます 2

4 ロゴ文字は よく GIFアイコン などと言われます これが top ページにきれいにあるのとないのでは 大きなデザイン上の見栄えが違うのです ところが これらをビジネス用に作成する方法論は おまけ機能 以外この世にほとんど公開されていません また デジカメ画像などをトリミング ( 必要な部分だけ切抜く方法 ) したり 画像のファイルサイズを小さくしたり 色を見やすくする ( 色調補正といいます ) などの技術をどうビジネスに使うかという情報も同様です これまた恐ろしい驚愕の事実です ロゴ文字作成 画像編集は Adobe 社の Photoshop Elements( 以下 Elements といいます ) を使います Elements は 世界標準の画像処理ソフト Photoshop の兄弟版として知られています ほとんどのプロのWEBデザイナーは Photoshop で画像を加工しています しかし Photoshop ほどの専門機能はなくても Elements で十分 見栄えのよい画像を作ることができるのです 素人が Elements で ごく限られた機能を使って簡単に作成するだけでも ホームページの見栄えが天と地ほどの差が出ますから 絶 対に活用すべきです 操作は慣れるまで多少 難しく感じるかもしれません しかし ホームページ作成ソフトの Golive と同じ会社の製品であり 操作の感覚が非常に似ています ワードとエクセルの関係のようなものです 両者を交互に使用することで 相乗効果が生じて飛躍的に能力は高まるはず です! 3

5 1 Elements ってどんなことすんの? まずは概要です ( まだ実際に操作しないでくださいね ) 例えばこのような ロゴ (GIF アイコン ) をつくるとしましょう まず Golive 同様 Elements で ロゴの大きさの新規ページを用意し ます ここでは白の背景があるだけです これに 緑色のラインを入れます 4

6 さらに あらかじめ用意した 小さいダックスの画像 を加えます 金色の文字を入れます 5

7 余白にもうひとつ文字を入れます これをひとまとめに GIF ファイル という形式で保存して 完成です このように ロゴ (GIF アイコン ) というのは さまざまな文字や画 像を組み合わせて作成していきます これらひとつひとつの 文字 や 画像 のことを レイヤー ( 階層 という意味 ) と呼びます レイヤー 6

8 つまり このロゴは 1 Let s entry! という文字 2 小さいダックス の画像 3 子犬お探しサービスへ登録を! という文字 4 緑色のライン の画像 5 背景 の 5つのレイヤー ( 階層 ) で ひとつの画像を構成しているわけです この レイヤー ( 階層 ) という概念を理解することが 大変に重要です レイヤーの世界観は マイクロソフト社のエクセルやワードといった一般ビジネスソフトにはまったく存在しない概念なので なかなか慣れるまで時間がかかります しかし このような作業は ホームページビルダーのようなHP 作成ソフトでは絶対にできません また 他の画像処理ソフトはたくさんありますが Adobe Photoshop は世界のデザインクリエーターの 80% 以上が使用するソフトで 極めて見やすいロゴを自在につくることができます 仕上がりも段違いにきれいです 世の中の映画のポスターや新聞折込のチラシ パンフレットの画像やロゴなどはほとんどこの Photoshop で作成されているといって過言ではありません その Photoshop の弟分である Elements は その価格からは考えられ ないほどの高機能で このようなロゴを作る以外にも プロ並の機能が山ほ どありますが 商売につかう HP 作成に使うのは ほんのわずかな機 能を覚えるだけで十分です 詳細な作成方法は次 part 以降で述べ ます 7

9 2 準備 それでは 実習に入る前に準備です まずは Elements を起動してくださ い インストールした方であれば以下のようなアイコンがあると思います ( バ ージョン 4.0 の場合 ) 起動したては 以下のような画面でしょう 上のほうに並んでいるマークの中から 一番右の 新規ファイルを作成 を 選択します 8

10 Elements が起動すると 新規 という窓が出てきますが とりあえず マークをクリックして閉じてください すると このような画面になります 9

11 次に 作成に必要な画面構成にする必要があります 右上の ウィンドウ をクリックして開いてください ウィンドウ の中が以下の 4 つの部分にチェックが入っていれば OK です ツール スタイル エフェクト レイヤー パレットエリア チェックがなかったらクリックして表示させておいてください この4つ以外のウインドウは一切使いませんので 他の余計なメニューやパレットのウインドウはチェックをはずし 消しておいてください 10

12 以下のような画面構成になるはずです ツール スタイル エフェクト レイヤー パレットエリア この4つの言葉 場所は必ず覚えてください... ご心配なく 覚える場所はここだけです 他のややこしい機能は一切使いません 11

13 実習に必要なデータのダウンロード 次の準備は 実習で必要な画像データをダウンロードします にアクセスして Photoshop ロゴ文字 作成用画像データ sample2 ダウンロードをクリックしてください このような画面ができますから 保存 ボタンを押してください 保存先を指定します 保存先は デスクトップ にしてください ( 覚えやすければどこでも OK です ) 12

14 保存が終了したら sample2.lzh をダブルクリックして解凍してください ( 解凍ソフトがなければ サンプルダウンロードページにおすすめ解凍ソフ トのリンクがあるので 解凍ソフトをダウンロードしてください ) 解凍し終わると 以下のようなフォルダが出てきます 全部で 3 つのファイルがあれば OK です このフォルダは sample2 という名前で デスクトップにあります このデータは後ほど使用しますので 場所を覚えておいてくださいね それではいよいよ Elements の実習にかかります! Golive 同様 これからやる作業は 実に簡単です ただし ちょっとだけ Golive よりは難易度が上がります でも 最初は難しくても決してあきらめないでください できないのはあなたの能力が低いわけでも頭が悪いせいでもありません ソフト会社がわかりにくく作っているのが悪いんです ( マジで ) かならず慣れてくれば 自然と問題は解決していきます 遊び心で楽しんでやりましょう! 13

15 ロゴの作成 それではいよいよ実践です このようなロゴ文字を作成します ( 文字ロゴではサンプルデータは使用しません ) ロゴ文字 インターネット上では 文字のフォント形式はほぼゴシック形式で統一されています これ以外のフォント ポップ体 ゴシックUB 楷書体 などの特殊表現はできないように制限されています ネット上では 誰でもコンピュータの性能や機種に左右されずに 情報を閲覧できるように 作られているからです 特殊表現の文字 そうかといって ゴシックのテキスト ( 文章 ) 一辺倒のホームページは 無味乾燥で かっこよくありません せめて店の顔である top ページ では メリハリのあるかっこいい文字表現を使いたいものです それが 文字ロゴ です 作成は Elements を使えばいたって簡単です! 14

16 まず 左上メニューから ファイル 新規 白紙ファイル を選択 します 新規ページ設定画面が出てきます プリセットは カスタム 幅を 600 ピクセル 高さを 300 ピクセルくらいに適当に設定します 注意! このピクセルの 大きさ感覚 は徐々に慣れてきます 300 ピクセル 100 ピクセルなら web 上でどのくらいの大きさになるか が すぐにイメージできるようになれば web 作成は大幅に効率がアップします 注意! カラーモード は必ず RGB カラーにしてください! 15

17 空白のスペースが出てきましたね それでは まず 後ろの緑色の文字を作成しましょう 左のメニューバーから 横書き文字ツール を選択します 範囲を適当な大きさにマウスでドラッグします 16

18 次に ここに文字を記入していくのですが その前にフォントの書体 サイ ズの設定を行います 設定には ツールバー を使います ツールバーで 書体とサイズを設定します 書体は Impact サイズは 36pt です 注意! パソコンによっては Impact の書体が入っていない場合もあります その場合は 似たような書体で実習してください 17

19 これで Voice&Picture! と記入します 次に色を黒から 薄い緑に変えてみます 文字の範囲を選択してから ツールの 描画色を設定 をクリックし カラ ーピッカーで薄緑色を選択します ( 色は適当で OK です ) 18

20 薄い緑色に変更できました ただし これではお堅い感じの書体なので ちょっと装飾しましょう 先ほ どと同じように範囲を選択してから ツールバーで文字を斜体にします さ らに文字を太字にします 19

21 多少 遊び心 が出てきて楽しい文字に なってきましたね! これでひとまず をクリックして文字を確定します さらに これに 最新 お客様の声 と受け渡しの様子 という文字を入れましょう レイヤーパレットから 新規レイヤーを作成 ボタンをクリックします 次にツールバーから 横書き文字ツール を選択し 下のほうの余白にマウスでドラッグします ( 位置は適当でOKです ) 20

22 今度は 真面目な文体にしてみましょう 同じように文字パレットでの設定です フォント書体は MSゴシック サイズは 14pt カラーは 黒 です 設定したら 最新 お客様の声 と受け渡しの様子 と記入して で入力を確定してください このままで文字と文字のバランスが悪いですね 最新 ~ という文章を上のほうへ移動しましょう まず ツールから 移 動ツール を選択します 21

23 レイヤーパレットから 最新 お客様の のレイヤーを選択します 注意! 必ず レイヤーを選択してから 作業にかかりましょう レイヤー とは 階 層 という意味です このロゴ作成の場合は 背景 Voice&Picture! 最新 ~ という 3 つの 階層 から成り立っているわけです 最新 お客様の という文字をマウスのドラッグで移動します 注意! レイヤーには順番があります この場合は 最新の ~ が 上に あるので voice~ の上に重なって見えるわけです この上下の順番は レイヤーパレットでレ イヤーをドラッグ & ドロップで変えることができます 22

24 あとはこれを適当な大きさに切り抜きましょう まず ツールから 切り抜きツール を選択します マウスのドラッグで 以下のように 範囲指定をして をクリックをし て確定します 23

25 見事に 文字ロゴが完成しましたね 最後に この出来上がったロゴ文字画像を保存します Photoshop 形式とGIF 形式の2つの形式で保存します ( 理由は後述 ) まず ファイル から 保存 を選択します 24

26 デスクトップから 先ほどダウンロードした sample2 フォルダを指定し voice というファイル名で保存してください ファイル形式は Photoshop (*PSD*PDD) です 次に GIF 形式で保存しましょう 今度は ファイル から 別名で保存 を選択し 25

27 同じようにデスクトップから sample2 フォルダを指定し voice というファイル名で保存してください 今度のファイル形式は CompuServe GIF (*GIF) です なお 保存オプションの 写真整理モード のチェックは 外して 保存してください 保存ボタンを押すと レイヤーを統合しますか? という小窓が現れます ここでは必ず OK をクリックしてください 26

28 次に インデックスカラー という小窓が現れます ここも そのまま 何も設定を変えずに OK ボタンをクリックしてください 更に GIFオプション という小窓が現れますが これも そのまま O K ボタンをクリックします これで GIF 形式でも保存ができました 注意! ロゴ文字はGIF ファイル 写真は JPEG ファイルで保存すると覚えます 写真と文字が一緒の画像はどちらか割合の多い方で保存します ( どちらでも大差はありませんので ) 注意! ファイル名をつけるときは 必ず 小文字半角英数字 だけでつけてください ( 例 : 画像 1.gif gazou1.gif ) これで GIF 形式 の 文字ロゴ の出来上がりです このようにして作成した画像を Golive で組み込んでいくわけです! ロゴ文字などの画像作成は 慣れるまでは時間がかかりますが 10 日間も やっていれば ひとつの画像作成を 3 分くらいで作成できるようになりま す 27

29 なぜ Photoshop 形式と GIF 形式両方で保存するのか? Photoshop 形式と GIF 形式の 2 つで保存するには理由があります もちろん GIF 形式のファイルを作成するのが目的ですから Photoshop 形 式で保存しなくても問題はありません しかし 作成して web にアップロードしたものの どうも気に入らない ということが非常によくあります 文字をもう少し大きく この文章の位置を高くしたい という場合 一度 GIF 形式で保存してしまうと それは ひとつの画像 としてレイヤーが合体してしまうので 修正ができなくなってしまいます これを Photoshop 形式で保存しておけば 雛形 として使いまわすことが可能になります Photoshop 形式は レイヤー ( 階層 ) をそれぞれ独立したままで保存できる形式なので 何度でも画像を修正できるわけです たとえば 先ほどは このようなロゴ文字を作成しました これを雛形として使い 文字を入れ替えるだけで 簡単に別のページの 文 字ロゴ ができます 時間にして 1 分程度でできあがります そんなわけで 2つの目的 修正するときのバックアップ 同じ雛形を利用してほかの文字ロゴを作成 するために Photoshop 形式でも保存はしておくわけですね! 28

30 写真を組み合わせたロゴの作成 さらにステップアップして のような 画像組み合わせロゴ を作成する ことも可能です それでは ダウンロードしたデータを使い このような写真組み合わせロゴ を作成してみましょう 作成例 まずは 先ほどの 文字ロゴ 作成の要領で merit? demerit? とい う文字を書き入れるところまで作成してください サイズは幅 330 ピクセル 高さ 40 ピクセルくらい 文字の種類は Arial Black 文字のサイズは 24pt くらいでよいでしょう ( ここは先ほどの復習ですので 詳しく手順を説明しません 自力でやってみてください 目標時間は 5 分以内!) 29

31 次に ファイル 開く から 先ほどダウンロードした sample2 のフォルダを指定し koinu.jpg を開いてください かわいい子犬の画像が現れました 30

32 さて この子犬の画像を文字に組み合わせましょう はたしてどのようにやるのでしょうか? まず 子犬の画像を選択してから 移動ツール を選択します 子犬の画像を ドラッグ & ドロップで 中央に持ってきます 31

33 はい 子犬の画像がコピーされて とってもキュートな写真入ロゴができま した 異様に簡単ですよね このような作業を積み重ねて デザイナーの皆さんはホームページやポスターや パンフレットなどのデザインを作成しているわけです 結局のところ どんな一流デザイナーが手がける雑誌や広告などのデザインも 画像 と 文章 を組み合わせ ひとつの 画像 を作成しているに過ぎません 思ったより はるかに簡単でしょう? 一見難しそうな仕事でも 舞台裏はこんなもんです おそらく このようなノウハウが世の中に簡単に出回ってしまうとデザイン業界の給料が少なくなってしまうので 出し惜しみされているのでしょう それでは 先ほどと同じように Photoshop 形式と GIF 形式で sample2 に保存して終了です ファイル名は merit としてください なお ダウンロードのサンプル画像が他にもありますので ためしに組み合 わせてください 組み合わせロゴ というのは大変に簡単に トップページ をお化粧することができます 32

34 補足 1: 背景色をつける場合 ロゴ文字などの背景色をつける場合を補足説明しておきます このような 鮮やかなオレンジの背景色をつけたい場合は? 実は結構簡単です ツールの 塗りつぶしツール を選択します ( バケツのマークです ) 33

35 ツールの 描画色を設定 をクリックし 色を指定します 明るめのオレン ジを適当にクリックしてください 塗りつぶす色を決めたら レイヤー パレットで 背景 を選択してから 34

36 適当な隙間をクリックします こんな 感じになりましたね でも これだと子犬の写真の背景が白いままなので かっこ悪いですね 今度は 子犬のレイヤーを選択して赤く塗りつぶしましょう レイヤーパレットから 子犬の写真レイヤー レイヤー 1 を選択します 35

37 背景が白いところをクリックして塗りつぶしてください 白いところを塗りつぶしたら はい! できあがりです 簡単ですね! 36

38 写真の修正 次は 写真画像の編集です ホームページにおいては 写真の見栄えの良し悪しは大変に重要です 特にトップページで素人同然の写真が掲載されていると すぐに嫌われサイトになってしまいます この章ではホームページを彩る大切な材料 web 起業家のための画像の編集テクニックを解説します ( この章ではダウンロードデータによる実習はしません 操作がとても簡単なためです ご自身の写真や 商品の写真などでぜひ実際にやってみてください ) テクニックその 1 白抜き TOP ページで自身の顔写真などを出すときは 背景を白にする見せ方 いわ ゆる 白抜き にするとかっこよくなります 背景の本棚とか 生活感が見えていると商用 HP としてはかっこ悪くなりま すから 画像データを Elements で加工します 37

39 ①まずは 顔写真画像を開きます ご自身のでやってくださいね ②だいたいを切り抜きます 38

40 3 背景を 消しゴムツール を選択してドラッグで消します 4 はいできあがり! 結構かんたんでしょう 39

41 テクニックその 2 切り抜き ~ 余計な情報をカットせよ! 写真をサイトに掲載する場合 どうしても素人っぽさ丸出しの写真 というのがあります さまざまな理由がありますが 素人っぽく見える最大の原因は 余計なものが写っているということに尽きます これを切り抜きテクニックで解消しましょう ( ここの例はペットばかりですが 不動産であれ アパレル用品であれ 食品であれ 考え方は基本的には同じです ) たとえば 以下のようなサイトがあります 別に特別悪いデザインではありませんが 画像がいかにも素人丸出しなので お客に不安感をもたれてしまいます いかにも画像が素人丸出しのサイト なにが悪いのか? この例の場合は 犬を見せたい画像なのに ソファだとか バックだとか余計なものがたくさん写っているのがとても問題なのです 3つの画像をこのように修正してみましょう 40

42 第一印象が大分違います すでにこのマニュアルでは何度も登場していますが このテクニックを 切り抜き といいます トリミング と呼ばれることもあります 画像編集の基本中の基本です 切り抜き で余計な背景を取り除くだけで見違えるようにメリハリの利いた画像になります やり方はいたって簡単です 左上メニューの ファイル から 開く を選択して 画像を呼び出します ( 画像はご自身で用意してくださいね ) 41

43 ツールから 切り抜きツール を選択します 左上から右下にマウスのドラッグして 切り抜きたい範囲を指定します 42

44 このときに注意するのは 中心のマークが 被写体の中心に合っている ことが重要です これがずれてしまうとデザインが崩れます 次にマウスで をクリックして切り抜きます 切り抜けました 43

45 このように余計な背景 ( バッグだとか ソファとか ) を取り除いた画像にす るだけで すっきりコンパクトに お客へ伝えたい情報 ( 被写体 ) だけを伝 えることができます 特に 上記の例の場合などでは 背景が 一般家庭のソファ だったり パグの横にあるのが 普通のバッグ だったりすると お客からのイメージはかなり悪いものになります このような舞台裏の余計な情報は お客を無用に不安にさ せるだけですから 取り除いてあげて 見栄えもよくすると大変印象がよくなります! 44

46 テクニックその 3 画像解像度 ( サイズ ) 変更 テクニックその3はサイズ設定です 多くの 素人っぽいサイト のほとんどは 画像が大きすぎます 小さくコンパクト これがサイトのセンスを良く見せるコツです 悪い例画像が大きい ご購入者の声をデジカメで撮影したまんまの大きさで Top ページに乗っける と大きすぎます Top ページ全体のバランスが悪くなって素人っぽいページ になります 45

47 Elements では 画像解像度を設定することによってサイズを変更します 画像を呼び出し 画像の上部タイトルバーの位置で右クリックをすると メ ニューが出てきます この中から 画像解像度 を選択します 画像解像度の設定画面が出てきますので 幅か高さを小さくします ポイント = 単位は pixel( ピクセル ) であわせます 46

48 幅 を 120 ピクセルに低くしてみます Elements の優れた機能により 同じ比率で 高さ も自動的に低くなります (96 ピクセルに ) OK ボタンを押すと ぐっと画像が小さくなりました 47

49 この画像を Top ページに載せます Top ページは特殊なページです お客に購入へのアクションをとってもらうためのページであり 間違っても大きい画像で無駄なスペース取りをしないでください 写真の大きさ ( 画像解像度 ( ピクセル )) のの目安は以下のとおりです Top ページの写真 = 幅 100~120 ピクセルお客様の声などのコンテンツページ= 幅 200~400 ピクセル (Top ページ以外のコンテンツページは多少大きくてもOKです ) 48

50 テクニックその 4 色調補正 ~ 見やすい色へ自動に設定してくれる魔法! デジタルカメラはかなり技術進歩していますが それでも写りの良い撮影はかんたんではありません 暗く写ってしまっていたり 鮮やかな明るい色のはずが真っ黒になってしまったり せっかくの写真も写りが悪いと印象が相当にダウンします Elements には これらの問題を簡単に解決してくれるハリポタ顔負けの 魔法がそなわっています ボタンひとつで 色鮮やか 見やすい文字 へ見事に変身させてしまいます! それが 画質調整 のテクニックです 例 : 観葉植物の場合 以下のような観葉植物が商品だとしましょう デジカメで撮ったんですが 異様に暗く写ってしまいました 49

51 これに 自動コントラスト の魔法をかけます 画質調整 を選択し 自動コントラスト を選択します すると! 明るく色鮮やかな緑の観葉植物が現れました! 50

52 注意! 兄弟版 PhotoshopCS2 の自動色調補正 Photoshop CS2 の場合は 自動コントラストは イメージ から 色調補 正 自動コントラスト をクリックです 次はペットでやってみましょう 上記は ブリーダーさんからいただいたお写真で 生後 2 週間のトイプードルレッド ( 赤 ) です 毛色はレッドなのですが デジタルカメラの問題か 撮影時の光量の問題かわかりませんがかなり薄い色に見えます まるで小麦色 これに 色調補正 の魔法をかけます 51

53 さきほどと同じように 自動コントラスト を選択します すると! 鮮やかなレッドが現れます Elements における自動 色調補正は 本来 被写体が持っているであろう 色 コントラストなどをコンピュータが推測して表現する 機能です まさに魔法ですね 本来 色調補正というのは大変デリケートな作業で プロのデザイナーがわずかな色のバランスを考えながら緻密に行うものです これが IT 革命のおかげでまったくの素人がボタンひとつでできるの ですから 驚きを隠せません 52

54 自動 色調補正には以下の5つがあります 1. 自動スマート補正 2. 自動レベル補正 3. 自動コントラスト 4. 自動カラー補正 5. 自動赤目補正この中でも 最も自然な色合いが出るのが 自動コントラスト で 基本的に 自動コントラスト だけ使用していればOKです ちょっと暗い感じだなあ どうも色が良く出ていない と感じたら ボタンいっちょう自動コントラストです これだけで見違えるような画像に変身します このような見にくいお手紙のスキャン画像も 自動コントラストにより一発で色の濃い 見やすい文字になります 53

55 Elements のまとめ Elements の機能は大きく分けると 3 つになります 1 ロゴ文字を作成する 2 写真を編集 補正する 3 写真と文字を組み合わせたロゴ文字を作成する 重要なのは 1 ロゴ文字を作成する です これを応用することでトップペ ージのトップバナーを作成したり アマゾンのような商品カテゴリーのタブを 作成することができます ( ここまできれいに作る必要はありませんが ) 写真の修整 補正については 本書で紹介している以外に たくさんの機能が死ぬほどありますが ビジネスシーンではあまり使うことはありません 切り抜き サイズ調整 自動色調補正 の 3つだけ覚えておけば十分です これに集中してください いかがでしょうか? Golive よりは多少難しいところがありますが 想像するよりははるかに簡単だったのではないでしょうか Golive と Elements を連携させた応用編は テンプレートを使ってホームページを作ろう の章 ( 後述 ) でさらに詳しく説明します! 54

56 Step1 3 テンプレート を使ってオリジナルホームページを作ろう この項では テンプレートを使ってあなただけのオリジナルホームページを作ってみましょう テンプレートはサポートサイトからダウンロードできます やることは今まで実践したことの復習ですから簡単です テンプレート ( 雛形 ) ダウンロードサイト ステップについては以下の通りです 1. サポートサイトからテンプレート ( 雛形 ) をダウンロードする 2. トップバナーを編集する 3. サイドメニューのロゴ文字を編集する 4.Golive でトップページを編集する ページをゼロから作るのと違い 雛形テンプレートを使えば Elements で 画像を編集し Golive でコンテンツを書き加えるだけで あっという間にプ ロっぽいトップページができてしまいます それでは実践です! 55

57 1. サポートサイトからテンプレート ( 雛形 ) をダウンロードする テンプレートのダウンロードページ にアクセスして お好みのテンプレートをダウンロードしてください ここでは例として テーマカラー黄緑 のテンプレートを使って 健康 食品どっとこむ というトップページを作ってみましょう テーマカラー黄緑 のところにある ダウンロード のリンクをクリック します 56

58 次のような画面が出てきますのから 保存 ボタンを押してください 保存先を指定します 保存先は デスクトップ にしてください ( 覚えやすければどこでも OK です ) 57

59 ダウンロードが完了すると 以下のような画面になりますので 閉じる ボ タンを押します デスクトップに保存された kimidori.lzh のアイコンをダブルクリックし て 解凍します 解凍すると以下のようなフォルダが出てきます 58

60 それでは ダウンロードしたテンプレート テーマカラー黄緑 を使って 例として 健康食品どっとこむ というトップページを作ってみましょう テンプレート オリジナルホームページ テーマカラー黄緑 には 上図左のようなブランクページが入っています これを上図右のような商用ページにしてみましょう 2. トップバナーを編集する Elements でトップバナーを編集します 上部メニューバーから ファイル 開く を選択します 59

61 ファイルの一覧の中から header.psd を選択して開きます レイヤーをアップデートしますか? という窓が出たら 更新 を選択し てください このようなヘッダーバナーが現れました 最初から雛形になっているので 文字を入れ替えるだけですぐに使えます 60

62 サイト名を 健康食品どっとこむ と書き換えましょう サイト名を編集するため サイト名のレイヤーを選択し ツールボックスか ら 横書きテキストツール を選択します サイト名の を範囲指定して 健康食品どっとこむ と入 力し をクリックして確定します 61

63 次に バナーの右下 オレンジ色の文字のところに URL アドレスを入れて みましょう 手順は先ほどと同じです レイヤーパレットから のレイヤーを選択 して 横書きテキストツールを選択です 文字列を範囲指定して と入力します 62

64 これで編集は終わりです みなさんがテンプレートを使うときは お好みに応じて 文字の大きさを変 えたり 色を変えてみたりしてもいいですね では いつものように ファイルを psd 形式と gif 形式の 2 種類で保存して ください ファイル名は必ず小文字半角英数字でつけてくださいね 3. サイドメニューのロゴ文字を編集する次に左サイドメニューのロゴ文字を編集しましょう これもトップバナーと同じで テンプレートが用意されてますから 文字を入れ替えるだけで あっという間にできてしまいます Elements で sidemenu.psd を開きます 63

65 操作手順は 先ほどのトップバナーと同じです レイヤーパレットから のレイヤーを選択し ツールボックスから 横文字テキストツール を選択 文字を範囲指定して 健康食品 と入力します はい もうできちゃいました psd 形式と gif 形式でファイルを保存します 同じ要領で お客様の声 お役立ち情報 ご購入方法 という 3 種類のロゴ文字も作成してください 全部で 4 つの左サイドメニュー用ロゴ文字ができました 64