１．はじめに
これまでホームページ基本の制作シリーズでHTML、CSSについてそれぞれ紹介してきました。
▼ホームページ制作基本の”き”「HTML」
https://wp.me/p82TIu-15r
▼ホームページ制作基本の”ほ”「CSS」
https://wp.me/p82TIu-19U
ホームページはHTMLというテキストにCSSで装飾を施して…
と、ここまでは順調なのですが、いくら華やかに装飾をしたところでテキストのみでこちらの意図するものを伝えるには限界があります。
野球をするのにバットもグローブも目の前になく、いきなり打ち方やボールの捕球の仕方を教えられてもチンプンカンプンですよね。
そこで写真の効果が重要性を持ってきます。
写真には、複雑な事柄を分かりやすく表す機能や、商品のイメージもしくは実物そのものをお客様に伝える機能があります。
そこにこれまで学んできた文章と装飾を付け加えれば、まさに鬼に金棒！
今回はサイト上で使用する画像を編集できる「Photoshop」をご紹介致します。
▼無料体験版ダウンロード
http://www.adobe.com/jp/products/photoshop/free-trial-download.html
２．Photoshopの仕組みと制作前の準備
Photoshopとよく対比されるAdobe社製品のIllustratorですが、おおまかに言うと、Photoshopは写真向き、Illustratorはイラスト向きのツールです。Webデザインをする上ではどちらかと言えばPhotoshopのほうが使用頻度は高くなります。
また、Photoshopの基本的な構造は透明なシートに、写真や文字を載せて重ねているイメージだと思ってください。
ではダウンロードが終わった方は制作前の準備をしましょう。
初めに、「新規作成」ボタンを押してください。
すると、これから制作をしていくカンバスの基本設定画面に移ります。今回は、幅・高さともに540ピクセルで統一しましょう。その他の細かい設定に関しては以下の写真をご覧ください。
・単位：ピクセル
・解像度：72dpi
・カラー：RGB（※ちなみに紙の場合はCMYKになります）
３．写真の補正
では早速具体的な機能をご紹介致します。
企業のWeb担当者のみならず、「この写真もう少し明るければな…」「この写真の色合いじゃ興味を引けない」「この角度が気になる」といった具合に良い写真なんだけど、ちょっと加工を施したいというものに出くわす機会は多いかと思います。
そこでまずは写真の補正を行いましょう！
任意の画像で構いませんので、画像ファイルをカンバスにドラック＆ドロップしてください。下記はビルの写真ですが、こちらをビルのシルエットにしたいと思います。今回は「レベル補正」という機能を使います。
画面右のレイヤーパネルから先ほどアップロードした画像レイヤーをクリックし、下にある半月のようなボタンをクリックしてください。いくつか項目が出てきた中から「レベル補正」と書いてあるものをクリックします。
真ん中にあるカーソルを動かすことで写真の色合いを変化させ、わずか1秒で簡単にシルエットを作ることができます。
そして、今回の編集のポイントとしては「非破壊編集」というものがあります。
皆さんも一度作った文章を保存せずにあとから必要になって苦労したことがあるかと思います。
「2．Photoshopの仕組みと制作前の準備」で紹介したように、Photoshopの構造は透明なシートに、写真や文字を載せて重ねているといったものです。すなわち今皆さんがいじったのは、元々の写真本体ではなく、「調整レイヤー」といういわば元の写真のコピーです。
したがって、色合いを変化させてシルエットを作成したのはコピーしたレイヤーになります。レイヤー左にある目のアイコンをクリックすると該当するレイヤーの表示・非表示を設定できます。調整レイヤーを非表示にすれば、こちらもわずか1秒で元の写真を出すことができます。
４．マスクを使用
ではもう一つ「マスク」という機能を紹介致します。
「すごい良い写真なんだけど背景がダサい」「写真の特定の部分だけ使いたい」「切り抜きの加工をしたい」といった要望に応えてくれる機能で、使用頻度も高いので必見です！
まずは「文字ツール」を使って写真のようにWATERと書いてみてください。今回はこの文字を装飾しますが、現時点では言葉の持つみずみずしいイメージは全く伝わりません。
そこで、このWATERという字に合いそうな波の写真をドラック＆ドロップ、加えて先ほど「調整レイヤー」を作った半月のボタンを押して、「べた塗り」を選択します。こちらは背景として使用しますが、今回は白色にしましょう。
レイヤーの順番は上から“波の写真→WATER→べた塗りの背景”となります。準備が整ったら波の写真のレイヤーを右クリック。すると、またいくつか項目が並んでいる中から「クリッピングマスクを作成」をクリックしてください。
すると、いとも簡単にみずみずしいイメージに合った字が完成しました。今回の機能はレイヤーを並べる順番が大切です。あくまで“切り抜きたい写真→切り抜きたい形”の順番で並べることを覚えておいてください。
ちなみに波の写真ではなく、WATERという文字にクリッピングマスクをかけたり、べた塗りの背景レイヤーを入れないとどうなるかは、ぜひ試してみてください！
５．まとめ
いかがでしたでしょうか？
画像の編集といっても一言で示せるものではなく 、様々な手段が存在します。
ぜひ様々な手段を使って編集をしてみてください。
但し、あくまで編集はお客様のためにという視点は忘れずに自己満足ではなく、他者からの評価を得られるサイト制作を心がけましょう！
