Share
În acest tutorial vă voi arăta rapid cum puteți construi un site folosind Adobe Muse CC. Printre altele, vom:
Descărcați video sau abonați-vă la Tuts + Web Design pe YouTube
Bună! Numele meu este Michael Chaize. Sunt un evanghelist Cloud Creative pentru Adobe și în acest tutorial vă voi arăta cum puteți crea rapid un site web cu Adobe Muse CC.
Prima dată când lansați Adobe Muse, primim acest ecran de pornire și puteți spune că vreau creați un site nou.
Apoi definiți dimensiunile paginilor dvs. Dacă doriți, ca layout inițial, să vizați utilizatorii desktop, utilizatorii de tablete sau utilizatorii de telefoane și setați marginile paginii. Așa că voi da clic pe O.K, și voi descoperi spațiul de lucru plan cu toate paginile mele.
Pentru moment am doar o pagină de pornire, dar aici pot spune că voi avea nevoie, de asemenea, de o pagină de produse și poate de o pagină. Și în produsele pe care le voi obține produsul A, și la același nivel de produs B. Deci, acesta este modul în care puteți crea foarte rapid structura site-ului dvs..
Aveți, de asemenea, pagini principale. Deci, de fiecare dată când adăugați un element de design în antet sau în subsolul paginii principale, acesta va fi pe toate paginile dvs. Pentru antetul meu, voi crea doar un dreptunghi în fundal. Poate o umple cu o culoare închisă.
Și vreau să adaug un logo. Deci, aceasta este o imagine, puteți trage direct și picătură imagini de pe disc. Bine, lasă-mă să trageți și să plasați un fișier PNG și plasați-l. Veți vedea că veți obține ghiduri inteligente pentru a vă fixa automat elementele pe celelalte elemente de pe scenă.
Acum, dacă mă întorc la planul general al site-ului meu, văd că antetul apare pe toate paginile, deoarece face parte din pagina principală. Bine, acum aș putea să adaug un meniu de navigare pentru a naviga printre pagini.
Deci, aici veți folosi widget-uri bibliotecă. Aceasta este o bibliotecă de widgeturi interactive. Obțineți butoane, componente cum ar fi afișarea casetei de lumină, formulare, meniuri, panouri, afișări luminoase, în acest caz vom folosi un meniu orizontal și poate îl vom plasa în interiorul antetului.
Se obține automat structura definită în plan. Deci, am deja trei pagini în meniul de navigare. Acasă, Produse, și Despre. De fapt, acesta este un widget dinamic, așa că dacă adaug o altă pagină pe care o voi numi Contact și dacă mă întorc la pagina de master, am primit deja butonul de contact.
Dacă faceți clic pe pictograma albastră, veți obține setările pentru widget-uri. Poate doriți să afișați și paginile de nivel inferior. Așa aș spune, toate paginile și apoi puteți să stil.
Pentru a selecta un font de set web, veți avea aici cele clasice, dar puteți decide și să adăugați fonturi web provenind de la kituri de tip. Acesta va naviga în mod automat catalogul de fonturi gratuite disponibile pe typekit. Și puteți spune, de exemplu, că doriți să utilizați actor font, faceți clic pe OK și va fi adăugat la lista de fonturi.
Și o puteți selecta direct aici. Prin urmare, astfel vă creați meniul și apoi dacă doriți să adăugați un paragraf de text. Nu ar trebui să fie pe pagina principală, ci să spunem în pagina de pornire. Trebuie doar să definiți un bloc și să spuneți bun venit pe site-ul meu.
Din nou, voi selecta doar actor font, poate crește mărimea textului, și aici mergem.
Apoi, în partea dreaptă, voi adăuga un alt widget interactiv. Poate o prezentare de diapozitive. Deci, aveți un fel de prezentare diferită, cea de bază, amestecând pe ecranul integral, caseta de lumină.
Să jucăm cu slideshow-ul de bază, care va afișa o imagine implicită aici. Dar de fiecare dată când adăugați un widget, veți avea această pictogramă albastră, iar aici aveți setările și puteți spune Vreau să adaug propriile mele imagini.
Acesta va redimensiona automat imaginile. Și apoi puteți seta legenda, puteți naviga pentru a verifica toate imaginile și aveți, de asemenea, diferite tranziții. Prin urmare, în mod implicit, se va estompa și se va estompa, dar puteți alege și să aveți diapozițiile orizontale.
Deci, aceasta este pagina mea de pornire, poate putem adăuga ceva pe pagina Despre, desigur, puteți copia elemente de paste de la o pagină la alta. Deci, dacă aleg să afișez toate paginile mele cu aranjamentul de plăci, atunci pot copia câteva elemente.
Și puteți adăuga animație, așa că permiteți-mi să adaug o imagine. Și aveți această mișcare de parcurgere. Deci, acesta este un panou foarte puternic în care poți spune că vrei să adaugi efectul crawling al parallaxului. Deci, dacă verific pe Motion aici, am aici poziția cheie, ceea ce înseamnă că atunci când defilați pagina în jos și ajungeți la această poziție cheie înainte de a dori să obțineți un comportament specific.
Deci, poate că ceva vine din dreapta la această viteză. După asta, să spun că nu vreau să se miște, așa că vreau să se miște la aceeași viteză a paginii. Deci, doar unul. De asemenea, puteți juca cu opacitatea pentru a adăuga unele poziții cheie, dacă doriți ca obiectul să apară și apoi să dispară.
Voi adăuga un alt bloc de text. Adăugați butonul. Doar pentru a mări dimensiunea paginii mele pentru a afișa efectele. Deci, dacă vreau să previzualizez această pagină în browser, pot alege fie să salvez fișierul, fie să previzualizez pagina în browser sau să fac direct clic pe noul previzualizare butonul pe care l-am lansat direct în cadrul Adobe Muse și pe măsură ce derulez în jos, văd clădirea mea.
Se pare din dreapta. Se oprește și apoi dispare. Deci, acesta este exact efectul pe care am vrut să-l definim în cadrul designului datorită panoului Scroll Effects.
Acum, dacă vreau să împărtășesc acest site cu clientul meu pentru a obține feedback, aveți Publica buton.
Trebuie doar să spui publicați, apoi introduceți un nume. Eu dau click pe O.K, și va folosi Adobe Business Catalyst, care este o platformă de găzduire disponibilă pentru toți membrii Cloud Creative, și va publica site-ul dvs. pe această adresă URL, astfel încât să îl puteți partaja cu clientul.
Aici este. Am prima pagină. Produsul A, produsul B. Dacă fac clic pe pagina Despre, și dacă scot în jos, am efectul direct în browserul meu. Și pot să copiază această adresă URL și să o împărtășesc clienților sau colegilor mei.
Adobe Muse CC vizează designerii care doresc să proiecteze pagini web fără codificare.
Oricine poate să o folosească și să devină foarte creativă. Puteți să vizitați muse.adobe.com pentru a descărca și a încerca Adobe Muse. De asemenea, vă încurajez să vizitați secțiunea Site of the Day pentru a verifica site-urile frumoase publicate împreună cu Adobe Muse. Pentru informația dvs., anul trecut, în 2013, au fost create și publicate peste 500.000 de site-uri web cu Adobe Muse.
De asemenea, dacă doriți să aflați mai multe despre Adobe Muse, stați pe tutsplus.com și verificați categoria Adobe Muse pentru a obține tutoriale și videoclipuri noi pentru a afla cum să creați site-uri uimitoare.
Opera de la Črtomir Doar
Accentsconagua