Create et enkelt brukergrensesnitt Kit From Scratch (Free PSD inkludert!)
I dagens tutorial, kommer vi til å gå gjennom hvordan du lager din egne enkle UI kit fra bunnen av. Vi skal skape de grunnleggende byggesteinene som du kan bruke i nesten alle web-prosjektet, inkludert: tekstfelt, fokusfelt, velger felt, scrollbars, hjullastere, avmerkingsbokser og alternativknapper. Nyt
UI Kits: Den perfekte måten å fremskynde Design
Opprette et enkelt brukergrensesnitt kit er en fin måte å få fart på design ferdigheter når du arbeider med en stor prosjekt. Hvis du har mange sider å spotte opp, å ha et arsenal av klare til bruk elementer laget spesielt for dette prosjektet vil gjøre deg raskere på hamre ut disse sidene. I dag har vi en video og skriftlig tutorial - følg enten én eller begge
The Video Tutorial
Det skrevne Tutorial
For de! av dere som ønsker litt mer veiledning enn videoen, jeg gir en komplett trinnvis skrevet opplæringen også. La oss dykke i!
Opprett tekstfeltene
Opprette tekstfeltene er den enkleste delen av hele prosessen, men fordi disse elementene vil trolig bli brukt oftest, er det viktig å få det riktig første gang. I vårt tilfelle har jeg trukket enkle 300px x 30px avrundede rektangler med et 2px radius. Justere din egen for å dekke dine egne behov. Store, saftige, ekstra avrundede felt kan være morsomt også! Harde kanter felt er for de mer alvorlige publikum
Uansett, lage en som er perfekt -. Legge et strøk som passer din merkevare (# bdd9a7 for demo), og duplisere laget to ganger (Ctrl + J), . flytte den ned hver gang
Disse tre lagene vil danne grunnlaget for vår UI kit - når vi trenger for å opprette et nytt felt eller knapp, sjansene er gode for at vi får lyst til å begynne her, slik at vi kan duplisere samme grunnleggende høyde og avstand.
Neste, legge til litt tekst over hvert lag. Bruke hva skriften du vil, men det er best å holde det for web-safe fonter ... spesielt med skjemafelt der font-erstatning er ikke det beste alternativet. Jeg har brukt Helvetica # 407a16, 12pt - men du kan bruke Arial, Georgia, Times, etc.
La oss nå legge en enkel ytre glød til vår "fokus felt". Dette vil hjelpe folk å identifisere det når de bruker det. Vår gløden er ganske subtil, men du kan gjøre det så lyst som du ønsker. Legg merke til at jeg har også lagt til en veldig subtil indre skygge - det er helt valgfritt, men det viser deg hvordan du kan du legge subtile effekter for å gjøre feltet føler aktive
Neste, la oss kopiere avrundet rektangel som vi '. re kommer til å bruke for "nedtrekksmenyen" og maskere det av med markeringsverktøyet og bruke en lagmaske. Dette skaper "knapp" for menyen, til alt vi trenger å gjøre er å legge til en subtil gradient gjøre det føles mer som en knapp - # d9edca til # f0f9e9
Dette trinnet er super viktig grunn for ganske mye. alle fremtidige aksje elementer (knapper, avmerkingsbokser, etc.), vi skal kopiere dette laget stil og limer den over tomme former. Ta et minutt til å få din perfekt før du går videre, fordi det vil sette tonen for hele UI kit.
skape den Button Elements
Som jeg nettopp nevnte Vi ll skape våre knapper ved å bruke samme grunnleggende avrundet rektangel fra før, og Copy /Lime lagstilen fra rullegardinmenyen. Teksten vi bruker bør være en fet variant av fonten i tekstfeltene, bare legge en enkel "light" skygge (Drop Shadow, 75%, Hvit, Screen, 1px Avstand, 0 Size) for å fullføre pressable tekst.
For å skape den trykkes ned versjon av knappen, bare snu gradient ved å velge "Reverse" fra Gradient menyen.
Den ned-pilen er opprettet ved hjelp av "Custom Shape "knappen og velge pil ned fra biblioteket elementer som kommer lager i Photoshop. Du kan også lage din egen hvis du vil ... formen er helt opp til deg.
Bare opprett din pil, satt fyllfargen til din "merkevare farge" (vår er # 68b232) og påfør et enkel Inner Shadow (12% opacity, Avstand 2, størrelse 3) for å gjøre det føles litt innfelt. Du kan tinker med disse innstillingene selvfølgelig - den blå versjonen i videoen viser deg en annen variant
Til slutt kan du legge til en valgfri lyseffekt ved hjelp av en enkel 120px Brush (0% Opacity) på en blank. lag. Plasser "børstet blot mark" forsiktig over toppen av knappen - så bare maskere børstet blot over knappen (gjøre et utvalg av knappen form og bruke det nye utvalget som en lagmaske over børstet effekt). Sett blending mode til myke eller harde Lett å fullføre effekten.
Du må kanskje tinker litt med dette siste trinnet basert på fargene som du bruker. Trinnene vil alltid være omtrent det samme selv:
Opprett en ny tomt lag over din knapp
Bruk en børste med en bred radius og blot ned en gang på det nye laget..
Plasser den nye børstet blot over toppen eller bunnen av knappen.
Lag en lagmaske for blot fra Shape Layer av knappen.
Juster farge overlay og overgangsmodus for å gjøre det perfekt for din merkevare
Opprett avmerkingsboksene og radioknapper
Det neste trinnet er super enkelt -. bare lage 12px avrundet rektangler (firkanter for å være nøyaktig). Hvorfor 12px? Fordi det er den generiske punktstørrelsen for det meste tekst på internett. Du kan gå større eller mindre i henhold til din egen skriftstørrelse.
Husk, vi er kopi /lime lagstiler fra at rullegardinmenyen knappen ... dette gjør ting raskt og uniform.
Det samme prosessen går for radioknappene, bortsett fra denne tiden vi skaper 12px sirkler i stedet for rektangler.
"D-Pad" er skapt av bare duplisere og roterende pilen fra rullegardinmenyen ved 90 grader et par ganger. Disse retningspiler er stor når du trenger for å lage et trekkspill meny, jquery slider, etc.
Lag "Loading Bar"
En enkel lasting bar som dette er en flott måte å utvide allsidigheten til din UI kit. Du kan ikke bruke det hele tiden, men det vil spare deg massevis av tid for de få tilfeller der du trenger det pronto! Lasting bar består av noen få skritt
- Mask diagonaler enn vår knapp ved enten å opprette en lagmaske eller bruker en Clipping Mask (vist)
Belysningen effekten er bare litt av en bonus hvis du ønsker det. Jeg har laget den med en 120px Brush (0% hardhet), så jeg har laget et nytt lag og klikket ned på musen én gang, og skaper en eneste klatt på siden. Deretter har jeg satt lagstilen til Soft Light og sette den til å maskere over knappen. Du kan gjøre dette siste steget noen måter - i eksempelet jeg er enkel å lage et utvalg fra det aktive feltet (Hold Cntrl og Klikk på figuren), og deretter brukt som form som en lagmaske
.
Opprett Scrollbar
Greit, vi er på oppløpssiden nå! Rullefeltet er ganske enkel å lage, men tillate meg å lage noen tips:.
- Start med å bruke en avrundet rektangel
For en perfekt runde kanten på toppen og bunnen, angi radius av avrundet rektangel til å være den samme som bredden på scrollbar.
For den indre-baren som folk faktisk vil ta, hjelper det å legge en enkel 2px Indre Stroke det er den samme farge som base av baren. Dette vil gjøre det føles som det er inne i basen.
- Legge til en lys gradient fra venstre til høyre vil hjelpe på knappen føler pressable, akkurat som våre andre knappene.
Her er det shots!
Dokument dokumentet
En ofte oversett skritt for å skape en grunnleggende UI kit er å legge til noen grunnleggende merkevarebygging og annen dokumentasjon inne filen. Jada, kan du legge denne typen ting i et tekstdokument som følger filen ... men da folk måtte åpne den opp. På denne måten, så det er all grunnleggende informasjon (klient navn, designer, versjon, filtype, etc.) alle får vist inne filen ikke rom for misforståelser.
Tilpass It!
Blå Version vi skapte i videoen tut.Til slutt du kan tilpasse dette til din hjertens lyst ... bruke dine egne farger, fonter, lagstiler, etc. Legge til nye elementer som koder, åpnet opp rullegardinmenyer, etc. grense for hvor langt du kan ta dette er helt opp til deg, så gå nøtter og ha det gøy med det! Anmeldelser
Lag basen -.. Fortrinnsvis en mørk farge
Sett den aktive felt eller knapp (kall det hva du vil - det er tingen som hviler på toppen av bakgrunnen).
Legg til noen subtile diagonale striper.
Legg en lys glorie over aktive stripe.
Den grunnleggende laget stilen bakgrunnen er som følger:
Svart Indre skygge, 75% Opacity, Avstand to, størrelse 3.
Vertikal Gradient: # 261e14 til # 372a12 (bunn til topp)
1px Stroke (utenfor): # 142902
Du kan lage bunnen av det aktive feltet et par forskjellige måter, men her er hvordan den grønne ble bygget
.
Duplicate underlaget av lastelinjen.
Inset avrundet rektangel ved 2px bruke Konverter Point Tool.
Sett fyllfarge til # 3c6918.
Sett Stroke å 1px og bruke en Gradient å fylle hjerneslag:. # 3c6a17 til # 74b441
Deretter vil vi legge de diagonale linjer som vil bli maskert over loading bar:
Lag en lang rektangel og Skew den til side for å skape diagonalen.
Duplicate det ved hjelp cntrl + J så mange ganger du trenger, flytte hver ny kopi ut i like mellomrom.
Bruk en enkel gradient over hver diagonal å etterligne det aktive feltet. I vårt tilfelle er det en enkel svart til hvit gradient med blanding modus satt til Overlegg.