Question:
Comment tirer pour une image de héros de site Web large?
danbroooks
2013-08-30 16:49:16 UTC
view on stackexchange narkive permalink

Je suis un développeur web interne qui est en charge de l'aspect technique d'un site Web d'entreprise. J'ai également essayé la photographie dans le passé, donc j'ai quelques connaissances en photographie. Je suis également la personne qui fait tout le travail graphique et la manipulation de photos (bien que ce ne soit principalement que de recadrer / redimensionner des images) pour le site.

Notre site Web a un héros en haut de chaque page qui est 1005px de large sur 300px de haut. Nous avons eu du mal à trouver / prendre des images qui peuvent être rognées à cette taille. J'ai essayé d'en photographier moi-même, du bâtiment de l'entreprise et du personnel, mais j'ai eu du mal à prendre tout ce qui fonctionnait vraiment à ces dimensions.

Ensuite, nous avons fait appel à un professionnel, dans l'espoir qu'il puisse faire un travail bien meilleur que moi (je n'ai qu'un objectif en kit, et mon seul stroboscope décent est cassé, je n'ai pas de lightbox non plus). Nous lui avons expliqué ce que nous voulions et il a pris des clichés décents - mais rien que nous puissions vraiment utiliser (un peu comme mes tentatives juste avec un meilleur éclairage).

Je ne pense pas que la direction voudra bifurquer pour obtenir un autre photographe après que le dernier n’a rien trouvé, alors je pense que je serai appelé à faire une deuxième tentative de prise de vue.

Est-ce que l’un d’entre vous a dû faire un brief comme ça? Comment avez-vous pris une image adaptée à ce type d'utilisation? Je ne veux pas quelque chose avec une focale trop large, car ces images doivent avoir un aspect professionnel.

Pour ceux qui ne connaissent pas le terme héros, voir cet exemple ou le Article Wikipédia "Hero graphic".

Pourquoi s'appelle-t-il un héros?
Aucune idée, c'est son nom cependant - [article wikipedia] (http://en.wikipedia.org/wiki/Hero_graphic)
Plus d'informations sur l'arrière-plan du terme dans les réponses à cette question de Stack Overflow: http://stackoverflow.com/questions/7699076/where-did-the-class-name-hero-come-from-in-css
L'image que vous avez publiée n'est pas de 1005 px x 300 px. Il est au format 2: 1. J'ai mesuré 534px x 249px.
C'était un exemple de ce qu'est un héros plutôt que le héros du site en question
Dans la publicité ou le marketing, je pense qu'une image de héros signifie une grande image principale qui est censée faire la majeure partie de la vente seule. Habituellement, elle transmet des sentiments ou des émotions positifs, d'où le "héros". Contrasté avec des images qui remplissent des rôles plus utilitaires tels que des logos ou des icônes. Il n'y a généralement qu'une seule image de héros dans une mise en page et elle est positionnée et dimensionnée de manière plus accrocheuse.
Six réponses:
Michael C
2013-08-30 17:49:09 UTC
view on stackexchange narkive permalink

Sans voir quelques exemples de ce que vous avez essayé, sans succès, de capturer, il est difficile de comprendre exactement pourquoi vous souhaitez afficher et pourquoi vous n'êtes pas satisfait des résultats. Je suppose que c'est l'un des deux problèmes qui vous gênent: résolution ou composition

  • Résolution. Le facteur limitant ici n'est pas la largeur de l'objectif utilisé. Le facteur limitant est la quantité de détails que vous pouvez inclure dans une image de 1005 x 300 px. Vous pouvez utiliser des distances focales plus longues pour produire un large panorama d'une scène telle que le bâtiment de votre entreprise, mais lorsque vous la réduisez à 1005x300 px, vous jetez tous les détails que vous avez gagnés en assemblant plusieurs images.

  • Composition La plupart des sujets sont difficiles à réaliser sur une image trois fois plus large que haute. Cela est particulièrement vrai pour les gens, car la plupart d'entre nous sommes beaucoup plus grands que nous ne sommes larges. Même une balle dans la tête qui n'affiche qu'un visage a besoin d'un espace relativement carré pour qu'elle paraisse droite, et généralement même là, le côté légèrement plus long est le côté vertical , pas horizontal . Un portrait 8x10 a un rapport 1: 1,25 favorisant la dimension verticale. Il est pratiquement impossible d'adapter une seule personne dans une image horizontale avec un rapport 1: 3 (à moins qu'elle ne soit inclinée, mais je doute que le boudoir soit ce que vous recherchez). La solution habituelle est de les placer comme un élément relativement petit dans un environnement qui se prête à une composition horizontale: soit un paysage, soit un cadre architectural essentiellement horizontal. C'est ce que votre exemple a fait avec les mariés: les placer dans un paysage horizontal. Le problème, lorsque vous faites cela, c'est qu'il est difficile de transmettre plus d'informations sur les personnes sur la photo que sur l'environnement dans lequel elles se trouvent. Votre échantillon est sauvé par la reconnaissance presque universelle que porte le sujet féminin une robe de mariée, le mâle est habillé assez formellement et le couple est dans une position intime pour que le spectateur en tire la conclusion qu'il s'agit d'une mariée et d'un marié. Mais l'image ne nous dit rien sur qui sont ces mariés et ce qui est unique à leur sujet: le spectateur est laissé à ce moment-là pour remplir les blancs de sa propre expérience. Et même dans ce cas, la composition ne fonctionne pas parce que les rochers à gauche sont plus nets que le couple dont les pieds ont été coupés pour s'adapter à l'horizon artificiel où le champ rencontre les arbres dans la scène et laissent beaucoup d'espace mort ouvert au milieu pour le texte.

Vous devez décider de ce que vous souhaitez utiliser l'espace pour communiquer: soit le contenu du texte avec une image «d'arrière-plan» qui n'enlève rien au texte ou des informations visuelles communiquant ce que votre organisation représente ou qui vous êtes. Un compromis possible serait de décaler le texte d'un côté et de placer le focus visuel de votre image de l'autre (mais plus près du centre, plutôt que du bas, du bord droit): peut-être le couple correctement focalisé et debout dans le zone derrière l'épaule droite du marié.

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

Je pense que ce qui vous manque, c'est un concept. Vous avez essentiellement une image panoramique 3: 1.

L'image à laquelle vous avez lié semble être plus d'un rapport de 2 à 1. Mais à partir de cette image, copions ce concept.

Je vois deux personnes s'embrasser devant l'herbe verte et une forêt en arrière-plan. Au premier plan se trouvent également d'autres objets (branche d'arbre, pierres) mais flous. Notez que l'arrière-plan est également flou.

  • Un couple au premier plan, net. Et sur le côté droit.
  • L'arrière-plan et le premier plan sans importance sont flous.
  • L'arrière-plan est la nature, presque tout vert avec une ligne d'horizon là où commence la forêt.

Maintenant, si vous voulez faire cela avec des employés de votre entreprise, placez-les à droite ou à gauche mais pas au centre. En groupe, un peu rapprochés. Placez-les dans une belle scène avec un arrière-plan similaire (similaire en termes de distance, d'angle, de couleurs uniformes). Ce n'est pas forcément une forêt. Un environnement de bureau aurait probablement plus de sens.

Jouez avec l'ouverture pour obtenir un fond flou correct mais pas trop. Une méthode ici consiste à utiliser la méthode de Brenezir. Mais aller plus loin (et utiliser un objectif plus long) pourrait aussi faire l'affaire.

Essayez d'obtenir quelque chose comme ça et testez-le avec certains modèles de stand-in (peut être un manekin). Si cela ressemble à ce que vous voulez en termes de composition, vous pouvez trouver des moyens de rendre les images plus professionnelles.

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

Vous avez besoin d'une photo qui fonctionnera avec. Je suggérerais de construire un cadre qui correspond à ces dimensions, puis de le tenir debout pour encadrer des scènes et de commencer à réfléchir à ce qui fonctionne pour ces types de dimensions. Avoir quelque chose de pratique et pratique qui peut vous permettre d'explorer en gardant ces dimensions à l'esprit devrait vous aider à trouver des idées de plans qui fonctionneront bien.

Une fois que vous savez quels types de plans vous voulez, cela devrait être un question simple pour les capturer.

Ou une variante à cela est de prendre des photos en utilisant Live View (ou de l'utiliser beaucoup) et de coller du ruban adhésif sur l'appareil photo pour masquer une image correctement proportionnée. De cette façon, vous avez une vue de travail du rapport hauteur / largeur correct au fur et à mesure.
tmerrick
2013-08-30 17:38:04 UTC
view on stackexchange narkive permalink

Je pense que vous aurez du mal à trouver une photo individuelle décente (les groupes fonctionnent bien) pour ces dimensions. Ce que j'ai fait dans le passé pour les sites Web, c'est de me concentrer sur le fait qu'il s'agisse d'une personne ou d'un produit d'un côté. Ensuite, utilisez un dégradé ou un masque de calque dans Photoshop et mettez du texte ou du contenu de type marketing sur le côté. Essentiellement, il suffit de faire de l'humain ou du produit un carré / rectangle plutôt qu'un rectangle super large et maigre.

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

Je ne pense pas que prendre une image soit un problème ici. Le problème est de le créer dans une résolution / un format correct et de l'utiliser pour le site Web. Vous pouvez simplement faire ce qui suit:

  • Composez l'image comme vous l'avez toujours fait, pendant la prise de vue.
  • Faites quelques pas en arrière pour vous assurer d'avoir une zone plus large que vous réellement imaginé.
  • Recadrer & recomposer en post-production (Photoshop / Lightroom)

Puisque ce sera pour le Web, je ne pense pas que chaque détail est va compter. Les images Web doivent se charger rapidement et servir l'objectif. Vous pourriez jeter certains détails en cours de route, mais ce n’est pas grave.

N'hésitez pas à me laisser un message au cas où vous seriez toujours frappé. Je serais ravi de vous aider de toutes les manières possibles.

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

Il n'y a pas de réponse facile. 98% des photos ne rentrent pas. Le problème est la partie sensible de la question. À quoi ressemble l'image avec les résolutions suivantes:

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

Voici comment résoudre le problème:

  1. Utilisez 1800 x 600 pixels (1800 est la largeur standard maintenant)
  2. Flotter / Centrer le CSS d'arrière-plan du héros
  3. Utilisez une boîte transparente dans votre programme graphique pour trouver des sujets ou des portions d'images qui fonctionneront et n'exporteront qu'une partie.

Voici un exemple au format 1800 x 600:

http: //www.sunlitmarketing .com / - Cet exemple masque les 300 pixels les plus bas pour une largeur d'écran de 1024 et plus.

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



Ce Q&R a été automatiquement traduit de la langue anglaise.Le contenu original est disponible sur stackexchange, que nous remercions pour la licence cc by-sa 3.0 sous laquelle il est distribué.
Loading...