Zamazane obrazy w projektowaniu stron internetowych: jak je sprawić
Jest to niezaprzeczalny fakt: używanie rozmytych obrazów jest popularną techniką projektowania stron internetowych w 2015 roku. Wygląda na to, że wszędzie, gdzie spojrzysz, jest jakiś element rozmycia.
Ale to nie jest rozwiązanie niektórych problemów ze zdjęciami. Jest to odrębna technika, która wymaga praktyki do perfekcji i dbałości o szczegóły, aby zrobić to dobrze. Zanim przejdziesz do trendu, zastanów się nad opcjami użycia rozmytych obrazów, aby zdecydować, czy jest on odpowiedni dla Ciebie i jak najlepiej wykorzystać tę technikę w swoich projektach.
Niewyraźne zdjęcia są modne
Możemy poświęcić całe strony liczbie stron internetowych, używając rozmytych obrazów. Trend jest teraz bardzo ważny.
To pierwsza rzecz, którą musisz wziąć pod uwagę, idąc naprzód z pomysłem, który obejmuje rozmyte obrazy.
- Czy chcesz być częścią tego trendu?
- Czy możesz wykorzystać ten trend w nieco inny sposób niż inne witryny?
- Czy to twój styl, czy też jest zbyt nadużywany na twoje upodobania?
- Czy po zakończeniu trendu wszystko będzie w porządku? A może potrzebujesz przeprojektowania?
Nie ma absolutnie nic złego w tworzeniu czegoś modnego. Ale to decyzja, którą powinieneś rozważyć od samego początku. Tworzenie witryny internetowej z rozmytymi obrazami - w zależności od preferowanego stylu i sposobu użytkowania - może być czasochłonnym przedsięwzięciem, a jeśli nie masz doświadczenia w oprogramowaniu do edycji zdjęć, może wymagać dodatkowego szkolenia.
Rozmycie jest techniką stosowaną z dobrymi obrazami
To może być najważniejsze zdanie, które przeczytasz, myśląc o rozmyciu zdjęć. Działa tylko, jeśli masz dobre zdjęcia na początek. Rozmycie nie jest sposobem na „naprawienie” złego obrazu.
Powiedzieć to inaczej. Jeśli dostaniesz rozmazane zdjęcie i powiesz mu, żeby zrobił z niego stronę internetową, nie jest to modne. To złe zdjęcie. Jeśli taka jest Twoja sytuacja, nie jest to dla Ciebie technika. (Możesz zacząć myśleć o tworzeniu elementu artystycznego z typografią lub szukaniu zdjęć stockowych).
Ale jeśli masz ładny obraz, z którego chcesz wydostać się kilka mil lub użyć go w nowy sposób, niewyraźna technika jest możliwa. Istnieje wiele sposobów myślenia o rozmyciu (skupimy się na każdym z nich poniżej), ale pierwszym krokiem jest zrozumienie, jak faktycznie stworzyć rozmycie. Adobe ma całkiem fajny samouczek na początek w Photoshopie.
Rozmyj cały obraz
Jedną z rzeczy, które przyczyniły się do trendu zamazanego obrazu, jest inny trend: użycie nagłówków bohaterów. Projektanci łączą techniki, aby tworzyć pełnoekranowe, rozmyte obrazy jako dominujące elementy wizualne na stronach docelowych witryn.
Witryna Trellis Farm wykorzystuje kultowy obraz farmy, aby dać ci poczucie miejsca na swojej stronie. Aby uzyskać dodatkowe zainteresowanie, zdjęcie jest czarno-białe - aby oddać to dawne uczucie - i ułożone warstwami z wielkim krojem czcionki, aby przyciągnąć twoją uwagę. Przewijanie trwa dalej, dodając kolor do miksu. Rozmycie jest przyjemne, ponieważ wiesz, co jest na zdjęciu, i pomaga użytkownikowi skupić się na tekście i kolejnych czynnościach na ekranie.
Dlaczego to działa:
- Rozmyte tło może skupić się na warstwach na górze obrazu, takich jak tekst. Pamiętaj tylko, aby wybrać efektowny krój pisma.
- Może wzbudzić nowe zainteresowanie obrazem, którego regularnie używasz, takim jak standardowe zdjęcie marki.
- Można go używać z niemal każdym rodzajem treści w prawie każdym schemacie kolorów, aby uzyskać uniwersalny wygląd.
Tła i obrazy warstwowe
Rozmycie nie jest techniką wyłącznie pełnego obrazu. Określone części obrazu można rozmazać w celu uzyskania efektu uderzenia. Chociaż częściej widać niewyraźne tło z ostrym ustawieniem ostrości na pierwszym planie, niektórzy projektanci stosują odwrotne podejście do nowej opcji, która ma zamazany pierwszy plan z ostrym tłem.
Agencja Anchour używa rozmycia na zdjęciach na stronie docelowej. Technika zastosowana na obrazie może być częścią rzeczywistej fotografii lub możesz stworzyć ten sam efekt w oprogramowaniu do edycji zdjęć. Sztuką w tym stylu rozmycia jest to, że nie można powiedzieć, że został „stworzony” i powinien wyglądać naturalnie, jakby zdjęcie zostało zrobione w ten sposób. (W oprogramowaniu do edycji zdjęć można to zrobić za pomocą narzędzia rozmycia Gaussa z małymi, przyrostowymi korektami.)
Dlaczego to działa:
- Rozmycie tworzy kontrast wizualny i może złagodzić ruchome wrażenie obrazu.
- Zmienia perspektywę obrazu i widok wizualny użytkownika.
- Dodaje wymiar obrazowi, który w innym przypadku wyglądałby płasko w przypadku renderowania prawie 3D.
Dramatyczna plama dla sztuki abstrakcyjnej
Jeśli potrzebujesz obrazu tła dla swojej witryny, ale możesz znaleźć wzór lub kolor, który załatwi sprawę, zdjęcie z dramatycznym rozmyciem może być idealnym rozwiązaniem. Rozważmy dramatyczne rozmycie jako cokolwiek, co sprawia, że zawartość zdjęcia jest niewidoczna na pierwszy rzut oka, i może sprawić, że zdjęcie będzie całkowicie nierozpoznawalne.
Jest to popularna opcja dla stron internetowych, które uruchamiają lub promują projekt cyfrowy z abstrakcyjnym rozmytym tłem fotograficznym za telefonem przedstawiającym produkt. Piction wykorzystuje ten sam obraz w tle i w telefonie z różnymi poziomami powiększenia i rozmycia, aby uzyskać efektowny wygląd.
Dlaczego to działa:
- Koncentruje się na polecanym produkcie.
- Tworzy niestandardowe tło zamiast wzoru, który może znajdować się na innych stronach internetowych.
- Daje projektantowi kontrolę nad kolorem i wyczuciem, jeśli chodzi o to, jak działa rozmycie abstrakcyjne, od ostrości do delikatnych kolorów i kształtów po czytelność obrazu tła i połączenie z marką.
Subtelne rozmycie dla dowolnego obrazu
Niewielki stopień rozmycia może również działać na wielu innych rodzajach zdjęć i nie musi być stosowany wyłącznie do obrazu pełnoekranowego. Projektanci mogą dodać odrobinę rozmycia do obrazu, który wymaga niewielkiej uwagi na pierwszym planie, aby pomóc użytkownikom spojrzeć na odpowiednie części obrazu, stylizować logo lub po prostu stworzyć bardziej złożony obraz.
Logo Zeo wykorzystuje subtelne, ale ładne rozmycie w okrągłym kształcie. Rozmycie zmusza cię do dokładniejszego spojrzenia na logo ze względu na ciekawy kształt i krawędź jednej strony logo w porównaniu z ostrością drugiej strony. Technika ta jest dodatkowo podkreślana, ponieważ projekt witryny jako całości wykorzystuje rozmycie w innych miejscach, na przykład w tle dominującego obrazu na stronie docelowej.
Dlaczego to działa:
- Małe rozmycia mogą stworzyć element zaskoczenia.
- Koncentruje się na określonych częściach zdjęcia z fokusem wizualnym. (Rzuć okiem na niektóre promocje na stronie Zeo dotyczące innych zastosowań subtelnego rozmycia do ustawiania ostrości.)
- Może zapewnić odpowiedni kontrast do nakładania innych elementów na część obrazu, takich jak tekst, w taki sam sposób, jak rozmycie na pełnym ekranie może działać z nagłówkiem bohatera.
Użyj go do wideo, zbyt
Możesz połączyć trend rozmycia z innym gorącym elementem projektu - wideo. Możesz go używać tak jak w przypadku każdej innej techniki obrazowania. Działa w ten sam sposób (chociaż narzędzia i proces edycji są nieco inne).
Poziom 2 Projekt wykorzystuje niebieski i efekt typu ekranu, aby dodać zainteresowane do filmu na pełnym ekranie. (Odśwież przeglądarkę do rozmytych filmów.) Efekt jest zabawny i świeży i działa z filmami, które mają przypominać oldschoolowy styl. Szybkie pętle wideo są bardzo czytelne i przykuwają uwagę.
Wniosek
Istnieje wiele sposobów skutecznego wykorzystania rozmycia w projektach stron internetowych. Sekret - o ile taki istnieje - polega na stworzeniu rozmytego efektu, który płynnie wtapia się w resztę projektu. I możesz to zrobić prawie przez myślenie o rozmyciu w skrajności.
Użyj dużo rozmycia, aby uzyskać duży efekt i abstrakcyjne uczucie. Użyj minimalnego rozmycia, aby stworzyć subtelny kontrast i ustawić ostrość. Jak w przypadku każdego projektu, przetestuj go na kilku użytkownikach przed uruchomieniem i zobacz, co myślą. Czy zauważają rozmycie? (Większość nie-projektantów tak naprawdę o tym nie pomyśli.)
