Basiskennis webkleur ( RGB, HSB, Websafe colors)

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 antwoord

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.

Ik ga nu het een en ander uitleggen over kleuren.

Selecteer een kleurvlak met het selectie-gereedschap.

Klik op het icoon in het Control-venster, waarmee je de vulkleur kunt bepalen .

Hier vind je een aantal manieren waarmee je kleuren kiezen.

De RGB-sliders zijn eenvoudig.

Met de schuiven sleep je naar de kleur wilt kiezen. Het wordt onder de schuif weergegeven.

Als je liever werkt met HSB dan kies je via het uitrolmenu voor HSB-Sliders.

H staat voor Hue, wat kleurtoon betekent. Dus hiermee kun je de kleur gaan bepalen

Saturation is voor de verzadiging van de kleur.

En met de Brightness bepaal je de helderheid van de kleur.

Sommigen vinden dit een prettige manier om kleur te kiezen.

In webdesign maken we voor het kiezen van kleuren naast RGB en HSB ook wel gebruik van de hexadecimale kleurcode.

Stel dat je gebruik moet maken van specifieke huisstijlkleuren.

Dan krijg je deze vaak op in de hexadecimale kleurcode.

Deze kleurcode bestaat uit een combinatie van cijfers en of letters.

Een webveilige kleur bestaat altijd uit gelijke letter- of cijferpaartjes.

Een webveilige kleur is een beperkt palet aan kleuren.

Dat kan ik het best demonstreren in Adobe Photoshop.

Klik op het voorgrondkleur-icoon om de kleurkiezer tevoorschijn te laten komen.

Standaard kan ik per kleurtoon alle tinten kiezen van helder tot donker, verzadigd en onverzadigd.

Zet ik echter de optie 'Only Web Colors', de ‘webveilige kleuren' aan.

Dan wordt het palet ineens een stuk kleiner.

En de hexadecimale kleurcode bestaat uit paartjes van gelijke cijfers en/of letters.

Elke kleur heeft voldoende afstand tot de volgende kleur.

Waardoor deze altijd duidelijk herkenbaar is als een aparte kleur.

Vroeger werden deze webveilige kleuren vaak gebruikt.

Om in ieder geval een consistent kleur voorvertoning te krijgen op alle monitoren.

Niet elke monitor had een groot kleurbereik

Kleuren weken ook vaak onderling erg af.

Om te grote kleurverschillen te voorkomen gebruikte men webveilige kleuren.

Maar tegenwoordig is dat eigenlijk niet meer echt nodig.

ik selecteer de hexadecimale code en kopieer deze met Commando C.

Klik op OK en keer terug naar Muse.

En hier vervolgens Plakken met Commando V.

Gebruik de tab-toets om de invoer te bevestigen en hij wordt toegepast.

De kleur kun je daarna altijd nog weer verfijnen met gebruik van de sliders HSB.

Of je zet hem weer terug op RGB.

Als je nog geen idee hebt welke kleur je wilt gebruiken.

Dan kun je ook een kleur kiezen uit een afbeelding die op de pagina staat.

Selecteer dan de pipet en loop over een afbeelding.

De kleur zich die onder de pipet bevindt wordt weergegeven in het actieve kleurvlak.

Om een kleur te selecteren klik je in op de afbeelding.

Verfijn eventueel de kleur nog met de schuiven.

En om de kleur op te slaan klik je op het icoon ‘Add Swatch’. Klik op OK.

Deze kleur kun je nu overal toepassen in de webpagina waar je dit wilt.

Hij is immers gewoon opgeslagen in je stalenpalet en eenvoudig te benaderen.

Als je deze kleur niet meer wilt toepassen.

Ik keer terug naar mijn selectie-gereeedschap. Ik selecteer een kleurvlak gevuld met die kleur.

Dan kun je hem uit het stalenpalet gaan verwijderen

Selecteer het kleurvlak en klik dan eenmaal op het prullenbak-icoon.

Wordt deze huidige kleur ergens in de website toegepast?

Damn kun je een andere kleur gaan toewijzen en ik kies van de bestaande stalen.

Een eerder opgeslagen staal namelijk deze. En klik op OK.

Alle objecten teksten, kaders, kaderlijnen etcetera. Maar overal waar deze kleur wordt gebruikt.

Wordt hij vervangen door de nieuwe kleur.

Op deze manier kun je ook heel snel een bepaalde gebruikte kleur in de hele website vervangen voor een andere.

Nog een snelle manier om een huidig bestaande kleur te wijzigen.

Is deze kleur, die je natuurlijk wel moet hebben opgeslagen in je stalenpalet...

...te dubbelklikken. Dan kom je namelijk weer in de kleurkiezer.

En hier kun je altijd gebruikte kleuren wisselen van kleur. Klik op OK.

En overal in de website waar je gebruik maakte van die kleur is deze nu aangepast.

Ik maak deze laatste kleurwijziging weer ongedaan met Commando Z.

En keer terug naar mijn originele kleur.