Banner Studio

Studio de bannières

Overview

Banner Studio designs store and social banners in your browser. You compose once — photo, panel, text and logo — and export the same design at every platform size you need, as PNG or a single ZIP. Positions are stored as proportions of the canvas, so one design adapts to a 3360×840 Etsy banner and a 600×200 email header without redoing the layout. It is free, with 20 templates included; premium templates cost 1 token each.

How to use

  1. Open Banner Studio from the sidebar. The left menu collapses to an icon rail to give the canvas room — hover any icon to see its name.
  2. Click Templates in the bottom toolbar and pick a starting point, or skip it and build from the blank canvas.
  3. Click Platform sizes in the bottom toolbar and choose every size you want to export. They appear as chips under the canvas; click a chip to switch the canvas to that size, and the × on a chip to remove it. Up to 20 sizes per export.
  4. In the right panel's Image tab, search free photos from Pexels or Unsplash, or open Upload your own to use your own file. Drag the photo on the canvas to pan it and scroll to zoom.
  5. In the Text tab, edit the headline and body copy — font, size, weight, color, alignment — and upload a logo under Logo / icon.
  6. In the Layout tab, shape the panel behind your text: style, position, color, opacity, width, and the divider edge between panel and photo.
  7. Click any element on the canvas to select it. The right panel jumps to the controls for whatever you picked. Drag the element to move it, drag a corner handle to resize it, and drag the round handle below it to rotate.
  8. Click Lock placement once a size looks right. Locked sizes ignore drags, so refining one size can't disturb another.
  9. Click Export images (ZIP) — or Export PNG for a single size — to download full-resolution files with no watermark.

Editing on the canvas

Selecting an element brings up a toolbar beside it. Right-clicking an element selects it too. What the toolbar offers depends on what you picked:

  • Photo — Replace photo jumps to the stock search, Border frames the whole banner, and Duplicate copies the layer.
  • Shape — Use photo puts a photo inside the mask, while Photo and Color switch the fill between that photo and a flat color you pick from the swatch. Border outlines the mask.
  • Logo — Replace logo opens the file picker, and Border outlines the logo box.
  • Text — a swatch changes the color directly.

Everything except the background photo also gets size and rotation steppers in the toolbar, matching the drag handles on the canvas.

Moving, resizing and rotating

Drag an element to move it. Drag any corner handle to resize — text and logos grow in point size, shapes grow as a share of the banner. Drag the round handle below the element to rotate it; the selection box turns with it so the handles stay where you expect. The toolbar steppers do the same thing in fixed increments when you want a precise value, and the Text and Logo panels have Size and Rotate sliders.

Every layer owns its own image

Artwork is never shared between layers. The banner background, each shape and each logo hold their own picture, so:

  • Changing the background photo leaves your shapes untouched.
  • Duplicating a shape or logo gives the copy its own image — recolor or replace one and the other stays as it was.

When a shape is selected, the next photo you pick or upload goes into that shape. Deselect it (or select the background) first if you meant to change the banner background instead. Every stock photo in the design is credited on the attribution line under the canvas.

Borders scale with the canvas, so a border set on a 1200×400 banner stays visually identical on a 3360×840 export. Use the − and + controls to set thickness and the swatch to set color.

Duplicates are independent: they move, restyle and delete on their own, and they always sit above the original. Delete appears on duplicates only, so your original layers can't be removed by accident.

Options

  • 15 platform presets at exact pixel dimensions — Shopify hero and collection, WordPress, Squarespace, Wix, Etsy, Facebook, LinkedIn, Twitter/X, YouTube, email headers, and generic wide, square and story sizes.
  • 12 shape masks — circle, oval, arch, hexagon, star and more — crop your photo into an accent shape.
  • Layer effects in the bar under the canvas apply to whichever element is selected: opacity, blend mode (normal, multiply, screen, overlay), drop shadow and warp.
  • Backgrounds can be a solid color or a two-stop gradient at any angle, shown wherever no photo covers them.
  • Stock photos come from Pexels and Unsplash. The attribution line under the canvas is added automatically and must stay with the published banner.
  • Uploads are capped at 5 MB and 4000 × 4000 px per file. SVGs have no pixel limit because they scale without loss.

Tips

  • Add all your sizes before you fine-tune. Switching between chips as you work shows how the design holds up at each aspect ratio.
  • Lock a size as soon as it looks right, then move to the next one — that is the fastest way to get all 20 exports usable.
  • Duplicate a text layer to build a two-tone headline: color each copy differently and offset them slightly.
  • A shape filled with a flat color and given a border makes a clean badge for a price or a discount.
  • SVG logos are sanitized on upload — scripts and external references are stripped before the file is drawn.

Privacy

Banner Studio composes and exports entirely in your browser on a canvas. Photos and logos you upload never leave your device, and exports are generated locally. Only stock photo searches contact a server, and only with your search term.

Aperçu

Le Studio de bannières crée des bannières de boutique et de réseaux sociaux dans votre navigateur. Vous composez une seule fois — photo, panneau, texte et logo — puis exportez le même design à toutes les tailles dont vous avez besoin, en PNG ou dans un seul ZIP. Les positions sont enregistrées en proportions du canevas : un même design s'adapte à une bannière Etsy 3360×840 comme à un en-tête d'e-mail 600×200 sans refaire la mise en page. C'est gratuit, avec 20 modèles inclus ; les modèles premium coûtent 1 jeton chacun.

Comment l'utiliser

  1. Ouvrez le Studio de bannières depuis la barre latérale. Le menu de gauche se réduit en rail d'icônes pour laisser de la place au canevas — survolez une icône pour voir son nom.
  2. Cliquez sur Modèles dans la barre du bas et choisissez un point de départ, ou partez du canevas vierge.
  3. Cliquez sur Tailles de plateforme dans la barre du bas et sélectionnez toutes les tailles à exporter. Elles apparaissent en pastilles sous le canevas ; cliquez une pastille pour basculer le canevas sur cette taille, et le × pour la retirer. Jusqu'à 20 tailles par export.
  4. Dans l'onglet Image du panneau de droite, cherchez des photos gratuites sur Pexels ou Unsplash, ou ouvrez Importer la vôtre pour utiliser votre fichier. Faites glisser la photo sur le canevas pour la recadrer et utilisez la molette pour zoomer.
  5. Dans l'onglet Texte, modifiez le titre et le texte courant — police, taille, graisse, couleur, alignement — et importez un logo sous Logo / icône.
  6. Dans l'onglet Mise en page, réglez le panneau derrière votre texte : style, position, couleur, opacité, largeur et forme de la séparation entre le panneau et la photo.
  7. Cliquez un élément sur le canevas pour le sélectionner. Le panneau de droite affiche aussitôt les réglages de l'élément choisi. Faites-le glisser pour le déplacer, tirez une poignée d'angle pour le redimensionner, et la poignée ronde en dessous pour le faire pivoter.
  8. Cliquez sur Verrouiller la position dès qu'une taille vous convient. Les tailles verrouillées ignorent les déplacements : affiner une taille ne dérange pas les autres.
  9. Cliquez sur Exporter les images (ZIP) — ou Exporter en PNG pour une seule taille — pour télécharger des fichiers pleine résolution sans filigrane.

Modifier sur le canevas

Sélectionner un élément fait apparaître une barre d'outils à côté. Un clic droit sélectionne également l'élément. Le contenu de la barre dépend de ce que vous avez choisi :

  • Photo — Remplacer la photo ouvre la recherche de photos, Bordure encadre toute la bannière, Dupliquer copie le calque.
  • Forme — Utiliser la photo remplit le masque avec votre photo, tandis que Photo et Couleur basculent le remplissage entre la photo et un aplat choisi dans le nuancier. Bordure trace le contour du masque.
  • Logo — Remplacer le logo ouvre le sélecteur de fichier, Bordure trace le contour du logo.
  • Texte — un nuancier change directement la couleur.

Tout sauf la photo d'arrière-plan reçoit aussi des réglages de taille et de rotation dans la barre d'outils, en écho aux poignées du canevas.

Déplacer, redimensionner, pivoter

Faites glisser un élément pour le déplacer. Tirez une poignée d'angle pour le redimensionner — le texte et les logos changent de taille, les formes changent de proportion sur la bannière. Tirez la poignée ronde en dessous pour pivoter ; le cadre de sélection tourne avec l'élément, les poignées restent donc là où vous les attendez. Les réglages de la barre d'outils font la même chose par paliers fixes, et les onglets Texte et Logo proposent des curseurs Taille et Rotation.

Chaque calque possède sa propre image

Les images ne sont jamais partagées entre calques. L'arrière-plan, chaque forme et chaque logo gardent leur propre visuel :

  • Changer la photo d'arrière-plan ne touche pas vos formes.
  • Dupliquer une forme ou un logo donne au doublon sa propre image — remplacez l'une, l'autre ne bouge pas.

Quand une forme est sélectionnée, la prochaine photo choisie ou importée va dans cette forme. Désélectionnez-la (ou sélectionnez l'arrière-plan) si vous vouliez changer le fond. Chaque photo de stock utilisée est créditée sous le canevas.

Les bordures suivent l'échelle du canevas : une bordure réglée sur une bannière 1200×400 reste visuellement identique sur un export 3360×840. Utilisez − et + pour l'épaisseur et le nuancier pour la couleur.

Les doublons sont indépendants : ils se déplacent, se restylent et se suppriment séparément, et passent toujours au-dessus de l'original. Supprimer n'apparaît que sur les doublons : vos calques d'origine ne peuvent pas disparaître par accident.

Options

  • 15 formats de plateforme aux dimensions exactes — Shopify héro et collection, WordPress, Squarespace, Wix, Etsy, Facebook, LinkedIn, Twitter/X, YouTube, en-têtes d'e-mail et formats génériques large, carré et story.
  • 12 masques de forme — cercle, ovale, arche, hexagone, étoile et plus — découpent votre photo en forme d'accent.
  • Effets de calque dans la barre sous le canevas, appliqués à l'élément sélectionné : opacité, mode de fusion (normal, produit, écran, incrustation), ombre portée et déformation.
  • Arrière-plans en couleur unie ou en dégradé à deux arrêts, à n'importe quel angle, visibles partout où aucune photo ne les couvre.
  • Photos de stock issues de Pexels et Unsplash. La ligne d'attribution sous le canevas est ajoutée automatiquement et doit accompagner la bannière publiée.
  • Imports limités à 5 Mo et 4000 × 4000 px par fichier. Les SVG n'ont pas de limite en pixels puisqu'ils s'agrandissent sans perte.

Astuces

  • Ajoutez toutes vos tailles avant d'affiner. Passer d'une pastille à l'autre montre comment le design tient à chaque proportion.
  • Verrouillez une taille dès qu'elle vous convient, puis passez à la suivante — c'est le moyen le plus rapide d'obtenir 20 exports utilisables.
  • Dupliquez un calque texte pour un titre bicolore : colorez chaque copie différemment et décalez-les légèrement.
  • Une forme en aplat avec une bordure fait un badge net pour un prix ou une remise.
  • Les logos SVG sont assainis à l'import — scripts et références externes sont supprimés avant l'affichage.

Confidentialité

Le Studio de bannières compose et exporte entièrement dans votre navigateur, sur un canvas. Les photos et logos que vous importez ne quittent jamais votre appareil et les exports sont générés localement. Seules les recherches de photos contactent un serveur, et uniquement avec votre terme de recherche.