Esercitazione: come progettare un'interfaccia utente IPhone di Chatroom
In questo tutorial, progetteremo un'interfaccia utente iPhone per un'applicazione mobile basata su chat e forum.
L'app include una manciata di elementi dell'interfaccia touch di tutti i giorni, come pulsanti, campi di input e gesti tattili.
Copriremo vari strumenti di Photoshop, stili di livello e, naturalmente, affronteremo qualsiasi vincolo di progettazione; così da rendere il design perfetto per il pixel e bello da essere degno di un posto sullo schermo di un iPhone.
Il design è stato realizzato con Photoshop CS5.5, tuttavia tutte le versioni recenti di Photoshop funzioneranno in modo straordinario.
Requisiti dello schermo dell'app
In questo tutorial creeremo solo uno schermo. Lo schermo sarà la schermata principale della chat per un'applicazione basata su chat, proprio come una chat room pubblica, ma sul tuo telefono. I requisiti di questa schermata sono:
- Un'intestazione: questa è la chat in cui ti trovi attualmente.
- Un pulsante indietro / chiudi / argomenti - per tornare alla schermata precedente.
- Un pulsante Persone: mostra chi è attualmente nella chat.
- Un elenco di messaggi: i messaggi devono avere avatar e data / ora.
- Un modo per visualizzare i profili degli utenti e segnalare i messaggi.
- Un campo di testo per scrivere i tuoi messaggi.
- Un pulsante di invio per pubblicare i tuoi messaggi.
Pianificazione, sketch e wireframing
Come con qualsiasi progetto di interfaccia utente, la pianificazione, lo sketch e il wireframing sono essenziali. Molto spesso esclude qualsiasi idea sciocca (anche se potrebbe non sembrare stupida nella tua testa!) Prima di mettere insieme concetti digitali e prototipi. Ciò che potrebbe sembrare una soluzione brillante per risolvere un problema nella tua testa potrebbe in definitiva non funzionare affatto nella pratica reale, motivo per cui il wireframing prima di iniziare un progetto è un passo così importante.
Prendi una penna e il tuo taccuino preferito e inizia a disegnare.
Come puoi vedere dall'immagine sopra, ho trascorso solo pochi minuti mettendo insieme tre concetti diversi; di solito questo processo richiede giorni o talvolta settimane, ma poiché stiamo progettando solo una schermata e lo scopo dell'app è semplice, lo sketch non dovrebbe richiedere molto tempo! Sono per lo più molto simili, ma ognuno ha le sue differenze uniche, che riassumerò qui sotto.
Schizzo A
Ispirata all'interfaccia utente di Twitter originale per iPhone, questa interfaccia utente consente agli utenti di scorrere un messaggio per visualizzare più opzioni, come "Visualizza profilo" e "Segnala utente": un modo divertente e poco ingombrante per consentire più contenuti su questo schermo. Ho giocato con l'idea di avere un pulsante impostazioni nella barra di navigazione in questa schermata, ma ho deciso di seguire la mia regola normale di "Less Is More" - è improbabile che l'utente acceda alle impostazioni ogni volta che usano l'app, quindi non è necessario Qui.
Schizzo B
Questo concetto è un po 'più compatto, con i pulsanti "Visualizza profilo" e "Segnala utente" come icone statiche a destra dei messaggi. Ho giocato con l'idea di non avere un pulsante "Invia" qui, e invece di utilizzare il pulsante di invio sulla tastiera iOS. Ho deciso contro questo perché la maggior parte delle app (incluse le app iOS standard come i messaggi) hanno il pulsante di invio della tastiera e il pulsante di invio aggiuntivo accanto al campo di inserimento del testo. Mi piace mantenere le mie interfacce coerenti con gli altri sull'App Store.
Schizzo C
Lo schizzo C è lo schizzo che ho deciso di andare avanti - invece di un pulsante indietro abbiamo un pulsante di chiusura. Penso che questo renda più ovvio che una volta fatto clic su Chiudi, non farai più parte di quella conversazione (diversamente dalle app di messaggistica, dove torni indietro e puoi tornare a vedere ancora tutti quei messaggi precedenti). Il pulsante Persone mostra un elenco di utenti attualmente nella chat, e ho riadottato l'idea di avere la diapositiva per visualizzare più elementi di funzionalità (come l'app di Twitter) per consentire all'utente di visualizzare il profilo dell'utente o segnalarlo.
Fatto ciò, è ora di passare a mettere insieme qualcosa in Photoshop!
Passaggio 1: stato e barra di navigazione
Prima di procedere con questo passaggio, dobbiamo creare il nostro documento. Le dimensioni standard dello schermo dell'iPhone (con risoluzione Retina) sono di 640 px di larghezza e 960 px di altezza con una risoluzione di 326ppi. Tendo sempre a iniziare con uno sfondo bianco nei miei disegni.
Il primo passo è inserire la barra di stato iOS predefinita. La barra di stato è la barra nella parte superiore del tuo iPhone che ti dice informazioni importanti come il segnale, l'operatore, l'ora e la durata della batteria. Ci sono tre opzioni qui: una barra nera, una barra nera a bassa trasparenza o la barra d'argento.
Se vuoi che il tuo design app assomiglia al vero affare, puoi prendere la barra di stato dal kit PSD della GUI per iPhone di Retina trovato qui . Basta scaricare e aprire il PSD e trascinare la barra che si desidera sul documento PSD. Posizionalo nella parte superiore della tua tela.
La barra di navigazione è accanto alla nostra lista di cose da fare. La barra di navigazione standard è alta 86 px e copre l'intera larghezza del tuo iPhone (640 px). Ancora una volta, puoi trascinare questo elemento dal kit PSD di cui sopra, oppure puoi farlo manualmente (la mia opzione preferita in quanto non ci sono stili allegati). Seleziona lo strumento Forma rettangolare e posiziona un rettangolo di 640 x 86 pixel sul tuo quadro.
Passaggio 2: pulsanti della barra di navigazione
Facendo riferimento ai nostri wireframes, abbiamo due pulsanti sulla barra di navigazione. Seleziona lo strumento Forma rettangolo arrotondato (ricorda di utilizzare sempre gli strumenti forma per le forme nella progettazione dell'interfaccia utente, semplifica notevolmente la scalabilità del documento per risoluzioni più basse!). Ho usato dimensioni 100 x 50 px con un raggio d'angolo di 6 px.
Posiziona questa forma su entrambi i lati sinistro e destro della barra di navigazione e posizionale correttamente.
Passaggio 3: selezione dello stile
È tempo di iniziare a scegliere il nostro stile di design. Questa app permetterà alle persone di chattare e incontrare nuove persone e permetterà alle persone di divertirsi facendo così. Per questo motivo, ritengo che uno schema di colori e una tipografia divertenti, eccentrici, siano importanti per aiutare a raggiungere questo punto.
Seleziona lo Strumento testo e scegli un carattere che corrisponda all'immagine che hai nella tua testa. Ho scelto lo spumante Arial Rounded MT Bold . Digita il nome dell'argomento (ho scelto "UI Design") e lo allineo in posizione centrale sulla barra di navigazione.
Continuando con il tema divertente che abbiamo selezionato per l'app, è il momento di scegliere alcuni colori. Io personalmente uso Amanti del colore per aiutare a ispirare le mie scelte di colore quando sto progettando. In questo caso particolare, ho cercato "divertimento" e in pochi secondi mi è stato presentato un sacco di diverse opzioni e palette di ispirazione da utilizzare come base per il mio design.
Ho finito per sceglierne uno chiamato Stanza dei giochi . È importante pensare a quali colori avrai bisogno quando selezioni una tavolozza; Trovo che trovi qualcosa di leggero, qualcosa di scuro, e qualcosa di luminoso è sempre un buon punto di partenza. È importante avere un buon contrasto nel tuo design.
Passaggio 4: stile della barra di navigazione
Ora torniamo sulla nostra barra di navigazione e diamo il colore che merita. Seleziona il livello della barra di navigazione (spero tu abbia organizzato i tuoi livelli!), Fai clic con il tasto destro e seleziona Opzioni di fusione. Questa è la casa dei più potenti strumenti di Photoshop quando si tratta di creare design dell'interfaccia pixel perfetta. Da qui puoi aggiungere ombre, sfumature, motivi e stoke, con la possibilità di copiare e incollare questi stili su altri livelli.
Prima di tutto aggiungeremo un gradiente alla nostra barra, quindi fare clic su Sovrapposizione sfumatura. Ho selezionato il colore turchese come quello che voglio usare per la mia barra di navigazione. È luminoso e racchiude un potente pugno, e renderà il nostro design facile da ricordare. Applicare un gradiente di angolo di 90 gradi passando dalla luce (in alto) al buio (in basso).
Ora fai clic sul pannello Traccia. Cambia la dimensione del tuo tratto a 2 invece del valore predefinito 3. Un suggerimento è di cercare sempre di evitare numeri dispari nella progettazione dell'interfaccia utente, specialmente sui dispositivi mobili. Questo renderà più lavoro sia per il progettista che per lo sviluppatore quando si tratta di ridimensionare il lavoro (non è possibile usare la metà di 3 pixel in quanto mezzo pixel non esiste!).
Cambia il tipo di riempimento del tuo tratto in sfumatura e assicurati che il tratto appaia all'esterno della tua forma. Seleziona un colore turchese scuro per la parte inferiore della tua pennellata e nero per la parte superiore. Poiché il tratto si trova all'esterno della barra di navigazione, la parte nera del tratto non verrà visualizzata sulla parte superiore della barra di stato, pertanto l'utente sarà in grado di vedere il tratto in basso.
Seleziona il pannello Shadow interno e applica un'ombra bianca opacità del 15% sulla barra. Questo apparirà in cima alla tua barra e gli darà un bel momento culminante, facendolo sembrare più 3D. Ho dato alla mia ombra una distanza di 2 px e una dimensione di 3 px.
Ora è il momento di far esplodere la nostra barra di navigazione. Usando i modelli, possiamo aggiungere molta profondità al nostro design. Sto usando una griglia bianca sulla mia barra di navigazione. Se si desidera utilizzare questo modello, è possibile scaricare una raccolta di questi gratuitamente a Pixel Premium .
Passaggio 5: ombreggiatura tipografica
Per dare profondità alla nostra tipografia, apri il pannello delle opzioni di fusione e applica un'ombreggiatura. Cambia l'angolo a -90 (assicurati che Usa stile globale non sia selezionato qui altrimenti tutte le ombre nel tuo disegno cambieranno a -90) e userai lo stesso colore usato per la parte inferiore delle barre di navigazione. Dare all'ombra una distanza di 2 px e lasciare la dimensione a 0 px. Questo dà un'ombreggiatura netta sopra il tuo testo rendendolo immediatamente più interessante.
Passaggio 6: stile del pulsante della barra di navigazione
Ora applicheremo alcuni fantastici stili ai nostri pulsanti di barre di navigazione. Vogliamo che questi pulsanti si leghino bene con la nostra barra di navigazione, ma allo stesso tempo hanno bisogno di distinguersi abbastanza bene da consentire all'utente di riconoscere immediatamente che sono pulsanti. Per fare questo, useremo più stili di livello per dare loro un effetto 3D, strabiliante.
Apri il pannello delle opzioni di fusione e fai clic su Sovrapposizione sfumatura. Dai al tuo pulsante un gradiente luminoso (in alto) a scuro (in basso) usando i colori della barra di navigazione. Il colore chiaro è stato selezionato dal momento saliente della mia barra di navigazione e il colore scuro è stato selezionato dal tratto inferiore della barra di navigazione.
Seleziona il riquadro del tratto e modifica la dimensione del tuo tratto a 2px, con una posizione esterna. Cambia il tipo di riempimento in sfumatura e l'angolo in 90 gradi. Cambia i colori del gradiente dalla luce (in alto) al buio (in basso), basando i colori sui colori già utilizzati per la barra di navigazione e i pulsanti. Immediatamente puoi vedere che questo tratto dà al tuo pulsante un aspetto 3D, come se uscisse dalla barra di navigazione invece di sedervisi sopra.
Per abbellire un po 'di più il bottone e renderlo ancora più accattivante, aggiungeremo un bagliore interno al pulsante. Fare clic sul pannello della luminosità interna e cambiare la modalità di fusione sullo schermo. Lascia l'opacità al 20% e assicurati che il rumore sia impostato su 0%. Cambia il bagliore giallo predefinito in bianco e assicurati che la dimensione sia ancora impostata sul valore predefinito di 5px. Questo dovrebbe dare al tuo pulsante una bella luminosità interna, rendendo il pulsante davvero tangibile!
Ora aggiungeremo un'ombra interna per rendere il nostro pulsante leggermente più realistico. Cambia l'opacità al 15% e seleziona il nero come colore. Riduci la distanza a 2 px e la dimensione a 4 px. Ora cambia l'angolo a -90 gradi (assicurati che Use Global Light non sia selezionato). Ciò conferisce alla parte inferiore del tuo pulsante una leggera ombra, nascondendo parte del bagliore interno inferiore che abbiamo appena applicato. Nella vita reale, quest'area sarebbe stata ombreggiata, quindi era importante nascondere il bagliore interno qui.
Per completare lo stile del nostro pulsante, aggiungeremo un'ombra esterna. Seleziona il pannello dell'ombra esterna e cambia il colore in bianco con un'opacità del 25%. Questa ombra agirà come un punto culminante sotto il nostro tratto, quindi modifica la distanza a 4px (2px per coprire l'area del tratto e 2px che verrà visualizzato sotto il tratto).
Passaggio 7: etichette dei pulsanti
Un pulsante senza la sua etichetta è inutile, quindi ora passeremo un po 'di tempo per terminare i nostri pulsanti. Prima di tutto, fai clic con il pulsante destro del mouse sul pulsante e seleziona l'opzione Copia stile livello. Ora fai clic con il pulsante destro sul pulsante non formattato e seleziona l'opzione Incolla stile livello.
Per prima cosa continueremo a lavorare con il tasto destro. Questo pulsante sarà etichettato come "Persone" e vogliamo utilizzare un'icona di 2+ persone. Per il bene di questo tutorial, userò le icone create dallo studio creativo Yummygum; puoi trovare il pacchetto che ho usato in IconSweets.com - Userò le icone di questo pacchetto durante il tutorial.
Usando lo stesso carattere che hai usato per il titolo della barra di navigazione, digita l'etichetta dei pulsanti. Ridimensiona e posizionalo sul tuo pulsante, quindi posiziona l'icona scelta (o creala tua) nel tuo documento. Posiziona questi due strati in modo uguale sul tuo pulsante. Ho distanziato i miei strati in modo che ci siano 15px su entrambi i lati e il pulsante e 10px tra l'icona e il testo. Incolla lo stile del livello dal testo dell'argomento della barra di navigazione sia sull'icona che sull'etichetta del pulsante. Se è necessario ridimensionare la lunghezza del pulsante, utilizzare lo strumento Selezione diretta per selezionare i 4 punti di ancoraggio sulla destra, quindi trascinare. Puoi tenere premuto il tasto Maiusc per mantenere questa modifica dritta.
Ripeti questa procedura con il pulsante sul lato sinistro della barra di navigazione, questa volta utilizzando l'icona a forma di croce e la parola "Chiudi". Per aggiungere un po 'più di stile ai miei pulsanti ho abbassato l'opacità delle due forme di sfondo al 95%, questo permette a un po' del modello di griglia sottostante di brillare.
Passaggio 8: barra dei campi di testo
Ora è tempo di prestare attenzione al resto del nostro schermo. Afferra lo strumento Forma rettangolare e usa le stesse dimensioni della nostra barra di navigazione (640 x 86 pixel) per posizionare una forma sulla tela. Posizionalo nella parte inferiore dello schermo.
Passaggio 9: lo sfondo
Ora lavoreremo sullo sfondo del nostro design. Apri il pannello delle opzioni di fusione per il tuo livello di sfondo e scegli un motivo per riempirlo. Ho usato uno schema scuro con linee verticali che lo attraversavano Modelli sottili - È possibile scaricare qui il modello completo che consiglio vivamente.
Se vuoi aggiungere alcuni dei tuoi colori allo schema che hai scelto, puoi farlo usando lo stile di sovrapposizione colore. Ho applicato un marrone (dalla tavolozza dei colori che ho scelto in precedenza) al 35%. Questa opacità è sufficientemente bassa da consentire la visualizzazione della trama o del modello, ma sufficientemente alta da colorare il colore o lo sfondo.
Ora abbiamo uno sfondo scuro, vedrai il punto in cui la nostra barra di navigazione incontra la nostra immagine di sfondo non sembra altrettanto buona. Puoi facilmente risolvere questo problema applicando uno stile ombra alla barra di navigazione, che apparirà come se fosse sopra lo sfondo.
Riapri il pannello delle opzioni di fusione per la barra di navigazione e seleziona il pannello Ombreggiatura. Assicurati che il nero sia selezionato e modifica l'opacità al 25%. Aumentare sia la distanza a 6px che la dimensione a 10px e fare clic su OK. Potrebbe essere necessario sperimentare queste opzioni poiché i risultati varieranno a seconda del colore e del tipo di trama / motivo selezionato per lo sfondo.
Passaggio 10: messaggi
Ora che abbiamo completato lo sfondo e la barra di navigazione superiore, ci concentreremo sull'ottimizzazione del contenuto principale dell'app. Seleziona lo strumento Forma rettangolare e posiziona un rettangolo sulla tela. La larghezza che ho usato era 600px, permettendo di mostrare 20px su ciascun lato della forma. Ho usato una versione molto più leggera del colore giallo / crema dalla palette di colori che ho scelto in precedenza.
Seleziona lo strumento Forma rettangolo arrotondato e modifica le dimensioni a 80 x 80 px e il raggio a 6 px. Posiziona la forma (che deve essere usata come forma dell'avatar) sulla tua tela e posizionala correttamente. Per mantenere il mio design coerente, ho permesso a 20px di sedermi tra i bordi della forma del mio messaggio e la forma del mio avatar.
Usando lo strumento testo, scrivi il tuo nome e un messaggio; Ho usato Arial Rounded MT Bold per il mio nome e Arial normale per il mio messaggio text-format il testo in modo che si adatti perfettamente alla casella di sfondo del messaggio.
Ora aggiungeremo uno stile al nostro messaggio usando solo il colore; Ho cambiato il colore del mio nome in un turchese scuro (molto vicino al nero) e un turchese sbiadito ispirato alla mia barra di navigazione.
Ho quindi inserito una mia immagine andando su File> Luogo. Una volta inserito, ho ridimensionato l'immagine e l'ho posizionata sopra la mia casella di avatar nera creata in precedenza. Per risparmiare il taglio dell'immagine, e anche per darti la possibilità di spostare o ridimensionare il tuo avatar in un secondo momento, fai clic con il tasto destro su di esso e seleziona l'opzione Crea maschera di ritaglio. Ciò collegherà l'immagine dell'avatar alla casella nera dell'avatar e mostrerà solo ciò che è sopra la scatola nera. Scoprirai usando lo strumento Sposta che puoi ancora spostare e ridimensionare questa immagine.
Usando un'altra icona IconSweets, ho creato un piccolo timestamp. Dovevo ridurre le dimensioni dell'icona: puoi farlo andando in Modifica> Trasforma> Trasformazione libera e modificando le dimensioni (in pixel o in percentuale). Ho usato il 70% sia in larghezza che in altezza per mantenere le proporzioni. Ho aggiunto del testo e voilà. Assicurati di selezionare un colore che sia facile da leggere ma non urli per attirare l'attenzione.
Passaggio 11: messaggi duplicati
Duplica le caselle di messaggio l'una sotto l'altra, lasciando uno spazio di 2 pixel tra ogni riquadro di sfondo. Puoi farlo facendo clic e trascinando i tuoi livelli sull'icona Nuovo livello, o in alternativa puoi premere Cmd + Maiusc + Freccia giù contemporaneamente per duplicare e spostare i livelli verso il basso.
Cambia tutto il contenuto nelle caselle dei messaggi, come se fosse una vera conversazione. Se è necessario ridimensionare le caselle di sfondo, utilizzare lo strumento selezione diretta e ridimensionarle utilizzando i punti di ancoraggio. Ciò mantiene tutti i bordi belli e nitidi.
Passaggio 12: stile dei messaggi
Fatto questo, ora possiamo concentrarci per dare vita alle nostre caselle di messaggio. Apri il pannello delle opzioni di fusione e seleziona il pannello Ombreggiatura. Cambia la modalità di fusione su normale e seleziona il bianco come colore. Aumenta l'opacità dell'80% anziché dello standard 75% e assegna all'ombra una distanza di 2 px. Ciò nasconderà il divario 2px che abbiamo lasciato tra ciascuno degli sfondi della finestra di messaggio.
Copia e incolla lo stile di livello sopra su tutti i livelli di sfondo della finestra di messaggio. Dovresti finire con qualcosa come sopra.
Passaggio 13: aggiunta di angoli arrotondati
Per rendere il nostro design più interessante, e anche per aggiungere più profondità, aggiungeremo angoli arrotondati alla parte inferiore dei nostri messaggi e li faremo apparire come se fossero impilati su più carta.
Seleziona lo strumento Rettangolo arrotondato e assegnagli un raggio di 10 pixel. Modifica la larghezza a 600 px (o la larghezza che hai usato per gli sfondi della finestra di messaggio) e un'altezza che non superi l'altezza dello sfondo della casella del messaggio inferiore. Ho usato un colore brillante qui in modo che sia facilmente visibile.
Usando lo Strumento selezione diretta, seleziona il contenuto del tuo livello di forma vettoriale (il riquadro arrotondato che abbiamo appena disegnato) e vai a Modifica> Copia. Fai clic sul livello di forma vettoriale dello sfondo della casella del messaggio in basso e vai a Modifica> Incolla. Ciò incollerà il contenuto del livello forma sul tuo altro livello forma. Ora puoi cancellare la forma che abbiamo disegnato nel passaggio precedente. Dovresti comunque vedere la forma visibile.
Apri le opzioni di fusione dello sfondo inferiore della finestra del messaggio e applica un'ombreggiatura. Cambia il colore in nero, l'opacità al 25%, la distanza a 1 pixel e la dimensione a 3 px. Questo creerà una bella ombra sottile.
Duplica questo livello e spostalo verso il basso di 5px. Riposiziona il livello in modo che si trovi sotto il tuo originale. Dovresti ritrovarti con qualcosa di simile al di sotto. Come puoi vedere, questo è un modo semplice per creare un aspetto carta sovrapposto.
Ripeti il passaggio di nuovo in modo da avere tre pezzi di carta invece di solo due. Potresti voler dare al tuo pezzo di carta inferiore un'ombreggiatura leggermente più evidente.
Passaggio 14: ombra della barra di navigazione
Probabilmente hai notato che mentre progettavamo le nostre finestre di messaggi, abbiamo nascosto la maggior parte dell'ombra esterna che la nostra barra di navigazione trasmetteva sul nostro sfondo. Per rimpiazzarlo puoi posizionare i tuoi messaggi sotto la barra di navigazione (l'opzione facile ma non realistica) o completare il seguente passaggio.
Seleziona lo strumento Selezione rettangolare e disegna una linea sottile nella parte superiore dei messaggi simile a quella precedente. Riempi di nero su un nuovo livello.
Vai a Filtro> Sfocatura> Sfocatura gaussiana e applica la sfocatura. Questo fungerà ora da un'ombra: basta ritagliare tutti i bit della sfocatura che si sovrappongono ai bordi dello sfondo della finestra del messaggio.
Passaggio 15: pulsanti Profilo e report
Facendo riferimento ai nostri wireframes, abbiamo deciso di consentire agli utenti di scorrere un messaggio a sinistra per rivelare più pulsanti. In questo caso, questi pulsanti consentono all'utente di visualizzare il profilo del messaggio o di segnalare il poster del messaggio.
Seleziona i livelli che compongono uno dei tuoi messaggi (io scelgo il messaggio Homer Simpson) e, usando il tasto Maiusc e i tasti freccia, spinge il tuo messaggio 10px alla volta a sinistra. Usando lo strumento testo, scrivi le tue etichette, quindi seleziona alcune icone per corrispondere con quelle etichette. Ho scelto una persona individuale per il profilo e un obiettivo per la relazione (come se li stessi riprendendo - ho pensato che fosse piuttosto divertente!).
Per dare più profondità a quest'area, ho aggiunto un'ombreggiatura nera a icone e testo.
Passaggio 16: barra dei campi di testo
La barra dei campi di testo è uno degli elementi più importanti in questa schermata. Gli utenti devono essere in grado di inserire i loro messaggi con facilità e senza confusione (motivo per cui ho rimosso il pulsante di invio nascosto nei concetti di sketch iniziali).
Per iniziare, trova il tuo livello di sfondo e copia gli stili di livello. Incolla questi stili di livello sul livello della barra dei campi di testo che abbiamo creato in precedenza. Apri le opzioni di fusione per questo livello e seleziona il pannello del tratto. Applicare un tratto 2px all'esterno della forma utilizzando il nero come colore. Poiché il tratto è all'esterno e la forma tocca i tre bordi della tela, verrà visualizzato solo il tratto in cima alla forma.
Ora seleziona la scheda ombra interna e cambia la modalità di fusione in normale, il colore in bianco, l'opacità al 10% e la distanza a 2 pixel. Assicurati che l'angolazione sia impostata sulla luce globale predefinita (90 gradi) e fai clic su OK. Questo ci dà una bella evidenza sotto il nostro tratto nero. Con queste due semplici linee 2px applicate, la nostra barra dei campi di testo sembra già ben separata dal resto dello sfondo, anche se ha lo stesso sfondo!
Seleziona lo strumento Rettangolo arrotondato. Dare al tuo strumento un raggio elevato, ho usato 50px; questo gli darà estremità molto circolari (circolari). Metti una forma sulla tua barra, ho usato 460x54px come le mie dimensioni. Assicurati che il lato sinistro della forma del campo di testo sia a 20px dal lato sinistro dell'area di disegno per mantenere coerente la spaziatura del disegno.
Riempi la forma con un colore scuro (ho usato un marrone selezionato da un pixel scuro sullo sfondo) e poi apro il pannello degli stili di livello. Applica un'ombreggiatura bianca 2px al campo di testo con un'opacità del 10%.
Fai clic sul pannello interno ombra e applica un'ombra interna alla forma del campo di testo. Ciò gli darà molta più profondità e lo farà apparire come se fosse tagliato sullo sfondo delle barre. Usa il nero con una modalità di fusione multipla e un'opacità del 25%. Ho usato 5px come distanza e 10px come dimensione, anche se potresti voler sperimentare qui.
Utilizzando lo strumento testo e dotato di Arial Rounded MT Bold, digitare "Scrivi un commento ..." e posizionarlo nella casella del campo di testo. Apri le opzioni di fusione per il tuo nuovo livello di testo e applica un'ombreggiatura nera con un'opacità del 75%, una distanza di 2 px e una dimensione di 3 px.
Passaggio 17: pulsante del campo di testo
Riselezionare lo strumento Forma rettangolo arrotondato e utilizzando le stesse impostazioni e altezza dello stesso raggio precedentemente utilizzate, posizionare una forma sullo sfondo della barra dei campi di testo. Ridimensiona la lunghezza del tuo pulsante in modo che si trovi 10px dal campo di testo e 20px dal margine destro dell'area di disegno.
Fai clic con il pulsante destro del mouse sul nuovo livello di forma del pulsante e seleziona le opzioni di fusione. Seleziona il pannello di sovrapposizione del gradiente e applica un gradiente dalla luce (in alto) a scuro (in basso). Ho usato il magnifico colore giallo che era nella tavolozza dei colori che ho selezionato in precedenza.
Per mantenere il design coerente, applicherò un tocco al nostro pulsante che fa apparire come se venisse fuori dallo sfondo, proprio come abbiamo fatto con i pulsanti nella barra di navigazione. Questa volta ho usato il nero pieno invece del tratto sfumato poiché lo sfondo è molto più scuro e non è pieno di sfumature. Ho usato un colpo da 2px all'interno della mia forma con un'opacità del 100%.
Seleziona lo strumento di testo e digita "Invia" sul tuo pulsante. Apri le opzioni di fusione per il tuo nuovo livello di testo e applica un'ombreggiatura marrone al testo con una distanza di 1 pixel e una dimensione di 3 pixel.
E con quello finito, abbiamo finito! Ci piacerebbe vedere i tuoi risultati, quindi sentiti libero di pubblicarli nella sezione commenti qui sotto. Se vuoi vedere il disegno alla massima risoluzione, puoi vederlo Qui .