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

▼
目次

基本

色

加工

描画

ロゴ

スポーツ

ゲーム / アニメ

動画GIF

その他

Twitter UTILITY LABO (@utility_labo) 画像ツール用

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

INDEX 目次

テンプレート
サムネイルのサイズ
背景色 / 背景画像
描画 (フレーム)
文字入力
挿入画像
その他 (スクリプト)
作成 / 更新 (ボタン)
説明 / 補足
リンク

▼ テンプレート [ 表示 ]

▼　

▼ サムネイルのサイズ [ 表示 ]
SIZE 1280 x 720 px
▼ サムネイルのサイズ [ 非表示 ]
サイズ (横幅) 最大2560px

サイズ (縦幅) 最大1440px

▼　

▼ 背景色 [ 表示 ]
▼　 ▼ 背景画像 [ 表示 ]
　背景画像 (1) ～ (3)
▼ 背景画像[ 非表示 ]
▼　

▼ 描画 [ 表示 ]
　描画 (1) ～ (3) ＋他
▼ 描画 [ 非表示 ]
▼　

▼ 文字入力 [ 表示 ]
　文字入力 (1) ～ (9) ＋他
▼ 文字入力 [ 非表示 ]
▼　

▼ 挿入画像 [ 表示 ]
　挿入画像 (1) ～ (3)
▼ 挿入画像 [ 非表示 ]
▼　

▼ その他 [ 表示 ]
▼ その他 [ 非表示 ]
スクリプト入力 ※ 反映させる場合は必ずスクリプト実行ボタンを押して下さい

//	例 (下記のコメントアウトを外したら実行できます)

// 円形
//	context.beginPath();
//	context.arc( 600, 200, 150, 0 * Math.PI / 180, 360 * Math.PI / 180, false );// 円形
//	context.closePath();
//	context.fillStyle ='rgba(255,0,0,1)';// 色
//	context.fill();// 塗りつぶす

// 円形 (日の丸)
//	context.beginPath();
//	context.arc( canvas.width/2, canvas.height/2, canvas.height*0.3, 0*Math.PI/180, 360*Math.PI/180, false );// 円形 (中央)
//	context.closePath();
//	context.fillStyle ='rgba(255,0,0,1)';// 色
//	context.fill();// 塗りつぶす

/*
	// 三角形
	var p1 ={ x:250, y:90 };
	var p2 ={ x:110, y:330 };
	var p3 ={ x:380, y:330 };

context.beginPath();
	context.moveTo(p1.x, p1.y);// 始点(p1)
	context.lineTo(p2.x, p2.y);// 次の頂点(p2)まで線を描く
	context.lineTo(p3.x, p3.y);// 次の頂点(p3)まで線を描く
	context.lineTo(p1.x, p1.y);// 始点(p1)まで線を描く
	context.closePath();

context.lineWidth = 5;// 線の太さ
	context.strokeStyle ='rgba(255,0,0,1)';// 線の色
	context.stroke();// 線

context.fillStyle ='rgba(255,0,0,0.7)';// 色
	context.fill();// 塗りつぶす
*/

// 四角形
//	context.fillStyle ='rgba(255,0,0,1)';// 色
//	context.fillRect(900, 50, 300, 300);// 四角形

/*
	// 紅白幕 / 鯨幕
	context.fillStyle ='rgba(255,0,0,1)';// 色 (赤色だと紅白幕、黒色だと鯨幕)
	context.fillRect( 0, 0, canvas.width, canvas.width/10 );// 四角形
	context.fillRect( canvas.width/20, 0, canvas.width/10, canvas.height );// 四角形
	context.fillRect( canvas.width/20+canvas.width/10*2, 0, canvas.width/10, canvas.height );// 四角形
	context.fillRect( canvas.width/20+canvas.width/10*4, 0, canvas.width/10, canvas.height );// 四角形
	context.fillRect( canvas.width/20+canvas.width/10*6, 0, canvas.width/10, canvas.height );// 四角形
	context.fillRect( canvas.width/20+canvas.width/10*8, 0, canvas.width/10, canvas.height );// 四角形
*/

/*
	// 定式幕 (歌舞伎・落語)
	var color_1 ='black';
	var color_2 ='orange';
	var color_3 ='green';
	for( let i=0; i<12; i+=1 ){
		let color ='white';
		if( i%3 == 0 ){ color = color_1;
		}else if( i%3 == 1 ){ color = color_2;
		}else if( i%3 == 2 ){ color = color_3;
		};
		context.fillStyle = color;// 色
		context.fillRect( parseInt(canvas.width/12)*i, 0, parseInt(canvas.width/12), canvas.height );// 四角形
	}
*/

/*
	// 文字反転
	context.font =' bold 64px Meiryo ';// フォント
	context.fillStyle = 'blue';// 色
	context.fillText('テンプレート',50,100);// 文字
	context.globalAlpha =0.5;// 半透過
	context.transform(1,0,0,-1,0,205);// 変形
	context.fillText('テンプレート',50,100);// 文字
*/

最後に実行
背景画像の前に実行
文字入力の前に実行
「context = canvas.getContext('2d');」までは既に宣言されているので入力する必要はありません。
▼　

▼　説明

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

▼ テンプレート [ 表示 ]

▼ サムネイルのサイズ [ 表示 ]

▼ 背景色 [ 表示 ]

▼ 背景画像 [ 表示 ]

▼ 描画 (フレーム) [ 表示 ]

▼ 文字入力 [ 表示 ]

▼ 挿入画像 [ 表示 ]

▼ その他 (スクリプト) [ 表示 ]
▼ 使い方のアドバイス [ 表示 ]
▼ デザインのアドバイス [ 表示 ]
補足

▼ 表示
利用者へのお願い

▼ 表示
動作環境

▼ 表示
あとがき

▼ 表示
外部リンク YouTube

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

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

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

by UTILITY LABO

<< 目次 (画像ツール)

編集

色

加工

描画

枠・フレーム

SNS投稿画像

(分割・連結)

Twitterヘッダー

ロゴジェネレーター

円形プロフィールアイコン

スポーツ

ゲーム・アニメ

ドラゴンクエスト風

ゲーム・アニメ

鬼滅の刃風

ゲーム・アニメ

その他

動画GIF

特製

PC環境推奨ツール

その他

ＳＮＳ

ツイッター (@utility_labo)

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

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