Rozmazané obrázky ve webovém designu: Jak je zajistit, aby fungovaly
Je to nepopiratelná skutečnost: používání rozmazaných obrázků je trendovou technikou webového designu v roce 2015. Vypadá to, že všude, kde vypadáte, existuje nějaký prvek rozostření.
Toto však není řešení některých vašich problémů s fotografiemi. Je to zřetelná technika, která vyžaduje nácvik dokonalosti a pozornost k detailům, aby byla správná. Předtím, než skočíte na trend, přemýšlejte o možnostech použití rozmazaných obrázků a rozhodněte se, zda je pro vás to pravé a jak můžete tuto techniku co nejlépe využít ve svých projektech.
Rozmazané fotografie jsou trendy
Pomocí rozmazaných obrázků bychom mohli věnovat celé stránky počtu webů. Právě teď je trend velký.
To je první věc, kterou musíte zvážit, když postupujete vpřed s nápadem, který zahrnuje rozmazané snímky.
- Chcete být součástí tohoto trendu?
- Můžete použít tento trend způsobem, který je trochu odlišný od jiných webových stránek?
- Je to váš styl nebo trochu příliš nadužívaný pro váš vkus?
- Budete v pořádku s designem webu poté, co se trend rozběhne? Nebo budete potřebovat redesign?
Vytváření něčeho trendy je naprosto špatné. Ale je to rozhodnutí, které byste měli zvážit od začátku. Vytvoření webové stránky s rozmazanými obrázky - v závislosti na preferovaném stylu a použití - může být časově náročné a pokud nemáte zkušenosti se softwarem pro úpravu fotografií, může vyžadovat další školení.
Rozostření je technika používaná s dobrými obrázky
Toto může být nejdůležitější věta, kterou si přečtete, když přemýšlíte o rozmazání obrázků. Funguje to pouze tehdy, pokud máte dobré obrázky. Rozostření není způsob, jak „opravit“ špatný obraz.
Jinak řečeno. Pokud vám bude dána rozmazaná fotografie a řeknete jí, aby z ní vytvořili web, není to trendy. To je špatná fotka. Pokud je to vaše situace, není to technika pro vás. (Možná budete chtít začít přemýšlet o vytvoření uměleckého prvku s typografií nebo hledáním skladových obrázků.)
Ale pokud máte pěkný obrázek, který chcete získat několik kilometrů nebo použít novým způsobem, rozmazaná technika je možnost. Existuje několik způsobů, jak přemýšlet o rozmazání (my se zaměříme na každou níže), ale prvním krokem je pochopit, jak skutečně vytvořit rozmazání. Adobe má docela pěkný návod, jak začít ve Photoshopu.
Rozostřete celý obrázek
Jedna z věcí, která přispěla k trendu rozmazaného obrazu, je další trend: Použití záhlaví hrdiny. Návrháři dávají dohromady techniky, aby vytvořili rozmazané obrázky ve stylu celé obrazovky jako dominantní vizuální prvky na vstupních stránkách webových stránek.
Webové stránky pro Trellis Farm používají ikonický obrázek farmy, aby vám poskytly pocit místa pro jeho web. Pro větší zájem je fotografie černobílá - zprostředkovat tento starodávný pocit - a vrstvená velkým písmem, aby upoutala vaši pozornost. Svitek pokračuje v pocitu při přidávání barev do mixu. Rozostření je pěkné, protože víte, co je na obrázku, a pomáhá uživateli soustředit se na text a další akce, aby se na obrazovce.
Proč to funguje:
- Rozmazané pozadí může zaměřit vrstvy na horní část obrazu, jako je text. Jen nezapomeňte vybrat působivý typ písma.
- Může vytvořit nový zájem s obrázkem, který pravidelně používáte, jako je například standardní značka značky.
- Může být použit s téměř jakýmkoli obsahem v téměř libovolném barevném schématu pro univerzální přitažlivost.
Pozadí a vrstvené obrázky
Rozostření není technika pouze pro zobrazení celého obrázku. Konkrétní části obrazu mohou být rozmazány kvůli nárazu. Přestože je běžnější vidět rozmazané pozadí s ostrým zaostřením v popředí, někteří návrháři používají opačný přístup pro novou možnost, která má rozmazané popředí s zaostřeným pozadím.
Agentura Anchour používá rozmazání fotografií na své vstupní stránce. Technika použitá v obrázku může být součástí skutečné fotografie nebo můžete vytvořit stejný efekt v softwaru pro úpravu fotografií. Trik, když vytváříte tento styl rozmazání, spočívá v tom, že nemůžete říct, že byl vytvořen, a mělo by to vypadat přirozeně, jako by byla fotografie pořízena tímto způsobem. (V softwaru pro úpravy fotografií to můžete provést pomocí Gaussova nástroje pro rozmazání s malými, přírůstkovými úpravami.)
Proč to funguje:
- Rozostření vytváří vizuální kontrast a může zmírnit rušný pocit obrazu.
- Mění perspektivu obrazu a pohled uživatele na vizuální.
- Přidá dimenzi obrázku, který by se jinak mohl cítit plochý pro téměř 3D vykreslování.
Dramatické rozostření pro abstraktní umění
Pokud pro svůj web potřebujete obrázek na pozadí, ale dokážete najít vzor nebo barvu, která je trikem, může být perfektní oprava fotografie s dramatickým rozostřením. Za dramatické rozostření považujte vše, co způsobuje, že je obsah fotografie na první pohled nerozeznatelný, a může to učinit fotografii zcela nerozeznatelnou.
Toto je oblíbená možnost pro webové stránky, které zahajují nebo propagují digitální projekt s abstraktní rozmazanou fotografickou pozadím za telefonem zobrazujícím produkt. Piction používá stejný obrázek na pozadí i v telefonu s různými úrovněmi zoomu a rozostření pro velmi poutavý design.
Proč to funguje:
- Zaměřuje se na doporučený produkt.
- Vytváří spíše vlastní pozadí než použití vzoru, který může být na jiných webech.
- Dává designérovi kontrolu nad barvou a pocitem, pokud jde o to, jak abstraktní rozostření funguje od ostrosti po měkké barvy a tvary, až po čitelnost obrázku na pozadí a připojení ke značce.
Subtilní rozostření pro jakýkoli obrázek
Malý stupeň rozostření může fungovat také u mnoha jiných typů fotografií a nemusí se používat pouze pro obraz na celé obrazovce. Návrháři mohou do obrazu přidat náznak rozostření, který potřebuje trochu zaostřit v popředí, aby pomohl uživatelům podívat se na správné části obrázku, stylizovat logo nebo pouze vytvořit složitější vizuální stránku.
Logo společnosti Zeo používá jemné, ale pěkné rozostření v kulatém designu. Rozostření vás přinutí podívat se na logo blíže kvůli zajímavému tvaru a lemování jedné strany loga má ve srovnání s ostrostí druhé strany. Tato technika je dále zdůrazněna, protože design webových stránek jako celek používá rozostření na jiných místech, například na pozadí dominantního obrázku na vstupní stránce.
Proč to funguje:
- Malé rozostření může vytvořit prvek překvapení.
- Zaostří na konkrétní části fotografie s vizuálním zaměřením. (Podívejte se na některá promo na webu Zeo pro další použití jemného rozostření pro zaostření na fotografii.)
- To vám může poskytnout správné množství kontrastu k vrstvení dalších prvků v části obrázku, jako je text, stejným způsobem může rozostření na celé obrazovce pracovat s hlavičkou hrdiny.
Použijte pro video, příliš
Trend rozostření můžete také spárovat s jiným horkým designovým prvkem - videem. Můžete ji použít stejně jako u jakékoli jiné techniky obrazu. Funguje to stejným způsobem (ačkoli editační nástroje a proces se trochu liší).
Design úrovně 2 používá modrou a efekt typu obrazovky k přidání zájmu o video na celou obrazovku. (Obnovte prohlížeč a rozmazejte videa.) Efekt je zábavný a svěží a pracuje s videem, které má mít pocit ze staré školy. Rychlé smyčky videa jsou vysoce čitelné a upoutají pozornost.
Závěr
Existuje spousta způsobů, jak efektivně používat rozmazání pro projekty webdesignu. Tajemství - pokud skutečně existuje - je vytvořit rozmazaný efekt, který plynule zapadá do zbytku designu. A můžete to udělat téměř přemýšlením o rozmazání v extrémech.
Použijte hodně rozostření pro vysoký dopad a abstraktní pocit. Pomocí minimálního rozostření vytvořte jemný kontrast a nastavte zaostření. Stejně jako u jakéhokoli designu si před spuštěním vyzkoušejte několik uživatelů a podívejte se, co si myslí. Všimnou si rozostření? (Většina designérů o tom nebude opravdu přemýšlet.)
