Przeanalizujemy aktualne trendy w projektowaniu cyfrowym, a na początek Gradienty, jeden z najczęściej wymienianych tematów w wynikach naszego badania trendów, przeprowadzonego dzięki współpracy użytkowników i jury Awwwards. Zapoznaj się z pełnymi wynikami ankiety w naszej książce NOW. A Contemporary Landscape for Digital Thinkers.

Gradienty są modne już od jakiegoś czasu, początkowo powróciły w konwencjonalny sposób w tłach i obrazach. Spotify ponownie je spopularyzował, stosując gradienty duotone na zdjęciach jako charakterystyczny element marki w swoich kampaniach i mikrostronach. Tutaj można znaleźć mały tutorial, jak tworzyć gradienty duotone w photoshopie.

W tym roku widzieliśmy różne wielokolorowe gradienty z żywymi paletami kolorów i nieregularnymi kształtami z efektami rozmycia i zniekształcenia. Gradienty są obecnie wykorzystywane na wiele sposobów, ale najbardziej charakterystyczne, jeśli chodzi o trendy, jest rozszerzenie ich zastosowania na elementy drugorzędne w obrębie kompozycji, takie jak hover, tytuły, elementy 3D, ikony i inne.

• 

iPhone X reprezentuje paradygmat trendów 2018 roku. W jego landing page’u, reklamach i wielu elementach kampanii promocyjnych, nad tytułami, tekstami czy nawet izotypem stosowane są gradienty o różnych tonacjach. Jednak w tłach, a szczególnie w projekcie na ekranie głównym iPhone X, gradienty NIE są jednolite jak tradycyjne gradienty liniowe czy radialne, ale wielokolorowe z nieregularnym blendowaniem.

Gradienty w 3D? Vertex color i colormap style

Mówienie o gradientach w 3D wydaje się oczywiste, skoro oświetlenie sceny generuje gradację światła na powierzchni obiektu, ale to, co jest nieodłączne w tym trendzie, to właśnie wykorzystanie gradientów jako tekstury obiektu, czasem imitujące techniki vertex color i colormap gradient. Obie techniki pełnią więcej niż tylko funkcję czysto dekoracyjną, ponieważ są używane do reprezentowania danych lub mapowania obiektów 3D.

Typy gradientów

Możemy mieszać kolory na wiele sposobów, najczęściej są to gradienty liniowe lub radialne z różnymi parametrami, takimi jak promień, orientacja, krycie lub punkty koloru. Co jest teraz modne, jak widzieliśmy w przypadku iPhoneX, jest użycie niejednolitych mieszanek, które wykorzystują siatki gradientów lub inne techniki. Dzięki siatce gradientowej zniekształcamy powierzchnię gradientu, aby wygenerować dowolny kształt. Możemy znaleźć wiele rodzajów gradientów takich jak monotone, duotone, multicolor, rampy gradientowe, etc, jak pokazano na poniższej grafice.

Przydatne narzędzia dla gradientów CSS

Aby odtworzyć te efekty w CSS istnieje mnóstwo dostępnych narzędzi, które pozwalają na ich tworzenie poprzez edytory wizualne, po prostu kopiując i wklejając kod CSS, jak można zobaczyć tutaj: Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Easing Gradients in CSS.

• Khroma

  

• Webgradients

  

• Color Space

  

• Cool Hue

  

• Easing Gradients

  

• UI Gradients

  

Pobierz plik źródłowy Gradients!

Zaangażuj się w gradienty, pobierz plik źródłowy za darmo w formacie wektorowym .ai lub pdf, aby przeprowadzić własne eksperymenty projektowe z gradientami z plakatu.

DOWNLOAD HERE

Awwwards Gradients Collection

Jak zawsze dokonaliśmy wyboru SOTD i nominowanych, abyś mógł zobaczyć te efekty w użyciu, mamy nadzieję, że znajdziesz trochę inspiracji w Awwwards Collections lub w naszej książce, NOW. A Contemporary Landscape for Digital Thinkers, która omawia główne trendy w projektowaniu stron internetowych w tym roku.

• 
• 
• WebGL Model 3D W WebGL
• 

.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• Strona Główna W Paralaksie