UTILITY LABO (画像関連ツール)


目次
編集
加工 描画・枠
スポーツ
アニメ
その他 / 暗号関連 ゲーム
Twitter Twitter WSE (@mod_labo) UTILITY LABO 公式SNS

YouTubeサムネ文字入力ツール 文字入れサムネイル画像作成ツール

INDEX 目次
テンプレート [ 表示 ]
▼ テンプレート [ 非表示 ]

テンプレート (1) (文字) … 二重輪郭
テンプレート (2) (文字) … 丸背景
テンプレート (3) (描画+文字) … 左上番号
テンプレート (4) (描画+文字) … 文字+背景
テンプレート (5) (描画+画像・トリミング) … 円形画像+文字
テンプレート (他) (描画+文字) DQ風フレーム (全体)
テンプレート (他) (描画+文字) DQ風メッセージ (下)
テンプレート (他) (描画+文字) DQ風ウィンドウ (右下)
テンプレート (他) (描画+文字) … マリオ風のロゴと土管 (下)
テンプレート (他) (描画+文字・縦書き) … マリオ風の土管 (右)
テンプレート (他) (描画+文字) … 危険フレーム・禁止マーク
テンプレート (他) (描画+文字) … サイバーフレーム
テンプレート (他) (描画+文字) … 映画フレーム

プロフィールアイコン用 [ 表示 ]
▼ プロフィールアイコン用 [ 非表示 ]
円形アイコン (400×400) (描画+文字) DQ風ロトマーク (背景透過)
円形アイコン (400×400) (描画+画像・トリミング) … 星 (黄)
円形アイコン (400×400) (描画+画像・トリミング) … 星 (青)
円形アイコン (400×400) (描画+画像・トリミング) … 桜
円形アイコン (400×400) (画像・トリミング) … 花 (背景透過)
▼ 
▼ 
1.
サムネイルのサイズ [ 表示 ]
SIZE 1280 x 720 px
▼ 
2.
背景色 [ 表示 ]
▼ 背景色 [ 非表示 ]
背景の色

透明度 (OPACITY)
▼  背景画像 [ 表示 ]
 背景画像 (1) ~ (3)
▼ 
3.
描画 [ 表示 ]
 描画 (1) ~ (3) + 他
▼ 
4.
文字入力 [ 表示 ]
 文字入力 (1) ~ (9) + 他
▼ 
5.
挿入画像 [ 表示 ]
 挿入画像 (1) ~ (3)
▼ 
6.
その他 [ 表示 ]
▼ 
7.
▼ 
▼ OUTPUT FORM Image result is displayed here

説明

ユーチューブ用のサムネに簡単に文字入れなどが出来るツールです。

テンプレート [ 表示 ]
テンプレート [ 非表示 ]
既に文字を設定したテンプレートや描画でフレームを設定したテンプレートなど。 テンプレートは設定保存ページ(設定済みURL)として表示され、それを編集することが出来ます。

サムネイルのサイズ [ 表示 ]
サムネイルのサイズ [ 非表示 ]
サムネイルののサイズを指定することが出来ます。
YouTubeのサムネイル画像の推奨サイズは1280px×720pxです。(最小幅は640pxです)
当ツールで扱えるサムネイルの最大サイズは横1920px・縦1080pxに設定してあります。サムネイルを作成するのが目的なので それ以上のサイズに対応する必要はないはずです。 当ツールで扱えるサムネイルの最小サイズは8pxに設定してありますが、最小サイズは300×300px以上を推奨しています。それより小さくなると正常に表示されない可能性があります。
横幅が720px以下の場合は 拡大表示ボタンを押してもサイズは拡大されません。 横幅が300px以下の場合は 縮小表示ボタンを押してもサイズは縮小されません。

背景色 [ 表示 ]
背景色 [ 非表示 ]
サムネイルの背景の色を指定することが出来ます。
背景色は、全ての下地になります。背景色を透過させることも出来ます。
背景画像や描画(四角形)を 画面全体に表示させる場合は 背景色の設定はいりません。

背景画像 [ 表示 ]
背景画像 [ 非表示 ]
サムネイルの背景を任意の画像に出来ます。
背景画像は、背景色の上に書き込まれます。

描画 (フレーム) [ 表示 ]
描画 (フレーム) [ 非表示 ]
指定した範囲を四角形に塗りつぶしたり特定のフレームを描画することが出来ます。
四角形は指定する横軸(X軸)の下、縦軸(Y軸)の右に表示されます。四角形の左上が基点になっています。
描画(フレーム)は、背景の上に書き込まれます。背景を除いて一番最初に書き込まれます。

文字入力 [ 表示 ]
文字入力 [ 非表示 ]
サムネイルに文字を入力することが出来ます。
文字は指定する横軸(X軸)の上、縦軸(Y軸)の右に表示されます。文字の左下が基点になっています。
入力する文字は、描画(フレーム)の上に書き込まれます。

挿入画像 [ 表示 ]
挿入画像 [ 非表示 ]
サムネイルに画像を挿入することが出来ます。
挿入する画像は、文字の上に書き込まれます。背景画像との最大の違いは書き込まれるタイミングです。

その他 (スクリプト) [ 表示 ]
その他 (スクリプト) [ 非表示 ]
スクリプト(JavaScript)を実行して描画した結果をサムネイルに反映させることが出来ます。スクリプトを入力しながらリアルタイムで確認したい時に便利です。 上級者向けの描画方法ですので、詳しい使い方は「JavaScript Canvas」などのワードで検索してみて下さい。
もし不具合のあるスクリプトを実行してエラーが発生したら スクリプトを訂正しても実行できなくなるので、ページを再読み込みしてから訂正したスクリプトを実行して下さい。
使い方のアドバイス [ 表示 ]
使い方のアドバイス [ 非表示 ]

初めてご利用の方へ [ 表示 ]
初めてご利用の方へ [ 非表示 ]
背景画像 (1) と 文字入力 (1) を設定するだけでも それっぽいサムネイル画像を作れます。
描画や挿入画像は もっと凝ったサムネイル画像を作りたい場合に 入力(設定)して下さい。

サムネイルの推奨サイズ [ 表示 ]
サムネイル画像の推奨サイズ [ 非表示 ]
YouTubeのサムネイル画像の推奨サイズは1280px×720pxです。(最小幅は640pxです)
・アスペクト比 … 16:9 (それ意外のアスペクト比の画像でもアップロードはできます)
・ファイル形式 … JPG、GIF、PNG
・ファイル容量 … 2 MB 以下

サムネイルの横軸(X座標)・縦軸(Y座標) [ 表示 ]
サムネイルの横軸(X座標)・縦軸(Y座標) [ 非表示 ]
横軸(X座標)の0地点はサムネイルの一番左で、縦軸(Y座標)の0地点はサムネイルの一番上になります。 サムネイルのサイズが1280×720の場合は、サムネイルの一番右が1280で、サムネイルの一番下が720になります。

文字や画像を回転する基点 [ 表示 ]
文字や画像を回転する基点 [ 非表示 ]
サムネイルの横軸(X軸)の0、縦軸(Y軸)の0を基点に回転します。回転した時は設定した位置からずれるので、回転させた後に位置を修正して下さい。

サムネ画像を表示しながら書き換える [ 表示 ]
サムネ画像を表示しながら書き換える [ 非表示 ]
入力フォームの最上部にある「作成中のサムネイルを常時表示する」のボタンか、「作成/更新」ボタンを押した後に表示されるサムネイルの右上にある「常時表示」のボタンを押したら、作成中のサムネイルの画像を常時表示したままにして編集することが出来ます。
横幅が720px以下の場合は 拡大表示ボタンを押してもサイズは拡大されません。 横幅が300px以下の場合は 縮小表示ボタンを押してもサイズは縮小されません。

もっと文字を入力したい場合 [ 表示 ]
もっと文字を入力したい場合 [ 非表示 ]
文字を入力できる箇所は限られていますが、文字を入力したサムネイルを一度ダウンロードした後に、そのサムネイルを背景画像で読み込むともっと文字を入力できます。

サムネイル画像の位置座標 [ 表示 ]
サムネイル画像の位置座標 [ 非表示 ]
サムネイル画像の上をマウスカーソルで動かすと位置座標が分かります。 縮小サイズで表示されていても原寸大サイズ時の位置座標を表示します。

入力した設定を保存する [ 表示 ]
入力した設定を保存する [ 非表示 ]
「設定保存ページ作成」を開いて「CREATE」ボタンを押すと、入力した設定を保持したページに移動します。そのページをブックマークしておいて、再びそのページにアクセスしたら画像を閲覧・DLしたり設定を変更したりできます。

フォントが正常に表示されなかった場合 [ 表示 ]
フォントが正常に表示されなかった場合 [ 非表示 ]
もしフォントが正常に表示されなかった場合は、ページを再読み込みしなければなりません。 既に入力中の設定がある場合は、「作成/更新ボタン」を押した後に表示される 設定保存ページの「CREATE」ボタンを押してページを移動して下さい。
デザインのアドバイス [ 表示 ]
デザインのアドバイス [ 非表示 ]

文字の輪郭の色を二重にする [ 表示 ]
文字の輪郭の色を二重にする [ 非表示 ]
文字の輪郭の色を二重にしたい場合は、文字入力フォームを二つ使います。 同じ位置に同じ文字を表示させます。そして下になる文字の輪郭の太さを厚く、上に重なる文字の輪郭の太さを薄く設定して下さい。 文字入力フォームを三つ使えば 文字の輪郭を三重にすることも出来ます。

ユーチューブで実際に表示される時のサイズ [ 表示 ]
ユーチューブで実際に表示される時のサイズ [ 非表示 ]
ユーチューブでサムネイルとして実際に表示される時のサイズは横幅360px以下に縮小されますので、原寸大では大きな文字でも縮小されると小さくなっても見えずらくなる場合がありますので縮小サイズでも確認して下さい。

書体(フォント)の見本 [ 表示 ]
書体(フォント)の見本 [ 非表示 ]
メイリオ 123 abc ABC あいうえお カキクケコ 日本語
MS ゴシック 123 abc ABC あいうえお カキクケコ 日本語
MS 明朝 123 abc ABC あいうえお カキクケコ 日本語
IMPACT 123 abc ABC
Bookman Old Style 123 abc ABC
コーポレートロゴ(ラウンド) 123 abc ABC あいうえお カキクケコ 日本語
ラノベPOP 123 abc ABC あいうえお カキクケコ 日本語
NikkyouSansフォント 123 ABC あいうえお カキクケコ 日本語
アンニャントロマン 123 ABC あいうえお カキクケコ
ゴンタかな 123 abc ABC あいうえお カキクケコ
ボグ アイウエオ カキクケコ
コウカオン アイウエオ カキクケコ ヤッホー キャー バーン ドッカーン
じんふぁんしーぴの-Rかな 123 abc ABC あいうえお
ムービーフィルム 123 ABC アイウエオ カキクケコ
PixelMplus10 123 abc ABC あいうえお カキクケコ 日本語
美咲フォント明朝体 123 abc ABC あいうえお カキクケコ 日本語
ドラえもじ 123 あいうえお カキクケコ ドラえもん のびた
イカもどき 123 あいうえお カキクケコ スプラトゥーン
MarioFont 123 ABC MARIO
PolygonParty 123 abc ABC mario MARIO
TRIFORCE 123 ABC ZELDA
PocketMonk 123 ABC POKEMON
Let's go Digital 0123456789 ABC +-/=

絵文字の入力 [ 表示 ]
絵文字の入力 [ 非表示 ]
絵文字を入力することも出来ます。絵文字を無料素材(画像)のように拡大・回転・伸縮することが出来ます。
拡大例 128px
😃😆👍👌
💢💯🔰🚫
⚾⚽🏀🏐
🎍🎎🎏🎋🎃🎄
補足

表示
非表示
全ての項目を入力・設定する必要はありませんので、必要な項目だけ入力・設定して下さい。 上の項目から下の項目の順序でサムネイルに書き込むので、文字の後に処理する挿入画像の方が手前に表示されます。 なので指定した位置が同じ場所に重なる場合は、下の項目の方が後で処理するので 上の項目の方は上書きされます。 レイヤーを重ねるて上書きするような感じで、背景色 → 背景画像(1)~(3) → 描画(1)~(3) → 文字入力(1)~(6) → 文字入力(7)~(9) → 文字入力(他) → 挿入画像(1)~(3) → その他(スクリプト) の順番に実行していきます。 文字入力(他) や その他(スクリプト) の実行タイミングは 変更することも出来ます。 変更するためのチェックボックスは 各項目の下の方にあります。
利用者へのお願い

表示
非表示
当ツール(サムネ文字入れ)を使って作成したサムネイルの権利は利用者自身にありますが、YouTubeなど各サイトの規約に反するコンテンツで使うサムネイルを作る目的の場合は 当ツールは使わないようにして下さい。 当ツールの使用の有無に関わらず各サイトの規約を遵守して頂けるようお願いします。
動作環境

表示
非表示
Chrome
Edge (Chromium base)
Firefox
Safari
2021年製版~最新版のブラウザーを推奨しています。IEは非推奨です。

スマートフォン(Android,iPhone)でも最新版であれば基本的に動作するように設計していますが、動作確認の対象外なので推奨はしていません。 もし正常に動作しない不具合など問題がありましたらメールフォームから連絡して下さい。
あとがき

表示
非表示
ツイッター長文画像化ツールを作ったあとに このユーチューブ用サムネイル画像作成ツールを作りました。 前から画像関連のツールの中で一番ユーチューブ用のサムネを作ってみたかったです。 直前で学んだ画像関連の処理を最大限に活かせると思い開発に踏み切りました。 開発の難易度自体はツイッター長文画像化ツールより低いと思っていましたが、作業工程が多いので非常に手間はかかりました。

プロデザイナーが使うペイントツールがF1マシンで 上級者が使うペイントツールが自家用車だとしたら、 当ツールは運転免許を持ってない人が バスやタクシーに乗るような感覚で 簡単に使えることを目的に開発しました。 ユーチューバー御用達ツールになれるように磨きをかけたいです。
外部リンク YouTube

YouTube
YouTube 公式ブログ (日本版)
YouTube 公式twitter (日本版)
YouTube - Wikipedia
関連リンク

画像関連ツール
追加フォント 初期状態で使えるフォント以外の対応フォント

コーポレートロゴ(ラウンド) ラノベPOP NikkyouSansフォント アンニャントロマン ゴンタかな ボグ コウカオン じんふぁんしーぴの-Rかな ムービーフィルム PixelMplus10 美咲フォント明朝体 ドラえもじ イカもどき MarioFont PolygonParty TRIFORCE PocketMonk Let's go Digital
上部に移動する
by UTILITY LABO
<< 目次 (画像関連ツール)



その他のサイト / セーブエディター.com (ゲーム関連) / 暗号・パスワード関連ツール (セキュリティ関連)
WSE 2022 (C) UTILITY LABO © WEB-G-P.com お問い合わせ (メールフォーム) / ツイッター