タックルDB画像エディターの使い方

  1. 基本的な仕組み
  2. アイテムを追加する
  3. 任意の画像を取り込む
  4. 文字を入力する
  5. サイズの変更
  6. 回転と反転
  7. 画面に描き込む
  8. 線を引く
  9. 曲線を引く
  10. 一部を消す
  11. 色を変える
  12. 位置を微調整する
  13. レイヤーを結同する
  14. レイヤーの順序を入れ替える
タックル図・仕掛け図を作る~素材を組み合わせて簡単画像作成
ソルトルアー、船釣り、バス釣りなど様々な釣りのタックル図、仕掛け図の画像を簡単操作で作製することができる無料WEBアプリケーション。

基本的な仕組み

画像エディターにはこちらで用意している素材、インポートした任意の画像、文字を入力することできます。また、「描画レイヤーを追加」をクリックすることで描き込みも可能となります。

これらが追加される度に新たなレイヤーが追加されます。背景が透明な場合、一枚の画像であるかのように重なって見えますがこの時点では各オブジェクトは別のレイヤーに属しており、操作が可能なのは一番上のレイヤーに対してのみです。

タックルDB画像エディタレイヤー

ですので順番を考慮してアイテム等を追加していく必要があります。一般的には、最初にロッド・リールセットを追加し、次に仕掛けやルアーを追加していきます。

下層のレイヤーを上層に移動させ、再び操作する方法についてはこちらをご覧ください。

アイテムを追加する

「アイテムを追加」→必要なアイテムを選択→追加ボタンをクリック、で様々釣具を画面上に表示することができます

任意の画像を取り込む

「画像を取り込む」欄から任意のファイルを選択して画像を取り込むことができます

また、WEB上などの画像をコピーしてその下の「クリップボードから画像を貼り付ける」と書かれた蘭にペーストするか「Ctrl+z」で画面上に直接ペーストしても取り込むことができます。

この際、「白を透過」が選択されていれば白色の部分が、「黒を透過」が選択されていれば黒色の部分が透明に変換されます。

画面の一部を切り取って画像として貼り付けるには、Windowsなら標準で搭載されているSnipping Toolが便利です。

文字を入力する

「文字を入力欄」→テキスト、色、フォントを決め入力ボタンをクリック、で文字を入力することができます。

文字はアイテムと同じように移動、回転させることができます。

サイズの変更

素材や取り込んだ画像は、画面下部右端のw,hの数値を調整してその隣のボタンを押すことでリサイズすることができます。hの方を調整すると自動でwの値も修正されるため比を保ったまま縮小・拡大することができます。意図的に比を変えたい場合はhを調整した後でwを調整して下さい。

ただし、画面サイズより大きいサイズに拡大することはできません。

回転と反転

画像下部左端のボタンを押すことで回転させることができます。

画像下部左から2番目のボタンを押すことで水平反転させることができます。

Ctrlキーを押しながら回転ボタンをクリックすると逆方向に回転します。

画面に描き込む

「書き込み」→描画レイヤーを追加をクリックで画面上に直接線を描き込める状態となります。

画面上部のオプション欄から線の太さや色を変更することができます。

線を引く

描画レイヤーを追加した状態で画面上部の「クリア」横の「+」をクリック。「多点入力」をクリックし、画面上に点を打ち「引く」をクリック。

また、「塗る」をクリックすれば点で囲まれた範囲を塗りつぶすこともできます。

細い線を引きたい場合は太さを0.1などにして下さい。

曲線を引く

描画レイヤーを追加した状態で画面上部の「クリア」横の「+」をクリック。「曲線入力」をクリックし、画面上に点を三つ打ち「引く」をクリック。3番目の点は角度を調整するために使います。

一部を消す

余計なものを消したい場合は「マウス・タッチで入力」→「レイヤーを追加」した後、白色で塗りつぶしてください。

より高度な加工が必要な場合はPixlrPolarrなどの外部のツールで編集してから画像を取り込むという手段もあります。

上の層の同じ位置を塗っているだけなので、下のレイヤー自体は変化していません。そのためレイヤーを削除するともとに戻ります。一部を消した状態で動かしたい場合はレイヤーを結合して下さい。

色を変える

描画レイヤーを追加した状態で画面上部の「クリア」横の「+」をクリック。一番下の欄で色を調整して「塗る」をクリックすると一層下の指定した色の部分と同じ位置を塗ることができます。

この操作が有効なのは直下のレイヤーの位置に対してのみです。それ以上下の層に対しては動作しません。

なお、カラーピッカーのスポイト機能を使うと画面上の色を簡単に指定できます(ブラウザによってはスポイト機能がないこともあります)。

上の層の同じ位置を塗っているだけなので、下のレイヤー自体は変化していません。そのためレイヤーを削除するともとに戻ります。色を変えた後で動かしたり縮小したりしたい場合はレイヤーを結合して下さい。

塗りつぶす範囲を制限する

「多点入力」をクリックし、2つ以上の点を打った状態で直下層の特定色の位置を塗ると、有効範囲が打った点の最小x座標以上、最大x座標以下かつ最小y座標以上、最大y座標以下に制限されます。これにより例えば、リーダーの部分だけ色を変えるといったことが可能となります。

上手く塗れない場合は閾値を調整して下さい。

位置を微調整する

アイテムは画面右下の「→」を押すと右に1px、 「↓」を押すと下に1px動かすことができます。

また、Ctrl+xとCtrl+yでも同じことができます(動かない場合は一度画面をクリックして下さい)。

レイヤーを結合する

「画面拡大縮小」の左側のボタンをクリックすると現在のレイヤーと直下のレイヤーを結合することができます。

レイヤーの順序を入れ替える

編集画面上で右クリック(タブレットでは長押し)するとレイヤーのリストが表示され、矢印ボタンを押せば順序を入れ替えることができます。

下層のレイヤーを最上層に移動させれば再び動かす、回転させるなどの操作が可能となります。