Fælles elementer brugt i træ UI Design
Vi ved alle, at tekstur bruges meget i både moderne og vintage design, men i mange tilfælde af design produceret for mange år siden var støjende og grungy teksturer uundgåelige.
Når det kommer til træstruktur i design, er det dog altid brugt til at forbedre visuel appel, uanset om det er et printprodukt, et web- eller mobilbrugergrænsefladeelement eller et generelt layout.
I denne artikel vil vi se på fem fælles elementer i UI-design, der bruger træstruktur til at gøre netop dette.
Ud over at diskutere disse elementer og beundre nogle temmelig sexede brugergrænsefladedesigner, som jeg indsamlede fra Dribbble , vil vi også lære at gengive nogle af disse effekter ved at følge mini-tutorials her i denne artikel.
Disse fem fælles elementer i brugergrænsefladen er:
- Stof og syning
- Papir og skygger,
- Graveret typografi og mønstre,
- Smarte og moderne elementer,
- Tredimensionale virkninger.
1. Stof og syning
Stof og søm er elementer, der har tendens til at passe perfekt ind i trætekstur, fordi begge er naturlige, økologiske produkter. (Visse bomuld er vævet, skåret og farvet, og meget af træet i denne udstillingsvindue er blevet skåret, slibet og behandlet - men du får hvad jeg mener!) Se på de få eksempler nedenfor, der kombinerer stof og sømelementer med træ teksturer.
eksempler
Dette meget lette design bruger en grundlæggende "sting" (blot et strejket streger) for at få cirkelemblemet og banneret til at virke som om det er syet til lavt opacitet og tonet trætekstureret baggrund. Det lille tryk fungerer så godt for et så enkelt design.
Stitching i dette design er meget mere realistisk, og kombinerer en fuld opacity trætekstureret baggrund med indgraverede elementer, drop-shadows og ægte stofstruktur. Denne søm har en drop-skygge (0 pixel i størrelse og 1 pixel i 90 ° afstand), hvilket gør at sømmen kan skille sig ud og matche detaljerne i resten af designet.
Den digitalt fremstillede træstruktur gør dette design til det moderne, med sine svage gradienter og indgraverede elementer, der giver et lidt tredimensionelt og mere realistisk udseende. Et gentagende mønster bruges til at fremstille en dejlig læder-effekt til skiltet i øverste venstre hjørne, som er syet ved hjælp af nøjagtig samme teknik som den ovennævnte (med 1-pixel dropshadow).
Mini-Vejledninger
Oprettelse af en simpel streg linje (Illustrator)
I denne mini-tutorial bruger vi Illustrator (Ai) til at skabe en simpel dash-stroked linje for at danne en cirkel, som i det første eksempel på dette afsnit. Åbn Illustrator og vælg Ellipse-værktøjet. Mens du holder Shift-tasten nede for at holde din form i forhold, skal du trække en cirkel som nedenfor.
Fra strejkepanelet (vindue → strejke) anvender et 2-punkts vægtslag med en Mitre-grænse på 4. Kontroller "Dashed Line" -indstillingen, og indsæt 12 punkter i dit første dash-felt.
Du vil bemærke, at linjen på højre side af vores form er faktisk to 12-punkts bindestreger sat sammen. For at løse dette, lad os give vores slagtilfælde lidt mere af et mønster. Skift punktum til 3 point og afstanden til 12 point, og dobbeltklik derefter punktet til 6 point og hold det endelige mellemrum 12 point. Du skal ende med en strejket linje, der ligner den nedenfor (resultaterne varierer afhængigt af størrelsen af din cirkel).
Dupliker din form ved først at vælge den, og vælg derefter Rediger → Kopier (Kommando + C) og til sidst Redigér → Indsæt i Sted (Kommando + F). Med den nye form, der stadig er valgt, skal du holde Alt + Shift-tasterne samtidigt og reducere formens størrelse. Hvis du holder disse to nøgler på samme tid, holder du formen i forhold og reducerer eller øger størrelsen fra midtpunktet, hvilket eliminerer behovet for at tilpasse sig.
Vælg den største af de to cirkler. Fjern stroke, og skift fyldfarven til en brun (eller en anden farve for den sags skyld). Vælg nu den mindre af de to cirkler, og skift strejffarven til en lysere brun.
Med de mindre af de to cirkler, der stadig er valgt, skal du duplikere det ved at kopiere og indsætte dem. Når du er blevet dupliceret, skal du placere den under din oprindelige form (Command + [) og skubbe formen ned ved at trykke på pil ned på tastaturet én gang; Skift derefter strejffarven til hvid.
Reducer opaciteten af din hvide stroke cirkel til 50% og uigennemsigtigheden af din brune stroke cirkel til 75%.
Oprettelse af et realistisk sting (Photoshop)
I denne mini-tutorial bruger vi en ægte stofstruktur og nogle af Photoshop's indbyggede effekter til at producere en realistisk søm. Åbn et nyt Photoshop-dokument, og indsæt en stofstruktur efter eget valg. Beskær billedet, så det sidder på en hvid baggrund.
Vælg værktøjet Rectangular Marquee, og træk et udvalg på indersiden af din teksturteksturs form. Opret et nyt lag og omdøb det til "Stitch." Gå til Rediger → Slag og anvend et 1-pixel sort slag til din form.
Vælg det rektangulære marquee-værktøj igen og placér det over dit slagtilfælde. Det er ligegyldigt hvor du starter. Med en valgt position, skal du trykke på Slet-tasten. Sørg for, at du fjerner indholdet fra slaglagets lag og ikke stoffets lag.
Gentag processen for resten af den strejfede linje som vist nedenfor.
Der er en stor chance for, at stingene ikke vil være symmetriske; men det er en god ting, fordi sting sjældent er!
Du skal ende med noget, der ser sådan ud:
Højreklik på dit strejket lag og vælg "Blending Options" for at åbne vinduet Lag Styles. Vælg fanen Farveoverlay, og vælg en lysegrå (jeg brugte #F1F1F1 ).
Vælg nu fanen Drop Shadow. Anvend en sort dropshadow med en vinkel på 90 °, en afstand på 1 pixel og en størrelse på 0 pixels. Sænk skyggens opacitet til et sted mellem 20 og 60%.
Vælg stoflaget, og åbn vinduet Lagstile. Anvend en standard Drop Shadow med en afstand på 0 pixel, og et Gradient Overlay går fra hvid til sort til hvid. Skift blandingstilstanden til dit overtoningsoverlay til at "Multiplicere" med en opacitet på 15%. Når du først har ansøgt og set på 100%, skal du ende med noget der ligner dette:
Spil med farverne på dit stof ved hjælp af farvetone og farvebalanceindstillinger. Her er mit resultat:
2. Papir og skygger
Papir og skygger bliver stadig mere populære som design stilarter, men er især populære i tekstur-tunge design, som dem med træ. Samlingen af arbejde, der følger, viser, at papir og skygger bruges på forskellige måder til at præsentere små klumper af oplysninger eller i nogle tilfælde hjemmesidens hovedindhold.
eksempler
Dette screenshot, hvis du ikke havde bemærket, kommer fra en lille del af det design, vi så i slutningen af "Fabric and Stitching" sektionen ovenfor. Ved at fortsætte temaet digitalt produceret tekstur, bruges en simpel hvid form med en skræddersyet skygge til at gøre papiret til at se ud som om det er krøllet.
En rigtig flot kombination af træ og krøllede papirstrukturer. Papiret i dette brugergrænseflade bruges til at fremlægge et uddrag af oplysninger, der er nødvendige for en opskrift, med nogle dejlige silhuetstil ikoner, der giver brugeren mulighed for at se, bogmærke og dele den fulde opskrift.
Dette design er tekstur-tunge, der kombinerer træ, papir og tape teksturer til at producere en tiltalende brugergrænseflade. Det fotograferede træ og bånd kombineret med de digitalt fremstillede papirstrukturer og skygger fungerer godt sammen.
Dette er et af mine foretrukne brugerintervaller i posten. Rent digitalt (herunder træstruktur), bruger designet drop og indre skygger til at skabe et smukt søgefelt. Designet gør også brug af sting og stofelement. Samlet set er en meget brugervenlig grænseflade, der ser godt ud!
Dette design synes at være inspireret af traditionelle luftpostkuverter med det gentagende mønster omkring papiret. Papiret er (digitalt) hæftet til træbakgrunden, hvilket gør brugergrænsefladen til en pin og opslagstavle snarere end en flad webside.
Beige-cream image og navigation baggrund har en fin drop skygge, der gør det til at virke som papir, især med det stemplede badge og de falmede sepia-stil fotografier, der ser ud som de er blevet udskrevet. Dette passer vidunderligt sammen med den træbaserede baggrund og overordnede følelse af grænsefladen.
Mini-Vejledninger
Oprettelse af en simpel digital papireffekt (Photoshop)
I denne mini-tutorial bruger vi en træstruktur og grundlæggende Photoshop-værktøjer til at skabe en digital papireffekt. Start med at oprette et nyt dokument med en tekstur eller gentagende mønster.
Vælg værktøjet Rectangular Shape, og indsæt en form svarende til den nedenstående, og placér den lige øverst på lærredet.
Dupliker formen, og gå til Rediger → Free Transform (eller tryk på Command + T). Reducer formens størrelse, mens du holder Alt + Shift-tasterne nede for at holde formen i forhold, og sænk derefter størrelsen mod midten.
Træk det øverste ankerpunkt over toppen af lærredet, så det overlapper toppen af den oprindelige form.
Skift farve på din nye form til en meget lys beige (næsten hvid). jeg brugte #FFFBF8 .
Dupliker din oprindelige form, og skift farven til ren sort ( #000000 ).
Forøg formens størrelse, så det er et par pixels større end den oprindelige form. Opret en guide-du kan trække en guide ud af linjalen (se → vise linjaler, hvis den ikke vises) -omkring 10 til 20 pixel under din sorte form. Gå til Rediger → Transform → Warp.
Træk det nedre venstre ankerpunkt ned mod din guide, og gentag derefter trin med nederste højre anker.
Tryk på Enter for at bekræfte din formændring. Højreklik på værktøjet Formularlag, og vælg "Rasterize Layer".
Skift det sorte formlag under de to andre former, men over trælaget. Gå til Filter → Blur → Gaussian Blur, og slør den sorte form med 10 pixel. Klik derefter på "OK".
Sænk opaciteten af den sorte form til 50%. Åbn vinduet Lagstile til din oprindelige hvide form, og klik på fanen Streg. Anvend en 1-pixel slagtilfælde til formen ved hjælp af gradientfyldningstypen, der går fra sort til hvid med en 90 ° vinkel.
Med det gør vi vores digitale papir-på-træ effekt! Dette er en fantastisk teknik til brug for hjemmesider.
3. Graveret typografi og mønstre
Graveret typografi og mønstre er en temmelig almindelig teknik i avanceret webdesign, og det bliver stadig mere populært i det daglige design. Nedenfor er flere eksempler, der bruger denne stil godt i træ-tekstureret grænseflader.
eksempler
Denne Instagram applikations brugergrænseflade har en grungy træ-tekstureret baggrund og udvaskede semi-gennemsigtige billeder for at producere et slidt vintage look. Typografien har flere forskellige stilarter, så bogstaverne kan skille sig ud og give træbakken en indgraveret følelse.
Alt i alt er dette en rigtig ren træ brugerflade, med en stor og lige stor samling af forskellige stilarter og teknikker. En brugt gentagne gange (og meget godt) er den indgraverede effekt på typografi og mønstre som eksemplificeret i blomstermønstre øverst på skærmbilledet.
Metal skiltning er hængt på den træ-tekstureret overskrift her for at fungere som hovednavigation. For at give tegnene en mere realistisk indgraveret effekt, gav designeren typografiens indre og faldende skygger.
Træ teksturer bruges primært i dette design til navigationslinjen (loggen, i dette tilfælde). Den indgraverede typografi gør titlen til at virke som om en del af stenen er ætset væk for at vise træstruktur.
Et andet eksempel på indgraveret typografi på tegn, i dette tilfælde træ-tekstureret tegn i stedet for metal.
Dette træ-brugergrænseflåde anvender slanke og moderne elementer, hvilket gør det svært at vælge, om det skal placeres i denne eller den næste kategori. Knappen "Køb" og indkøbsposikonet har en meget detaljeret indgraveret effekt, hvilket gør dem vidunderligt klikbare!
Mini-Vejledninger
Hvordan man graverer et mønster i træ (Photoshop)
I denne mini-tutorial skaber vi et ætset eller indgraveret træeffekt i Photoshop. Åbn et nyt dokument og indsæt en træstruktur.
Indsæt et af dine egne mønstre, eller brug stock vector image.
Når du har placeret vektoren korrekt, skal du højreklikke på laget og vælge "Rasterize Layer." Højreklik på det igen og vælg fanen Overtoningsoverlay. Anvend en gradient ved hjælp af to farver valgt fra træ baggrunden, som set nedenfor.
Vælg fanen Drop Shadow, og anvend en hvid skygge med en normal blandingstilstand. Skift skyggens vinkel til 90 °, og afstanden og størrelsen til 1 pixel. Du kan beholde de øvrige indstillinger som standard.
Vælg fanen Inderskygge for at anvende en skygge på indersiden af dit mønster. Dette giver os mulighed for at oprette den indgraverede effekt. Drop skyggens opacitet til 20%, og skift vinklen til 90 °. Skift afstanden og størrelsen af skyggen til 3 pixels hver, og hold alle de øvrige indstillinger som standard.
Klik på "OK", og sænk derefter opacitet af dit mønsterlag til 80% for at lade nogle af baggrundsteksturerne skinne igennem i al sin herlighed. Du skal ende med dette resultat:
4. Smarte og moderne elementer
På trods af, at træstrukturer ofte er forbundet med vintage og retro design, hvis de trækkes korrekt ud, kan de også bruges til at supplere moderne og slanke elementer, som du kan se fra eksemplerne nedenfor.
eksempler
Her er et andet skærmbillede af en grænseflade, som vi så i den forrige kategori, og viser et andet helt andet stilelement. Glideren og rullebjælkerne i dette design har slanke hvid-sølv og grønne gradienter til en brugervenlig grænseflade.
Ud over stoffet og stingene og graverede typografi teknikker har dette design nogle moderne elementer, såsom 2-pixel grå-hvide streger og de minimalistiske ikoner, hvilket giver en attraktiv og brugbar iPad-lignende grænseflade.
En anden af mine yndlingsgrænseflader. Det kombinerer tekstil- og trætekstureret billeder med slanke gradienter, 2-pixel streger, simple ikoner og smuk typografi til mange, der skaber interessepunkter for brugeren.
En meget detaljeret grænseflade, der fusionerer træstrukturer, tredimensionale effekter, glød og glans fremhæver for at producere et resultat, der vil forstyrre sine brugere. One-pixel linjer bruges til at forstærke 3-D effekten.
Gløder, skygger og slag er brugt til at bringe denne levende træinterface til liv. De moderne ikoner er dog nøglen.
Denne dejlige lille grænseflade gør brug af verdens naturlige produkter og slanke futuristiske elementer til at producere en brugerflade, som er attraktiv og let at forstå. Der tilføjes støj til de moderne elementer, så det passer ind i den træteksturerede overskrift.
Dette tastatur giver os en træstruktur baseret på et eksisterende moderne element: standard iPhone UIKit. Tastaturet fungerer på samme måde som standardtastaturet, og det vil ikke forvirre brugerne.
Mini-Vejledninger
I denne mini-tutorial skaber vi en træ-brugergrænseflade ved hjælp af et udvalg af Photoshops lageffekter. Opret et nyt dokument, og indsæt en træstruktur eller et mønster.
Vælg værktøjet Rundet rektangel, og træk en lang smal form, der ligner den nedenfor. Mit værktøjs hjørneradius er sat til 15 pixels.
Højreklik på formularlaget og vælg "blandingsindstillinger." Vælg fanen Gradientoverlay og tilføj en farvefarve valgt fra baggrunden og derefter en lidt mørkere farve. Klik derefter på "OK".
Nu skal du vælge fanen Inderskygge og anvende en sort skygge med en opacitet på 30% og en vinkel på 120 °. Drop afstanden til 1 pixel, og slip alt andet til 0. Dette vil skabe en skygge inde i vores form, så det ser ud som om det var udskåret fra træbakgrunden.
Vælg fanen Drop Shadow, og anvend en hvid skygge med en normal blandingstilstand. Skift vinklen til 90 °, og afstanden og størrelsen til 1 pixel. Forlad alt andet ved 0 pixels. Dette vil give vores form et højdepunkt langs bunden, så det ser mere tredimensionelt og realistisk ud.
Zoom ind i din udskårne linje, og vælg Ellipse-værktøjet. Mens du holder Shift-tasten nede for at holde formen rundt, trækker du en cirkel og placerer den over skyderen.
Åbn vinduet "Lag Styles" til din nye cirkelform. Klik på fanen Gradientoverlay og anvend en gradient, der går fra et lysmedium til lysegrå. Giv den en 90 ° vinkel.
Vælg fanen Drop Shadow og anvend en skygge til din form. Ændre afstanden til 0 pixels og størrelsen til 10 pixels.
Zoom ud for at se din skyder på 100%. Her er resultatet:
5. Tre-dimensionelle virkninger
Der er ingen begrænsninger på tredimensionelt design, og det er utroligt effektivt med træstruktur. Denne kombination bruges almindeligvis til at producere "hylder", som det ses i iPhone og iPad-grænsefladerne - især Apples iBook-applikation.
eksempler
Disse hylder er meget realistiske, og skyggerne (som den på den indre hylde i øverste højre hjørne) kommer fra et stort udvalg af brugerdefinerede job (ikke indbyggede Photoshop-filtre).
Virkningerne i dette design er ret ligner dem i den foregående. Denne gang giver virkningerne et renere og mere moderne udseende, mens den forrige var meningen at se mere realistisk og "brugt".
Disse iPhone hylder frembyder lignende teknikker. Denne gang er resultatet både moderne og realistisk, perfekt balancering tekstureret fotografier med digitale effekter.
Denne 3-D-knap er utrolig! Med sin kombination af træstrukturer kommer designens sarte detaljer i høj fokus. Hvis en knap som dette var foran dig, er der ingen måde du ville være i stand til at modstå at give det et skub!
En enkel, men effektiv 3-D-effekt er blevet anvendt på denne navigationslinje, så knapperne vises som om de arkiverer skuffer. S et klogt designet element for at få brugeren involveret i grænsefladen.
Skrevet udelukkende til WDD af Callum Chapman, en designer og illustration handel som Cirkelkasse Creative . Han kører også The Inspiration Blog og Picmix Store
Del dine træ-UI-design og illustrationer med os, samt artikler eller vejledninger, der kan hjælpe dine medlæsere.