タグ: 猫

　やっと教えて欲しかったところに入ります!

　でも練習用画像やテキストは、権利関係の問題で使えないし、文章だけ読むのは大変なので、猫画像だけ見ていって下さいね。

<基本的な選択ツール>

◯選択とは画像の合成や修正を行う範囲の指定

オプションバー /新規選択・選択範囲に追加(ドラッグした範囲を追加)・選択削除(ドラッグした範囲を解除)・共通選択(ドラッグした範囲との共通部分を選択)・ぼかし(指定のpixel数で境界線をぼかす)・スタイル:標準(ドラッグした大きさで選択):縦横比固定(比率を固定して選択):固定(一定のpixel数で選択)

※選択範囲がズレた場合は、ポインタを選択範囲内に合わせ、ドラッグして動かす。

　⚫️長方形選択ツール /定型で選択範囲を作成

　⚫️投げなわ /不定形な選択・フリーハンドで選択範囲を描く(解除は選択範囲の外でクリック)

　⚫️多角形選択 /直線で多角形に選択・直線の始点と終点をクリック(解除は選択範囲メニュー→選択を解除かcommand＋D)

　⚫️マグネット選択 /始点でクリックし作成したい範囲に沿ってマウスを移動・輪郭を細かく縁取る(幅:検知するピクセルの幅・コントラスト:検知する周囲との比較コントラスト強度・頻度:固定ポイントを設定する頻度)

※輪郭から外れたらdeleteキーで1段階前に戻る(それる場合クリックで固定しながらドラッグ)

◯作業の取り消し

　⚫️取り消し /「編集」メニュー→「~の取り消し」(1つずつ前に戻る)

　⚫️取り消しのやり直し /誤って取り消した場合「編集」メニュー→「~のやり直し」(作業が1つずつ復帰)

　⚫️ヒストリーパネル /作業内容の記録一覧(ファイルを閉じると消える)「ウィンドウ」メニュー→「ヒストリー」作業名クリックでその段階まで戻れる

※command＋Zで複数回のステップを取り消しができる「環境設定」→「パフォーマンス」の「ヒストリー数」で設定

　選択ツールは今までどれを試してもうまくいかないし練習しないと〜。いつも失敗ばっかりしてるから、command＋Zは絶対覚えとかなきゃだわ。

<自動的な選択方法>

◯自動選択ツール /クリックした場所と隣接した色味の近い範囲を自動認識して選択範囲を作成(オプションバー許容値設定の大小で色の近さの範囲を選択)

※隣接はクリックした位置と繋がった部分の同じカラーのみ選択(チェックを外すと別の色に遮られている範囲も対象になる)

◯クイック選択ツール /選択したい画像の上をブラシでなぞると自動認識して選択範囲を作成

※選択範囲の一部削除はoptionキーを押しながらドラッグ・クリック

<選択範囲の調整>

◯選択範囲がある場合

　⚫️追加・shiftキー＋選択ツールでドラッグ(クリック)

　⚫️一部削除・optionキー＋選択ツールでドラッグ(クリック)

　⚫️共通範囲・shiftキー＋optionキー＋選択ツールでドラッグ(クリック)

◯選択範囲がない場合

　⚫️正方形か正円で選択・shiftキー＋選択ツールでドラッグ

　⚫️中心から選択・optionキー＋選択ツールでドラッグ

◯選択範囲の移動・削除

　⚫️選択範囲のコピーを移動・option＋command＋shiftキー＋選択ツールでドラッグ

　⚫️選択されている画像の削除・「編集」メニュー→「消去」

※「選択範囲」メニューからの調整 /選択を解除・選択範囲を反転・選択範囲を変更(境界線変更:滑らかに:拡張:縮小:境界をぼかす)

<選択範囲の保存>

◯アルファチャンネル登録

　⚫️「選択範囲」メニュー→「選択範囲の保存」

　⚫️チャンネルパネル「チャンネルを選択範囲として保存」ボタン(下の日の丸)

◯アルファチャンネル読み込み

　⚫️「選択範囲」メニュー→「選択範囲の読み込み」

　⚫️チャンネルパネル「チャンネルを選択範囲として読み込む」ボタン

　⚫️チャンネルサムネイルをcommandキーを押しながらクリック

◯アルファチャンネル削除

　⚫️対象のチャンネル選択後右クリックして「チャンネルの削除」

　⚫️チャンネルをドラッグ&ドロップでゴミ箱に移動

<選択の活用:画像合成>

◯コピーとペースト /選択範囲ができたらコピー&ペースト(同じ範囲に重なる)「移動」ツールで移動

　⚫️コピー・command＋C

　⚫️ペースト・command＋V

　ここから期待のAI選択機能です。Adobeさんの生成AIは「Fire fly」という名前で、火蝿ってなに!?と思ったら、蛍の意味なんですね。こちらのフォトショお助けAIは「Adobe Sensei」と呼ばれてるんだそうな。自社製品を先生って呼ばせるのはどうなのよ。

<選択の活用と人工知能>

◯被写体を選択 /「選択範囲」メニュー→「被写体を選択」

※複数のファイルを選択して開く /shiftキー(またはcommand)を押しながらファイルを選択

◯選択とマスク /「選択範囲」メニュー→「選択とマスク」

※ツールパネルで「選択」ツールが選択されている場合はオプションバーの「選択とマスク」ボタン

　⚫️「表示モード」 /「オーバーレイ」など

　⚫️「被写体を選択」クリックで自動選択

　⚫️「髪の毛を調整」猫の毛を調整

　⚫️「境界線調整ブラシ」微調整したい場所をドラッグ

　⚫️エッジを検出 /「スマート半径」にチェックを入れ「半径」のスライダーを調整(適用範囲に合わせて余分な背景色を削除)

　⚫️グローバル調整 / 選択範囲全体を調整

　⚫️不要なカラーの除去 /エッジの谷間に入った背景色を除去

　⚫️調整結果を選択範囲として書き出す(出力先:選択範囲)最後にOKボタン

◯オブジェクト選択ツール /ツールパネル「オブジェクト選択ツール」

　⚫️選択範囲・マウスオーバー→クリック

　⚫️複数選択・shiftキーを押しながらクリック

※オプションバー上「被写体を選択」の切り替え /デバイス(高速)・クラウド(詳細な結果)・「環境設定」→「画像処理」で標準を変更

※ツールパネルの「画像描画モードで編集」ボタンで元の画面表示に戻る(修正の確認)

◯空を置き換え /「選択範囲」メニュー→「空を選択」

　⚫️空・置き換えたい空の画像を選択(+で画像読み込み)

　⚫︎エッジをシフト・全景と空の境界線の変更

　⚫︎空の調整・「明度」「色温度」「拡大・縮小」「反転」(左右)

　⚫︎前景の調整・「照明モード」「明暗」「エッジの明暗」「カラー調整」

　⚫︎出力・新規レイヤー(編集結果をグループとして追加):レイヤーを複製(編集結果を統合)

※どちらを選んでも「背景」レイヤーは元のまま

　空を置き換えは、もう出来るようになってる数少ない機能です。でも選択と切り取りは、AIに完全おまかせではイマイチかな。

　何度もやってみたけど、今までより良くなった感がないです。特に長毛猫の被毛を自然な形に切り取るのは難しいです。結局は自分で細かく調整しないとだわ〜。疲れるぅ。

2023-10-04

※作業の前に「ウィンドウ」メニュー→「ワークスペース」→「初期設定」

　さらに→「初期設定をリセット」

↑コレ大事だから〜!

<ドキュメントの基本操作>

◯画像の拡大と縮小

　⚫︎ツールバーの「ズーム」

　　拡大 /ポインタを合わせてクリック・長押し

　　縮小 /optionキーを押しながらクリック・長押し

　⚫︎キー操作

　　ズームイン /command＋+

　　ズームアウト /command＋-

　　画面サイズに合わせる /command＋0

　　100%表示 /command＋1

　えっ!?+キーってどこ? -ってこれでいいの?? 普段使わないからすぐ押せない〜!

　Adobeさんてこのキー操作が入るのが曲者なのよ。覚えられないし、焦って先生のデモ画面に付いていけない。仕方ないから動画を戻してやり直し。

◯画面のスクロール

　⚫︎手のひらツール /スペースを押している間だけ切り替え

<画像の情報>

◯カラーモード / RGB・CMYK・グレースケール

　⚫︎「イメージ」メニュー→「モード」→で切り替え

※一度変換したデータは元の色味に戻せないので編集の最後に切り変えること

◯解像度 /情報の密度・1インチにいくつピクセルが並んでいるか

　⚫︎解像度が高い /ピクセル密度が高いがデータ容量は大きい

　⚫︎解像度が低い /ピクセル密度が低いがデータ容量は小さい

※カラー印刷 300~350ppi・グレースケール印刷 600ppi・Web 72~144ppi(モニター側の解像度にも依存)

◯再サンプル(解像度の調整) /「イメージ」メニュー「画像解像度」

　⚫︎ON:ピクセル数の増減を行うため画質は劣化

　⚫︎OFF:ピクセル数は固定で密度が変化

※解像度が足りない画像を大きくする場合「自動」より「ディテールを保持2.0」がオススメ

　途中でまた先に進めなくなって、解説動画を止めました。先生の画面を何度も確認してやっと、数字を打ち込む欄がひとつズレているのに気付きました。オブションバーの文字がすごく小さいので、老眼には読めないし間違えやすいです。今までもこういうつまらんミスで、操作ができなかったような気がする⋯。

◯画像の大きさ

　⚫︎カンバス(台紙)サイズ /「イメージ」メニュー→「カンバスサイズ」

　　解像度は変わらず大きくすれば余白ができる・基準位置の変更も可

※「相対」にチェック /画像サイズを基準に余白追加 /チェックを外すと画像サイズと関係なく指定サイズに変更

　⚫︎切り抜きツール /サイズ変更以外に大きさ・位置の変更・自由な数値入力

※オプションバー /縦横比設定(消去でリセット)・角度補正(画像の中の垂直にしたい部分をドラッグ)作業確定(最後に必ず確定◯かreturnキー)

　⚫︎アートボード /1ファイルに複数のカンバスを並べられる

※サイズ・幅・高さ・背景色・縦長横長切り替え・新規追加・整列・オプション設定

　こういうのって、たまにしか使わない人には、覚えられないです。必要になる都度調べ直すしかないのですかね〜。やれやれ。

2023-09-30

※コメント欄の変更に伴い、コメントを書いた後は、メールアイコンを選択してクリックお願いします。名前とURLが記入できます。

※引き続き、説明の図版イラストなどは権利関係問題で使えません。

<図形を使って考える配色>

◯配色とは2つ以上の色を組み合わせて新たな効果を生み出すこと

　●向かい合う2色(補色) /色相環で180度向かい合う2色

　●二等辺三角形(分割補色) /補色を両隣の色に置き換えた組み合わせ

　●三角形(トライアド) /色相環で正三角のバランスの取れた対照色　

　●正方形(テトラード) /正方形の組み合わせで2組の補色でもある

　●五角形(5色配列)・六角形(6色配列)などもある

※図形を使う配色は、いずれもコントラストが強くなり用途が限られるため、各色の彩度や明度の調整を行う。

<色相を軸にした配色>

◯配色を考える時は、まとまり感を出すのかメリハリ感を出すのか、方向性を決める

　●類似色相でまとまり感・対照色相でメリハリ感

<明度差で考える配色>

◯色相差があっても明度差がないと見えづらい

　●高齢者向けなど目的に応じた明度バランスを考える(ユニバーサルデザインにも通じる)

<トーンで印象を決める>

◯トーン図を使って配色を考える

　●類似トーン /隣り合う色は全て類似トーン /まとまり感

　●対照トーン /縦方向は明度・横方向は彩度の対照トーン /メリハリ感

◯それぞれのトーンごとに表現しやすいイメージがある

　●ごくうすい /軽い・優しい・柔らか・上品

　●つよい /情熱的・活動的・はっきりした

　●くすんだ /ぼんやり・鈍い・シックな

「アタチはうすい色でも強くて活動的だわっ!」「拙者はつよい色でもぼんやり鈍いのでござる」

◯トーンは印象を左右する

　●フレッシュで活動的な色使い(ライトトーンやストロングトーン)

　●円熟した落ち着きのある色使い(ライトグレイッシュトーンやダルトーン・ディープトーン)

<デザインの配色テクニック>

◯セパレーション /文字の縁取りなど

◯細かな柄で変化

◯遠景は明るく淡く

◯目の錯覚を応用

<色を効果的に使う表現例>

◯グラデーションの種類

　●色相・明度・彩度

　●色相の変化を大きく・小さく

　●トーンを全て変える

　●明るく淡いトーン→暗く濃いトーン

◯ベースカラーとアクセントカラー(差し色)のバランスを考える

※ベースとアクセントの間を取り持つ色はアソートカラーと呼ばれ、通常ベースと似たものを使うが、アクセントと似たものでも良い。

<Adobe Color>

◯Adobe ColorとはWeb上で使える配色ツール /基本はカラーホイール

　●カラーホイール左のカラーハーモニールールの中から、求めている色を選ぶと、自動的にバランスの取れた5つの色を提案

◯画像から配色やグラデーションを作る

　●画面上にドラッグ&ドロップした画像から自動的に色を抽出・手動で個々の丸を動かすとカラーパレットの色も連動

　●画像から自動的にグラデーションを抽出・スライダーで調節

　●作った色をライブラリに保存・呼び出し(ウィンドウ→CCライブラリ→ライブラリ)

※コントラストチェッカーで文字色・背景色を指定すると、読みやすさ判定される。(多様な色覚対応)

※AIさん画像を色覚別に加工して並べてみました。左上が元の色。

　↑Adobeを使っていなくてもGoogle Chromeを入れているなら、拡張機能で色覚別の見え方を確認できるものがあります(Colorblindly) このサイトも見え方を確認しながら作ったんですよ。

　人によっても年齢によっても、みんな違う色を見ているのを、忘れちゃいけないですよね。

2023-09-25

　※前回のフォントも同様でしたが、説明用の図解・イラスト・写真類は権利関係の問題で使えません。文章説明だけで分かりづらいと思います。

カラーモードの意味を知る

<光の色・インクの色>

◯光の三原色(RGB) /赤(R)緑(G)青(B)　

　混ぜるとあらゆる色ができる(テレビ・PCモニター・スマホ)

◯インクの三原色(CMY) /シアン(C)マゼンタ(M)イエロー(Y)

　黒インク(K)と白い紙であらゆる色を出す

<画面で見る色をプリンターで出力すると暗く濁って見えるのはなぜ?>

◯光の混色は混ぜるほど明るく白くなり、インクは混ぜるほど暗く黒くなる。RGBとCMYでは再現できる色の範囲が違う。

　※印刷で再現しづらい色は特色を使う(例・金 銀 蛍光色など)

<イメージが大きく変化する色域>

◯モニター上では明るく鮮やかな色が表現できるが、プリンターではイメージが大きく大きく変化する色がある。印刷が前提の作品では注意が必要。

<感覚的に色を探せるHSB>

◯Photoshopではウィンドウ(W)→カラー(C)でHSBスライダーを開く→スライダーを左右に動かして色調整

<Webカラー(カラーコード)とは>

◯16進数を使った色の表示法

　●数字とアルファベットを組み合わせた色表示(左の2桁/赤・中央の2桁/緑・右の2桁/青)　

　●PhotoshopではカラーピッカーやWebカラースライダーなどで扱う(カラーピッカーではさまざまな色表示が一覧できる)　　　　　

色の表記と心理効果

<色を表す時は3つのモノサシを使う>

◯色相 /色味の違い

　●色相が循環する円を色相環と呼ぶ。(Adobe Colorのカラーホイールなど)

◯明度 /明るさ

◯彩度 /鮮やかさ

　●色彩学では縦方向に明度・横方向にサイドの軸を取るのがルール。

　●色を表す3つのモノサシのうち明度・彩度を合わせたものをトーン(色調)と呼ぶ

　※色は立体(三次元)で表すのが本来だがトーンを使えば平面で表せる

　●日本の産業界ではマンセル色相環が使われる

<色の心理効果>

◯暖色(赤/オレンジ/黄)・寒色(青/青緑/青紫)それ以外は温度感のない中性色

◯進出色・後退色

　●等距離にある色は暖色ほど近づいて感じられ、寒色ほど遠くに感じられる

※AIさん画像を元に近付く球体と、遠ざかる球体を作ってみました。そのように見えますか?

◯背景色が変わると図色が変化する(色相対比)

　●図色は背景色によって影響を受け変化して感じられる

◯明度がもたらす心理効果

　●膨張色・収縮色

　●白いロゴは大きく、白文字は太く見える

　※白と黒の心理的な重さの比重は1対1.87 /荷物の運搬では軽く感じられる明るい色の箱、プレミアム感を出したいパッケージには暗い色が使われる。

　●安定感を出す /下の方に大きな面積で暗い色を配置

　●動きや躍動感を出す /上の方に暗い色を配置

◯彩度がもたらす心理効果

　●派手な色 /彩度の高い色は華やかで目立つ

　●地味な色 /彩度の低い色はシックで馴染みやすい

※AIさんの作った画像を加工しています。

「遊園地来たけど誰もいないよ?」もう閉園の時間でしょ。それにアンタいったい誰なのよ!?

2023-09-25