Home » Web Design » Photoshop » Creare un tema Web "Notti Magiche"

Creare un tema Web "Notti Magiche"

Prima di iniziare ecco in figura il risultato finale.

PASSO 1
Iniziamo! Non è un tutorial per principianti quindi è richiesta già una buona esperienza con Photoshop. Questo tema è stato pensato per un template WordPress, ma una volta fatto può essere convertito facilmente anche per altro.

Create un documento con le caratteristiche che vedete in figura.

PASSO 2
Disegnate delle linee guida e ponetele come sfondo. Aggiungete un gradiente radiale con blu e nero.

PASSO 3
Inserite delle nuvole, l’immagine potete prenderla anche da qui e modificate la modalità di miscelazione su Overlay. Allora andate su Layer>Layer Mask>Hide All e inserite un gradiente radiale dal bianco al nero.
Infine rendete un pò più scure le nuvole.


PASSO 4
Ora incollate questa bella immagine e chiamatela “skyline”, ora andate in Layer > Channel Mixer e selezionate Black & White with Blue Filter. Applicate quest’effetto su “skyline”. Infine cambiate la modalità di miscelazione su Overlay.

PASSO 5
Ora applicate Layer Mask Reval all sul livello Skyline.
Usate un pennello morbido nero per i bordi dell’immagine.

PASSO 6
Inserite la scritta Magic in Scrpitina Font. Seguite la figura per lo stile del livello.


PASSO 7
Adesso aggiungiamo delle stelle , utilizzando l’apposita opzione nel pennello. Seguite la figura per capire dove concetrare il vostro disegno e inserite un gradiente per rendere più luminoso l’effetto.

PASSO 8
Adesso usate il pennello con impostato 615 px di diametro e agginungete altre stelle in un’altro livello chiamato “Stars2”.

PASSO 9
Aggiungere altre stelle in “Stars 2” e applicate vari gradienti.

PASSO 10
Scaricate questo pennello (collegamento) perchè lo useremo più volte nel corso del tutorial. Selezionate quindi l’opzione nel pennello impostate 65x, applicare anche un Outer Glow per rendere più luminosa la stella.

PASSO 11
Con le stesse impostazioni della scritta “Magic” aggiungetene un’altra di nome “night”. Coloratela di giallo.

PASSO 12
Aggiungiamo altre nuvole prendendone il pennello da questo collegamento(link).
Adesso selezionate il numero del pennello 2464 e impostatelo su 960 px. Ora inserite le nuvole nel testo, e seguite la figura per eventuali dettagli. Importante l’inserimento di un livello sul quale poggiarle.

PASSO 13
Seguendo, aumentate la luminosità delle parti vicino le scritta.

PASSO 14
Aggiungete altre nuvole anche al di sopra della scritta “Magic Night” e create un’altro livello per ospitare queste nuvole. Illuminte anche qui le parti vicino il logo.

PASSO 15
Ripetete lo stesso passaggio. Ed inserite altre nuvole su quelle inserite nel passo 12. Abbiate cura per le zone in ombra a quelle in luce.

PASSO 16
Utilizzate una gomma per generare un’effetto di fade out per le nuvole.

PASSO 17
Questo è un passo critico e molto importante. Non dovete dimenticare che state curando la grafica di un sito web. Ora dovrete gestire l’interfaccia del sito. Utilizzare delle linee guida per facilitarvi il lavoro e scegliere bene come suddividere la pagina. Ora dovrete creare dei rettangoli di colore omogeneo per lo sfondo. Seguire la figura che vi faciliterà lo sviluppo.

PASSO 18
Creare un’altro rettangolo a lato, ma stavolta usare una tonalità più scura di blu.

PASSO 19
A questo punto aggiungiamo dei dettagli.
Copiate quest’immagine di una luna, ma rendiamola un pò gialla, così da renderla anch’essa sottoposta alla luce. Illuminiamone la sagoma.

PASSO 20
Aggiungete delle piccole nuvole nell’area vicino la luna.

PASSO 21
Visto che questa luna servirà come logo per l’RSS aggiungete il logo dell’RSS alla luna per generare un’effetto molto originale. Infine aggiungete una bella stella.

PASSO 22
Incollate quest’immagine per sviluppare la barra principale di navigazione.
Con Free Transform gestitela come preferite. Magari (come in figura) rendendola più originale.

PASSO 23
Per dare illusione che la pergamena sia anch’essa sottoposta alla luce curare un pò le ombre.

PASSO 24
Inserite un gradiente sul livello della pergamena con tanto di trama per migliorare l’effetto.

PASSO 25
Infine inserite un’ombra con l’apposito filtro.

PASSO 26
Aggiungete delle nuvole anche vicino la pergamena.Per il testo sulla pergamena utilizzate Georgia – Italic font.Potete anche aggiungere altri dettagli come delle stelle o sottolineature.

PASSO 27
In figura sono disponibili indicazioni per l’aggiunta di altri dettagli.

PASSO 28
Aggiungete del testo anche vicino al logo per RSS, in questo caso un più classico Arial – Regular andrà più che bene.

PASSO 29
Un dettaglio in più per il nostro sfondo potrebbe essere il pallone di una mongolfiera. Prendetela da quest’immagine. Aggiungete un livello e incollatelo su questo. Nello stile del livello impostate come Blend Mode Overlay e l’opacità al 100%.

PASSO 30
Utilizzate il pennello 615 e aggiungete altre stelle. Inoltre, create con il pennello anche un filo collegato alla base del palloncino.

PASSO 31
Possiamo aggiungere un posto. Prima di tutto creiamo un nuovo livello e chiamiamolo Post. Aggiungiamo anche dettagli in testo.

PASSO 32
Adesso aggiungiamo dettagli al post, nell’homepage ci saranno più post.Per le impostazioni del testo vi rimando alla figura. Poi inseriamo un’immagine ( 200×200 ) e mettiamola sulla sinistra, con il testo a destra. Alla destra del titolo inseriamo il numero dei commenti. In figura si può vedere come è stato curato il numero e la scritta “Comments” con l’aggiunta di stelle attorno il numero. Adesso aggiungiamo anche i tags con una piccola stella alla fine del rigo. Duplicate le impostazioni di tutto questo post per crearne di altri. Vedete in figura come viene.

PASSO 33
Ora lavoriamo sulla sidebar, la barra laterale. Dobbiamo creare un forum di ricerca, creiamo un nuovo livello e chiamiamolo “Sidebar” e all’interno di questo creiamo un’altro folder e chiamiamolo “Search”. Disegniamo delle nuvole come fatto in precedenza. Ora utilizzando lo strumento “Rounded Rectangel” disegnate un rettangolo oltre le nuvole. Per le impostazioni di quest’ultimo guardate in figura.

PASSO 34
Aggiungete delle stelle attorno le nuvole. ora duplicate il livello del pallone della mongolfiera fatto nel passo 29. Scriviamo la parola “Search” coloratela di un bel giallo e aggiungetele una stella. Ora inserite le istruzioni per la ricerca e il pulsante GO!.In figura le impostazioni per questi ultimi passaggi.

PASSO 35
La Sidebar è composta anche da altre parte, quella per la categorie, e per gli archivi, dove vengono conservati i vecchi post. Seguire la figura per vedere come curare questi ulteriori aggiunte, ma non sarà niente di nuovo rispetto a quando già fatto.

PASSO 36
Siamo molto vicini alla fine. Ora curiamo la parte bassa della sidebar. Prima di tutto utilizzamo l’effetto fade out. Ora inseriamo altre nuvole. Inseriamo anche delle stelle e duplichiamo il livello del passo 29. Salviamo tutto in un livello e chiamiamolo “Sidebar footer”.

PASSO 37
Infine lavoriamo sulla parte bassa della pagina, così da concludere. Come per la sidebar, lavoriamo per la sfumatura del rettangolo. Ora inseriamo più livelli di nuvole, cercando di ottenere un risultato simile a quello in figura. Una volta finito inseriamo tutto nel livello che chiameremo “footer”.

PASSO 38
Riempiamo il footer di stelle, illuminiamo tutto per bene. Utilizzate molto la vostra creatività, in figura c’è un bel risultato, cercate di avvicinarmi a questo.

Ora abbiamo concluso.

via : psdtuts.com

Panoramica privacy

Con il presente documento, ai sensi degli artt. 13 e 122 del D. Lgs. 196/2003 (“codice privacy”), nonché in base a quanto previsto dal Provvedimento generale del Garante privacy dell’8 maggio 2014, ISayBlog titolare del trattamento, fornisce gli utenti del sito alcune informazioni relative ai cookie utilizzati.

Cosa sono

Un “cookie” è un piccolo file di testo creato sul computer dell’utente nel momento in cui questo accede ad un determinato sito, con lo scopo di immagazzinare informazioni sulla visita, come la lingua preferita e altre impostazioni. Ciò può facilitare la visita successiva e aumentare l’utilità del sito. Per questo motivo i cookie svolgono un ruolo importante.

I cookie sono inviati al browser dell’utente (Internet Explorer, Mozilla Firefox, Google Chrome, ecc.) dal sito web visitato, in particolare dal server web (ovvero il computer sul quale è in esecuzione il sito web). Nel corso della navigazione l’utente potrebbe ricevere anche cookie di siti diversi (di “terze parti”), impostati direttamente da gestori di detti siti web e utilizzati per le finalità e secondo le modalità da questi definiti.

Tipologie di cookie utilizzati in questo sito web

Cookie del Titolare

Il sito utilizza solo cookie tecnici, rispetto ai quali, ai sensi dell’art. 122 del codice privacy e del Provvedimento del Garante dell’8 maggio 2014, non è richiesto alcun consenso da parte dell’interessato. Più precisamente il sito utilizza:

– cookie tecnici strettamente necessari per consentire la navigazione da parte dell’utente, di seguito indicati nel dettaglio

NOME COOKIE

SCADENZA

INFORMAZIONI

PHPSESSID

Al termine della sessione di navigazione

http://cookiepedia.co.uk/cookies/PHPSESSID

In assenza di tali cookie, il sito web non potrebbe funzionare correttamente.

– cookie tecnici che agevolano la navigazione dell’utente, di seguito indicati nel dettaglio

NOME COOKIE

SCADENZA

INFORMAZIONI

viewed_cookie_policy
(evita che l’informativa breve contenuta nel banner ricompaia nel caso di accettazione)

1 anno

http://cookiepedia.co.uk/cookies/viewed_cookie_policy

gads

1 anno

http://cookiepedia.co.uk/cookies/__gads

Cookie di terze parti

Attraverso il sito https://www.politicalive.com/ sono installati alcuni cookie di terze parti, anche profilanti, che si attivano cliccando “ok” sul banner.

Si riportano nel dettaglio i singoli cookie di terze parti, nonché i link attraverso i quali l’utente può ricevere maggiori informazioni e richiedere la disattivazione dei cookie.

Nielsen: https://priv-policy.imrworldwide.com/priv/browser/it/it/optout.htm

Triboo: https://cookie-siti-in-concessione.triboomedia.it/

Google Analytics

Il Sito utilizza Google Analytics. Si tratta di un servizio di analisi web fornito da Google Inc. (“Google”) che utilizza dei cookie che vengono depositati sul computer dell’utente per consentire analisi statistiche in forma aggregata in ordine all’utilizzo del sito web visitato.

I Dati generati da Google Analytics sono conservati da Google così come indicato nella Informativa reperibile al seguente link: https://developers.google.com/analytics/devguides/collection/analyticsjs/cookie-usage

Per consultare l’informativa privacy della società Google Inc., titolare autonomo del trattamento dei dati relativi al servizio Google Analytics, si rinvia al sito internet http://www.google.com/intl/en/analytics/privacyoverview.html

Al seguente link https://tools.google.com/dlpage/gaoptout è inoltre reso disponibile da Google il componente aggiuntivo del browser per la disattivazione di Google Analytics.

Monitoraggio conversioni di Google AdWords (Google Inc.)

E’ un servizio di statistiche fornito da Google Inc. che collega le azioni compiute dagli utenti di questo sito ai dati provenienti dal network di annunci Google AdWords.

Dati personali raccolti: cookie e dati di utilizzo.

Per maggiori informazioni: Privacy Policy

Pubblicità

Questi servizi consentono di utilizzare i dati dell’utente per finalità di comunicazione commerciale in diverse forme pubblicitarie, quali il banner, anche in relazione agli interessi dell’utente e potrebbero utilizzare Cookie per identificare l’utente al fine di visualizzare annunci pubblicitari personalizzati in base agli interessi e al comportamento dell’utente stesso, rilevati anche al di fuori di questo sito.

Per avere maggiori informazioni in merito, ti suggeriamo di verificare le informative privacy dei rispettivi servizi.

Social Buttons

I Social buttons sono quei particolari “pulsanti” presenti sul sito che raffigurano le icone di social network (esempio, Facebook e Twitter) e consentono agli utenti che stanno navigando di interagire con un “click” direttamente con i social network.

I social buttons utilizzati dal sito nella pagina “Contatti” e nel footer della pagina, nell’area dedicata alla pubblicazione dei dati societari, sono dei link che rinviano agli account del Titolare sui social network raffigurati. Tramite l’utilizzo di tali pulsanti non sono pertanto installati cookie di terze parti.

I social buttons utilizzati invece nella pagina “Blog” consentono al social network cui l’icona si riferisce di acquisisce i dati relativi alla visita. Tramite l’utilizzo di tali pulsanti sono pertanto installati cookie di terze parti, anche profilanti. Il sito non condivide però alcuna informazione di navigazione o dato dell’utente acquisiti attraverso il proprio sito con i social network accessibili grazie ai Social buttons.

Si riportano i link ove l’utente può prendere visione dell’informativa privacy relativa alla gestione dei dati da parte dei Social cui i pulsanti rinviano:

https://support.twitter.com/articles/20170519-uso-dei-cookie-e-di-altre-tecnologie-simili-da-parte-di-twitter

https://www.facebook.com/help/cookies

https://www.linkedin.com/legal/cookie_policy

Modalità del trattamento

Il trattamento viene effettuato con strumenti automatizzati dal Titolare. Non viene effettuata alcuna diffusione o comunicazione.

Conferimento dei dati

Fatta eccezione per i cookie tecnici, il conferimento dei dati è rimesso alla volontà dell’interessato che decida di navigare sul sito dopo aver preso visione dell’informativa breve contenuta nell’apposito banner e/o di usufruire dei servizi che richiedano l’installazione di cookie (così per la condivisione dei contenuti tramite Add This).
L’interessato può evitare l’installazione dei cookie mantenendo il banner (Astenendosi dal chiuderlo cliccando sul tasto “OK”) nonché attraverso apposite funzioni disponibili sul proprio browser.

Disabilitazione dei cookie

Fermo restando quanto sopra indicato in ordine ai cookie strettamente necessari alla navigazione, l’utente può eliminare gli altri cookie attraverso la funzionalità a tal fine messa a disposizione dal Titolare tramite la presente informativa oppure direttamente tramite il proprio browser.

Ciascun browser presenta procedure diverse per la gestione delle impostazioni. L’utente può ottenere istruzioni specifiche attraverso i link sottostanti.

Microsoft Windows Explorer

Google Chrome

Mozilla Firefox

Apple Safari

La disattivazione dei cookie di terze parti è inoltre possibile attraverso le modalità rese disponibili direttamente dalla società terza titolare per detto trattamento, come indicato ai link riportati nel paragrafo “cookie di terze parti”.

Per avere informazioni sui cookie archiviati sul proprio terminale e disattivarli singolarmente si rinvia al link: http://www.youronlinechoices.com/it/le-tue-scelte

Diritti dell’interessato

Art. 7 D. Lgs. 196/2003

1. L’interessato ha diritto di ottenere la conferma dell’esistenza o meno di dati personali che lo riguardano, anche se non ancora registrati, e la loro comunicazione in forma intelligibile.

2. L’interessato ha diritto di ottenere l’indicazione:

a) dell’origine dei dati personali;

b) delle finalità e modalità del trattamento;

c) della logica applicata in caso di trattamento effettuato con l’ausilio di strumenti elettronici;

d) degli estremi identificativi del titolare, dei responsabili e del rappresentante designato ai sensi dell’articolo 5, comma 2;

e) dei soggetti o delle categorie di soggetti ai quali i dati personali possono essere comunicati o che possono venirne a conoscenza in qualità di rappresentante designato nel territorio dello Stato, di responsabili o incaricati.

3. L’interessato ha diritto di ottenere:

a) l’aggiornamento, la rettificazione ovvero, quando vi ha interesse, l’integrazione dei dati;

b) la cancellazione, la trasformazione in forma anonima o il blocco dei dati trattati in violazione di legge, compresi quelli di cui non è necessaria la conservazione in relazione agli scopi per i quali i dati sono stati raccolti o successivamente trattati;

c) l’attestazione che le operazioni di cui alle lettere a) e b) sono state portate a conoscenza, anche per quanto riguarda il loro contenuto, di coloro ai quali i dati sono stati comunicati o diffusi, eccettuato il caso in cui tale adempimento si rivela impossibile o comporta un impiego di mezzi manifestamente sproporzionato rispetto al diritto tutelato.

4. L’interessato ha diritto di opporsi, in tutto o in parte:

a) per motivi legittimi al trattamento dei dati personali che lo riguardano, ancorché pertinenti allo scopo della raccolta;

b) al trattamento dei dati personali che lo riguardano a fini di invio di materiale pubblicitario o di vendita diretta o per il compimento di ricerche di mercato o di comunicazione commerciale.

Titolare

Il titolare del trattamento è ISayBlog