Bestandsformaten van afbeeldingen en illustraties (image-formats)

uit de cursus Responsive websites maken met Adobe Muse

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Responsive websites maken met Adobe Muse

perm_identity Belinda | video_library 71 video's | query_builder 06:00:26

Makkelijk websites maken met Adobe Muse

Leer hoe je met Adobe Muse websites maakt en publiceert. Dankzij de eenvoudige interface kan iedereen zonder voorkennis van HTML-code, CSS en/of JavaScript toch vrij eenvoudig een responsive website creëren en online publiceren. Jammer genoeg is Adobe gestopt met de verdere ontwikkeling van Muse maar het programma is nog steeds te downloaden en te gebruiken.

Doelgroep van deze cursus

Iedereen die websites wil leren maken zonder kennis te willen hebben van broncode, html, css en javascript.

Wat ga je leren

In deze online cursus leer je de verschillen tussen een statische, vloeiende en responsive website. Alle meest gebruikte vensters, gereedschappen en instellingen komen aan bod.  Direct vanaf de eerste instructievideo’s besteden we aandacht aan de meest snelle en efficiënte manier waarop je webpagina’s en -sites zou moeten maken. Dus werken met master pages en stijlen.

Interactieve media met JavaScript Widgets

Je leert de widgets van het programma toe te passen. Dit zijn voorgebakken JavaScript toepassingen waarmee je in een handomdraai bijvoorbeeld een fotogallerij, formulier en interactieve kaarten kunt maken.

Om ervoor te zorgen dat de website er goed uitziet op elk apparaat. Van mobiel, tablet tot desktop besteden we een volledig hoofdstuk aan Responsive Webdesign.

Vereiste voorkennis en vaardigheden

Dit progamma kan iedereen leren, het is laagdrempelig en werkt met het WYSIWYG-principe. Jij creëert prachtige webpagina’s met behulp van de gereedschappen, opties en instelvensters en Adobe Muse schrijft de benodigde code voor jou op de achtergrond weg.

Voordat we afbeeldingen en illustraties gaan plaatsen.

Leg ik eerst iets meer uit over de belangrijkste bestandsformaten.

Voor webpagina’s bereiden we afbeeldingen het meest voor in het jpg, png, gif of svg formaat.

Elke formaat heeft zo zijn voor- en nadelen.

Houd je aan de volgende vuistregels.

Heb je een realistische afbeelding met veel kleur- en toonvariaties?

En zijn er geen transparante gebieden aanwezig?

Dan kies je meestal voor het jpg formaat.

Deze levert de mooiste kleurnuances op.

En biedt tevens een supergoede compressiemethode waardoor afbeeldingen ‘licht’ blijven.

Heb je een afbeelding, illustratie of logo waarin je perse transparante delen wilt hebben.

Dan kun je het beste kiezen voor het png-formaat.

Dit formaat ondersteund namelijk graduele transparanties.

Dus zelfs verlopen met transparantie worden ondersteund.

PNG kan vooral goed omgaan met het comprimeren van effen kleurvlakken.

En veel minder met het comprimeren van kleurnuances.

Daarom levert dit bestandsformaat bij realistische afbeeldingen veel zwaardere bestanden op dan de jpg.

Dus feitelijk wordt dit bestandsformaat vooral ingezet omdat hij zo prachtig transparante gebieden ondersteunt.

Heb je een vector-illustratie?

Dan wil je het liefst de oneindige resolutie van de vectoren behouden.

En dat kan met het svg-formaat.

Dit is een relatief bestandsformaat.

Maar wel erg in opkomst en wordt door alle moderne browsers ondersteund.

Zodra je een illustratie of logo op diverse groottes wilt gaan toepassen.

Dan is dit het ideale bestandsformaat.

Een svg kun je straffeloos vergroten en verkleinen. Hij blijft haarscherp.

Dan het gif-formaat.

Dit is een heel oud bestandsformaat.

Dat vroeger vaak voor logo’s en grafische afbeeldingen werd gebruikt als je transparante delen wilde behouden.

Echter gif ondersteunt alleen % transparantie.

En geen transparante percentages zoals het png-formaat.

Daardoor ogen de randen van een transparante gif heel hakkelig.

Dat ziet er niet mooi uit.

Dit is bijvoorbeeld exact hetzelfde logo weggeschreven als gif.

Het verloop wordt niet ondersteund en eindigt dus heel abrupt.

En om het logo zie je een wit kartelrandje.

Echter met het gif-formaat kun je wel weer animaties maken.

En dat kan weer heel leuke ‘bewegende afbeeldingen’ opleveren.

Dit is een animatie. Maar deze wordt niet getoond in de Design-Mode

Maar wel als je een voorvertoning vraagt in de Preview-Mode.

Een animated gif bestaat uit allemaal losse afbeeldingen die snel achter elkaar getoond worden.

Waardoor je dus bewegend beeld kunt creëren zonder dat je een mediaplayer nodig hebt.

Zoals dat wel het geval zou zijn bij een videobestand.

Wil je meer leren over animated gif’s?

Bekijk dan eens mijn cursus ‘Cinemagraphs maken met Adobe Photoshop’.

Echt een verslavend leuke techniek.

Voor alle formaten behalve voor de svg.

Geldt dat je deze illustraties en afbeeldingen liefst op ware grootte en in de juiste resolutie voorbereid.

Hierdoor wordt de webpagina snel geladen en optimaal vertoond.

Standaard houden we voor webpublicaties dpi aan.

Nieuwere schermen als de retina beeldschermen van apple maken gebruik van een hogere schermresolutie.

Programma’s als Illustrator en Photoshop bieden nu speciale exportmogelijkheden aan.

Waarin je in één venster een afbeelding voor verschillende schermen en op verschillende resoluties kunt laten wegschrijven.