Î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.
Descărcați videoclipul sau abonați-vă la Tuts + Web Design pe Youtube.
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
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.
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.
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).
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.
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.
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!
Pentru o privire mai detaliată la Adobe Muse, aruncați o privire la cursul meu gratuit Proiectarea și publicarea site-urilor cu Adobe Muse.