1. Home
  2. Interactief
  3. Web Design
  4. Layout en Photoshop Knoppen
Mu Skill 4

Layout en Photoshop Knoppen

In deze skill leer je alles om binnen jouw website in Muse te kunnen navigeren!

Je leert:

  1. Hoe je een layout kan aanmaken a.d.h.v. van jouw flow-chart
  2. Hoe je de achtergrondkleur van jouw website kan veranderen
  3. Hoe je een dynamische knop kan toevoegen die verandert als je er met jouw muis overheen gaat.
  4. Hoe je met deze knop kan doorlinken naar alle pagina’s binnen jouw layout

1. Lay-out

Je gaat nu de inhoud van de verschillende pagina’s invullen.

  1. Ga terug naar het overzicht (waarin je alle pagina’s kunt zien). Bovenaan zijn tabbladen waar- tussen je kunt kiezen. Als je dubbelklikt op een van de pagina’s, kun je hier in werken.
  2. Vul je pagina’s met tekst en beeld dat je verzameld hebt.
    Let op

    Denk hierbij aan hoe je

    de lay-out hebt bedacht!

2. Achtergrond vullen

Je kunt de website een achtergrond kleur geven en daarmee gelijk de hele browser vullen.

  1. Ga naar Vulling Browser, in de balk bovenin je scherm.

Als je een plaatje als achtergrond wilt dan plaats via Vulling Browser het plaatje.

3. Photoshop-knop

Een Photoshop-knop is een knop die je zelf helemaal kunt ontwerpen (in Photoshop uiteraard!). Het kan bij- voorbeeld een knop zijn die altijd terug gaat naar je home- pagina (een logo bijvoorbeeld), maar ook een plaatje dat je kunt aanklikken in je tijdslijn. Bij een Photoshop-knop heb je de mogelijkheid om meerdere ‘staten’ toe te voegen. Dit is dat de knop veranderd als je er overheen gaat en/of op klikt.

Ontwerp eerst je knop in Photoshop. (Dit kan dus een plaatje, foto, logo, etc zijn). In Photoshop zorg je dat je minimaal 3 lagen aanmaakt. In iedere laag kun je je ontwerp een klein beetje aanpassen (kleur, grootte, etc) of een ander plaatje kiezen. In Muse kun je later aangeven welke laag zichtbaar is wanneer. (Dus wat zie je standaard op de pagina, wat zie je als je muis erover- heen gaat en wat zie je als je erop klikt).

Photoshop-knop invoegen:

  1.  Menu > Bestand > Photoshop-knop plaatsen
  2. Je krijgt nu een venster waarin je voor de verschillende ‘staten’ kunt kiezen welke laag zichtbaar is op je pagina. Kies in ieder geval voor de bovenste 3 een verschillende staat.

4. Koppeling toevoegen aan een knop:

  1. Als je je knop hebt geselecteerd staat er boven in je balk staat een tabblad met ‘koppel.Toevoegen/filteren’. Als je hierop klikt kun je verschillende koppelingen maken. Je kunt kiezen voor een pagina binnen je site maar je kunt ook een URL invullen of een e-mailadres.
  2. Als je op de knop drukt zal je dan naar die site gaan of aan dat e-mailadres een mail starten binnen een e-mail- programma.

Werkt heel simpel dus!

Updated on februari 6, 2019

Related Articles