【スクラッチ(Scratch)】絵を描いてスプライトや背景を作ろう(ベクター編)

スクラッチ(Scratch)で 自分じぶんだけのスプライトやイラストを 描かいてみたいけれど、「思おもうように描かけない」と困こまっていませんか?

この記事きじでは、スクラッチの ペイントエディターで ベクター形式けいしきを使つかって イラストを描かくときに よく使つかうツールと、その使つかい方かたを 紹介しょうかいします。

ベクター形式けいしきは、図形ずけいの形かたちを あとから自由じゆうに直なおしたり、大おおきくしても 画像がぞうがギザギザしないのが いいところです。

キャラクターやアイコンなど、きれいなイラストを 描かきたいときに 向むいています。

 

スポンサーリンク

ビットマップとベクターのちがい

ビットマップとベクターの違い

コンピュータで使つかう画像がぞうには、大おおきく分わけて「ビットマップ」と「ベクター」の2種類しゅるいがあります。

Scratchの ペイントエディターでも、この2つを切きりかえて絵えを描かけます。

いちばん大おおきな ちがいは、画像がぞうの作つくり方かたです。

  • ビットマップ … 小ちいさな色いろの点てん(ピクセル)を たくさん並ならべて作つくる
  • ベクター   … 点てんや線せんの位置いちを コンピュータが計算けいさんして作つくる

そのため、それぞれ得意とくいなことが ちがいます。

 

ビットマップ形式

ビットマップは、小ちいさな四角しかくい色いろの点てんを たくさん並ならべて 作つくられた画像がぞうです。

この小ちいさな点てんを 画素がそ(ピクセル)といいます。

ビットマップの特とくちょう

  • 写真しゃしんのように たくさんの色いろが 複雑ふくざつに混まざり合あう 表現ひょうげんが 得意とくい
  • 拡大かくだいすると 画像がぞうが あれて ギザギザになる
  • 「ラスター」と呼よばれることもある

主おもなファイル形式けいしき:JPEG、PNG、GIF

 

ベクター形式

ベクターは、点てんの位置いちや 線せんの形かたち、色いろなどの情報じょうほうをもとに、コンピュータが 計算けいさんして描かく 画像がぞうです。

ベクターの特とくちょう

  • ロゴやアイコンなど、シンプルなイラストや 文字もじの表現ひょうげんが得意とくい
  • 拡大かくだいしても 画像がぞうがあれない
  • 写真しゃしんのように 細こまかい色いろの変化へんかを 表現ひょうげんするのは苦手にがて
  • 「ベクトル」と呼よばれることもある

主おもなファイル形式けいしき:SVG、AI

 

スプライトや背景を追加する

スプライトや背景を追加

画面がめんの右下みぎしたにあるアイコンから、スプライトや背景はいけいを追加ついかできます。

スプライトを追加ついかする場合ばあいは「ネコ」、背景はいけいを追加ついかする場合ばあいは「山やまの絵え」をクリックしましょう。

アイコンをクリックすると メニューが出でてきます。

  • アップロード:画像がぞうデータを読よみ込こむ
  • サプライズ :Scratchの画像がぞうからランダムに選えらぶ
  • 描かく    :自分じぶんで絵えを描かく
  • 選えらぶ    :Scratchの画像がぞうから選えらぶ

「筆ふで」のマークをクリックすると、ペイントエディターが表示ひょうじされます。

パソコンに保存ほぞんしてある画像がぞうを入いれたい場合ばあいは、「アップロード」を選えらびましょう。

 

ペイントエディタ―画面の見かた

ペイントエディタ―画面(ベクター)

最初さいしょは ベクター形式けいしきで表示ひょうじされていて、「ビットマップに変換へんかん」ボタンで ビットマップ形式けいしきに切きりかえられます。

コスチュームを増ふやしたい場合ばあいは、コスチュームペインの下したにある「ネコ」のアイコンから追加ついかしましょう。

ツールやボタンの意味いみは下したの通とおりです。

scratch ベクター ツール

 

色の選び方

scratch 色の選び方

塗ぬりつぶしや 枠線わくせんの色いろは、「色いろ」「鮮あざやかさ」「明あかるさ」を 0~100の値あたいで調整ちょうせいして作つくります。

〇を左右さゆうにドラッグして調整ちょうせいしましょう。

色

「色いろ」では、「赤あか」「黄き」「青あお」のような 色いろの種類しゅるいを決きめます。

鮮やかさ

「鮮あざやかさ」では、どのくらい はっきりした色いろにするか決きめます。

鮮あざやかさを高たかくすると、色いろがあざやかになります。

低ひくくすると、モノクロ(白しろ・灰色はいいろ・黒くろ)に近ちかづきます。

明るさ

「明あかるさ」では、色いろの明あかるさを決きめます。

明あかるさを低ひくくすると、黒くろに近ちかい色いろになります。

スポイト

すでに使つかっている色いろと 同おなじ色いろを使つかいたい時ときに使つかいます。

スポイトを選えらび、キャンバス上じょうの使つかいたい色いろをクリックします。

グラデーション

グラデーションとは、色いろがだんだん変かわっていくことです。

グラデーションの種類しゅるいと 2つの色いろを選えらぶと、きれいな色いろの変化へんかを作つくれます。

 

 

筆(ブラシ)

scratch ベクター 筆ツール

自由じゆうに線せんを描かけるツールです。

色いろ(塗ぬりつぶし)と線せんの太ふとさを選えらび、キャンバス上じょうをドラッグします。

手書てがきのイラストや細こまかい模様もようを描かきたいときに使つかいます。

 

塗りつぶし

scratch ベクター 塗りつぶしツール

図形ずけいや 囲かこまれた部分ぶぶんを 好すきな色いろで塗ぬるツールです。

塗ぬりつぶしの色いろを選えらび、色いろを変かえたい場所ばしょをクリックします。

 

消しゴム

scratch ベクター 消しゴムツール

線せんや図形ずけいの一部いちぶを 消けすツールです。

消けしゴムのサイズを選えらび、消けしたい部分ぶぶんをドラッグします。

 

直線

scratch ベクター 直線ツール

まっすぐな線せんを描かくツールです。

線せんの色いろ(枠線わくせん)と太ふとさを選えらび、始点してんから終点しゅうてんまでドラッグします。

  • Shiftキーをおしながらドラッグすると、水平すいへい・垂直すいちょく・ななめ45度どの直線ちょくせんが描かけます。
  • 線せんのはし(〇が表示ひょうじされる場所ばしょ)からドラッグすると、折おれ線せんが描かけます。

 

円

scratch ベクター 円ツール

円えんや だ円えんを描かくツールです。

塗ぬりつぶしの色いろ、枠線わくせんの色いろと太ふとさを選えらび、ドラッグして大おおきさを決きめます。

  • Shiftキーをおしながらドラッグすると、正円せいえんが描かけます。
  • Altキーをおしながらドラッグすると、ドラッグを始はじめた場所ばしょを中心ちゅうしんに描かけます。

 

四角形

scratch ベクター 四角形ツール

四角形しかくけいや長方形ちょうほうけいを描かくツールです。

塗ぬりつぶしの色いろ、枠線わくせんの色いろと太ふとさを選えらび、ドラッグして大おおきさを決きめます。

  • Shiftキーをおしながらドラッグすると、正方形せいほうけいがかけます。
  • Altキーをおしながらドラッグすると、ドラッグを始はじめた場所ばしょを中心ちゅうしんに描かけます。

 

テキスト

scratch ベクター テキストツール

文字もじを入力にゅうりょくするツールです。

タイトルや名前なまえ、セリフなどを入いれたいときに使つかいます。

色いろ(塗ぬりつぶし)と 文字もじのデザイン(フォント)を選えらび、キャンバス上じょうをクリックして 文字もじを入力にゅうりょくします。

文字もじの大おおきさは、「選択せんたく」ツールで 変更へんこうできます。

 

選択

scratch ベクター 選択ツール1

描かいた図形ずけいや線せんを 選えらぶツールです。

選択せんたくすると、移動いどうしたり、大おおきさを変かえたり、コピーしたりできます。

移動

図形ずけいや線せんをドラッグすると移動いどうできます。

大きさを変える

わくのはじにある〇を 外側そとがわまたは内側うちがわにドラッグすると、大おおきさを変かえられます。

回転する

わくの下したにある回転かいてんマークを、弧こを描かくようにドラッグすると、回転かいてんできます。

Shiftキーをおしながらドラッグすると、45度どずつ回転かいてんします。

 

scratch ベクター 選択ツール2

コピー&ペースト

選えらんだ図形ずけいや線せんを「コピー」ボタンでコピーし、「ペースト(貼はり付つけ)」ボタンで はり付つけます。

別べつのスプライトやコスチュームにも はり付つけできます。

削除

「削除さくじょ」ボタンで、選えらんだ図形ずけいや線せんを消けします。

左右反転・上下反転

「左右さゆう反転はんてん」「上下じょうげ反転はんてん」ボタンで、選えらんだ図形ずけいや線せんを 左右さゆう・上下じょうげにひっくり返かえせます。

何なにも選えらんでいない場合ばあいは、コスチューム全体ぜんたいが反転はんてんします。
反対はんたい向むきのスプライトを作つくりたい場合ばあいは、左右さゆう反転はんてんを使つかいましょう。

 

形を変える

scratch ベクター 形を変えるツール

図形ずけいや線せんの形かたちを、点てん(アンカーポイント)を動うごかして 自由じゆうに調整ちょうせいするツールです。

図形ずけいや線せんをクリックし、表示ひょうじされた点てんをドラッグすると、線せんを曲まげたり形かたちを変かえたりできます。

例たとえば、丸まるい顔かおを少すこし細長ほそながくしたり、動物どうぶつの耳みみを大おおきくしたりするときに便利べんりです。

点を移動

点てんをドラッグします。

点を削除

点てんを選えらび、Deleteキーまたは「削除さくじょ」ボタンをおします。

点を増やす

線せんの上うえをクリックします。

 

滑らか・角ばった

scratch ベクター 形を変えるツール2

点てんは「滑なめらか」と「角かくばった」の2種類しゅるいがあります。

「滑なめらか」にすると 角かくがなくなり、きれいな曲線きょくせんになります。

滑なめらかな点てんは、左右さゆうのハンドル(方向ほうこう線せん)をドラッグして、曲まがり方かたを調整ちょうせいします。

少すこし難むずかしい操作そうさですが、練習れんしゅうしてコツをつかみましょう。

点てんの位置いちやハンドルを動うごかして なめらかな曲線きょくせんをかく方法ほうほうを ベジェ曲線きょくせんといいます。

 

グループ化

scratch ベクター グループ化

複数ふくすうの図形ずけいを 1つにまとめる機能きのうです。

まとめると、1つの絵えとして一緒いっしょに移動いどうしたり、大おおきさを変かえたりできます。

例たとえば、目め・口くち・鼻はなを グループ化かすると、顔全体かおぜんたいをまとめて動うごかせます。

グループ化かしたい図形ずけいを選えらび、「グループ化か」ボタンをクリックします。

「グループ化か解除かいじょ」ボタンをクリックすると、元もとに戻もどせます。

 

重なりを変える

scratch ベクター レイヤー

図形ずけいは、紙かみを何枚なんまいも重かさねたような状態じょうたいになっています。

「前まえへ移動いどう」や「後うしろへ移動いどう」を使つかうと、図形ずけいの前後ぜんごの順番じゅんばんを変かえられます。

  • 手前てまえに出だす/奥おくに下さげる:1つ手前てまえ、または 1つ後うしろへ移動いどうします。
  • 最前面さいぜんめん/最背面さいはいめん    :一番いちばん手前てまえ、または 一番後いちばんうしろへ移動いどうします。

例たとえば、目めを顔かおの前まえに出だしたり、ぼうしを かみの後うしろに かくしたりするときに使つかいます。

 

背景・スプライト・コスチュームを保存する方法

Scratchでは、素材そざい(背景はいけい・スプライト・コスチューム)を保存ほぞんする方法ほうほうが2つあります。

  • パソコン(デバイス)にファイルとして保存ほぞんする
  • バックパックに保存ほぞんする(Scratchにサインインしていると使つかえます)

使つかう場面ばめんに合あわせて、保存ほぞん方法ほうほうを選えらびましょう。

 

パソコンにファイルとして保存する

scratch 背景・スプライト・コスチュームをパソコンに保存

素材そざいをファイルとして保存ほぞんしておけば、別べつのパソコンで使つかいたいときや、バックアップしておきたいときに便利べんりです。

保存ほぞんした素材そざいを読よみ込こむときは、スプライトや背景はいけいを追加ついかするボタン(画面がめん右下みぎしたのアイコン)に マウスを合あわせ、表示ひょうじされる「アップロード」をクリックします。

 

スプライトを保存する

スプライトを保存ほぞんすると、コスチューム・音おと・プログラム(コード)が まとめて1つのファイルとして保存ほぞんされます。

  1. 画面がめん右下みぎしたの「スプライトエリア」で、保存ほぞんしたいスプライトを右みぎクリック
  2. 「書かき出だし」をクリックします。

「(スプライト名めい).sprite3」というファイルがパソコンに保存ほぞんされます

 

コスチュームを保存する

コスチュームだけを画像がぞうファイルとして保存ほぞんできます。

  1. 保存ほぞんしたいスプライトを選えらぶ
  2. 「コスチューム」タブを開ひらく
  3. 保存ほぞんしたいコスチュームを右みぎクリック
  4. 「書かき出だし」をクリック

ベクター形式けいしきのコスチュームは.svg、ビットマップ形式けいしきのコスチュームは.pngなどの 画像がぞうファイルとして保存ほぞんされます。

 

背景を保存する

背景はいけいだけを画像がぞうファイルとして保存ほぞんできます。

  1. 画面がめん右下みぎしたの「ステージ」をクリック
  2. 「背景はいけい」タブを開ひらく
  3. 保存ほぞんしたい背景はいけいのサムネイルを右みぎクリック
  4. 「書かき出だし」をクリック

 

バックパックに保存する

scratch バックパックに保存

Scratchにサインインしていると、画面がめん下したの「バックパック」に素材そざいを保存ほぞんできます。

自分じぶんの別べつの作品さくひんでも使つかいたいときや、よく使つかう素材そざいをすぐに取とり出だしたいときに便利べんりです。

  1. 画面がめん下したにある「バックパック」をクリックして開ひらく
  2. 保存ほぞんしたいスプライト・コスチューム・背景はいけいを、バックパックへドラッグ&ドロップ

別べつの作品さくひんを開ひらき、バックパックから スプライトエリアやコスチューム一覧いちらんへ ドラッグ&ドロップすると、いつでも取とり出だして使つかえます。

 

まとめ

ベクター形式けいしきは、図形ずけいや線せんを組くみ合あわせてイラストを描かく方法ほうほうです。

あとから形かたちや大おおきさを自由じゆうに変かえられるので、キャラクターやアイコンなどのスプライト作づくりに向むいています。

最初さいしょは操作そうさが少すこし難むずかしく感かんじるかもしれませんが、ツールを使つかいながら少すこしずつ練習れんしゅうすると、思おもいどおりのイラストが描かけるようになります。

 

タイトルとURLをコピーしました