How å lage knapper i Photoshop og Adobe Muse
Dette innlegget er en del av en serie som heter All About Adobe Muse.How til bruker Web Fonts Med Adobe MuseHow de gjorde det: «Years of Living Dangerously "EPK Mikro, bygget med Adobe MuseSponsored Content
Dette sponset post har et produkt som er relevant for våre lesere mens møte våre redaksjonelle retningslinjer for å være objektiv og pedagogisk.
I denne opplæringen vil jeg vise deg hvordan du oppretter en knapp i Photoshop og bruke det, med alle sine ulike stater, i en Adobe Muse prosjekt. Når vi har designet og importert våre Photoshop eiendeler i Adobe Muse, vil vi se på hva som skjer hvis vi ønsker å oppdatere PSD videre nedover linjen.
Se Screen
Last ned videoen eller abonnere på Tuts + Web Design på Youtube.
Les Tutorial
Velkommen til denne rask spiss tutorial om Adobe Muse. Videoen ovenfor viser hvordan du kan lage en knapp i Photoshop og plassere den i Adobe Muse.
En knapp i Adobe Muse har fire delstater. Så, hvis du plasserer et rektangel her i Adobe Muse du vet at som standard, har du fire stater
Normal.
Mus ned (når du klikker).
Og Aktiv.
Hvis du vil opprette en knapp, tegne et rektangel og fyll den med en farge eller gradient, eller legge til et bilde i bakgrunnen.
Dette er flott, men noen ganger vil du ønsker å designe alt i Adobe Photoshop, og være i stand til å importere statene derfra.
Ved hjelp av Photoshop
Åpne Photoshop og lage en vektor form; en normal grønn knapp. Style det som du vil, med avrundede hjørner, en kant og så videre. Jeg ønsker å lage fire stater, så jeg vil begynne med å navngi denne første laget Button Normal.
Da vil jeg duplisere lag-dette neste lag vil være min Mouse Over State.
I denne Hvis vi må bare endre farge, noe som gjør det lettere.
Gjenta prosessen for alle fire stater du trenger, og deretter lagre filen som ButtonGreen.psd.
Flytte til Adobe Muse
Nå i Adobe Muse, hvis jeg ønsker å bruke denne design uten å eksportere lagene i PNG-filer, jeg kan direkte gjøre Fil > Place Photoshop-knappen, velg ButtonGreen.psd, og da vil det analysere alle lagene som er tilgjengelige i Photoshop-filen.
Gi hvert lag til en knapp tilstand, og deretter plassere den på scenen, og re- størrelsen det hvis det er nødvendig.
Deretter bruker tekstverktøyet, kan vi legge til en etikett på toppen av det (for eksempel ABONNEMENT).
Forhåndsvisning
Hvis du nå Forhåndsvisning den i nettleseren, vil du se at faktisk, har vi fire stater. Når vi Roll, og når vi klikker, det vil endre tilstanden på knappen.
Tilbake til Photoshop
Nå, hva skjer hvis jeg endre eller modifisere designet mitt i Photoshop?
For eksempel i Photoshop la oss endre fargen på normal tilstand. Vi skal gjøre det en blå knapp, og deretter lagre PSD filen. Hvis vi nå går tilbake til Adobe Muse, er det ingen synlig endring, men hvis vi åpner * Eiendeler Panel *, vil du se en advarsel.
Det vil si at eiendelen har endret seg siden dataene var importert, slik at vi kan høyreklikke og bare si at vi ønsker å oppdatere Asset.
Konklusjon
Dette viser at det å jobbe med verdier mellom Adobe Photoshop og Adobe Muse er enklere enn noen gang. Jeg håper du likte denne raske tips!
Mer Adobe Muse
For en nærmere titt på Adobe Muse ta en titt på min gratis kurs Prosjektering og forlags nettsteder med Adobe Muse. Anmeldelser