Quel background nascosto..

Scarica l'esempio

Scarica file

Da questa lezione vi fornisco solo i file di esempio per la realizzazione della stationery, ma per fare gli sfondi, vi organizzerete coi tutorial che abbiamo messo a disposizione o inventandone di nuovi.Personalmente faccio via via gli sfondi, man mano che realizzo nuove tag, perchè ritengo che ogni lavoro richieda il suo sfondo personalizzato. In questo tutorial, vedremo diverse cose nuove per poter finalmente arrivare al cuore di scrippy: i container e poter da parte vostra realizzare le prime vere stationery, mettendo a punto tutto quanto imparato finora.

1- Clicchiamo  su FIle New - Insert - background - browse e scegliete l'immagine dello sfondo che trovate nell'esempio

Nel quadratino scrolling scegliete Right + Up

2 - Insert Scrolling border - Left Border Scroll , ovvero lo scroll laterale. In browse scegliete la tag che vi ho messo come esempio e fate molta attenzione alla figura sotto e ai particolari che vi ho circondato. Sono i settaggi per far uscire la tag distanziata l'una dall'altra, mentre place over BG, ha chiaramente la funzione di porre lo spazio della tag, sopra allo sfondo, altrimenti resterebbe di un altro colore e starebbe decisamente male(provate a fare la prova con la spunta e senza per capire la differenza)

3 - Insert Container - Positioned container. Eccoci al cuore di scrippy. I container. Sono loro che fanno la differenza nelle stationery, permettendo di creare effetti, scroll, movimenti ecc. tutti coordinati e perfettamente in linea l'uno con l'altro senza far sovrapporre immagini e scritte.

Il container è in realtà un contenitore (come dice la parola stessa) che deve contenere delle cose, per cui bisogna capire prima di tutto cosa deve contenere e dove deve essere posto, per dare le giuste misure.

Chiaramente non esistono misure standard, come avrete capito, per cui occorre che facciate molta attenzione a queste prime lezioni dove li usiamo spiegandone le misure, in modo che capite, perche certe misure sono state poste in un modo piuttosto che in un altro.

Analizziamo quindi il "contenitore" nel caso specifico riferito alla stationery di esempio e ai file oggetto del presente tutorial. Prima di tutto guardate con attenzione la figura, e vedrete subito delle spunte a determinati settaggi, piuttosto che altri, ora cercando di tenere la figura sott'occhio, leggete le spiegazioni che vi daro' per i singoli settaggi..

Notate che la spunta è su Set left and right edges, cioè settiamo margine sinistro e destro. La misura di 450 non è casuale, ma determinata dall'ampiezza dell'immagine messa in scroll verticale, che è grande 399 (se aprite la tag in PSP potete vedere le dimensioni). Quindi mettiamo 450 per dare un po' di spazio tra l'inizio del container e lo scroll verticale della tag, in modo da far vedere anche lo sfondo in movimento della stationery. Il margine destro è settato a 25, per far in modo che il container non coincida con il finale dello sfondo della stationery, ma che lasci un po' di spazio. Piu' sotto abbiamo invece il settaggio del layout verticale, ovvero il contenitore vero e proprio, lo spazio che conterra' il nostro testo. Settiamo 50 dal margine superiore (top) per far in modo che ci sia distanza dall'inizio del bordo superiore, le distanze sono fondamentali, se vogliamo far vedere lo sfondo che abbiamo costruito. E mettiamo infine 10 dal bordo inferiore  . E' di fondamentale importanza capire come e cosa settare nei container, perche' a seconda di cosa spuntiamo e poniamo come valore, avremo poi rese differenti nelle stationery.

4 - Insert frame, cioè cornice. Ogni container deve essere " "contenuto" da una cornice. In questo caso ho scelto solid valore 10, colore #267E94 (che è quello predominante della stat).

Spendiamo due parole per il colore predominante della stationery. Dovete evitare per risultati armoniosi, troppi colori all'interno dei vostri lavori e mettere quindi colori che si possano integrare tra di loro e dare armonia nel contesto generale. In questo caso il colore predominante che ho scelto è proprio il #267E94. Per conoscere i codici, potete avvalervi dei numerosi programmini free che ci sono in rete, che permettono tramite "punta" del mouse di conoscere il codice html del colore scelto, oppure potete anche usare PSP, nella paletta colori. Io stessa uso spesso PSP, avendolo aperto mentre scrivo i tutorial.

5 - Insert background. Scegliamo nuovamente il file sfondo.jpg,dandogli questa volta pero' il movimento di scroll Up+ left.

6 - Insert background settato su Use the selected color (scegliamo bianco) e diamo la trasparenza a 50

Cerchiamo di capire perche' mettere due background. Per farlo prima di mettere il secondo con lo sfondo bianco, facciamo il preview della nostra stationery, tramite l'apposito pulsante di scrippy, e vedremo che lo sfondo delle rose poco si presta a essere usato come sfondo di scrittura, in maniera che questa resti chiara e leggibile. Per cui è opportuno ai fini della chiarezza inserire un secondo background che possa permettere attraverso l'uso di un colore solido, una maggiore leggibilità.

7 - Insert Message Area, coloriamo subito lo scrollbar con i due colori settati a #267E94. E cerchiamo di capire come settare i margini.Innanzitutto con il mouse "tiriamo l'area a sinistra in modo che combaci con l'inizio del'scc..e non sia dentro il contenitore. Questo è importante affinchè sia colorata anche la barra laterale di scroll della stat, presente sui monitor non troppo grandi.

L'area message in oggetto, avra' come sfondo, quello del background formato jpg, per cui risultera' forse un pochino disagevole scriverci, ma facendo preview sulla stationery, vedremo che invece la lettura sara' garantita proprio dal secondo background che abbiamo inserito colorato di bianco. Per le misure dovremo considerare che il margine sinistro del container è determinato dallo scroll laterale (+ un'aggiunta in eccesso).Abbiamo quindi un valore di 51determinato dalla differenza tra il valore del margine del container e lo scroll in larghezza, a cui aggiungeremo un 20/30 pixel per determinare il rientro del testo dentro l'area. Arriviamo quindi a un valore di 80 che metteremo uguale anche nel margine destro per centrare l'area

Bottom e Top non hanno grosse esigenze. Il Bottom puo' restare invariato, mentre il Top rechera' delle misure a piacere, a seconda di dove vogliamo far iniziare il nostro testo.

9 - Insert Options. Ecco l'altra grande novita' di questo tutorial. Fate molta attenzione a questo particolare, perche' è quello che vi permettera' di settare in maniera ottimale il vostro sfondo email in Oe. Senza l'uso di questo, dovrete in alternativa intervenire sui codici html, agendo sulla linguetta origine dell'email. Passaggio che pero' ritengo facile per chi sa maneggiare l'hmtl, avendo gia' fatto le stationery in tale formato, ma difficile e di ostica compresione a chi non le ha mai fatte.

Nel caso in oggetto potete settare la dimensione della vostra risoluzione, per essere sicuri che tutti gli oggetti contenuti nella stationery siano visibili a voi come agli altri, allo stesso modo. Ma cosa più importante ancora, potete fare in modo di settare il background color che è proprio quello che finira' nello sfondo email, quando aprirete il vostro scrippy salvato. In questo modo evitere che quando spedite l'email , si veda il bianco o altro colore inopportuno non adatto a quanto inserito nel contesto. Il colore inserito naturalmente è #267E94, sempre quello predominante in questo caso.

10 - Ultimi passaggi prima del risultato finale. Inseriamo loading message dandogli lo stesso colore solito #267E94 e il suono. Perche il loading anche se non lo desideriamo? Perche scrippy tende a mettere la scritta di loading message, specie nelle stationery piu' articolate e se ci dimentichiamo di inserirlo, scrippy lo mette di default bianco e quindi anche in questo caso occorre intervenire nella linguetta origine email per mettere a posto il codice di colore.Se prendiamo l'abitudine di metterlo, anche se con valore a zero, ci risparmiamo il passaggio in email. Non dimenticate il suono come già detto, perche' ogni stationery è completa solo con un suono, preferibilmente midi, per non appesantire troppo la posta e ..salvate come da prima lezione. Completate con il ticker come visto nella precedente lezione.

Il vostro scrippy è pronto. Provate a costruirlo prima coi miei file di esempio e poi a cambiare i file ed eventalmente anche le misure del container. Da questa lezione, salvate il file scc che vi serve eventualmente da spedirmi, se commettete degli errori nella compilazione.

Buon divertimento a tutti:-)

NB. : questa lezione non è adatta a chi apre per la prima volta scrippy