Společné prvky používané v dřevěném designu UI
Všichni víme, že textura je hodně využívána jak v moderním, tak v ročníku, ačkoli v mnoha případech, které byly vyrobeny před mnoha lety, byly hlučné a výstřední textury nevyhnutelné.
Pokud jde o dřevěnou texturu v designu, nicméně, ať už v tiskovém produktu, webovém nebo mobilním prvku uživatelského rozhraní nebo obecném uspořádání, je vždy používána pro zvýšení vizuální přitažlivosti.
V tomto článku se podíváme na pět společných prvků v designu UI, které používají dřevěné textury k tomu právě.
Kromě diskuze o těchto prvcích a obdivu některých vzhledů sexy uživatelského rozhraní, které jsem shromáždil Dribbble , budeme se také učit, jak reprodukovat některé z těchto efektů pomocí mini tutoriálů tady v tomto článku.
Tyto pět společných prvků v návrhu UI jsou:
- Tkanina a šití,
- Papír a stíny,
- Gravírovaná typografie a vzory,
- Elegantní a moderní prvky,
- Trojrozměrné efekty.
1. Látka a šití
Tkanina a šití jsou prvky, které dokonale doplňují dřevěnou strukturu, protože jsou oba přírodní, ekologické výrobky. (Je pravda, že bavlna je tkaná, broušená a barvená a hodně dřeva v této vitríně bylo řezáno, broušeno a ošetřováno - ale dostanete to, co myslím!) Podívejte se na několik níže uvedených příkladů, které kombinují látku a šicí prvky s dřevěné textury.
Příklady
Tento velmi lehký design využívá základní "steh" (jen přerušovaný zdvih), aby se znak kruhu a banner objevily, jako by byly šité na pozadí s nízkou opacitou a tónovaným dřevem. Ten malý dotek funguje tak dobře pro tak jednoduchý design.
Šití v tomto designu je mnohem realističtější, kombinuje plné opacity s dřevěným texturovaným pozadím s rytými prvky, stínovými stíny a skutečnými texturami. Tento steh má stín (0 pixelů a 1 pixel při vzdálenosti 90 °), což umožňuje, aby se steh vyčlenil a odpovídal detaile ve zbytku konstrukce.
Digitálně vyrobená dřevěná struktura dává designu moderní vzhled se slabými přechody a rytými prvky, které vytvářejí trochu trojrozměrný a realističtější vzhled. Opakující se vzorek se používá k vytvoření krásného efektu kůže pro odznak v levém horním rohu, který byl šit přes stejnou techniku jako ten, který byl zmíněn výše (s 1 pixelovým drop-shadowem).
Mini-tutoriály
Vytvoření jednoduchého čárkovaného řádku (Illustrator)
V tomto mini-tutoriálu použijeme Illustrator (Ai), abychom vytvořili jednoduchou čárku pro vytvoření kruhu, jako v prvním příkladu této části. Otevřete Illustrator a vyberte nástroj Ellipse. Zatímco držíte klávesu Shift, abyste udrželi tvar v poměru, přetáhněte kružnici, jak je uvedeno níže.
Z panelu Zdvih (Okno → Tah) použijte dvoubodový zátěž s ohybovým limitem 4. Zkontrolujte možnost "Čárkovaná čára" a do prvního pole pomlčky vložte 12 bodů.
Všimnete si, že čára na pravé straně našeho tvaru je ve skutečnosti dvě dvanáctibodové pomlčky dohromady. Chcete-li to opravit, dejte nám trochu víc vzoru. Změňte pomlčku na 3 body a mezeru na 12 bodů a poté zdvojnásobte pomlčku na 6 bodů a udržujte konečnou mezeru 12 bodů. Měli byste skončit tak, jak je to níže (výsledky se budou lišit v závislosti na velikosti vašeho kruhu).
Duplikujte svůj tvar nejprve výběrem a potom zvolte Upravit → Kopírovat (Příkaz + C) a nakonec Upravit → Vložit do místa (Příkaz + F). Při novém tvaru, který jste ještě zvolili, podržte klávesy Alt + Shift současně a zmenšte velikost tvaru. Při současném držení těchto dvou tlačítek bude poměrný tvar udržovat a snížit nebo zvětšit velikost od středu, což eliminuje nutnost opětovného nastavení.
Vyberte větší ze dvou kruhů. Odstraňte zdvih a změňte barvu výplně na hnědou (nebo na jinou barvu). Nyní zvolte menší z obou kruhů a změňte barvu tahu na světlejší hnědou.
S menším ze dvou kruhů, které jste ještě vybrali, zkopírujte a vložte na místo. Jakmile je duplikován, umístěte jej pod svůj původní tvar (Command + [) a posuňte tvar dolů jedním stisknutím šipky dolů na klávesnici jednou; pak změňte barvu tahu na bílou.
Zmenšete opacitu vašeho kruhu bílé mrtvice na 50% a neprůhlednost kruhu hnědého zdvihu na 75%.
Vytváření realistického stehu (Photoshop)
V tomto mini-tutoriálu použijeme skutečnou textilní strukturu a některé vestavěné efekty aplikace Photoshop, které vytvoří realistický steh. Otevřete nový dokument aplikace Photoshop a vložte textura podle vašeho výběru. Ořízněte snímek tak, aby seděl na bílém pozadí.
Vyberte nástroj Rectangular Marquee a přetáhněte výběr na vnitřní stranu tvaru textilie. Vytvořte novou vrstvu a přejmenujte ji na "Stitch". Přejděte na položku Upravit → Tah a použijte 1-pixelový černý tah na tvar.
Znovu vyberte nástroj obdélníkového výběru a umístěte ho přes tah. Nezáleží na tom, odkud začnete. Po zvolení pozice stiskněte klávesu Delete. Ujistěte se, že odstraníte obsah z vrstvy tahu a nikoli vrstvy tkaniny.
Opakujte postup pro zbytek čáry, kterou vidíte níže.
Existuje velká šance, že stehy nebudou symetrické; ale to je dobrá věc, protože stehy jsou zřídka!
Měli byste skončit s něčím, co vypadá takto:
Kliknutím pravým tlačítkem myši na hladkovanou vrstvu a výběrem možnosti "Blending" otevřete okno Styly vrstvy. Vyberte kartu Překrývání barev a vyberte světle šedou barvu (používá se #F1F1F1 ).
Nyní vyberte kartu Drop Shadow. Použijte stín černého stínu s úhlem 90 °, vzdáleností 1 pixelu a velikostí 0 pixelů. Snižte opacitu stínu na hodnotu mezi 20 a 60%.
Vyberte vrstvu textilií a otevřete okno Styly vrstvy. Použijte výchozí odstín stínu se vzdáleností 0 pixelů a gradientovou překryvnou vrstvu z bílé na černou na bílou. Změňte režim prolnutí Gradient Overlay na "násobit" s neprůhledností 15%. Jakmile budete aplikován a zobrazen ve výši 100%, měli byste skončit s něčím podobným:
Zahrajte si s barvami tkaniny pomocí nastavení odstínu a vyvážení barev. Zde je můj výsledek:
2. Papír a stíny
Papír a stíny se stávají stále oblíbenějšími jako designové styly, ale jsou obzvláště oblíbené u konstrukcí těžkých z textury, jako jsou dřevěné desky. Následující sbírka dokumentů ukazuje, že papír a stíny jsou používány různými způsoby, které představují malé množství informací nebo v některých případech i hlavní obsah webu.
Příklady
Tento snímek, pokud jste si nevšimli, pochází z malého dílu designu, který jsme viděli na konci části "Fabric and Stitching" výše. Pokračování v tématu digitálně vyrobené textury, jednoduchý bílý tvar s warped vlastní stín je používán dělat papír vypadat jako to je curling.
Skvělá kombinace dřevěných a pokrčených textur papíru. Papír v tomto uživatelském rozhraní slouží k prezentaci úryvku informací potřebných pro recept s několika krásnými ikonami ve stylu siluety, které umožňují uživateli prohlížet, ukládat do záložky a sdílet celý recept.
Tento design je těžký pro textury, kombinuje dřevěné, papírové a páskové textury a vytváří přitažlivé uživatelské rozhraní. Fotografované dřevo a páska, kombinované s digitálně vytvořenými strukturami papíru a stínů, dobře spolupracují.
Toto je jeden z mých oblíbených vzorků UI v příspěvku. Čistě digitální (včetně dřevěné textury), design používá kapky a vnitřní stíny pro vytvoření krásného vyhledávacího pole. Design také využívá stehů a tkaninového prvku. Celkově velmi uživatelsky přívětivé rozhraní, které vypadá skvěle!
Tento design se zdá být inspirován tradičními leteckými obálkami s opakujícím se vzorem kolem papíru. Papír byl (digitálně) sešíván na dřevěné pozadí, takže uživatelské rozhraní vypadalo jako pin a nástěnka spíše než plochá stránka.
Béžově krémový obraz a navigační pozadí mají jemný stín, který z něj vypadá jako papír, zejména s razítkem a vybledlými fotografiemi ve stylu sepií, které vypadají, jako by byly vytištěny. To se skvěle hodí na pozadí s textem a celkovým vzhledem k rozhraní.
Mini-tutoriály
Vytváření efektu jednoduchého digitálního papíru (Photoshop)
V tomto mini-tutoriálu použijeme texturu dřeva a základní nástroje Photoshop k vytvoření efektu digitálního papíru. Začněte vytvářením nového dokumentu s textem nebo opakujícím se vzorem.
Vyberte nástroj obdélníkového tvaru a vložte podobný tvar jako níže a umístěte jej přímo na vrchní část plátna.
Duplikujte tvar a přejděte na položku Edit → Free Transform (nebo stiskněte Command + T). Zmenšete velikost tvaru při současném držení kláves Alt + Shift, aby se tvar zachoval v poměru, a poté snížte velikost směrem ke středu.
Přetáhněte horní kotevní bod nad horní část plátna tak, aby překrýval horní část původního tvaru.
Změňte barvu nového tvaru na velmi světlou béžovou (téměř bílou). Použil jsem #FFFBF8 .
Duplikujte původní tvar a změňte barvu na černou barvu ( #000000 ).
Zvětšete velikost tvaru tak, aby byla o pár pixelů větší než původní tvar. Vytvoření průvodce - můžete přetáhnout průvodce z pravítka (Zobrazit → Zobrazit pravítka, pokud se nezobrazí) - přibližně 10 až 20 pixelů pod černým tvarem. Přejděte na Upravit → Transformovat → Warp.
Přetáhněte dolní kotevní knoflík dolů směrem k vaší vodítce a potom opakujte krok se spodní pravou kotvou.
Stiskněte klávesu Enter pro potvrzení změny tvaru. Klepněte pravým tlačítkem myši na nástroj Vrstvy tvarů a vyberte možnost "Rastrovat vrstva".
Změňte vrstvu černého tvaru pod ostatní dva tvary, ale nad dřevěnou vrstvu. Přejděte na Filtr → Blur → Gaussian Blur a rozostřete černý tvar o 10 pixelů. Poté klikněte na tlačítko OK.
Snižte opacitu černého tvaru na 50%. Otevřete okno Styly vrstvy pro svůj původní bílý tvar a klikněte na kartu Tah. Použijte 1-pixelový zdvih do tvaru pomocí gradientového výplňového typu, který vychází z černé do bílé s úhlem 90 °.
S tímto provedením máme náš digitální efekt papíru na dřevo! To je skvělá technika, kterou je možné použít pro webové stránky.
3. Rytá typografie a vzory
Gravírovaná typografie a vzory jsou poměrně běžnou technikou v moderním návrhu webových stránek a stávají se stále populárnějšími v každodenním designu. Níže uvádíme několik příkladů, které tento styl dobře používají v rozhraní s textem na dřevo.
Příklady
Toto uživatelské rozhraní aplikace Instagram má hrubé dřevo-texturované pozadí a vyprázdněné poloprůhledné obrazy pro vytvoření opotřebovaného vzhledu. Typografie má několik různých stylů, které umožňují vykreslit nápisy a vyzdobit dřevěné pozadí.
Celkově jde o opravdu čisté dřevěné uživatelské rozhraní s velkou a stejně velkou sbírkou různých stylů a technik. Jeden použitý opakovaně (a velmi dobře) je rytý efekt na typografii a vzory - ilustrovaný v květinových vzorech v horní části obrazovky.
Kovová značka je zavěšena na hlavičce s textem, která slouží jako hlavní navigace. Chcete-li, aby označení znamenaly realističtější rytý efekt, návrhář dal typografii vnitřní a stín.
Textury dřeva se v tomto návrhu používají především pro navigační lištu (v tomto případě protokol). Rytá typografie dělá titul vypadat, jako by některý kámen byl leptaný pryč ukázat dřevěnou strukturu.
Dalším příkladem ryté typografie na znameních, v tomto případě znameními na dřevo namísto kovu.
Tento dřevěný uživatelský rozhraní používá elegantní a moderní prvky, což ztěžuje volbu, zda se má v této nebo další kategorii. Tlačítko "Koupit" a ikona nákupní tašky mají velmi podrobný rytý efekt, což je skvěle nalepitelné!
Mini-tutoriály
Jak vydělit vzorek do dřeva (Photoshop)
V tomto mini-tutoriálu vytvoříme efekt leptaného nebo rytého dřeva ve Photoshopu. Otevřete nový dokument a vložte texturu dřeva.
Vložte jeden z vlastních vzorů nebo použijte vektorový obrázek.
Jakmile umístíte vektor správně, klikněte pravým tlačítkem na vrstvu a vyberte možnost "Rastrovat vrstvu". Klepněte pravým tlačítkem myši na tuto vrstvu a vyberte kartu Překrývání přechodem. Použijte gradient dvěma barvami vybranými z dřevěného pozadí, jak je vidět níže.
Vyberte kartu Drop Shadow a použijte bílý stín s normálním režimem Blending. Změňte úhel stínu na 90 ° a vzdálenost a velikost na 1 pixel. Ostatní nastavení můžete ponechat ve výchozím nastavení.
Klepnutím na kartu Inner Stadow použijte stín na vnitřní stranu vzoru. To nám umožní vytvořit rytý efekt. Zastrčte opacitu stínu na 20% a změňte úhel na 90 °. Změňte vzdálenost a velikost stínu na 3 pixely a zachovávejte všechna ostatní nastavení ve výchozím nastavení.
Klikněte na tlačítko "OK" a poté snížte opacitu vrstvy vzoru na 80%, abyste umožnili, aby některá struktura pozadí leskla ve své slávě. Měli byste skončit s tímto výsledkem:
4. Elegantní a moderní prvky
Navzdory tomu, že dřevěné textury jsou často spojeny s vintage a retro designem, pokud jsou správně vytaženy, mohou být také použity k doplnění moderních a elegantních prvků, jak vidíte z níže uvedených příkladů.
Příklady
Tady je další screenshot rozhraní, které jsme viděli v předchozí kategorii, ukazující jiný zcela jiný stylizovaný prvek. Posuvník a rolovací lišty v tomto provedení mají elegantní bílo-stříbrné a zelené přechody pro uživatelsky přívětivé rozhraní.
Stejně jako textilie a stehy a ryté typografické techniky, tento design má některé moderní prvky, jako jsou 2-pixel šedo-bílé tahy a minimalistické ikony, které umožňují atraktivní a použitelné rozhraní iPad.
Další mé oblíbené rozhraní. Kombinuje textilní a dřevěné obrazy s elegantními přechody, 2-pixelovými tahy, jednoduchými ikonami a nádhernou typografií, která mnoha uživatelům vytváří zajímavé body.
Vysoce podrobné rozhraní, které spojuje dřevěné textury, trojrozměrné efekty, záře a lesklé světelné efekty, které produkují výsledek, který ohromí uživatele. Jednodílné čáry se používají k posílení 3-D efektu.
Záře, stíny a tahy se používají k tomu, aby živé dřevěné rozhraní přineslo život. Moderní ikony jsou však klíčem.
Toto krásné malé rozhraní využívá světových přírodních produktů a elegantních futuristických prvků, které vytvářejí atraktivní a snadno pochopitelné uživatelské rozhraní. Do moderních prvků se přidává hluk, který umožňuje, aby se vešly do záhlaví se strukturou dřeva.
Tato klávesnice nám dává dřevěnou strukturu založenou na existujícím moderním prvku: výchozím iPhone UIKit. Klávesnice pracuje přesně stejně jako standardní klávesnice a tak uživatelům nezaměňuje.
Mini-tutoriály
V tomto mini-tutoriálu vytvoříme dřevěný posuvník uživatelského rozhraní pomocí výběru efektů vrstvy aplikace Photoshop. Vytvořte nový dokument a vložte dřevěnou strukturu nebo vzor.
Vyberte nástroj Zaoblený obdélník a vytáhněte dlouhý úzký tvar, podobný tomu, který je uveden níže. Poloměr rohu nástroje je nastaven na 15 pixelů.
Klepněte pravým tlačítkem myši na vrstvu Tvary a vyberte možnost "Možnosti kombinace." Vyberte kartu Překrývání přechodem a přidejte barvu přechodu vybranou z pozadí a pak trochu tmavší barvu. Poté klikněte na tlačítko OK.
Nyní vyberte kartu Vnitřní stín a použijte černý stín s neprůhledností 30% a úhlem 120 °. Rozložte vzdálenost na 1 pixel a vše ostatní na 0. Tím vytvoříte stín uvnitř našeho tvaru, takže vypadá, jako by byl vytesán z dřevěného pozadí.
Vyberte kartu Drop Shadow a použijte bílý stín s normálním režimem Blending. Změňte úhel na 90 ° a vzdálenost a velikost na 1 pixel. Nechte všechno ostatní za 0 pixelů. To nám dává našemu tvaru vrchol podél dna, takže vypadá více trojrozměrně a realisticky.
Přibližte do vyřezané čáry a vyberte nástroj elipsy. Zatímco přidržíte klávesu Shift, abyste tvar udrželi, přetáhněte kružnici a umístěte jej přes posuvník.
Otevřete okno "Styly vrstvy" pro nový tvar kruhu. Klepněte na záložku Překrývání přechodem a použijte gradient od světelného až po světle šedou. Dejte mu úhel 90 °.
Vyberte kartu Drop Shadow a do tvaru aplikujte stín. Změňte vzdálenost na 0 pixelů a velikost na 10 pixelů.
Chcete-li zobrazit posuvník ve výši 100%, oddálte. Zde je výsledek:
5. Třírozměrné efekty
Neexistují žádná omezení pro trojrozměrný design a jsou neuvěřitelně efektivní s dřevěnými strukturami. Tato kombinace se běžně používá k výrobě "regálů", jak je vidět na rozhraní iPhone a iPad - zejména v aplikaci Apple iBook.
Příklady
Tyto regály jsou vysoce realistické a stíny (jako je ten na vnitřní poličce v pravém horním rohu) pocházejí z velkého výběru vlastních úloh (nikoli vestavěných filtrů Photoshopu).
Účinky tohoto provedení jsou poměrně podobné účinkům v předchozím. Tentokrát efekty přinášejí čistší a modernější vzhled, zatímco předchozí by měl vypadat realističtěji a "používán".
Tyto police iPhone mají podobné techniky. Tentokrát se jedná o moderní a realistický obraz, který dokonale vyváží strukturované fotografie s digitálními efekty.
Toto tlačítko 3-D je neuvěřitelné! Svojí kombinací dřevěných textur přichází do detailu jemné detaily designu. Pokud takové tlačítko bylo před vámi, neexistuje způsob, jakým byste dokázal odolat tomu, že byste to udělal!
Jednoduchý, ale efektivní 3-D efekt byl aplikován na tento navigační panel, takže se tlačítka objevují, jako kdyby se nacházely zásuvky. S je chytře navržený prvek, aby se uživatel zapojil do rozhraní.
Napsal výhradně WDD od Callum Chapman, návrhář a ilustrátor obchodování jako Circlebox Creative . On také provozuje The Inspiration Blog a Picmix Store
Sdílejte s námi své návrhy a ilustrace z dřevěného UI, stejně jako všechny články nebo výukové programy, které mohou pomoci vašim kolegům čtenářům.