Tydliga skärmbilder för guider och dokumentation

En bra skärmbild visar var man klickar, vad man väljer eller vilket resultat man kan vänta sig. En bild av hela skrivbordet hjälper inte mycket, även om den är skarp, om rätt knapp inte går att hitta.

Målet är tydlig vägledning utan distraktioner, privata uppgifter eller onödigt stor fil, från förberedelse till publiceringskontroll.

Bestäm vad varje bild ska förklara

Skriv instruktionen först. ”Välj Exportera, sedan PNG” ger ett tydligt ämne; ”Här är inställningarna” lämnar läsaren att leta.

Välj rätt ögonblick: öppen meny för alternativen, bekräftelse för resultatet. Dela startläge, meny och slutresultat vid behov.

Behåll orienteringspunkter. En ensam knapp utan panelrubrik är svår att hitta. Ta med relevant rubrik eller navigering och ta bort resten.

Planera en kort bildföljd där varje bild tillför något. Varje tydligt beskrivet klick behöver inte en bild.

Ta ett rent original

Använd testkonto, stäng ovidkommande flikar och aviseringar. Välj fönsterbredd som motsvarar instruktionen; smala fönster kan ändra menyer.

• Windows: Windows + Skift + S väljer ett område. Skärmklippverktyget tar även fönster och helskärm; se Microsofts instruktioner.
• Mac: Skift + Kommando + 4 väljer område, Skift + Kommando + 5 öppnar reglagen. Se Apples guide.

Spara originalfilen. Att ta en ny skärmbild av en chattförhandsvisning eller ladda ned dess miniatyr kan göra att fler detaljer går förlorade. Ett foto av skärmen tillför reflexer, förvrängningar och onödiga delar av omgivningen.

Är texten redan liten, justera appens eller webbläsarens zoom och ta om bilden. Kontrollera förändrad layout och dolda reglage. Förstoring i efterhand återställer inte otydliga tecken.

Ta bort privata uppgifter före delning

Granska adress, fliknamn, kontomeny, sidofält och aviseringar. Exempelposter skyddar inte en riktig e-postadress i kontomenyn.

Beskär bort privata uppgifter utanför det nödvändiga området. Täck uppgifter som blir kvar med en helt ogenomskinlig färgyta. Oskärpa och pixelering kan lämna ledtrådar om innehållet och är inte lämpliga för att skydda konfidentiell text.

1. Öppna Pixelera bild. Under Effekt väljer du täckande färg, på engelska Solid cover.
2. Placera täckningen. Anpassa rektangeln med marginal runt alla tecken.
3. Lägg till ett område för varje ytterligare plats. Engelska knappen heter Add area. Kontrollera upprepningar, koder och QR-bilder. En flyttad täckning skyddar inte båda platserna.
4. Ladda ned och öppna PNG-filen. Kontrollera filen, inte bara förhandsvisningen.

I den nedladdade PNG-filen är täckningen en del av bildens pixlar. Dela den kopian i stället för ett redigerbart dokument där en rektangel kan tas bort för att visa originalet. Förvara originalet utanför offentliga mappar.

Det skyddar bara täckta bildytor, inte dokument, urklipp, konto eller källfiler. Läs guiden om pixelering och täckning.

Beskär först och markera sedan

Ta bort onödig navigering, marginal och skrivbord med Beskär bild. Behåll reglagets namn och tillräckligt sammanhang.

Bestäm utsnittet före markeringarna så att pilar inte pekar på borttaget innehåll. En panelrubrik ger bättre vägledning än en lös pil.

Lägg vid behov till ram eller nummer i en lämplig editor, utan att dölja etiketten. Förklara i text. Pixilos beskärning ritar inte instruktionspilar.

Håll stil och stegnummer konsekventa. ”Välj knapp 2” är tydligare än en anvisning som bara bygger på grönt.

Välj mått efter verklig lässtorlek

Bedöm bilden i den färdiga artikeln. Text som fungerar i helskärm kan bli minimal i en smal spalt.

Skilj synlig textstorlek från pixlar för skärpa. Fler pixlar gör inte automatiskt bokstäver större.

En vy på 800 × 500 CSS-pixlar kan vid en skärmbild med 2× pixeltäthet ge 1 600 × 1 000 bildpixlar. När bilden visas i 800 × 500 CSS-pixlar behåller gränssnittet sin synliga storlek: texten blir inte automatiskt hälften så stor. Visas hela vyn med 400 CSS-pixlars bredd blir texten däremot mindre.

Metod, skärmskalning och zoom påverkar. MDN förklarar pixeltäthet. Kontrollera filens mått i stället för att alltid anta 2×.

Prova tätare beskärning före färre pixlar. På mobilen kan 800 visas inom 360 CSS-pixlar. Dela vyn eller erbjud större bild vid behov.

Använd Ändra bildstorlek med låst bildförhållande om originalet är onödigt stort. Jämför kopian med originalet i den slutliga visningsstorleken. Behåll fler pixlar eller förenkla utsnittet om viktig information försvinner.

Välj format som håller texten skarp

Börja med PNG för text och reglage: dess förlustfria komprimering undviker JPG-skador. Testa PNG-optimering före andra mått. Fotodominerade skärmbilder kan jämföras i JPG eller WebP.

Utgå från samma källa med samma pixelmått och visningsstorlek. Granska små bokstäver, tunna linjer och markeringar efter utsmetning, saknade skiljetecken och ljusa kanter. Behåll den tydligare varianten om detaljer försvinner.

Se JPG jämfört med PNG och MDN:s formatreferens. Börja om från den förberedda källan, inte en redan komprimerad fil.

Publicera instruktioner som fungerar utan bilden

Skriv viktiga handlingar bredvid för skärmläsare, zoom, utskrift och bildfel: ”Öppna Inställningar, Fakturering och Ladda ned faktura.”

Alternativtext beskriver bildens bidrag: ”Fakturering med fakturanedladdning markerad vid senaste betalningen.” Ovidkommande sidofält behöver inte skrivas av. Se W3C:s vägledning.

En bildtext kan ange programversion. Håll bild, text och steg nära varandra, inte alla skärmbilder långt nedanför instruktionerna.

Behåll bildförhållandet och se till att bilden inte sticker ut utanför textspalten. Vår guide om responsiva bilder visar hur. Kontrollera efter publiceringen att redigeraren inte har valt en liten miniatyrversion.

Exempel: förklara fakturanedladdning

Instruktion: ”Inställningar → Fakturering, sedan Ladda ned faktura vid betalningen.” Måtten är exempel, inte mätningar från en app.

1. Förbered vyn. Visa exempelbetalningar och rätt knapp, stäng övriga menyer.
2. Fånga och beskär. Från 1 600 × 1 000 kan 1 200 × 700 behålla rubrik, betalning och knapp utan sidofält. Behåll originalet privat.
3. Täck kvarvarande kontouppgifter. Dölj riktig e-post och upprepningar med egna områden. Ladda ned och kontrollera PNG.
4. Markera vid behov. Lägg en ram runt knappen i en bildredigerare som stöder markeringar, utan att dölja namnet. Spara som PNG och använd samma stil genom hela guiden.
5. Kontrollera artikeln. Ett utsnitt som är 1 200 pixlar brett och visas med 600 CSS-pixlars bredd ger två bildpixlar per CSS-pixel. Granska betalningsraden och knappens namn på mobilen. Visa vid behov en närbild av raden i stället för att förminska hela vyn ytterligare.
6. Publicera med text. Sidan och länken till full storlek ska använda den skyddade PNG-kopian.

Det viktiga är att läsaren hittar betalning och knapp, inte hur mycket skrivbord som försvinner.

Hitta orsaken till ett dåligt resultat

Följ den publicerade instruktionen som om du använde funktionen för första gången. Namnen på bilderna ska stämma med texten, och varje bild ska ligga vid rätt steg.

Vanliga frågor

Behöver varje steg en skärmbild?

Nej. Bilden ska förklara var något finns, vad man ska välja eller vilket resultat man får. Tydlig text räcker ofta. Onödiga bilder gör sidan längre och behöver uppdateras när programmet ändras.

Är helsidesbilder användbara?

För strukturöversikt, ja; för små reglage sällan. Lägg till fokuserade detaljvyer.

Ska muspekaren synas?

Bara om den hjälper. Ovanpå en etikett stör den; en ram och text är ofta tydligare.

Hur hålls bilder aktuella?

Visa nödvändigt sammanhang och ange version eller granskningsdatum vid behov. Uppdatera bild och text samtidigt när menyer ändras.