Share
Ciao a tutti! Questo è il mio primo tutorial su questo fantastico nuovo sito della famiglia tuts +. Questa volta ho preparato per voi un tutorial molto dettagliato sulla creazione di un design illustrativo di una singola pagina da zero con Photoshop. Imparerai come creare un layout per un webdesign a singola pagina, creare sfondi illustrativi con uno stile particolare, progettare una barra di navigazione mobile, lavorare con il testo avendo in mente CSS3 e altro ... pronto per iniziare?
Ultimamente, ci sono stati alcuni grandi siti "a scorrimento verticale" che spuntano in rete. Prima di immergerti, controlliamo alcuni di questi per vedere come sarà l'effetto finale. Questi aiuteranno a mettere il resto del tutorial nel contesto:
Questo tutorial richiede alcune conoscenze di base degli strumenti di Photoshop, salterò alcune spiegazioni di base come come creare una maschera di livello, come aggiungere una guida o come aggiungere un livello di testo.
Il mio design si basa su diversi esempi su tutto il web di uno stile molto trendy, un panorama verticale vettoriale panoramico come sfondo e aree di testo pulite che mostrano le informazioni importanti. Immagina questo sito come un design a pagina singola come sito web di portfolio di un designer creativo o di un illustratore.
Non entreremo nella parte di codifica di questo progetto perché ci concentreremo sulle varie tecniche di illustrazione e layout, ma si baserà sul popolare plugin jQuery.ScrollTo, che puoi consultare per suggerimenti su come codificare questo tipo di design.
Iniziamo, le risorse per questo tutorial sono:
Innanzitutto, abbiamo bisogno di impostare il documento di lavoro, sto basando questo layout sul sistema Grid a 12 colonne 960 che puoi scaricare gratuitamente, altrimenti, basta creare un documento 960px con e fare disegnare alcune guide ai bordi sinistro e destro.
Come pratica comune su webdesign, abbiamo bisogno di aumentare quest'area per vedere come appare sulle risoluzioni più alte, ma dobbiamo anche impostare una dimensione standard per l'altezza, questa altezza dovrebbe essere l'area visibile minima (above the fold) dal momento che stiamo progettando un layout a pagina singola. Vai a Immagine> Dimensioni della tela e imposta la larghezza su 1420px e Altezza su 750px.
Successivamente, utilizzare un grafico temporale per dividere il documento in sezioni, utilizzando lo strumento Rettangolo disegnare un rettangolo dall'alto verso il basso (altezza 750px). Quindi aumenta molto la dimensione della tela (puoi usare lo strumento Ritaglia qui).
Disegna una Guida nella parte inferiore del rettangolo e duplicala, quindi abbina il lato superiore della copia con il lato inferiore del primo rettangolo e aggiungi una guida nella parte inferiore del secondo rettangolo, ripeti questo processo tutte le volte che le sezioni sono presenti sul layout , in questo caso abbiamo bisogno di 4: Home, Chi siamo, Portfolio e Contattaci. Quindi, utilizzando lo strumento Ritaglia, elimina la tela aggiuntiva. Dovresti avere una tela di circa 3000 px di altezza con 4 sezioni, ciascuna di 750 px. Elimina i rettangoli guida e vai avanti.
Usando lo strumento Rettangolo disegnare un rettangolo dall'alto verso il basso della terza sezione. quindi aggiungi uno stile di sovrapposizione sfumatura utilizzando i seguenti colori: #FFFFFF # 6E98C8 # 2A3256 e # 0C0E1A, imposta l'angolo su 90 ° (è molto importante poiché questo sfondo sfumato sarà tagliato per essere ripetuto sull'asse x) e premi OK.
Disegna un rettangolo sulla quarta sezione del documento, quindi aggiungi uno stile di livello> Sovrapposizione sfumatura usando questi colori: # 486302 # 64A500 e # BEDC40. Oltre al passaggio precedente, imposta l'angolo su 90 °.
Ora inizieremo a progettare gli elementi grafici aggiuntivi dello sfondo. Il primo elemento che dobbiamo disegnare è un razzo spaziale, che deve essere posizionato sulla sezione uno del disegno. Per questo crea un nuovo documento (larghezza 400 px e altezza 600px) e salvalo con un nome descrittivo come "razzo", aggiungi uno sfondo blu scuro # 181C35.
Successivamente, facendo causa allo strumento Penna, disegna una forma piena bianca simile all'immagine sottostante, quindi duplicala e vai a Modifica> Trasforma> Rifletti orizzontale e posiziona la copia esattamente accanto all'originale, seleziona entrambi i livelli e uniscili premendo Comando / Control + E. Questo sarà il corpo del razzo.
Ora aggiungi uno Stile livello> Sovrapposizione sfumatura al livello "Corpo razzo" usando i seguenti colori: # 0B85DB, # 014C83, # 2396EF, # 004B82 e # 1477B8, imposta l'Angolo su 0 ° e premi OK. Infine rasterizza il gradiente unendo il livello "Corpo razzo" con un nuovo livello vuoto.
Crea tre ellissi gialle usando lo strumento Ellisse e posizionale come mostrato nell'immagine sottostante. Rasterizzali (fai clic con il tasto destro del mouse sulla miniatura del livello e seleziona Rasterizza). Quindi, tieni premuto il tasto Comando / Ctrl e fai clic su una miniatura di Ellisse sul pannello Livelli per selezionare automaticamente la forma del livello e utilizzando i Cursori sposta la selezione di alcuni pixel sopra, quindi premi il tasto Canc, questo processo creerà una bella striscia curva. ripetere le azioni con le altre ellissi.
Duplica ogni striscia e posizionala alcuni pixel sopra l'originale. Quindi selezionare tutte le strisce e unirle su un livello denominato "strisce". Quindi comando / Ctrl sul "Corpo del razzo" per selezionare la forma del razzo, quindi vai a Seleziona> Modifica> Espandi e imposta 2 pixel, quindi Inverti la selezione premendo Comando / Ctrl + Maiusc + I. Avanti nel pannello Livelli fai clic su il livello "Stripes" ed eliminare la selezione.
Selezionare il livello "Strisce" e aggiungere uno Stile livello> Sovrapposizione sfumatura usando i seguenti colori: # EFAC00, # BD8401, # C39700, # FFCF2C, # C39700, # BD8401 e # EFAC00 Angolo 0 °. E una sottile ombra nera (dimensione: 2px).
Seleziona il livello "Corpo del razzo", quindi usando lo strumento Selezione ellittica seleziona la punta del razzo come mostrato nell'immagine sottostante, copia la selezione e incollala sopra il livello del razzo e sotto le strisce, assegna un nome al nuovo livello "Suggerimento". Copia lo stile di livello delle strisce e incolla lo stile sul "suggerimento".
Usando lo strumento Ellisse disegnare un'ellisse sul lato sinistro del razzo chiamarlo "Finestra", quindi aggiungere uno Stile livello> Sovrapposizione sfumatura usando i seguenti colori: # 777777, # E8E8E8, #ADADAD, #FEFEFE, # C8C8C8 e Angolo: 0 °.
Quindi duplica il livello "Finestra" e rendilo un po 'più piccolo, posiziona la copia sopra l'originale. Poiché l'ellisse è una maschera vettoriale, cambia il colore del suo sfondo in: # 00CCFF e fai doppio clic sullo stile di livello Sovrapposizione sfumatura, nella finestra di dialogo cambia il suo Metodo di fusione su Schermo. Infine aggiungi un'ombra interiore sottile al livello "Copia finestra" e se vuoi un'ombra esterna al livello "Finestra".
Aggiungiamo la base del razzo, per prima cosa mettiamo tutti gli strati relativi al Rocket (corpo, punta, strisce e finestra) e li uniamo. Usando lo strumento Penna disegna tre forme seguendo l'esempio dell'immagine sottostante, benché sopra il nuovo livello "Corpo" e uno sotto. Usa questo colore di riempimento per le forme: # FBCC28.
Aggiungi tre nuove forme che descrivono il volume alla base del razzo. Segui l'immagine qui sotto e usa questo colore di riempimento: # AB8204.
Applicare uno stile di sovrapposizione sfumatura ai piedistalli, utilizzare i seguenti colori: # FACB2, # FFF393, # FFD952 e # D4A500, impostare l'angolo su 90 °, provare a ottenere una simile immagine come l'immagine qui sotto.
Unisci tutti i livelli (ho sempre lasciato una copia dei livelli vettoriali in una copia per ogni evenienza). Crea un'ellisse sopra il razzo riempito con questo colore: # DFF8FF, quindi vai su Filtro> Sfocatura> Controllo sfocatura e imposta il raggio su 23 o 24 pixel, assegna un nome al livello "Luce". Comando / Ctrl - Fai clic sul livello del corpo del razzo per selezionarne la forma, Comando / Ctrl + Maiusc + I per invertire la selezione ed eliminare la selezione dal livello "Chiaro". Infine cambia il suo metodo di fusione in luce soffusa.
Unisci tutti i livelli di Rocket e copiali. Incolla il razzo sul lato destro della sezione 1 del nostro documento principale.
puoi fare questo passo sia sul documento del razzo che su quello principale. Crea due ellissi usando lo strumento Ellisse uno più piccolo dell'altro come mostra l'immagine sotto, usa i seguenti colori: # FF8A02, # FFC801. Unisci entrambi i livelli in un nuovo livello denominato "Fuoco". Quindi posizionalo appena dietro il livello "Rocket". Quindi applica una sfocatura gaussiana di 9 pixel e l'uso dei controlli di trasformazione libera distorce leggermente il fuoco rendendolo più stretto.
Aprire i pennelli a stella dai preset, quindi aprire il pannello Pennelli predefiniti (F5).
Sotto Forma punta pennello seleziona la stella 50px e modifica la sua dimensione a 25px, seleziona la casella Spazia e imposta il valore su 300%.
Sotto Scattering set Scatter al 1000% Controllo: Pen Pressure (nel caso si disponga di una tavoletta grafica) Conteggio: 1 e Count Jitter: 100%.
Su Dinamica colore, imposta il jitter in primo piano / sfondo al 100%.
Infine, imposta il colore di primo piano su: # E1F5FF e Colore di sfondo su #FFFFFF, e dipingi su un nuovo livello appena sopra il livello "Cielo". Puoi ridurre l'opacità del livello "Stelle" per renderle un po 'meno intense.
La seconda illustrazione aggiuntiva del nostro design mi farà una bella mongolfiera. Crea un nuovo documento denominato "Balloon" 400px x 600px e riempilo con un livello di sfondo blu # 476492. Quindi, usando lo strumento Penna, create diverse forme come i petali di Margherita per costruire la forma del palloncino.
Usando lo strumento Peen puoi disegnare una forma simile alla prima schermata dell'immagine qui sotto, quindi utilizzare lo strumento Rettangolo per disegnare due barre diagonali accanto ad essa e una barra trasversale. Con lo strumento Penna disegna un cestino molto semplice e con lo strumento Ellisse dargli un po 'di profondità.
Ora, cambia il colore di sfondo dei livelli del fumetto su # FFE305 # D00000 e # 0162A7. Quindi seleziona la sezione centrale e applica uno Stile livello> Sovrapposizione sfumatura usando una sfumatura Riflesso Nero - Bianco. Cambia il metodo di sfumatura sfumatura in Sovrapponi e gioca con l'angolo per farlo sembrare un po 'sporgente. Quindi applica uno Stile Ombra Interna, utilizzando i valori mostrati nell'immagine sotto, l'importante è l'opacità, dovrebbe essere intorno al 50%. Copia lo stile del livello e applicalo a tutte le altre forme, nel caso in cui la sfumatura non sia buona dopo averla applicata, fai doppio clic sull'effetto Sovrapposizione sfumatura e fai clic e trascina sopra l'ombra per spostarla.
Cambia il colore dei livelli relativi al basket in marrone: # 874E21 e incolla lo stile del livello del passo precedente. Per l'ellisse interna utilizzare un colore più scuro: # 291700. E questo è tutto! Unisci tutti i livelli e usa Strumenti scherma / brucia per aggiungere ombre e luci.
Copia il fumetto e incolla due copie nella seconda sezione del nostro documento, una più grande dell'altra. Seleziona il palloncino più piccolo e usando lo strumento Lazo fai una selezione del pallone reale. Quindi premi Comando + U per regolare i valori di Saturazione tonalità e modificali come vuoi. Inoltre, puoi aggiungere una certa profondità di campo sfocando leggermente il secondo palloncino.
Andando avanti con il progetto dello sfondo è ora di aggiungere alcune nuvole al nostro cielo. Crea un nuovo documento denominato "Nuvole" di qualsiasi dimensione e riempilo con lo stesso colore di sfondo del file "balloon": # 486493. Quindi usando lo strumento Penna disegnate alcune nuvole bianche come mostrato nell'immagine qui sotto.
Applicare ai livelli di nuvole uno stile livello> Sovrapposizione sfumatura utilizzando questi colori: # D1D7E7 - Angolo #FFFFFF: 0 gradi e colore Bagliore interno: # BBD5D6 Metodo di fusione: normale, la dimensione dipende dalla dimensione delle nuvole, I ' m usando 6px.
Aggiungi alcune nuvole nella sezione 2 del nostro documento principale, dietro i palloncini, se vuoi aggiungere un po 'di profondità al paesaggio sfocare un po' di nuvole distanti un po '.
Aggiungi più nuvole vicino all'orizzonte nella sezione 3 del documento principale, cambia leggermente i colori, per la Bagliore interno usa #FFFFFF e per la Sovrapposizione sfumatura: # DBE1F1 - #FFFFFF. Dovresti ottenere qualcosa come l'immagine qui sotto.
Abbiamo appena finito il cielo, ricorda di non mettere elementi importanti vicino al confine e di mantenere tutti gli strati organizzati. Siamo a metà strada, è un buon momento per prendere un caffè!
Aggiungiamo le montagne, questa volta "lavoro direttamente sul documento principale, usando lo strumento Penna disegna una forma simile a una montagna come mostrato nell'immagine qui sotto, quindi applica uno stile di livello> Sovrapposizione sfumatura usando i seguenti colori: # 557200 - # 88B707 e imposta l'Angolo come meglio si adatta a te, in questo caso 99 gradi, quindi duplica la montagna, posizionala dietro la prima montagna e ingrandiscila leggermente e cambia i colori del suo Sovrapposizione gradiente a: # 415800 - # 8AB00B per renderlo un po 'più scuro.
Crea un nuovo livello sopra la grande montagna e chiamalo "Ombre" usando un grande pennello morbido e questo colore: # 527300 dipinge delle ombre. Quindi premi Comando / Ctrl-Fai clic sul livello di montagna per creare una selezione intorno ad esso, quindi premi Comando / Ctrl + Maiusc + I per invertire la selezione ed elimina la selezione dal livello "Ombre". Ripeti il processo creando un livello denominato "Luci" usando un Pennello di colore verde chiaro per aggiungere luci alle montagne.
Usando lo strumento Penna, disegna il tronco dell'albero e alcuni rami. Quindi su un nuovo livello disegna una forma stilizzata con le foglie. Sul livello del tronco aggiungi uno stile di sovrapposizione sfumatura usando questi colori: # 574E00, # 957800 l'angolo dipende molto dalla tua forma. Per le foglie utilizzare i seguenti colori per la sovrapposizione sfumatura: # 577E01, # 8DDA00. Quindi aggiungi più foglie su piccoli cespugli di fronte ai rami.
Crea diverse forme e se vuoi aggiungi una piccola ellisse scura sulla base di ogni albero. Rasterizza ogni albero e vai avanti.
Posiziona gli alberi sopra le montagne e sopra il campo verde sulle sezioni 3 e 4 del nostro documento principale, crea gli alberi nella parte inferiore dell'immagine più grandi di quelli accanto alle montagne per creare un'illusione di profondità di campo, oltre a sfocare il alberi più piccoli un po '.
Infine usa gli strumenti Scherma / Brucia sugli alberi più grandi per aumentare l'intensità delle ombre.
A questo punto hai un bel design di sfondo illustrativo. Metti tutti i livelli relativi allo sfondo in una cartella denominata "Sfondo".
Aggiungiamo il titolo della pagina, utilizzando lo Strumento testo aggiungi due livelli di testo, nel primo tipo "Web design" e nel secondo: "Tutsplus" (Ovviamente puoi sostituire queste parole con le tue proprietà). Quindi, nel pannello Carattere, imposta il carattere tipografico su Futura Book (puoi usarne un altro). Per la prima linea imposta la dimensione su 42pt, Crenatura: 0pt, contrassegna l'opzione Tutte le maiuscole e imposta il colore di primo piano su Bianco #FFFFFF. Anche per la seconda linea sto usando il libro Futura, dimensioni 18pt e 1250pt di crenature, imposta il colore di primo piano su # FFD001 e contrassegno l'opzione Tutto maiuscole.
Utilizzando lo strumento Linea, traccia una linea blu (# 9AA4D9), aggiungi un effetto Bagliore esterno bianco e rasterizza la linea (Unisci con un livello nero sopra o sotto di esso), quindi applica una Maschera livello> Nascondi tutto e riempi la maschera con un gradiente riflesso nero / bianco.
Assicurarsi che il titolo sia vicino alla seconda guida da sinistra, il che significa 10 pixel a destra del bordo sinistro 960.
Utilizzando lo strumento Rettangolo, traccia un rettangolo bianco stretto nell'angolo in alto a destra della sezione 1, imposta il valore di riempimento su 25%, quindi aggiungi un tratto bianco a 1 pixel, Opacità: 50%. Rasterizza il livello fondendolo con uno strato nero sopra o sotto, aggiungi una maschera di livello> Nascondi tutto ... e riempilo con un gradiente nero / bianco riflesso, prova a ottenere qualcosa come la parte inferiore dell'immagine sotto.
I CSS3 ci permettono di incorporare i caratteri sul nostro sito web, ci sono alcune directory di font gratuiti che forniscono caratteri tipografici gratuiti pronti per l'uso sul nostro design, prenderemo in mano il bellissimo carattere tipografico chiamato "Bonveno". Digita i link di navigazione usando Bonveno, Dimensione: 12pt, Tutti i Maiusc e Primo piano: Bianco. Selezionare il collegamento HOME ed evidenziarlo con il giallo # FFCF00. Aggiungi un testo istruttivo: "Vai a" usando bonveno, dimensione 8px e grigio in primo piano.
Per avere uno sfondo più bello, duplica il livello "Nav" e sposta la copia di un paio di pixel in basso a sinistra. Infine, cambia l'Opacità di ogni livello al 50%. Metti tutti i livelli relativi alla navigazione in una cartella denominata "Navigazione".
Per dare maggiore enfasi al nome del sito, seleziona la parola grande e applica una leggera sfumatura di gradiente (# C5C5C5 - #FFFFFF) e una piccola ombra esterna (distanza e dimensione 2 px), applica la piccola ombra esterna alla seconda riga anche.
Aggiungiamo il testo di benvenuto, inizieremo ad aggiungere il titolo. Poiché i titoli devono essere in testo normale, utilizzare il carattere Bonveno e il primo piano giallo (# FFCF00). Applica l'Ombra mostrata nel passaggio precedente. Non esitare a utilizzare diverse guide per contrassegnare i tuoi contenuti, in questo caso sto creando guide 10 px sopra e sotto il titolo di benvenuto per aiutarmi ad aggiungere il testo del paragrafo e il suo sfondo.
Usando lo strumento Rettangolo per disegnare una casella come sfondo per il testo di benvenuto, usa questo colore # 0E1122 per la scatola e in basso il Riempimento al 25%. Inoltre aggiungi un 1px Stroke usando questo colore # 4E6575.
Rasterizza il riquadro (uniscilo con un livello vuoto), quindi applica una maschera di livello e riempila con un gradiente nero-bianco. Puoi usare un grande pennello morbido e dipingere sopra la maschera di livello per nascondere alcune aree per rendere più tenue la dissolvenza. Infine, proprio come con la navigazione errata, duplica lo sfondo della casella e spostalo di alcuni pixel in basso a sinistra per creare uno stile simile a quello mostrato nella parte inferiore dell'immagine sotto.
Usando lo strumento testo, disegna una casella di testo del paragrafo e riempilo con il testo di Lipsum, usa "Lucida Sans - Regular" come carattere, Dimensione 11px, Direzione: 19pt e Colore di primo piano: Bianco. infine, dato che i CSS3 ci permettono di aggiungere questo tipo di dettagli, aggiungiamo un Black Drop Shadow 2px al paragrafo di testo.
Usa le stesse istruzioni mostrate nei passaggi 40 e 41 per creare uno sfondo ma più piccolo questa volta. Apri le icone di Social Network dalle risorse e incolla le seguenti icone: RSS, Twitter e Facebook, sentiti libero di aggiungere le icone delle tue preferenze. Infine, usando il carattere "Bonveno" scrivi la parola "Rete" come titolo e usa "Helvetica" (anche Arial funziona bene) per aggiungere alcuni numeri bianchi di Sottoscrittori, Seguaci e Mi piace.
A questo punto abbiamo la sezione 1 che è la vera pagina di benvenuto (o homepage) finita. È un buon momento per rivedere tutto è in una posizione corretta, cercare di mantenere l'equilibrio con il passo dei bianchi, ad es. lo spazio tra il bordo sinistro e il testo di benvenuto e il bordo destro con le icone di rete sono gli stessi. Lavorare con lo spazio bianco (che ovviamente non è letteralmente "bianco") è davvero complicato, respingere l'impulso di riempire ogni piccolo spazio con un'immagine o un'icona, spesso uno sfondo ampio e chiaro è più interessante di un migliaio di elementi lucidi.
Oltre a garantire che tutti i livelli siano organizzati, nella parte inferiore dell'immagine sottostante è presente una struttura delle cartelle che ho creato. Una delle cartelle più importanti qui è "Nav", sto progettando di creare una navigazione mobile usando JavaScript, ma per scopi di simulazione dovremo duplicarla alcune volte per vedere come appaiono le altre "pagine" o sezioni.
Per questa sezione, in pratica, ripetere il processo dei passaggi 39-42, ma posizionare i livelli sul lato destro della seconda sezione cambiando il titolo in "Chi siamo". A questo punto ho pianificato di aggiungere una funzionalità del pannello a schede, ma modificare le posizioni delle schede in basso, utilizzando il carattere "Bonveno" scrivere le schede sotto il paragrafo su di noi. usa questo colore di primo piano per le schede: # C3DFFF e Bianco per la scheda selezionata. Infine, usando lo strumento Poligono, traccia un triangolo Blu Cielo # D5E5F2 per contrassegnare la selezione.
Solo per vedere come sembra duplicare la cartella "Nav" della sezione precedente, ma evidenziare la parola "Chi siamo" sui collegamenti di navigazione. Assicurati che tutto il contenuto si trovi tra i margini della sezione e organizzi i livelli nelle cartelle.
Ripeti le istruzioni dei passaggi precedenti per creare una scatola di contenuti, ma invece di usare il giallo per il titolo usa il blu: # 336A91 e usa il seguente colore per lo sfondo della casella: # 7FA5D2 e uno stile di tratto tratto bianco.
Per questa sezione progetteremo una galleria portfolio molto semplice, usando lo strumento Rettangolo disegnate dei quadrati blu chiaro a sinistra della scatola dei contenuti creata di recente. e un grande rettangolo sul sito di sinistra. Aggiungi a ciascuna casella uno stile di livello> Traccia, 1px e bianco. Usando lo strumento Rettangolo disegnate piccoli quadratini in basso a destra del quadrato grande che saranno come le miniature per controllare un qualche tipo di effetto di transizione, quindi aggiungete del testo fittizio su ogni quadrato per raffigurare quale contenuto deve essere posizionato lì. Puoi effettivamente utilizzare immagini di esempio, se lo desideri.
Seguendo lo stesso procedimento del passaggio 43, aggiungi un paio di link per il portfolio dei social media, come Flickr o LinkedIn. Usa il carattere "Bonveno" per il titolo e questo colore: # 034D8A.
Duplicare la cartella "Nav" ancora una volta ed evidenziare la parola "Portfolio". Assicurati che tutto sia all'interno dei limiti della sezione tre e organizzi i tuoi livelli.
Abbiamo quasi finito, ora aggiungiamo un contenitore per il modulo di contatto. In questo caso il rettangolo dovrebbe essere verde # 67A802 e il verde accendino tratto # B8D942. Il titolo della sezione dovrebbe essere "Contattaci" e sto usando un Primo piano bianco per aumentare il contrasto con lo sfondo. Dissolvete un po 'la casella e duplicatela per creare l'effetto di doppia linea dalle precedenti caselle di contenuto.
Infine, usando Bianco in primo piano e una dimensione inferiore del carattere "Bonveno" scrivete le etichette del modulo di contatto. Applica anche l'Ombra che stiamo usando per i titoli di queste etichette.
Usando lo strumento Rettangolo arrotondato (raggio 5px), disegna le seguenti forme che diventeranno le aree di input effettive del nostro modulo di contatto. Quindi applica gli stili di livello Inner Shadow, Color Overlay (# 4B6800) e Stroke (# A8D02F) mostrati di seguito.
Usando il carattere "Bonveno" digita alcune parole fittizie all'interno delle caselle di input, sto usando questo colore come primo piano: # AFD437. Sotto le caselle di inserimento puoi aggiungere anche una linea di contatto telefonica (sentiti libero di modificare le informazioni che vuoi).
Accentsconagua