Wspólne elementy używane w drewnianym interfejsie użytkownika
Wszyscy wiemy, że teksturę wykorzystuje się zarówno w projektowaniu nowoczesnym, jak i vintage, chociaż w wielu przypadkach projektów wyprodukowanych wiele lat temu, hałaśliwe i nieczytelne tekstury były nieuniknione.
Jeśli chodzi o drewnianą teksturę w designie, to czy to w produkcie do druku, w internetowym lub mobilnym elemencie interfejsu użytkownika, czy w ogólnym układzie, zawsze jest wykorzystywany do zwiększenia atrakcyjności wizualnej.
W tym artykule przyjrzymy się pięciu wspólnym elementom w projekcie interfejsu użytkownika, które wykorzystują tekstury drewna, aby to osiągnąć.
Oprócz omawiania tych elementów i podziwiania całkiem seksownych projektów interfejsu użytkownika, z których się zbierałem Dribbble będziemy także uczyć się, jak odtwarzać niektóre z tych efektów, wykonując mini-samouczki tutaj w tym artykule.
Te pięć wspólnych elementów w projekcie interfejsu użytkownika to:
- Tkanina i przeszycia,
- Papier i cienie,
- Grawerowana typografia i wzory,
- Eleganckie i nowoczesne elementy,
- Efekty trójwymiarowe.
1. Tkanina i przeszycia
Tkanina i przeszycia to elementy, które idealnie pasują do drewnianej faktury, ponieważ oba są naturalnymi, ekologicznymi produktami. (Trzeba przyznać, że bawełna jest utkana, cięta i farbowana, a dużo drewna w tej wizytówce zostało wyciętych, wyszlifowanych i poddanych obróbce - ale masz na myśli to, co mam na myśli!) Spójrz na kilka przykładów poniżej, które łączą elementy tkaniny i szwy z drewniane tekstury.
Przykłady
Ta bardzo lekka konstrukcja wykorzystuje podstawowy "ścieg" (tylko przerywany link do obrysu), aby emblemat koła i baner wyglądały tak, jakby zostały zszyte na tle o niskiej nieprzezroczystości i podbarwionym drewnie. Ten mały dotyk działa tak dobrze dla tak prostej konstrukcji.
Szwy w tym projekcie są o wiele bardziej realistyczne, łącząc pełne, nieprzezroczyste, drewniane tło z grawerowanymi elementami, cieniami i fakturami z prawdziwej tkaniny. Ścieg ten ma cień (0 pikseli i 1 piksel w odległości 90 °), dzięki czemu ścieg wyróżnia się i pasuje do szczegółów w pozostałej części projektu.
Wytworzona cyfrowo struktura drewna sprawia, że ten projekt wygląda nowocześnie, a jego słabe gradienty i grawerowane elementy dają nieco trójwymiarowy i bardziej realistyczny wygląd. Powtarzający się wzór służy do uzyskania pięknego skórzanego efektu na plakietce w lewym górnym rogu, który został zszyty przy użyciu dokładnie tej samej techniki, co wspomniana powyżej (z 1-pikselowym cieniem).
Mini-samouczki
Tworzenie prostej linii przerywanej (Illustrator)
W tym mini-samouczku użyjemy Illustratora (Ai), aby utworzyć prostą kreskowaną linię, tworząc krąg, jak w pierwszym przykładzie tej sekcji. Otwórz program Illustrator i wybierz narzędzie Elipsa. Przytrzymując klawisz Shift, aby zachować proporcje kształtu, przeciągnij kółko, jak poniżej.
Z panelu Obrys (Okno → Obrys) zastosuj 2-punktowy skok ciężkości z Limitem ukośnym równym 4. Sprawdź opcję "Linia przerywana" i wstaw 12 punktów do pierwszego pola kreski.
Zauważysz, że linia po prawej stronie naszego kształtu to właściwie dwa 12-punktowe kreski połączone razem. Aby to naprawić, nadaj naszemu skoku nieco więcej schematu. Zmień kreskę na 3 punkty, a różnicę na 12 punktów, a następnie podwoimy linię do 6 punktów i zachowaj ostatnią lukę 12 punktów. Powinieneś skończyć z obrysowaną linią podobną do poniższej (wyniki będą się różnić w zależności od rozmiaru twojego kręgu).
Powiel kształt, najpierw wybierając go, a następnie wybierz Edycja → Kopiuj (Command + C) i wreszcie Edytuj → Wklej na miejsce (Command + F). Przy wciąż wybranym nowym kształcie przytrzymaj jednocześnie klawisze Alt + Shift i zmniejsz rozmiar kształtu. Trzymanie tych dwóch kluczy w tym samym czasie zachowa proporcje i zmniejszy lub zwiększy rozmiar od środka, eliminując konieczność ponownego ustawiania.
Wybierz większy z dwóch kręgów. Usuń obrys i zmień kolor wypełnienia na brązowy (lub dowolny inny kolor). Teraz wybierz mniejszy z dwóch okręgów i zmień kolor obrysu na jaśniejszy brązowy.
Mając nadal wybrany mniejszy z dwóch kręgów, powiel go, kopiując i wklejając w miejscu. Po powieleniu umieść go pod oryginalnym kształtem (Command + [)) i przesuń kształt o jeden, naciskając raz strzałkę w dół na klawiaturze; następnie zmień kolor obrysu na biały.
Zmniejsz krycie białego kółka do 50%, a krycie brązowego okręgu obrysu do 75%.
Tworzenie realistycznego ściegu (Photoshop)
W tym mini-samouczku użyjemy prawdziwej tekstury tkaniny i niektórych wbudowanych efektów programu Photoshop, aby stworzyć realistyczny ścieg. Otwórz nowy dokument programu Photoshop i wstaw wybraną teksturę tkaniny. Przytnij obraz, aby znalazł się na białym tle.
Wybierz narzędzie Zaznaczanie prostokątne i przeciągnij zaznaczenie po wewnętrznej stronie kształtu tekstury tkaniny. Utwórz nową warstwę i zmień jej nazwę na "Ścieg". Przejdź do Edycja → Obrys i zastosuj 1-pikselowy czarny obrys do kształtu.
Wybierz ponownie narzędzie Zaznaczanie prostokątne i umieść je nad swoim obrysem. Nie ma znaczenia, od czego zacząć. Po wybraniu pozycji naciśnij klawisz Delete. Upewnij się, że usuwasz zawartość z warstwy obrysu, a nie z warstwy tkaniny.
Powtórz ten proces dla reszty obrysowanej linii, jak pokazano poniżej.
Istnieje duża szansa, że szwy nie będą symetryczne; ale to dobrze, bo szwy rzadko są!
Powinieneś skończyć z czymś, co wygląda tak:
Kliknij wybraną warstwę prawym przyciskiem myszy i wybierz "Opcje mieszania", aby otworzyć okno Style warstw. Wybierz kartę Nakładka kolorów i wybierz jasnoszary (użyłem #F1F1F1 ).
Teraz wybierz kartę Cień. Zastosuj czarny cień z kątem 90 °, odległością 1 piksela i rozmiarem 0 pikseli. Obniż krycie cienia do wartości między 20 a 60%.
Wybierz warstwę tkaniny i otwórz okno Style warstw. Zastosuj domyślny cień w odległości 0 pikseli, a nakładka gradientu zmieni się z białego na czarny na biały. Zmień tryb mieszania nakładki gradientu na "Pomnóż" z kryciem wynoszącym 15%. Po zastosowaniu i obejrzeniu w 100%, powinieneś skończyć z czymś podobnym do tego:
Baw się kolorami tkaniny, korzystając z ustawień odcienia i balansu kolorów. Oto mój wynik:
2. Papier i cienie
Papier i cienie stają się coraz bardziej popularne jako style projektowania, ale są szczególnie popularne w ciężkich konstrukcjach, takich jak drewno. Poniższy zbiór prac pokazuje, że papier i cienie są wykorzystywane na różne sposoby w celu przedstawienia małych fragmentów informacji lub, w niektórych przypadkach, głównej treści witryny.
Przykłady
Ten zrzut ekranu, na wypadek gdybyś tego nie zauważył, pochodzi z małej części projektu, który widzieliśmy na końcu sekcji "Tkanina i przeszycia" powyżej. Kontynuując tematykę tekstur wyprodukowanych cyfrowo, prosty biały kształt z wygiętym niestandardowym cieniem jest używany, aby papier wyglądał tak, jakby był zwijany.
Naprawdę ładne połączenie drewnianych i zmiętych tekstur z papieru. Papier w tym interfejsie służy do przedstawienia fragmentu informacji potrzebnych do przepisu, z pięknymi ikonami w stylu sylwetki, które pozwalają użytkownikowi przeglądać, tworzyć zakładki i udostępniać pełny przepis.
Ta konstrukcja jest ciężka w fakturze, łącząc teksturę drewna, papieru i taśmy, aby stworzyć atrakcyjny interfejs użytkownika. Sfotografowane drewno i taśma, w połączeniu z cyfrowo wytworzonymi teksturami i cieniami papieru, dobrze ze sobą współpracują.
To jedna z moich ulubionych próbek interfejsu użytkownika w poście. Czysto cyfrowy (w tym drewniana faktura), projekt wykorzystuje kroplę i wewnętrzne cienie, aby stworzyć piękne pole wyszukiwania. W projekcie wykorzystano także szwy i element tkaniny. Ogólnie rzecz biorąc, bardzo przyjazny dla użytkownika interfejs, który wygląda świetnie!
Wygląda na to, że ten wzór inspirowany jest tradycyjnymi kopertami pocztowymi z powtarzającym się wzorem wokół papieru. Papier został (cyfrowo) zszyty na drewnianym tle, dzięki czemu interfejs użytkownika wygląda jak szpilka i tablica ogłoszeń, a nie płaska strona internetowa.
Tło obrazu i nawigacji w beżowo-kremowym kolorze ma delikatny cień, który sprawia, że wygląda jak papier, zwłaszcza z wytłoczoną plakietką i wyblakłymi fotografiami w stylu sepii, które wyglądają tak, jakby zostały wydrukowane. To wspaniale komponuje się z teksturą tła i ogólnym wyczuciem interfejsu.
Mini-samouczki
Tworzenie prostego efektu cyfrowego papieru (Photoshop)
W tym mini-samouczku wykorzystamy teksturę drewna i podstawowe narzędzia Photoshopa, aby stworzyć cyfrowy efekt papieru. Zacznij od utworzenia nowego dokumentu z teksturą lub powtarzającym się wzorem.
Wybierz narzędzie Kształt prostokątny i wstaw kształt podobny do przedstawionego poniżej, umieszczając go tuż przy samej górze płótna.
Zduplikuj kształt i przejdź do Edycja → Swobodna transformacja (lub naciśnij Command + T). Zmniejsz rozmiar kształtu, przytrzymując klawisze Alt + Shift, aby zachować proporcje kształtu, a następnie zmniejsz rozmiar w kierunku środka.
Przeciągnij górny punkt kontrolny nad górną krawędź płótna, tak aby zachodził on na wierzch pierwotnego kształtu.
Zmień kolor swojego nowego kształtu na bardzo jasny beż (prawie biały). użyłem #FFFBF8 .
Powiel swój oryginalny kształt i zmień kolor na czysty czarny ( #000000 ).
Zwiększ rozmiar kształtu, aby był o kilka pikseli większy od oryginalnego kształtu. Utwórz przewodnik - możesz przeciągnąć przewodnik poza linijkę (Widok → Pokaż linijki, jeśli nie jest wyświetlany) - około 10 do 20 pikseli poniżej czarnego kształtu. Idź do Edytuj → Przekształć → Osnowa.
Przeciągnij dolny lewy punkt kontrolny w dół w kierunku swojego przewodnika, a następnie powtórz krok z prawą dolną kotwicą.
Naciśnij Enter, aby potwierdzić transformację kształtu. Kliknij prawym przyciskiem myszy narzędzie Warstwy kształtu i wybierz opcję "Rasterize Layer".
Zmień położenie czarnej warstwy kształtów pod pozostałymi dwoma kształtami, ale nad warstwą drewna. Przejdź do opcji Filtr → Rozmycie → Rozmycie gaussowskie i zamień czarny kształt o 10 pikseli. Następnie kliknij "OK".
Obniż krycie czarnego kształtu do 50%. Otwórz okno Style warstw dla oryginalnego białego kształtu i kliknij kartę Obrys. Zastosuj 1-pikselowy obrys do kształtu za pomocą wypełnienia gradientowego, przechodząc od czerni do bieli pod kątem 90 °.
Po wykonaniu tego mamy nasz cyfrowy efekt "papier na drewnie"! Jest to świetna technika do wykorzystania na stronach internetowych.
3. Grawerowana typografia i wzory
Grawerowana typografia i wzory to dość powszechna technika w zaawansowanym projektowaniu stron internetowych, która staje się coraz bardziej popularna w codziennym projektowaniu. Poniżej znajduje się kilka przykładów, które dobrze wykorzystują ten styl w interfejsach teksturowanych drewnem.
Przykłady
Ten interfejs użytkownika aplikacji Instagram ma nieczysty tło z teksturą drewna i wyprane półprzezroczyste obrazy, aby uzyskać efekt vintage. Typografia ma kilka różnych stylów, dzięki czemu litery wyróżniają się i nadają drewnianemu tło wrażenie grawerowane.
Ogólnie rzecz biorąc, jest to naprawdę czysty drewniany interfejs użytkownika, z dużą i równie wspaniałą kolekcją różnych stylów i technik. Wielokrotnie używanym (i bardzo dobrze) jest grawerowany efekt na typografii i wzorach - na przykład w kwiecistych wzorach u góry ekranu.
Metalowe oznakowanie jest zawieszone na nagłówku z teksturą drewna i służy jako główna nawigacja. Aby nadać znakom bardziej realistyczny efekt grawerowania, projektant nadał typografii wewnętrzne i cienie.
Tekstury drewna są używane przede wszystkim w tym projekcie na pasku nawigacji (w tym przypadku w dzienniku). Wygrawerowana typografia sprawia, że tytuł wygląda tak, jakby część kamienia została wyryta, aby pokazać drewnianą teksturę.
Kolejny przykład grawerowanej typografii na znakach, w tym przypadku znaków z drewna zamiast metalu.
Ten drewniany interfejs użytkownika wykorzystuje eleganckie i nowoczesne elementy, co utrudnia wybór, czy umieścić go w tej czy następnej kategorii. Przycisk "Kup" i torba na zakupy mają bardzo szczegółowy efekt grawerowania, dzięki czemu są cudownie klikalne!
Mini-samouczki
Jak wygrawerować wzór w drewnie (Photoshop)
W tym mini-tutorialu stworzymy wytrawiony lub grawerowany efekt drewna w Photoshopie. Otwórz nowy dokument i włóż drewnianą teksturę.
Włóż jeden z własnych wzorów lub użyj grafiki wektorowej.
Po prawidłowym umieszczeniu wektora, kliknij prawym przyciskiem myszy warstwę i wybierz "Rasteryzuj warstwę". Kliknij ponownie prawym przyciskiem myszy i wybierz kartę Nakładka gradientu. Zastosuj gradient, używając dwóch kolorów wybranych z tła drewnianego, jak pokazano poniżej.
Wybierz kartę Upuszczanie cienia i zastosuj biały cień w normalnym trybie mieszania. Zmień kąt cienia na 90 °, a odległość i rozmiar na 1 piksel. Możesz zachować inne ustawienia domyślnie.
Wybierz kartę Cień wewnętrzny, aby zastosować cień do wnętrza wzoru. To pozwoli nam stworzyć efekt grawerowania. Zmniejsz krycie cienia do 20% i zmień kąt na 90 °. Zmień odległość i rozmiar cienia na 3 piksele i zachowaj wszystkie inne ustawienia domyślnie.
Kliknij "OK", a następnie zmniejsz krycie warstwy wzorca do 80%, aby zabłysnąć część tekstury tła w całej okazałości. Powinieneś skończyć z tym wynikiem:
4. Eleganckie i nowoczesne elementy
Pomimo, że drewniane tekstury często łączą się ze stylem vintage i retro, jeśli zostaną prawidłowo pociągnięte, można je również wykorzystać do uzupełnienia nowoczesnych i eleganckich elementów, jak widać z poniższych przykładów.
Przykłady
Oto kolejny zrzut ekranu interfejsu, który widzieliśmy w poprzedniej kategorii, pokazujący inny zupełnie inny element stylu. Suwaki i paski przewijania w tym projekcie mają eleganckie biało-srebrne i zielone gradienty dla przyjaznego dla użytkownika interfejsu.
Oprócz tkaniny i szwów oraz grawerowanych technik typograficznych, ta konstrukcja ma kilka nowoczesnych elementów, takich jak 2-pikselowe szaro-białe kreski i minimalistyczne ikony, które tworzą atrakcyjny i użyteczny interfejs podobny do iPada.
Kolejny z moich ulubionych interfejsów. Łączy w sobie tkaniny i obrazy o strukturze drewna z eleganckimi gradientami, 2-pikselową kreską, prostymi ikonami i wspaniałą typografią dla wielu, tworząc interesujące miejsca dla użytkownika.
Bardzo szczegółowy interfejs, który łączy drewniane tekstury, efekty trójwymiarowe, blask i połysk, aby uzyskać efekt, który ogłuszy użytkowników. Linie jednopikselowskie służą do wzmocnienia efektu trójwymiarowego.
Blask, cienie i obrysy służą do ożywienia tego żywego drewnianego interfejsu. Nowoczesne ikony są jednak kluczowe.
Ten piękny mały interfejs wykorzystuje naturalne produkty na świecie i eleganckie futurystyczne elementy do tworzenia interfejsu użytkownika, który jest atrakcyjny i łatwy do zrozumienia. Hałas jest dodawany do nowoczesnych elementów, dzięki czemu można go dopasować do nagłówka z teksturą drewna.
Ta klawiatura daje nam drewnianą teksturę opartą na istniejącym nowoczesnym elemencie: domyślny iPhone UIKit. Klawiatura działa w taki sam sposób jak domyślna klawiatura, więc nie będzie mylić użytkowników.
Mini-samouczki
W tym mini-samouczku utworzymy drewniany suwak interfejsu użytkownika przy użyciu różnych efektów warstwy programu Photoshop. Utwórz nowy dokument i wstaw drewnianą teksturę lub wzór.
Wybierz narzędzie Zaokrąglony prostokąt i przeciągnij długi wąski kształt, podobny do poniższego. Promień narożnika mojego narzędzia jest ustawiony na 15 pikseli.
Kliknij prawym przyciskiem myszy warstwę Kształty i wybierz "Opcje mieszania". Wybierz kartę Nakładka gradientu i dodaj kolor gradientu wybrany z tła, a następnie nieco ciemniejszy kolor. Następnie kliknij "OK".
Teraz wybierz kartę Cień wewnętrzny i zastosuj czarny cień z nieprzezroczystością 30% i kątem 120 °. Zmniejsz odległość do 1 piksela i upuść wszystko inne na 0. To stworzy cień wewnątrz naszego kształtu, dzięki czemu będzie wyglądało jak zostało wyrzeźbione z drewnianego tła.
Wybierz kartę Upuszczanie cienia i zastosuj biały cień w normalnym trybie mieszania. Zmień kąt na 90 °, a odległość i rozmiar na 1 piksel. Pozostaw wszystko pozostałe na 0 pikseli. Dzięki temu nasz kształt stanie się atrakcją wzdłuż dna, dzięki czemu będzie wyglądał bardziej trójwymiarowo i realistycznie.
Przybliż do swojej rzeźbionej linii i wybierz narzędzie Elipsa. Przytrzymując klawisz Shift, aby utrzymać kształt, przeciągnij kółko i umieść je nad suwakiem.
Otwórz okno "Style warstw" dla nowego kształtu okręgu. Kliknij zakładkę Gradient Overlay i zastosuj gradient przechodzący od jasnego do jasnoszarego. Podaj kąt 90 °.
Wybierz kartę Upuszczanie cienia i zastosuj cień do swojego kształtu. Zmień odległość na 0 pikseli, a rozmiar na 10 pikseli.
Oddal, aby wyświetlić suwak w 100%. Oto wynik:
5. Efekty trójwymiarowe
Nie ma żadnych ograniczeń w trójwymiarowym projekcie i jest niesamowicie skuteczny w przypadku drewnianych tekstur. Ta kombinacja jest powszechnie używana do produkcji "półek", jak widać w interfejsach iPhone'a i iPada - w szczególności aplikacji Apple iBook.
Przykłady
Te półki są bardzo realistyczne, a cienie (takie jak ten na wewnętrznej półce w prawym górnym rogu) pochodzą z dużego wyboru niestandardowych zadań (bez wbudowanych filtrów Photoshopa).
Efekty tego projektu są dość podobne do tych z poprzedniego. Tym razem efekty przynoszą czystszy i bardziej nowoczesny wygląd, podczas gdy poprzednie miały wyglądać bardziej realistycznie i "wykorzystywać".
Te półki na iPhone'a mają podobne techniki. Tym razem wynik jest zarówno nowoczesny, jak i realistyczny, doskonale równoważąc teksturowane fotografie z cyfrowymi efektami.
Ten przycisk 3-D jest niesamowity! Dzięki połączeniu drewnianych faktur, delikatne szczegóły projektu stają się coraz bardziej widoczne. Jeśli taki przycisk był przed tobą, nie ma szans, byś mógł się mu oprzeć!
Prosty, ale skuteczny efekt trójwymiarowy został zastosowany do tego paska nawigacyjnego, dzięki czemu przyciski wyglądają tak, jakby składały szuflady. S sprytnie zaprojektowany element, aby użytkownik był zaangażowany w interfejs.
Napisany wyłącznie dla WDD przez Callum Chapman, projektanta i ilustratora handlującego jako Kreacja Circlebox . Prowadzi także The Blog inspiracji i Sklep Picmix
Podziel się z nami swoimi drewnianymi rysunkami i ilustracjami UI, a także wszelkimi artykułami lub samouczkami, które mogą pomóc twoim czytelnikom.