← La nueva identidad del gobierno mexicano | ↑ Principal | ¿Y tú, cómo rechazas la deshonestidad? →

Sombras profesionalesTutoriales

Escrito por Mark hace más de un año | 26 comentarios

Actualización: el rollover de los pimientos ya funciona en IE y Firefox (antes sólo funcionaba en Safari).

Si hay algo que me da nauseas en el diseño gráfico contemporáneo es el uso excesivo de drop shadows. Antes de Photoshop 6 tenías que hacerlas manualmente, lo cual limitaba su uso, pero ahora que la función está tan a la mano, muchos diseñadores tienden de abusar de él. Y en sí no sean malos, bien aplicados pueden separar el frente del fondo (como en las ventanas de Mac OS o Windows Vista, por ejemplo).

El reflejo más obvio de este abuso es cuando alguien le aplica una sombra a un objeto tridimensional:

primero.jpg

El amateur usa la sombra de default que le da photoshop. El diseñador la ajusta un poco, suavizándola y haciéndola más discreta. Pero eso no evita que ponerle una sombra plana a un objeto tridimensional es un error. Es como si tuviéramos un recorte de la fotografía flotando sobre un papel, como se muestra en el diagrama anterior.

Para aplicar sombras profesionales hay que entender que un objeto tridimensional provoca una sombra distinta al perfil del objeto, y también hay que comprender su causa: la luz.

rebotes.jpg

En el render anterior podemos ver cómo rebota la luz. En realidad es un proceso mucho más complejo y caótico, los que se dedican al 3D le llaman photon mapping. Son cálculos complejos, mi computadora tardaría horas en renderear una escena así. Pero, sabiendo un poco acerca de cómo funciona la luz y el ojo humano, nos podemos aproximar.

Como recordarás de tus clases de física, la luz blanca contiene todos los colores del arcoiris. Cuando incide sobre un objeto —digamos, una manzana roja— lo que está sucediendo es que la manzana absorbe todos los colores excepto el rojo, el cual rebota, y llega a hasta hasta tu ojo.

De la misma manera, el el render anterior podemos ver cómo va cambiando de color el "rayo" en cada rebote. Es un diagrama simplificado, las superficies no reflejan tan directamente los rayos, sino que difuminan y atenunan la luz, iluminando no sólo la trayectoria del rayo, sino todo lo que le rodea.

Tomé esta foto donde pueden apreciar cómo se "contamina" la sombra por el color del objeto. "Pero Mark, apenas y se nota! Seguramente no abrá problema si hago una sombra de color gris". Para nada, tu ojo te está engañando. Pasa el mouse por encima de la imagen y lo verás. (Personas con lectores de feeds, pasen a ver la demostración a esta entrada).

Pasa el mouse para observar el cambio

El cerebro humano es un maravilloso procesador de imágenes en tiempo real. Balanceamos el color y la iluminación en la mente para que tenga sentido. Cuando sacas de contexto el color de los pimientos, el verdadero color de las sombras sale a relucir.

No es necesario tener un estudio y tomarle foto a sombras reales. Con un poco de intuición, sabiendo cómo funciona la luz, y a base de prueba y error puedes lograr resultados satisfactorios. Aquí un ejemplo:

comparacionfial.jpg

Ahi está, por favor tengan piedad de este diseñadorsucho y no le apliquen drop shadows a objetos tridimensionales!

Comentarios Escribe un comentario

Escrito por:
Lisandro Moisés Enrique
Mayo 23, 2007 9:40 PM

vosabes que, y puedo jurarlo por mi madre y solo mi cabeza tiene esa info, que hace mas o menso 15 dis que estoy armando un post como este pero con mas info porque me pasa lo mismo que a vos. Y tengo otro tema qu e tratar también que me esta hartando... y lo voy a hacer. muy buen info, lo que si, desd emi punto de vista y con los conocimientos que tengo , en el cuadro del render, la luz no rebota por esos "lados" sino por otros y generas las sobras que genera.. pero solo un detalle nomas.

Escrito por:
Donchamagoso
Mayo 23, 2007 9:52 PM

Sip, y en general, en el bajo mundillo de los aficionados al 3d como yo esa propiedad de la luz es llamada "Radiositi".

¡Muy buena observación Mark! Espero esto le sirva a muchos de los diseñadores en ciernes que se ven repitiendo cuanto efecto tienen los programas, esperemos que Adobe no se de cuenta de lo que acá escribes y saque un plugin que sirva justo para hacer eso que hiciste...

Escrito por:
carlos
Mayo 24, 2007 3:21 AM

No se si es problema mío, pero la imagen hoverover sólo la he podido ver pinchando en el enlace, pasando el ratón por encima no me ha funcionado (sale todo negro).

Aparte de eso, muy buen post, aunque te ha faltado explicar cómo conseguir la forma adecuada (y no sólo el color) de la sombra tridimensional sin usar un programa de ray tracing.

Escrito por:
Omi
Mayo 24, 2007 8:45 AM

Efectivamente... Y es gran verdad que mucho de lo visual que es amateur, emplea todo el efecto posible que traiga el software. La chamba esta en llegar a un entendimiento de como realizar "Efectos no especiales" para dise;adores, como mencionan en la revista a!.

Estoy de acuerdo con Carlos, quiz'a un post sencillo que nos haga entender la intensidad y profundidad de la sombra con respecto a la altura y angulo de la luz. Ya que algunas sombras las hago manual, pero muchas veces las siento "fake" porque no me salen con la intenci'on que tengo en la cabeza y no se como ajustarla "la forma" que proyectan...

Saludos.

Escrito por:
asz
Mayo 24, 2007 11:21 AM

Muy bueno este artículo Mark, la verdad es que creo que la mayoría en sus inicios hemos pecado en eso, sobretodo al basarnos en objetos virtuales y no mirar un poco más a la naturaleza que es donde está el diseño real

Saludos

Escrito por:
br
Mayo 24, 2007 1:53 PM

No olvidar el color del fondo-pared-piso sobre el que cae o refleja la sombra, ya que se "mezclan" los colores, creando generalmente tonos pardos (no negro).
Buen post Mark..aun te sigo el paso ;)

Escrito por:
Lalo cota
Mayo 24, 2007 2:36 PM

muy bien tu articulo mark, pero el ejemplo de el chile pimiento esta bien para un lugar encerrado y con luz blanca sobre una superficie blanca, pero si fuera en otras condiciones se veria muy diferente, los editores de imagen tienen una sombra mas bien pensada en exteriores (asi de generico)lo cual se ve espantoso, la sombra que pusiste se ve muy bien es agradable a la vista

Escrito por:
Mariana
Mayo 24, 2007 9:58 PM

Mark ya sabes que siempre te felicito, me encantó,
ya sabes que aunque poco se de diseño por ser psicóloga
mucho admiro tu creatividad y creación, tu ingenio y
tu paciencia para lograr tan expectacular representación.
Concuerdo con Lisandro, al mirar las sombras detalladamente
creo que habría que repensarlas y hacer evidente de
donde vienen tomando en cuenta la dirección de la luz.
Me preguntaba, ¿cuánto tiempo te lleva escribir un artículo de tu blog?

Escrito por:
Daniela
Mayo 25, 2007 3:36 PM

¡Muy buen punto! Ya era hora que alguien dijera algo sobre los infames drop-shadows aplicados a cualquier cosa.

El ejemplo del pimiento está muy bien realizado, voy a recomendar este artículo a unos cuantos "diseñadores" que conozco :-P

Escrito por:
Héctor Muñoz
Mayo 26, 2007 12:35 AM

No tenía ni idea... la verdad siempre como que se me ha hecho medio chafa el ponerle sombras a las cosas si realmente no las tienen pero está muy interesante, a lo mejor ahora me animo a poner algunas.

Por cierto, uso iexplore y el cuadro donde escribes los comentarios sale mocho, osea que una parte del texto que escribes no se ve, queda colgando en el vacío.

Escrito por:
cheky
Mayo 26, 2007 10:19 AM

el problama esta resuelto? pues en teoria comprenderemos todos, ahora, si tanto te molesta, en lugar de regañar deberias decir como llegar al resultado adecuado, o perdón se me olvidaba, como todo buen diseñador, el egoísmo nos gana

Escrito por:
Vuarnet
Mayo 28, 2007 5:28 PM

Excelente anotación como ya es costumbre Mark. Haces reflexionar gruesísimo en cada nota y creo que esa es la idea. Veo que muchos llegan aquí esperando encontrar la receta para aplicársele a todas las pinches imágenes habidas y por haber, hasta llegar al punto que por más realistas que sean las sombras decía uno "Ya estuvo, no?"

Recuerdo con nostalgia esa época que mencionas en que casi no había plugins para el Photoshop, ahora si que había que "apañárselas" con lo que hubiera, canales, layers, blurs, moverle al offset un poquito, etc. lo mismo paso con el bevel & emboss, recuerdo que hace 12 años, hacerlo era una proeza que solo unos cuantos podían hacer, pero después lo veías hasta en la sopa. Lo mismo con el efectito ese de ponerle a cualquier imagen la esquina doblada...

Choacante además cuando escuchas a un cliente decir: porque no le mete más diseño, jovén? refiriendose a más drop shadows, degradados y efectos pedorros del Photoshop.

A que pinches tiempos me hizo recordar señor Mark...

Escrito por:
Donchamagoso
Mayo 30, 2007 12:19 AM

Tssss ... "...Porqué no le mete más diseño joven?"...

Esa frase arde y gacho. Si de verdad quieren que un cliente no les diga eso, entonces detallen sus trabajos con cosas que sean difíciles de descifrar. Lo que hizo Mark con el ejemplo de la última sombra, ya nos toca a nosotros buscar la manera de hacerlo, pues a él su trabajo le costó y, por el detalle y buena fe que demuestra con sus artículos, lo menos que podemos hacer es buscar hacer las cosas por nuestros medios.

Un trabajo bien hecho, con nivel de detalle suficiente, entregado a tiempo y correctamente analizado antes de su elaboración, no tendrá como punto en contra el comentario ese de "ponerle más diseño" a las cosas. Yo, ahora en esta etapa de mi vida profesional, escucho muy rara vez ese comentario, pero cuando lo hago, es una clave para saber si mi diseño es de lo más estándar posible (por no decir común, que ya es insulto) y que es hora de regresar a la libreta de anotaciones...

¡Gracias de nuevo Mark!

Escrito por:
theyedropper
Mayo 30, 2007 11:44 AM

Joder que buen artículo, una pasada Mark. Llevo intentandoselo hacer entender a mi jefe durante horas y voy y me encuentro con su post, de esta o me hechan o me ascienden.

Enhorabuena por el blog.

Escrito por:
* ::: :.. :··: :..: *
Junio 2, 2007 11:21 AM


Hola!

llegue aquí por la página de los alquimistas y me he pasado un buen rato leyendo tus artículos, curriculum y demás...

Soy Diseñadora Gráfica y no sé pero como que sentí un poco de menosprecio y bueno, quizá tengas un poco de razón al decir que los conocimientos de un mercadologo, comunicologo y diseñador se conjuntan en un diseñador de información; Pero eso no quiere decir que siendo diseñador implique que no tengamos esa inquietud por investigar e interpretar lo que el cliente realmente necesita, al menos en mi experiencia puedo decirte que investigo, me empapo (como dicen por ahí) y saco conclusiones para poder ofrecer buenos resultados y satisfacción al cliente. Se me hizo un comentario un tanto egocentrico ya que estas dando a entender entonces: para que estudiar mercadología, comunicación o diseño si existe una carrera donde voy a aprender a hacer todo eso junto! ...

Y pensando en esto que te acabo de escribir creo que comprendo que tienes razon y no dudo (creeme) en que siendo diseñador de información tengas o tengan la capaciodad de hacer todo eso, pero si me estas además hablando de trabajo en equipo y demás creo que siempre podemos recibir comentarios, ayuda, crítica de personas expertas en ciertas áreas y sirviendonos de retroalimentación y aprendizaje para un futuro.


Espero no haber malinterpretado la información y que mi comentario no te moleste, sólo fue una percepción y quize compartirla.

Ya te agregue a mis favoritos, anduve por aquí un buen rato y aprendí = ) así que creo que me haria bien repetir la visita...

Saludos desde el bajío!

Escrito por:
Droid
Junio 2, 2007 11:55 AM

Excelente post. Tienes toda la razón.
saludos

Escrito por:
Mark
Junio 2, 2007 12:02 PM

* ::: :.. :··: :..: * Ese texto lo escribí hace varios años, definitivamente lo voy a cambar porque me han llegado muchas inquietudes (por no decir mentadas de madre, jaja) de diseñadores gráficos. No es mi intención poner el diseño de información por encima de otras disciplinas, sólo es diferente.

Escrito por:
Julio cesar
Junio 20, 2007 2:45 PM

Como puedo hacer estos efectos, tienes algun manual de ayuda

Escrito por:
pebarco
Julio 7, 2007 1:15 AM

muy cierto viejo mark, soy diseñador y es cierto abuse del drop shadow pero gracias a tus tecnicas las sombras seran al estilo profesional como debe ser.

Escrito por:
Carlos
Diciembre 30, 2007 12:30 PM

Increible articulo felicitaciones, con gusto leere tus articulos desde mi lector de feeds ;) nos leemos.

Escrito por:
LeoBonilla
Marzo 1, 2008 10:53 PM

super buena esta aclaración, para ke muchos aprendan y no sigan cometiendo burradas!

Escrito por:
Fernando Anacona O.
Septiembre 29, 2008 9:37 PM

Me parece excelente tu comentario mark, pero yo le sigo insistiendo a mis alumnos que en el diseño gráfico publicitario, la verdadera razón está en el aporte que pueda hacer tu diseño para que se de la acción de venta. Tengamos en cuenta que los programas sistematizados no son mas que una herramienta con el mismo valor que tiene un lápiz o una crayola, por lo tanto, el campesino que escribe con un troso de carbón sobre un pedazo de madera en la tiendita de su vereda "SI AY GUEVOS", se convierte en el mejor comunicador gráfico del mundo, si logra dejar su estantería sin un solo huevo. Gracias.

Escrito por:
Anónimo
Diciembre 10, 2008 9:45 PM

holkagggggggggggggg

Escrito por:
lycan
Octubre 24, 2009 12:49 AM

As a member of a guild the results of your Guild Fights will have effects on both every guild member and the guild metin2 yangitself. You mustmetin2 yang fight to gain metin2 yangpossession of one of the rare strongholds. As your guild′s might rises, you will get the chance to use metin 2 yangNon-Player-Characters in your stronghold and train them metin 2 yangto be more effective.

Escrito por:
lycan
Octubre 24, 2009 12:51 AM

Ninjas are professional killers, who can attack through ambush. In order to maximise on both strength and mobility, these assassinscheap metin2 yang wear only lightbuy metin2 yang armour. This allows them to execute rapid and fluid manoeuvresacheter metin2 yang without hindrance.
Depending cheap metin2 yangon their area of specialization, Ninjasmetin2 gold can be master acheter Metin2fighters in close-combat situations with daggers, or in distant-combat situations with bowscheap metin2 yang.
The wisdommetin2 gold achieved through long yearscheap metin2 yang of intense study allow the comprar Metin2 YangShamans to use cheap metin2 yangSpells and Magic to attack their foes. When in a fight and in support of metin2 goldtheir friends, their mysticbuy metin2 yang powers are very effective.
Depending on acheter metin2 yangtheir area of acheter Metin2specialization, cheap metin2 yangShamans may choose to strengthen their attacks, or to upgrade individual healing and cheap metin2 yangsupport spells.
Suras are fighters acheter metin2 yangwho gained magical powers by agreeing to grow the Seed of Evil in their arms. The magic they now cheap metin2 yangcontrol allows them to wound their enemies from afar in distant-combat situations, while their skill with a metin2 powerlevelingsword makes them excellent close-combat fighters.

Escribe un comentario

(opcional)

(opcional)