イトウ先生のTipsnotePhotoshop・差の絶対値

イマジカデジタルスケープ 短期集中クリエイティブ講座

イマジカデジタルスケープ・AfterEffects・Photoshop・HTML・CSS・JavaScript・1日トレーニング

Web・動画・映像・ゲーム・DTP・CG・Adobe Creative Cloud・キャリア・就活に

 
 
1 10月・日曜開講のお知らせ
 

お客様index

企業・自治体のお客様に 業務効率化、コスト削減に
クリ博登録者・学生の方に 割引トレーニングはコチラ


イトウ先生のTipsnote


イトウ先生のTipsnote:目次

【 2つの画像の違いを調べる、差の絶対値 】 

今年最後のブログとなりました。今年も1年間、ありがとうございました。
今年最後のブログは、そろそろクリスマス、お正月を控えているこの時期ですので、友達同士や家族で集まってパーティ等をするときにでも使っていただきたい、Photoshopを使ったお遊びをご紹介して今年のブログを終わりにしたいと思います。
幸いにも、Photoshop CS6には、過去ブログでご紹介したコンテンツに応じた移動ツールという強力なツールが搭載されたため、今回ご紹介する画像を使ったお遊びもいろいろと楽しめるのではないかと思います。

3つの違い

まずは、以下の画像をご覧ください。上の画像と下の画像で、3カ所違いがあります。どこかわかりますか? 2ヵ所はすぐにわかると思いますが、もう1カ所はちょっと難しいと思います(答えはこのブログの下にある方法でわかりますので、ブログを下まで読まずに、少しがんばって探してみてください)。

cat1

cat2

オリジナルの画像から、少々異なる箇所を何カ所か作り、難易度に応じて点数を設定して、お正月にみんなで楽しむのも面白いと思いますがいかかでしょうか?

異なる画像の作り方

では、このようにちょっとだけ違う画像の作り方をご紹介します。これは、思い思いに作っていただいていいかと思いますが、まずは、元の画像を選択した状態で、イメージメニュー→複製を選択し、オリジナルの画像の複製を作成してから行います。
わざとバレバレの箇所を作るのも面白いので、見てすぐわかるような箇所もわざと作るといいと思いますが、難易度を上げるには、いろいろとPhotoshopのテクニックを駆使して画像を作ると面白いですね。
例えば、部分的に色を変えるには、弊社トレーニングの販売委託先に掲載している過去のブログ(以下、過去ブログ)の境界部分をきれいにカラー変更する方法を参考にしていただくといいと思います。
画像の一部分だけを少し傾けたりする場合は、こちらも過去ブログななめの画像をまっすぐにする:ものさしツールなどを使用して、傾けた画像を元の画像に合成するといいですね。例えば、招き猫の1つを斜めにして、元の画像と自然な感じで合成するには、ともにレイヤーの状態で、こちらも過去ブログ自然な合成テクニック(角版)などを参考にしていただくといいと思います。

2つの画像の違いを調べる

それでは、この2つの画像のどこが違うかを、Photoshopを使って調べる方法をご紹介します。
まず、2つの画像をレイヤーで合成し、レイヤーの描画モードを「差の絶対値」にします。すると、2つの画像の差分が画面上に表示されます。

PSCS6_bloglast002

PSCS6_bloglast004

変更箇所が無い=2つの画像がまったく同一の画像の場合には、この差の絶対値を選択した状態で、画面が真っ暗になります。
差分が微妙な場合には、差の絶対値だけでは暗く、確認できませんので、調整レイヤーのトーンカーブ等を入れて、画像のしきい値をあげると確認しやすくなります。以下のようなトーンカーブの形状にすることで、シャドウ部分から数えて1/4以降は全てハイライト側に振る、という意味ですので、この調整レイヤーがかかっている画像は、シャドウ部分の1/4程度の部分のみ黒く残し、それ意外の箇所はハイライト側に触れることになり、結果的に白いか黒いかが明確になります。

PSCS6_bloglast005

PSCS6_bloglast006

ということで、このブログの最初の問題の答えは、上記の白い箇所ということになりますね!
この方法を使用すると、オリジナルデータを外部の方がデータ修正した場合等に、どこを修正しているのかが一発でわかります。これは、InDesignなど他のあらゆるアプリケーションのデータでも可能で、オリジナルデータと修正後のデータを、それぞれ等倍で表示した状態でスクリーンショット(プリントスクリーン)を撮影し、Photoshopで合成するだけで、変更箇所が一発でわかる、ということになります。

それでは、今年1年間、ブログをお読みいただきまして、ありがとうございました。
また来年、よろしくお願いいたします。
皆様も、どうぞよいクリスマス、よいお年をお迎えください。

関連講座

Photoshop の使い方を詳しく知りたい方は!
Photoshop CS6 EXTENDED の使い方・基本トレーニングの受講がオススメです!
◆ Photoshop CS6 EXTENDED の使い方・基本トレーニング

↑ページTOPへ

| カテゴリ | | Web | DTP・デザイン | CG・動画・映像 | キャリア・就活 |
| お客様 Index | | 企業・自治体のお客様に | 学生の方に |
| 目的別・状況別 Index | | Webデザイン入門セミナー | 映像編集入門セミナー | DTPデザイン入門セミナー | 魅力的なポートフォリオ作成 |
| Adobe CCを覚えたい方に | | Photoshop CC 2015の使い方・基本 | Illustrator CC 2015使い方・基本 |
| 画像をきれいに編集する方法 | 読みやすい文字の組み方 |
| HTML / XHTML / CSSの基礎知識 | HTML5 / CSS3の基礎知識 | JavaScriptの基礎知識 | jQuary・jQueryMobileの基礎知識 |
| Dreamweaver CC 2015の使い方・基本 | InDesign CCの使い方・基本 |
| AfterEffects CCの使い方・基本 | AfterEffects CC 2014の使い方・実践 |
| Premiere Pro CC 2014の使い方・基本 |
| Webの基本をマスターしている方 | | 棚橋弘季氏の直伝、ユーザー中心のWebサイト設計 | 益子貴寛氏が伝授するCSS実践テクニック |
| 矢野りんさんに学ぶ、”使える”デザイン基礎知識 | こもり氏のHTML+CSS基礎 | 平塚氏のマーケティング基礎 |
| 坂本氏のIA入門 | Webに関わるすべての人の「Webリテラシー」講座 | 神森勉氏に学ぶコーディング講座 |
| 森川眞行氏に学ぶ、大規模サイトの構築・運用マネジメント |
| 就職・転職・就活中の方へ | | 模擬面接セミナー(個別FB付) | エントリーシートブラッシュアップセミナー |
| 面接・職場で使えるビジネスマナー研修 | 職務経歴書添削セミナー |