Vanlige elementer brukt i Wooden UI Design
Vi vet alle at tekstur er brukt mye i både moderne og vintage design, men i mange tilfeller av design produsert mange år siden, var støyende og grungy teksturer uunngåelig.
Når det kommer til trestruktur i design, er det imidlertid alltid brukt til å forbedre visuell appell, uansett om det er et utskriftsprodukt, et web- eller mobilbrukergrensesnittelement eller en generell oppsett.
I denne artikkelen vil vi se på fem vanlige elementer i UI-design som bruker tre teksturer til å gjøre nettopp dette.
I tillegg til å diskutere disse elementene og beundre noen ganske sexy brukergrensesnitt design som jeg samlet fra Dribbble , vil vi også lære å reprodusere noen av disse effektene ved å følge mini-opplæringsprogrammer her i denne artikkelen.
Disse fem vanlige elementene i brukergrensesnittet er:
- Stoff og søm,
- Papir og skygger,
- Gravert typografi og mønstre,
- Elegante og moderne elementer,
- Tredimensjonale effekter.
1. Stoff og søm
Stoff og søm er elementer som har en tendens til å passe perfekt sammen med trestruktur fordi begge er naturlige, økologiske produkter. (Kanskje, bomull er vevd, kuttet og farget, og mye av treet i denne utstillingsvinduet er kuttet, slipt og behandlet - men du får det jeg mener!) Se på de få eksemplene nedenfor som kombinerer stoff og sømelementer med tre teksturer.
eksempler
Denne svært lette designen bruker en grunnleggende "søm" (bare en strekket strekklink) for å få sirkelemblemet og banneret til å virke som om det har blitt syet til lavt oppakthet og tonet trestrukturert bakgrunn. Den lille kontakten fungerer så bra for en så enkel design.
Stitching i denne designen er mye mer realistisk, og kombinerer en full-opacity wood-textured bakgrunn med graverte elementer, drop-shadows og ekte teksturer. Denne sømmen har en dråpe-skygge (0 piksler i størrelse og 1 piksel på 90 ° avstand), slik at sømmen kan skille seg ut og matche detaljene i resten av designet.
Den digitalt produserte trestrukturen gjør dette designet moderne, med svake gradienter og graverte elementer som gir et litt tredimensjonalt og mer realistisk utseende. Et repeterende mønster brukes til å produsere en nydelig skinneffekt for merket i øverste venstre hjørne, som har blitt sydd med nøyaktig samme teknikk som den som er nevnt ovenfor (med 1-pixel dropshadow).
Mini-Tutorials
Opprette en enkel strekket linje (Illustrator)
I denne mini-opplæringen bruker vi Illustrator (Ai) til å lage en enkel strekkstrekk for å danne en sirkel, som i det første eksemplet i denne delen. Åpne Illustrator og velg Ellipse-verktøyet. Mens du holder Shift-tasten for å holde figuren i forhold, drar du en sirkel, som nedenfor.
Fra Stroke-panelet (Vindu → Stroke) gjelder et 2-punkts vektslag med en Mitregrense på 4. Kontroller alternativet "Stiplede linje" og sett inn 12 punkter i ditt første dash-felt.
Du vil merke at linjen på høyre side av vår form er faktisk to 12-punkts streker satt sammen. For å fikse dette, la oss gi vårt slag et litt mer av et mønster. Bytt bindestrek til 3 poeng og gapet til 12 poeng, og dobbeltklikk dashbordet til 6 poeng og hold det endelige gapet 12 poeng. Du bør ende opp med en strekket linje som ligner den nedenfor (resultatene varierer avhengig av størrelsen på sirkelen din).
Dupliser din form ved først å velge den, velg deretter Rediger → Kopier (Kommando + C) og til slutt Rediger → Lim inn i Plass (Kommando + F). Med den nye formen som fortsatt er valgt, holder du Alt + Shift-tastene samtidig og reduserer formens størrelse. Å holde disse to nøklene samtidig vil holde formen i proporsjon og redusere eller øke størrelsen fra midtpunktet, og eliminere behovet for å tilpasse seg.
Velg den største av de to sirkler. Ta av slaget, og fyll fyllfarge til en brun (eller annen farge for den saks skyld). Nå velger du den minste av de to sirkler, og endrer slagfargen til en lysere brun.
Med den minste av de to sirkler som fremdeles er valgt, dupliseres den ved å kopiere og lime på plass. Når du er duplisert, plasserer du den under den opprinnelige formen (Command + [), og slett formen ned ved å trykke på nedpilen på tastaturet en gang; Endre deretter strekkfargen til hvit.
Reduser ugjennomtrengningen av din hvite sirkelsirkel til 50% og ugjennomsiktigheten av din brune sirkelsirkel til 75%.
Opprette en realistisk søm (Photoshop)
I denne mini-opplæringen bruker vi en ekte teksturstruktur og noen av Photoshops innebygde effekter for å produsere en realistisk søm. Åpne et nytt Photoshop-dokument, og sett inn en stoffstruktur etter eget valg. Beskjær bildet slik at det sitter på en hvit bakgrunn.
Velg verktøylinjen Rektangulær markør, og trekk ut et utvalg på innsiden av stoffteksturens form. Opprett et nytt lag og omdø nytt det "Stitch." Gå til Rediger → Stroke og bruk en svart piktogram på 1 piksler til formen din.
Velg Rectangular Marquee-verktøyet igjen og plasser det over ditt slag. Det spiller ingen rolle hvor du starter. Med en valgt posisjon, trykk Slett-tasten. Pass på at du fjerner innholdet fra strekklaget og ikke stoffets lag.
Gjenta prosessen for resten av strekklinjen, som vist nedenfor.
Det er en stor sjanse for at stingene ikke vil være symmetriske; men det er en god ting, fordi sømmer sjelden er!
Du bør ende opp med noe som ser slik ut:
Høyreklikk på ditt strekklag og velg "Blandingsalternativer" for å åpne Lag Styles-vinduet. Velg Fargeoverlegg-fanen, og velg en lysegrå (jeg brukte #F1F1F1 ).
Velg nå Drop Shadow-fanen. Påfør en svart dråpe skygge med en vinkel på 90 °, en avstand på 1 pixel og en størrelse på 0 piksler. Reduser skyggenes ugjennomtrengelighet til et sted mellom 20 og 60%.
Velg stofflaget, og åpne vinduet Lagstilter. Bruk en standard Drop Shadow med en avstand på 0 piksler, og et Gradient Overlay går fra hvitt til svart til hvitt. Endre blandingsmodusen for Gradient Overlay til "Multiply" med en opacity på 15%. Når du har brukt og sett på 100%, bør du ende opp med noe som ligner på dette:
Spill med fargene på stoffet ditt ved hjelp av fargetone- og fargebalanseinnstillinger. Her er mitt resultat:
2. Papir og skygger
Papir og skygger blir stadig mer populært som design stiler, men er spesielt populære i tekstur-tunge design, som de med tre. Samlingen av arbeid som følger viser at papir og skygger blir brukt på ulike måter å presentere små biter av informasjon eller, i noen tilfeller, nettstedets hovedinnhold.
eksempler
Dette skjermbildet, i tilfelle du ikke hadde lagt merke til, kommer fra en liten del av designet vi så på slutten av "Fabric and Stitching" delen ovenfor. Fortsatt temaet for digitalt produsert tekstur, brukes en enkel hvit form med en skrå, tilpasset skygge for å få papiret til å se ut som om det er curling.
En veldig fin kombinasjon av tre og krøllete papirstrukturer. Papiret i dette brukergrensesnittet brukes til å presentere et utdrag av informasjon som trengs for en oppskrift, med noen flotte silhouettestiler som lar brukeren vise, bokmerke og dele hele oppskriften.
Denne designen er tekstur-tung, og kombinerer tre-, papir- og tape-teksturer for å produsere et tiltalende brukergrensesnitt. Det fotograferte treet og båndet, kombinert med de digitalt produserte papirstrukturene og skyggene, fungerer godt sammen.
Dette er en av mine favorittbrukerprofiler i innlegget. Rent digitalt (inkludert trestruktur), bruker designet dråpe og indre skygger for å skape et vakkert søkefelt. Designet gjør også bruk av masker og stoffelement. Alt i alt, et veldig brukervennlig grensesnitt som ser bra ut!
Denne designen synes å være inspirert av tradisjonelle luftpostkuverter med det gjentatte mønsteret rundt papiret. Papiret har blitt (digitalt) stiftet til trebakgrunnen, noe som gjør at brukergrensesnittet ser ut som en pin og oppslagstavle heller enn en flat nettside.
Beige-krembilledet og navigasjonsbakgrunnen har en fin dråpe skygge som gjør at den virker som papir, spesielt med stemplet merket og de falmede sepia-stilfotografiene som ser ut som de er skrevet ut. Dette passer godt sammen med tre-teksturert bakgrunn og generell følelse av grensesnittet.
Mini-Tutorials
Opprette en enkel digital papireffekt (Photoshop)
I denne mini-opplæringen vil vi bruke en trestruktur og grunnleggende Photoshop-verktøy for å lage en digital papireffekt. Start med å lage et nytt dokument med en tekstur eller gjentatt mønster.
Velg verktøyet Rektangulært form, og sett inn en form som ligner på den nedenfor, og plasser den helt øverst på lerretet.
Dupliser formen, og gå til Rediger → Gratis omforming (eller trykk på Kommando + T). Reduser formens størrelse mens du holder Alt + Shift-tasten for å holde formen i proporsjon, og senk størrelsen mot midten.
Dra toppankerpunktet over toppen av lerretet slik at det overlapper toppen av den opprinnelige formen.
Endre fargen på den nye formen til en veldig lys beige (nesten hvit). jeg brukte #FFFBF8 .
Dupliser din opprinnelige form og endre fargen til ren svart ( #000000 ).
Øk størrelsen på formen slik at den er et par piksler større enn den opprinnelige formen. Opprett en guide-du kan dra en guide ut av linjalen (Vis → Vis linjaler, hvis den ikke vises) -om 10 til 20 piksler under din svarte form. Gå til Rediger → Transform → Warp.
Dra ned nedre venstre ankerpunkt ned mot din guide, og gjenta deretter trinnet med nedre høyre anker.
Trykk på Enter for å bekrefte formforvandlingen. Høyreklikk på formlagsverktøyet, og velg alternativet "Rasterize Layer".
Sett det svarte formlaget under de andre to figurene, men over trelaget. Gå til Filter → Blur → Gaussian Blur, og slør den svarte formen med 10 piksler. Deretter klikker du på "OK".
Senk opaciteten til den svarte formen til 50%. Åpne vinduet Lagstilter for den opprinnelige hvite figuren, og klikk på Stroke-fanen. Påfør et 1-pixelslag i formen ved hjelp av gradientfyllingstypen, fra svart til hvit med 90 ° vinkel.
Med det gjort har vi vår digitale papir-på-tre-effekt! Dette er en flott teknikk å bruke for nettsteder.
3. Gravert typografi og mønstre
Gravert typografi og mønstre er en ganske vanlig teknikk i avansert webdesign, og det blir stadig mer populært i hverdagsdesign. Nedenfor er flere eksempler som bruker denne stilen godt i tre-teksturerte grensesnitt.
eksempler
Dette brukergrensesnittet for Instagram-applikasjoner har en grungy tre-teksturert bakgrunn og utvasket halvtransparente bilder for å produsere et slitt vintageutseende. Typografien har flere forskjellige stiler, slik at bokstaverne kan skille seg ut og gi trebakgrunnen en gravert følelse.
Samlet sett er dette et veldig rent trebrukergrensesnitt, med en stor og like stor samling av ulike stiler og teknikker. En som brukes gjentatte ganger (og veldig bra) er den graverte effekten på typografi og mønstre som eksemplifisert i blomstermønstrene øverst på skjermbildet.
Metal skilting er hengt på tre-teksturert overskrift her for å fungere som hovednavigasjon. For å gi skiltene en mer realistisk gravert effekt, ga designeren typografien indre og slippe skygger.
Tre teksturer brukes primært i dette designet til navigeringslinjen (loggen, i dette tilfellet). Den graverte typografien gjør at tittelen vises som om noen av steinen er blitt etset bort for å vise trestruktur.
Et annet eksempel på gravert typografi på skilt, i dette tilfellet tre-teksturerte tegn i stedet for metall.
Dette trebrukergrensesnittet bruker elegante og moderne elementer, noe som gjør det vanskelig å velge om det skal settes i denne eller neste kategori. "Kjøp" -knappen og ikonet for handbagasje har en meget detaljert gravert effekt, noe som gjør dem praktfull klikkbare!
Mini-Tutorials
Slik graver du et mønster i treet (Photoshop)
I denne mini-opplæringen lager vi en etset eller gravert treeffekt i Photoshop. Åpne et nytt dokument og sett inn en trestruktur.
Sett inn et av dine egne mønstre, eller bruk lagervektbilde.
Når du har plassert vektoren riktig, høyreklikker du på laget og velger "Rasterize Layer." Høyreklikk på den en gang til, og velg kategorien Gradient Overlay. Påfør en gradient ved å bruke to farger valgt fra trebakgrunnen, som vist nedenfor.
Velg kategorien Drop Shadow, og bruk en hvit skygge med en vanlig Blending-modus. Endre vinkelen på skyggen til 90 °, og avstanden og størrelsen til 1 piksel. Du kan beholde de andre innstillingene som standard.
Velg Innerskygge-fanen for å bruke en skygge på innsiden av mønsteret ditt. Dette vil tillate oss å lage den graverte effekten. La skyggens opasitet bli 20%, og endre vinkelen til 90 °. Endre avstanden og størrelsen på skyggen til 3 piksler hver, og hold alle de andre innstillingene som standard.
Klikk på "OK", og senk deretter oppaktheten til mønsterlaget til 80% for å tillate noe av bakgrunnsteksturene å skinne gjennom i all sin herlighet. Du bør ende opp med dette resultatet:
4. Elegante og moderne elementer
Til tross for at tre teksturer ofte er knyttet til vintage og retro design, dersom de trekkes av riktig, kan de også brukes til å utfylle moderne og elegante elementer, som du kan se fra eksemplene nedenfor.
eksempler
Her er et annet skjermbilde av et grensesnitt som vi så i forrige kategori, og viser et annet helt annet stilelement. Glidebryteren og rullefeltene i denne designet har slanke hvite sølv og grønne gradienter for et brukervennlig grensesnitt.
I tillegg til stoff og masker og gravert typografi teknikker, har dette designet noen moderne elementer, for eksempel 2-pixel grå-hvite streker og de minimalistiske ikonene, noe som gir et attraktivt og brukbart iPad-lignende grensesnitt.
En annen av mine favorittgrensesnitt. Den kombinerer tekstiler og tre-teksturerte bilder med elegante gradienter, 2-pixel slag, enkle ikoner og nydelig typografi for mange skaper interessepunkter for brukeren.
Et svært detaljert grensesnitt som fusjonerer treteksturer, tredimensjonale effekter, lyser og glansbelysninger for å produsere et resultat som vil forstyrre sine brukere. One-pixel linjer brukes til å forsterke 3-D effekten.
Glød, skygger og streker brukes til å bringe dette levende tregrensesnittet til livs. De moderne ikonene er imidlertid nøkkelen.
Dette nydelige lille grensesnittet gjør bruk av verdens naturlige produkter og elegante futuristiske elementer for å produsere et brukergrensesnitt som er attraktivt og lett å forstå. Støy er lagt til de moderne elementene, slik at det passer inn i den hakkete teksten.
Dette tastaturet gir oss en trestruktur basert på et eksisterende moderne element: standard iPhone UIKit. Tastaturet fungerer på samme måte som standard tastaturet, og det vil ikke forvirre brukere.
Mini-Tutorials
I denne mini-opplæringen lager vi en tre-grensesnitt-glidebryter ved hjelp av et utvalg av Photoshops lageffekter. Opprett et nytt dokument, og sett inn en trestruktur eller et mønster.
Velg verktøyet avrundet rektangel, og trekk ut en lang smal form, som ligner på den nedenfor. Mitt verktøys hjørneradius er satt til 15 piksler.
Høyreklikk på Form lagene og velg "Blending Options." Velg Gradient Overlay-fanen, og legg til en gradientfarge valgt fra bakgrunnen, og deretter en litt mørkere farge. Deretter klikker du på "OK".
Nå velger du Innerskygge-fanen, og bruker en svart skygge med en opasitet på 30% og en vinkel på 120 °. Slipp avstanden til 1 piksel, og slipp alt annet til 0. Dette vil skape en skygge inne i vår form, slik at den ser ut som den er skåret ut av trebakgrunnen.
Velg kategorien Drop Shadow, og bruk en hvit skygge med en vanlig Blending-modus. Endre vinkelen til 90 °, og avstanden og størrelsen til 1 piksel. La alt annet stå på 0 piksler. Dette vil gi vår form et høydepunkt langs bunnen, slik at det ser mer tredimensjonalt og realistisk ut.
Zoom inn i utskåret linje og velg Ellipse-verktøyet. Mens du holder Shift-tasten nede for å holde formen rundt, drar du ut en sirkel og plasserer den over glidebryteren.
Åpne vinduet "Layer Styles" for den nye sirkelformen. Klikk på Gradient Overlay-fanen, og bruk en gradient som går fra et lysmedium til lysegrå. Gi den en 90 ° vinkel.
Velg kategorien Drop Shadow og bruk en skygge i formen din. Endre avstanden til 0 piksler og størrelsen til 10 piksler.
Zoom ut for å se skyvekontrollen din på 100%. Her er resultatet:
5. Tre-dimensjonale effekter
Det er ingen begrensninger på tredimensjonal design, og det er utrolig effektivt med tre teksturer. Denne kombinasjonen brukes ofte til å produsere "hyller", som sett i iPhone- og iPad-grensesnittene, spesielt Apples iBook-applikasjon.
eksempler
Disse hyllene er svært realistiske, og skyggene (som den på den indre hyllen i øverste høyre hjørne) kommer fra et stort utvalg av egendefinerte jobber (ikke innebygde Photoshop-filtre).
Effektene i dette designet er ganske lik de i den forrige. Denne gangen gir effektene et renere og mer moderne utseende, mens den forrige var ment å se mer realistisk og "brukt".
Disse iPhone-hyllene presenterer lignende teknikker. Denne gangen er resultatet både moderne og realistisk, perfekt balansert teksturerte fotografier med digitale effekter.
Denne 3-D-knappen er utrolig! Med sin kombinasjon av tre teksturer, kommer designens delikate detaljer til høy fokus. Hvis en knapp som dette var foran deg, er det ikke mulig å motstå å gi det et trykk!
En enkel, men effektiv 3-D-effekt har blitt brukt på denne navigasjonslinjen, noe som gjør at knappene vises som om de er arkiveringsskuffer. S et smart designet element for å få brukeren involvert i grensesnittet.
Skrevet utelukkende for WDD av Callum Chapman, en designer og illustrasjon som Sirkelboks Creative . Han kjører også The Inspirasjon Blogg og Picmix Store
Del dine tre UI-design og illustrasjoner med oss, så vel som artikler eller opplæringsprogrammer som kan hjelpe andre lesere.