zondag 23 september 2012

Muse buttons maken

Muse is een nieuw programma van Adobe waarmee je op een eenvoudige manier een website kunt maken. Zeker als je bekend bent met InDesign omdat de manier van werken daar erg veel op lijkt.
Ik heb een 30 dagen trail-versie.

Nu even knoppen en de basale workflow.

Je hebt 4 stadia die je doorloopt om een site te maken.
1. plan = flowchart (ctrl + M)
2. design =  ontwerp (ctrl + I)
3. preview = kijken of het werkt (ctr + P)
4. publish = online zetten

Het mooie van dit programma vind ik dat je werkt op basis van een stromingsschema (flowchart)
Dit geeft heel inzichtelijk weer hoe je site werkt.

Onderin staan de masters. dit is de opmaak van een pagina. Je kan meerdere "masters maken" waardoor groepen pagina's dezelfde vormgeving krijgen. Je kunt uiteraard de masters ook kopiĆ«ren (rechter muisknop)  zodat je kleine veranderingen kunt doorvoeren.

Als je in dit plan de benamingen van de pagina's van de site op orde hebt kunnen er automatisch werkende knoppen/ buttons gegenereerd worden. Wil je deze op 1 pagina dan werk je in die pagina. Wil je het in meerdere pagina's terugzien dan werk je in de master.

De knoppen vind je in het paneel : widgets library. Bij "menu's" kun je hier kiezen tussen horizontaal en verticaal. Met klikken en slepen kun je zo'n menu aanmaken. De namen in de menu's worden uit het plan gegenereerd. Als je de knoppen hebt gemaakt verschijnt er een rondje met pijl. Daarmee open je een submenu waarin je diverse mogelijkheden hebt. De knoppen zelf zijn ook te veranderen van kleur e.d. Klik erop en gebruik de balk bovenin.

 
    


Wil je echter je eigen knoppen gebruiken dan kan dit ook.
Ik heb zelf in Photoshop hiervoor een shape gebruikt. Een pijl die ik in een aantal lagen heb gezet met ieder een andere kleur.
Photoshop document
Deze button kun je in Muse plaatsen door te kiezen voor: file > place Photoshop button (ctrl + B). Op dat moment krijg je de Photoshop import options te zien. Per staat kun je de kleur (laag) kiezen.
In het paneel "states" zie je dit weer terug.

 Zet je de button over een bestaande button dan wordt die overschreven.