Softonic

Mockup-generator för skärmdumpar

Steg 1 / 3

En rå skärmdump är funktionell men intetsägande. Inramad i ett webbläsarfält eller en macOS-fönsterram, med en mjuk skugga och en färgstark bakgrund, ser samma skärmdump ut som en färdig produktbild. Det här verktyget tar bilden du redan har och lägger den i ett webbläsarfönster, ett macOS-fönster eller en enkel ram med rundade hörn, mot en gradientbakgrund med justerbar utfyllnad, hörnradie och skugga så att resultatet passar bildspel, sociala inlägg och presskit.

Så gör du en mockup av en skärmdump

  1. 1

    Ladda upp din skärmdump

    Vilken PNG, JPG eller WebP som helst upp till 30 MB, tagen i valfri upplösning. Verktyget hanterar retina och standard.

  2. 2

    Välj en ram

    Webbläsarfönster (med trafikljusprickarna och ett URL-fält), macOS-fönster (med trafikljusprickarna) eller en enkel ram med bara rundade hörn.

  3. 3

    Styla bakgrunden

    Välj en bakgrundsfärg som tonas in i en varm gradient. Lägg till utfyllnad, justera hörnradien och slå på eller av slagskuggan.

  4. 4

    Exportera

    Ladda ner den färdiga mockupen som PNG för sociala inlägg, slides eller presskit.

Välja rätt ram och bakgrund

Valet av ram signalerar sammanhang. Ett webbläsarfält säger “webbapp”. Ett macOS-fönster säger “skrivbordsapp”. En enkel ram håller fokus på ett gränssnitt som redan har sin egen chrome. Välj den som matchar det du visar.

Ramguide

Ram Bäst använd för
Webbläsarfönster SaaS-funktioner, landningssidor, dashboards
macOS-fönster Skrivbordsappar, editorer, terminalfångster
Enkel En skärmdump som redan har sin egen chrome

Föreslagna referensstorlekar

Verktyget exporterar i skärmdumpens egen upplösning. När du beskär eller ändrar storlek på resultatet för en viss kanal är dessa mått en användbar referens.

Destination Mått (px)
Twitter / X-kort 1600 x 900
LinkedIn enskild bild 1200 x 627
Instagram-flöde (liggande) 1080 x 566
Product Hunt-galleri 1270 x 760
Bildspel (16:9) 1920 x 1080

Stylingtips

  • Håll skuggan subtil. Slagskuggan lyfter ramen från bakgrunden; lämna den på för djup eller stäng av den för ett platt, minimalistiskt utseende.
  • Håll utfyllnaden generös. 60-120 px runt ramen hindrar skärmdumpen från att kännas trång.
  • Välj en bakgrund som passar ditt varumärke. Färgen du väljer tonas in i en varm gradient, så en ton nära ditt varumärke knyter resursen till din sajt.
  • Matcha ramen mot innehållet. Ett webbläsarfält runt en skrivbordsapp, eller ett macOS-fönster runt en webbsida, känns som en missmatch. Använd den enkla ramen när du är osäker.
  • Maskera känslig data (användares e-post, riktiga namn, faktureringsuppgifter) innan export. Att sudda är enklare än rättsliga efterspel.

Vanliga frågor

Tre: ett webbläsarfönster (trafikljusprickar plus ett URL-fält), ett macOS-fönster (trafikljusprickar, utan URL-fält) och en enkel ram som bara rundar av hörnen på din skärmdump. Ramarna är stiliserade, inte pixelperfekta återskapanden av en specifik produkt, så de är säkra för marknadsföringsbruk i de flesta regioner.

Inte för närvarande. Mockupen komponeras ovanpå en gradient som byggs av bakgrundsfärgen du väljer, och PNG-filen exporteras med den bakgrunden inbränd. Välj en färg nära ditt varumärke, eller en neutral ton om du tänker placera bilden på en enfärgad yta.

Mockupen renderas i en bekväm arbetsbredd, så mycket stora skärmdumpar skalas för att passa ramen. Fånga i retina (2x) för skarpast resultat, och den exporterade PNG-filen förblir skarp på högupplösta skärmar.

Nej. Komponeringen sker i ett webbläsar-canvas och bilden lämnar din enhet först när du sparar den färdiga PNG-filen.

Relaterade verktyg

Material Design-färgväljare

Bläddra i Material Design-färgpaletten. Kopiera valfri nyans (50 till A700) som HEX, RGB eller HSL med en tryckning.

Skapa kontaktkarta

Ordna foton på utskrivbara kontaktkartor i A4 eller Letter med bildtexter och beskärning, förhandsgranska och hämta JPEG eller PDF.

Rutpappersgenerator

Skapa utskrivbart rutpapper online: välj rutnät eller punktnät, ange avståndet i mm, välj A4 eller Letter och en egen linjefärg, och skriv sedan ut eller ladda ner en skarp SVG.

Flaggskapare

Formge en enkel egen 3:2-flagga i webbläsaren med sex layouter, färger, text och en symbol. Hämta SVG eller PNG, eller öppna webbläsarens utskriftsdialog.

Pixelgrafikverktyg

Rita pixelgrafik från grunden på ett rutnät från 4×4 till 64×64. Använd penna, fyllning, pipett, symmetri och ångra, och exportera sedan skarp transparent PNG, SVG eller projektfil.

Skapa visionboard

Förvandla dina mål till en visuell tavla: ladda upp bilder, lägg till en personlig rubrik och bildtexter, välj färger och layout och hämta en utskrivbar PNG. Allt stannar i din webbläsare.

Verktyget finns på andra språk