Effecten toepassen (Effects)

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.

Je kunt kaders voorzien van vormgeving en diverse effecten.

En ik laat je zien hoe je heel snel meerdere kaders vult met verschillende afbeeldingen.

Open de startpagina van onze oefen website.

Activeer in het lagen-venster de laag ‘content’. Hierin gaan we werken.

Om iets meer ruimte te maken in het content gebied trek ik tijdelijk een kader.

Zie hoe dit kader de footer naar beneden schuift als ik hier tegenaan duw.

Op deze manier kan ik ruimte maken voor mijn inhoud.

Afbeeldingen die je plaatst kunnen enkel in een illustratiekader staan.

Dus selecteer het juiste kader gereedschap.

Ik wil voor de sprekers cirkelvormige kaders maken.

Dan kies ik voor het Ellipse Frame Tool en teken een kader.

Deze geef ik direct een vulkleur, zodat ik hem kan zien.

Selecteer het selectie-gereedschap in de gereedschappenbalk.

Voer het formaat in in het Controls-venster. De Width en de Height worden beide pixels.

Klik in op de cirkel en positioneer deze precies in het midden van de eerste drie kolommen.

Een hulplijn toont mij als ik exact in het midden sta.

Ik dupliceer de cirkel door hierop in te klikken en ingeklikt te houden.

Dan druk ik de Alt-toets in en versleep de afbeelding.

Ik druk dan ook de Shift-toets in zodat ik de kopie perfect horizontaal kan verplaatsen.

Wacht totdat je de hulplijn ziet als je tussen de volgende drie kolommen staat.

Ditmaal selecteer ik beide kaders. Inklikken, ingeklikt houden.

Dan de Shift en de Alt-toets indrukken voor het dupliceren en de bewegingsbeperking.

En ik positioneer de laatste twee cirkels op de volgende kolommen.

De illustratiekaders zijn geplaatst.

Nu ga ik ze vullen met afbeeldingen. Ik heb geen enkel kader geselecteerd.

Maar ik ga naar File > Place.

Open in de oefenmap de map ‘img’. Daarin staat de map ‘sprekers’.

Selecteer hiervan de eerste afbeelding, houdt dan de Shift-toets ingedrukt en selecteer ook de laatste afbeelding.

Je hebt nu afbeeldingen geselecteerd. Klik op Open.

De afbeeldingen bevinden zich allemaal onder de cursor.

Adobe Muse geeft dat aan met het getal .

Gebruik de pijltjestoetsen naar boven en naar beneden of naar links en naar rechts.

Om door de afbeeldingen heen te navigeren.

Met de huidige afbeelding actief ga ik boven een illustratiekader staan.

Muse geeft met een selectiekader aan dat hij dit kader als doelkader van de afbeelding ziet.

Eén keer klikken en de afbeelding wordt proportioneel en beeldvullend geplaatst.

Door simpelweg te klikken op de illustratiekaders kun je ze nu heel snel vullen met afbeeldingen.

Als alle afbeeldingen geplaatst zijn wijzigt de cursor zich weer in zijn gewone gedaante.

Selecteer een illustratiekader. Dan gaan we deze verder vormgeven.

De vulling staat nog steeds op oranje maar de afbeelding bedekt deze.

Je kunt een lijnkleur opgeven bij Stroke.

En een lijndikte bij ‘Stroke Weight’.

Afgeronde hoeken gelden nu niet want een ovaal heeft geen hoeken.

Klik op het woord ‘Effects’.

Je kunt kiezen uit Shadow, Bevel en Glow.

Eerst de schaduw. Vink de optie Shadow aan.

Kies een kleur uit het stalenpalet of een kleur uit de kleurkiezer.

Deze kun je dan met de RGB-schuiven eventueel nog verfijnen.

Maar je kunt ook een kleur kiezen uit de pagina.

Kies het pipet, loop met de muis over een zichtbare afbeelding.

Je ziet aan het actieve kleurvlak op welke kleur je je bevindt.

Zodra je een gewenste kleur hebt gevonden.

Klik je één keer in met de muis en wordt de kleur vastgelegd in het kleurvenster.

Klik in het uitklapvenster van de schaduw om het kleurenpalet te deactiveren.

Met de Opacity bepaal je of je de schaduw % of lager, dus transparant wilt toepassen.

Met de Blur kun je de schaduw minder of meer laten vervagen.

De positie van de schaduw bepaal je met de Angle.

Gebruik de pijltjestoetsen om per graad te verhogen of te verlagen.

Houdt de Shift-toets ingedrukt om met tientallen te verhogen en te verlagen.

Natuurlijk kun je ook het huidige getal selecteren en vervangen.

Met Distance bepaal je de afstand van de schaduw.

Dan de bevel. Deze wordt toegepast op de rand van het kader.

Geef het kader een iets dikkere rand zodat je het effect wat beter kan zien.

Dit soort effecten leveren totaal verschillende resultaten op door te spelen met de kaderrand dikte en de -kleur.

Ik zet de Opacity op %, de Blur op , de Angle op graden en de Distance op .

Zolang de rand nog een grijze kleur heeft ziet dit er nog niet zo interessant uit.

Maar nu maak ik de rand wit en dit ziet er al eigenlijk best wel leuk uit.

Dus gewoon gaan experimenteren met de instellingen.

Glow is feitelijk exact hetzelfde als de Shadow.

Activeer de Glow. Je kiest een kleur uit. En je bepaalt de Opacity.

De grootte van de gloed bepaal je met de Blur.

De Glow kun je echter ook naar binnen verplaatsen.

En dat is dan weer de rand van het kader.

Dus de Glow bedekt óf de schaduw naar buiten óf de Bevel naar binnen op de rand van het illustratiekader.

Zonder kaderrand zul je geen Glow of Bevel kunnen toepassen.

Ik activeer Effects, zet de Glow uit en zet opnieuw de kaderrand weer op . omdat ik de Bevel wel wil behouden.

Dan kun je nog de Opacity verlagen voor het illsutratiekader.

Doe dit en de oranje achtergrondkleur wordt ook weer zichtbaar.

Het kader, de afbeelding en de effecten maak je hiermee transparanter.

Uiteindelijk maakt % de hele illustratie onzichtbaar.