Screenshots maken en bewerken voor zelfstudies

Alle sites in het Tuts + -netwerk zijn voortdurend op zoek naar bijdragen van topkwaliteit. Als u geïnteresseerd bent om voor ons te schrijven, stuur ons dan een bericht. Voordat je iets gaat werken, moet je deze geweldige handleiding doorlezen die je door het hele proces van het maken en voorbereiden van je screenshots leidt.


Leer van een professional

Schermafbeeldingen zijn waarschijnlijk het belangrijkste onderdeel van een geschreven zelfstudie. Onze lezers zullen ze gebruiken als richtlijn bij het volgen van uw instructies, dus het is belangrijk dat uw schermafbeeldingen nauwkeurig de acties weergeven die tijdens elke stap worden genomen. Er zijn veel manieren om schermafbeeldingen te maken voor een zelfstudie, maar in deze tutorial zal de ervaren schrijver Psdtuts +, Ed Lopez, zijn methode uitleggen voor het produceren van hoogwaardige en beschrijvende screenshots met behulp van zowel schermopname als screen capture-software om video's en screenshots op te nemen voor zijn geschreven tutorials. Laten we beginnen!


Wat je nodig hebt

Deze methode voor het maken van screenshots voor een zelfstudie omvat het gebruik van verschillende applicaties. Merk op dat deze methode is uitgevoerd met behulp van enkele Mac-toepassingen, maar u kunt deze methode ook aanpassen voor pc-compatibele toepassingen.

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

Eindresultaat

Bekijk hier eens een voorbeeld van een van Ed's tutorials.


Stap 1: Opnemen

Wanneer ik een tutorial schrijf, vind ik de gedachte om te stoppen om onderweg screenshots te maken die erg afleidend zijn. Daarom heb ik een methode bedacht om schermafbeeldingen te maken waarmee ik illustraties kan maken zonder het creatieve proces te verstoren.

De eerste stap is om de schermstroom te openen en een nieuwe opname te starten. Maak nu uw illustraties net zoals u zou doen als u aan een normaal project zou werken. Screenflow zal nu al uw acties op de achtergrond opnemen terwijl u werkt.


Stap 2: Finaliseer de opname

Auteurs besteden doorgaans vele uren aan een project en kunnen die uren vaak over meerdere dagen spreiden. Dit betekent dat u af en toe kunt stoppen, pauzes kunt nemen of aan andere projecten kunt werken. Als u pauzeert, kunt u de opname stoppen. Het verschijnt in de zijbalk onder het mediatabblad. Nadat elk segment is opgenomen, sleept u het naar uw tijdlijn om het te bewerken.


Stap 3: Grijp de screenshots

Nu u klaar bent met het opnemen van het volledige project, kunt u nu beginnen met het maken van screenshots. Open hiervoor LittleSnapper en maak een nieuwe slimme verzameling.

Stel een datumregel in zoals hieronder getoond. Dit zorgt ervoor dat alle afbeeldingen die na deze datum zijn gemaakt, in dezelfde verzameling worden geplaatst.


Stap 4: Definieer sneltoetsen

Definieer nu een sneltoets voor het klikgebied zoals hieronder weergegeven. Voel je vrij om welke sneltoets dan ook te gebruiken waarmee je het meest vertrouwd bent. Ik heb de mijne ingesteld op Command + Option / Alt + X.


Stap 5: begin met klikken

Nu LittleSnapper klaar is, open je Screenflow, laad je de opname en druk je op play. Een van de leuke dingen over het gebruik van Screenflow om het hele proces vast te leggen, is dat je nu kunt in- en uitzoomen, wanneer nodig om er zeker van te zijn dat je de exacte screenshot krijgt die je nodig hebt.

Als u klaar bent om een ​​screenshot te maken, zorg er dan voor dat u de opname op de juiste plek onderbreekt. Druk vervolgens op de sneltoetsen op het toetsenbord die u eerder in deze zelfstudie hebt gedefinieerd om uw schermafbeeldingen te maken. Als u erop klikt, wordt het scherm grijs en kunt u snel het gebied van het scherm dat u wilt opslaan slepen. Let goed op de pixelindicator zodat u geen schermafbeelding groter dan 600 pixels breed sleept.


Stap 6: Maak notaties

Soms moet je notaties toevoegen aan je screenshots. Notaties kunnen de lezer helpen begrijpen waar hij naar kijkt. Als u bijvoorbeeld de aandacht van uw lezers wilt vestigen op een bepaald deel van het scherm, kunt u een pijl tekenen om deze aan te wijzen. Je kunt ook (en zou moeten) lijnen, vormen en tekst tekenen wanneer dat nodig is om de stap te helpen verklaren. Het toevoegen van tekst aan uw screenshot kan handig zijn om bijvoorbeeld kleurcodes in te voegen.

Zodra u op de knop klikt, kunt u notaties toevoegen die u voor die specifieke zelfstudie nodig hebt.


Stap 7: exporteer uw afbeeldingen

Wanneer u schermafbeeldingen maakt met LittleSnapper, worden uw afbeeldingen sequentieel gerangschikt. Als u de naam van een bestand wilt wijzigen, kunt u dit nu doen. Als u tevreden bent met de naam van uw afbeeldingen, kunt u deze exporteren zoals hieronder wordt weergegeven.

Uw afbeeldingen worden nu geëxporteerd naar de door u geselecteerde map.


Stap 8: Bestanden hernoemen (optioneel)

Op dit punt wilt u misschien uw bestanden hernoemen. Bridge kan dit vrij snel doen. Open gewoon de brug, blader naar uw map, selecteer alle afbeeldingen in die map, ga naar Hulpmiddelen> Naam wijzigen.

Tip: Bij het benoemen van bestanden zijn er enkele afbeeldingen die speciale namen nodig hebben. De uiteindelijke resolutie van 600 pixels breed moet een naam krijgen final.jpg, de grote versie van de uiteindelijke afbeelding moet een naam hebben final_large.jpg, en de voorbeeldafbeelding van 200x200 moet preview.jpg heten. Misschien wilt u die afbeeldingen opzij zetten, zodat ze het batchnaamgevingsproces niet hinderen.


Stap 9: converteren naar JPG en optimaliseren (optioneel)

Optimaliseer nu uw afbeeldingen voor het web en converteer ze naar JPG-bestanden. We raden aan dat u dit doet met een toepassing die in staat is tot batchverwerking. Adobe Bridge, Fireworks en Photoshop kunnen dit allemaal. We gebruiken Bridge in het onderstaande voorbeeld.


Stap 10: Video exporteren (optioneel)

In deze optionele stap kunt u de video die u hebt opgenomen exporteren en deze aan de rest van uw bestanden bezorgen. U kunt dit op verschillende manieren doen. U kunt de audio verwijderen en de real-time beelden weergeven, of de audio verwijderen, de beelden versnellen en een nieuwe track opnemen met een verhaal waarin wordt uitgelegd wat u aan het doen bent.

Tip: Zorg ervoor dat videobestanden worden opgedeeld in beheersbare delen. Zorg er ook voor dat de videobeelden die u verstrekt goed zijn bewerkt en dat alle audio die u verstrekt van hoge kwaliteit is. Neem geen muziek op met het beeldmateriaal.


Stap 11: schrijf de HTML

Nu kunt u beginnen met het schrijven van uw tekst en het samenstellen van uw HTML. Gebruik deze sjabloon om uw HTML-bestand op te maken. Zorg ervoor dat u de juiste richtlijnen volgt.


Dien iets in!

Dat is alles wat er is! Als je denkt dat je klaar bent voor de uitdaging om iets in te dienen en lid te worden van het Mactuts + -team, klik dan op onze nieuwe auteurspagina voor meer informatie over hoe je aan de slag kunt gaan. Bekijk ook onze andere sites om te zien of je ergens anders kunt worden aangesloten.