Vanliga element som används i trä UI-design
Vi vet alla att konsistens används mycket i både modern och vintage design, men i många fall av design som producerades för många år sedan var bullriga och grungy texturer oundvikliga.
När det gäller trästruktur i design, är det dock alltid, om det är i en utskriftsprodukt, ett webb- eller mobilgränssnitt, eller en allmän layout, som alltid används för att förbättra visuell överklagande.
I den här artikeln kommer vi att titta på fem vanliga element i UI-design som använder trästrukturer för att göra just detta.
Förutom att diskutera dessa element och beundra några ganska sexiga användargränssnitt som jag samlat in från Dribbble , vi kommer också att lära oss hur du reproducerar några av dessa effekter genom att följa mini-handledning här i den här artikeln.
Dessa fem gemensamma element i UI-designen är:
- Tyg och stygn,
- Papper och skuggor,
- Graverad typografi och mönster,
- Eleganta och moderna element,
- Tredimensionella effekter.
1. Tyg och sömnad
Tyg och sömmar är element som brukar passa perfekt i trästruktur eftersom båda är naturliga, ekologiska produkter. (Det är klart att bomull är vävt, klippt och färgat och mycket av träet i den här utställningen har klippts, slipats och behandlats men du får vad jag menar!) Titta på de få exempel nedan som kombinerar tyg och stygn med trästruktur.
exempel
Denna mycket lätta design använder en grundläggande "stygn" (bara en streckad stroke länk) för att få cirkelemblemet och bannern att visas som om den har sys till den låga opaciteten och tonade trästrukturerade bakgrunden. Den lilla touchen fungerar så bra för en så enkel design.
Stygnen i denna design är mycket mer realistisk, och kombinerar en full-opacitet trästrukturerad bakgrund med graverade element, drop-skuggor och riktiga tygtexturer. Denna söm har en drop-skugga (0 pixlar i storlek och 1 pixel vid 90 ° avstånd), vilket gör att sömmen kan sticka ut och matcha detaljerna i resten av designen.
Den digitalt producerade trästrukturen gör att designen är modern, med svaga gradienter och inristade element som ger ett något tredimensionellt och mer realistiskt utseende. Ett upprepande mönster används för att skapa en härlig lädereffekt för märket i det övre vänstra hörnet, vilket har systs med samma teknik som den som nämnts ovan (med 1-pixel dropshadow).
Mini-Tutorials
Skapa en enkel streckad linje (Illustrator)
I den här mini-handledningen använder vi Illustrator (Ai) för att skapa en enkel streckad linje för att bilda en cirkel, som i det första exemplet i det här avsnittet. Öppna Illustrator och välj Ellipse-verktyget. Medan du håller Shift-tangenten för att hålla din form i proportion, dra ut en cirkel, som nedan.
Från Stroke-panelen (Fönster → Stroke) applicera en 2-punkts tyngdslag med en Mitregräns på 4. Kontrollera alternativet "Dashed Line" och sätt in 12 punkter i ditt första streckfält.
Du märker att linjen på höger sida av vår form är faktiskt två 12-punkts streck sätta ihop. För att fixa det här, låt oss ge vår stroke lite mer av ett mönster. Ändra bindestrecket till 3 poäng och gapet till 12 poäng, och dubbelklicka sedan punkten till 6 poäng och håll den sista luckan 12 poäng. Du borde sluta med en streckad linje som liknar den nedan (resultaten varierar beroende på cirkelns storlek).
Duplicera din form genom att först välja den och välj sedan Redigera → Kopiera (Kommando + C) och äntligen Redigera → Klistra in Place (Command + F). Med den nya formen som fortfarande valts håller du Alt + Shift-tangenterna samtidigt och reducerar formens storlek. Att hålla dessa två nycklar samtidigt håller formen i proportion och sänker eller ökar storleken från mittpunkten, vilket eliminerar behovet av att justera.
Välj den större av de två cirklarna. Ta bort stroke och ändra fyllfärgen till en brun (eller någon annan färg för den delen). Välj nu de mindre av de två cirklarna och ändra strokefärgen till en ljusare brun.
Med den minsta av de två cirklarna som fortfarande valts, duplicerar du den genom att kopiera och klistra in på plats. När du är duplicerad placerar du den under din ursprungliga form (Kommando + [) och dämpar formen nedåt genom att trycka ner pilen på tangentbordet en gång; Ändra sedan streckfärgen till vit.
Minska opaciteten i din vita stroke cirkel till 50% och opaciteten av din brun stroke cirkel till 75%.
Skapa en realistisk stygn (Photoshop)
I den här mini-handledningen använder vi en riktig tygstruktur och några av Photoshops inbyggda effekter för att producera en realistisk söm. Öppna ett nytt Photoshop-dokument och sätt in en texturstruktur efter eget val. Beskär bilden så att den sitter på en vit bakgrund.
Markera verktyget Rektangulärt markeringsverktyg och dra ut ett urval på insidan av din texturens form. Skapa ett nytt lager och byt namn på det "Stitch". Gå till Redigera → Stroke och använd en svartvitt på 1 pixel till din form.
Välj det rektangulära markeringsverktyget igen och placera det över ditt slag. Det spelar ingen roll var du börjar. Med en vald position trycker du på Delete-tangenten. Se till att du tar bort innehållet från streckets lager och inte tygets lager.
Upprepa processen för resten av streckade linjer, se nedan.
Det finns en stor chans att stygnen inte kommer att vara symmetrisk; men det är en bra sak, för stygningar är sällan!
Du borde sluta med något som ser ut så här:
Högerklicka på ditt streckade lager och välj "Blandningsalternativ" för att öppna fönstret Lagstilar. Välj fliken Färgöverlagring och välj ett ljusgråt (jag använde #F1F1F1 ).
Välj nu fliken Drop Shadow. Applicera en svart droppskugga med en vinkel på 90 °, ett avstånd på 1 pixel och en storlek på 0 pixlar. Sänk skuggans opacitet till någonstans mellan 20 och 60%.
Välj tygskiktet och öppna fönstret Lagstilar. Applicera en standard Drop Shadow med ett avstånd på 0 pixlar, och ett Övertoningsöverlägg går från vitt till svart till vitt. Ändra blandningsläge för gradvis överlagring till "Multiplicera" med en opacitet på 15%. En gång applicerad och visad på 100%, borde du sluta med något liknande det här:
Spela med färgerna på ditt tyg med hjälp av nyans och färgbalansinställningar. Här är mitt resultat:
2. Papper och skuggor
Papper och skuggor blir alltmer populära som designstilar, men är särskilt populära i textur-tunga mönster, som de med trä. Samlingen av arbete som följer visar att papper och skuggor används på olika sätt för att presentera små bitar av information eller i vissa fall webbplatsens huvudinnehåll.
exempel
Denna skärmdump, om du inte hade märkt, kommer från en liten del av den design som vi såg i slutet av "Fabric and Stitching" avsnittet ovan. Fortsatt temat för digitalproducerad konsistens används en enkel vit form med en skrynklig skugga som gör att pappret ser ut som om det är curling.
En riktigt fin kombination av trä och krämiga papperstryck. Papperet i den här användargränssnittet används för att presentera ett utdrag av information som behövs för ett recept, med några härliga silustette-ikoner som gör det möjligt för användaren att visa, bokmärke och dela hela receptet.
Denna design är textur-tung, som kombinerar trä, papper och bandtexturer för att skapa ett tilltalande användargränssnitt. Det fotograferade träet och tejpen, i kombination med de digitalt producerade pappersstrukturerna och skuggorna, fungerar bra tillsammans.
Detta är ett av mina favorit UI-prover i posten. Rent digitalt (inklusive trästruktur) använder designen droppe och inre skuggor för att skapa ett vackert sökfält. Designen använder sig också av stygn och tygelement. Sammantaget är ett mycket användarvänligt gränssnitt som ser bra ut!
Denna design verkar inspireras av traditionella flygpostkuvert med det repeterande mönstret runt papperet. Papperet har (digitalt) häftats till träbakgrunden, vilket gör användargränssnittet som en stift och anslagstavla snarare än en platt webbsida.
Beige-cream bild- och navigeringsbakgrund har en fin droppskugga som gör att den verkar som papper, särskilt med stämplat märke och de blekade sepia-stilfotona som ser ut som de har skrivits ut. Detta passar fantastiskt med den trästrukturerade bakgrunden och den övergripande känslan av gränssnittet.
Mini-Tutorials
Skapa en enkel digital papperseffekt (Photoshop)
I den här mini-handledningen kommer vi att använda en trästruktur och grundläggande Photoshop-verktyg för att skapa en digitalpapperseffekt. Börja med att skapa ett nytt dokument med en textur eller repeterande mönster.
Välj verktyget Rektangulärt form och sätt in en form som liknar den nedan, placera den rätt längst upp på duken.
Duplicera formen och gå till Redigera → Gratis transform (eller tryck på Kommando + T). Minska formens storlek samtidigt som du håller Alt + Shift-tangenterna för att hålla formen i proportion och minska sedan storleken mot mitten.
Dra den övre ankarpunkten ovanför kanvasens överdel så att den överlappar toppen av den ursprungliga formen.
Ändra färgen på din nya form till en mycket ljus beige (nästan vit). jag använde #FFFBF8 .
Duplicera din ursprungliga form och ändra färgen till ren svart ( #000000 ).
Öka storleken på formen så att den är ett par pixlar större än den ursprungliga formen. Skapa en guide-du kan dra en guide ut ur linjalen (Visa → Visa linjaler, om den inte visas) -om 10-20 pixlar under din svarta form. Gå till Redigera → Transform → Warp.
Dra ned den nedre vänstra ankarpunkten ner mot din guide och upprepa sedan steget med det nedre högra ankret.
Tryck på Enter för att bekräfta din formtransformation. Högerklicka på verktyget Formverktyg och välj alternativet "Rasterize Layer".
Byt ut det svarta formskiktet under de andra två formerna men över träskiktet. Gå till Filter → Blur → Gaussian Blur, och sudd den svarta formen med 10 pixlar. Klicka sedan på "OK".
Sänk opaciteten hos den svarta formen till 50%. Öppna fönstret Layer Styles för din ursprungliga vita form och klicka på fliken Stroke. Applicera en 1-pixel stroke i formen med hjälp av gradientfyllningstypen, från svart till vitt med 90 ° vinkel.
Med det gjort har vi vår digitala papper-på-trä effekt! Detta är en bra teknik att använda för webbplatser.
3. Graverad typografi och mönster
Graverad typografi och mönster är en ganska vanlig teknik i avancerad webbdesign, och den blir alltmer populär i vardaglig design. Nedan finns flera exempel som använder denna stil bra i trästrukturerade gränssnitt.
exempel
Det här Instagram-användargränssnittet har en grungy trästrukturerad bakgrund och utplånade halvtransparanta bilder för att producera ett slitstarkt vintageutseende. Typografi har flera olika stilar, så att bokstäverna sticker ut och ger träbakgrunden en graverad känsla.
Sammantaget är detta ett riktigt rent trägränssnitt, med en stor och lika stor samling av olika stilar och tekniker. En som används upprepade gånger (och mycket bra) är den graverade effekten på typografi och mönster som exemplifieras i blommönster längst upp på skärmdumpen.
Metallskyltar hänger på den trästrukturerade rubriken här för att fungera som huvudnavigering. För att ge tecknen en mer realistisk graverad effekt gav designern typografi inifrån och droppe skuggor.
Trätexturer används huvudsakligen i denna design för navigeringsfältet (loggen, i det här fallet). Den graverade typografi gör att titeln visas som om någon av stenen har etsats bort för att visa trästruktur.
Ett annat exempel på graverad typografi på tecken, i detta fall trä-texturerade tecken istället för metall.
Det här träträdet använder snygga och moderna element, vilket gör det svårt att välja om det ska sättas i den här eller nästa kategori. "Köp" -knappen och ikonen på väskan har en mycket detaljerad graverad effekt, vilket gör dem fantastiskt klickbara!
Mini-Tutorials
Hur man graverar ett mönster i trä (Photoshop)
I denna mini-handledning skapar vi en etsad eller graverad träeffekt i Photoshop. Öppna ett nytt dokument och sätt in en trästruktur.
Sätt in ett av dina egna mönster, eller använd stock vector image.
När du väl har placerat vektorn korrekt, högerklicka på lagret och välj "Rasterize Layer." Högerklicka på det en gång till och välj fliken Gradient Overlay. Applicera en gradient med två färger valda från träbakgrunden, se nedan.
Välj fliken Drop Shadow och använd en vit skugga med ett normalt blandningsläge. Ändra skuggans vinkel till 90 °, och avståndet och storleken till 1 pixel. Du kan behålla de övriga inställningarna som standard.
Välj fliken Inderskugga för att applicera en skugga på insidan av ditt mönster. Detta gör det möjligt för oss att skapa den graverade effekten. Släpp skuggans opacitet till 20% och ändra vinkeln till 90 °. Ändra avståndet och storleken på skuggan till 3 pixlar vardera och behåll alla övriga inställningar som standard.
Klicka på "OK" och sedan sänka opaciteten i ditt mönsterlager till 80% för att låta en del av bakgrundsstrukturen skina igenom i all sin härlighet. Du borde sluta med detta resultat:
4. Snygga och moderna element
Trots att trätexturer ofta är kopplade till vintage- och retro-design, om de dras av korrekt kan de också användas för att komplettera moderna och snygga element, vilket du kan se från exemplen nedan.
exempel
Här är en annan skärmdump av ett gränssnitt som vi såg i föregående kategori och visar på ett annat helt annat stilelement. Skjutreglaget och rullningslisterna i denna design har snygga vita silver och gröna gradienter för ett användarvänligt gränssnitt.
Förutom tyg och stygn och graverade typografi tekniker har denna design några moderna element, till exempel 2-pixel grå-vita streck och de minimalistiska ikonerna, vilket gör det till ett attraktivt och användbart iPad-liknande gränssnitt.
En annan av mina favoritgränssnitt. Den kombinerar tyg- och trästrukturerade bilder med snygga gradienter, 2-pixelstreck, enkla ikoner och underbar typografi för många att skapa intressanta platser för användaren.
Ett mycket detaljerat gränssnitt som sammanfogar trästrukturer, tredimensionella effekter, glöd och glans framhäver för att ge ett resultat som kommer att leda till sina användare. Enpixellinjer används för att förstärka 3-D-effekten.
Glödor, skuggor och slag används för att få detta levande trägränssnitt till liv. De moderna ikonerna är dock nyckeln.
Det här lilla gränssnittet använder sig av världens naturprodukter och snygga futuristiska element för att skapa ett användargränssnitt som är attraktivt och lätt att förstå. Buller läggs till de moderna elementen, vilket gör det möjligt att passa in i trästrukturen.
Det här tangentbordet ger oss en trästruktur baserat på ett befintligt modernt element: standard iPhone UIKit. Tangentbordet fungerar på exakt samma sätt som standardtangenten och det kommer inte att förvirra användarna.
Mini-Tutorials
I den här mini-handledningen skapar vi en trägransklippare med ett urval av Photoshops lagereffekter. Skapa ett nytt dokument och sätt in en trästruktur eller ett mönster.
Välj verktyget Rundad rektangel och dra ut en lång smal form, som liknar den nedan. Mitt verktygs hörnradie är inställt på 15 pixlar.
Högerklicka på skiktformen och välj "Blandningsalternativ". Välj fliken Gradientöverlagring och lägg till en gradientfärg vald från bakgrunden och sedan en något mörkare färg. Klicka sedan på "OK".
Välj nu fliken Inderskugga och använd en svart skugga med en opacitet på 30% och en vinkel på 120 °. Släpp avståndet till 1 pixel och släpp allt annat till 0. Detta kommer att skapa en skugga i vår form, vilket gör att det ser ut att det har huggits från träbakgrunden.
Välj fliken Drop Shadow och använd en vit skugga med ett normalt blandningsläge. Ändra vinkeln till 90 °, och avståndet och storleken till 1 pixel. Lämna allt annat vid 0 pixlar. Detta ger vår form en höjdpunkt längst ner, vilket gör den mer tredimensionell och realistisk.
Zooma in i din snidade linje och välj Ellipse-verktyget. Medan du håller Shift-tangenten för att hålla formen rund, dra ut en cirkel och placera den över skjutreglaget.
Öppna fönstret "Layer Styles" för din nya cirkelform. Klicka på fliken Gradient Överlay och använd en gradient som går från ett ljusmedium till ljusgrå. Ge den en 90 ° vinkel.
Välj fliken Drop Shadow och använd en skugga till din form. Ändra avståndet till 0 pixlar och storleken till 10 pixlar.
Zooma ut för att se din reglage på 100%. Här är resultatet:
5. Tre-dimensionella effekter
Det finns inga begränsningar för tredimensionell design, och det är otroligt effektivt med trästrukturer. Denna kombination används vanligtvis för att producera "hyllor", som ses i iPhone och iPad-gränssnittet, särskilt Apples iBook-applikation.
exempel
Dessa hyllor är mycket realistiska, och skuggorna (som den på den inre hyllan i det övre högra hörnet) kommer från ett stort urval anpassade jobb (inte inbyggda Photoshop-filter).
Effekterna i denna design är ganska liknar de i den föregående. Den här gången ger effekterna ett renare och modernare utseende, medan den föregående var tänkt att se mer realistiskt ut och "användas".
Dessa iPhone-hyllor presenterar liknande tekniker. Denna gång är resultatet både modernt och realistiskt, perfekt balanserar texturerat fotografier med digitala effekter.
Denna 3-D-knapp är otroligt! Med sin kombination av trästrukturer kommer designens känsliga detaljer i hög fokus. Om en knapp som denna var framför dig, kan du inte motstå att ge det ett tryck!
En enkel men ändå effektiv 3-D-effekt har applicerats på den här navigeringsfältet, vilket gör att knapparna visas som om de arkiverar lådor. S ett smart designat element för att få användaren involverad i gränssnittet.
Skriven uteslutande för WDD av Callum Chapman, en designer och illustrationhandel som Cirkelbox Creative . Han kör också The Inspiration Blog och Picmix Store
Dela dina trä UI-mönster och illustrationer med oss, liksom alla artiklar eller handledningar som kan hjälpa dina medläsare.