Articles

Inspirational web gradients and where to find them

Web gradients are back as a design element for the online world. Stały się one łatwym sposobem na ożywienie Twojej witryny.

Jeśli są dobrze stosowane, dają oko jednolite uczucie, które zachęca użytkownika do pozostania na stronie. To uczucie wynika z braku ostrych krawędzi i przerw w strukturze strony.

gradienty sieciowe - nyc_pride jak widać w powyższym przykładzie, gradient uspokaja działanie obrazu tła, aby był odpowiednim tłem dla tego projektu interfejsu użytkownika.

chcesz poznać powód?

sekret tkwi w tym, że harmonia, którą rozprzestrzenia gradient, wywodzi się z zjawisk w przyrodzie, gdzie w większości nie pojawiają się ostre krawędzie. Wszystko ma organiczny kształt lub miękkie przejścia.

również ludzie mają świetne widzenie kolorów i lubią widzieć kolory. Wyobraź sobie czarno-biały gradient. To zależy od przypadku, ale najprawdopodobniej nie wygląda to tak, że w wielu przypadkach preferowane są kolorowe gradienty.

Dlaczego uważasz, że wszyscy lubią oglądać zachody słońca?

gradienty www - gradient zachodu Słońca

czy po prostu stawia głowę w niebo?

gradienty sieci web - gradient natury

Korzystanie z gradientów w tle strony internetowej może być również dyskretnym sposobem prowadzenia widoku użytkownika przez zawartość bez potrzeby umieszczania irytujących strzałek na pierwszym planie.

pierwszy plan i tak powinien być używany do ważnych informacji, a tło może spełniać podrzędny cel.

zastosowane do elementów takich jak przyciski i ikony gradienty mogą również prowadzić do łatwego efektu 3D.

nie zawsze jest łatwo znaleźć odpowiedni gradient i zastosować go prawidłowo z tymi wszystkimi korzyściami.

nie martw się. Jest rozwiązanie.

istnieje wiele narzędzi online, które oferują już wiele przygotowanych gradientów zarówno dla inspiracji, jak i bezpośrednio do łatwego zintegrowania ich z Twoją stroną internetową.

teraz musisz tylko dowiedzieć się, które narzędzie najlepiej odpowiada twoim potrzebom.

zaczynajmy.

Inspirational web gradients…

web gradients - symodd

jak wspomniano, symodd jest klasycznym przykładem tego, jak dobre gradienty sieci mogą działać jako Proste tło, które jest interesujące i przyciągające uwagę.

gradienty sieci Web - qards

nie tylko używa Qards gradientu jako tła, ale także są one stosowane do prawie każdego pojedynczego elementu, szczególnie do ikon i przycisków.

gradienty sieciowe - gogoro

Gogoro używa gradientu w kształcie, który czyni go bardziej dynamicznym i wspiera cel marki.

Jak widać na tych stronach chodzi o znalezienie odpowiedniej równowagi i stosowanie kolorów z umiarem.

nie jest to gradient inspirujący:

gradienty www - badExample

Ten gradient jest tak brzydki, że muszę go tutaj przeprosić, ponieważ tak bardzo boli oko. Ma zbyt wiele kolorów, które są bardzo różne. Ponadto zwykły czarny tekst na pierwszym planie wygląda na przesunięty i jest tłumiony przez gradient.

tak więc, jeśli po obejrzeniu tych przykładów nadal nie jesteś pewien, czy możesz zastosować gradient, który jest w stanie wspierać Twój projekt tak, jak powinien, możesz zagłębić się w projektowanie stron internetowych i Grafiki.

za mało?

profesjonalne projektowanie stron internetowych

dowiedz się więcej o naszym kursie podpisu.
Wybierz najlepszy harmonogram
do nauki ONLINE lub w szkole.

zobacz kurs

postępuj zgodnie z tym przewodnikiem, aby lepiej zrozumieć typy gradientów i doradzić najlepsze praktyki.

…i gdzie je znaleźć

gradienty sieci Web - uiGradients
gradienty sieci web - uiGradients

uiGradients jest bardzo łatwy w użyciu, ponieważ ma tylko dwa główne ekrany. Po załadowaniu możesz bezpośrednio zobaczyć losowy gradient na całym ekranie.

za pomocą strzałek po bokach możesz przełączać się w ramach dużej oferty WSZYSTKICH rodzajów gradientów. Drugi ekran pokazuje wszystkie gradienty jako listę do przewijania i sortowania według kolorów.

atmosfera tworzona przez gradienty sieciowe jest wspierana przez jej indywidualną nazwę. W ramach specjalnej funkcji można również obrócić gradient, aby zobaczyć, jak wygląda z innej perspektywy.

dla osób, które chcą dodać swój gradient do społeczności, istnieje opcja dodania gradientu do kolekcji poprzez GitHub. To sprawia, że różnorodność gradientów jest prawie nieograniczona.

uigradents zapewnia trzy sposoby zapisywania wybranego gradientu. Jeśli chcesz odtworzyć gradient w oprogramowaniu do projektowania graficznego lub kodzie, możesz po prostu skopiować kod koloru sześciokątnego.

aby bezpośrednio zaimplementować swoją stronę, możesz uzyskać kod CSS.

aby zapisać gradient jako inspirację wystarczy pobrać plik JPEG.

WebGradients

gradienty sieci Web - WebGradients

To narzędzie zaczyna się od pokazania kolekcji 180 gradientów sieci jako długiej listy, którą można przewijać. Gdy chcesz zobaczyć więcej z jednego gradientu, po prostu kliknij na swój wybór, a kolor pojawi się na całym ekranie.

każdy gradient ma nazwę, dzięki czemu można go później zastosować bardziej konkretnie.

WebGradients jest prowadzony przez itmeo, firmę, która dostarcza wiele cyfrowych narzędzi online. Ich usługa gradientu jest w tym przypadku bezpłatna, chyba że nie chcesz pobierać pliku szkicu lub Photoshopa.

podobnie jak w uigradents masz również trzy możliwości zapisania nowej inspiracji gradientu tutaj.

dla każdego gradientu możesz zapisać duży plik PNG, aby użyć go jako tła dla własnego projektu graficznego.

aby użyć dokładnych kolorów i gradientu w oprogramowaniu do projektowania graficznego lub kodzie, możesz skopiować kod koloru sześciokątnego lub pobrać wersję gradientu CSS.

coolHue

gradienty www - coolhue

ten zbiór gradientów jest już wyświetlany przy pierwszym otwarciu strony. Możesz wybierać spośród 60 kolorowych gradientów. Po prostu przewiń w każdym przypadku sześć płytek w rzędzie tej odmiany gradientu.

Niestety nie ma możliwości wyświetlania gradientu w pełnym rozmiarze.

miłym dodatkiem do coolHue jest animacja po najechaniu kursorem na płytki gradientu, co daje namacalne wrażenie.

gradienty sieci dostarczą Ci swoją atmosferę tylko poprzez kolory. Dlatego nie mają nazw w tym narzędziu. Dlatego w prawym dolnym rogu masz więcej opcji szkicu i Photoshopa.

po najechaniu kursorem na wybrany gradient pojawiają się kolejne dwie opcje. Możesz skopiować kod CSS w celu łatwej implementacji do kodu lub pobrać mały plik PNG.

Jeśli chcesz użyć dokładnych kolorów, możesz po prostu skopiować kod koloru szesnastkowego spod gradientu.

ColorSpace

colorspace

ColorSpace oferuje możliwość wyboru i zastosowania koloru gradientu w 10 różnych kierunkach. Aby zastosować kolor, możesz wybrać z menu Kolor, które się pojawi, tak samo jak w oprogramowaniu do edycji obrazu. Możesz również wkleić kod koloru szesnastkowego, aby uzyskać dokładne kolory, których chcesz użyć.

gradient jest stosowany na tle całego ekranu. Daje to bardzo dobre wyczucie nastroju kolorów i motywuje do wyboru koloru, który Twoim zdaniem najlepiej pasuje do odpowiedniego tematu, którego szukasz.

w przestrzeni kolorów możesz również skopiować adres URL wybranego gradientu kolorów. Dzięki temu bardzo łatwo jest udostępniać Opcje koloru bez konieczności zapisywania pliku, a następnie wysyłania go jako załącznika lub wysyłania specyfikacji poza tym, czym jest kolor. Mogą po prostu zobaczyć, na co patrzyłeś, klikając wysłany link i będą mieli wszystkie potrzebne informacje, kody szesnastkowe i kod CSS.

Jeśli jednak wolisz zapisać plik obrazu, niestety ta strona nie daje takiej opcji.

Ultimate CSS Gradient Generator

Web gradients - Ultimate CSS Gradient Generator

teraz dochodzimy do bardziej złożonych narzędzi, które w tym przypadku, jak sama nazwa mówi, są używane tylko do integracji z kodem CSS.

interfejs jest podzielony na cztery części i przypomina typowy program do projektowania graficznego. Możesz dostosować lub utworzyć ustawienia wstępne, wyświetlić ten wynik w małym podglądzie i spojrzeć na pełny kod CSS.

ostateczny Generator gradientu CSS jest częścią rozszerzenia przeglądarki ColorZilla. Narzędzie gradient zapewnia nieograniczone możliwości tworzenia gradientów sieci.

możesz dodać dowolną liczbę kolorów, dostosować odcień i nasycenie tak, jak znasz to z oprogramowania do projektowania graficznego, odwrócić gradient i ustawić kolory, krycie i lokalizację gradientu.

poza tym możesz zapisać własny utworzony gradient do ustawień wstępnych, istnieje tylko jeden sposób na eksport go za pomocą kodu CSS lub SASS.

ale wcześniej możesz ustawić rozmiar gradientu, zmienić jego orientację na różne kierunki i wybrać format koloru spośród pięciu podanych opcji.

problemy z podjęciem decyzji?

uiGradients WebGradients coolHue Gradientify Gradients.io CSS Gradient Generator
Full-screen view + + +
Switch in full-screen view +
List view + + + + + +
Amount of gradients almost unlimited 180 60 45 24 unlimited
Sort gradients by colour
Named gradients + + + +
Rotate gradient (change orientation) + +
Change colour opacity +
Change colour location +
More than two colours + +
Change hue/saturation +
Reverse colours + +
Adding new gradient + +
Import image +
Import CSS code + +
Change export size +
Hex Color Code + + + + +
CSS code + + + + +
Chose colour format (CSS) +
JPEG file 1920 × 1080
PNG file 2400 × 2000 500 × 500

to, jakiego narzędzia gradienty sieciowe najlepiej użyć, zależy zawsze od projektu, czasu, jaki masz, poziomu indywidualności lub innych wymagań jakościowych.

powyższa tabela może pomóc Ci zdecydować, jakiego narzędzia najlepiej użyć do uzyskania pożądanego wyniku.

pamiętasz najważniejszą rzecz?

nie używaj zbyt wielu kolorów – najlepszą praktyką jest użycie tylko dwóch kolorów, które również nie różnią się zbytnio.

należy również zwrócić uwagę na ogólny projekt gradientu, sposób, w jaki zastosujesz go później do swojego projektu i jak wpasuje się w jego otoczenie.

uigradents oferuje wszystkie ważne funkcje wizualne, jak widać na stole. To narzędzie pozwala wyobrazić gradient dla projektu w najlepszy możliwy sposób.

Jeśli chcesz głębiej dostosować gradient do wysokiej jakości projektu internetowego, możesz połączyć uigradents z ostatecznym generatorem gradientów CSS, importując kod CSS lub pobrany obraz.

teraz jesteś gotowy zrobić to sam. Jeśli zdecydujesz się na pracę z gradientami, daj nam znać na Twitterze.

profesjonalne projektowanie stron internetowych

dowiedz się więcej o naszym kursie podpisu.
Wybierz najlepszy harmonogram
do nauki ONLINE lub w szkole.

zobacz kurs

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.