Domanda:
Come scattare un'immagine dell'eroe del sito Web?
danbroooks
2013-08-30 16:49:16 UTC
view on stackexchange narkive permalink

Sono uno sviluppatore web interno che si occupa dell'aspetto tecnico di un sito web aziendale. Mi sono anche occupato di fotografia in passato, quindi ho una certa conoscenza della fotografia. Sono anche la persona che fa tutto il lavoro grafico e la manipolazione delle foto (anche se si tratta principalmente di ritagliare / ridimensionare le immagini) per il sito.

Il nostro sito web ha un eroe nella parte superiore di ogni pagina che è 1005 px di larghezza per 300 px di altezza. Abbiamo lottato per trovare / scattare immagini che potessero essere ritagliate a queste dimensioni. Ho provato a scattare alcune foto da solo, dell'edificio dell'azienda e del personale, ma ho faticato a prendere qualcosa che funzionasse davvero a quelle dimensioni.

Poi abbiamo trovato un professionista, nella speranza che potesse farlo un lavoro molto migliore di me (ho solo un kit di lenti, e il mio unico strobo decente è rotto, non ho neanche il lightbox). Gli abbiamo spiegato cosa volevamo e ha fatto alcuni scatti decenti, ma niente che potessimo davvero usare (molto simile ai miei tentativi solo con una migliore illuminazione).

Non penso che la direzione vorrà fare un fork fuori per convincere un altro fotografo dopo che l'ultimo non ha trovato nulla, quindi penso che sarò chiamato a fare un secondo tentativo di scattare qualcosa.

Qualcuno di voi ha dovuto inserire un brief come questo? Come hai fatto a scattare un'immagine adatta a questo tipo di utilizzo? Non voglio qualcosa con una lunghezza focale troppo ampia, poiché queste immagini devono avere un aspetto professionale.

Per coloro che non hanno familiarità con il termine eroe, guarda questo esempio o Articolo di Wikipedia "Hero graphic".

Perché si chiama eroe?
Non ne ho idea, questo è il suo nome però - [articolo di wikipedia] (http://en.wikipedia.org/wiki/Hero_graphic)
Maggiori informazioni sullo sfondo del termine nelle risposte a questa domanda di Stack Overflow: http://stackoverflow.com/questions/7699076/where-did-the-class-name-hero-come-from-in-css
L'immagine che hai pubblicato non è 1005px x 300px. È in formato 2: 1. Ho misurato 534 px x 249 px.
Quello era un esempio di cosa sia un eroe piuttosto che l'eroe del sito in questione
Nella pubblicità o nel marketing penso che l'immagine di un eroe significhi un'immagine grande e principale che dovrebbe fare la maggior parte delle vendite da sola. Di solito trasmette sentimenti o emozioni positive, quindi "eroe". In contrasto con immagini che soddisfano ruoli più utilitaristici come loghi o icone. Di solito c'è solo un'immagine dell'eroe in un layout ed è posizionata e dimensionata in modo più accattivante.
Sei risposte:
#1
+6
Michael C
2013-08-30 17:49:09 UTC
view on stackexchange narkive permalink

Senza vedere alcuni esempi di ciò che hai tentato, senza successo, di catturare è difficile capire esattamente perché desideri visualizzare e perché non sei soddisfatto dei risultati. Immagino sia uno dei due problemi che ti ostacolano: risoluzione o composizione

  • Risoluzione. Il fattore limitante qui non riguarda l'ampiezza dell'obiettivo utilizzato. Il fattore limitante è la quantità di dettagli che puoi includere in un'immagine 1005 x 300 px. Puoi utilizzare lunghezze focali maggiori per produrre un ampio panorama di una scena come l'edificio della tua azienda, ma quando lo riduci a 1005x300 px butti via tutti i dettagli che hai ottenuto unendo più immagini.

  • Composizione La maggior parte dei soggetti è difficile da ritrarre in un'immagine che è più di tre volte più larga che alta. Ciò è particolarmente vero per le persone, poiché la maggior parte di noi è molto più alta di quanto siamo larghi. Anche uno scatto alla testa che mostra solo un volto ha bisogno di uno spazio relativamente quadrato per sembrare corretto, e di solito anche lì il lato leggermente più lungo è quello verticale , non quello orizzontale . Un ritratto 8x10 ha un rapporto 1: 1,25 che favorisce la dimensione verticale. È praticamente impossibile adattare una singola persona in un'immagine orizzontale con un rapporto di 1: 3 (a meno che non siano reclinate, ma dubito che il boudoir sia ciò che cerchi). La soluzione usuale è posizionarli come un elemento relativamente piccolo in un ambiente che si presta alla composizione orizzontale: un paesaggio o un contesto architettonico principalmente orizzontale. Questo è ciò che ha fatto il tuo esempio con gli sposi: collocarli in un paesaggio orizzontale. Il problema quando lo fai è che è difficile trasmettere di più sulle persone nella foto rispetto all'ambiente in cui sono contenute. Il tuo campione è salvato dal riconoscimento quasi universale che il soggetto femminile indossa un abito da sposa, il maschio è vestito in modo abbastanza formale e la coppia è in una posizione intima in modo che lo spettatore tragga la conclusione che si tratta di una sposa e uno sposo. Ma l'immagine non ci dice nulla su chi siano questi sposi e su cosa sia unico di loro: lo spettatore è lasciato a quel punto a riempire gli spazi vuoti dalla propria esperienza. E anche in questo caso la composizione non funziona perché le rocce a sinistra sono più nitide rispetto alla coppia i cui piedi sono stati tagliati per adattarsi all'orizzonte artificiale dove il campo incontra gli alberi nella scena e lascia molto spazio morto aperto al centro per il testo.

Devi decidere cosa vuoi utilizzare nello spazio per comunicare: o il contenuto del testo con un'immagine di "sfondo" che non sminuisca il testo o le informazioni visive che comunicano ciò che rappresenta la tua organizzazione o chi sei. Un possibile compromesso sarebbe quello di spostare il testo da un lato e posizionare il focus visivo della tua immagine sull'altro (ma più vicino al centro, piuttosto che al fondo, del bordo destro): forse la coppia correttamente focalizzata e in piedi nel area dietro la spalla destra dello sposo.

#2
+4
Unapiedra
2013-08-30 17:38:14 UTC
view on stackexchange narkive permalink

Penso che quello che ti manca sia un concetto. In sostanza hai un'immagine panoramica 3: 1.

L'immagine che hai collegato sembra avere un rapporto più di 2 a 1. Ma partendo da quell'immagine, copiamo quel concetto.

Vedo due persone che si baciano davanti all'erba verde e una foresta sullo sfondo. In primo piano ci sono anche alcuni altri oggetti (ramo di un albero, pietre) ma fuori fuoco. Notare che anche lo sfondo è fuori fuoco.

  • Una coppia in primo piano, nitida. E sul lato destro.
  • Lo sfondo e il primo piano non importante sono sfocati.
  • Lo sfondo è la natura, quasi tutto verde con una linea dell'orizzonte dove inizia la foresta.

Ora, se vuoi farlo con i dipendenti della tua azienda, posizionali a destra oa sinistra ma non al centro. In un gruppo, un po 'vicini. Posizionali in una bella scena con sfondo simile (simile in termini di distanza, angolo, colori uniformi). Non deve essere una foresta. Un ambiente d'ufficio probabilmente avrebbe più senso.

Gioca con il diaframma per ottenere una discreta sfocatura dello sfondo ma non troppo. Un metodo qui è usare il metodo di Brenezir. Ma anche solo andare più lontano (e usare un obiettivo più lungo) potrebbe fare il trucco.

Prova a ottenere qualcosa del genere e provalo con alcuni modelli sostitutivi (può essere un manekin). Se sembra quello che vuoi in termini di composizione, puoi trovare dei modi per rendere le immagini più professionali.

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

Hai bisogno di uno scatto che funzioni con esso. Suggerirei di costruire una cornice che sia quelle dimensioni e poi camminare intorno tenendola per inquadrare le scene e iniziare a pensare a cosa funziona per quel tipo di dimensioni. Avere qualcosa di pratico e pratico che ti permetta di esplorare con quelle dimensioni in mente dovrebbe aiutarti a trovare idee per scatti che funzioneranno bene.

Una volta che sai che tipo di scatti vuoi, dovrebbe essere un materia semplice per catturarli.

Oppure una variazione su questo è scattare utilizzando Live View (o usarlo pesantemente) e attaccare del nastro adesivo sulla fotocamera per mascherare un'immagine proporzionata correttamente. In questo modo hai una visione di lavoro delle proporzioni corrette mentre procedi.
#4
+1
tmerrick
2013-08-30 17:38:04 UTC
view on stackexchange narkive permalink

Penso che ti sarà difficile trovare una ripresa individuale decente (i gruppi funzionano bene) per quelle dimensioni. Quello che ho fatto in passato per i siti web è avere l'obiettivo principale che si tratti di una persona o di un prodotto da un lato. Quindi usa una sfumatura o una maschera di livello in Photoshop e metti del testo o contenuto di tipo marketing sul lato. In sostanza, basta rendere l'essere umano o il prodotto più di un quadrato / rettangolo invece di un rettangolo super largo e sottile.

#5
+1
Rish
2013-09-04 11:31:10 UTC
view on stackexchange narkive permalink

Non credo che scattare un'immagine sia un problema qui. Il problema è renderlo nella risoluzione / formato corretto e utilizzarlo per il sito web. Puoi semplicemente fare quanto segue:

  • Componi l'immagine come hai sempre fatto, durante lo scatto.
  • Fai qualche passo indietro per assicurarti di avere un'area più ampia di te effettivamente immaginato.
  • Ritaglia & ricomponi in post produzione (Photoshop / Lightroom)

Poiché questo sarà per il web, non credo che ogni minimo dettaglio sia importa. Le immagini Web dovrebbero caricarsi rapidamente e servire allo scopo. Potresti buttare via alcuni dettagli lungo la strada, ma va bene così.

Non esitare a scrivermi un messaggio nel caso rimani ancora colpito. Sarei felice di aiutarti in ogni modo possibile.

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

Non esiste una risposta facile. Il 98% delle foto non si adatta. Il problema è la parte reattiva della domanda. Che aspetto ha l'immagine alle seguenti risoluzioni:

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

Ecco come risolvere il problema:

  1. Usa 1800 x 600 pixel (1800 è la larghezza standard ora)
  2. Muovi / centra il CSS di sfondo Hero
  3. Usa una casella trasparente nel tuo programma di grafica per trovare soggetti o parti di immagini che funzioneranno ed esporteranno solo una fetta.

Ecco un esempio con le dimensioni 1800 x 600:

http: //www.sunlitmarketing .com / - Questo esempio nasconde i 300 pixel più bassi per la larghezza dello schermo 1024 e superiore.

http://www.coastalfoto.com/ - Utilizza 1500 x 400



Questa domanda e risposta è stata tradotta automaticamente dalla lingua inglese. Il contenuto originale è disponibile su stackexchange, che ringraziamo per la licenza cc by-sa 3.0 con cui è distribuito.
Loading...