√ - Da Photoshop a Html – Creare una interfaccia di login

Da Photoshop a Html – Creare una interfaccia di login

7 Commenti - Categoria: Webdesign - Creare siti web

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 (15)

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 <body> e </body> questo codice che definisce la struttura gerarchica del form:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accesso Utenti</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/sansumi.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="lightout">

        <form id="panel">
          <!-- titolo form -->
          <h1>Accesso Utenti</h1>

          <!-- campo ed etichetta username -->   
          <label for="name" id="name">Username
              <input type="text" name="name" id="name" />
          </label>

          <!-- campo ed etichetta password -->  
          <label for="password" id="password">Password
            <input type="password" name="password" id="password" />
          </label>

          <!-- link alla procedura di reset password -->
          <p>
              <a href="#">Hai perso la password?</a>
          <p>

          <!-- tasto di invio -->
          <p>
                  <input name="Login" type="submit" value="Login" id="submit" />
          </p>
        </form>
</div>

</body>
</html>

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.

Trova altri articoli con questi tag: da photoshop a html, photoshop html, tutorial webdesign, tutorial webdesign italiano

7 commenti a “Da Photoshop a Html – Creare una interfaccia di login”

Manuel Ricci

ottimo ottimo … cercavo da tempo un tutorial simile. complimenti Andrea

Rispondi »
- Andrea Leti
  
  Grazie Manuel! : )
  
  Rispondimi »
Marco

Complimenti come al solito Andrea, ma penso che manchi la trasformazione delle lettere in pallini per la password

Rispondi »
- Andrea Leti
  
  Hai perfettamente ragione! Mi sarà sfuggito in fase di editing. Grazie!
  
  Rispondimi »
Mario

Ciao Andrea,

grazie per il tutorial. scritto e spiegato come meglio non si può, ottimo.

PS: volevo passare prima ma sai le feste…

Rispondi »
- Andrea Leti
  
  Sono felice che ti sia piaciuto e che sia stato utile alla tua formazione!
  
  Rispondimi »
Meganideo

Ottimo tutorial

Rispondi »