メインコンテンツへスキップ
Tools Star Hub
画像ツール カテゴリ新着

YouTube Banner Maker

Design 2560 × 1440 YouTube channel art in your browser with 15 templates, text, logos, shapes, gradients, layers and a safe-area guide, then export PNG or JPG under 6 MB.

ツールを読み込み中…

このツールはブラウザ内で動作します。入力内容、ファイル、生成した値はこの端末に残ります。お気に入りと最近使ったツールを利用する場合も、ローカルストレージに保存されるのはツール名だけで、パスワード、文書、QR コードの内容は保存されません。 詳しくはプライバシーポリシーをご覧ください。

このツールの詳しい解説（使い方、例、よくある質問）は、現在英語のみでご用意しています。

What this tool does

This YouTube banner maker builds channel art at the full 2560 × 1440 pixel size inside your browser. Start from one of 15 original templates or a blank colour, then add text, photos, a logo, rectangles, circles and gradients. A dashed 1546 × 423 guide marks the strip that stays visible on phones, desktops and TVs. The guide helps you place names and slogans, and it is never drawn into the downloaded file. Nothing you upload leaves your device, because the editing and the export both run on a canvas element in the page.

How to use

  1. Pick a template from the Templates panel, or keep the default and change its background colour or gradient.
  2. Select a layer by tapping or clicking it on the canvas or in the Layers list. Drag it to move it, and drag the gold corner square to resize it.
  3. Edit the selected layer in the side panel: text, font, weight, size, alignment, colour, fill, gradient, corner radius, opacity and exact position.
  4. Add your own pieces with Text, Rectangle, Circle, Image or Logo. Reorder layers with the arrows and hide any layer with the dot button.
  5. Keep important words and faces inside the dashed safe area, then choose PNG or JPG and press Download 2560 × 1440.

Examples

  • A gaming channel in five minutes

    Load Neon Arena, change the title to the channel name, change the tagline to the real stream days, and drag a transparent PNG logo to the left side of the safe area. The neon slash sits behind the text, so the name stays readable on a phone.

  • Using a photo as the background

    Start from Minimal Mono, press Image and choose a landscape photo. The photo is scaled to fit the full canvas. Use the down arrow in the Layers list to send it below the title, then lower its opacity so the words stand out.

  • Keeping a file under 6 MB

    A detailed photo exported as PNG can be larger than 6 MB at this size. When that happens the tool switches to JPG and lowers the quality step by step until the file fits, and the status line tells you which format and size you received.

Main features

  • Export at 2560 × 1440, the size YouTube recommends for channel banners, with the file kept at or below 6 MB.
  • A 1546 × 423 safe-area overlay that you can switch on or off and that never appears in the export.
  • 15 original starter layouts covering gaming, vlogs, cooking, music, education, fitness, business and more.
  • Layers with reorder, hide, duplicate and delete, plus undo, redo and a reset back to the chosen template.
  • Mouse, pen and touch dragging through pointer events, a zoom slider from 50% to 300%, and keyboard shortcuts.

How it works

The editor keeps your design as a list of layers drawn in order from bottom to top over a background fill. Every change, from a colour pick to a drag, produces a new version of that list, and up to 60 versions are kept so undo and redo can step through them. The preview canvas is always the true 2560 × 1440 size and is only scaled down with CSS, so what you see is what you export.

Calculation method

The safe area is centred on the canvas. Its left edge sits at (2560 − 1546) ÷ 2 = 507 pixels and its top edge at (1440 − 423) ÷ 2 = 508.5 pixels. Anything inside that box is visible on every device class YouTube supports. Wider strips appear on desktop and the whole image can appear on TV, so the outer area is a good place for texture, colour and photo detail rather than words.

Pointer positions are converted from screen pixels to canvas pixels by dividing by the displayed width and height and multiplying by 2560 and 1440. That keeps dragging accurate at any zoom level and on any screen. Gradients use the CSS angle convention, where 90 degrees runs left to right and 180 degrees runs top to bottom.

Text wraps inside each text box. The tool measures each word with the browser's font metrics and starts a new line when the next word would pass the box width. Line spacing is 1.2 times the font size.

On export the design is drawn again on a fresh canvas with no guide, no selection outline and no resize handle. A PNG is tried first when you choose PNG. If it is over 6 MB, or if you chose JPG, the tool encodes JPG at quality 0.92 and steps down through 0.85, 0.75, 0.65 and 0.5 until the file is 6 MB or smaller.

Designing for small screens

On a phone the banner is shown as a thin strip, roughly the safe area, so a name in large letters reads better than a sentence. A tagline of four to six words is usually enough. High contrast between text and background matters more than font choice at that size.

Logos with transparent backgrounds look cleaner than logos on a white box. If your logo is a JPG with a white background, place it on a light area of the design or redraw it as a PNG first. The Logo button scales any image to fit a 300-pixel square and places it near the left edge of the safe area.

Choosing colours and type

Pick one strong background colour or a two-colour gradient and one accent colour, then use the accent sparingly for a bar, a ring or a single word. Light text on a dark background reads well at small sizes, and so does near-black text on a pale background. Mid-tone text on a mid-tone background is the combination most likely to disappear on a phone.

Bold or semibold weights hold up better than regular weight when the banner is shrunk. The Condensed option fits longer names on one line, and the Serif option suits cooking, travel and education channels that want a calmer look.

Privacy and local processing

Images are read with the browser's FileReader and kept in memory as data URLs. They are not sent to Tools Star Hub or any other server. Closing or reloading the tab clears the design, so download a copy before you leave.

Tips

  • Check the design at 50% zoom. If the name is still easy to read, it will usually read well on a phone.
  • Use the arrow keys for small moves and hold Shift for 50-pixel steps when lining up text with the guide.
  • Duplicate a text layer with Ctrl or ⌘ + D to build a second line in the same style.
  • Upload the PNG or JPG in YouTube Studio under Customisation, then Branding, and preview each device size there before publishing.

Limitations

The editor has no rotation, crop, filters, custom font upload or saved projects, and the design is lost when the tab closes. Browser fonts differ slightly between systems, so text can wrap a little differently on another computer. Very large photos can make older phones slow. YouTube can change its banner sizes or file limits, so confirm the current figures in YouTube Help before you upload.

See the disclaimer for what these tools do not cover.

FAQ

What size does the YouTube banner maker export?
It always exports 2560 × 1440 pixels, which is the channel banner size YouTube recommends. The safe-area guide is not part of the file.
What is the 1546 × 423 safe area?
It is the centred strip that stays visible on every device, including phones. Keep your channel name, logo and any short message inside it so nothing is cut off.
Is the safe-area guide included in my download?
No. The guide is only drawn on the preview. The export is rendered again on a clean canvas without the guide, selection outline or handles.
Why did my PNG download as a JPG?
A PNG of a detailed photo can be over 6 MB at this size. The tool switches to JPG and lowers quality step by step until the file fits under 6 MB, and the status line explains what happened.
Are my images uploaded anywhere?
No. Images are read and drawn inside your browser tab. Nothing is sent to a server, and closing the tab removes them.
Can I use it on a phone or tablet?
Yes. Dragging and resizing work with touch, the side panel moves under the canvas on narrow screens, and the zoom slider helps with precise placement.
Which keyboard shortcuts are available?
Ctrl or ⌘ + Z undoes, Ctrl or ⌘ + Shift + Z or Ctrl + Y redoes, Ctrl or ⌘ + D duplicates, Delete or Backspace removes the selected layer, arrow keys nudge it and Escape clears the selection.
Can I save a design and come back later?
Not yet. The design lives only in the open tab. Download a PNG or JPG when you finish, and keep your source images so you can rebuild it.
Can I use the templates on a commercial channel?
Yes. The templates are original layouts made for this tool from shapes, gradients and text. Make sure any photo or logo you add is yours or licensed for your use.
What canvas size should I start with for TV viewers?
Design on the full banner canvas, then keep critical logos and text inside the TV-safe center so cropped edges on large screens stay clean.
Can I upload my own channel logo as a layer?
Yes—add an image layer, resize it, and lock it inside the safe area before exporting.
How do I keep text sharp on retina displays?
Export at the recommended pixel dimensions and avoid extreme upscaling of small bitmaps.
Should the same banner work on mobile and desktop?
Yes if key content sits in the overlapping safe zone; edges may crop differently per device.
Can I match brand colors with hex values?
Use hex picks for backgrounds and shapes so the banner stays consistent with your site palette.
How many image layers are practical?
A few well-composed layers beat dozens of tiny pieces—merge decorative bits before fine positioning.
Will a busy photo hide my channel name?
Often—add a soft scrim or solid bar behind text so contrast stays readable.
Can I reuse a banner for seasonal campaigns?
Duplicate the project, swap seasonal art, and keep the logo placement fixed for recognition.
Does the export include bleed beyond YouTube’s crop?
Extra edge pixels may be cropped on some devices; treat outer margins as optional atmosphere only.
How should I name downloaded banner files?
Include the channel and date so you can roll back if a redesign underperforms.
Is animation supported in the banner export?
YouTube channel art is a still image here—create motion in video intros instead.

関連ツール