Olimpo Informatico

[rebelia]

edit by reb - questa discussione e' partita da qui

***

[Wolverine]

[rebelia]

[Wolverine]

[rebelia]

[Wolverine]

[rebelia]

spiegazione sulla gif animata: e' stato ampiamente provato che un qualsiasi elemento in movimento nella pagina disturba la vista periferica e la lettura, percio' si tende sempre piu' a limitare al massimo la quantita' di elementi in movimento in una pagina

la gif animata ci puo' stare e c'e' gia' anche un tutorial su come crearla, ma piazzarla addirittura nell'header e' un po' eccessivo... se proprio vuoi una gif animata, magari studiamo un posto meno invasivo

[Wolverine]

sei tu l'esperta

per me va bene....anche secome ti ho detto prima sto cercando di concentrarmi sulle altre pagine...quando ho ottenuto un lavoro presentabile passo allo skin

[rebelia]

[Wolverine]

Ciao reb...scusa il ritardo ma ultimamente sono pieno di impegni....ho scelto l'immagine Questa

[rebelia]

[rebelia]

dimenticavo!

vai qui e scegliti una font che ti piace

per avere un'idea del risultato finale, una volta scelto lo stile che preferisci, puoi inserire il testo che intendi realizzare nell'apposita box

quando hai scelto, posta il link

[Wolverine]

[rebelia]

ed ecco il tutorial:

ho creato l'header con gimp (io ho usato la versione 2.2.10)

nota: non conosco gimp e questo tutorial e' stata l'occasione per scoprirne le capacita'; e' molto probabile pero' che i passaggi non siano i migliori per ottenere il risultato desiderato (se qualcuno che legge ne conosce di piu' corti o efficaci, ben vengano le aggiunte)

per prima cosa ho recuperato un secondo font da qui e l'ho installato nel so assieme a quello scelto da te, quindi ho aperto gimp e ho proceduto come segue:

file -> nuovo -> larghezza 750 pixel + altezza 200 pixel

file -> salva immagine con nome e salvi nel formato di gimp; man mano che procedi con il lavoro, ogni tanto salva per evitare di perdere quanto fatto:



file -> apri -> apri la foto del cielo e quindi fai

modifica -> copia

torni sul file nuovo e fai livello -> nuovo livello [nome livello = cielo] -> ok

modifica -> incolla dentro (a questo punto puoi chiudere la foto originale del cielo)

immagine -> trasforma -> rifletti orizzontalmente

poi con lo strumento sposta livelli e selezioni (vedi immagine) la alzi un pochino fino a centrare la nuvola e la sposti verso destra in modo da recuperare dell'azzurro che servira' da sfondo per il testo



torna sull'immagine e seleziona strumenti -> strumenti di colore -> bilanciamento colore e imposti rosso -20 / verde -20 / blu +50 -> ok per togliere l'alone rosato e accentuare i blu e i bianchi



aggiungi un livello: file -> nuovo livello [nome livello = informazioni]
selezioni lo strumento testo e imposti i parametri scegliendo font, misura, colore (vedi immagine sotto)



con lo strumento sposta livelli e selezioni, sistema il testo in alto a sinistra come nell'immagine qui sotto:



crea un nuovo livello, ma stavolta modifica larghezza e altezza e fallo di colore bianco:



comparira' un rettangolo in alto a sinistra delll'immagine



sposto il rettangolo bianco in basso a destra rispetto alla scritta informazioni

seleziono lo strumento testo, imposto un colore azzurro simile al cielo, una misura di 55 pixel circa e il font andrew script e scrivo On-line all'interno del rettangolo bianco (uso l'azzurro perche' se ne resta traccia una volta rimosso, il colore si confonde con lo sfondo, mentre se usassi un colore contrastante si potrebbe notare)

scelgo lo strumento bacchetta magica (il quarto in alto a sinistra) e ? tenendo premuto il tasto ctrl ? seleziono le lettere una per una fino ad aver completato la scritta e rilascio il tasto ctrl

vado su modifica -> cancella (o in alternativa premo ctrl+k) e cancello quanto selezionato: in questo modo il testo On-line e' un ritaglio all'interno del rettangolo bianco

con lo strumento selezione rettangolare (il primo in alto a sinistra)

evidenzio le parti superflue di rettangolo bianco e lo elimino sempre con modifica -> cancella oppure ctrl+k; il risultato e' piu' o meno questo:



scelgo livello -> trasforma -> rotazione arbitraria, nella prima casella imposto -35 e premo ruota

scelgo lo strumento sposta selezione e sposto il rettangolo fino a coprire parte della scritta informazioni, con un risultato simile a questo:



ridimensiono la superficie dell'header portando l'altezza da 200 a 150 pixel; per farlo seleziono: immagine -> dimensione superficie e imposto i parametri in questo modo (attenzione a che i due parametri siano scollegati; eventualmente cliccare nel punto evidenziato dall'ellisse rossa):



a questo punto e' sufficiente salvare l'immagine per poterla utilizzare nel sito; per prima cosa salvala nel formato di gimp: questo ti permettera' di mantenere i livelli separati e di creare un nuovo header con eventuali piccoli cambiamenti che dovessero rendersi necessari in futuro; per ottenere il file jpeg invece e' necessario selezionare: file -> salva con nome -> scegli il formato jpeg -> esce un avviso che ti spiega come il formato jpeg non gestisca ne' la trasparenza ne' i livelli: premi esporta; ti comparira' un pannellino come quello sotto dove imposterai la compressione; hai la possibilita' di vedere l'anteprima (attivando la casellina della voce) e il peso finale del file:



***

spero sia piu' o meno tutto abbastanza chiaro, nel caso chiedi e ti spiego i punti piu' ostici

per l'utilizzo nel sito, ne parliamo di la' appena ho un attimo

[rebelia]

mi sono dimenticata di allegare il risultato finale

[Wolverine]

Scusa il ritardo ma in questi giorni mi sono potuto collegare solo di sfuggita...ma...sbaglio o hai fatto già tuto tu?
il tuo era solo un esempio giusto?Se no io che ci sto a fare qui?

edit:photoshop non andrebbe bene?Lo so che risulterebbe più complicato,il punto è che uso sempre quello e mi risparmierebbe tempo nello scaricare tutorial et similia

[rebelia]

[Wolverine]

adesso ci lavoro su e poi ti posto il risultato appena riesco ok?

[rebelia]