Share
In questo tutorial ti mostrerò rapidamente come è possibile creare un sito Web utilizzando Adobe Muse CC. Tra l'altro, noi:
Scarica video o iscriviti a Tuts + Web Design su YouTube
Ciao! Mi chiamo Michael Chaize. Sono un evangelizzatore di Creative Cloud per Adobe e in questo tutorial ti mostrerò come creare rapidamente un sito Web con Adobe Muse CC.
La prima volta che avvii Adobe Muse riceviamo questa schermata iniziale e puoi dire che lo voglio crea un nuovo sito.
E poi definisci le dimensioni delle tue pagine. Se si desidera, come layout iniziale, indirizzare gli utenti desktop, i tablet o gli utenti del telefono e impostare i margini della pagina. Quindi cliccherò ok, e scoprirò l'area di lavoro del piano con tutte le mie pagine.
Per il momento ho solo una homepage, ma qui posso dire che avrò bisogno anche di una pagina di prodotti e forse di una pagina. E nei prodotti otterrò il prodotto A, e allo stesso livello il prodotto B. Ecco come puoi creare rapidamente la struttura del tuo sito web.
Hai anche pagine master. Quindi, ogni volta che aggiungi un elemento di design nell'intestazione o il piè di pagina della pagina mastro, sarà presente su tutte le tue pagine. Per la mia intestazione, creerò semplicemente un rettangolo sullo sfondo. Forse riempilo con un colore scuro.
E voglio aggiungere un logo. Quindi questa è un'immagine, puoi direttamente trascinare e rilasciare immagini dal tuo disco. Ok, quindi lascia che trascini e rilascia un file PNG e inseriscilo. Vedrai che ottieni le guide intelligenti per scattare automaticamente i tuoi elementi sugli altri elementi sul palco.
Ora, se torno al piano generale del mio sito web, vedo che l'intestazione appare su tutte le pagine, perché fa parte della pagina principale. Ok, ora potrei voler aggiungere un menu di navigazione per navigare tra le pagine.
Quindi questo è dove userai il widgets biblioteca. Questa è una libreria di widget interattivi. Si ottengono pulsanti, componenti come il display light box, i moduli, i menu, i pannelli, gli spettacoli di luci in questo caso useremo un menu orizzontale e magari lo posizioneremo nell'intestazione.
Ottiene automaticamente la struttura definita nel piano. Quindi ho già tre pagine nel menu di navigazione. Casa, Prodotti, e Di. In realtà, questo è un widget dinamico, quindi se aggiungo un'altra pagina che chiamerò Contact e se torno alla mia pagina principale, ho già ottenuto il pulsante di contatto.
Se fai clic sull'icona blu, otterrai le impostazioni per i widget. Forse vuoi anche visualizzare le pagine di livello secondario. Quindi direi, tutte le pagine e poi puoi stile.
Per selezionare un font per set web, qui troverai quelli classici, ma puoi anche decidere di aggiungere font web provenienti da kit di caratteri. Navigherà automaticamente il catalogo di caratteri gratuiti disponibili su typekit. E puoi dire ad esempio che vuoi usare il attore carattere, si fa clic su OK, e verrà aggiunto alla lista dei tipi di carattere.
E puoi selezionarlo direttamente qui. Ecco come si crea il menu, quindi se si desidera aggiungere un paragrafo di testo. Non dovrebbe essere sulla pagina principale, ma diciamo sulla home page. Devi solo definire un blocco e dire benvenuto nel mio sito.
Di nuovo, selezionerò semplicemente attore carattere, forse aumentare la dimensione del testo, e qui andiamo.
Quindi, a destra, aggiungerò un altro widget interattivo. Forse una presentazione. Quindi hai diversi tipi di slideshow, quello di base, si fondono con uno a schermo intero, il light box.
Giochiamo con una presentazione di base che visualizzerà un'immagine predefinita qui. Ma ogni volta che aggiungi un widget, avrai questa icona blu, ed è qui che hai le impostazioni e puoi dire Voglio aggiungere le mie immagini.
Ridimensionerà automaticamente le immagini. E poi puoi impostare la legenda, puoi navigare per controllare tutte le immagini e hai anche diverse transizioni. Quindi, per impostazione predefinita, si dissolverà e si dissolverà, ma puoi anche scegliere di avere le diapositive orizzontali.
Quindi questa è la mia homepage, forse possiamo aggiungere qualcosa nella pagina About, ovviamente, puoi copiare gli elementi di pasta da una pagina a un'altra. Quindi, se scelgo di visualizzare tutte le mie pagine con la disposizione delle tessere, posso copiare incolla alcuni elementi.
E puoi anche aggiungere animazioni, quindi lasciami aggiungere un'immagine. E tu hai questo movimento di scorrimento. Quindi questo è un pannello molto potente in cui puoi dire che vuoi aggiungere l'effetto di scansione parallasse. Quindi se controllo Motion qui, ho qui la posizione chiave che significa che quando si scorre la pagina verso il basso e si raggiunge questa posizione chiave prima che io voglia ottenere un comportamento specifico.
Quindi forse qualcosa che viene dalla destra a questa velocità. E dopo ciò, diciamo che non voglio che si muova, quindi voglio che si muova alla stessa velocità della pagina. Quindi, solo uno. Puoi anche giocare con l'opacità per aggiungere alcune posizioni chiave, se vuoi che il tuo oggetto appaia e poi scompaia.
Aggiungerò un altro blocco di testo. Aggiungi il pulsante. Giusto per aumentare la dimensione della mia pagina per mostrare gli effetti. Quindi, se voglio visualizzare l'anteprima di questa pagina nel browser, posso scegliere Salva file, Anteprima pagina nel browser o fare clic direttamente sul nuovo Anteprima pulsante che abbiamo lanciato direttamente in Adobe Muse e mentre sto scorrendo verso il basso, vedo il mio edificio.
Appare da destra. Si ferma e poi scompare. Quindi, questo è esattamente l'effetto che volevo definire all'interno del mio design grazie al pannello Effetti di scorrimento.
Ora se voglio condividere questo sito con il mio cliente per ottenere un feedback, hai il Pubblicare pulsante.
Devi solo pubblicare, quindi digitare un nome. Clicco su ok, e utilizzerà Adobe Business Catalyst, una piattaforma di hosting disponibile per tutti i membri Creative Cloud, e pubblicherà il tuo sito web su questo URL in modo da poterlo condividere con il tuo cliente.
Ecco qui. Ho la mia prima pagina. Prodotto A, prodotto B. Se faccio clic sulla pagina Informazioni e se scorro verso il basso, ho l'effetto direttamente nel mio browser. E posso copiare incollare questo URL e condividerlo con i miei clienti o i miei colleghi.
Adobe Muse CC è rivolto ai designer che desiderano progettare pagine Web senza codifica.
Chiunque può usarlo e diventare molto creativo. Puoi visitare muse.adobe.com per scaricare e provare Adobe Muse. Ti incoraggio inoltre a visitare la sezione Sito del giorno per controllare i siti Web belli pubblicati con Adobe Muse. Per vostra informazione, lo scorso anno nel 2013, sono stati creati e pubblicati più di 500.000 siti Web con Adobe Muse.
Inoltre, se vuoi saperne di più su Adobe Muse, tieniti aggiornato su tutsplus.com e controlla la categoria di Adobe Muse per ottenere nuovi tutorial e video nuovi per imparare come creare siti Web sorprendenti.
Opere di Črtomir Just
Accentsconagua