ペイントエディターで2色でグラデーションにする画像2-min

Scratch3.0のペイントエディター「塗りつぶし」と「グラデーション」の使い方

Scratch3.0のペイントエディターの「塗りつぶし」と「グラデーション」の使い方や、画像を読み込む方法・コスチュームの中心の設定の仕方を紹介します。

Scratch3.0のペイントエディターはどこにある?

Scratch3.0を起動します。スプライトの名前が「スプライト1」では味気が無いので、名前を「ねこ」に変更します。

「コスチューム」タブをクリックすることでペイントエディターに切り替わります。コスチュームの名前を変更するときは、「コスチューム」欄にキーボードで任意の名前を入力します。

Scratch3.0のペイントエディターの画像-min


・コスチューム1を「右足のばし」
・コスチューム2を「右足まげ」

としました。(^_^)/

「ベクターモード」と「ビットマップモード」の違い

Scratch3.0のペイントエディターは、デフォルトではベクターモードになっています。他のスプライトもベクターモードで作られているので、基本的にはこのままベクターモードで画像編集を行います。

ビットマップに変換の画像-min

ベクターモードは、なめらかな線で表現できるのが特徴です。しかし、キャラクターによってはカクカクとしたビットマップ画像の方が良いかもしれません。そんな時は、「ビットマップに変換」をクリックします。

ビットマップモード

カクカクした線でスプライトを表現したいときは、ビットマップモードを使います。

ビットマップモードの画像-min

塗りつぶしのやり方

スプライト色を変えたいときは、①「塗りつぶし」をクリックしてから②「プルダウンメニュー▼」をクリックします。

ペイントエディター塗りつぶしの画像

「塗りつぶし」の右の枠内の色を見ながら、

・色
・鮮やかさ
・明るさ<

を調整しましょう。

ペイントエディター塗りつぶしの画像2-min

塗りつぶしたい箇所をクリックすると、「塗りつぶし」が実行されます。

ペイントエディター塗りつぶしの画像3-min


グラデーションのやり方

グラデーションで塗りつぶしたいときは、赤□もしくは赤□の左にある2パターンのいずれかをクリックしてから塗りつぶしを行います。グラデーションのパターンは、全部で3種類あるのでいろいろ実験してみて下さいね。

ペイントエディターグラデーションの画像-min


スポイトの使い方

他のスプライトや背景と同じ色を使いたいときは、「スポイト」機能を使います。画面右下から色を吸いたいスプライトのアイコンをクリックします。

ペイントエディタースポットの使い方の画像-min

ペイントエディターを開き、スポイトのアイコンをクリックして、吸い取りたい色の上にマウスのポインターを当ててクリックします。てんとう虫の青色が吸い取れました。

ペイントエディタースポットの使い方の画像2-min

ねこのスプライトをクリックします。さきほど吸い取った色が、塗りつぶしの右隣りの枠内に表示されました。あとは塗りたい箇所をクリックすればOKです!

ペイントエディタースポットの使い方の画像3-min-1


コスチュームを追加する方法

「筆」や「直線」などでスプライトに書き加えることができます。枠線の横の数値を変えることで、線の太さを調整できます。

ペイントエディターの線の太さを調節する画像-min


コスチュームを削除する方法

描いたものを消したいときは、3つの方法があります。

・「戻る」をクリックする
・「消しゴム」を使う
・「ゴミ箱」をクリックする

ゴミ箱をクリックすると全て消えますが、範囲を選択してからゴミ箱をクリックすると選択した範囲だけ削除することが出来ます。

ペイントエディターのコスチュームを削除する画像-min-1

スプライトの形を変える方法

ねこのしっぽは上向きですが、下向きにしたり長くすることだって出来ますよ!

①「形を変える」をクリックします。②形を変えたい箇所を選択します。③ポチを少しずつドラッグして形を変えます。

ペイントエディターのスプライトの形を変える画像-min

グループ化する方法

スプライトと離れてしまったイラストは、グループ化することで1つのスプライトとして扱われるようになります。

①「選択」をクリック②グループ化するものを囲むようにドラッグ③「グループ化」をクリック

ペイントエディターのスプライトをグループ化する画像-min

「グループ解除」をクリックすると、解除できますよ。

ペイントエディターのスプライトグループ化を解除する画像-min

スプライトを反転する方法

Scratchのスプライトは、右向きのものが多いですよね!実は、簡単に左向きにすることができるんです。

①「選択」をクリック②反転させるものをドラッグして選択③「左右反転」か「上下反転」をクリック

ペイントエディターのスプライトを反転する画像-min

ねこが左向きになりました!

「枠線をなし」でコスチュームを描く方法

図形を描くときに、枠線(輪郭線)が不要な場合がありますよね。「枠線なし」を選択してから図形を描くことで、枠が無い図形が描けます。

ペイントエディターの「枠線をなし」でコスチュームを描く画像-min

コスチュームの角度を変える

赤で囲った部分を左右にドラッグすることで、図形の角度が変化します。

ペイントエディターのコスチュームの角度を変える画像-min

手前・奥を入れ替える方法

ねこの足が図形で隠れてしまたので、図形を背面に下げます。図形を選択した状態にしてから、「下げる」をクリックしましょう。

ペイントエディターで手前・奥を入れ替える画像-min

テキストで日本語入力を入力する方法

「テキスト」をクリックしてから「日本語」を選択し、キーボードで入力してみましょう。1語ずつ改行することで縦書きもできますよ。

ペイントエディターで日本語入力する画像-min

コスチュームの中心を設定する方法

Scratchのスプライトライブラリーにあるスプライトは中心が設定されています。しかし、自分で作成したオリジナルのスプライトやスプライトをコピーして中心がズレてしまった場合などには、スプライトの中心を設定する必要があります。スプライトやコスチュームが複数の場合は、

①選択をクリックしてスプライトを囲み②「グループ化」をクリック

してグループ化します。

ペイントエディターでコスチュームの中心を設定する画像-min




ステージには、薄いグレーの点が敷きつめられています。中でも、ステージの中心の点は他の点よりも大きくなっています。ここが中心となるので、中心を設定したい(グループ化した)スプライトをドラッグして中心の点が中心になるようにします。

ペイントエディターでコスチュームの中心を設定する画像2-min

これで、スプライトの中心が設定されました!

ペンタブレットがおすすめ

ペイントエディターの「筆」でスプライトや背景を自由に描くことが出来ますが、マウスで描くと線がカクカクして上手く描きずらいです。そんなときは、ペンタブレットがおすすめですよ。高いものは必要ありません。私が使っているのは安価なものです。マウス代わりにペンのように使えるので便利です!


ペンタブレットの画像-min

ペンタブレットは、マウスのように右クリック・左クリックも出来るのでマウスが無くても操作が完結します。

オリジナルのスプライトを作る方法

オリジナルのスプライトを作ってみましょう!ねこは邪魔なので、消しておきましょう。「×」をクリックすると、スプライトが削除されます。

ペイントエディターでスプライトを削除する画像-min

「スプライトを選ぶ」をクリックして、「描く」をクリックします。これから描くスプライトの名前を入力しておきましょう。

ペイントエディターでオリジナルのスプライトを描く画像-min

塗りつぶしにグラデーションを使うと立体的に見えますよ!

ペイントエディターでかぼちゃを描く画像-min

コスチュームをコピーする方法

かぼちゃの中に絵を描けないので、外側に目を描いて後から組み合わせます。目をコピーします。

①「選択」をクリック②コピーしたいものをドラッグで選択③「コピー」をクリック

します。「貼り付け」をクリックすると、コピー完了です。左右反転して、任意の場所にドラッグすればOKです。

ペイントエディターでコスチュームをコピーする画像-min

スプライトが完成したら、忘れずにグループ化しておきましょう。

スプライトを拡大・縮小する方法

スプライトが大きすぎたり小さすぎるときは、倍率を変更できます。「大きさ」はデフォルトで100(%)になっているので、

・数値を100より小さくすると縮小
・数値を100より大きくすると拡大

することが出来ます。

ペイントエディターで拡大縮小する画像-min


画像の「書き出し」をする方法

作成したスプライトをパソコンに保存することが可能です。スプライトのアイコンの上で右クリックして「書き出し」を選択しましょう。

ペイントエディターで「書き出し」をする画像

パソコン内にスプライトが保存されます。

画像を読み込む方法

パソコンに保存してある画像を読み込むときは、

①「スプライトを選ぶ」をクリック②スプライトをアップロード

でScratch3.0へアップロードできます。

ペイントエディターで画像を読み込む画像-min

背景を塗りつぶす方法

オリジナル背景も、スプライトと同じように

①背景を選ぶ②描く

から作ることが出来ますよ!背景を塗りつぶしたいときは、「ビットマップに変換」をクリックします。ビットマップモードにすると塗りつぶしができるようになります。

ペイントエディターで背景を塗りつぶす画像-min

色を選択したら「塗りつぶし」をクリックしましょう。背景に画像を書き加える場合は、ベクターモードに変換してから描くと線がなめらかになります。

ペイントエディターで背景を塗りつぶす画像2-min

背景をグラデーションにする方法

2色でグラデーションを作ります。「塗りつぶし」右隣りのプルダウンメニュー▼をクリックして、好みのグラデーションのパターンをクリックしましょう。

ペイントエディターで2色でグラデーションにする画像-min

このままだと、紫と紺のグラデーションになってしまいます。紫とオレンジにしたいので、紺色をクリックして、オレンジに変更します。「塗りつぶし」をクリックすれば、紫とオレンジのグラデーションの完成です!

ペイントエディターで2色でグラデーションにする画像2-min


2色のグラデーションは、スプライトを塗るときも同様の操作で出来ますよ。

画像を拡大する方法

背景にイラストを描くときは、拡大をしてから描くと上手く描けます!描き終わったら、「=」をクリックして等倍に戻しておきましょう。

ペイントエディターで画像を拡大する方法-min

※ScratchはMIT Media LabのLifelong Kindergarten Groupによって開発されました。https://scratch.mit.edu/を参照してください。 

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

1
フリー画像編集ソフト/イラスト作成ソフト/マイクラ/プログラミング教育/など書いています。 生活にアートを.com( https://xn--r9j1d0b6i8jx814a8sl.com/ )もよろしくお願いします!
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。