Pytanie:
Jak strzelać do szerokiego wizerunku bohatera strony internetowej?
danbroooks
2013-08-30 16:49:16 UTC
view on stackexchange narkive permalink

Jestem wewnętrznym programistą internetowym i odpowiadam za techniczny aspekt witryny firmowej. W przeszłości zajmowałem się również fotografią, więc mam trochę wiedzy fotograficznej. Jestem również osobą, która wykonuje wszystkie prace graficzne i obróbkę zdjęć (chociaż jest to głównie przycinanie / zmiana rozmiaru zdjęć) na potrzeby witryny.

Nasza witryna ma bohatera na górze każdej strony, czyli Szerokość 1005 pikseli i wysokość 300 pikseli. Staraliśmy się znaleźć / zrobić zdjęcia, które można przyciąć do tego rozmiaru. Próbowałem sfilmować trochę siebie, budynku firmy i personelu, ale starałem się zrobić wszystko, co naprawdę działało w tych wymiarach.

Potem zaprosiliśmy profesjonalistę w nadziei, że da radę znacznie lepsza praca niż ja (mam tylko kitowy obiektyw, a mój jedyny porządny stroboskop jest zepsuty, nie mam też lightboxa). Wyjaśniliśmy mu, czego chcieliśmy, a on wykonał kilka przyzwoitych ujęć - ale nic, co naprawdę moglibyśmy wykorzystać (podobnie jak moje próby tylko z lepszym oświetleniem).

Nie sądzę, że kierownictwo będzie chciało rozwidlić żeby zaprosić kolejnego fotografa po tym, jak ostatni nic nie wymyślił, więc myślę, że zostanę wezwany do ponownej próby zrobienia czegoś.

Niech ktokolwiek z was musiał dopasować brief lubię to? Jak zabrałeś się do zrobienia zdjęcia nadającego się do tego rodzaju zastosowań? Nie chcę czegoś o zbyt szerokiej ogniskowej, ponieważ te zdjęcia muszą wyglądać profesjonalnie.

Dla osób niezaznajomionych z pojęciem bohater, zobacz ten przykład lub Artykuł w Wikipedii „Bohater graficzny”.

Dlaczego nazywa się to bohaterem?
Nie mam pojęcia, ale tak się nazywa - [artykuł z Wikipedii] (http://en.wikipedia.org/wiki/Hero_graphic)
Więcej informacji na temat tego terminu w odpowiedziach na to pytanie dotyczące przepełnienia stosu: http://stackoverflow.com/questions/7699076/where-did-the-class-name-hero-come-from-in-css
Opublikowane zdjęcie nie ma rozmiaru 1005 x 300 pikseli. Jest w formacie 2: 1. Zmierzyłem 534px x 249px.
To był przykład tego, kim jest bohater, a nie bohaterem danej witryny
W reklamie lub marketingu myślę, że wizerunek bohatera oznacza duży, główny wizerunek, który ma sam wykonać większość sprzedaży. Zwykle przekazuje pozytywne odczucia lub emocje, stąd „bohater”. W przeciwieństwie do obrazów pełniących bardziej użyteczne role, takich jak logo lub ikony. Zwykle w układzie jest tylko jeden obraz bohatera, a jego rozmieszczenie i rozmiar są najbardziej przyciągające wzrok.
Sześć odpowiedzi:
Michael C
2013-08-30 17:49:09 UTC
view on stackexchange narkive permalink

Bez kilku przykładów tego, co bezskutecznie próbowałeś uchwycić, trudno jest dokładnie zrozumieć, dlaczego chcesz wyświetlić i dlaczego nie jesteś zadowolony z wyników. Domyślam się, że jest to jeden z dwóch problemów, które przeszkadzają: rozwiązanie lub kompozycja

  • Rozwiązanie. Czynnikiem ograniczającym nie jest tutaj to, jak szeroki jest używany obiektyw. Czynnikiem ograniczającym jest to, ile szczegółów można zawrzeć w obrazie o wymiarach 1005x300 pikseli. Możesz użyć dłuższych ogniskowych, aby uzyskać szeroką panoramę sceny, takiej jak budynek firmy, ale zmniejszając ją do 1005x300 pikseli, tracisz wszystkie szczegóły uzyskane przez zszycie wielu obrazów.

  • Kompozycja Większość obiektów jest trudna do zdjęcia na obrazie, który jest ponad trzy razy szerszy niż wysoki. Dotyczy to szczególnie ludzi, ponieważ większość z nas jest znacznie wyższa niż szerokich. Nawet ujęcie głowy, na którym widać tylko twarz, wymaga stosunkowo kwadratowej przestrzeni, aby wyglądało dobrze. Zwykle nawet tam nieco dłuższy bok jest pionowy , a nie poziomy . Portret 8x10 ma stosunek 1: 1,25 sprzyjający wymiarowi pionowemu. Niemożliwe jest dopasowanie pojedynczej osoby do poziomego obrazu o proporcjach 1: 3 (chyba, że ​​są one pochylone, ale wątpię, by buduar był tym, czego szukasz). Zwykłym rozwiązaniem jest umieszczenie ich jako stosunkowo niewielkiego elementu w środowisku, które nadaje się do kompozycji poziomej: krajobraz lub ustawienie architektoniczne, które jest głównie poziome. Oto, co uczynił twój przykład z panną młodą: umieść ich w poziomym krajobrazie. Problem polega na tym, że trudno jest przekazać więcej o ludziach na zdjęciu niż o środowisku, w którym się znajdują. Twoja próbka jest uratowana przez prawie powszechne uznanie, że kobieta nosi suknia ślubna, mężczyzna jest ubrany odpowiednio formalnie, a para jest w intymnej pozycji, tak że widz dochodzi do wniosku, że jest to panna młoda i pan młody. Ale obraz nie mówi nam nic o tym, kim jest ta panna młoda / pan młody i co jest w nich wyjątkowego: widz pozostaje w tym miejscu, aby wypełnić luki z własnego doświadczenia. I nawet wtedy kompozycja nie działa, ponieważ skały po lewej są ostrzejsze niż para, której stopy zostały obcięte, aby dopasować się do sztucznego horyzontu, gdzie pole styka się z drzewami i pozostawia dużo otwartej martwej przestrzeni pośrodku dla tekstu.

Musisz zdecydować, co chcesz wykorzystać w przestrzeni do komunikowania się: albo treść tekstu z obrazem w tle, który nie odwraca uwagi od tekstu, albo informacje wizualne przekazujące, co reprezentuje Twoja organizacja lub kim jesteś. Możliwym kompromisem byłoby przesunięcie tekstu na jedną stronę i umieszczenie wizualnego ogniska obrazu na drugiej (ale bliżej środka, a nie dołu, prawej krawędzi): być może para odpowiednio skupiona i stojąca w obszar za prawym ramieniem pana młodego.

Unapiedra
2013-08-30 17:38:14 UTC
view on stackexchange narkive permalink

Myślę, że brakuje Ci koncepcji. Zasadniczo masz obraz panoramiczny 3: 1.

Obraz, do którego utworzyłeś łącze, ma raczej stosunek 2 do 1. Ale wychodząc z tego obrazu, skopiujmy tę koncepcję.

Widzę dwoje ludzi całujących się przed zieloną trawą i lasem w tle. Na pierwszym planie są też inne obiekty (gałąź drzewa, kamienie), ale nieostre. Zwróć uwagę, że tło jest również nieostre.

  • Para na pierwszym planie, ostra. I po prawej stronie.
  • Tło i nieistotny pierwszy plan są rozmyte.
  • Tło to natura, prawie cała zielona z linią horyzontu w miejscu, gdzie zaczyna się las.

Teraz, jeśli chcesz to zrobić z pracownikami swojej firmy, umieść ich w prawo lub w lewo, ale nie w środku. W grupie, trochę blisko siebie. Umieść je w ładnej scenie z podobnym tłem (podobnym pod względem odległości, kąta, jednolitych kolorów). To nie musi być las. Środowisko biurowe prawdopodobnie miałoby większy sens.

Baw się przysłoną, aby uzyskać przyzwoite rozmycie tła, ale niezbyt duże. Jedną z metod jest tutaj użycie metody Brenezir . Ale posunięcie się dalej (i użycie dłuższego obiektywu) też może załatwić sprawę.

Spróbuj uzyskać coś takiego i przetestuj to z kilkoma modelami stojącymi (może to być manekin). Jeśli wygląda to tak, jak chcesz, jeśli chodzi o kompozycję, możesz znaleźć sposoby, aby obrazy wyglądały bardziej profesjonalnie.

AJ Henderson
2013-08-30 19:01:28 UTC
view on stackexchange narkive permalink

Potrzebujesz ujęcia, które będzie z nim działać. Sugerowałbym zbudowanie ramy, która jest tymi wymiarami, a następnie chodzenie dookoła, trzymając ją, aby ułożyć sceny i zacząć myśleć o tym, co działa dla tego rodzaju wymiarów. Posiadanie czegoś praktycznego i praktycznego, co pozwoli ci zbadać te wymiary, powinno pomóc w znalezieniu pomysłów na ujęcia, które będą się dobrze sprawdzać.

Gdy już wiesz, jakiego rodzaju ujęcia chcesz, powinieneś prosta sprawa, aby je uchwycić.

Alternatywą jest robienie zdjęć z podglądem na żywo (lub intensywne korzystanie z niego) i przyklejenie taśmy maskującej do aparatu, aby zamaskować obraz o prawidłowych proporcjach. W ten sposób masz widok roboczy o prawidłowym współczynniku proporcji w trakcie podróży.
tmerrick
2013-08-30 17:38:04 UTC
view on stackexchange narkive permalink

Myślę, że będzie ci ciężko znaleźć przyzwoite indywidualne ujęcie (dobrze sprawdzają się grupy) dla tych wymiarów. W przeszłości w przypadku witryn internetowych skupiałem się na tym, czy po jednej stronie jest to osoba, czy produkt. Następnie użyj gradientu lub maski warstwy w Photoshopie i umieść tekst lub treść marketingową na boku. Zasadniczo, po prostu uczynienie człowieka lub produktu bardziej kwadratem / prostokąta zamiast super szerokiego i chudego prostokąta.

Rish
2013-09-04 11:31:10 UTC
view on stackexchange narkive permalink

Nie sądzę, że robienie zdjęć jest tutaj problemem. Problem polega na tym, aby uzyskać odpowiednią rozdzielczość / format i użyć go na stronie internetowej. Możesz po prostu wykonać następujące czynności:

  • Skomponuj obraz tak, jak zawsze, podczas robienia go.
  • Cofnij się kilka kroków, aby mieć większy obszar niż Ty właściwie to sobie wyobraziłem.
  • Przytnij & ponownie skomponuj w postprodukcji (Photoshop / Lightroom)

Ponieważ będzie to praca w Internecie, nie sądzę, że każdy najmniejszy szczegół jest będzie miało znaczenie. Obrazy internetowe powinny ładować się szybko i spełniać swoje zadanie. Po drodze możesz wyrzucić kilka szczegółów, ale to w porządku.

Nie krępuj się, napisz do mnie na wypadek, gdyby nadal cię uderzyło. Chętnie pomogę w każdy możliwy sposób.

Jeffrey Michael
2016-11-20 22:47:44 UTC
view on stackexchange narkive permalink

Nie ma łatwej odpowiedzi. 98% zdjęć nie będzie pasować. Problem jest odpowiedzią na pytanie. Jak wygląda obraz w następujących rozdzielczościach:

  • 460 PX
  • 600 PX
  • 800 PX
  • 1023 PX
  • 1200 PX
  • 1500 PX
  • 1800 PX

Oto jak rozwiązać problem:

  1. Użyj 1800 x 600 pikseli (1800 to teraz standardowa szerokość)
  2. Przesuń / wyśrodkuj arkusz CSS tła Hero
  3. Użyj przezroczystego pola w programie graficznym, aby znaleźć tematy lub części zdjęć, które będą działać i wyeksportować tylko wycinek.

Oto przykład w rozmiarze 1800 x 600:

http: //www.sunlitmarketing .com / - ten przykład ukrywa najmniejsze 300 pikseli dla szerokości ekranu 1024 i wyższych.

http://www.coastalfoto.com/ - Używa 1500 x 400



To pytanie i odpowiedź zostało automatycznie przetłumaczone z języka angielskiego.Oryginalna treść jest dostępna na stackexchange, za co dziękujemy za licencję cc by-sa 3.0, w ramach której jest rozpowszechniana.
Loading...