オリジナル【マウスカーソル】の作り方と設定

ドット絵の可愛いオリジナルカーソルを作って設定してみましょう！静止マウスカーソルとアニメーションマウスカーソルの作り方もご紹介します☆

自分だけのオリジナルマウスカーソルにすると、バックグラウンドで作業中のときやアプリが固まって待ち状態のときも可愛くて許せます☆

今回はお絵描きアプリProcreateを使ってドット絵を描いたものをカーソルに変換するのにRWCursorEditorを使用してます！

マウスポインターのファイル形式

マウスポインターのファイル形式（拡張子）は「.cur」です。アニメーションマウスポインターは「.ani」です。

マウスカーソル作成手順

①マウスカーソルを描いて背景透過で書き出す（PNG）
②RWCursorEditorをダウンロードする
③RWCursorEditorから.cur/.aniに変換する
④PCに設定する（Windows）

以上がざっくりとオリジナルマウスカーソルの作り方です。

マウスカーソルの種類

１.通常の選択
２.ヘルプの選択
３.バックグラウンドで作業中
４.待ち状態
５.領域選択
６.テキスト選択
７.手書き
８.利用不可
９.上下に拡大/縮小
10.左右の拡大/縮小
11.斜めに拡大/縮小１
12.斜めに拡大/縮小２
13.移動
14.代替選択
15.リンクの選択

Step1：マウスカーソルを描く

今回は32pxのドット絵をお絵描きアプリProcreateで描きました！

キャンバスのサイズは32×32pxにします。dpiは72です。カラープロファイルはRGBです。１マウスポインターにつき1キャンバスを作成します。

ドット絵用のブラシの作成方法と描き方はこちらの記事をご覧ください。

ドット絵の描き方【プロクリエイト】

ピクセルアートとも呼ばれるドット絵とは1pixel(ドット)で描かれる絵です。ドット絵を描くブラシの作成方法、ぼやけさせずドット絵を保存する方法をご紹介します。 ドット絵を描くときのキャンバスサイズは32×32px・64×64px・128×128pxがおすすめです。

u-tami-1.com

2022.01.18

1キャンバスに1マウスカーソルを描きます。

背景色からチェックを外して背景を透過します。

PCと共有できるフォルダーにPNG形式で書き出します。

私はOneDriveに書き出しました。動くカーソルもレイヤーの数だけPNG形式で書き出します。わかりやすいように動くカーソル用の画像はフォルダーでまとめてます。

アニメーションカーソルの描き方と書き出し方

アニメーションマウスカーソルは6種類作成しました！左から「通常選択」「テキスト選択」「リンクの選択」「バックグランドせ作業中」「手書き」「待ち状態」です。

「アクション」＞「キャンバス」＞「アニメーションアシスト」をONにしてアニメーションを作成します。レイヤー毎に動きの違う絵を描いたら「再生」をタップして動作を確認します。

アニメーションの速度は画面したのパネルにある「設定」から「フレーム/秒」で設定することができますが、今回はGIFやMP4ではなく画像として1レイヤーずつ書き出すのであまり気にしなくて大丈夫です。見やすい速度で設定してアニメーションを作成してください。

【アニメーションの基本】についてはこちらの記事をご覧ください。

【Procreate】でアニメーションを作る基本！初めに知っておくと作成が楽になる！

Procreateでのアニメーション作成の流れは、ざっくりと「アニメーションアシストをONにする」 「フレームを追加する」「絵を描く」といった感じです。フレームの追加方法、背景の設定、動く速度がわかれば描いた絵を動かすことができます。 パラパラ漫画と同じで、複数のフレームに絵をかくことで絵が動いて見えます。

u-tami-1.com

2021.06.19

アニメーションができたら書き出します。アニメーションカーソルもレイヤー毎にPNGで書き出します。

次はいよいよ「RWCursorEditor」を使って「.cur」と「.ani」に変換します。

Step2：RWCursorEditor：ダウンロードする

まずはRWCursorEditorをダウンロードするをクリックしてダウンロードします。
使っているWindowsが62bitなのでRealWorld Cursor Editor（64bit版）をダウンロードしました。

お使いのWindowsが32bitか64bitか確認するには「Windowsキー」と「X」を押して「システム」をクリックします。「システムの種類」から2bitか64bitかわかります。

RealWorld Cursor Editorをダウンロードをします。画面右上のアイコンをクリックするとダウンロード状況が確認できます。

ダウンロードするとデフォルトではエクスプローラーの「Downloads」にあるのでダブルクリックします。

セットアップウィザードが出るので「Next」をクリックします。

ライセンス規約では「I Agree」にチェックを入れて「Next」をクリックします。規約内容は翻訳すると次の通りです。

チェックを入れると日本語に設定することができるのでチェックを入れてから「Next」をクリックします。

ソフトの保存先を指定する場合は「Browse」をクリックして指定します。特になければ保存先フォルダーが選択された状態になっているので「Next」をクリックします。

インストールする準備ができたので「Next」をクリックしてインストールを開始します。

インストールが完了したら「Close」をクリックします。

Step3：RWCursorEditorから静止画カーソルに変換

RealWorld Cursor Editorを起動して左のタブから「オンライン」をクリックします。「言語」から「日本語」を選択します。

次に左のタブから「作成①」をクリックして「新規マウスカーソル②」を選択して画面右側にある「キャンバスサイズ：32」「色深度：8bits-256色」「Start with：ラスタレイヤー③」にして「作成④」をクリックします。

保存した画像をドラッグ&ドロップして挿入します。

次にホットスポットを設定します。ホットスポットとはマウスカーソルのクリックの対象となる部分です。

上部にあるメニューバーから「カーソルホットスポット①」機能をクリックします。左上に緑色の点②（ホットスポット）が出てくるのでクリックの対象となる位置を決めます。

「移動」カーソルのホットスポットは十字の中心にあると操作がしやすいので、クリックして十字の中心をホットスポットに設定します。

ホットスポットのテストは画面左側にある「テスト領域」にカーソルを合わせてマウスの左をクリックしたまま移動させると線が書けるのでクリックの位置を確認します。

ホットスポットが設定できたら次はカーソルを保存します。「ファイル①」から「名前を付けて保②」をクリックします。保存する先のフォルダーを指定します。「ファイル名③」を入力して「ファイルの種類③」に「静止画カーソル」を選択して「OK④」をクリックして保存します。

メニューバーにある「新規作成」をクリックして「新規マウスカーソル」＞「作成」をクリックしてその他のカーソルも設定して書き出します。

Step3：RWCursorEditorからアニメーションカーソルに変換

アニメーションカーソルは1フレームに1カーソル画像をドラッグ&ドロップして挿入します。フレームの追加は画面左下の「フレームを挿入」アイコンをクリックします。全ての画像を挿入したらホットスポットを設定します。

アニメーションの速度を設定します。上部メニューにある「カーソル」から「アニメーションの速度を変更」をクリックします。

スライドをドラッグして速度をちょうどいい感じに設定して「OK」をクリックします。

静止カーソルを保存したときと同じように「ファイル」から「名前を付けて保」をクリックします。保存する先のフォルダーを指定します。「ファイル名」を入力して「ファイルの種類」に「アニメーションカーソル」を選択して「OK」から保存します。

その他のアニメーションカーソルも同じように設定して書き出します。