Gemeenschappelijke elementen gebruikt in houten UI-ontwerp
We weten allemaal dat textuur veel wordt gebruikt in zowel modern als vintage design, hoewel in veel gevallen van ontwerp dat vele jaren geleden is geproduceerd, lawaaierige en grungy texturen onvermijdelijk waren.
Als het echter gaat om houten textuur in ontwerp, of het nu gaat om een afdrukproduct, een web- of mobiel gebruikersinterface-element of een algemene lay-out, wordt dit altijd gebruikt om de visuele aantrekkelijkheid te vergroten.
In dit artikel zullen we vijf gemeenschappelijke elementen in UI-ontwerp bekijken die houttexturen gebruiken om dit te doen.
Naast het bespreken van deze elementen en het bewonderen van enkele vrij sexy gebruikersinterfaceontwerpen die ik heb verzameld Dribbble , we zullen ook leren hoe sommige van deze effecten gereproduceerd kunnen worden door het volgen van mini-tutorials hier in dit artikel.
Deze vijf algemene elementen in het UI-ontwerp zijn:
- Stof en stiksels,
- Papier en schaduwen,
- Gegraveerde typografie en patronen,
- Slanke en moderne elementen,
- Driedimensionale effecten.
1. Stof en stiksels
Stof en stiksel zijn elementen die perfect bij de houten textuur passen, omdat beide natuurlijke, biologische producten zijn. (Toegegeven, katoen is geweven, gesneden en geverfd, en veel hout in deze vitrine is gesneden, geschuurd en behandeld, maar je begrijpt wat ik bedoel!) Kijk naar de paar voorbeelden hieronder die stof en stiksel combineren met houten texturen.
Voorbeelden
Dit zeer lichte ontwerp gebruikt een eenvoudige "steek" (alleen een streepjeslijn) om het embleem en de vlag van de cirkel te laten lijken alsof het is genaaid naar de achtergrond met een laag dekkende en getinte houtstructuur. Dat kleine beetje werkt zo goed voor zo'n eenvoudig ontwerp.
De stiksels in dit ontwerp zijn veel realistischer en combineren een volledig dekkende houtgestructureerde achtergrond met gegraveerde elementen, slagschaduwen en texturen van echte stoffen. Deze steek heeft een slagschaduw (0 pixels in grootte en 1 pixel op een afstand van 90 °), waardoor de steek eruit springt en overeenkomt met de details in de rest van het ontwerp.
De digitaal geproduceerde houten structuur maakt dit ontwerp er modern uitzien, met zijn vage hellingen en gegraveerde elementen die een enigszins driedimensionale en meer realistische weergave produceren. Een herhalend patroon wordt gebruikt om een mooi leereffect te produceren voor de badge in de linkerbovenhoek, die is gestikt volgens exact dezelfde techniek als hierboven is vermeld (met de 1-pixel slagschaduw).
Mini-Tutorials
Een eenvoudige streepjeslijn maken (Illustrator)
In deze mini-zelfstudie gebruiken we Illustrator (Ai) om een eenvoudige streepgestreepte lijn te maken om een cirkel te vormen, zoals in het eerste voorbeeld van deze sectie. Open Illustrator en selecteer de Ellipse-tool. Houd de Shift-toets ingedrukt om uw vorm in proportie te houden door een cirkel naar beneden te slepen, zoals hieronder.
Voer vanuit het deelvenster Lijn (Venster → Lijn) een tweepuntsgewichtslag uit met een versteklimiet van 4. Controleer de optie "Onderbroken lijn" en voer 12 punten in in uw eerste streepjesveld.
Je zult zien dat de lijn aan de rechterkant van onze vorm eigenlijk twee 12-puntsstreepjes bij elkaar zijn. Om dit op te lossen, laten we onze slag een beetje meer een patroon geven. Verander het streepje in 3 punten en de opening naar 12 punten, en verdubbel dan het streepje naar 6 punten en behoud de laatste opening 12 punten. Je zou eindigen met een gestreept lijn zoals hieronder (de resultaten zijn afhankelijk van de grootte van je cirkel).
Dupliceer uw vorm door deze eerst te selecteren en kies vervolgens Bewerken → Kopiëren (opdracht + C) en ten slotte Bewerken → Plakken op zijn plaats (opdracht + F). Terwijl de nieuwe vorm nog steeds is geselecteerd, houdt u de Alt + Shift-toetsen tegelijkertijd ingedrukt en verkleint u de vorm. Als u deze twee toetsen tegelijkertijd vasthoudt, blijft de vorm in proportie en wordt de grootte vanaf het middelpunt verkleind of vergroot, zodat u niet opnieuw hoeft uit te lijnen.
Selecteer de grootste van de twee cirkels. Verwijder de streek en verander de vulkleur in een bruine (of een andere kleur voor die kwestie). Selecteer nu de kleinste van de twee cirkels en verander de lijnkleur naar een lichtere kleur.
Met de kleinste van de twee cirkels nog steeds geselecteerd, dupliceert u het door het op de juiste plaats te kopiëren en te plakken. Als het eenmaal is gedupliceerd, plaatst u het onder uw oorspronkelijke vorm (Command + [), en duwt u de shape een voor een naar beneden door eenmaal op de pijl-omlaag op uw toetsenbord te drukken; verander dan de lijnkleur naar wit.
Verlaag de dekking van je witte lijn tot 50% en de dekking van je bruine lijn tot 75%.
Een realistische steek maken (Photoshop)
In deze mini-zelfstudie gebruiken we een echte structuur en enkele ingebouwde effecten van Photoshop om een realistische steek te produceren. Open een nieuw Photoshop-document en voeg een structuurstructuur naar keuze toe. Snijd de afbeelding bij zodat deze op een witte achtergrond staat.
Selecteer het gereedschap Rechthoekige selectiekader en sleep een selectie naar de binnenkant van de vorm van uw stoffentextuur. Maak een nieuwe laag en hernoem deze "Steek". Ga naar Bewerken → Lijn en pas een zwarte lijn van 1 pixel toe op je vorm.
Selecteer het gereedschap Rechthoekige selectiekader opnieuw en plaats het over uw lijn. Het maakt niet uit waar je begint. Met een gekozen positie, druk op de Delete-toets. Zorg ervoor dat u inhoud uit de laag van de streek verwijdert en niet uit de laag van de stof.
Herhaal het proces voor de rest van de gestreept lijn, zoals hieronder te zien is.
Er is een grote kans dat de steken niet symmetrisch zijn; maar dat is maar goed ook, want steken zijn zelden!
Je zou moeten eindigen met iets dat er zo uitziet:
Klik met de rechtermuisknop op uw gestreepte laag en selecteer "Overvloeimogelijkheden" om het venster Laagstijlen te openen. Selecteer het tabblad Kleuroverlay en selecteer een lichtgrijs (ik heb gebruikt #F1F1F1 ).
Selecteer nu het tabblad Slagschaduw. Breng een zwarte slagschaduw aan met een hoek van 90 °, een afstand van 1 pixel en een grootte van 0 pixels. Verlaag de dekking van de schaduw tot ergens tussen de 20 en 60%.
Selecteer de stoffenlaag en open het venster Laagstijlen. Pas een standaard slagschaduw toe met een afstand van 0 pixels en een verloopoverlay van wit naar zwart naar wit. Wijzig de overvloeimodus van uw verloopoverlay in "Vermenigvuldigen" met een dekking van 15%. Eenmaal toegepast en bekeken met 100%, zou je iets vergelijkbaars moeten hebben:
Speel rond met de kleuren van je stof met de instellingen voor tint en kleurbalans. Hier is mijn resultaat:
2. Papier en schaduw
Papier en schaduwen worden steeds populairder als ontwerpstijlen, maar zijn vooral populair in textuur-zware ontwerpen, zoals die met hout. De verzameling werk die volgt, toont dat papier en schaduwen op verschillende manieren worden gebruikt om kleine stukjes informatie te presenteren of, in sommige gevallen, de belangrijkste inhoud van de website.
Voorbeelden
Deze schermafbeelding is, voor het geval je het nog niet had opgemerkt, afkomstig van een klein gedeelte van het ontwerp dat we aan het einde van het bovenstaande gedeelte 'Stof en stiksels' hebben gezien. Voortzetting van het thema van digitaal geproduceerde textuur, een eenvoudige witte vorm met een kromgetrokken aangepaste schaduw wordt gebruikt om het papier eruit zien alsof het is curling.
Een hele mooie combinatie van houten en verfrommelde papiertexturen. Het papier in deze gebruikersinterface wordt gebruikt om een stukje informatie te presenteren dat nodig is voor een recept, met enkele mooie silhouet-achtige pictogrammen waarmee de gebruiker het volledige recept kan bekijken, bookmarken en delen.
Dit ontwerp is textuurzwaar en combineert hout, papier en tapetexturen om een aantrekkelijke gebruikersinterface te creëren. Het gefotografeerde hout en de tape, in combinatie met de digitaal geproduceerde papierstructuren en schaduwen, werken goed samen.
Dit is een van mijn favoriete UI-voorbeelden in de post. Puur digitaal (inclusief de houten textuur), gebruikt het ontwerp druppel en innerlijke schaduwen om een prachtig zoekveld te creëren. Het ontwerp maakt ook gebruik van de steken en het stoffen element. Over het algemeen een zeer gebruikersvriendelijke interface die er geweldig uitziet!
Dit ontwerp lijkt geïnspireerd te zijn op traditionele luchtpost-enveloppen met het zich herhalende patroon rondom het papier. Het papier is (digitaal) geniet op de houten achtergrond, waardoor de gebruikersinterface lijkt op een speld en een mededelingenbord in plaats van op een platte webpagina.
De beige-crème afbeelding en navigatie-achtergrond heeft een fijne slagschaduw waardoor deze op papier lijkt, vooral met de gestempelde badge en de vervaagde sepia-achtige foto's die eruitzien alsof ze zijn afgedrukt. Dit past wonderwel in de houtgestructureerde achtergrond en het algehele gevoel van de interface.
Mini-Tutorials
Een eenvoudig digitaal papiereffect creëren (Photoshop)
In deze mini-zelfstudie gebruiken we een houtstructuur en eenvoudige Photoshop-gereedschappen om een digitaal papiereffect te creëren. Begin met het maken van een nieuw document met een textuur of een herhalend patroon.
Selecteer het gereedschap Rechthoekige vorm en plaats een vorm die lijkt op de vorm hieronder en plaats deze recht boven aan het canvas.
Dupliceer de vorm en ga naar Bewerken → Vrije transformatie (of druk op Command + T). Verklein de vorm terwijl u de toetsen Alt + Shift ingedrukt houdt om de vorm in verhouding te houden en verlaag de grootte naar het midden toe.
Sleep het bovenste ankerpunt boven de bovenkant van het canvas zodat het de bovenkant van de originele vorm overlapt.
Verander de kleur van je nieuwe vorm in een zeer lichtbeige (bijna wit). ik gebruikte #FFFBF8 .
Dupliceer je originele vorm en verander de kleur in puur zwart ( #000000 ).
Vergroot de vorm zodanig dat deze een paar pixels groter is dan de oorspronkelijke vorm. Maak een handleiding - u kunt een hulplijn uit de liniaal slepen (Beeld → Linialen tonen, als dit niet wordt weergegeven) - ongeveer 10 tot 20 pixels onder uw zwarte vorm. Ga naar Bewerken → Transformeren → Verdraaien.
Sleep het ankerpunt linksonder naar beneden in de richting van je gids en herhaal de stap met het anker rechts onderaan.
Druk op Enter om uw vormtransformatie te bevestigen. Klik met de rechtermuisknop op het hulpmiddel Shapes Layer en selecteer de optie "Lagen Rasteriseren".
Herplaats de zwarte vormlaag onder de andere twee vormen maar boven de houtlaag. Ga naar Filter → Vervagen → Gaussiaans vervagen en vervaag de zwarte vorm met 10 pixels. Klik vervolgens op "OK".
Verlaag de dekking van de zwarte vorm tot 50%. Open het venster Laagstijlen voor uw originele witte vorm en klik op het tabblad Streek. Pas een lijn van 1 pixel toe op de vorm met behulp van het verloopvultype, van zwart naar wit met een hoek van 90 °.
Als dat klaar is, hebben we ons digitale papier-op-hout effect! Dit is een geweldige techniek om te gebruiken voor websites.
3. Gegraveerde typografie en patronen
Gegraveerde typografie en patronen is een vrij algemene techniek in geavanceerd webontwerp en wordt steeds populairder in het dagelijkse ontwerp. Hieronder staan enkele voorbeelden die deze stijl goed gebruiken in houtgestructureerde interfaces.
Voorbeelden
De gebruikersinterface van deze Instagram-applicatie heeft een grungy houtachtige achtergrond en verwassen semi-transparante afbeeldingen om een versleten vintage uiterlijk te produceren. De typografie heeft verschillende stijlen, waardoor het opschrift opvalt en de houten achtergrond een gegraveerd gevoel geeft.
Over het algemeen is dit een echt schone houten gebruikersinterface, met een grote en even grote verzameling van verschillende stijlen en technieken. Een die herhaaldelijk (en zeer goed) wordt gebruikt, is het gegraveerde effect op de typografie en patronen - geïllustreerd in de bloempatronen bovenaan de schermafbeelding.
Er wordt hier een metalen bewegwijzering opgehangen aan de header met houttextuur om als hoofdnavigatie te dienen. Om de tekens een realistischer gegraveerd effect te geven, gaf de ontwerper de typografie innerlijke en slagschaduwen.
Houtstructuren worden voornamelijk gebruikt in dit ontwerp voor de navigatiebalk (in dit geval het logboek). De gegraveerde typografie laat de titel verschijnen alsof een deel van de steen is weggeëtst om de houten textuur te tonen.
Nog een voorbeeld van gegraveerde typografie op tekens, in dit geval met hout getextureerde tekens in plaats van metaal.
Deze houten UI gebruikt strakke en moderne elementen, waardoor het moeilijk is om te kiezen of u deze in deze of de volgende categorie wilt plaatsen. De "Koop" -knop en het pictogram met de boodschappentassen hebben een zeer gedetailleerd gegraveerd effect, waardoor ze prachtig klikbaar zijn!
Mini-Tutorials
Een patroon in hout graveren (Photoshop)
In deze mini-zelfstudie maken we een geëtst of gegraveerd houteffect in Photoshop. Open een nieuw document en voeg een houtstructuur in.
Voeg een van uw eigen patronen in of gebruik een vectorafbeelding.
Nadat u de vector correct hebt gepositioneerd, klikt u met de rechtermuisknop op de laag en selecteert u 'Layer raster maken'. Klik er nog een keer op en selecteer het tabblad Gradient Overlay. Pas een verloop toe met twee kleuren geselecteerd uit de houten achtergrond, zoals hieronder te zien is.
Selecteer het tabblad Slagschaduw en pas een witte schaduw toe met een normale overvloeimodus. Wijzig de hoek van de schaduw in 90 ° en de afstand en de grootte in 1 pixel. U kunt de andere instellingen op hun standaardwaarden behouden.
Selecteer het tabblad Inner Shadow om een schaduw toe te passen op de binnenkant van uw patroon. Dit zal ons toelaten om het gegraveerde effect te creëren. Zet de dekking van de schaduw op 20% en verander de hoek naar 90 °. Wijzig de afstand en de grootte van de schaduw in elk 3 pixels en bewaar alle andere instellingen standaard.
Klik op "OK" en verminder de dekking van uw patroonlaag tot 80% om een deel van de achtergrondstructuur in al zijn glorie te laten schijnen. Je zou met dit resultaat moeten eindigen:
4. Slanke en moderne elementen
Ondanks dat houten texturen vaak gekoppeld zijn aan vintage en retro design, kunnen ze, als ze correct worden afgetrokken, ook worden gebruikt om moderne en slanke elementen aan te vullen, zoals je kunt zien aan de hand van de onderstaande voorbeelden.
Voorbeelden
Hier is nog een schermafbeelding van een interface die we in de vorige categorie hebben gezien, waarbij we een heel ander gestileerd element laten zien. De schuif en schuifbalken in dit ontwerp hebben slanke wit-zilver en groene gradiënten voor een gebruiksvriendelijke interface.
Naast de stof en steken en gegraveerde typografietechnieken, heeft dit ontwerp enkele moderne elementen, zoals grijs-witte lijnen met 2 pixels en de minimalistische pictogrammen, die zorgen voor een aantrekkelijke en bruikbare iPad-achtige interface.
Een andere van mijn favoriete interfaces. Het combineert stof en hout-getextureerde afbeeldingen met slanke verlopen, 2-pixel lijnen, eenvoudige pictogrammen en prachtige typografie om veel interessante punten voor de gebruiker te creëren.
Een zeer gedetailleerde interface waarin houten structuren, driedimensionale effecten, gloed en glans worden samengevoegd om een resultaat te produceren dat zijn gebruikers zal verbazen. Eén pixellijnen worden gebruikt om het 3D-effect te versterken.
Gloei, schaduwen en slagen worden gebruikt om deze levendige houten interface tot leven te brengen. De moderne iconen zijn echter de sleutel.
Deze mooie kleine interface maakt gebruik van 's werelds natuurlijke producten en slanke futuristische elementen om een UI te maken die aantrekkelijk en gemakkelijk te begrijpen is. Aan de moderne elementen wordt ruis toegevoegd, waardoor deze in de houtstructuur-header past.
Dit toetsenbord geeft ons een houten structuur gebaseerd op een bestaand modern element: de standaard iPhone UIKit. Het toetsenbord werkt op exact dezelfde manier als het standaard toetsenbord en zal gebruikers dus niet verwarren.
Mini-Tutorials
In deze mini-zelfstudie maken we een houten UI-schuifknop met behulp van een selectie van Photoshop-laageffecten. Maak een nieuw document en voeg een houten structuur of patroon toe.
Selecteer het gereedschap Afgeronde rechthoek en sleep een lange smalle vorm, vergelijkbaar met de onderstaande. De hoek van mijn gereedschapsradius is ingesteld op 15 pixels.
Klik met de rechtermuisknop op de Shapes-laag en selecteer "Blending Options." Selecteer het tabblad Gradient Overlay en voeg een verloopkleur toe die is geselecteerd op de achtergrond en vervolgens een iets donkerdere kleur. Klik vervolgens op "OK".
Selecteer nu het tabblad Inwendige schaduw en pas een zwarte schaduw toe met een dekking van 30% en een hoek van 120 °. Laat de afstand tot 1 pixel vallen en laat al het andere op 0 neer. Dit zorgt voor een schaduw in onze vorm, waardoor het lijkt alsof het uit de houten achtergrond is gesneden.
Selecteer het tabblad Slagschaduw en pas een witte schaduw toe met een normale overvloeimodus. Verander de hoek naar 90 ° en de afstand en de grootte naar 1 pixel. Laat al het andere op 0 pixels. Dit geeft onze vorm een hoogtepunt langs de onderkant, waardoor het er driedimensionaal en realistischer uitziet.
Zoom in op uw uitgesneden lijn en selecteer het Ellips-gereedschap. Houd de Shift-toets ingedrukt om de vorm rond te houden, sleep een cirkel naar buiten en plaats deze over de schuifbalk.
Open het venster "Laagstijlen" voor uw nieuwe cirkelvorm. Klik op het tabblad Verloop Overlapping en pas een verloop toe van licht-medium naar lichtgrijs. Geef het een hoek van 90 °.
Selecteer het tabblad Slagschaduw en pas een schaduw op uw vorm toe. Wijzig de afstand in 0 pixels en de grootte in 10 pixels.
Zoom uit om uw schuifregelaar op 100% te bekijken. Hier is het resultaat:
5. Driedimensionale effecten
Er zijn geen beperkingen op het driedimensionale ontwerp en het is ongelooflijk effectief met houten texturen. Deze combinatie wordt vaak gebruikt om 'planken' te produceren, zoals te zien in de iPhone- en iPad-interfaces, met name de iBook-app van Apple.
Voorbeelden
Deze planken zijn zeer realistisch en de schaduwen (zoals die op de binnenplank in de rechterbovenhoek) zijn afkomstig van een groot aantal aangepaste taken (geen ingebouwde Photoshop-filters).
De effecten in dit ontwerp zijn redelijk vergelijkbaar met die in de vorige. Deze keer brengen de effecten een schonere en meer moderne look, terwijl de vorige bedoeld was om er realistischer en "gebruikt" uit te zien.
Deze iPhone-schappen bieden vergelijkbare technieken. Deze keer is het resultaat zowel modern als realistisch, perfect in evenwicht brengende gestructureerde foto's met digitale effecten.
Deze 3-D-knop is ongelooflijk! Door de combinatie van houten texturen komen de delicate details van het ontwerp hoog in het vaandel. Als een knop als deze voor je was, kun je het niet laten om hem een zetje te geven!
Er is een eenvoudig maar effectief 3D-effect toegepast op deze navigatiebalk, waardoor de knoppen eruitzien alsof ze laden opslaan. S een slim ontworpen element om de gebruiker bij de interface te betrekken.
Exclusief voor WDD geschreven door Callum Chapman, een ontwerper en illustrator die handelt als Circlebox Creative . Hij runt ook The Inspiratieblog en Picmix Store
Deel uw houten UI-ontwerpen en illustraties met ons, evenals artikelen of tutorials die uw medelezers kunnen helpen.