画像を小さくトリミングして綺麗にみせるため、PhotoShop CS3 で色調補正する

PhotoshopPhotoshop CS3

目次一覧

 状態:-  閲覧数:3,702  投稿日:2011-08-04  更新日:2019-07-06
従来 / 思いのほか難しい / 2011年8月4日時点でお気に入りの画像補正操作方法

2011年8月19日時点の感想 / 2011年11月7日時点の感想

従来 / 思いのほか難しい / 2011年8月4日時点でお気に入りの画像補正操作方法

 閲覧数:114 投稿日:2019-07-06 更新日:2019-07-06 

従来


バナーとか、文字入れて加工とかではなく、
単純に画像だけを調整する、という作業は、
実はこれまで、ほとんどやったことがなかった。

というのも、
いつも、文字とか、色々な組み合わせを工夫して、
それなりに見せることに成功していたためだ。
やるとしても、せいぜい、
トーンカーブぐらい。
それで、大体こと足りていた。

思いのほか難しい


ところが、今日、画像加工だけをやる機会があり、
実際にやってみたら、思いのほか難しかった。

自分でも、ちょっとびっくり。

なので、備忘録としてメモしとくよ

こうすれば必ずO.K.みたいなのはない
・やる前は、フィルタの組み合わせみたいな、何か定石みたいなのがあるのかな、と思っていた
・写真加工する際は、常にコレやっとけば、O.K.みたいなヤツ…
・ところが、色々試していく内、そうではないことに気がついた
・というのも、そもそも、画像の撮影時間や、対象物が写っている範囲、明るさ、など、画像は、基本的に1枚1枚違う状態で仕上がっている
・そのため、ある写真では、こうすれな綺麗に見えたのに、別の写真で同じことをすると全然ダメなんてのも、普通に起こり得る、ことに気づいたよ

詳しいことは、追々調べていくとして、
とりあえず、今日、自分が直感的に触った中で、
いい感じなのを自分なりにピックアップしてみたよ。

2011年8月4日時点でお気に入りの画像補正操作方法


「イメージ」ー「色調補正」ー「自動レベル補正」
「イメージ」ー「色調補正」ー「自動コントラスト」
「イメージ」ー「色調補正」ー「自動カラー補正」
・大体の画像は、これやっとけば、ちょっとマシになる
・但し、画像によっては、これやると却って変になるのも稀にあり
・どういう画像がダメかは、現在、検証中

「イメージ」ー「色調補正」ー「平均化(イコライズ)」
・これをかけると綺麗になる画像が稀にある
・どういう画像がこの処理に適しているか、についてもまだ掴みきれていない
元画像


処理後画像



「イメージ」ー「色調補正」ー「色相・彩度」ー彩度を上げる
・ほとんどの画像では彩度を上げると、おかしな感じになるが、画像に占める色使用率が低い(ある特定の色しか使われていないような)場合には、コレを試すと(元画像からは大分加工されるものの)、予想もしない、いい感じに仕上げることが、稀にある

「イメージ」ー「画像操作」ー「覆い焼き(リニア)ー加算」
・上記よりさらに稀だが、画像全体が薄暗いときは、この処理をかけると画像がはっきり見えることがある
・但し、ほとんどの画像ではこの処理を行うと、画像が使える状態ではなくなるため、使う際は、心してかかる必要あり
元画像


処理後画像



2011年8月19日時点の感想 / 2011年11月7日時点の感想

 閲覧数:112 投稿日:2019-07-06 更新日:2019-07-06 

2011年8月19日時点の感想


どうしても不自然になる
あれから、色々試しているのだが、何か不自然になってしまう…
ちなみに、「明るさ・コントラスト」「トーンカーブ」はダメです。情報がつぶれます。明るさ・コントラストは「トーンカーブ」でよりこめ細かい調整ができます。トーンカーブを使うなら「明るさ・コントラスト」は無用です。
詳しくは「明るさ・コントラスト トーンカーブ 弊害」等で検索してみてください。
雲の日に撮った写真を晴れた日のように

「明るさ・コントラスト トーンカーブ 弊害」で検索
早速、検索してみる。
すると、出るわ出るわ、
詳しいサイトのオンパレード。

とりあえず、検索結果1位の下記サイトを見て、
内容理解するだけでも、結構、時間かかりそう。
コーミンのフォトレタッチ教室

どこまでやるの?
これまで、PhotoShopって、ほとんど、トリミングしか使ってこなかったけど、
当たり前の話だが、そんなのは、メイン機能でもなんでもない。

あー、でも、この画像加工を本格的にやり始めると、
永遠に終わらないんじゃないのか、という気がしないでもない。

Illustratorとか、極めている人の凄い作品を見たことあるけど、
あそこまで到達するのはかなりの時間が必要。

つまり、デザインだけじゃなくて、スクリプト等、サイト制作全般に興味がある自分としては、
どこまでやるかの線引きが必要。

画像補正は有効
うん、でも、画像はやっぱり大事なんだよね。
最近、写真に興味が出てきて(興味自体は以前からあったのだが、一眼レフカメラとか持っていなかった)、
恐らくその影響もあるかとは思うが…。

「PhotoShop道」、興味がある分野だけに、あまり深入りすることのないよう、気をつけよう。
今だって、画像系データを取り扱う際(作成・加工)、コネクリ回して、
何パターンも作成して見比べてやるから、時間がかかることこの上ない。
(デザインに正解とかないので、ある程度はしょうがないとは思うが…)

なので、PhotoShopに真剣に取り組んだりすると、
(他のことは全部ほったらかしにて)
一日中、それしか触らないようになってしまいそうで、ちょっと怖かったりする…

ちなみに、Illustratorでイラストを描かないのは、同じ理由による。
(というより、より正確には描けないんだけど、。
もしかして、描こうと思って練習とか始めちゃったりすると、エンドレスでやり続けそうで、
そのことがちょっと怖かったり、そんなでもなかったり……

2011年11月7日時点の感想


今日、またやり方を一つ覚えたので、記念に今のやり方をメモしとく。
ちなみに、以前書いたやり方(自動コントラストなど)は、今はほとんど行なっていない。

1.「イメージ」-「色調補正」-「トーンカーブ」
  「自動補正」をクリックして、実行するかどうかは、画像プレビューを見て決める。
  稀に「自動補正」しない方がいいときもあるので、注意が必要。
  ※「トーンカーブ」を使いこなせれば何でも出来そうな気もするが、まだそこまでは使いこなせない

2.「イメージ」-「色調補正」-「カラーの適用」
  「カラーの適用度」スライダーを200へ向かってズラしていく。
  これも、画像プレビューを見て、実行するか、キャンセルするかを決める。
  これまで試した限りは、元々カラーがきれいな画像の「カラーの適用度」を上げると、変になる可能性がある
  逆に、カラーがはっきりしない画像だと、これを適用することにより、メリハリがついて見えることがある

3.「イメージ」-「画像操作」-「描画モード」
  ・「ソフトライト」… 商品等に適用すると、背景の色が統一されて商品が綺麗に見えると思われる。一般風景に適用した場合、元々ぼんやりした画像では効果を発揮する場合もあるが、元々綺麗に写っている画像だと、この効果を適用することにより、いかにも加工しましたみたいな画像になることがあるので注意が必要。これも必ず、プレビューで試してから実行するかを検討

基本的に、画像を使用する際、必ず試すのは、この3つ。

そして、今日、また新たに一つ技を覚えた。

それは、以前から気になっていた、特定エリア(例えば空)のみを鮮やかにしたい、というもの。
<具体例>
・空の画像がはっきりしない。カラーの適用をかけると、全体に適用されるので、空部分は鮮やかになっても、その他の部分がおかしくなってしまい、使えない、そういうとき

4.「イメージ」-「色調補正」-「色の置き換え」
  画像を表示させ、画像の色を変えたい部分をクリック。後は、プレビューで確認しながら、彩度を上げていくだけ


それから、「特定色域の選択」を試したら、色々してみたけど、
どうもある程度しかできない。

こんなもんじゃないはずだ。
Photoshopのポテンシャルはこんなものじゃないはずだ、と思い、
検索をした結果、良さ気なのを3つピックアップしてみた。

パッと斜め読みした途端、自分のこのエントリー内容のレベルの低さが、ちょっぴり恥ずかしくなった。
まあ、いいでしょう、誰だって、初めは初心者なのですから。

Wacom | 活用ガイド ペンタブレットで写真を加工しよう! メリハリのある美しい風景写真に仕上げる。リンク切れ
ヒストグラムの△をドラッグしたり、「ブラシツール」で「マスク」を利用したりしてます。
この辺りのツール、一度も使ったことないです…。
出来上がりの画像が、明らかにいい感じへ変更されています。

空の色を鮮やかにする。リンク切れ
これ、試してみないと何やってるか理解できないんだけど、
レイヤー効果「グラデーションオーバーレイ」で、文字通り空を描いている(あるいは空のレイヤーを用意)しているってことなのだろうか?

Photoshop world | Tips:海と空をイメージ通りの鮮やかな色に仕上げる秘技!【永嶋サトシ】。リンク切れ
このページ見て初めて気が付いたんだけど、トーンカーブって、ブルーならブルー、グリーンならグリーンだけ、という風に、個別で調整できたのね。
加工前の画像をよくあそこまで持っていけるな、と思ったよ。

結局、誤解してたんだけど、
画像って、1枚1枚条件が違うため、
全ての画像に対して、
何らかのフィルタを適用させたら、「ハイそれで完璧」なんてのはあり得ない、
って思ったよ。

一時は、Photoshopで加工なんて、メンドクサイし、
そんな手間かけるんだったら、画像を用意するほうで勝負した方がいいとか思ってた時期もあったけど、
ちょっとだけカメラで撮影してて思ったんだけど、
どんなにいいカメラ使ったって、天候には勝てないんじゃないかと。

いや、何か、違う内容になってきそうなので、
今日はこれで、終わり。

ここら辺、何となくだけど、
やりだしたら、キリがないような気もするなあ。


カメラは「真実を写す機械」だと思っている人に言いたい5つのこと



「Photoshop CS3」で、画像を円形に切り取り、背景を透明にする



類似度ページランキング
順位 ページタイトル抜粋
1 PhotoShop CS3でトリミング 48
2 「Photoshop CS3」で、画像を円形に切り取り、背景を透明にする 43
3 PhotoShop CS3で画像読み込み 41
4 PhotoshopCS3 で、テキストをアウトライン 41
5 PhotoShop CS3で、ドロップシャドウと、テキストを囲む色 37
6 「Photoshop CS3」で、レイヤーを他のPSDへコピーする方法 36
7 Photoshop CS3 「全てのメニュー項目を表示する」 36
8 「Illustrator CS3」 で「SVG トリミング出力」するためには、「トリムエリアツール」ではなく「アートボードの大きさ」を「オブジェクトサイズ」へ変更した後出力 34
9 Twitter ヘッダー画像は、Fireworks CS3 で作成している 33
10 CSS3で背景色にグラデーションをつける 32
11 Chromeでリンク先ページを常に別タブで開くためには、「Ctrlキーを押しながらクリック」 31
12 Illustrator で文字を見た目通りSVG出力するためには、「アウトライン作成」処理が必要 31
13 トリミングする際、範囲を決定する入力ボックスが表示されなかったら 29
14 背景画像がどうしても表示されない → 「clear:both;」を挿入してみる 29
15 ボタンクリックした際、テキスト選択状態になるのを防止するためには、「user-select: none;」 29
16 SVG線を徐々に描画していくためには、@keyframes を利用 29
17 タグの"submit"属性の見た目を、CSSで変更しようとしてハマる 29
18 デフォルトの「Google Chrome」ではURL欄にwwwが表示されないため、「Microsoft Edge」を使用する 29
19 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない 29
20 ページ内リンクの位置を微調整するためには、Negative margin を使用する 28
2021/8/06 2:57 更新
週間人気ページランキング / 7-30 → 8-5
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 39
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 27
3 RGBの種類 / ビットカラー | RGB(色) 23
4 血の色 / #b30000 / #360800 / #ff0000 | 色 22
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 21
6 Design 0 17
7 HSLとHSVの違い | 色変換(色) 16
8 「属性」「プロパティ」「アトリビュート」の違い | CSS 13
9 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 12
9 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 12
9 コズミックブルーが何色か分からない | 色 12
10 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 11
10 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 11
10 「bgcolor」「background-color」「background」の違い | CSS 11
10 アドベンチャーゲーム系の素材をどうやって用意するの? | イラスト素材(デザイン) 11
11 16進数カラーコード / 2進数 9
12 画面キャプチャ | Chrome 拡張機能(ブラウザ) 8
13 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 7
13 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 7
13 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 7
2021/8/6 1:03 更新