465.スットコ年末風景にゃ

 日向ぼっこしてるドンごろーとゴンゴン。相変わらずのノンビリした風景です。ママの方は、お勉強の間滞ってた案件とか大掃除とか、やらなきゃいけない事だらけで、当分バタバタしそうです。

 お勉強の間ボンにゃんとゴンは、毎日必ずお手伝いに来てくれましたよ。お膝やキーボード上で見守り活動をされると、ありがた迷惑なんですけどねー。

 コバンは寒くなっても、水行とお清めを欠かしません。エライですね。

 ダンゴ君はちゃんと警備のお仕事を⋯「アンタ寝てたんじゃない?」「いえ起きてますっ」「この通りシャキッと起きてますよっ」

 鈍五郎ハウスはまだ2軒目が持ちこたえています。夏場ずっと入らなかったのと、1軒目でボロボロかじり取られたドアや窓を、あらかじめ切り取っておいたのが正解でした。

 ママは皆が仔猫の頃に、ニンゲンの食べ物には、絶対口を付けないよう躾けました。ここ数年は、歳を取って食が細くなった猫達に、食べられそうなものを何でも与えています。結果、おやつ争奪の壮絶バトルが、展開されるようになっております。

 内部清掃しても調子の悪かった洗濯機は、ついに修理を頼みました。最近は業者さんが来ても、猫達は落ち着いたものです。ゴンも纏わり付きに行かないし、おデン様は、場所空けの為に移動したハウスで、くつろいでおられます。「また私の転送装置を分解していますよ」「ま、いんじゃね?」「まだ終わらぬかのぉ」

「これでやっと落ち着いて寝れるわねっ」「おやっすみぃ」「私はワープ座標を繋ぎ直さなければなりません」

 我が家は平和なものですが、数日前に近所で火事があったのです。

 燃えたのは、赤いビルの裏のマンションの2部屋だそうです。年末は空気も乾燥していて、火災が多いのですね。ウチも気を付けなければ。

 何だかんだと色々ありましたが、とりあえず無事に年越し出来そうです。

2023-12-26

454.8色設定/描画・色塗りツール

※「今日は僕達お勉強しなくて良いんですか?」と聞いてる猫さん達はAI画像です。

<描画色と背景色>

◯描画色 /ブラシやテキスト・シェイプの色

◯背景色 /画像の一部を削除(消しゴムツール)した際に現れる背景レイヤーの台紙の色

 ⚫️初期設定に戻す:ツールパネル左上四角をクリック(描画色は黒・背景色は白)

 ⚫️描画色・背景色の入れ替え:ツールパネル右上矢印をクリック

※それぞれの選択ボックス上でクリックすると「カラーピッカー」を表示

「おっかぁ!オラおやつが欲しいずら〜」お勉強中でも呼び付けるドンごろー。

<カラーピッカー>

カラーピッカーパネルはさまざまなカラーモードでの色指定を、1画面で行うことができる(描画色か背景色の切り替えボックスをダブルクリックで呼び出し)

◯カラースライダー /▶️◀️(スライダー)をドラッグして色相を選択

◯カラーフィールド /カラースライダーで決定した色の詳細を決める(上・明るい/下・暗い/左・くすんだ/右・鮮やか)

◯色域外警告 /⚠️このマークが出ている色は印刷では表現できない(マークをクリックすると比較的近い色で印刷可能な色に自動変換)

◯Webカラー範囲外警告 /📦(違っ!この箱じゃない箱マークよ)このマークが出ている色は非Webセーフカラー(マークをクリックすると比較的近い色でWebセーフカラーに自動変換)

<スポイトツール>

ツールパネル「スポイト」を選択し画像をクリックすると、クリックしたピクセルの色を描画色として選択できる。

※サンプルカラーを描画色の上でプレビューする円は内側上が現在選択色・下が前回選択色 /表示・非表示はオプションバー「サンプリングを表示」を選択

「オレつまんねーからちょっと寝るぜぃ」機嫌悪そうなゴンゴン。

<カラーパネル>

◯カラーパネル上で描画色・背景色をクリックで選択した後カラーピッカーと同様の操作で色を指定 

※カラーパネルの表示・非表示は「ウィンドウ」メニュー→「カラー」を選択 /パネルオプションメニューから表示形式やカラーモードを変更

<スウォッチパネル>

◯スウォッチパネルには、頻繁に使用するカラーや作成したカラーを登録できる・スウォッチパネル上の色をクリックすると描画色を設定できる(optionキーを押しながらクリック→背景色として選択)

※スウォッチパネルの表示・非表示は「ウインドゥ」メニュー→「スウォッチ」を選択(さまざまなプリセットがある)

 ⚫️現在のライブラリに追加 /Creative Cloudのサービスで、CC上に頻繁に使用するアセットを登録し、さまざまなデバイスやCCアプリで利用できる。

<グラデーションパネル>

◯グラデーションパネルの色を選択後ドラッグ&ドロップで画像に適用・適用するとレイヤーパネルにグラデーションレイヤーが作成される(削除はレイヤーを削除ボタンへドラッグ)

※グラデーションパネルの表示・非表示は「ウインドゥ」メニュー→「グラデーション」を選択(さまざまなプリセットがあり新規登録もできる)

<パターンパネル>

パターンとは「柄」を指し、選択範囲を塗りつぶす時に繰り返して描画される画像・さまざまなプリセットがあり新規登録もできる

「わらわは苦しゅうない。続けるが良いぞ」おデン様もお休みになられるようです。

<ブラシツール>

ブラシツールはペイント効果の追加(手書きで画像に足す)別機能での活用(クイック選択ツールでの選択・画像修正など)ができる。基本的には描画色=ブラシのカラー。

◯描きたいレイヤーが選択されていることを確認「ブラシ」ツールを選択

 ⚫️「描画色」で色を指定・オプションバーで直径(大きさ)・硬さ(フチのボケ)を変更

※移動ツールでアートボード名をクリック「表示」メニュー→「アートボードを画面サイズに合わせる」を選択で、選択したアートボードのみを画面サイズに合わせることができる。

<ドキュメントの操作>

「不透明度」と「流量」は選択したブラシによっては違いが出にくい

◯不透明度 /数値が小さいほど透明に近付く(重ね塗りの変化はほとんどない)

◯流量 /インクを流し込む量で数値が小さいほど掠れる(重ね塗りで色が濃くなる)

 ⚫️「滑らかさ」は手で書く際のブレを補正(ストロークが速いと遅れが生じる)

※「ブラシ」ツールで描画した内容は「消しゴム」ツールで削除できる。

「アタチ眠いんだから起こさないでっ」ボンにゃんもお昼寝中です。

<設定パネルと様々なブラシ>

「ウインドゥ」メニュー→「ブラシ設定」パネルで登録されているブラシをカスタムできる

◯ブラシ先端のシェイプ

 ⚫️シェイプ /サイズのジッター(ランダムな揺れや歪み)コントロール:筆圧(ペンタブレットと連動)

 ⚫️散布 /テクスチャを散らばせる

 ⚫️テクスチャ /パターンの読み込みが可能

 ⚫️デュアルブラシ /別のブラシの特性を同時使用

 ⚫️カラー /描画色・背景色のジッター

 ⚫️その他 /不透明度のジッター

「私の解説が必要なのではありませんか?」お手伝いしようとするガンちゃん。

<直線や破線の書き方>

ブラシツールを選択→オプションバー→「ブラシ」パネル→「汎用ブラシ」ソフト円ブラシを選択

◯shiftキーを押しながらクリックすると直線が引ける

「ブラシ設定」パネル→「ブラシ先端のシェイプ」の「間隔」をあげていくと破線(点線)になる。

※間隔の%は今設定しているブラシの直径によって決まる。基本的には100%以上の数値に設定すると点と点の間隔を広げることができる。

<カスタムブラシの利用>

「ブラシ」パネル→パネルオプションメニュー「他のブラシを入手」でダウンロード→パネルオプションメニュー「ブラシを読み込む」

※パネルオプションメニュー「選択したブラシの書き出し」「ブラシを読み込む」で共有のやり取りも可能

「また終わらないのでござるか」待ちくたびれているコバン。

<塗りつぶし>

「塗りつぶし」はブラシで細かくなぞるのではなく、広範囲に色を塗りたい場合に便利。

◯「塗りつぶし」ツール /自動選択ツールのように、選択範囲を作らなくても許容値(クリックした場所と近い色)や、隣接(繋がっているかどうか)で塗る。

 ⚫️塗りつぶし領域のソースを設定:塗りつぶす内容の選択肢は「描画色」と「パターン」

 ⚫️許容値:クリックした場所のピクセルの色に近いものを対象にする範囲の設定(色の近さ)

 ⚫️隣接:クリックした位置と隣接した(繋がった)部分の同じカラーのピクセルのみを対象にする

◯「編集」メニュー→「塗りつぶし」 /基本的に選択範囲内に適用。選択範囲がない場合は画像全体に適用。

 ⚫️描画色:描画色で選ばれた色で塗りつぶし

 ⚫️背景色:背景色で選ばれた色で塗りつぶし

 ⚫️カラー:塗りつぶしに使用する色をカラーピッカーで選べる

 ⚫️コンテンツに応じる:内容に応じて塗りつぶす内容を設定

 ⚫️パターン:「パターン」パネルに登録されたものから選べる

 ⚫️ヒストリー:指定したヒストリーの内容で塗りつぶし(事前に「ヒストリー」パネルの「ヒストリーブラシのソースを設定」で適用したいヒストリーを指定)

 ⚫️ブラック⚫️50%グレー⚫️ホワイト /それぞれの色で塗りつぶし

※選択しているレイヤー上に直接描かれるので、必要に応じて新規レイヤーで作るか複製しておく。

<グラデーションの作成>

グラデーションパネルのパネルメニュー→「新規グラデーショングループ」か、グラデーションパネル下の「グラデーションを新規作成」をクリック

 ⚫️グラデーションの下に左右に表示されているそれぞれの分岐点をダブルクリックして、カラーピッカーから任意のカラーを指定

 ⚫️カラー分岐点の中間をクリックして分岐点を追加できる

 ⚫️追加した分岐点の削除は「削除」ボタンをクリック

 ⚫️不透明度の分岐点はクリックすると透明度や位置の設定ができ、中間をクリックすると追加もできる

◯作成したグラデーションは「新規グラデーション」ボタンを押して追加「OK」を押す→「グラデーション」パネルから作成したグラデーションカラーを選択範囲にドラッグ&ドロップで適用

「そろそろ遊びませんかぁ」待ちきれないダンゴ君。

2023-10-11

449.3-2配色テクニック

※引き続き、説明の図版イラストなどは権利関係問題で使えません。
※AIさん画像で写真ではありません。

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

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

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

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

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

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

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

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

※AIさん画像です。

<色相を軸にした配色>

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

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

<明度差で考える配色>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

※AIさん画像ですよ。

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

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

◯細かな柄で変化

◯遠景は明るく淡く

◯目の錯覚を応用

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

◯グラデーションの種類

 ●色相・明度・彩度

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

 ●トーンを全て変える

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

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

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

<Adobe Color>

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

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

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

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

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

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

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

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

2023-09-25

446.2-3トリミング/配置/文字

※AIさんが作った画像を加工

◯トリミング /いらないところを切り取り必要な部分だけ表示

 ●どんな構図で使いたいか・水平垂直のラインは合っているか

 ●サイズが小さくなりすぎないか・不自然に見える場所で切っていないか

 見せたいのはドンごろーの寝姿だけなので、ごちゃごちゃしたモノをなるべく切り取ってみます。その結果3024×4032だった画像が1500×2000まで下がってしまいました。横の線は水平になるように直しています。

デザインと写真

 ◯写真を使えば見る人の目を引き、文字より早く情報を伝えられる。

  ●イメージに合っているか

  ●文字を入れる余白があるか

  ●人物の視線が見せたい方を向いているか

 ◯写真の配置

  ●裁ち落とし /紙面いっぱいに写真を配置

  ●角版 /四角形の枠にはめて配置

  ●切り抜き /被写体に沿って切り抜いて配置

<メインとサブははっきりと>

「わらわがメインに決まっておろう」「僕⋯サブでいいです」

 そういう意味じゃありません。何枚かの写真の中で見せたいものを大きく、サブ的なものは小さく配置するのよ。同じ重要度なら大きさを揃えてね。

「オレよりドンの方がでけぇじゃん」

 だから複数の写真の大きさの話だってば。

<写真の向きを意識する>

 上の2枚を並べると会話してるように見せられますが、下の2枚だと仲が悪くて顔を背けてるみたいになり、写真の向きで印象が変わります。

 ※写真の縦横比を変更して、不自然に変形させない様にしましょう。

写真と文字

◯写真の上に置く文字は読みやすく /余白に配置する

<文字を見やすくするテクニック>

 太文字・縁取り・シャドウ・シェイプ・背景をぼかす など

 出た!また専門用語よ。シェイプはこの場合他の加工アプリで背景色と呼んでるヤツね。

※スットコランド画像はAIさんが作ったものを加工しています。

 文字は写真との一体感・雰囲気合わせも大事です。

2023-09-23

443.1-2デザインの進め方

※生成AIさんに作ってもらった画像を加工

◯優先順位をつける

 ●伝えたいメッセージと合うデザイン

  伝えたいことを整理して大事な方を優先・強調

※伝えたいコト 左・ドンごろーは可愛い 右・散らかってどうしようもない家

◯メリハリをつける

 ●構造にメリハリをつける

   重要度が高い方を強調・情報構造を明確化(並列・順列・・階層・網目)

並列・ぶんぶんキャッツ現役メンバー
順列・年齢順
階層・エライ順
網目・それぞれの所属

◯ビジュアルに置き換える

 ●テキストをビジュアルに置き換えるメリット

  情報量・伝達スピード・言葉がわからなくてもOK・より直接的な表現

 <置き換えの例>

  写真・イラスト・グラフ・図解・サイン・アイコン

※イラスト類は全て生成AIさんに作ってもらいました。

◯世界観を作る

 ●世界観とは構成要素の掛け合わせで生み出す全体的な雰囲気・方向性

  構成要素

   配色・文字・形・配置

   シンプル・ポップ・ダイナミック

※POPのラインストーン文字はAdobe AIさんに作ってもらいました。説明はApple辞書より。

◯方向性の統一

 ●第一印象は複雑さで決まる

  要素は必要最低限・方向性の統一

※カボチャと新年セットはAdobe AIさんに作ってもらいました。

2023-09-20