Vector- versus pixelafbeeldingen

uit de cursus Webdesign & Layout met css (2019)

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 antwoord

Registreer als je wilt reageren.

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

Webdesign & Layout met css (2019)

perm_identity Belinda | video_library 58 video's | query_builder 03:28:15

Webdesign met CSS

Met css bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe css-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste css-selectors.

CSS blijft in ontwikkeling

CSS biedt een groot aantal css-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

Doelgroep van deze cursus

Wil jij zelf de vormgeving van html-pagina’s bepalen dan is deze cursus absoluut een must.

Wat ga je leren

In deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Waaronder hoe je met grid en flexbox op een waanzinnig snelle, efficiënte en makkelijke manier snel een responsive design kunt maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

Afbeeldingen kun je op twee manieren plaatsen op een webpagina.

Direct in de html of puur met behulp van een css-stijl.

Je kunt de afbeelding direct in de html plaatsen met het img-element.

De vormgeving en het gedrag ervan kun je dan alsnog bepalen met een css-stijl.

Of je kunt een afbeelding ook als een achtergrondafbeelding verbinden aan elk gewenst html-element.

En ook hiervan kun je de vormgeving en het gedrag bepalen met een css-stijl.

Meestal worden hiervoor de div-elementen gebruikt.

De meeste webdesigners passen afbeeldingen toe als een achtergrondafbeelding.

En kiezen er niet voor om deze 'hard' in de html te plaatsen.

Mede omdat je voor achtergrondafbeeldingen meer mogelijkheden hebt met css.

In dit hoofdstuk gaan we eerst werken met afbeeldingen die wel in de html geplaatst zijn.

In een later hoofdstuk leer ik je de mogelijkheden van achtergrondafbeeldingen.

Je hebt vier belangrijke soorten afbeeldingen waarmee je zult gaan werken.

Het is belangrijk dat je de verschillen hiervan kent.

Je hebt jpeg's, gif's, png's en svg-afbeeldingen.

De eerste drie zijn pixelafbeeldingen en de svg is een vectorillustratie.

De grootste beperking zit hem in de pixels.

Zodra je inzoomt op pixelafbeeldingen dan ga je de pixels zien.

Een vectorafbeelding is opgebouwd uit lijnen en punten.

Het maakt niet uit hoever je hierop inzoomt.

De illustratie blijft altijd haarscherp.

Dat is het belangrijkste voordeel van een svg.

Waarom zou je dan niet altijd alleen maar van svg's gebruik maken.

Nou, omdat alleen heel grafische illustraties zich hiervoor lenen.

Denk aan pictogrammen en logo's.

Deze bestaan uit scherpe lijnen en kleurvlakken.

Een natuur- of portretfoto bevat juist heel veel kleurnuances en details.

En die wil je behouden dus zul je voor fotorealistische afbeeldingen moeten kiezen voor een jpg.

Deze is daar het meest geschikt voor.

Het gif-formaat kun je zien als de voorloper van het svg-formaat.

Vooral goed in grafische illustraties met strakke lijnen en kleurvlakken.

Maar omdat een gif geen vectoren kan bevatten.

En het beeld wel omzet naar pixels is dit nu het minst gewenste formaat.

Enige reden dat we nu toch soms kiezen voor het gif-formaat is dat deze als enige animaties kan bevatten.

Blijft het png-formaat over. Wanneer gebruik je deze.

Onthoudt dat als je een deel van de afbeelding transparant wilt maken dit alleen kan met png.

In principe ook met een gif maar die levert minder mooie transparantie op.

Een jpeg kan geen transparantie bevatten.

Afbeeldingen die je vrijstaand wilt kunnen plaatsen zul je dus moeten opslaan als een png.