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

Transcription

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

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

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

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

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

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

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

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

9 2 準 備 それでは 実 習 に 入 る 前 に 準 備 です まずは Photoshop を 起 動 してくだ さい インストールした 方 であれば 以 下 のようなアイコンがあると 思 います (バージョンCS2の 場 合 ) 起 動 したては 以 下 のような 画 面 でしょう 多 少 レイアウトちがっていても 問 題 ありません なにか 質 問 をするボックス がでてきたら 適 当 に 閉 じてください 8

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

11 以 下 のような 画 面 構 成 になるはずです ツール オプション レイヤー 文 字 この4つの 言 葉 場 所 は 必 ず 覚 えてください... ご 心 配 なく 覚 える 場 所 はここだけ です 他 のややこしい 機 能 は 一 切 使 いません 10

12 PhotoshopElements 3.0 の 場 合 Photoshop Elements を 購 入 された 場 合 は 以 下 のようになります 画 面 は 多 少 違 いますが ほとんど 同 じ 機 能 を 使 うことができます 右 上 の ウィンドウ をクリックして 開 いてください ウィンドウ の 中 が 以 下 のようにチェックが 入 っていればOKです チェックがなかったらクリックして 表 示 させておいてください これ 以 外 のウインドウは 一 切 使 いませんので 他 の 余 計 なメニューやパレ ットのウインドウはチェックをはずし 消 しておいてください 11

13 PhotoshopElements 3.0 の 場 合 以 下 のような 画 面 構 成 になるはずです ツール ツールバー レイヤー 作 り 方 スタイル エフェクト の 窓 が 自 動 的 に 出 てしまいますので 各 々の を クリックして 閉 じてください ちょっと 紛 らわしいのですが 以 下 のように 対 応 します 機 能 を 選 ぶ 設 定 する 文 字 装 飾 レイヤー 編 集 Photoshop ツール オプション 文 字 レイヤー Photoshop ツール ツールバー ツールバー レイヤー Elements 以 後 は 基 本 的 に Photoshop の 画 面 で 説 明 します 重 要 なところは Photoshop Elements の 場 合 と 注 釈 を 入 れます 12

14 注 意! 本 格 版 の Photoshop と 兄 弟 版 PhotoshopElements の 違 いは?... 上 記 のような 画 面 の 違 いのほか Photoshop Elements では 本 書 が... 紹 介 するテクニック 上 1 点 できないことがあります... Photoshop Elements ではできないこと レイヤースタイル 文 字 設 定 などの 細 かい 設 定 調 整 ができないとこ ろが 部 分 的 にある 要 するに Photoshop と Photoshop Elements の 違 いは 細 かい 設 定 がで きるかできないか ということだけです あまり 見 栄 え が 重 要 でない 商 売 の 場 合 は Elements でも 十 分 OKです ( 健 康 食 品 や 教 育 業 情 報 販 売 などではきれいな 見 栄 えは 必 要 ありません) 影 の 長 さの 設 定 が 細 かくできない 文 字 の 装 飾 にバリエーションが 少 ないと ( 後 述 )いう 程 度 の 問 題 です ただ プロとしてインターネットビジネスをしていくうえでは Photoshop を 持 っていた 方 がよいと 思 います いずれ 商 売 が 軌 道 に 乗 れば Elements は 物 足 りなくなるでしょう 13

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

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

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

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

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

20 注 意!Photoshop Elements の 場 合 は 範 囲 設 定 は 文 字 を 記 入 してからでな いとできません 次 に ここに 文 字 を 記 入 していくのですが その 前 にフォントの 書 体 サイ ズの 設 定 を 行 います これは 文 字 パレットを 使 います 注 意!Photoshop Elements では ツールバー の 部 分 です 文 字 パレットから 書 体 とサイズを 設 定 します 書 体 は Impact サイズ は 36pt です 19

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

22 薄 い 緑 色 に 変 更 できました ただし これではお 堅 い 感 じの 書 体 なので ちょっと 伸 ばしたり 崩 したりし ましょう 先 ほどと 同 じように 範 囲 を 選 択 してから 文 字 パレットで 文 字 の 縦 引 き 伸 ばしを 170%に 横 引 き 伸 ばしを 120%にします さらに 文 字 を 斜 体 にします 21

23 注 意!Photoshop Elements では 縦 引 き 伸 ばし と 横 引 き 伸 ばし は 設 定 できません 斜 体 だけ 設 定 してください 多 少 遊 び 心 が 出 てきて 楽 しい 文 字 に なってきましたね! さらに これに 最 新 お 客 様 の 声 と 受 け 渡 しの 様 子 という 文 字 を 入 れ ましょう 同 じようにツールから 横 書 き 文 字 ツール を 選 択 し 下 のほう の 余 白 にマウスでドラッグします ( 位 置 は 適 当 でOKです) 22

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

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

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

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

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

29 同 じようにデスクトップから sample2 フォルダを 指 定 し voice と いうファイル 名 で 保 存 してください 今 度 のファイル 形 式 は CompuServe GIF (*GIF) です 注 意!ロゴ 文 字 はGIFファイル 写 真 は JPEGファイルで 保 存 すると 覚 えます 写 真 と 文 字 が 一 緒 の 画 像 はどちらか 割 合 の 多 い 方 で 保 存 します(どちらでも 大 差 はありませんので) 注 意!ファイル 名 をつけるときは 必 ず 小 文 字 半 角 英 数 字 だけでつけてくださ い ( 例 : 画 像 1.gif gazou1.gif ) これで GIF 形 式 の 文 字 ロゴ の 出 来 上 がりです このようにして 作 成 した 画 像 を Golive で 組 み 込 んでいくわけです! ロゴ 文 字 などの 画 像 作 成 は 慣 れるまでは 時 間 がかかりますが 10 日 間 も やっていれば ひとつの 画 像 作 成 を3 分 くらいで 作 成 できるようになりま す 28

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

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

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

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

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

35 補 足 1: 背 景 色 をつける 場 合 ロゴ 文 字 などの 背 景 色 をつける 場 合 を 補 足 説 明 しておきます このような 鮮 やかなレッドの 背 景 色 をつけたい 場 合 は? 実 は 結 構 簡 単 です ツールの 塗 りつぶしツール を 選 択 します (グラデーションツールのマークの 右 下 の 三 角 をクリックすると 塗 りつぶ しツールの 選 択 ができます) 34

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

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

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

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

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

41 3 背 景 を 消 しゴム で 消 します 4はいできあがり! 結 構 かんたんでしょう 40

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

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

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

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

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

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

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

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

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

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

52 これに 色 調 補 正 の 魔 法 をかけます イメージ を 選 択 し 色 調 補 正 を 選 択 します さらにこの 中 から 自 動 コントラスト を 選 択 します 51

53 すると! 明 るく 色 鮮 やかな 緑 の 観 葉 植 物 が 現 れました! 注 意! 兄 弟 版 PhotoshopElements の 自 動 色 調 補 正 Photoshop Elements の 場 合 は 自 動 コントラストは 画 質 調 整 から 自 動 コントラストをクリックです 52

54 次 はペットでやってみましょう 上 記 は ブリーダーさんからいただいたお 写 真 で 生 後 2 週 間 のトイプード ルレッド( 赤 )です 毛 色 はレッドなのですが デジタルカメラの 問 題 か 撮 影 時 の 光 量 の 問 題 かわかりませんがかなり 薄 い 色 に 見 えます まるで 小 麦 色 これに 色 調 補 正 の 魔 法 をかけます 同 じようにさらにこの 中 から 自 動 コントラスト を 選 択 します 53

55 すると! 鮮 やかなレッドが 現 れます Photoshop における 自 動 色 調 補 正 は 本 来 被 写 体 が 持 っているであろ う 色 コントラストなどをコンピュータが 推 測 して 表 現 する 機 能 です まさに 魔 法 ですね 本 来 色 調 補 正 というのは 大 変 デリケートな 作 業 で プロのデザイナーがわ ずかな 色 のバランスを 考 えながら 緻 密 に 行 うものです これが IT 革 命 のおかげでまったくの 素 人 がボタンひとつでできるの ですから 驚 きを 隠 せません 自 動 色 調 補 正 には 以 下 の3つがあります 1. 自 動 レベル 補 正 2. 自 動 コントラスト 3. 自 動 カラー 補 正 この 中 でも 最 も 自 然 な 色 合 いが 出 るのが 自 動 コントラスト で 基 本 的 に 自 動 コントラスト だけ 使 用 していればOKです ちょっと 暗 い 感 じだなあ どうも 色 が 良 く 出 ていない と 感 じたら ボタ ンいっちょう 自 動 コントラストです 54

56 これだけで 見 違 えるような 画 像 に 変 身 します このような 見 にくいお 手 紙 のスキャン 画 像 も 自 動 コントラストにより 一 発 で 色 の 濃 い 見 やすい 文 字 になります 55

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

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

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

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

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

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

63 ファイルの 一 覧 の 中 から header.psd を 選 択 して 開 きます このようなヘッダーバナーが 現 れました 最 初 から 雛 形 になっているので 文 字 を 入 れ 替 えるだけですぐに 使 えます 62

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

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

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

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