Tutorial Photoshop | WebDesign » Webdesign – Creare siti web

Creare siti web di Qualità – Terza Edizione

Andrea Leti — Thu, 12 Jan 2012 00:06:59 +0000

Sono felice di annunciarti che è stata messa online la terza edizione dello storico ebook “Creare siti Web di qualità” una vera guida alla progettazione di siti web che aiuta drasticamente, webdesigner principianti e non, grazie a concetti basilari quanto fondamentali a ridurre pesantemente il rischio di rifacimenti.

In questo ebook, dal design decisamente più cool rispetto alle prime due edizioni rivede tutti i concetti precedentente illustrati con un design desiso e qualche consiglio in più frutto di esperienze di vita vissuta di un webdesigner 365giorni all’anno.

Creare siti web di Qualità, non è solo un eBook!

Una guida operativa da tenere sempre sott’occhio per tutte le tue realizzazioni di siti web e i tuoi progetti.
Una guida step by step che ho chiamato “Big Map”.

Pagine di contenuti utilissimi e del tutto gratis per te che puoi scaricare a fondo pagina inserendo il tuo nome e la tua migliore email

Scarica l’ebook a fondo pagina!

Da Photoshop a Html – Creare una interfaccia di login

Andrea Leti — Wed, 28 Dec 2011 23:43:27 +0000

Nel precedente articolo abbiamo visto come realizzare una interfaccia grafica di login con un tutorial Photoshop.

Adesso però vediamo come puoi trasformare il tutto da photoshop a html.
Come sempre però a fine articolo NON sarà scaricabile. Questi tutorial sono per chi realmente vuole imparare e soprattutto per chi mi segue per farlo, appunto.

Regalare una risorsa cosi…”come fanno tutti”…non serve a niente, il web ne è pieno. Preferisco “imparare l’arte” mettendoti con le mani in pasta!

Dunque, bando alle ciance iniziamo.

Crea la struttura delle cartelle

Crea dove vuoi tu una cartella che conterrà il tutto con la seguente struttura (io ho creato una cartella in un sito di prova su Dreamweaver):

Quindi una cartella che si chiama “interfaccia” o “interfaccia login” e al proprio interno vi è:

una cartella css (che conterrà i file css e i font-face per il web)
una cartella images (che conterrà tutte le immagini)
il file html

Prendiamo l’occorrente da Photoshop

Per prima cosa apri il file psd dell’interfaccia grafica che hai realizzato qui (se non hai ancora fatto questo passaggio ti consiglio di farlo seguendo il tutorial per creare una interfaccia di login).

A questo file, tramite la palette dei livelli di photoshop, nascondiamo tutti i livelli tranne la forma dell’interfaccia e le due linee che fungono da divisori.

Se hai fatto tutto bene dovresti ritrovarti con qualcosa di molto simile a questo:

Nel mio caso questo file è 450×250 pixel e proseguirò il tutorial con queste dimensioni.

Salva il file come una png-24 con sfondo trasparente in nella cartella images.

ATTENZIONE

Per motivi pratici ho deciso di utilizzare questo metodo per lo sfondo.
Esiste anche un metodo interamente in css per creare questo sfondo e i separatori che richiedevano un supplemento di codice in più.

Ci tengo a precisare dunque che si può relizzare il tutto anche e solo interamente in css sfruttando un pattern satinato.

Prendiamo un font diverso dal solito

Per questo tutorial a differenza del tutorial grafico utilizzerò il font sansumi extrabold.
Scarica qui dal link qui sotto l’archivio con i font.

Clicca qui: Font Sansumi (14)

Finito il download scompatta l’archivio e salva tutto dentro la cartella css.

Crea il tuo file index.html

All’interno del file index.html scrivi fra e questo codice che definisce la struttura gerarchica del form:





Accesso Utenti








        
          
          Accesso Utenti

             
          Username
              
          

            
          Password
            
          

          
          
              Hai perso la password?

Il file style.css

A questo punto ecco il codice css che genera tutti gli effetti

/* CSS Document */

*{ margin:0; padding:0;}

#lightout{

	height:100%;
	background-color:#000;
	opacity:0.9;
	position:absolute;
	z-index:1;
	overflow:hidden;
	width:100%;

}

form#panel{
		z-index:2;
		width:450px;
		height:250px;
		position:relative;
		background-image:url(../images/sfondopanel.png);
		background-repeat:no-repeat;
		background-position:center;
		margin:150px auto;
}

form#panel h1{
	font-family:SansumiExtraBoldRegular, Tahoma, Geneva, sans-serif;
	font-size:34px;
	text-align:center;
	text-shadow: 0 4px 1px #000;
	-moz-text-shadow: 0 4px 1px #000;
	-webkit-text-shadow: 0 4px 1px #000;
	line-height:60px;
	color:#fff;
}

form#panel label{
	margin:15px auto;
	width:380px;
	font-family:SansumiExtraBoldRegular, Tahoma, Geneva, sans-serif;
	font-size:18px;
	text-align:left;
	text-shadow: 0 4px 1px #000;
	-moz-text-shadow: 0 4px 1px #000;
	-webkit-text-shadow: 0 4px 1px #000;
	line-height:30px;
	color:#fff;
	height:30px;
	clear:both !important;
	display:block;

}

form#panel label input{
	padding: 5px;
	height:20px;
	float:right;
	font-family:SansumiExtraBoldRegular, Tahoma, Geneva, sans-serif;
	font-size:18px;

}

form#panel p.lostpass{
	width:390px;
	margin:0 auto;
	text-align:right;

}

form#panel p.lostpass a{
	color:#999;
	font-family:SansumiExtraBoldRegular, Tahoma, Geneva, sans-serif;
	font-size:10px;
	text-decoration:none;

}

form#panel p.lostpass a:hover{
	color:#fff;
}

form#panel p.submit{
	clear:both;
	width:390px;
	overflow:hidden;
	margin:0 auto;
}

form#panel p.submit input[type=submit]{

		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		color:#fff;
		text-shadow:0 2px 1px #000;
		-moz-text-shadow:0 2px 1px #000;
		-webkit-text-shadow:0 2px 1px #000;
		background-color:#ff4e00;
		padding:5px 15px;
		float:right;
		font-family:SansumiExtraBoldRegular, Tahoma, Geneva, sans-serif;
		font-size:18px;
		border:none;
		margin:15px 0 0 0;
		display:block;
		box-shadow: 0 0px 8px #000;
		-moz-box-shadow: 0 0px 8px #000;
		-webkit-box-shadow: 0 0px 8px #000;
}

form#panel p.submit input[type=submit]:hover{
		background-color:#ff8a00;
		cursor:auto;
}

Il risultato lo conosci già. Clicca qui per vederlo live e poi lascia un tuo commento!

Alla prossima.

Crea una interfaccia di login – Tutorial Photoshop

Andrea Leti — Thu, 08 Dec 2011 01:56:44 +0000

Oggi in questo nuovo tutorial photoshop di webdesign, in formato testuale, vedrai come realizzare un layout per un pannello pop-up di login che sfrutta un’effetto grafico già visto sul blog: Effetto satin o satinato.

Innanzitutto apriamo il nostro documento e impostiamo le dimensioni del pop-up di login.

Essendo appunto un pannello che servirà esclusivamente a loggare gli utenti non abbiamo bisogno di un pannello enorme.

Per questo tutorial photoshop impostiamo il documento a 560px di larghezza e 360px di altezza.

Trascina le guide ai bordi del tuo documento come in questa figura:

Adesso: premi D per reimpostare i colori di base.

Attiva lo strumento rettangolo con angoli arrotondati, applica un raggio di 10px e crea un rettangolo orizzontale partendo dal vertice alto sinistro finendo al vertice basso destro.

Dovresti aver creato un rettangolo NERO con gli angoli arrotondati.

A questo punto seguendo gli stessi step del tutorial “Creare uno sfondo satinato” dobbiamo colorare il nostro rettangolo di un grigio scuro.

Quindi dalla palette dei colori che compare nella barra delle opzioni strumento dello strumento forma VEDI FIGURA:

seleziona il colore #353535. Un grigio abbastanza scuro e il colore del rettangolo cambierà.

Ora devi rasterizzare il livello. Clicca con il tasto destro sul livello forma e poi seleziona – Rasterizza livello.
Fatto questo, tieni premuto CTRL e fai un clic sull’immagine in miniatura, del livello stesso, per selezionare l’area del nostro pannello.

A questo punto applichiamo il filtro che genererà l’effetto satinato:

Dal menu: Filtro > Disturbo > Aggiungi Disturbo applichiamo quanto segue:

A questo punto la base del pannello pop-up di login è pronta. Adesso devi scegliere una linea di demarcazione fra la testata del pannello e gli oggetti del modulo.

Proprio su questa linea andrai a creare una forma linea di 1px di colore NERO. Una volta creata diplica la linea, spostala di un pixel verso il basso e colorala di un grigio #5d5d5d per ottenere un risultato simile a questo:

Adesso viene la parte piu interessante.

Con lo strumento Testo scrivi un testo che indica la funzione del pannello di pop-up. Per esempio accesso utenti.

Posiziona questa scritta, che utilizzerà un font che preferisci (per questo tutorial ho utilizzato PF BeauSans Pro), nella parte alta centrale del pannello. A questo testo, e a tutti i testi di colore bianco applica questi effetti:

Ovviamente per cambiare colore al testo basterà cambiare colore nella sovrapposizione colore.

Bene crea e posiziona i tuoi testi cosi.

Ora attiva lo strumento forma con angoli arrotondati e applicagli un raggio di 2px. Crea due rettangoli bianchi che andranno a formare i due campi di testo del pannello.

A questi due campi applica questi stili:

E infine posizionali rispettivamente per l’username e la password.

Infine crea un rettangolo per il tasto login, sovrapponi una sfumatira a piacere (io ho scelto una sfumatura di arancio) e applica la stessa ombra esterna applicata alle scritte.

Posiziona il rettangolo sotto la scritta Login ed il gioco è fatto!

Il risultato finale

Ecco invece una possibile simulazione sul mio stesso blog.

Sarei felice di ricevere un tuo commento!

Psicologia dei colori

Andrea Leti — Tue, 17 May 2011 01:24:19 +0000

[Aggiornato il 17 maggio 2011]

I colori nella vita hanno sempre dei significati molto importanti, per esempio il colore degli abiti che si indossano determinano lo stato di umore che si ha, oppure si può capire alcuni aspetti della persona conoscendo per esempio il suo colore preferito, in psicologia vengono attuati dei test per capire la personalità della persona.

I colori ci trasmettono effetti psicologici ed emotivi. Vediamo allora, in dettaglio, quali sono gli effetti trasmessi dai colori, per poter scegliere con maggiore consapevolezza i colori da utilizzare per le nostre pagine web.

Rosso

Colore della passione, dell’amore. In psicologia simboleggia calore, l’alimentazione ed è molto stimolante. Per molti un colore troppo aggressivo. Simbolizza anche il pericolo, il sangue, il fuoco e la violenza. Il Rosso è il primo colore dell’arcobaleno che i neonati imparano a riconoscere, il primo a cui tutti i popoli hanno dato un nome. Nell’arte paleocristiana rappresentava in concomitanza con il nero il demonio rosso Lucifero.

Arancione

Il Colore dell’accoglienza e dell’ospitalità è percepito come un colore vibrante ed è molto in voga per i siti web poiché simboleggia attenzione, ricerca e studio. Simbolizza inoltre la fiamma, il fuoco, la lussuria.

Giallo

Il colore del Sole simboleggia l’allegria, la felicità, la crescita e l’oro. Può anche simboleggiare disonestà, codardia, tradimento, gelosia, falsità, malattia e azzardo. Suscitando una sensazione d’espansione e spingendo al movimento, il giallo corrisponde ad una condizione di libertà e autosviluppo.

Verde

Simboleggia la natura, ambiente, vita, crescita, fortuna, gioventù, primavera, fertilità ma anche a putrefazione, acido e veleno. L’effetto di stabilità prodotto dal verde rappresenta, da un punto di vista psicologico, i valori saldi che non mutano. La scelta del verde indica inoltre autostima.

Blu

Simboleggia la calma, l’acqua, il cielo, l’armonia, la fiducia, la pulizia e la lealtà. Tristezza e depressione. Fissando a lungo questo colore si produce un effetto di quiete, soddisfazione ed armonia. Basti pensare ad un paesaggio col mare calmo.

Viola

Simboleggia regalità, spiritualità, passione ed amore.
Crudeltà, arroganza e pianto. Il viola inoltre è il colore della penitenza. Colore tradizionale della mistica, della spiritualità ma anche della fascinazione erotica, il viola indica l’unione degli opposti, la suggestionabilità.

Rosa

Simboleggia femmilità e gioventù. Il colore preferito dalla maggior parte delle donne di tutto il mondo comunica un messaggio di debolezza e ingenuità.

Bianco

Il colore della purezza. E’ sinonimo di pulizia, innocenza, spazio, castità, semplicità e pace.Ma anche morte (culture orientali), freddezza e sterilità.

Marrone

Simboleggia neutralità, terra e caldo. Sporcizia. Il forte bisogno, l’indifferenza o il rifiuto verso questa tinta indicano pertanto un preciso atteggiamento verso ciò che è corporeo e materiale e verso i piaceri fisici.

Nero

Associato a potere, eleganza, magia, mistero e notte. Simboleggia anche lutto e morte (culture occidentali), cattiveria, infelicità, tristezza, rimorso e rabbia. Oggi giorno è un colore molto apprezzato nella moda femminile per la sua caratteristica di far sembrare la persona più magra. Nell’arte paleocristiana rappresentava il demonio.

Grigio

Simboleggia neutralità, intelligenza, solidità, pulizia e qualcosa di moderno. Viene anche associato a maturità e tristezza. Lo si sceglie per definire una distanza ed un non coinvolgimento.

Un bravo graphic webdesigner deve tener conto anche di questo. Lo sapevi? E tu ne hai mai tenuto conto?
Dai vai a stravolgere i colori del tuo sito oppure lascia un commento.

Visualizzare uno sfondo dinamico ai siti web.

Andrea Leti — Tue, 21 Sep 2010 23:20:55 +0000

Oggi stavo pensando: Sui siti web non si capisce mai a che punto del giorno sei. E’ come se il tempo si fermasse!
Allora perchè non creare uno sfondo dinamico al nostro Blog o sito web?

I requisiti

Buona capacità di copia ed incolla!
Non guasta la conoscenza anche base del php.

La dinamica del procedimento

Per la realizzazione di questo effetto prima di tutto dobbiamo decidere quante frazioni orarie vogliamo creare. Per questo esempio ne ho create tre:

dalle 03.00 alle 06.00 – Alba
dalle 06.01 alle 18.00 – Giorno
dalle 18.01 alle 02.59 – Notte

Dobbiamo creare due variabili al volo con php $alba e $giorno a cui daremo rispettivamente il valore numeri della fine del proprio periodo e dunque rispettivamente e per $alba e 18 per $giorno.

A questo punto dobbiamo creare una nuova variabile ricavata da quella che è l’ora attuale. Solo l’ora senza minuti e secondi. Posizioniamoci fra e e scriviamo questo codice php:

Cosa abbiamo fatto? Abbiamo definito la fine dell’alba, la fine del giorno ed abbiamo attribuito alla variabile $ora l’ora attuale, ovvero l’ora in cui il visitatore è sul sito.

A questo punto se abbiamo deciso di cambiare lo sfondo del sito in base all’orario in cui si trova, avendo determinato tre fasce orarie dobbiamo creare tre sfondi che raffigurano il periodo con una immagine di un paesaggio, con una scritta o come volete voi. L’importante è che i tre sfondi siano differenti.

Utilizzando le strutture condizionali if, elseif ed else del php e avvalendoci dell’operatore logico AND (simbolo &&) andiamo a scrivere questo piccolo codice sotto quello che abbiamo già scritto:

= 3 && $ora <= $alba){ ?>




 $alba && $ora <= $giorno){ ?>

Utilizzando questo semplicissimo principio e sfruttando le strutture condizionali del php possiamo far comparire e scomparire qualsiasi oggetto dal nostro sito web in base all’ora in cui il visitatore lo visita.

Un esempio? Un saluto! Buongiorno, Buonasera…ecc ecc. Ma anche altre frasi.

Stay Tuned!