Photoshop

WEB制作

【Photoshop】画像のフチをグラデーション的にボカす方法

こんなやつ。バナーやメイン画像とかに使う・・・のかな

よくPhotoshop初心者の人に聞かれやすいのが画像のフチをグラデーション的にボカす方法。

結果だけみると簡単そうだけど、意外とPhotoshopの基本操作全般というか、レイヤーマスクや選択範囲などの操作や概念を理解していないと難しかったりする。

だから、ホントの超初心者に教えると意外と手間取ったりする。ボタン一発でやるような機能はないので、基本操作を色々教えないといけないから大変(泣)。

つまり、単一のテクニックというよりはPhotoshopの基本操作を組み合わせて行っているに過ぎないので、ちゃんと基本操作を理解していれば少し考えば楽勝だったりする。

Webサイト用の画像なんかで、特に2013~15年くらいに流行っていたリッチデザインというデザイン手法では多様されていたけど、シンプルと言えばシンプルな見せ方なので、今でも用途によっては使う場面が結構あるかもしれない。

特定の1辺だけをボカす場合

対象の画像を開いてレイヤーパネルの下の方から「レイヤーマスク」を追加する。

レイヤーマスクは色の濃淡によって画像の一部分を隠したりするのに使う機能だが、グラデーションで塗り潰してやれば、グラデーション的に隠すことができる。

初めてやると急にプロになった気分になるかもしれない(笑)

次に、レイヤーマスクが選択状態になっているのを確認して、グラデーション的にしたい場所に選択範囲を作る。

もっと言うと、別にフチじゃなくても、この選択範囲の作り方次第で画像のどの部分でも同じことができる。

Photoshopの画像加工というのは、レイヤーパネルと選択範囲の使いこなしが全てと言っても過言ではないのだ。

選択範囲を作ったら、グラデーションツールで「白~黒」で塗り潰す。この加減でグラデーションの加減が決まるので、気に入った感じになるように調整しよう。

グラテーションを適用したら下が透けていると思うので、下に白いレイヤーを作成する。

勘が鋭い人はわかると思うが、下のレイヤーを黒にすれば黒っぽいグラデーションになる。

Web用の画像だったら、PNGで透明ありで書き出せば背景が透明になるわけだ。

このへんは味噌汁の出汁みたいに各家庭ごとに違うので応用しよう。

4辺をボカす場合

選択範囲やグラデーションツールを使いこなせば4辺をボカすこともできるだろうけど、4辺の場合は別の方法が簡単。

まずは画像全体の選択範囲を作る。

次に「選択範囲を変更」→「境界線」で適当に小さくして、選択範囲を反転する。

「境界をぼかす」で好みにボカしてDeleteキーでグラテーション的に周辺が半透明になるはず。

まとめ グラテーションも使い方次第

デザインは流行り廃りもあるし、グラテーションは使い方によっては手抜きだとか、初心者っぽく見られてしまう場合もあるので使い方が大事。

ここ数年でも、グラデーションを使ったリッチなデザインが流行ったり、一色で塗り潰したフラットなデザインが流行ったりしているけど、そのうち一周してまた戻ってくるのかもしれない。

こういう単純そうな作業でも、基本操作をマスターしていないと意外と難しかったりする。何でもそうだけど基本は大事なのだ。

WEB制作

Photoshopの文字間を調整する時の不思議「文字間を調整」という機能

Photoshopを使うようになってウン十年(いや20年くらい)と経つが、よく使う機能の割りに未だに不可解なのが、文字というかテキスト周りの調整。

具体的には、バナーを作ったり、画像に文字をそれなりの量を打ったりする時に、文字間に妙な違和感が出る場合がある。

Photoshopはフォトレタッチ系の作業はもちろん、プロのデザイナーが使う業務用のデファクトスタンダードなデザインツールなので、WordとかPowerPointとかより文字周りがショボイなんてこと有り得ないのだが、意外と文字周りの設定はややこしかったりする。

文字間を調整するには基本的に「トラッキング」

Photoshopの文字パネルには、何やら文字を調整するためのパラメーターが色々ある。文字間を調整するには調整したい文字列を選択した状態で、VAと書かれた「トラッキング」の値を調整する。

あくまで文字間(文字と文字の左右の隙間)を調整するので、行間(複数行の時の上下の隙間)を調整するには、VAの上にある「A」が上下に並んでいる所を使う。

トラッキングの罠!? どうやっても違和感が消えない場合がある

基本的にWordとかパワポで作るビジネス資料と違って、デザイン物というのは1ミリとか1ピクセルとかの非常に繊細な調整が重要になる場合が時としてある。プロの仕事の場合は、むしろそれが普通だ。

しかし、Photoshopというソフトは根本的問題としてアメリカのソフトのため、日本語の処理はそんなに得意ではない。あまりIllustratorやInDesignなどのDTP向けソフトを詳しく知らないけども、おそらくそれらのソフトよりPhotoshopの文字周りの処理はショボいはず。

下記のAdobe公式の解説を見てもトラッキングは日本語にも使えるけども、通常は英文向け・・・みたいな、お茶を濁した感じの説明となっている。そういったこともあり、Photoshopの日本語処理は違和感が出るものだと諦めていた。

試す価値あり、「文字間を調整」のオン/オフ

実をいうと、文字パネルにこのオプションがあるのは認識していなかった。

Adobe公式の解説を見るとバッチリ解説されているものの、どういった処理をしているという細かなことまでは説明されていない。だから、どういった理由かよくわからないが、オンにするとPhotoshopが自動的に何らかの基準で文字幅を調整してくれる。

標準では自動的にオンになっているが、特に小さめの文字サイズの場合はオフにした方が文字間のバランスが良い場合がある。

Photoshopで日本語の文字をデザインに組み込む時に、文字間が「どうもしっくりこないなぁ~」という時は、まずはこの設定を試してみよう。

最終手段はカーニングとかでチマチマ調整する

本文みたいな文字量だと無理だが、見出しやバナーなど文字量が少ない時は、トラッキングの左にあるV/Aという機能を使う。これはカーニングと言う機能で、隣り合った2文字の隙間を調整する。

チマチマした職人みたいな作業だが、文字量が少ない場合はこれを使って体育会的に直す方法になる。

どちらにしろ、Photoshopの日本語周りの機能はそれほど優秀ではないと思って良いだろう。かといって、Photoshopより優秀なバナーやWeb用画像を作るツールは存在しないのだが。

文字パネルのオプションも注意

Photoshopの文字パネルの右上あたりに、横線が並んだハンバーガーメニューのようなものがあるが、そこをクリックするとオプションが多量に出てくる。

タブが「文字」の時と「段落」の時でも出てくるオプションは違う。

この記事での検証のために初めて見た気がするが「段落」タブのオプションには「日本語基準の行送り」や「欧米基準の行送り」という重要そうなものがあった。この選択によって複数行のデザイン具合が大きく変わることから、重要なものなのだろう(焦)

それ以外にも「東アジアの言語」というのをチェック入れると、Illustratorとかみたいに禁則処理が使えたりする。禁則処理は「、」とか「。」だとか変な所で改行されるのを防いだりするDTP系ソフトでは一般的な機能。PhotoshopでLP的な長文をデザインに組み込んだりする場合は必須の機能だろう。

追伸:ここに書いてある方法より、もっと良いやり方や、根本解決できるような知識のある方がいたら、こっそり教えて下さい。紹介させて頂く?かもしれません。