Share
Nel tutorial di oggi, ti illustreremo come creare il tuo kit UI semplice da zero. Creeremo i blocchi di base che puoi utilizzare in quasi tutti i progetti web, tra cui: campi di testo, campi di messa a fuoco, campi selezionati, barre di scorrimento, caricatori, caselle di controllo e pulsanti di opzione. Godere!
Creare un semplice kit UI è un ottimo modo per velocizzare le tue capacità di progettazione quando lavori su un grande progetto. Se hai un sacco di pagine da prendere in giro, avere un arsenale di elementi pronti per l'uso creati appositamente per quel progetto ti renderà più veloce a battere quelle pagine. Oggi abbiamo un video e un tutorial scritto: segui uno o entrambi!
Per quelli di voi che vogliono un po 'più di guida rispetto al video, sto fornendo un tutorial scritto passo per passo completo. Tuffiamoci dentro!
La creazione dei campi di testo è la parte più semplice dell'intero processo, ma poiché questi elementi verranno probabilmente utilizzati più spesso, è importante farlo correttamente la prima volta. Nel nostro caso, ho disegnato semplici rettangoli arrotondati di 300 x 30 px con un raggio di 2 pixel. Regola il tuo secondo le tue esigenze. Anche i campi grandi, succosi, arrotondati possono essere divertenti! I campi con bordi duri sono per la folla più seria.
In ogni caso, creane uno perfetto: aggiungi un tratto che corrisponda al tuo marchio (# bdd9a7 per la demo) e duplica il livello due volte (Ctrl + J), spostandolo verso il basso ogni volta.
Questi tre strati formeranno la base del nostro kit UI - ogni volta che abbiamo bisogno di creare un nuovo campo o pulsante, è probabile che vorremmo iniziare qui in modo che possiamo duplicare la stessa altezza e spaziatura di base.
Successivamente, aggiungi del testo su ogni livello. Usa qualsiasi font che vuoi, ma è meglio tenerlo su font sicuri per il web? specialmente con i campi dei moduli in cui la sostituzione dei font non è la scelta migliore. Ho usato Helvetica # 407a16, 12pt - ma puoi usare Arial, Georgia, Times, ecc.
Ora aggiungiamo un semplice bagliore esterno al nostro "campo di messa a fuoco". Ciò aiuterà le persone a identificarlo quando lo usano. Il nostro bagliore è piuttosto sottile, ma puoi renderlo brillante come desideri. Nota che ho anche aggiunto un'ombra interiore MOLTO sottile, che è totalmente opzionale, ma ti mostra come aggiungere effetti delicati per rendere il campo attivo.
Quindi, duplichiamo il rettangolo arrotondato che useremo per il "menu a discesa" e lo mascheriamo usando lo strumento Selezione e applicando una maschera di livello. Questo crea il "pulsante" per il menu, tutto ciò che dobbiamo fare è aggiungere un gradiente sottile per farlo sembrare più come un pulsante - # d9edca a # f0f9e9.
Questo passaggio è molto importante perché per quasi tutti i futuri elementi di magazzino (pulsanti, caselle di controllo, ecc.), Copieremo questo stile di livello e incolleremo le forme vuote. Prenditi un minuto per rendere perfetto il tuo prima di andare avanti, perché regolerà il tono dell'intero kit dell'interfaccia utente.
Come ho appena detto, creeremo i nostri pulsanti usando lo stesso rettangolo arrotondato di base di prima e Copia / Incolla lo stile del livello dal menu a discesa. Il testo che stiamo usando dovrebbe essere una variante grassetto del font usato nei campi di testo, basta aggiungere una semplice ombra "leggera" (ombra esterna, 75%, bianco, schermo, distanza 1px, dimensione 0) per completare la pressione testo.
Per creare la versione compressa del pulsante, basta invertire la sfumatura selezionando "Reverse" dal menu Gradient.
La freccia verso il basso viene creata utilizzando il pulsante "Forma personalizzata" e selezionando la freccia giù dalla libreria di elementi disponibili in Photoshop. Puoi anche creare il tuo se vuoi? la forma è totalmente da te.
Basta creare la freccia, impostare il colore di riempimento sul "colore del marchio" (il nostro è # 68b232) e applicare una semplice ombra interna (opacità del 12%, distanza 2, dimensione 3) per farla sentire un po 'incassata. Puoi armeggiare con queste impostazioni, ovviamente - la versione blu nel video ti mostrerà un'altra variante.
Infine, puoi aggiungere un effetto di illuminazione opzionale usando un semplice Pennello 120 px (0% Opacità) su un livello vuoto. Posiziona con attenzione il "segno del pennello spazzolato" sopra la parte superiore del pulsante, quindi maschera la macchia sul pulsante (fai una selezione della forma del pulsante e applica la nuova selezione come maschera di livello sull'effetto spazzolato). Impostare la modalità di fusione su Luce soffusa o Difficile per completare l'effetto.
Potrebbe essere necessario armeggiare un po 'con questo ultimo passo in base ai colori che stai utilizzando. I passaggi saranno sempre circa lo stesso però:
Il prossimo passo è semplicissimo: basta creare rettangoli arrotondati di 12 px (i quadrati sono esatti). Perché 12px? Perché è la dimensione in punti generica per la maggior parte del testo su Internet. Puoi andare più grande o più piccolo in base alla dimensione del tuo carattere.
Ricorda, copia / incolla gli stili di livello dal pulsante del menu a discesa? questo rende le cose veloci e uniformi.
Lo stesso procedimento vale per i pulsanti di opzione, ma questa volta creeremo cerchi di 12 pixel anziché rettangoli.
Il "D-Pad" viene creato semplicemente duplicando e ruotando la freccia dal menu a discesa di 90 gradi alcune volte. Queste frecce direzionali sono grandi quando devi creare un menu di fisarmonica, un cursore jquery, ecc.
Una semplice barra di caricamento come questa è un ottimo modo per estendere la versatilità del tuo kit UI. Potresti non usarlo tutto il tempo, ma ti farà risparmiare un sacco di tempo per i pochi casi in cui ne hai bisogno pronto! La barra di caricamento è composta da pochi passaggi.
Lo stile di base dello sfondo è il seguente:
Puoi creare la base del campo attivo in modi diversi, ma ecco come è stato costruito quello verde.
Successivamente, aggiungeremo le linee diagonali che verranno mascherate sulla barra di caricamento:
L'effetto di luce è solo un po 'un bonus se lo vuoi. L'ho creato utilizzando un pennello 120 px (0% di durezza), quindi ho creato un nuovo livello e fatto clic sul mouse una volta, creando un singolo clic sulla pagina. Successivamente, ho impostato lo stile di livello su Luce soffusa e l'ho impostato per mascherarlo sul pulsante. Puoi fare questo passo finale in alcuni modi: nell'esempio sono semplice fare una selezione dal campo attivo (tieni premuto Cntrl e fai clic sulla forma), quindi applica quella forma come maschera di livello.
Bene, ora siamo a casa! La barra di scorrimento è abbastanza semplice da creare, ma permettimi di formulare alcuni suggerimenti:
Ecco gli scatti:
Un passaggio spesso trascurato per la creazione di un kit di interfaccia utente di base è l'aggiunta di alcuni branding di base e altra documentazione all'interno del file. Certo, potresti aggiungere questo tipo di cose in un documento di testo che accompagna il tuo file? ma poi la gente dovrebbe aprirlo. In questo modo, tutte le informazioni di base (nome del cliente, designer, versione, tipo di file, ecc.) Vengono tutte visualizzate all'interno del file, quindi non c'è spazio per la confusione.
Infine, puoi personalizzare questo per i contenuti del tuo cuore? usa i tuoi colori, font, stili di livello, ecc. Aggiungi nuovi elementi come tag, menu a tendina aperti, ecc. Il limite a quanto puoi fare è totalmente a te, quindi impazzisci e divertiti con esso!
Accentsconagua