こんにちは、キャリカク一宮駅前の利用者「ファーストネームが K」 です。
4月19日の私のブログ記事「Google図形描画っていうウェブアプリ」でギンガムチェック柄の星のイラストを描いて、詳細は別の機会に、と言っていましたが、今回のブログがその機会です✌
CanvaやGoogle図形描画などたいていのイラスト系アプリに備わっているマスキングという画像処理機能は、写真などの画像をクッキーの型抜きみたいにくり抜くものです。「トリミング」または単に「切り抜き」と言う場合は、たいてい、長方形に限定されたマスキングのことを表します。
今回は、(1)左の図のように、ギンガムチェックの画像ファイルを作ってそれを星型でマスキングするやり方を紹介しますが、以前、2025年12月29日の私のブログ「電卓から始まるスプレッドシート関数━ (2) 範囲で計算SUM系関数」では、(2)右の図のようなスプレッドシートの使い方の説明でマスキングを使っています(拡大画像を丸型でマスキングして表現しています)。したがって、マスキングはマニュアルやプレゼン資料などでも使えるテクニックだと思うので、参考にしていただければ嬉しいです。


1️⃣半透明の長方形を格子状に並べてギンガムチェックを作る
2️⃣ギンガムチェックをPNG形式でダウンロードする
3️⃣新規作成でキャンバスを開き、PNG形式のギンガムチェックをアップロードする
4️⃣「画像のマスキング」で星型を選ぶ
Google図形描画では(たぶん無償版のCanvaでも)トリミングやマスキングという技は、PNGやJPEGといった画像データにしか適用できません。したがって、PNG形式でダウンロードするための図形描画ファイルとそれをマスキングして星型にするための図形描画ファイルを計2つ作る必要があります。
まずは、ギンガムチェックだけを作るために、(1)マイドライブにGoogle図形描画ファイルを新規作成して、(2)キャンバスに細長い長方形を描いておいてください。また、輪郭はいらないので、(3)長方形の枠線の色を「透明」にしておいてください。



今回は赤色を半透明にするやり方を説明します。まず長方形を選択して、(1)「塗りつぶしの色」ボタンをクリックして、(2)「+」マークの「カスタムの色を追加」をクリックして、(3) RGBAと書かれた4つの入力ボックスにそれぞれ、R「255」、G「0」、B「0」、A「50」と入力します(A(アルファ)については、その上の不透明度(透明度)のスライダーを左右に動かして調整してもいいです)🤔



色を光の三原色(赤・緑・青)で表現するのがRGBですが、それにA(アルファ)が加わると、半透明な物体を表すことができます。Aの値は画像ファイルのなかではRGBと同じ0~255の整数ですが、たいていの画像アプリでは不透明度0%~100%のパーセンテージで表されます。
つまり、0%で完全に透明で見えなくなり、100%で完全に不透明で背景がまったく見えなくなります。30%なら背景の色が7割混ざって見え、50%なら背景と半々に混ざった色に見えることになります。
今回の例題では、赤(R)を255にして緑(G)と青(B)を0にしたので真っ赤になりますが、不透明度(A)を50%にしたので、背景が白ならピンク色になります。ギンガムチェックの重なったところでは前後とも同じ色なので、元の赤色に見えるということになります。
あとは、(1)コピペして平行に並べて、(2)それをコピペして90度回転していい具合に重ねるとギンガムチェックができます(がんばろう)。そして、(3)メニューバーの「ファイル」→「ダウンロード」→「PNG画像」を選べばギンガムチェックファイルの完成です😤



ギンガムチェック柄の星を作るために、図形描画を新規作成するか、ドキュメントで「挿入」→「描画」→「新規」として、新しいキャンバスを立ち上げてください(以下の例は、ドキュメント内に挿入した場合です)。
まずは、(1) ツールバーの「画像」をクリックしてください。すると、(2)画像ファイルを挿入するためのウィンドウが現れるので、先ほど作ったPNG形式のギンガムチェックファイルを、ドラッグ&ドロップなどして、アップロードしてください。その挿入画像を選択した状態にしておくと、ツールバーに画像処理のためのツールが現れるので、(3)「画像のマスク処理」というプルダウンボタン(「画像を切り抜く」ボタンの右隣りの逆三角マーク▼)をクリックして、クッキーの型抜きみたいにくり抜きたい図形、例えば、(4)「吹き出し」→「星5」を選べば、ギンガムチェック柄の星の出来上がりです🤩




就労継続支援B型
キャリカク一宮駅前
愛知県一宮市大江3丁目12-22 一観ビル1階
電話番号:0586-71-3577 FAX:0586-71-3587
CONTACT


