Articles

Inspirativní web přechody a kde je najít

Web přechody jsou vrátí se ZPĚT jako designový prvek pro online svět. Staly se snadným způsobem, jak oživit váš web.

Pokud jsou dobře aplikovány, dávají oku jednotný pocit, který vyzývá uživatele, aby zůstal na webu. Tento pocit vyplývá z nedostatku drsných hran a zlomů ve struktuře stránky.

web přechody - nyc_pride Jak můžete vidět ve výše uvedeném příkladu, gradient uklidní akce obrázek na pozadí, aby to bylo vhodné pro pozadí tohoto návrhu UI.

Chcete vědět důvod?

tajemství je, že harmonie gradient se šíří pochází z jevů v přírodě, kde většinou žádné drsné hrany se objeví. Všechno má organický tvar nebo měkké přechody.

lidé mají také skvělé barevné vidění a rádi vidí barvy. Představte si černobílý přechod. Záleží na případu, ale s největší pravděpodobností to nevypadá, že velké a barevné přechody jsou preferovány v mnoha případech.

proč si myslíte, že každý rád sleduje západy slunce?

webové gradienty - sunset gradient

nebo jen položí hlavu k obloze?

web přechody - příroda gradient

Pomocí gradientů v pozadí webové stránky, může být také diskrétní způsob, jak vést návštěvníka pohled přes obsahu, aniž byste museli místo otravné šípy v popředí.

popředí by mělo být stejně použito pro důležité informace a pozadí může plnit podřízený účel.

aplikován na prvky, jako jsou tlačítka a ikony přechody může také vést ke snadnému 3D efekt.

není vždy snadné najít vhodný gradient a správně jej aplikovat se všemi těmito výhodami.

nebojte se. Existuje řešení.

existuje mnoho nástrojů online, které již nabízejí spoustu připravených přechodů buď jen pro inspiraci, nebo přímo pro jejich snadnou integraci do vašeho webu.

nyní stačí zjistit, který nástroj bude nejlépe vyhovovat vašim potřebám.

začněme.

Inspirativní web přechody…

web přechody - symodd

Jak již bylo zmíněno, symodd je klasický příklad toho, jak dobrý web přechody může pracovat jako jednoduchý pozadí, které je zajímavé a chytat stejně.

web přechody - qards

nejen, že používá Qards gradient jako pozadí, ale také jsou aplikovány téměř každý prvek zvlášť, ikony a tlačítka.

webové přechody-gogoro

Gogoro používá gradient ve tvaru, který ho činí dynamičtějším a podporuje účel značky.

jak můžete vidět na těchto webových stránkách, je to všechno o nalezení správné rovnováhy a používání barev s mírou.

Není inspirativní gradient:

web přechody - badExample

Tento gradient je tak ošklivá, že se musím omluvit, představí se tu, protože to bolí oko tak moc. Má příliš mnoho barev, které jsou velmi odlišné. Také prostý černý text v popředí vypadá posunutý a potlačený gradientem.

Takže, pokud poté, co viděl tyto příklady jsou stále ještě není zcela jistý, jestli můžeš použít gradient, který je schopen podporovat váš projekt tak, jak by mělo, můžete jít hlouběji do webu a grafický design.

nestačí?

WEB DESIGN PROFESSIONAL

Dozvědět se více o náš podpis kurz.
Vyberte si nejlepší rozvrh
ke studiu ONLINE nebo ve škole.

Zobrazit kurz

postupujte podle této příručky, abyste lépe porozuměli typům přechodů a radili o osvědčených postupech.

…a kde je najít

web přechody - uiGradients
web přechody - uiGradients

uiGradients je velmi snadné použití, protože to má jen dvě hlavní obrazovky. Po načtení můžete přímo vidět náhodný přechod na celé obrazovce.

pomocí šipek po stranách můžete přepínat v rámci velké nabídky všech druhů přechodů. Druhá obrazovka zobrazuje všechny přechody jako seznam procházet a třídit podle barvy.

atmosféra, kterou webové přechody vytvářejí, je podporována jeho individuálním názvem. Jako speciální funkci můžete také otočit gradient, abyste viděli, jak to vypadá z jiné perspektivy.

pro lidi, kteří chtějí přispět svým vytvořeným gradientem do komunity, existuje možnost přidat gradient do sbírky přes GitHub. Díky tomu je rozmanitost přechodů téměř neomezená.

uiGradients poskytuje tři způsoby, jak uložit zvolený přechod. Chcete-li znovu vytvořit přechod v grafickém softwaru nebo kódu, můžete jednoduše zkopírovat šestihranný barevný kód.

pro přímou implementaci do vašeho webu můžete získat kód CSS.

Chcete – li uložit přechod jako inspiraci, stačí stáhnout soubor JPEG.

WebGradients

web přechody - WebGradients

Tento nástroj začíná tím, že ukazuje sbírku 180 web přechody jako dlouhý seznam můžete procházet. Jakmile chcete vidět více jednoho přechodu, stačí kliknout na výběr a barva se zobrazí po celé obrazovce.

každý gradient má svůj název, takže umožňuje jeho pozdější aplikaci konkrétněji.

WebGradients provozuje společnost itmeo, která poskytuje více digitálních nástrojů online. Jejich přechodová služba je v tomto případě zdarma, pokud nechcete stahovat soubor skici nebo Photoshopu.

stejně jako u uiGradients máte také tři možnosti, jak zde uložit nově nalezenou inspiraci gradientem.

pro každý přechod můžete uložit velký soubor PNG a použít jej jako pozadí pro vlastní grafický design.

Chcete-li použít přesné barvy a přechod v grafickém návrhu softwaru nebo kódu, můžete zkopírovat Hex barevný kód nebo získat CSS verzi přechodu.

coolHue

web přechody - coolHue

Tato sbírka přechody je již zobrazena při prvním otevření webové stránky. Můžete si vybrat do 60 barevných přechodů. Stačí procházet v každém případě šest dlaždic v řadě této odrůdy přechodu.

bohužel neexistuje způsob, jak zobrazit celou velikost přechodu.

pěkný doplněk pro coolHue je animace, když umístíte kurzor myši nad gradientní dlaždice, což vám dává hmatatelný dojem.

webové přechody vám dodají svou atmosféru právě prostřednictvím barev. Proto v tomto nástroji nemají jména. Proto v pravém dolním rohu máte více možností pro Sketch a Photoshop.

Když umístíte kurzor myši nad zvolený přechod, zobrazí se další dvě možnosti. Můžete zkopírovat kód CSS pro snadnou implementaci do kódu nebo stáhnout malý soubor PNG.

Chcete-li použít přesné barvy, stačí zkopírovat šestihranný barevný kód pod přechodem.

Barevný prostor

barevný prostor

Barevný prostor nabízí možnost vybrat si a použít gradient barvy v 10 různých směrech. Chcete-li použít barvu, můžete si vybrat z nabídky barev, která se objeví, stejně jako v softwaru pro úpravu obrázků. Můžete také vložit šestihranný barevný kód barvy, abyste získali přesné barvy, které chcete použít.

přechod je aplikován na pozadí po celé obrazovce. To vám dává velmi dobrý pocit z barvy náladu a motivuje vás, aby si vybrat barvy, které cítíte, může nejlépe vyhovovat příslušné téma by mohlo být vyhledávání.

S ColorSpace můžete také zkopírovat adresu URL zvoleného barevného přechodu. Díky tomu je velmi snadné sdílet Možnosti barev, aniž byste museli ukládat soubor a poté jej odeslat jako přílohu nebo odeslat SPECIFIKACE z toho, co je barva. Mohou jen vidět, co jste se dívali na kliknutím na odkaz, který jste odeslali a budou mít všechny informace, které potřebují, hexadecimální kódy a CSS kód.

Pokud však dáváte přednost ukládání obrazového souboru, bohužel vám tato webová stránka tuto možnost nedává.

Ultimate CSS Gradient Generator

web přechody - Ultimate CSS Gradient Generator

Teď musíme přijít na více komplexní nástroje, který je v tomto případě, jak už název říká, slouží pouze pro integraci do CSS kódu.

rozhraní je rozděleno na čtyři části a připomíná typický grafický designový software. Můžete upravit nebo vytvořit předvolby, zobrazit tento výsledek v malém náhledu a podívat se na celý kód CSS.

konečný CSS Gradient Generátor je součástí rozšíření prohlížeče ColorZilla. Jeho gradient nástroj poskytuje neomezené možnosti pro vytváření webových přechody.

můžete přidat tolik barev, kolik chcete, upravit odstín a sytost, jak to znáte z grafického softwaru, obrátit přechod a nastavit barvy, neprůhlednost a umístění přechodu.

kromě toho můžete do předvoleb uložit vlastní vytvořený přechod, existuje pouze jeden způsob, jak jej exportovat pomocí kódu CSS nebo SASS.

ale předtím můžete nastavit velikost gradientu, změnit jeho orientaci do různých směrů a zvolit barevný formát z pěti daných možností.

problémy rozhodnout?

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

Co je web přechody nástroj je nejlepší používat vždy závisí na projektu, čas a úroveň individuality nebo jiné požadavky na kvalitu.

výše uvedená tabulka vám může pomoci rozhodnout, jaký nástroj byste měli nejlépe použít pro výsledek, který chcete mít.

Pamatujete si nejdůležitější věc?

nepoužívejte příliš mnoho barev – nejlepší praxí dneška je používat pouze dvě barvy, které se také příliš neliší.

měli byste také věnovat pozornost obecnému návrhu gradientu, způsobu, jakým jej později aplikujete na svůj projekt a jak zapadá do jeho prostředí.

uiGradients nabízí všechny důležité vizuální prvky, jak můžete vidět na stole. Tento nástroj vám umožní představit si přechod pro váš projekt nejlepším možným způsobem.

Pokud chcete jít hlouběji do přizpůsobení gradientu pro vysoce kvalitní webový projekt, můžete kombinovat uigradienty s konečným generátorem gradientu CSS importováním kódu CSS nebo staženého obrázku.

Nyní jste připraveni to udělat sami. Pokud se rozhodnete pracovat s přechody, dejte nám prosím vědět na Twitteru.

WEB DESIGN PROFESSIONAL

Dozvědět se více o náš podpis kurz.
Vyberte si nejlepší rozvrh
ke studiu ONLINE nebo ve škole.

Zobrazit kurz

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.