Questo tutorial è una guida passo a passo su come creare in template per Mambo.
I software utilizzati in questo tutorial sono Photoshop 7, Dreamweaver MX, e Mambo Stand Alone Server disponibile a questo indirizzo http://mosforge.net/projects/msas/ grazie a mambosolutions.com Prendetevi una bella tazzona di caffè e cominciamo!
Prima di tutto alcune note importanti!
Per favore leggile bene, ti saranno di aiuto per comprendere meglio quello di cui andremo a parlare, e capire se questo tutorial è quello di cui hai bisogno.
Cosa ci si aspetta da questo tutorial?
Questo tutorial è realizzato giusto per fare un template funzionante, non ha la pretesa di essere un codice professionale!
Non ti insegner ad essere un grande designerŚ
Non è un codice con css, html, xml validatiŚ
E’ una bassa e sporca maniera di fare un template funzionante
Se stai cercando delle scorciatoie e modi veloci per fare le cose questo tutorial non fa per te.
Cerca di capire!
Non sono omniscente; francamente non ho mai incontrato nessuno che lo fosse.
Se riscontri degli errori, segnalameli e li correggerò, non ti innervosire, sono un essere umano dopo tutto.
Tieni a mente che ognuno ha il suo modo di fare le cose, faro del mio meglio per rendere questo tutorial comprensibile a tutti, tuttavia cerca di lasciar perdere le cose che gi sai
Non posso sapere tutto, o mostrare tutto (non perché non voglio ma è imposibile)
Non essere impaziente, se dimentico di puntualizzare qualcosa, ricordamelo e lo indicherò Se ritieni che stia commettendo qualche errore, o se sai fare qualcosa in un modo pią semplice, fammelo sapere, farò i cambiamenti necessari menzionando il tuo aiuto.
Prima di iniziare!
Il primo passo è quello di pianificare, le decisioni sono la chiave fondamentale nella progettazione, concentrati su quello che desideri fare e non distaccarti da esso.
I colori sono l’aspetto principale di ogni template, averne troppi pochi potrebbe rendere il sito statico e non attraente, averne troppi potrebbe renderlo troppo confuso per l’utente, e potrebbe essere dura per i tuoi stessi occhi.
Decidi cosa pensi sia meglio utilizzare come immagine.
Pensa a quali potranno essere i tuoi visitatori:
I visitatori sono le persone sulle quali ti devi concentrare, non su quello che tu pensi, ma su cosa loro pensano. Fai delle scelte accurate, guarda ai siti simili come tematiche a quello che stai per realizzare, scriviti le idee su un pezzo di carta, ti sar sicuramente di aiuto per focalizzare le idee.
Ho visto molti bei progetti rovinarsi perchè i designer avevano iniziato ad uscire dal progetto iniziale, aggiungendo pezzi qu e l , un’idea è buona fintanto che continua ad essere parte del tuo progetto originario. Una volta che hai perso il fuoco dal progetto originario sar ancora pią facile perderloutilizzando Photoshop, con tutte le potenzialit che ha, gli effetti eccŚ li vorresti utilizzare tutti, vero? Ś Sbagliato, è la peggior cosa che potrebbe accadere iniziando la fase creativa
Non sto dicendo che essere creativi è sbagliato, ma un design troppo creativo potrebbe essere un fallimento.
Come funziona?
In questo tutorial ti guiderò passo a passo come meglio posso, ma sei tu a dover prendere le decisioni da solo, e provare un pò da solo, questa guida contiene istruzioni passo a passo e tu sei incoraggiato a fare modifiche quando lo desideri, sei qui per imparare e non per seguire.
Un’altra cosa importante è che devi essere paziente, ed avere un pò di comprensione con il tuo PC. Le cose spesso non lavorano come ci si aspetta da loroŚ non sbattere la testa sulla tastiera e non gridare, non ti porta a niente, solo prova e riprova sinchè non raggiungi il risultato desiderato.
Ho detto abbastanza, spero che tu faccia del tuo meglio.
Se ti trovi in difficolt , hai dei problemi, usa il forum, sarò felice di rispondeti.
Mi farebbe anche piacere poter vedere le tue creazioni una volta che le hai finite, registrati sul forum e indica il tuo sito.
Aiuta gli altri mostrando il tuo lavoro!
OK iniziamo.
La prima cosa da fare è avere la grafica per il template, quindi apriamo il nostro Photoshop ed iniziamo.
Suppongo voi conosciate un po’ Photoshop, quindi sapete gi dove trovare cose come layers, colori swatches etc., se non li trovate la maggior parte sono sotto la voce del menu Window (il menu in alto), selezionateli e compariranno sullo schermo accanto all’area di lavoro.
Suggerimento!
La maggior parte degli strumenti in Photoshop possono essere raggiunti per mezzo delle scorciatoie tastiera, per spiegare come funziona quando vedete qualcosa come questo (Ctrl +
Alt + Shift + N) ciò significa che dovete tenere premuto il tasto Ctrl, e tenendo premuto Ctrl dovete premete e tener premuto Alt, che tenendo premuto Ctrl e Alt, dovete premere Shift e tenendo premuto Ctrl, Alt e Shift dovete premere NŚ
SŹ sembra confusionario ma non preoccupatevi vi abituerete, oppure continuare ad usare il vecchio click del mouse, le scorciatoie tastiera servono per risparmiarvi tempo.
Cominceremo creando un nuovo documento.
I uso di solito 760pix di larghezza (che risulta chiaro e ben visibile nella maggio parte degli schermi 800x600) il template sul quale lavoreremo avr larghezza variabile, questo significa che si allargher alla risoluzione dello schermo dell’utente ma non potr essere pią piccolo di 760pix.
L’altezza non è importante, per avere un’area di lavoro comoda io userò 600pix.
Creiamo un nuovo file, andate su File > Nuovo (Ctrl + N)
Ok ora abbiamo una pagina Bianca è ora di fare qualche magia.
Prima di tutto inserirò delle linee guida che mi aiuteranno nel processo creativo, come sapete un sito base di mambo consiste in: intestazione [header], moduli di sinistra [left], moduli di destra [right], contenuto principale [main content] e piè di pagina [footer].
creerò le mia linee guida perchè abbiano un’altezza dell’intestazione di 180px, una larghezza di 150px per i moduli di destra e sinistra, e 30px per il piè di pagina.
per creare le linee guida andate sul tool di spostamento (V)
ora cliccate sul righello e tenendo premuto trascinate verso gią o a destra, creerete cosŹ una nuova linea guida.
Se non vedete i righelli in alto e a sinistra del vostro documento, andate nel menu View - > Linee Guida (Ctrl + R)
Ok, ora il mio concetto base sul layout assomiglia a questo.
Non dovete per forza creare le linee guida, ma è mia opinione che rendono il processo creativo pią efficiente e solido, per non dire pią facile.
Suggerimento!
Finche disegnati le linee guida possono infastidire, per nasconderle andate su menu View -> (Ctrl + H)
Ora può essere un buon momento per salvare, non potrò mai dire abbastanza volte che il salvataggio è MOLTO importante, quindi fate vostra l’abitudine di salvare spesso i vostri, vi ricorderò di salvare anche nel corso della guida, ma fatelo da soli e prendetela come buona usanza.
Per salvare andate nel menu File -> Salva (Ctrl + S)
Pronti a partire? Allora iniziamo.
E' tempo di decidere, decidiamo quale tipo di immagine inserire,
decidiamo la struttura del sito, questo render il lavoro pią facile,
gather tutti i materiali, es. stock photos, icone ecc.
Cominciamo la parte divertente.
Di solito inizio con l'header e lavoro da questo,
secondo me l'header è la parte pią importante del sito, nella maggior parte dei casi ne è la parte pią visibile.
Ok cominciamo creando un nuovo set di livelli, questo permettera di gestire il disegno in modo un po' pią organizzato e sar pią facile trovare le cose, quando si disegnano layout complessi.
Per fare un nuovo set vai su Livello > Nuovo > Set Livelli
o clicca sull'icona Crea un Nuovo Set in basso tra i tool Livelli.
Se non vedi il set Tool Livelli vai su Finestra > Livelli cosŹ apparir . ok? Bene, creiamo un nuovo set livelli, chiamiamolo header, per cambiare il nome del set basta fare doppio click sul nome e scriverne uno nuovo.
Il menu del tuo livello apparir circa cosŹ:
ora dobbiamo creare un livello all'interno del set, selezionando prima il set cliccando sulla freccia blu alla sinistra del nome, dovrebbe essere rivolta verso il basso quando è selezionata.
Ora vai su Livello > Nuovo > Livello (Shift + Ctrl + N) il tuo nuovo livello appare cosŹ, dagli un nome e lascia il resto com'è
Ok ora abbiamo un set e un livello, andiamo alla parte magica, seleziona il tuo livello appena creato,quando è selezionato sar evidenziato, poi prendi lo Strumento Selzione Rettangolare (M) con il tuo strumento, seleziona la porzione header del template
Ok ora decidiamo alcune combinazioni di colori, farò header in modo che sfumi dal verde chiaro al bianco, per fare questo seleziona i colori, fallo cliccando sui colori cosŹ
CosŹ appare il menu colore:
Non scendo nei dettagli sul colore in questo tutorial, ci sono troppe combinazioni e modi di selezionare un colore, per ora ci atterremo ai colori base, sicuramente hai impostati i Colori per il Web, allora puoi usare la barra colore, e colorare thumbnails to set the color you’re after.
Hai bisogno di selezionare due colori, Foreground e Background, per avere la sfumatura dal verde al bianco, imposta per il foreground il verde e per il background il bianco, cosŹ
Fatto? Ora prendiamo lo strumento Gradiente
ora trascina il tuo strumento dal basso della selezione, assicurati che sia una linea dritta
NB!
Per costringere i tuoi movimenti ad essere dritti, tieni premuto il tasto (Shift) mentre scorri.
Una volta fatto dovresti avere qualcosa del genere
Belo vero? ok mettiamo un po' di pepe e mettiamo dei quadrati bianchi sopra, per farlo usiamo la tecnica pattern
per fare questo cominciamo facendo un nuovo documento (Ctrl + N) con le seguenti propriet sul tuo docuemtno seleziona bianco come colore
(o qualunque colore hai selezionato come background quando hai fatto la sfumatura all'header) zoomma il pią possibile, cosŹ puoi vedere il tuo docuemtno, (lo strumento zoom è la lente (Z)) poi seleziona lo strumento Penna (B)
imposta lo strumento a 1px
per impostarlo guarda supra e vedrai le opzioni
ora mettiamo un quadrato al centro dell'area cosŹ
ora mettiamolo in un pattern, per farlo vai su Edit > Definisci Pattern, dagli un nome e clicca ok.
Fatto questo, chiudi il docuemnto, (non occorre salvarlo) e torna al tu template.
Ok mettiamo il pattern nello sfondo dell'header, facciamolo selezionando il livello poi vai su Edit > Fill, poi seleziona il pattern appena fatto (white_square nel mio caso)
puoi giocare con le impostazioni, con il blending mode e opacit ,
io non spiegherò le differenze tra tutti i blending modes, perchè richiede troppo tempo. Io uso il blend normale, opacit al 50% ecco l'effetto
ora puoi deselezionare l'area, fai Seleziona > Deseleziona (Ctrl + D)
ora salva il tuo lavoro File > Salva(Ctrl + S)
Ok lasciamo la parte dell'header per ora, ci torneremo pią tardi.
Comincerò creando un nuovo set di livelli chiamato left
poi al suo interno un livello chiamato left_back, perciò il menu livelli ora appare cosŹ Suggerimento!
puoi spostare i livelli o i set di livelli cliccando e tenendo cliccata la cartella o l’icona, poi spostare in alto o in basso nella posizione desiderata, lo stesso per spostare i livelli all’interno dei set.
Ora che abbiamo un nuovo set di livelli usiamoli, selezioniamo il livello left_back
poi prendiamo lo strumento Selezione rettagolare (M), e selezioniamo la porzione sinistra usando le linee guida per aiutarci
Appare cosŹ:
Suggerimento!
Usa le impostazioni Snap per fare selezioni pią facili, le trovi in Visualizza > Snap (Ctrl + Shift
+ ;)
se hai lo Snap abilitato tutte le selezioni e gli spostamenti will snap al punto pią vicino, che puoi impostare usando Visualizza> Snap > Impostazioni
Ora passiamo a riempire l’ area con un colore, seleziona il tuto colore in modo che sia prioritario, Io scelgo il grigio chiaro
Ora prendi lo Strumento Secchiello (G)
Assicurati di avere il livello giusto selezionato e clicca all’interno dell’area selezioanta, una volta fatto questo dovresti vedere qualcosa del genere
Ora vai avanti e deselezionalo Select > Deselect (D)
Io aggiungerò un livello di stile, giusto per darci un po’ di tono
Gli Stili sono uno strumento molto potente, sono anche molto complessi e prendono molto tempo al webmaster, perciò sperimentiamoli cosŹ sai cosa fanno.
Ok, aggiungiamo un stile al bordo al nostro livello, selezionando il livello (left_back) poi cliccando sul bottone Stile Livello, e selezioniamo Bordo dalla lista
Sto usando le impostazioni riportate qui sotto, ma tu puoi sperimentarne altre
Appare bene adesso, ma c’è ancora la possibilit di migliorare, aggiungerò un altro livello al left set, (Ctrl
+ Shift + N)
Chiamerò il mio livello (dark_sq)
Ora prendiamo lo strumento selezione rettangolare e selezioniamo l’area da riempire, poi selezioniamo il colore, e riempiamolo.
poi se scegli di aggiungere uno stile a quel livello, io ho fatto un rettangolo verticale a destra del mio livello (left_back), poi ho aggiunto un bordo bianco da 1px, ecco il risultato
dovresti avere quello che ti serve, vai avanti e salva (Ctrl + S)
Sembra andar bene cosŹ profondo vero?
ora potresti voler utilizzare quello che abbiamo fatto all’interno del template,
ma non sembra essere molto attraente per ora.
OK allora torniamo al gruppo di livelli della testata, per farlo basta premere la piccolo freccia accanto alla cartella,
questa operazione ci aprir il livello
ora creaiamo un nuovo livello in quel gruppo, io l’ho chiamato (nav _bar)
Userò quell livello per mostrare il pathway nel template
Ora che abbiamo creato il nuovo livello è giunto il momento di riempirlo in qualche modo, iniziamo a prendere lo strumento selezione e selezioniamo un’area
per quanto il pathway sia alto, puoi utilizzare le linee guida per aiutarti, questo è il mio risultato Ora selezioniamo un colore di riemimento, io ho scelto di fare una sfumatura, cosŹ ho scelto due colori Lo sfumerò dal bianco all’arancione in modo che il colore in primo piano sia bianco e quello di sfondo sia arancione
Ora selezionare lo strumento riempimento (G)
Suggerimento!
per passare ad uno strumento diverso all’interno della stesso menu tenere premuto (Shift) e premere la lettera corrisponente sulla tastiera
per esempio (Shift + G) passer dal riempimento piatto a quello sfumato.
Con lo strumento gradiente selezionato trascinarlo dall’alto al basso nell’area selezionata Ora è possible deselezionare l’area Selezione > Deseleziona (Ctrl + D)
ora aggiungiamo uno spessore al livello (nav_bar),
per compiere questa operazione selezionare il livello e premere il pulsante per aggiungere uno stile al livello ( F in un cerchio nella parte bassa del menu dei livelli)
selezionare lo stile desiderato dalla lista, nel mio caso ho scelto spessore ma sei incoraggiato a sperimentare nuove soluzioni
Utilizzo uno spessore di 1px, di colore grigio (lo stesso del livello dark_sq)
dopo ciò dovrò allineare alcuni elementi perchè la barra sembra spostata,
devo spostarla di 1px verso l’alto (la larghezza del mio spessore) in modo da allinearla bene.
Il modo pią semplice per spostare gli oggetti in spazi ridotti è l’utilizzo del nudging, per spostare la barra pią in alto di 1px selezionare lo strumento sposta (V)
e premi la freccia in alto sulla tastiera.
Suggerimento!
con lo strumento sposta selezionato e premendo i tasti freccia puoi muovere gli elementi (I livelli selezionati o i gruppi) di 1px in tutte le direzioni
Questo è il risultato, non male vero?
Bene, diamo un pò di vita al nostro template, verifichiamo di avere abbastanza caffé e procediamo. Non dimenticarti di salvare (Ctrl + S)
Io ho scelto una sempre popolare farfalla per il mio progetto; voi potete scegliere diversamente; questo è lasciato alla vostra discrezione.
Ok, cominciamo a lavorare su un’immagine (o almeno su una parte di essa) nella vostra intestazione.
Qui arriva la parte difficile: voi avete bisogno della foto di qualcosa, ma non avete un bummer?
Io ho un vasto assortimento di cd di foto, che ho acquistato negli anni, cosŹ per me è semplice ottenere le immagini di cui ho bisogno, ma guardiamo in faccia la realt , voi non comprerete assortimenti di foto a meno che non facciate a living designing stuff?
Buoni assortimenti di foto costano un sacco di soldi, cosŹ noi useremo quelli gratuiti.
Secondo me uno dei migliori assortimenti di gallerie fotografiche è stock.xchng http://www.sxc.hu, che è il sito da cui ho preso l’immagine della farfallla che ho ascelto di usare.
(attenzione! Per avere l’immagine a grandezza naturale è necessario un account, quindi registratevi, è semplice e gratuito).
Ok, ora che avete la foto, vorrete inserirla nel vostro progetto, quindi aprite l’immagine in Photoshop: File > Apri (Ctrl + O)
Come potete vedere alcune foto sono abbastanza grandi; la farfalla, per esempio, è
1147 x 1001 pixels, troppo grande. Io ridurrò la grandezza ad una larghezza di 400px selezionando Immagine > Dimensione Immagine
c
Ok, ora dobbiamo portare la foto nel nostro template: prima selezionate l’intera area andando su Selezione > Tutto (Ctrl + A), poi copiatela andando su Modifica > Copia (Ctrl +C). Ora potete chiudere (non è necessario salvare) e tornare indietro al template. Create un altro livello, e chiamatelo logo.
Assicuratevi che sia in cima al meną e che sia selezionato; il vostro meną dovrebbe apparire pią o meno come questo.
Ora incollate l’immagine della vostra farfalla, andando su Modifica > Incolla (Ctrl + V): bene, ora che abbiamo un’immagine dobbiamo eliminare tutte le cose non necessarie, cosŹ da rimanere soltanto con la farfalla. Ci sono molti modi di fare questo: potete usare le maschere, la gomma, ecc.
Io userò lo Strumento Lazo Magnetico, per selezionarla e poi eliminare il resto.
Prendete il lazo, e cominciate a selezionare il contorno della vostra farfalla: cliccate da qualche parte sul bordo e trascinate lo strumento tutto intorno alla farfalla, tenendovi vicino al margine, e lasciando fare al lazo il proprio lavoro; esso si chiuder automaticamente; se non dovesse farlo cliccate nel punto che la calamita non ha auto catturato: è abbastanza semplice, si tratta solo di capirlo.
La mia selezione appare cosŹ:
Ok, ora per eliminare tutto ad eccezione della farfalla, invertite la selezione andando su Selezione > Inversa (Shift + Ctrl + I); una volta fatto questo cliccate su Cancella, poi andate su Selezione > Deseleziona (Ctrl + D). Bingo! Qui c’è la vostra farfalla! Ora dobbiamo sistemare la grandezza e la posizione; io metterò la mia nell’angolo in alto a sinistra, voi dove volete.
Ok, per spostare gli oggetti intorno, tutto quello che dovete fare è selezionare lo strumento Sposta, selezionare il livello che volete spostare e tenendo premuto il pulsante sinistro del mouse trascinarlo dove volete.
Per ridimensionare un livello o un insieme di livelli, prima selezionatelo/i, poi andate su Modifica > Trasformazione libera (Ctrl +T): lo strumento trasforma vi consentir di ridimensionarlo/i e ruotarlo/i.
Per ridimensionare cliccate su un angolo della sua selezione e trascinatelo dentro o fuori.
Per ridimensionare qualcosa e mantenere le sue proporzioni tenete premuto Shift mentre ridimensionate.
Se non lo fate.. rischiate di distorcere l’immagine.
Ora, usando gli strumenti Sposta e Trasforma ridimensionate e spostate la vostra farfalla dove vi piace di pią; la mia è cosŹ:
Ora aggiungerò un po’ di stili:
Ombra esterna, Ombra interna, Bagliore esterno con le seguenti impostazioni:
Dovreste provare a sperimentare stili diversi per ottenere il risultato che volete, o potete anche lasciarla semplicemente com’è; il mio risultato finale è questo:
Ora potrebbe essere una buona cosa salvare (Ctrl + S)
Ok, realizziamo un veloce logo; non farò niente di particolare; questo tutorial sta andando per le lunghe; aggiungerò semplicemente del testo con lo strumento Testo Orizzontale (T).
Poi selezionate il carattere, la grandezza e il colore usando il menu in alto
Poi cliccate nel punto dove volete che appaia il testo e digitate; dopo che avete fatto questo cliccate sul segno di spunta in alto
than I have set the blending mode to Difference so that some of the white squares are visible on the text and I have set the blending mode of my butterfly layer to Hard Light
Poi io ho settato le Opzioni di Fusione a śDifferenza” cosŹ che alcuni riquadri bianchi siano visibili sul testo e l’opzione di fusione del livello della mia farfalla a śLuce intensa”.
Il risultato finale dovrebbe apparire cosŹ:
Ok, adesso salviamo (Ctrl + S) e passiamo ad un’altra parte del template
Ok abbiamo bisogno di qualcosa alla destra del template, cosŹ i moduli avranno un posto dove andare.
Farò una semplice forma, niente di che, voglio che ad occhio sia costante,
comincio con il creare un nuovo set di livelli, poi creo un nuovo livello, il mio l'ho chiamato (right_bck).
Il mio livello ora appare cosŹ
ok scegliamo lo Strumento Polygonal Lasso (L) e, usando le giude per aiutarci, facciamo la selezione (forma)
premere il tasto shift per costringere il suo moto ad andar dritto e 45 deg. linee,
ecco la selezione che ho fatto, notare il leggero angolo a 45° in alto,
potresti fare un rettangolo se vuoi, io volevo solo pią dettagli
ok ora che hai un'area definita, assicurati di avere il livello di destra selezionato,
poi prendi lo Strumento Paint Bucket (G) e riempilo con il colore che desideri.
Una volta fatto, puoi deselezionare (Ctrl +D) e aggiungere uno Stile al Bordo,
io uso 1px grigio scuro. Una volta fatto il risultato è questo
ora sarebbe una buona idea salvare (Ctrl + S), qualcuno direbbe che sta andando sempre meglio ma abbiamo ancora bisogno di un footer a destra? ok facciamo un altro set di livelli, chiamamolo footer, e
in esso creiamo un altro layer (footer_bck)
ora prendiamo lo Strumento Rectangular Marquee (M) e selezioniamo un'area per il nostro footer, facciamolo alto quanto vogliamo, poi riempiamolo con un colore solido o un gradiente, la scelta sta a te.
Io ho usato il gradiente con bianco e arancione, come il mio livello (nav_bar),
poi ci ho aggiunto un bordo da 1px grigio scuro, ecco il risultato
Ok ora appare come un template, ma voglio aggiungere ancora un po' di dettagli, prima di passare alla parte del taglio, perciò andiamo avanti e salviamo (Ctrl +S).
Dunque alcuni potrebbero pensare che il template sia gi fatto, potrebbe essere cosŹ,
potremmo fare in resto con il css pią avanti, ma voglio aggiungerci alcuni dettagli.
Cominciamo con il creare un nuovo livello nel nostro set left e chiamiamolo (mod_bck)
questo sar il background dei titoli dei moduli (e.g. Menu Principale, Login Form etc.)
Ora prendiamo lo Strumento Rectangular Marquee (M)
e selezioniamo un'area rettangolare alta quanto vogliamo, sul lato sinistro cosŹ
Ora decidiamo cosa farne, io ho scelto di aggiungere un gradiente dal verde al bianco,
cosŹ riprende l'header, tu puoi scegliere diversamente un colore solido o nulla, se vuoi un gradiente basta impostare i colori davanti e dietro,
poi prendi lo Strumento Gradient (G) e riempi il tuo livello (mod_bcsk). Nel mio caso ecco la selezione, nota che ho cominciato un po' sopra alla selezione e ho continuato un po' sotto,
una volta fatto questo, deseleziona (Ctrl + D). Ecco cosa ottieni
SŹ, so che sembra un po' fuori di luogo cosŹ com’è, ma sono sicuro che hai dato uno sguardo al template, e non era cosŹ giusto? Bene, faremo il resto quando arriviamo alla parte di codificazione del tutorial, perciò andiamo avanti e salviamo (Ctrl + S)
Ok ora ciò di cui abbiamo bisogno è un'area per il nostro contenuto principale, giusto? Sebbene potremmo lasciarlo com’è, mi sembra abbastanza buono, ci darei un tocco in pią, dopo tutti sei qui per imparare!
Ok, iniziamo creando un nuovo gruppo di livelli
Gli darò un mio nome (main_cnt), quindi creeremo un nuovo livello all'interno del gruppo, il mio sar (cnt_bck)
ora prendiamo lo Strumento Rectangular Marquee e selezioniamo l'area di contenuti principale quindi lo riempiamo di un colore uniforme o con un gradiente, scegliete quello che ritenete idoneo, io prenderò un gradiente, dal bianco ad un grigio chiaro, qui vedete come il tutto compare alla fine
carino no? , bene è gi sufficiente per essere un template ma aspettate, gli aggiungiamo un'altra piccola cosa, |dato che abbiamo quella farfalla lŹ ne metteremo un'altra in basso alla pagina; ok andiamo avanti dopo aver salvato il nostro lavoro (Ctrl + S)
Ora avremo bisogno di una variazione della farfalla da mettere in basso dell'area dei contenuti, quindi andiamo avanti e prendiamo una @ sxc http://sxc.hu/browse.phtml?f=view&id=139603
L'avete? , bene, allora apriamola in Photoshop, quindi ridimensioniamola affinchè abbia una larghezza di 400
quindi prendete il vostro Strumento Rectangular Marquee e selezioniamolo all'incirca come in questo caso quindi copiatela Edit > Copy (Ctrl +C), ora chiudete questo documento e ritornate al template una volta lŹ incollate la vostra farfalla nell'insieme livelli (main_cnt)
Ora utilizzado lo Strumento Magnetic Lasso contornate la farfalla di modo da poter cancellare qualsiasi altra cosa, allo stesso modo in cui abbiamo fatto per la farfalla nell'intestazione, e se non vi ricordate come fare, semplicemente rivedete un po' i vostri passaggi, ok questo è quello che otteniamo
Quanto grande è? Bene utilizzando lo strumento Free Transform la ridimensioniamo e la sposteremo per poi spostarla nella posizione in cui deve stare, qui vedete il mio risultato
ok ora diamogli un po' di stile, gli aggiungerò un po' di outer glow (incandescenza esterna) per enfatizzarla un po'
Ora imposterò la modalit Blending suHard Light, e sposterò il livello di riempimento a 25%
di modo che la farfalla sia in qualche modo trasparente, questo perchè avremo bisogno di scriverci sopra in molti casi, e sar logico poter vedere il testo (contenuto) sopra di essa.
Ora apparir una cosa del genere
Ok non perdiamo tempo, quindi andiamo avanti e salviamo (Ctrl + S)
Ok, cercherò di spiegarvi la procedura di slicing (sezionamento, N.d.T.), ci sono molti modi differenti di suddividere un'immagine di Photoshop ma per questo tutorial tratteremo solo le basi, di modo che possiate avere un'idea di cosa esso fa; per questo particolare template useremo solamente 12 immagini, (sŹ ho detto 12) date un'occhiata allo screenshot
guardate i differenti colori con i numeri corrispondenti, essi sono semplicemente le parti del nostro documento che utilizzeremo per costruire il template, quindi dovremo esportali in un formato gestibile via web come .gif, .png o .jpg; adesso dunque entrano in gioco il cosidetto slicing, utilizzeremo gli slice per selezionare la parti di cui necessitiamo e che dovranno essere quindi salvate per il web, quindi Photoshop creer le immagini necessarie per noi.
Ok facciamolo, spiegherò tutto; per prima cosa dovremo impostare le guidelinea per aiutarci nella parte dello slicing, quindi avremo bisogno di creare lo stesso slice, proseguiamo ed impostiamo la nostra prima guidalinea dalla parte sinistra del template di modo da evidenziarla, il tutto (il bordo grigio scuro) in questo modo
quindi facciamo lo stesso per ottenere il logo (farfalla e testo), quindi proseguiamo con la barra di navigazione, di modo che sia tutto separato nei propri rettangoli in questo modo
ora avremo bisogno della parte verde gradiente della nostra intestazione, ma dato che abbiamo quei riquadri bianchi su di esso, un nostro template avr una larghezza variabile, e quindi questa parte necessiter di blocchi ripetuti, esistono in Photoshop degli strumenti speciali per la suddivisione ma non li tratteremo in questo tutorial, quindi utilizzeremo lo screenshot per avere una guida, studiatelo com'è fatto e fate lo stesso
ora avremo bisogno di una per separare la parte destra dal resto, fatela in modo che essa evidenzi il bordo in grigio scuro
quindi impostiamo alcune guide per lo sfondo del modulo titolo in questo modo
ora impostiamo due ulteriori guide orizzontali di modo che possiate facilmente selezionare, nella parte destra e sinistra
quindi un'ulteriore per il footer, fatela in modo che sia appena oltre il bordo esterno del contorno pią scuro
ok, ora abbiamo impostato 3 guide principali, una per ripulire la farfalla in basso e una nel mezzo, di modo da essere in grado di selezionare la barra di navigazione, lo sfondo principale, edla patre in basso (footer).
Ora con tutte le vostre guidelinea prendete il vostro Strumento Slice (K)
quindi disegnate tutte le parti necessarie, assicuratevi di avere lo snap impostato su ON: View > Snap (Shift + Ctrl + ; ) una volta fatto questo dovrete avere qualcosa del genere (da notare che ho nascosto le guide e le sezioni auto generate, di modo che possiate vedere meglio)
Ok il prossimo passaggio dovr essere quello di nominare le sezioni, non è strettamente necessario ma può rendervi la vita pią semplice per capire di quale immagine si tratta quando passeremo la parte di codifica, io, presonalmente, preferisco fare cosŹ, e dato che abbiamo solamente 12 immagini non è un gran lavoro, quindi se avete deciso di fare questo prendete il vostro Strumento Slice Select (K) quindi un doppio click sul numero di slice (sezioni), quindi apriremo un nuovo menu, in cui avrete la possibilit di nominarlo facendo in modo che i nomi non abbiano spazi ma casomai il carattere di underscore (sottolineatura, N.d.t.)
Ok ora che avete rinominato le sezioni, potrebbe essere un buon momento per salvare (Ctrl +S) Ok ora andiamo avanti e salviamo per il web,
Avendo pią funzioni, Photoshop offre un ordine esteso di attrezzi, impostazioni diverse di colore, e scelte innumerevoli, ma questo non è compreso nel tutorial, io sto usando solo una gif a 256 colori, e dal momento che ho solamente alcune immagini, la grandezza totale sar probabilmente di circa 100kb
Ok per salvare per il web vai su File > Salva per Web (Alt + Shift + Ctrl + S) , questo ti La porter ad un altro menu, usa le impostazioni che ho messo (nota: la gif a 256 colori non è incluso nell’impostazione standard) perciò dovrai fare a mano
ok una volta fatto tutto con le impostazioni di colore, salva in qualche posto in cui lo puoi trovare facilmente, Photoshop produrr tutti gli archivi necessari, un archivio di html ed una cartella (images di defualt)
Per ora ciò conclude questa parte del tutorial, noi abbiamo tutte le grafiche, adesso è ora di metterle tutte insieme per fare una maschera, perciò per ora chiudiamo Photoshop e
cominciamo.
Prima di cominciare a mettere insieme la nostra maschera, abbiamo bisogno di un modo di guardare al processo di disegno. Ci sono due modi per questo, uno sarebbe farlo su un server remoto, il secondo sarebbe avere una copia locale installata e usarla per lo sviluppo. Io preferisco fare localmente il mio lavoro di disegno e poi caricarlo sul server ed è quello che farò in questo tutorial.
Ok pronto? Cominciamo con l'installazione una copia di uno Strumento meraviglioso di Mambo Stand Alone Server creato da www.mambosolutions.com ne puoi trovare una copia su
http://mosforge.net/projects/msas / questo ti permetter di far andare localmente mambo.
ok ora che abbiamo installato MSAS, lo mettiamo sul disco C in una cartella di MSAS. Ora avviamo Dreamweaver ed arriviamo a lui. Ecco un screenshot di come apare la mia area di lavoro
Il tuo molto probabilmente è diverso dal mio, ognuno ha il proprio metodo, io non posso insegnarti come sistemare la tua area di lavoro o le preferenze, questi sarebbero temi estremamente estesi, perciò dovrai trovarti il tuo sistema, io non posso dirti quali scorciatoie usare, come ho cambiato le mie preferenze e probabilmente non saranno uguali alla tue impostazioni, cosŹ se hai difficolt , nel trovare le cose, ti suggerirei di leggere un po' della documentazione inclusa, se non sai dov'è, premi F1 sulla tua tastiera :
-)
Ok, cominciamo con le basi, cominciamo col creare un nuovo luogo (se non ne hai ancora uno) Ecco comeŚ vai su Sito > Nuovo Sito nel menu di Definizione del sito, scegli Basic poi dai un nome al sito, io lo chiamo my_template, poi clicca su Avanti, scegli sŹ per la tecnologia server e PHP MySql. Vai Avanti. Qui scelgi la prima opzione śEseguendo modifiche e prove localmente”, poi scegli una cartella per immagazzinare i tuoi file, preferibilmente nella stessa cartella in cui hai salvato il file di Photoshop e le immagini tagliate, ti render la vita pią semplice. Per la root vai su http://localhost/mambo45 a meno
che tu non abbia cambiato qualche cosa in MSAS. Clicca su Avanti, qui scelgi SŹ, voglio utilizzare un server remoto e vai avanti.
Scegli come connetterti al server remoto, io sto scegliendo Locale/Rete, poi ho bisogno puntare a dove carico i miei file, se vuoi puoi puntare alla tua installazione di mambo, cartelle del template, nel mio caso è C:MSASdiskwwwwmambo45templates
Se stai facendo da remoto, seleziona FTP e compila con il tuo Server e le informazioni del tuo login, per la cartella usa il tuo /mambo_instal_dir/templates/
(es. /public_html/demo/templates/ or /httpdocs/demo/templates/) una volta fatto clicca su Avanti seleziona No per il check in e out,
(è utile solamente se hai bisogno di monitorare quello che stai facendo tu o il tuo dev team) clicca su Avanti, ora riguarda le tue informazioni e clicca su Fine se ti sembra tutto corretto.
Bene, cosŹ ora abbiamo il sito, cominciamo a farne lo scheletro del template. Avrai bisogo di una cartella che avr lo stesso nome del tuo template, poi in essa avrai bisogno di due cartelle (css) e (iamges) Sul menu del tuo sito, vai su File> Nuova Cartella e dalle il nome del tuo template (my_template) poi in essa crea un'altra cartella, la chiami css,
poi puoi trascinare le immagini della cartella nella cartella (my_template), o copiarle, poi creare 2 nuovi file nella directory principale
vai su File> Nuovo e creane uno chiamato templateDetails.xml, ed index.php, poi fanne un altro all'interno della cartella css chiamato template_css.css
quando fatto tutto la tua struttura apparire cosŹ
Ok ora noi abbiamo la nostra struttura base e tutte le immagini, possiamo iniziare con il codice.
Prima di tutto prendi questo codice e inseriscilo nel file templateDetails.xml Il codice è abbastanza chiaro, modificalo in base alle tue esigenze
Suggerimento!
i nomi dei file devono essere inseriti in questo file se si desidera distribuire il template o lo si vuole installare con l’installer, assicurati che I file corrispondano a quelli delle immagini che stai utilizzando
my_template
06/20/2004
allmambo
Crew
GPL
templates@allmambo.com
www.allmambo.com
1.0
template used in the MOS Template 101
tutorial
index.php
template_thumbnail.png
images/butterfly.gif
images/designed_by.gif
images/footer_bck.gif
images/left_bck.gif
images/logo.gif
images/main_bck.gif
images/mod_title.gif
images/path_left.gif
images/path_right.gif
images/path_var.gif
images/powered_by.gif
images/right_bck.gif
images/top_left.gif
images/top_var.gif
css/template_css.css
Ed ora il codice del css,
prendi il codice sottostante ed incollalo nel tuo file template_css.css
/* for modifying {moscode} output. Don't set the colour! */
.moscode {
background-color:
#f0f0f0;
}
/* Text passed with mosmsg url parameter */
.message {
font-weight:
bold;
font-size : 10pt;
color : #ff6600;
text-align:
center;
}
ora prendi il codice sottostante ed inseriscilo nel tuo file index.php
"; ?>
<?php echo ; ?>
/>
include
("editor/editor.php" );
initEditor();
}
?>
type="text/css" />
Fatto? perfetto, ora possiamo inserire alcune cose all’interno del file index.php,
Per prima cosa assicurati di aver selezionato index.php, vai nel meną di inserimento,
Window > Insert (Ctrl + F2) e premi il bottone di inserimento di una tabella, cosŹ
ora dovresti vedere un meną come questo, inserisci le stesse cose che ho scritto io,
Sto scegliendo una larghezza di 95% cosicchè la pagina non sia completamente riempita, puoi scegliere differentemente.
Poi con la tabella selezionata, lo sar di default, se non lo è seleziona uno dei bordi,next with the table selected, it will be by default, apri il pannello delle propriet , io ho il mio in fondo alla pagina Window > Properties (Ctrl + F2) e imposta la tabella in modo che compaia centrata
ora seleziona la cella sinistra della tabella che abbiamo creato
ora vai nel meną di inserimento e premi sul bottone Inserisci Immagine
quindi inserisci l’immagine top left, o come l’hai chiamata,
usa Relativo a: Documento
ora, con la cella ancora selezionata, imposta la larghezza della cella alla stessa dimensione dell’immagine, nel mio caso 151 px, scrivi 151, l’altezza puoi lasciarla vuota
ora seleziona la cella destra, nel pannello delle propriet seleziona Vert Top, che vuol dire allinea tutto ciò che sta dentro in alto.
fatto questo inserire al suo interno due tabelle entrambe di 100%, la prima di due colonne, la terza di 3
colonne in modo che il vostro layout sia cosŹ
ora inserire l’immagine del logo nella tabella in alto nella cella di sinistra, poi impostare la larghezza di quella cella con la stessa larghezza dell’immagine, che nel mio caso, è di 297 px.
ora creare il background della cella di destra, per fare ciò selezionare la cella e nel pannello delle propriet selezionare la cella Bg background UR, e selezionare l’immagine desiderata, nel mio caso si chiama top_var.gif,
fatto tutto dovrebbe apparire qualcosa simile a questa immagine
la prossima cosa da fare è l’immafine per il pathway, se fai qualcosa simile a quello che ho fatto io con Photoshop dovresti avere 3 immagini, sinistra, variabile (qualcosa che possa essere allungato) e destra.
Andiamo avanti e mettiamole dove devono essere messe, ricordati di assegnare un valore alla larghezza delle celle che si desidera rimangano sempre alla stessa larghezza all’interno della pagina, questo è molto importante se si desidera che il template non sembri tutto rotto e scomposto.
Aggiungere altre due tabelle alla pagina, entrambe di 95% e centrate, con 3 colonne, ona sar la tabella del contenuto, l’altra sar per il footer (o piè di pagina).
Creare la prima tabella in modo che le celle siano posizionate in alto al centro, ed inserire la larghezza
fissa per la spalla sinistra e per quella destra, creare la larghezza identica a quella del background, le mie sono entrambe di 151 px, la cella centrale rimarr vuota (nessun valore vuol dire che la cella verr ridimensionata in modo da adattarsi alla larghezza della finestra del browser)
La tabella del footer non è un grande problema poichè gli inserirò due immagini, una per il powered by e l’altra per il made by sulla sinistra e sulla destra cosŹ ho bisogno di 3 colonne, potresti averne bisogno solo di una, dipende da quello che desideri fare in esso
Alla fine dovresti avere qualcosa di simile a questo
ora inseriamo le immagini di sfondo per le celle di sinistra e di destra, poi inseriamo le immagini del footer nelle loro posizioni e mettiamo lo sfondo desiderato alla cella
Al termien di queste operazioni si dovrebbe avere qualcosa di simile a questo
Prima di inserire il contenuto di MOS all’interno della pagina dobbiamo eseguire ancora alcune operazioni Prima di tutto dobbiamo inserire le class del css alla cella centrale del contenuto
per fare questa operazioen bisogna dividere lo schermo tra codice e immagine
questo ci consentir di vedere sia il codice che la pagina, quando si seleziona la cella nell’immagine, il codice viene selezionato, aggiungere questo codice nella vista del codice
tag, (class=”content”) in modo che il codice appaia cosŹ
ora che abbiamo fatto questo inseriamo un’altra tabella nella cella del content, la creo di larghezza 98%
con una colonna ed una riga e deve essere impostata in modo da essere allineata al top, poi aggiungere la class alla tabella (class=”content”) deve trovarsi nel tag
tag cosŹ
assicurati di aver selezionato la tabella giusta :-)
ora selezionare l’intera tabella in cui i moduli destra, sinistra e contenuto sono inseriti e assegnargli la class (class=”100”) in modo che il codic esia cosŹ
align="center" cellpadding="0" cellspacing="0" class="100"> Ora che abbiamo la struttura di base è arrivato il momento di riempirla con i contenuti, ma prima di cominciare aggiungiamo delle class al file css, ti ricordi che le abbiamo definite per le celle dei contenuti e per le tabelle?
Ora è arrivato il momento di aggiungerle nel template_css.css, andiamo avanti ed apriamolo.
Una volta aperto aggiungiamo queste tre righe di codice.
table.100 {
height:
1%;
}
table.content {
background-image:
url(../images/butterfly.gif);
background-repeat:
no-repeat;
background-position: right bottom;
height:
100%;
padding-top:
20px;
}
td.content {
background-image:
url(../images/main_bck.gif);
background-repeat:
repeat-x;
background-position: left bottom;
}
La prima table.100 ha l’altezza di 1%, è necessario che la tabella abbia un valore dell’altezza definito perchè ci serve per allineare la farfalla
table.content conterr l’immagine della farfalla che voglio inserire in fondo a ciascuna pagina, cosŹ è necessario associare l’immagine corretta che, nel mio caso, è butterfly.gif,
il tag height 100% è necessario affinchè la farfalla si trovi in fondo alla pagina, a meno che il contenuto superi la lunghezza della pagina.
td.content contiene l’immagine di sfondo, nel mio caso si tratta di main_bck.gif, è impostato per trovarsi in fondo alla pagina e ripetersi solo sull’asse x (orizzontalmente)
Una volta apportate le modifiche è possibile salvare il file template_css.css.
Fatto? perfetto, passiamo ad aggiungere i tag dei contenuti all’interno del template, iniziamo ad andare nella cella destra dove i moduli di sinistra dovranno essere caricati e scriviamo:
il codice completo dovr essere cosŹ:
Poi aggiungere queste due stringhe nella colonna di destra, dove dovranno essere caricati i moduli di destra
l’intero codice sar questo:
Fatto? Perfetto, dobbiamo inserire ancora un paio di cose ed abbiamo terminato, il path, ed il contenuto; esistono molti altri tag per MOS ma noi utilizzeremo solo quelli di base in questo tutorial.
Aggiungi questa stringa nella cella del path, nota che ho inserito anche una class per farlo
l’intero codice apparir cosŹ
Ora inseriamo il tag mainbody, all’interno della tabella contenuti
fatto ciò il codie dovr essere cosŹ
Questo è ciò che caricher all’interno del vostro template i contenutit, prima che tu possa fare un’anteprima del tuo template c’è ancora una cosa che è necessario fare,
Prima di tutto è necessario inserire alcune informazioni ai path delle immagini, in modo che MOS possa trovare le immagini del template, a seconda di dove esse si trovano.
Per fare ciò verificare che index.php sia selezionato nel meną del sito e poi andare in Edit > Find and Replace (Ctrl + F)
che aprir questo meną
utilizzare queste impostazioni e la ricerca deve aver impostato
images/
Da sostituire con:
/templates/my_template/images/
Assicurati che (my_template) sia il nome della cartella che stai utilizzando per il tuo template.
una volta che tutte le impostazioni sono state corrette premi il bottone sostituisci tutti e salva il file.
Ora sei pronto per vedere il tuo template funzionante, puoi caricare il tuo template sul tuo server locale o remoto e fare la preview.
E’ pią o meno tutto, il resto consiste nel modificare il CSS per adattarsi al meglio al tuo template, con I colori, le dimensioni ed i menu che desideri.
Esiste anche un altro tutorial che puoi trovare qui HERE
Per qualsiasi domanda non preoccuparti e falle,Iusa il forums,
Se trovi errori, o qualcosa che non è stato spiegato a sufficienza, fammelo sapere che sistemerò.
Puoi scaricare il template ed i file di Photoshop nell’area download.
Spero che tu abbia trovato utile questo tutorial e ti sia divertito quanto mi sia divertito io a scriverlo :-)
Buona fortuna e buona progettazione di template; la comunitò di Mambo non ne avr mai abbastanza.
Se ritieni che questo tutorial ti sia stato di aiuto e meriti qualche riconoscimento, prendi in considerazione l’ipotesi di una piccola donazione.