Slik tar du og rediger skjermbilder for opplæringsprogrammer

Alle nettstedene over Tuts + -nettverket er stadig på utkikk etter bidragsytere fra toppkvalitet. Hvis du er interessert i å skrive for oss, slipp oss en linje. Før du jobber med noe, skjønner du å lese gjennom denne fantastiske guiden som tar deg gjennom hele prosessen med å ta og forberede skjermbilder.


Lær av en proff

Skjermbilder er trolig det viktigste elementet i en skriftlig opplæring. Våre lesere vil bruke dem som en veiledning ettersom de følger instruksjonene dine, så det er viktig at skjermbildene dine nøyaktig viser de tiltakene som blir tatt under hvert trinn. Det er mange måter å lage skjermbilder for en opplæring, men i denne opplæringen vil veteranen Psdtuts + forfatter, Ed Lopez, forklare sin metode for å produsere høy kvalitet og beskrivende skjermbilder med både skjermopptak og skjermopptaksprogramvare for å ta opp video og skjermbilder for sine skriftlige opplæringsprogrammer. La oss komme i gang!


Hva trenger du

Denne metoden for å fange skjermbilder for en opplæring involverer bruk av flere applikasjoner. Vær oppmerksom på at denne metoden ble gjort ved hjelp av enkelte Mac-programmer, men du kan også tilpasse denne metoden for PC-kompatible applikasjoner.

  • Screenflow (Mac)
  • LittleSnapper (Mac)
  • Adobe Bridge (valgfritt)

Endelig resultat

Ta en titt på et eksempel på en av Eds opplæringsprogrammer her.


Trinn 1: Opptak

Når jeg skriver en opplæring, finner jeg tanken på å stoppe for å ta skjermbilder underveis for å være veldig distraherende. Derfor har jeg laget en metode for å ta skjermbilder som lar meg lage kunst uten å forstyrre den kreative prosessen.

Det første trinnet er å åpne skjermflyten og starte et nytt opptak. Nå lager du kunstverket akkurat som du ville hvis du jobbet på et normalt prosjekt. Screenflow vil nå registrere alle dine handlinger i bakgrunnen mens du arbeider.


Trinn 2: Fullfør opptaket

Forfattere bruker vanligvis mange timer på et prosjekt og kan ofte spre disse timene ut over flere dager. Dette betyr at du noen ganger kan stoppe, ta pauser eller jobbe med andre prosjekter. Når du tar en pause, er du velkommen til å stoppe opptaket. Det vises i sidefeltet under mediefanen. Når hvert segment er registrert, dra det ned i tidslinjen for redigering.


Trinn 3: Ta tak i skjermbildene

Nå som du er ferdig med å registrere hele prosjektet, kan du nå begynne å ta skjermbilder. For å gjøre dette, åpne LittleSnapper og opprett en ny Smart Collection.

Angi en datoregel som vist nedenfor. Dette vil sørge for at alle bildene som er opprettet etter denne datoen, blir plassert i samme samling.


Trinn 4: Definer snarveier

Definer nå en snarvei for Snap-området som vist nedenfor. Ta gjerne med hvilke hurtigtaster du er mest komfortabel med. Jeg satte meg til Kommando + Alternativ / Alt + X.


Trinn 5: Begynn å snakke

Nå som LittleSnapper er klar, åpne Screenflow, last innspillingen og trykk på spill. En av de fine tingene med å bruke Screenflow for å fange hele prosessen, er at du nå kan zoome inn og ut når det er nødvendig for å sikre at du får det nøyaktige skjermbildet du trenger.

Når du er klar til å ta et skjermbilde, må du sørge for å sette oppspillingen på rett sted. Deretter treffer du hurtigtastene du definerte tidligere i denne veiledningen for å ta skjermbilder. Når du har slått dem, vil skjermen gråte ut og lar deg raskt dra ut området på skjermen du vil lagre. Ta nøye merke til pikselindikatoren slik at du ikke drar ut et skjermbilde som er større enn 600 piksler bredt.


Trinn 6: Lag notater

Noen ganger må du legge til notater til skjermbildene dine. Notater kan hjelpe leseren til å forstå hva de ser på. For eksempel, hvis du vil rette lesernes oppmerksomhet til en bestemt del av skjermen, kan du tegne en pil for å peke ut det. Du kan også (og bør) tegne linjer, former og tekst når det er nødvendig for å bidra til å forklare trinnet. Hvis du legger til tekst i skjermbildet ditt, kan det være nyttig å sette inn fargekoder, for eksempel.

Når du klikker på knappen, vil du kunne legge til noen notater du trenger for den bestemte opplæringen.


Trinn 7: Eksporter bildene dine

Når du tar skjermbilder med LittleSnapper, blir bildene arrangert i rekkefølge. Hvis du vil omdøpe en fil, kan du gjøre dette nå. Når du er fornøyd med hvordan bildene dine heter, kan du eksportere som vist nedenfor.

Bildene dine blir nå eksportert til den valgte mappen din.


Trinn 8: Gi nytt navn til filer (valgfritt)

På dette tidspunktet vil du kanskje endre navn på filene dine. Broen kan gjøre dette ganske raskt. Bare åpne bro, bla til mappen din, velg alle bildene i den mappen, gå til Verktøy> Batch Rename.

Tips: Når du navngir filer, er det noen bilder som trenger spesielle navn. Det 600 piksler brede endelige bildet skal bli kalt final.jpg, den store versjonen av det endelige bildet skal bli navngitt final_large.jpg, og 200x200 forhåndsvisningsbildet skulle bli kalt forhåndsvisning.jpg. Du vil kanskje sette disse bildene til side slik at de ikke forstyrrer batch-omdøpingsprosessen.


Trinn 9: Konverter til JPG og optimaliser (Valgfritt)

Nå optmize bildene dine for Internett og konvertere dem til JPG-filer. Vi foreslår at du gjør dette ved hjelp av et program som er i stand til batchbehandling. Adobe Bridge, Fireworks og Photoshop kan alle gjøre dette. Vi bruker Bridge i eksemplet nedenfor.


Trinn 10: Eksporter video (valgfritt)

I dette valgfrie trinnet kan du eksportere videoen du har spilt inn og gi den med resten av filene dine. Du kan gjøre dette på en rekke måter. Du kan fjerne lyden og gi opptak i sanntid, eller fjerne lyden, øke hastigheten på opptaket og ta opp et nytt spor som inneholder fortellinger som forklarer hva du gjør.

Tips: Pass på å bryte videofiler opp i håndterbare deler. Pass også på at videoopptaket du gir, er velredigert, og at lyden du gir, er av høy kvalitet. Ikke inkluder musikk med opptakene.


Trinn 11: Skriv HTML

Nå kan du begynne å skrive teksten og samle HTML-koden. Bruk denne malen til å formatere HTML-filen din. Sørg for å følge de riktige retningslinjene underveis.


Send inn noe!

Det er alt der er til det! Hvis du tror at du er opptatt av å sende inn noe og bli med i Mactuts + -laget, kan du slå opp vår nye forfatterside for mer informasjon om hvordan du kommer i gang. Sørg også for å sjekke ut våre andre nettsteder for å se om du kan bli plugget inn noe annet sted.