En el tiempo en que llevo trabajando en Interactive, aprendí que algo a lo que hay que prestarle un poco más de atención en la etapa de test es a los e-mails marketing. Debido a la ausencia de estándares, y que corporativamente se utilizan clientes de email como lotus o outlook pero el público en general utiliza webmails, uno se ve obligado a reducir las piezas html a una serie de reglas para performar correctamente en todos los medios.
Como no suelo encontrar guías en la web sobre este tema, comparto la que uso diariamente. Agreguen o corrijan lo que crean necesario:
<font face=”arial, helvetica, sans-serif” size=”1″ color=”#666666″ style=”font: normal 10px arial, helvetica, sans-serif; color:#666666;”>Lorem ipsum dolor sit amet</font>
De esta forma se asegura que el texto tenga el formato deseado, ya sea por “style”, o por los antiguos parámetros. Lotus usará face=”arial, helvetica, sans-serif” size=”1″ color=”#666666″, los webmails style=”font: normal 10px arial, helvetica, sans-serif; color:#666666;”.
La equivalencia en tamaños de tipografía sería:
- 10-11 = size 1
- 12-13 = size 2
- 14+ = size 3
Notar el retraso importante que se tiene en materia de email. No conozco a nivel mundial la eficacia que tiene un email marketing. Sí sé la eficacia que tienen en los sitios que maneja la agencia, porcentaje alto cuando el email se convierte en una pieza de comunicación y deja de ser un “correo no deseado”.
Más sobre eficacia de email marketing en Dossiernet.
Cumpliendo promesas, inauguro los tutoriales para aprender diseño web desde cero.
A quién le puede interesar?
A estos últimos les digo que si bien mis palabras pueden sonar soberbias, la idea es más bien que se lo tomen como un desafío profesional, tal vez personal.
O si prefieren destruirme, los invito a que encuentren los miles de errores que seguro existen y me los hagan saber, así añado sus correcciones para ir perfeccionando las técnicas de todos (no olviden de dónde aprendieron lo que saben, y que está bueno devolver algo de lo mismo).
Antes de entrar de lleno en el armado y diseño de páginas web, hagamos una breve reseña de aquellos conceptos que a lo largo del curso se van a ir mencionando, y que pasarán a formar parte de un lenguaje común:

El lenguaje que interpretan los navegadores web es el html. Por lo que para hacer una página web necesitamos conocerlo.
Un documento html es un archivo de texto. La diferencia entre un archivo .txt y uno .html radica en las etiquetas presentes en este último. Las etiquetas sirven para orientar al navegador en la forma de estructurar el contenido (títulos, subtítulos, párrafos, listas, etc). En este punto profundizaremos más adelante. Por ahora debemos tener presente que para crear un archivo .htm o .html sólo nos hace falta un editor de texto, desde un simple bloc de notas a alguno más complejo. Recomiendo el Notepad++, aparte de ser el bloc de notas que todos conocemos, trae incorporados otros lenguajes de programación que nos permite una mejor visualización por medio de colores, aparte de ser gratuito y Open Source.
En un futuro veremos que el principal problema que econtraremos es la falta de compromiso de algunas empresas de software al momento de diseñar navegadores que respondan a los estándares divulgados para la correcta interpretación del lenguaje empleado en un documento html. Esto implica un trabajo extra del diseñador al no sólo diseñar una página, sino a corroborar la correcta interpretación de la misma por diferentes navegadores.
La base de la sintaxis de este código es la etiqueta. Por ejemplo:
<etiqueta>texto de prueba</etiqueta>
La primera etiqueta activa una orden que afecta a nuestro contenido, siendo la segunda etiqueta con el signo “/” por delante la que pone fin a la misma.
Veamos un ejemplo práctico. Para obtener un texto con negrita, la etiqueta es <b>. Por lo que si queremos lograr:
texto de prueba
El código html será:
texto de <b>prueba</b>
Un documento html cuenta con una estructura a respetar para la correcta visualización por parte de los navegadores. Una estructura básica es:
Lo que vemos es que todo el documento está contenido en la etiqueta <html>, luego contamos con un encabezado, y finalmente un cuerpo. Con esto en mente, crearemos nuestra primera página. Si en un editor de texto escribimos el siguiente código:
Lo guardamos como ejemplo_1.htm y lo abrimos en nuestro navegador:

Ya empezamos a escribir en lenguaje html.
Algunas consideraciones en el manejo de archivos:
Pueden ver el ejemplo_1.htm.
En poco tiempo se estarán cumpliendo dos años de este sitio online. Tiempo en el que creo haber cambiado el diseño total unas tres veces más o menos. Algo normal para un diseñador, nunca conforme.
De esto hablaré en un futuro, hoy quiero decir que pronto estaré publicando una serie de tutoriales para aprender diseño web desde cero. Se entendió? CERO. Si no saben nada de diseñar páginas web, este es el lugar indicado para empezar.
Estoy dictando un curso de armado de páginas web, por lo que me vi obligado a crear tutoriales y guías, y como no olvido de qué manera aprendí el 90% de lo que sé, los compartiré. Espero encontrar a otros diseñadores que puedan corregir y sugerir soluciones alternativas a las que planteo. Se sabe, subís una página hoy y mañana está vieja.
Están avisados, principiantes y no principiantes, pueden esperar encontrar un espacio en este sitio para aprender e intercambiar conocimientos de diseño web.
En los últimos días dediqué algunos ratos libres a limpiar el código de este sitio, especialmente del CSS. No es demasiado, pero necesario, y me gusta más, que es lo que me importa.
Tengo pendiente (muy atrasado ya) algunos tutoriales de hojas de estilo, diseño, PHP, MySQL, programación, Flash y AS. Intentaré que se vuelva una tarea del día. El espíritu en verdad es hacerlos por diversión y gusto, pero creo que de seguir esperando el momento indicado, jamás los publicaré.
Hablando de publicar, terminé dos sitios web, dos logos y una animación de logo de los que no mostré nada. Está claro que no soy vendedor…
Un nuevo tutorial online. Esta vez revelo el proceso de realización de Maya, una de las primeras imágenes que realicé hace ya tres años.
La guía sirve para aquellas personas a las que les interesa cómo hacer arte digital, personas que quieren dar el primer paso pero que no saben cómo darlo.
Me gustó hacerlo, así que pueden contar con más guías de este tipo de muchas de mis imágenes, si a alguien le interesa el de una en particular, avisen!
Sin más, Maya – Walkthrough.

Con Maya fue la primera vez que al ver un pieza del rompecabezas que suele ser una imagen, las demás ocuparon su posición de inmediato en mi cabeza. Dicho de una manera más clara, mientras miraba los dibujos hechos por un amigo, llego al sol que observan a su derecha.
Luego de observarla durante unos segundos, fue muy claro: el sol en el medio y abajo, para perfecta atención, una pirámide Maya debajo alumbrada sólo por el sol que está poniéndose por detrás, todo bajo un clima místico.
Hasta este punto, todos podemos imaginar. Ahora venía la parte dificil, hacerlo. Lo bueno, sabía qué imagen debía lograr. Lo malo, sabía qué imagen debía lograr, y no me iba a conformar con un punto intermedio por el hecho de no saber cómo hacerlo.
El problema con el que me encuentro en este preciso momento en que escribo, es que ya ha pasado mucho tiempo desde que la hice, se estan por cumplir 3 años. Asi que lo único que no recuerdo es exactamente el orden en que fui colocando las piezas. Por suerte sí tengo un archivo completo, es por eso que antes de ir paso por paso les muestro cuál fue la verdadera evolución del trabajo.
Atención: el de a continuación es material inédito, creo que sólo visto por Santiago, amigo con el que compartimos de todo, aprendiendo el uno del otro el uso de Photoshop al mismo tiempo. Sin más, la evolución:

Pueden ver que la idea siempre fue la misma, lo que fue cambiando a lo largo de las distintas versiones fueron cuestiones de luz, color, y decoración.
Como dije antes, no recuerdo exáctamente cuál fue el orden de trabajo, asi que voy sin un orden en particular. Primero la pirámide:

Debo decir que no tengo los derechos de uso de esta fotografía. Pero como no estoy vendiendo la foto ni nada en donde esté, supongo que no habrá problema. No voy a dar una descripción de cómo hice desaparecer a tooooodas las personas, porque eso escapa al objetivo de este artículo. Para aquellos que quieran saber, sean pacientes a nuevos tutoriales, o escribanme un email.
Para hacer el fondo es donde contaba con mayor libertad, ya que no tenía nada específico en mi cabeza. Asi que viendo estas fotos:

El fondo resulto en la unión de las partes. Lo importante del fondo es que se debe ver trabajado, con un sentido y fin, pero no debe alejarte de lo fundamental: no debe distraer de el/los persaje/s principales. Al menos esa es mi filosofía, crear un contexto.

En la primer imagen se ve cúal es la idea, use la textura con una opacidad sobre fondo negro, y superpuse la misma figura espejada. Aparte de ser un elemento decorativo, tiene uno funcional. Los personajes estan mirando hacia el centro, en donde queremos que la mirada se dentenga. En la segunda imagen vemos ya algo de iluminación. Con el filtro de luz, puse un omni en donde se va a ubicar el sol, esto no solo permite simular la luz proveniente del sol, sino también la sombra. Ya en la tercer imagen agrego la pirámide trabajada anteriormente.
A destacar el hecho de que si hubiese querido que el sol esté por delante de la pirámide, debería probar con un fondo con la pirámide incluida a la hora de aplicar el filtro de iluminación.
Es hora de agregarle algo místico. Qué mejor que nubes para el caso:

Una foto del cielo, me quedo sólo con la nube, y luego la parte divertida: Duplicar, acomodar, agrupar, rotar, etc. para crear una gran nube. Luego, modos de capa para la integración.
El sol esta dibujado en una hoja cuadriculada, como pueden ver, y pintado con marcadores. El primer paso es que el cuadriculado no se vea:

Un camino a seguir es duplicar el contenido, borrar el centro asi me quedo sólo con los rayos, y hacer un desenfoque. De esta manera, las líneas mas groseras ya desaparecieron. La edición a mano también es válida, de hecho, el centro fue editado de esa manera, no había manera de hacerlo de una forma automática. Ya sé que las últimas versiones tienen mejores opciones de desenfoque, como la de superficies, pero en esa época estaba la 7 nomás.

Me adelanto un par de pasos ahora, para mostrar no sólo como evoluciona el sol, sino también mi ventana de layers. En este punto ya hice varias cosas, volvía duplicar los rayos y le cambiando el modo de capa para mayor enfoque, dupliqué el centro (con otro modo de capa) para lograr otro tipo de efecto, y realicé un ajuste de tonos.

Por último les muestro que la imagen final (en donde agregué más rayos con más desenfoque para lograr el brillo exterior, aparte del marco) es una consecuencia de combinaciones de dos etapas anteriores. Si ven nuevamente la evolución:

Notarán que la imagen del centro desencuadra con las de los costados. Esa imagen con más iluminación me sirvió para combinarla con la de la izquierda, siendo el resultado final el de la derecha. Se entiende? Mucho trabajo de máscaras. Si voy teniendo elementos de las distintas etapas que me gustan, simplemente los combino con máscaras en vez de intentar lograr todo en un único layer.
Espero que esta guía sirva para aquellos que ya tienen algo de idea de cómo manejar Photoshop, pero se preguntan cómo usar ese conocimiento para volcarlo en un poco de arte digital. Prometo seguir con este tipo de guías rápidas, como así también hacer poco a poco un manual más completo sobre el uso de Photoshop.
Para hacer comentarios sobre esta pieza en particular, o verla aún más en detalle, clic acá.
En las últimas semanas han llegado al sitio a través de buscadores intentando conseguir información acerca de archivos .NEF, y siendo que esas son mis iniciales no pudieron llevarse mucho, por ahora.
Inauguro entonces la sección de tutoriales, que como ya adelanté tendrá de todo un poco, mucho Photoshop, algo de CSS, otro poco de web, casi siempre apuntando a teoría, para que sirva de verdad y no para un parche.
Un archivo con extensión .NEF es en verdad un archivo RAW. Los archivos .nef existen debido a la falta de un estándar de archivos RAW, por lo que distintos fabricantes de cámaras digitales tendrán su propio archivo RAW para óptimo funcionamiento de su sensor, siendo Nikon el autor del archivo .NEF.
Un posible equivalente es el negativo en film. Un fotógrafo, mediantes distintos procesos de revelado, obtiene diferentes resultados de una imagen usando siempre el mismo negativo. El RAW viene a ser un negativo digital.
Las cámaras semiprofesionales y profesionales permiten al usuario setear el formato de las capturas, ya sea JPG (con compresión), TIFF (sin compresión) o RAW (negativo, sin compresión).
Mientras que el JPG y TIFF mantienen en automático o semiautomático los procesos de balanceo de blanco, curvas, contraste, saturación y enfoque, el RAW dejará estos pasos al usuario experimentado, siendo éste el que maneje estos parámetros para obtener la mejor imagen de la toma, según sus necesidades. De hecho, de cometer un error, por ejemplo en el balance de blancos, siempre puede volver al negativo para su corrección.
Mientras que una imagen JPG o TIFF es de 8 bits, un archivo RAW es de 24. De esta forma, al realizar los ajustes antes mencionados, el resultado es más efectivo. Resultado que por otra parte será de 8 bits, cabe recordar que el ojo tiene capacidad para ver esa profundidad de color.
Explicado desde otro punto de vista, una imagen capturada y guardada en JPG tendrá un postprocesado realizado por la cámara, entregando una imagen final de 8 bits, la cual tendrá limitaciones ante la necesidad de ser retocada. En cambio al ser capturado en RAW, si bien tendremos que destinar tiempo en el postprocesado, los 24 bits nos permitirán una mayor riqueza de variedades con óptimos resultados, siendo la imagen resultante de 8 bits.