Cum se creează butoane în Photoshop și Adobe Muse

În acest tutorial vă voi arăta cum să creați un buton în Photoshop și să îl utilizați, cu toate stările sale diferite, într-un proiect Adobe Muse. Odată ce am proiectat și importat activele Photoshop în Adobe Muse, vom analiza ce se întâmplă dacă vrem să actualizăm PSD mai departe pe linie.

Uita-te la Screencast

Descărcați videoclipul sau abonați-vă la Tuts + Web Design pe Youtube.

Citiți Tutorialul

Bine ați venit la acest tutorial rapid despre Adobe Muse. Videoclipul de mai sus demonstrează modul în care puteți crea un buton în Photoshop și îl puteți plasa în Adobe Muse.

Un buton din Adobe Muse are patru state. Deci, dacă plasați un dreptunghi aici în Adobe Muse, știți că implicit aveți patru state

  • Normal.
  • Rostogoli (când mouse-ul este peste elementul dvs.).
  • Mouse-ul în jos (când faceți clic).
  • Și Activ.

Pentru a crea un buton, desenați un dreptunghi și apoi completați-l cu o culoare sau gradient sau adăugați o imagine în fundal.

Acest lucru este minunat, dar uneori veți dori să proiectați totul în Adobe Photoshop și să puteți importa statele de acolo.

Utilizarea Photoshop

Deschideți Photoshop și creați o formă de vector; un buton verde normal. Stilul cum doriți, cu colțuri rotunjite, o margine și așa mai departe. Vreau să creez patru state, așa că voi începe prin a numi acest prim strat Buton Normal.

Apoi voi duplica stratul - următorul strat va fi Mouse Over State.

În acest caz, vom schimba culoarea, făcând-o mai ușoară.

Repetați procesul pentru toate cele patru stări de care aveți nevoie, apoi salvați fișierul ca ButtonGreen.psd.

Trecerea la Adobe Muse

Acum, în Adobe Muse, dacă vreau să folosesc acest design fără a exporta straturile în fișiere PNG, pot să fac direct Fișier> Plasați butonul Photoshop, selectați ButtonGreen.psd și apoi va analiza toate straturile care sunt disponibile în fișierul Photoshop.

Alocați fiecărui strat la o stare de buton, apoi puneți-l pe scenă și redimensionați-l dacă este necesar.

Apoi, folosind instrumentul Text, putem adăuga o etichetă deasupra acesteia (de exemplu, SUBSCRIBE).

previzualizare

Dacă îl previzualizați acum în browser, veți vedea că, într-adevăr, avem patru stări. Când vom răsuci și când vom da clic, va schimba starea butonului.

Înapoi la Photoshop

Acum, ce se întâmplă dacă modific sau modific modificările mele în Photoshop?

De exemplu, în Photoshop să modificăm culoarea stării normale. Vom face un buton albastru, apoi salvați fișierul PSD. Dacă revenim acum la Adobe Muse, nu există nicio modificare vizibilă, dar dacă deschidem panoul * Assets *, veți vedea un mesaj de avertizare.

Se va spune că activele s-au schimbat de la data importului, astfel încât să putem face clic dreapta și să spunem că vrem să actualizăm valoarea activului.

Concluzie

Acest lucru demonstrează că lucrul cu active între Adobe Photoshop și Adobe Muse este mai ușor ca niciodată. Sper că v-ați bucurat de acest sfat rapid!

Mai multe Adobe Muse

Pentru o privire mai detaliată la Adobe Muse, aruncați o privire la cursul meu gratuit Proiectarea și publicarea site-urilor cu Adobe Muse.