Skip to content

Märkesdesigner

Märkesdesignern är en visuell canvas-redigerare inbyggd i badges.ninja som låter dig skapa professionella märkesbilder utan några designverktyg.

Märkesdesigner — inbäddad i Skapa märke-dialogen bredvid formulärets sidofält

Översikt

Designern öppnas när du klickar på bildfältet medan du skapar eller redigerar ett märke. Den erbjuder en canvas-arbetsyta där du kan kombinera mallar, text och egna bakgrunder för att skapa din märkesbild.

Mallväljare med form- och färgfilter

Välja en mall

Designern innehåller över 80 inbyggda mallar organiserade i två dimensioner så att du snabbt kan hitta en:

  • 8 former — Cirkel, Rundad kvadrat, Hexagon, Sköld, Oktagon, Romb, Banderoll, Sigill
  • 8 färgpaletter — Guld, Silver, Brons, Blå, Grön, Karmosin, Lila, Grafit

För att välja en:

  1. Klicka på Mallar i designerns verktygsfält.
  2. Använd filtren Form och Färg högst upp i väljaren för att snäva in listan. Räknaren till höger visar hur många mallar som matchar (t.ex. 8 / 84).
  3. Klicka på en mall för att tillämpa den på canvasen.

De genererade mallarna är avsiktligt rena — välj en form och palett, lägg sedan till egen text, ikoner och band i designern.

Mall applicerad på canvasen

Lägga till former, band och ikoner

Former-popover

Ikoner-popover med färgbalk

Utöver mallar levereras designern med tre ytterligare resursbibliotek som du kan lägga ovanpå vilken mall som helst:

  • Former — över 80 vektorformer (cirklar, sköldar, hexagoner, stjärnor, medaljer, sigill, kransar, banderoller, geometriska former) grupperade i kategorier
  • Band — 20 dekorativa bandöverlägg
  • Ikoner — 50 piktografiska ikoner (atom, utmärkelse, hjärna, portfölj, certifikat, kod, krona, diamant, diplom, examenshatt, glödlampa, medalj, raket, sköld med bock, stjärna, måltavla, trofé, …)

Välj en från valfri popover så infogas den på canvasen i den aktuella färgen. Färgbalken inuti varje popover låter dig färga om resursen innan du infogar den — användbart när du vill ha en annan färg än verktygsfältets standard.

Ladda upp egen bakgrund eller bild

Du kan ladda upp din egen bild för att använda som bakgrund eller som ett lager ovanpå:

  1. Klicka på Ladda upp i designerns verktygsfält.
  2. Välj en bildfil från din dator (PNG eller JPG rekommenderas).
  3. Bilden placeras på canvasen som ett valbart objekt — dra, skala, rotera eller skicka den bakom andra element.

Att ladda upp en bild tar inte bort mallen eller befintliga lager — den staplas bara ovanpå.

För fulla bakgrunder, använd en kvadratisk bild på minst 600×600 pixlar.

Lägga till text

Textelement tillagt på canvasen

  1. Klicka på knappen Text i verktygsfältet.
  2. Ett nytt textelement visas på canvasen.
  3. Klicka på texten för att välja den och skriv ditt innehåll.
  4. Dra textelementet för att placera det på canvasen.

Du kan lägga till flera textelement för olika delar av ditt märke (titel, mottagare, datum osv.).

Ändra typsnitt

Text växlad från Arial till Georgia — serif-typsnitt applicerat på vald text

Designern innehåller 11 typsnitt (Arial, Georgia, Times New Roman, Pacifico, Roboto, Open Sans, Montserrat, Lato, Raleway, Oswald, Playfair Display):

  1. Välj ett textelement på canvasen.
  2. Klicka på rullgardinsmenyn Typsnitt i verktygsfältet.
  3. Välj från tillgängliga typsnitt.

Typsnittsförhandsvisningen visar hur varje alternativ ser ut innan du väljer det.

Ändra färg

Färgväljare öppen; välj valfri hex — guld ger stark kontrast på mörkblå mallar

Verktygsfältets färgväljare styr två saker samtidigt:

  • Vald text — väljer fyllningsfärg för valt textelement.
  • Standard infogningsfärg — för former, band och ikoner som infogas härnäst, plus valda SVG-objekt (färgar om streck och fyllningar på plats).

Välj en färg från paletten eller ange en hex-kod. Inuti varje form-/band-/ikon-popover finns också en mindre färgbalk för engångsval av färg som inte ändrar verktygsfältets standard.

Justera element

Text centrerad horisontellt och vertikalt via verktygsfältets justeringsknappar

Raden med 6 justeringsknappar verkar på valt(a) objekt i förhållande till canvasen:

KnappÅtgärd
VänsterjusteraFäst vid canvasens vänsterkant
Centrera horisontelltCentrera på canvasens X-axel
HögerjusteraFäst vid canvasens högerkant
ÖverjusteraFäst vid canvasens överkant
Centrera vertikaltCentrera på canvasens Y-axel
UnderjusteraFäst vid canvasens underkant

När du drar ett element nära canvasens mitt visas streckade lila snäpphjälpslinjer och objektet snäpper perfekt på plats.

Flerval och lager

  • Håll Shift och klicka för att välja flera objekt, eller dra en markeringsruta över canvasen.
  • Använd Skicka bakåt / Flytta fram för att styra z-ordningen.
  • Tryck på Delete eller klicka på Ta bort-knappen i verktygsfältet för att ta bort markeringen.
  • Ångra / Gör om (eller Ctrl+Z / Ctrl+Shift+Z) bläddrar genom de senaste 20 ändringarna.

Ta bort element

  1. Välj elementet du vill ta bort (eller shift-klicka för flera).
  2. Klicka på knappen Ta bort i verktygsfältet, eller tryck på tangenten Delete.

Tips för bra märkesdesign

  • Håll det enkelt — använd tydlig text och undvik röra. Märket visas ofta i små storlekar.
  • Använd hög kontrast — se till att texten är läsbar mot bakgrunden.
  • Inkludera märkesnamnet — mottagare och tittare ska förstå meriten vid en snabb blick.
  • Kvadratiskt format — märken visas bäst som kvadratiska bilder.
  • Varumärkeskonsekvens — använd din organisations färger och typsnitt på alla märken.
  • Testa i små storlekar — förhandsgranska märket vid 100x100 pixlar för att säkerställa läsbarhet.

Spara märkesbilden

Slutligt komponerat märke

När du är nöjd med din design klickar du på Klar eller Spara i designern. Bilden fångas från canvasen och bifogas ditt märke. Den laddas upp till IPFS när du skapar eller sparar märket.

badges.ninja Documentation