Werken met objectstijlen (Graphic Styles)

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.

Binnen een webdesign maak je keuzes in de vormgeving.

En die keuzes moet je dan consequent doorvoeren in de gehele website.

Dus kies je ervoor om illustratiekaders te voorzien van een slagschaduw, een lijn en een lijnkleur.

Dan moet deze vormgeving telkens exact hetzelfde zijn.

Zodra je teveel gaat variëren dan oogt dit al snel slordig.

Om ervoor te zorgen dat je de vormgeving van kaders uniform kunt houden.

Maak je gebruik van Object-stijlen.

Dit venster vind je onder Window > Graphic Styles.

Ik sleep het venster 'Graphic Styles' los in beeld zodat deze ook in beeld blijft.

We hebben al een illustratiekader voorzien van vormgeving. Selecteer dit kader.

Alle illustratiekader op dit moment zijn gebaseerd op de stijl [None].

Om de vormgeving van een kader op te nemen als een stijl.

Zorg je dat het bewuste kader geselecteerd is.

En klik je onderin het venster 'Graphic Styles' op de optie ‘Create a new style’.

Een stijl wordt toegevoegd en deze heet ‘Style’.

Dubbelklik op de stijl.

Een overzichtsvenster wordt geopend en hierin worden de eigenschappen van de stijl beschreven.

Je ziet exact welke vormgeving aan dit kader is verbonden.

En dat klopt met wat we in de vorige video hebben gedaan.

Geef de stijl een herkenbare naam. Ik noem deze bijvoorbeeld ‘portretten’.

Klik op OK. Selecteer nu ook de overige kaders die je hiermee wilt verbinden.

En klik dan eenmaal op de stijl ‘portretten’ om ook deze kaders van deze vormgeving te voorzien.

Selecteer dan alle kaders en kopieer deze via Edit > Copy.

Ik wil deze portretten namelijk ook gaan plaatsen op de pagina ‘Sprekers’.

Ik activeer mijn Plan-Mode en open het document ‘Sprekers’ en ga naar Edit > Paste.

Nu wordt deze vormgeving op twee verschillende pagina’s in de website toegepast.

Dan laat ik je nu de kracht van het werken met stijlen zien.

Stel, ik ben niet tevreden over de vormgeving.

Selecteer dan één portretkader en ik wijzig hiervan de vormgeving.

Ik zet bij Effects de schaduw uit.

De Opacity van Bevel zet ik op %, de Blur op , De Angle op en de Distance mag op blijven staan.

Dan activeer ik juist weer de Glow.

Ik kies een grijze kleur uit.

Ik verlaag de Opacity naar ongeveer % en ik verzacht het geheel met een Blur van .

De gloed moet juist naar binnen worden toegepast, niet naar buiten. Dus activeer ik 'Inner Glow'.

Dit kader is verbonden aan de stijl ‘portretten’ maar achter de naam is nu een +icoon verschenen.

Hiermee geeft Muse aan dat de vormgeving van dit kader niet meer zuiver is conform de originele stijl.

Het kader is handmatig veranderd. En dat klopt.

Maar als ik deze wijzigingen juist wil laten opnemen in de stijl.

Dus de oude stijlkenmerken wil overschrijven door deze nieuwe dan kan dat.

Klik eenmaal in het Graphic Styles-venster op de knop ‘Redefine selected style’.

Zodra ik dat doe verdwijnt het +icoon.

En veranderen alle overige kaders ook naar de nieuwe vormgeving.

Nu ben ik benieuwd of de kaders op onze startpagina ook gewijzigd zijn.

Ik activeer de pagina ‘webevent’.

En jawel hoor ook hier zijn de kaders aangepast.

Wijzig de stijlkenmerken van een Graphic Style.

En alle objecten die hieraan verbonden zijn wijzigen op alle pagina’s in de gehele website mee.

Dat is dus de manier waarop je je vormgeving consistent houdt.

Om de vormgeving van een kader te ontkoppelen met de stijl gebruik je de optie ‘Unlink Style’.

Het kader behoudt zijn vormgeving maar is niet meer gekoppeld. Dus ik kan deze nu aanpassen.

Terwijl de overige vormgeving hierdoor niet beïnvloed wordt.

Om een stijl weer aan een kader toe te passen. Klik je gewoon één keer op de stijl.

Heb je per ongeluk handmatige wijzigingen aangebracht.

Terwijl dat niet je bedoeling was?

Kies dan voor de optie 'Clear style overrides'.

Om de handmatige wijzigingen weer ongedaan te maken.

Je kunt net zoveel stijlen aanmaken als je wilt.

En op deze manier de vormgeving van kaders voor de gehele website consistent houden.