Share
I denne opplæringen vil jeg vise deg hvordan du oppretter en knapp i Photoshop, og bruker den, med alle sine forskjellige stater, i et Adobe Muse-prosjekt. Når vi har designet og importert våre Photoshop-eiendeler til Adobe Muse, ser vi på hva som skjer hvis vi vil oppdatere PSD lenger nedover linjen.
Last ned videoen eller abonner på Tuts + Webdesign på Youtube.
Velkommen til denne raske tipsveiledningen om Adobe Muse. Videoen ovenfor viser hvordan du kan opprette en knapp i Photoshop og plassere den i Adobe Muse.
En knapp i Adobe Muse har fire stater. Så, hvis du plasserer et rektangel her i Adobe Muse, vet du at du som standard har fire stater
For å opprette en knapp, tegne et rektangel og fyll deretter det med en farge eller gradient, eller legg til et bilde i bakgrunnen.
Dette er flott, men noen ganger vil du designe alt i Adobe Photoshop, og kunne importere statene derfra.
Åpne Photoshop og lag en vektorform en vanlig grønn knapp. Stil det som du vil, med avrundede hjørner, en kantlinje og så videre. Jeg vil lage fire stater, så jeg begynner med å navngi dette første laget Knapp Normal.
Da vil jeg duplisere laget - dette neste laget vil være min Mouse Over State.
I dette tilfellet vil vi bare endre fargen, noe som gjør den lettere.
Gjenta prosessen for alle fire statene du trenger, og lagre filen som ButtonGreen.psd.
Nå i Adobe Muse, hvis jeg vil bruke dette designet uten å eksportere lagene til PNG-filer, kan jeg direkte gjøre det Fil> Plasser Photoshop-knappen, velg ButtonGreen.psd, og deretter vil det analysere alle lagene som er tilgjengelige i Photoshop-filen.
Tilordne hvert lag til en knappestatus, plasser den på scenen og re-størrelse den om nødvendig.
Ved hjelp av tekstverktøyet kan vi legge til en etikett på toppen av det (for eksempel SUBSCRIBE).
Hvis du nå viser det i nettleseren, vil du se at vi faktisk har fire stater. Når vi ruller, og når vi klikker, vil det endre tilstanden til knappen.
Nå, hva skjer hvis jeg endrer eller endrer design i Photoshop?
For eksempel, i Photoshop lar vi endre fargen på den normale tilstanden. Vi gjør det til en Blå knapp, og deretter lagrer du PSD-filen. Hvis vi nå går tilbake til Adobe Muse, er det ingen synlig endring, men hvis vi åpner * Assets Panel *, vil du se en advarselmelding.
Det vil si at aktiva har endret seg siden data ble importert, så vi kan høyreklikke og bare si at vi vil oppdatere aktiva.
Dette viser at arbeid med eiendeler mellom Adobe Photoshop og Adobe Muse er enklere enn noensinne. Jeg håper du likte dette raske tipset!
For en mer detaljert titt på Adobe Muse ta en titt på mitt gratis kurs Design og publisering av nettsteder med Adobe Muse.
Accentsconagua