お絵かき掲示板NEO(PaintBBS)の使い方

お絵かき掲示板NEOの使い方はオリジナルのJAVA版しぃちゃんPaintBBSと基本的に同じです。
NEOはHTML5・Javascriptで作られているため、JAVAの無いパソコンはもちろん、スマホやタブレットでも絵を描く事ができます。
ここではNEO(PaintBBS)の基本的な使い方を解説しています。PaintBBSの使い方は書籍版と同内容です。

NEO・しぃペイント((PaintBBS)の使い方 初版:2004年1月16日 - 2019年11月6日更新 oekakiart.net

NEOの使い方【基本】

NEOの各部の説明の図解

お絵かき掲示板NEOの基本操作

お絵かき掲示板NEOは、キャンバス内をスワイプ(ドラッグ)して絵を描きます。
右側にある鉛筆等のツールバーはアイコンを複数回、押すと機能が切り替わります。
鉛筆を二回押すと水彩になります。
右側のパレットから色を選ぶか、RGBスライダーRGBスライダーで色を作ります。

スポイトは右クリックです。
右クリックが無い場合は、NEO上部の「右」ボタンを押してからキャンバス内の色をタップします。
NEO上部のツールバー

ペンタブでキャンバスが動いて描けない場合

お絵かき掲示板NEOで最低限覚えるべき操作

基本的なツールは、鉛筆・水彩・消しゴムの3つを覚えたら十分です。
鉛筆 水彩 消しペン
それらのツールを、【透明度】お絵かき掲示板NEOの透明度と、【太さ】お絵かき掲示板NEOの太さで調節しながら絵を描きます。

【レイヤー】お絵かき掲示板NEOのレイヤーアイコンは、2枚しか使えません。
上下に分かれた[Layer0]と[Layer1]を左クリック(タップ)で選択。
右クリックで選択レイヤーを非表示にします。

色の作り方

R(赤)G(緑)B(青)バーを左右に動かして色を作ります。
選択中のパレットの色が変わります。
お絵かき掲示板NEOのRGBバーで色を作る

お絵かき画面の下にある動的パレットからパレットを選ぶ事も出来ます。(PC版の動的パレットの使い方はこちら
ダイナミックパレット(スマホ版)

カラーピッカーの円を操作して感覚的に色を作る事もできます。
[+][-][戻][進]は、NEO内の[拡大][縮小] [元に戻す][やり直し]と同じです。
カラーピッカーの移動部分をドラッグして好きな場所に移動できます。
NEO用カラーピッカー

お絵かき掲示板NEOの使い方【詳細】

PC向けの詳細解説です。
スマホやタブレットでお絵かき掲示板NEOを使う場合は、右クリックは右ボタンで操作します。

500×449 (20KB)

お絵かき掲示板NEOのキャンバス

キャンバス内をドラッグ(スワイプ)して絵を描きます。
右クリックでスポイト(その位置にある色を取得)

お絵かき掲示板NEOでキャンバスの拡大と縮小

キャンバス左下のボタン[+]で拡大します。
キャンバス右下のボタン[-]で拡大した状態を元に戻す。
画面におさまらない拡大は、下と右にスクロールバーが出ます。

お絵かき掲示板NEOのパレット

パレットから色を選んで絵を描きます。
スポイトで拾った色は任意のパレットを右クリックして登録。
[Shift]+マウスクリックでデフォルトカラーに戻す。

  • [窓] 大きいウインドウに切替えて作業領域を増やす(PC)
  • [やり直し] 一手順分の[元に戻す]を取り消します(進む)
  • [元に戻す] 描いた絵を一手順前に戻す(戻る)
  • [塗り潰し] 同じ色で繋がる部分を選択色で塗りつぶす。
  • [投稿] 描いた絵をお絵かき掲示板に投稿します。

(1)お絵描きツール

鉛筆水彩は絵を描く為の基本的なツールです。
透明度調節バー透明度(A値)調節バー太さ調節バー太さ調節バーを併用して使います。
よく使う調整状態は保管ペンに登録しておくと便利です。

鉛筆
主にハッキリしたラインの線画やベタ塗りなどに向いています。
鉛筆で線を描いた後に、細い水彩でなぞる事でギザギザの目立たない滑らかな線にできます。
他にも例えば透明度調節バーでA値を200くらいに下げるとシャープペンのような使用感になります。

水彩
重ね塗りしてもクセがなく綺麗な混色を表現できます。
重ね過ぎると減色処理したようなベタ塗りになってしまう場合があります。
しぃペインターの水彩とは特性が大きく異なります。
他にも例えば太さ調節バー太さ調節バーを1pxにすると線画を描くにも使いやすいツールです。

テキスト
キーボードを使って文字や記号などをキャンバスに書き込めます。
[ABC]選択状態でキャンパス内の文字を入れたい部分をクリックしすると
入力フォームが出るのでカーソルを合わせてから、
キーボードで文字入力してEnterを押すと選択色で文字を描画します。
太さ調節バー太さ調節バーで文字サイズを変更できます。
例えば、同じ文字の色や位置を少し変えて重ねる事で文字に影を付けたり、☆などの記号で装飾にも使えます。
「傾けツール」を使って、縦方向に文字を並べる事もできる。
例えば、☆などの記号も一段階、傾ける事で「いかにもテキストツールを使った印象」が和らぎます。

(2)特殊効果ツール

透明度調節バー透明度(A値)調節バー太さ調節バー太さ調節バーを併用して使います。
よく使う調整状態は保管ペンに登録しておくと便利です。

トーン
[トーン]選択状態でキャンバスをドラッグすると柄パターンで描画します。
A値を変える事で数種類の柄パターンがあります。

覆い焼き
ドラッグした部分の彩度と明度を上げて明るくキラキラにします。
仕上げに拡大[+]して細部をボカシで調整すると綺麗に仕上がります。

焼き込み
ドラッグした部分の彩度と明度を下げて暗くします。
[覆焼]と併用する事で重厚な雰囲気を簡単に表現できます。

ぼかし 色の境界線や線のギザギザ等を綺麗に仕上げます。
綺麗に仕上げるにはキャンバスを拡大[+]して少しづつ丁寧にぼかします。

(3)図形ツール

四角 線四角 楕円 線楕円
[線四角]と[線楕円]は太さ調節バー太さ調節バーで線の太さが変化します。
4種類とも透明度調節バー透明度(A値)調節バーで透明度が変化します。
始点をクリックしてそのまま終点まで引っ張って離す(ドラッグする)と、[四角]または[円]を描画します。
例えば絵の上からセピア色でA値を下げて全体に[四角]を使う事でレトロな雰囲気にできます。

(4)複写反転ツール

コピー
(1) コピー範囲を決めます。
コピーしたい部分を上から下へ斜め方向にドラッグして離すと四角い枠が付きます。
(2) コピーします。
(1)で作った四角い枠をコピー先までドラッグして離すとコピーされます。
別レイヤーへコピーする場合は(2)の操作前にコピー先レイヤーへ切替えてから(2)の操作を行います。

レイヤ結合 [Layer0]と[Layer1]を現在選択してるレイヤーに結合します。
結合したい部分を上から下へ斜め方向にドラッグして離すと結合します。

角取り 選択部分の境界線を均等になめらかに、ぼかします。
例えば、できあがった絵全体に角取りをかける事で手軽にソフトな仕上がりにします。
角取りしたい部分を上から下へ斜め方向にドラッグして離すと角取り効果が出ます。

左右回転 上下反転 選択部分を反転します。
傾け 選択部分を右回りに回転させます。
結合したい部分を上から下へ斜め方向にドラッグして使います。

範囲指定操作の練習

左半分だけ描いた左右対称キャラクターを[レイヤー間コピー][左右反転][レイヤー結合]で完成させます。
(レイヤーは使わなくても出来ますが練習なので使ってみましょう!)
(1)[コピー]を使い、左上から中央下までドラッグして「コピー用の枠」を出します。
(2)空きレイヤーの1に切り替え、(1)で作った「コピー用の枠」を右のコピー位置へドラッグして離す。
(3)[左右反転]を使い、キャンバス中央上から右下までドラッグして反転させる。
(4)レイヤーを0に切り替えて、[レイヤー結合]を使い左上から右下までドラッグして結合したら完成です。
基本

(5)消しゴムツール

消しペン 消す場所に合わせて太さ調節バー太さ調節バーで消しゴムの大きさを調整します。
また、透明度調節バー透明度(A値)調節バーを230くらいまで下げると使いやすいと思います。
[水彩]を選んだ状態で消しゴムを選択しても同じ感じになります。俗に言う[水彩消しゴム]です。
[水彩消しゴム]は自動的に境界線が滑らかにになり使いやすいですが、消し忘れに注意が必要です。
下レイヤーに反対色を置いて透過部分の確認をしてみるのも良いでしょう。

消し四角 ドラッグした選択範囲を均等に消します。
例えばA値を下げた[消し四角]で全体の濃さを調整したりもできます。

全消し 今までに描いた部分をすべて消します。
[全消し]選択状態でキャンバスをクリックすると警告なく消えます。
間違えて消してしまったらトップメニューのにある[元に戻す]で元に戻せます。
使う場面の少ない機能ですが、例えば投稿しないで何度も描いたり消したり繰り返し練習時に便利です。

(6)書き方ツール

[鉛筆][水彩]の描画方法になります。
透明度調節バー透明度(A値)調節バー太さ調節バー太さ調節バーも併用して使えます。

手書き フリーハンドで普通に描きます。
普段はこの[手書き]にしておきます。

直線 始点からドラッグして終点で離すと直線が引けます。

BZ曲線 曲線を描画します。
綺麗な曲線をひけるので、特にマウスを使って描く場合に重宝します。

(1)始点からドラッグしたまま終点で離す。
(2)曲げる方向の1点をクリック。
(3)曲げる方向の2点目をクリック。

(7)マスクツール

通常 マスクや加算を使わずに普通に絵を描く時にセットしておきます。
普段はこの[通常]にしておきます。

マスク マスクは登録した色を保護する機能です。
マスクしたい色を選択してマスクの上で右クリックで適用します。
例えば線画を黒で描いた絵で黒をマスクしたらレイヤーを使わずに線画を保護して着色できます。

逆マスク 逆マスクは登録した色以外を保護する機能です。
逆マスクした色の部分にだけ描画可能になります。

[マスク/逆マスク]の具体的な使い方

加算 描画色より明るい部分にだけ加算描画します。
例えば陰になる色を入れる場合などに使うとより深みのある色合いに仕上がります。
[焼き込み]に似ていますがこちらの方が色を選べるので直感的に使いやすいです。

逆加算 描画色より暗い部分にだけ加算描画します。
例えばハイライト色を入れる場合などに使うとよりキラキラした雰囲気に仕上がります。
[覆い焼き]に似ていますがこちらの方が色を選べるので直感的に使いやすいです。

(9)色作りツール

新しい色を登録する場所をパレットから選び[色作りツール]のバーを動かして作成登録。
他にも動的パレットで色を作る事ができます。
例えば[水彩][覆い焼き][焼き込み][加算][逆加算]などで出来た中間色などを
キャンバスからスポイト(右クリック)で拾いパレットに右クリックで登録もできます。

色作りツール
R(レッド)G(グリーン)B(ブルー)を0〜255に増減させて色を作ります。
例えば、レッド255 + グリーン255 + ブルー0 で黄色になります。
元からあるパレットの色を選ぶと、どういう割合で色ができるか解ると思います。

(10)A値(透明度)の変更

A値(透明度)設定バーを左右に動かしてA値(透明度)の設定ができます。
バーを左に動かすほど透明になり、右に動かすほど不透明になります。

透明度が変わるツール:[鉛筆][水彩][ABC] [ぼかし][覆い焼き][焼き込み] [角取り] [消しペン][消し四角]
柄パターンが変わるツール:[トーン]

(11)太さ変更

太さ変更 [pxサイズ]バーを上下にスライドさせて鉛筆などの太さを調節できます。
数値が大きいほど[鉛筆][水彩][消しゴム]は太くなり、
[ABC]のテキスト入力は文字が大きくなります。

(12)保管ペン

保管ペン 色や太さなどを変更した[鉛筆]や[消しゴム]などを三箇所まで右クリックで設定登録しておけます。
登録した設定は左クリックですぐに呼び出せます。
例えば、太さや透明度を変更した鉛筆と水彩などを交互に使う場面などで有効な機能です。

(13)レイヤー

PaintBBSのレイヤーは[Layer0]と[Layer1]の二枚だけです。
レイヤーが必要な作業が終わった部分から[レイヤー結合]して空レイヤーを作りながら描きます。
レイヤー 左クリックでレイヤー選択/切り替えます。
右クリックでレイヤーを非表示にできます。

レイヤーの具体的な使い方

お絵かき掲示板Art.net>>イラスト講座>>お絵かき掲示板NEOの使い方