Jak wybrać dobre zdjęcie na okładkę mojej witryny?


22

Modne są duże obrazy tła ze stosunkowo niewielkim tekstem nad nimi dla nagłówków i informacji wstępnych na stronach internetowych, w tym na początku postów na blogu. Mógłbym podać niezliczone przykłady tego, ale myślę, że wiesz dokładnie o czym mówię.

Co stanowi skuteczne zdjęcie na okładkę / tło? O czym powinienem pamiętać, szukając zdjęć lub planując wziąć i edytować niektóre z mojej witryny?


1
Modne są teraz FILMY o dużym tle.
user11153

1
Ładnie wykonane, jeden z najlepszych pytań własny odpowiedziało na miejscu (nie pamiętam żadnych innych, więc ewentualnie najlepsza). :)
Dom

Odpowiedzi:


30

Czy naprawdę musisz podążać za trendem?

Nigdy nie rób czegoś, bo to trend. Rób rzeczy, ponieważ są one dobre dla wygody użytkownika, ponieważ to jest najlepsze dla Twojej firmy i Twojego projektu. Zastanów się nad konsekwencjami, jakie może mieć dodanie dużego obrazu do witryny i rozważ inne dostępne opcje. Nie musisz używać tej techniki, aby mieć „nowoczesną” stronę internetową .

Biorąc to pod uwagę, przy wyborze obrazu tła dla swojej witryny internetowej należy pamiętać o wielu kwestiach. Ponieważ ta odpowiedź jest tak długa, oto krótka lista; Podaję więcej szczegółów na temat każdego z nich, w tym przykłady poniżej.

  • Upewnij się, że obraz jest powiązany z treścią
  • Upewnij się, że obraz mówi, co chcesz
  • Upewnij się, że obraz jest stosunkowo unikalny
  • Użyj obrazu prawdziwych rzeczy
  • Upewnij się, że obraz działa z twoim układem
  • Upewnij się, że obraz jest zgodny z dobrymi zasadami fotografii i projektowania
  • Upewnij się, że obraz jest zgodny ze schematem kolorów
  • Ogranicz wariancję w obrazie
  • Upewnij się, że rozmiar obrazu jest wystarczająco duży
  • Upewnij się, że masz prawa do korzystania z obrazu
  • Upewnij się, że jakość zdjęcia jest wysoka

Upewnij się, że obraz jest powiązany z treścią

Niepowiązane zdjęcie zrobi tylko krzywdę. Podobnie jak wszystko w twoim projekcie, jeśli nie pasuje to bezpośrednio do celu Twojej witryny, pozbądź się go. Upewnij się, że jest to bezpośrednio związane z otaczającą go treścią , a nie czymś później. Obraz musi mieć dodatkowy kontekst wprowadzony przez jakiś tekst lub układ, aby pomóc użytkownikom zrozumieć, że jest to witryna, a nie tylko obraz statyczny.

wprowadź opis zdjęcia tutaj


Upewnij się, że obraz mówi, co chcesz

Wszystkie obrazy mają konotację opartą na treści obrazu i jego stylu. Upewnij się, że obraz pasuje do uczucia, które chcesz przekazać, a także do marki. Obraz powinien przekazywać dodatkowe zrozumienie w przeszłości, co zapewnia otaczający go tekst. Upewnij się także, że pomaga budować markę w taki sposób, w jaki chcesz, aby była budowana.

wprowadź opis zdjęcia tutaj

Oczywiste jest, że obraz powinien być atrakcyjny wizualnie. Więcej szczegółów na temat cech atrakcyjnego obrazu znajduje się poniżej.


Upewnij się, że obraz jest stosunkowo unikalny

Obrazy niestandardowe są lepsze niż standardowe, pod warunkiem, że ich jakość jest co najmniej taka sama. Oznacza to, że powinieneś unikać bardzo znanych obrazów stockowych, o ile alternatywa jest równie wysokiej jakości i odpowiednia. Jednak bycie absolutnie wyjątkowym nie jest tak ważne, jak posiadanie świetnego, odpowiedniego wizerunku.

wprowadź opis zdjęcia tutaj


Użyj obrazu prawdziwych rzeczy

Jest coś w prawdziwym obrazie (nawet w mocno zredagowanej wersji), który ma wielki wpływ na nas jako ludzi. Lubimy widzieć prawdziwe rzeczy. O ile to możliwe, wybierz prawdziwy obraz nad czymś wygenerowanym komputerowo, chyba że całkowicie nie pasuje do treści lub stylu, którego szukasz.

wprowadź opis zdjęcia tutaj

Pokazywanie ludziom ma jeszcze większy efekt, który może być zarówno dobry, jak i zły. Poprawne wykonanie może sprawić, że użytkownicy poczują, że wrażenia są bardziej prawdziwe i osobiste. Jeśli zrobi się to źle, może sprawić, że wydaje się im osobista i tania. Więcej na ten temat tutaj .

Zwłaszcza twarze zwracają uwagę, więc upewnij się, że są odpowiednią twarzą i umieszczaj je tylko tam, gdzie to naprawdę ma znaczenie. Czasami pomocne może być umieszczenie ich w innym kontekście, takim jak książka, iPad, komputer itp. Innym razem lepiej jest wyciąć twarze (pomyśl o witrynie z ubraniami lub manekinie). Pokazanie twarzy marki / rzecznika jest bardzo skuteczne, jeśli jest wykonane prawidłowo, gorąco polecam, jeśli możesz.

wprowadź opis zdjęcia tutaj


Upewnij się, że obraz działa z twoim układem

Przepływ użytkowników i układ witryny są ważniejsze niż jakikolwiek wybrany obraz. Utwórz je najpierw. Jeśli ten najlepszy układ i przepływ ma trochę otwartej przestrzeni u góry, rozważ dodanie obrazu.

Upewnij się, że żadna ważna część obrazu nie jest objęta twoją zawartością. Użyj wizualnych wskazówek, aby pomóc użytkownikom w prowadzeniu treści, które chcesz zobaczyć (więcej na ten temat w następnej sekcji).

wprowadź opis zdjęcia tutaj


Upewnij się, że obraz jest zgodny z dobrymi zasadami fotografii i projektowania

Obrazy powinny być zgodne z podstawowymi zasadami fotografii, w tym z zasadą jednej trzeciej , wykorzystując linie wizualne, dobrze skupiając się na głównej treści, prawidłowo kadrując obiekt, mając dobre tło, symetrię i wzory. Aby uzyskać więcej informacji na ten temat, sprawdź tutaj lub wyszukaj więcej zasobów online.

Zasady te nadadzą obrazowi większy cel, pomagając zwrócić uwagę na ważne części obrazu i jego otaczający kontekst.

dobre zasady dotyczące obrazu


Upewnij się, że obraz jest zgodny ze schematem kolorów

Wszystkie strony internetowe powinny mieć jednolity wygląd, w tym kolorystykę. Niezależnie od tego, czy wybierzesz najpierw schemat kolorów, a następnie wybierz obraz, czy obraz, a następnie schemat kolorów ( takie narzędzia mogą pomóc w tym drugim), upewnij się, że kolory obrazu pasują do ogólnej kolorystyki. Czasami dobrze jest wypłukać obraz, a następnie zastosować filtr kolorów.

descr


Ogranicz wariancję w obrazie

Nie sprawiaj, że wygląd będzie zajęty. Umieszczenie na obrazie wielu kolorów i obiektów utrudnia nałożenie na nie tekstu i dopasowanie go do układu. Jak powiedziano wcześniej, najpierw utwórz zawartość, a następnie wybierz obraz.

Dodanie częściowo przezroczystych nakładek, przyciemnienie obrazu lub wypłukanie go do czerni i bieli przed dodaniem filtra kolorów może pomóc w redukcji niepotrzebnych szumów. Ponadto kolory tła można zastosować za tekstem lub na elemencie, aby poprawić czytelność.

wprowadź opis zdjęcia tutaj

Powyższy obraz przyciemnia oryginalny obraz i wykorzystuje pewne cienie na krawędziach w celu redukcji szumów. Poniższy obraz wydaje się używać częściowo przezroczystej ciemnej nakładki, aby zrobić to samo.

wprowadź opis zdjęcia tutaj


Upewnij się, że rozmiar obrazu jest wystarczająco duży

Oczywiste jest, że używany obraz powinien być wystarczająco duży, aby pokryć każdy ekran bez rozciągania. Oznacza to, że w przypadku ekranów pełnowymiarowych musimy mieć obrazy o minimalnej rozdzielczości 1024 x 768 pikseli, ale najlepiej jest dążyć do szerokości co najmniej 1200 pikseli. Możemy również zapisać ładowanie dużych obrazów na mniejsze ekrany, podając obrazy różnicowe w zależności od rozdzielczości, więcej na ten temat tutaj . Spróbuj zoptymalizować czas ładowania obrazu, jednak bez utraty jakości obrazu.


Upewnij się, że masz prawa do korzystania z obrazu

Jeśli nie możesz go używać, nie używaj go . Jeśli nie wiesz, jakie są prawa autorskie do obrazu , poszukaj go, ale nie używaj go, dopóki się nie dowiesz! Ostatnią rzeczą, którą chcesz zrobić, to być pozwanym za naruszenie.


Upewnij się, że jakość zdjęcia jest wysoka

Nie używaj ziarnistych lub rozmytych obrazów. Nie używaj zdjęć z wątpliwymi lub niepowiązanymi treściami. Niech to będzie proste, ale (głównie) prawdziwe. Zastanów się dobrze, jakie są dobre i złe strony każdego obrazu, który rozważasz, i nie akceptuj czegoś złego.

Dodatkowe zasoby:


4
Dobra odpowiedź. Prawdopodobnie byłbym zbyt zwięzły: „Upewnij się, że jest to dobre zdjęcie i jest zgodne z potrzebami i celami Twojej witryny” :)
DA01

@ DA01 Chociaż całkowicie zgadzam się z tym stwierdzeniem, niektórzy ludzie potrzebują trochę więcej pomocy :)
Zach Saucier
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.