Kleuren maken en beheren (Swatches, Color Themes)

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.

Voor een website maak je gebruik van maximaal kleuren.

Een kleurenpalet samenstellen van kleuren die én goed samen passen.

Een fraaie kleurcombinatie opleveren en voldoende contrast bieden onderling.

Dat is soms erg moeilijk.

Adobe biedt met 'Adobe Color CC'.

Een bibliotheek aan kleurthema’s aan waar iedereen gebruik van mag maken.

En waar jij ook zelf je eigen kleurthema kan delen met anderen.

De bibliotheek is gekoppeld aan je persoonlijke CC account.

Dus de thema’s die je uitkiest kun je via je bibliotheek uitwisselen met de Adobe programma’s.

Je vind je bibliotheek in Adobe Muse via Window > CC libraries.

Per project kun je een aparte bibliotheek aanmaken waarin je bronmateriaal kunt verzamelen voor je project.

Maak een nieuwe bibliotheek aan via het uitrolmenu > Create New Library.

Geef deze een herkenbare naam, bijvoorbeeld ‘webevent’ en klik op Create.

We gaan nu online een kleurthema kiezen of samenstellen.

Ga naar het webadres ‘color.adobe.com’.

Ik ben al ingelogd onder mijn inlognaam en wachtwoord.

Ga naar het menu-optie ‘Verkennen’.

Hier vind je alle thema’s.

Je kunt filteren onder alle thema’s en bijvoorbeeld kiezen voor de meest populaire.

Maar je kunt ook een woord opgeven hier in het zoekveld. Ik typ bijvoorbeeld ‘beach’

Enter om te bevestigen. Om strand gerelateerde kleurthema’s te krijgen.

Nou dit is inderdaad een mooi palet van zon, zee en strand.

Ik vind het juist leuk om een eigen thema samen te stellen.

Klik dan op de menu-optie ‘maken’.

Stel zelf de kleuren samen, door elke kleur apart te kiezen via de kleurvlakken.

Of laat Adobe een kleurenpalet samenstellen uit een afbeelding.

Klik op het camera-icoon.

Navigeer naar de map ‘img’ in de oefenmap

Kies een afbeelding uit die we in de website gebruiken.

Bijvoorbeeld het uitzicht vanaf het terras. Klik op Open.

Er wordt automatisch een palet voor je samengesteld.

Deze kun je ook nog aanpassen. Verplaats dan de kleurencirkels in de afbeelding.

Als je meer controle over de kleuren wilt hebben.

Kun je de kleuren aanpassen met behulp van het kleurenwiel.

Klik dan op ‘Maken met kleurenwiel’.

Sleep aan de kleurcirkels in deze kleurkiezer.

Zodra je tevreden bent kun je klikken op de knop ‘Opslaan’.

Kies in welke bibliotheekmap je het palet wilt opslaan.

Ik kies voor onze projectbibliotheek die we zojuist hadden aangemaakt in Muse.

Je moet wel een internetverbinding hebben om de nieuwe bibliotheekmap direct met de cloud te synchroniseren.

Want dat is de reden dat deze map nu direct al beschikbaar is op mijn cloud-account. Klik op Opslaan.

Ik keer terug naar Adobe Muse.

Ik activeer mijn Swatches-venster en zet deze apart in beeld.

Open de bibliotheek in het venster CC Libraries.

Ook deze sleep ik even los in beeld. Zo!

Hierin staat het door mij zojuist opgeslagen kleurthema, weergegeven als een strip.

Ga met de muis boven een kleurvlakje hangen en de kleurcodes wordt getoond in een tip.

Klik met de rechtermuisknop ingedrukt op een kleurvlak en kies uit het contextuele menu voor ‘Add to Swatches’.

Controleer in het stalenvenster dat de kleur is toegevoegd.

Je kunt elk kleurvlak nu eenvoudig toevoegen aan het stalenpalet.

En gaan gebruiken voor de vormgeving van de website.

Ik raad je aan om per website gebruik te maken van een kleurenpalet van maximaal kleuren.

Zorg dat de kleuren voldoende contrast hebben onderling.

Het bibliotheeks-venster is bereikbaar in alle Adobe programma's.

Dus ben je in Illustrator bezig met het tekenen van een illustratie.

Heb je ook toegang tot de bibliotheek. En exact hetzelfde kleurenpalet.

Klik op een kleurvlakje om de kleuren toe te passen in je tekening.

Zo kun je met een consistent kleurenpalet ontwerpen aan je website.

Sleep de tekeningen naar de bibliotheek om deze aan de bibliotheek toe te voegen..

Ik keer terug naar Muse.

En sleep deze uit de bibliotheek.

Om in de vormgeving toe te passen.

Het bibliotheek-venster is een uitkomst voor het uitwisselen van kleurpaletten en bestanden.