Photoshopで選択範囲を白抜きにして見やすいスクリーンショットに加工する方法

ps_ka24_eyecatch
The following two tabs change content below.
『人類は財産。友達は宝。出逢いは最高の贈り物』

人と人との出逢いは人生において最高の贈り物です。ぼくたちは誰と出逢うかで人生が大きく変わっていきます。ウェブもリアルもどちらも同じです。
ぼくは、起業家とお客さんの出逢いを最高の宝物にしたいと思っています。このブログでは、起業家とお客さんの出逢いを最高の宝物にする為の情報をコミPo!を使ってわかりやすく配信しています。
ぼくと友達になって下さい(^^)

見やすいスクリーンショットを作りたい。だって、文字だけより断然伝わるから。

こんにちわ。ITビジネスパートナーのやまもと(@itka24office)です。

わたしのブログにはかなりイラストやスクリーンショットを加工した画像を使っている。もちろん、画像編集アプリはなくてはならない。

そんなわたしが使っている画像編集アプリは「Adobe FireWorks CS6」。FireWorksは、PhotoshopとIllustratorを足して2で割った様なアプリだ。

しかし、今日はあえてPhotoshopの画像加工方法についてシェアをしたい。

相棒は画像編集はちょっとうるさい自称美人アンカーウーマンのカツヨだ。

スポンサーリンク

分かりやすいスクリーンショットにしよう

カツヨ
やまもとってたくさんのスクリーンショットを使ってブログを書いてるけど、画像加工って大変なの?
やまもと
そうでもないよ。わたしの場合、スクリーンショットに矢印や番号、そしてカツヨさんを入れるだけだからね。
カツヨ
ふ〜〜ん。そうなの、じゃぁ〜〜もっともっと、わたしを登場させなさい。
やまもと
それは、記事の内容によるけどね・・・。

ところでさ、最近どうしても気になる画像があったんだよ。

カツヨ
それは、どんな画像なの?
やまもと
これこれ。ヨスさん(@yossense)のヨッセンスにあるこの画像

(出典元:http://yossense.com/how-to-article-title/)。

how-to-article-title-01

 

how-to-article-title-02

 

カツヨ
これの何が気になったの?
やまもと
スクリーンショットの上にちょっと暗めの画像をのせて、注目して欲しい場所が白抜きになってるでしょ。

これ、すっごく見やすい

カツヨ
確かに、注目して欲しい場所がひと目で分かるわよね。で、やまもともこんな風に加工をしたいの?
やまもと
そうなんだ。でも、やり方がわかんないからヨスさん(@yossense)に「ヨッセンスクール ブログ科」で教えてもらった。
カツヨ
サロンでそんなことまで教えてくれるなんて、良いわね。

ヨッセンスブログ科に興味のある人は、下のリンクをみるのよ。今、こっそり募集をしてるみたいだから。

ブログのあれこれをオンラインサロン「ヨッセンスクール」で学びませんか? | ヨッセンス
「オンラインサロン」をご存知ですか? Facebookの非公開グループ機能を利用して、身内だけの濃度の濃いコミュニケーションを構築できる場です。今回、「ヨッセンスクール ブログ科」というサロンを開設しました!

 

見やすいスクリーンショットの作り方

なにわともあれ、素材の用意だ。今回は、カツヨのイラストを用意した。

ps_ka24_01

 

まずは、Photoshopで画像を開く。

ps_ka24_edit_01

 

右側サイドメニューにある「レイヤー」を開き、「レイヤーの追加」をクリック

ps_ka24_edit_02

 

今度は左サイドメニューにある「長方形ツール」を選択。

ps_ka24_edit_03

 

色を決めて、左上から右下に向かって思い切り、四角を書く(マウスを左上から右下に向かったドラッグする)

ps_ka24_edit_04

 

真っ黒になるので、右サイドメニューの「レイヤー」をクリック。

ps_ka24_edit_05

 

すると、レイヤーのサブウィンドウが表示される

ps_ka24_edit_06

 

「不透明度」を「60%」にする(何%でも構わない)

ps_ka24_edit_07

 

すると、真っ黒画面から、黒が透けてカツヨが見えるようになる。

ps_ka24_edit_08

 

白抜きの範囲選択をする為に、「長方形選択ツール」を選択

ps_ka24_edit_09

 

白抜きにしたい場所を選択する(始点から終点に向けてマウスをドラッグ)

ps_ka24_edit_10

 

「選択範囲」→「選択範囲を変更」→「境界線をぼかす」をクリック(Shift+F6でもOK)

ps_ka24_edit_11

 

ぼかしの半径」を入力し「OK」をクリック。

ps_ka24_edit_12

 

「レイヤー」→「ラスタライズ」→「シェイプ」をクリック。

ps_ka24_edit_13

 

DEL」キーで選択範囲を削除する。

ps_ka24_edit_14

 

すると、選択範囲が消えて白抜きになる!!! Ctrl+Dで選択範囲の解除すれば完了だ。

ps_ka24_edit_15

 

後は、Web用に書き出すだけだ。「ファイル」→「書き出し」→「Web用に保存」をクリック。

ps_ka24_edit_16

 

「保存」をクリックすれば出来上がりだ。

ps_ka24_edit_17

 

そして、出来上がったのがこのファイル。

ps_ka24_02

 

カツヨ
まぁ~いいんじゃな。やまもと、もっともっと使いこなせるように練習しなさい!

 

やまもとの視点

今回の記事の画像は全てPhotoshopで行おうと頑張ってみたが、結局FireWorksのお世話になった。

Photoshopは今まで写真の切り抜きのみで使っていたが、これで少しは活用シーンが増えそうだ。キッと、同じ事がFireWorksでも出来ると思うがよく分からない。知っている人は、是非教えて欲しい。

さて、日頃使い慣れているアプリと使い慣れていないアプリでは、作業効率が驚くほど変わってくる。

しかし、新しくアプリを使いこなせるようになることで、今まで以上に効率化できるようになるなら絶対に覚えて方がお得だ。学ぶ時間より、学んだ後の時間の方が長いからだ。

今回の記事は良いキッカケになった。今後は、少しずつPhotoshopとIllustratorも作業で使っていきたい。

 

カツヨ
やまもと~。ちゃんとアプリ使えないと時間ばっかりかかるわよ!!

 

 

スポンサーリンク

ps_ka24_eyecatch

面白いって思ったらシェアをお願いします

Web集客&収益化の仕組み作りをマンガ(コミPo!)で解説した小冊子を作成しました


簡単で、楽しく、わかりやすいと既に好評を頂いている小冊子、全部で6冊です。

是非、あなたのWeb集客&収益化にお役立て下さい。

また、何やらココでは言えない『超豪華特典』が付いています。

詳しくは、各小冊子の最後で。

ABOUTこの記事をかいた人

『人類は財産。友達は宝。出逢いは最高の贈り物』

人と人との出逢いは人生において最高の贈り物です。ぼくたちは誰と出逢うかで人生が大きく変わっていきます。ウェブもリアルもどちらも同じです。
ぼくは、起業家とお客さんの出逢いを最高の宝物にしたいと思っています。このブログでは、起業家とお客さんの出逢いを最高の宝物にする為の情報をコミPo!を使ってわかりやすく配信しています。
ぼくと友達になって下さい(^^)