Dinos que te parece!

Cartel Completo

Que os parece? vale un +1?

Hemos logrado esto con el antiguo Image Ready! Podéis descargar el PSD: planet_psd

Se pueden hacer cosas chulas!

Tengo una imágen de 4″ x 4″ que quiero meter en el área de una postal de 4″x6″

Y la postal excede en horizontal 2 pulgadas:

Vamos a seleccionar nuestra herramienta de recorte (C) para recortar la imagen a proporción de 6×4″, en las opciones configuramos la proporción del recorte: 6 in x 4 in:

Y arrastramos a lo largo de la imagen

Pero en este caso no quiero perder todo el aire que le da el cielo. Se ve muy apretada para una postal y no me gusta; vamos a renombrar la capa a “chica” y arrastramos con la herramienta de recortar la imagen completa, que cubra de arriba hasta abajo de manera que sobresalga el recorte un tercio aproximadamente de la imagen (y así cumplir las medidas reales de 6″x4″) y aceptamos para agrandar el lienzo sobre el cual trabajamos a las medidas exactas.

Tip: Normalmente no podrás arrastrar más allá del tamaño de la imagen la herramienta de recortar, debes primero cubrir la imagen, soltar el ratón y modificarla luego. (estirarla en este caso)

Ahora tenemos una imagen de 6″x4″ que se nos corta y debemos rellenar la porción de la imagen que falta.

Para ver las diferencias entre un “cortado” normal y el cortado con Content Aware vamos a duplicar la capa “chica” y vamos a Free Transform (Edit -> Free Transform o cmd/ctrl+T) y estiramos la imagen en horizontal para rellenar esa porción de imagen vacía. Podemos ver que el resultado es una imagen estirada que ningún cliente va a aceptar como buena.

Ahora hagámoslo bien: escondemos la capa estirada y trabajemos sobre la capa original (la capa “chica”) y seleccionamos Content Aware Scale (Edit -> Content Aware Scale o alt+shif+cmd/ctrl+C) y estiramos de la misma manera. Antes de aceptar, podemos ver como Photoshop se encarga de estirar el fondo, pero intenta dejar a la chica en proporción al original. Sin embargo aún le agranda los brazos. Porqué? porque el contraste con el fondo no es suficiente para que Photoshop lo tome en cuenta 100% como “zona segura” al hacer el escalado.

Presionamos Escape para no aceptar los cambios y vamos a ver una característica muy interesante de content aware scale, vamos a crear una “zona segura” de ser ampliada en el cambio de tamaño. En nuestro caso la zona más importante a tener en proporción es la chica, así que vamos a seleccionarla con la herramienta de Quick Selection Tool (W). Nada extremadamente preciso, una pasada sobre ella y poco más:

Una vez seleccionada guardamos la selección en “Select -> Save Selection” le ponemos  el nombre “chica” y deseleccionamos (cmd/ctrl+D)

Entonces es cuando procedemos a hacer el escalado con Content Aware (edit -> Content Aware Scale) y antes de cambiar nada, seleccionamos arriba, en las opciones dodne pone “protect” la selección que guardamos antes:

Y ahora si, estiramos hacia la derecha para rellenar el espacio vació de nuestra imagen y vemos como nos estire lo que nos estire, la chica se queda intacta.

Y así tenemos una imagen que no estaba hecha para proporciones de 6×4 encajar perfectamente sin dañar los elementos que nos interesan!

Mola, eh?

Click para agrandar

El coste de la guía es de un Tweet solo.

La quieres? Ve a la página de descarga.

Muchas veces tenemos una imagen que es perfecta para una composición (Web, Revista, Anuncio de prensa) pero resulta muy grande para el área donde debemos introducirla.

Por ejemplo yo tengo la siguiente imagen:

Mide 500px x 340px  y necesito ponerla en una web donde el espacio que tengo es de 250px x 340px entonces tengo un problema, ya que el alto es el mismo pero el ancho no, no puedo simplemente reducirla de tamaño sin perder la escala:

Hagamos la prueba:

Por seguridad, dupliquemos la capa de la imagen, una vez duplicada presionemos cmd/ctrl + T y arrastremos del nodo que está en el lateral derecho hasta que tenga 250px de ancho.

Tip: La paleta INFO (view ->info) nos dice el tamaño de una selección a medida que la vamos cambiando, útil para ver el tamaño a la que debemos dejar la imagen:

No es el resultado deseado, ya que se estrechan los contenidos, el barco se “aplasta” las personas también….

Lo voy a dejar ahí para referencia y volvemos a duplicar la capa original para hacerlo de otra manera: Content-Aware Scale.

Este le dice a Photoshop que mantenga las zonas de alto contraste en la imagen para que no se vean afectadas por cambios de tamaño, en nuestro caso el bote, las personas el barco con lo que no perderían proporcionalidad.

Vamos a Edit -> Content-Aware Scale (alt+cmd/ctrl+shif+C) y reducimos el tamaño tal como lo hicimos con el free transform (cmd/ctrl + T) anteriormente.

Podemos ver como ahora las personas y el bote -las zonas de más contraste en la imagen- han mantenido su proporción a medida. Simplemente de las mejores herramientas en Photoshop: Content Aware. Abajo podemos ver la imagen Original y las dos reducciones de imagen que hicimos, cual es mejor?

Click para descargar original

Click para descargar original

Vamos a abrir ambas imágenes en un mismo documento en capas diferentes: un truco en Photoshop CS5 es abrir la primera imagen y la segunda arrastrarla desde la carpeta que la contiene hasta Photoshop, y la insertará en la imagen abierta como una capa.

Intentaremos llevar los ciclistas a la playa, pero no tenemos la imagen de la playa completa, está cortada. Así que el primer problema es “rellenar” esas zonas en blanco y para eso usaremos la nueva característica de Photoshop CS5: Content Aware y es más sencillo/rápido que ponernos a clonar o a dibujar incluso:

• Tracemos una selección rectangular que cubra la imagen y deje la zona blanca “descubierta”

• Tenemos la selección de la imagen, pero queremos rellenar lo blanco, así que vamos a seleccionar lo inverso: cmd/ctrl + I o Select -> Inverse.
• Vamos a rellenar con Content Aware: shit + backspace o Edit -> Fill y usamos Content Aware para completar las zonas blancas con la imagen que la rodea.

Y con eso tenemos las zonas blancas de la imagen rellenas con el contenido de la foto.

Esta me parece una de las características mas increíbles de Photoshop CS5, pero más adelante veremos otros tutoriales para conocerla a fondo. Vamos a extraer a los ciclistas del atardecer para colocarlos en esta foto:

Seleccionamos la capa de los ciclistas y el atardecer y vamos a Select -> Color Range que es una herramienta que nos selecciona rangos de coolres y en esta imagen con seleccionar los negros, nos basta para obtener nuestras siluetas.

dejamos la opción que viene por defecto (select) y seleccionamos la opción de “Localizar clusters de colores”. Jugamos ahora con la suavidad o “Fuzziness” del rango de colores dando click con el gotero en la imagen: Un click con el gotero en la zona más negra, la central, y ajustamos la suavidad para que no se pierdan las ramas que salen en la parte izquierda.

Para poder visualizarlo mejor en la parte inferior de la ventana de Rango de Colores tenemos para seleccionar previsualizaciones, pues selecciona Grayscale (Escala de Grises) para poder ver en la imagen los cambios.

Consejo: Como los negros de esta imagen no son “negros negros” (varían según nos desplazamos a la izquierda o la derecha entre grises oscuros) podemos seleccionar la herramienta de gotero con un simbolo de + para agregar las diferentes tonalidades: hacemos click en la zona de la derecha, la del centro y la de la izquierda.

Una vez que estemos satisfechos con la definición de las ramitas, aceptamos:

Ahora vamos a crear la máscara para trabajar, asegurémonos de tener el panel de máscaras visible: Ver -> Máscaras (View -> Mask) y agregamos una máscara según la selección que tenemos. Color Range funciona bien, pero redefinir la selección con la herramienta de Máscara es aún mejor.

Lo que vamos a hacer es hacer zoom en la parte que más conflictos nos da para seleccionar: las ramas Vamos a darle a Mask Edge para redefinir y lo que vamos a hacer es seleccionar Smart Radius y jugar con el para definir los bordes de la imagen:

Vemos como salen más ramitas de la nada! xD En realidad lo que hacemos es ajustar la máscara para que deje pasar mas información de la imagen.

Las opciones que vamos a tocar esta vez para redefinir la máscara son el Radio que como hemos visto nos ayuda a definir los bordes, Shit Edge para ampliar el rango de desenfoque y suavizar los bordes y lo que me aprece más importante: Decontaminating Colors nos quita ese halo del color rojo que tiene la foto original para que se integre más aún en la imagen de la playa:

Para que veamos un antes y un después de redefinir la máscara:

Y la imagen final:

No confundamos estos ajustes con los que vienen con Photoshop de toda la vida bajo el menú Imagen – Ajustes.

Estos ajustes son permanentes, no podemos cambiarlos más adelante u ocultarlos. Por ejemplo, si elegimos Niveles y aplicamos un cambio a la imagen, digamos que la aclaramos mucho, estamos cambiando el documento y cuando volvamos a ajustar los niveles, el histograma que obtenemos será completamente diferente al original y puede que imposible de volver a reajustar los niveles:

Por el contrario, si agregamos una capa de ajuste, elegimos niveles y hacemos el mismo cambio que realizamos anteriormente, obtenemos el mismo resultado pero el histograma no cambia. Podremos ver una nueva capa en el panel de Capas y ocultarla para notar como la imagen original sigue intacta:

Si hacemos click en la capa de fondo, veremos como el panel de ajustes vuelve a su posición normal: todas las opciones. Pero si hacemos click de nuevo en la capa que contiene el ajuste, la ventana mostrará los últimos ajustes que hicimos y, lo que supone toda la ventaja de esto, cambiarlos. Hay un pequeño botón en la parte inferior del panel que te permite reiniciar los ajustes para eliminar todo cambio hecho a la capa:

Las capas de ajuste aparte de tener una pequeña ventanilla en el panel en vez de una ventana en el medio de la pantalla (lo cual es muy práctico para trabajar) te permiten agregar muchos ajustes independientes a tu imagen, no solo uno. Podemos agregar también una capa de ajuste de blanco y negro sin perder la información de color de la imagen original; tendríamos dos: ajuste de niveles y ajuste de blanco y negro. Podemos borrar una, o ajustarlas independientemente.

Ya que las capas de ajuste son eso: capas, lo primero que se nos pasa por la cabeza es ajustar la opacidad, de nuestro ejemplo borremos la capa de ajuste de niveles y ajustemos la opacidad presionando la letra V y la letra 8 para establecer el porcentaje de opacidad a 80%.

Otro de los “juegos” interesantes son los Blendig Modes o Fusión, la cambiamos a Overlay y obtendremos un contraste de colores muy fuerte.

Por último lo que considero la característica más versátil en una capa: máscaras. Presionamos la B para seleccionar la herramienta pincel y seleccionamos la máscara de la capa de ajuste en mi ejemplo voy a pintar los toldos verdes que ponen Grimoldi para ocultar totalmente la capa de ajuste en esa zona y dejarlo como en el original, si nos pasamos de pintura podemos presionar X e intercambiar el color frontal por el trasero para pintar con blanco la máscara y corregir. Si no tenemos Blanco y negro, podemos presionar D para establecerlos como nuestros colores.

También podemos ajustar niveles por zonas, por ejemplo esas imágenes que salen claras arriba y oscuras en otras zonas:

Creando un degradado en la máscara de la capa de niveles de negro a blanco, de arriba a abajo (el negro oculta la capa de ajuste) podemos cambiar solo la parte inferior de la imagen:

Hemos visto que nuestras capas de ajuste son bastante versátiles: podemos re-ajustarlas en cualquier momento, ajustar la opacidad, ocultarlas, cambiar el modo de fusión y cada Capa de Ajuste tiene una máscara que podemos modificar para ocultar ciertas zonas de ajuste.

Veamos el mini (miiiiini) tutorial:

Uno de los procesos que más utilizo a la hora de dar dramatismo a fotografías de rostros es de lo más simple: duplicar la capa, aplicar un desenfoque y cambiar el blending a Hard Light. Obtenemos gracias al Hard Light mas rango de tonos y el Desenfoque nos da esa sensación de haber sacado la foto con un filtro de Vaselina.

Simple eh?

Veamos algunos ejemplos:

Blur: 7px opacidad de la capa: 85%

Un poco más sutil:

Blur: 5px Opacidad de la capa: 45%

Acentuado:

Blur: 12px opacidad: 75%

Probemos con un Lens Blur

Utilizando este canal para no desenfocar los ojos y darle protagonismo a Adriana Lima (sin gafas, en la foto)

Opacidad: 100%

A veces ir por el lado simple nos arregla las cosas sin perder tanto tiempo.

• Creamos un documento nuevo (600×400 px es buena medida para empezar)
• Cargamos una forma libre llamada “Film” – película en español, corregidme si me equivoco ya que el Photoshop en Español no es mi fuerte. Seleccionad “Append” cuando os pregunte si queréis remplazar la lista actual de formas.

• Selecciona la segunda forma que te ha agregado y simplemente arrastra para crear una nueva capa de forma (Shape Layer) con la forma de nuestra tira de película.

• Vamos a agregar 4 imágenes al documento, para ello uso el MiniBridge de PS CS5 navego hasta mi carpeta y selecciono los 4 archivos a introducir con ALT + click o Cmd/ctrl click:

• Arrastramos esos 4 archivos al documento y podemos notar que no los pone los 4 a la vez sino uno por uno, esto nos da tiempo de ajustarlos dentro de cada “hueco” de la película:

Técnicamente ya lo tenemos, pero vamos a jugar un poco con el archivo: vamos a acoplar todas las capas (las 4 imágenes y la película) en una sola: click en la capa de la película y shift (may.) + click en la capa superior de las imágenes, de manera que todas queden seleccionadas. Presionamos cmd/ctrl + E para acoplarlas. Nos queda un documento con dos capas: el Background y la película. Dupliquemos la capa de la película.

Arrastramos la capa nueva justo debajo de la capa existente y seleccionamos Edit -> Transform -> Flip Vertical (Edición -> Transformar -> Reflejo Vertical) y bajamos la opacidad a un 30% en esa capa.

Ahora quedaría bien si borramos un poco la capa copia en la parte inferior para dar la impresión de desvanecimiento. Si estáis seguros de lo que hacéis, unas simples pinceladas con la herramienta de borrar con un pincel bastante difuminado y grande bastará: 150 px de diámetro y 0% de Hardness (Dureza?):

La otra opción por si queremos probar, borrar o corregir es crear una máscara a la capa y probar con gradientes en la máscara de negro a blanco. Particularmente, con una Wacom basta y sobran las pinceladas.

Bueno! un último toque: vamos a acoplar las dos capas que tenemos (seleccionamos ambas y presionamos cmd/ctrl + E) vamos a ir a Edit -> Transform -> Warp y en las opciones seleccionamos “Flag” (Bandera)

Aceptamos y listo:

Es un tutorial sencillo pero el resultado puede impresionar con un poco de creatividad.

En Photoshop solo tenemos que seleccionar una u otra herramienta (subexponer o sobreexponer) y aplicar a la imagen para aclarar u oscurecer.

Sobre y subexponer trabajan muy bien en imágenes en blanco y negro ya que en realidad solo tocamos tonos de color, así que usaremos una imagen en blanco y negro como ya se dijo una vez en TodoTutoriales.es

Click para ver tamaño original

Agreguemos un poco de “drama” a la imagen dándole ligeramente más intensidad a los brillos y oscureciendo las sombras. Básicamente vamos a aumentar los contrastes pero con la precisión que nos da un pincel: podremos seleccionar ciertas áreas para resaltar y otras dejarlas como están.

Empecemos por las luces, seleccionemos la herramienta de Dodge o subexposición (O en el teclado) y vemos que nos salen 3 opciones a elegir en el rango de luces: Sombras, Mediotonos y Luces:

Su significado es literal. Si queremos aclarar las sombras (a la derecha del histograma), mediostonos (al centro del histograma) o luces (a la ziquierda del histograma). Nosotros queremos agregar mas contraste y rango de tonos (mas blancas las luces y mas oscuras las sombras) así que seleccionaremos Highlights y bajaremos la exposición a 10% para las nubes.

Recomiendo en vez hacer trazos con el pincel de Dodge dar solo “puntadas” elegir un pincel que cubra el área y dar un click o dos, en las zonas pequeñas ir con cuidado y hacer pequeños trazos con un pincel pequeño, Yo lo hice solo sobre las partes blancas de las nubes. Luego subiremos la exposición a 20% y daremos un par de toques con un pincel grande en las zonas claras del mar. El resultado es el siguiente:

Click para ver en Grande

Genial, no? ya vemos como esas nubes y ese mar van obteniendo dramatismo, pero hay que aumentar más el rango de tonos, y ya hemos forzado las luces al límite así que toca aumentar las sombras: a oscurecerlas. Selecciona la herramienta de Burn (Sobreexponer) y tal como hicimos con la herramienta Dodge, seleccionamos el rango de luces que queremos oscurecer. Las sombras y un 10% de exposición son buenos valores para empezar.

Vamos a oscurecer las sombras de las nubes y las zonas donde no aclaramos en el mar (en los bordes y el centro). Juguemos con la exposición para oscurecer un poco más o menos, el gusto tiene mucho que hacer aquí! Yo obtuve la siguiente imágen:

Click para ver en grande

Comparad con la primera y veréis exactamente donde apliqué yo mis Dodges and Burns!

Tened en cuenta que cuando se aumenta el rango de tonos siempre obtendremos algo de ruido, hay varias técnicas para deshacernos del ruido, y por otro lado pueden aparecer “manchas” en vez de simples aclarados, jugad con el porcentaje de exposición. Ambos factores se pueden evitar si trabajamos con la imagen a 16bits en vez de a 8 bits ya que Photoshop cuenta con más información con que trabajar.

Ya que esta técnica es ideal para resaltar elementos de una imagen (oscurecer el fondo para resaltar un rostro, aclarar la cara, etc.) no es buena idea meterse con los medios tonos porque le quitaremos profundidad a la imagen.

Dragones y Princesas son variasilustraciones donde los protagonistas son: Dragones y Princesas (si, soy un genio).

Si se vuelve a descuidar, le robaré algún otro!

Vemos que tenemos las esquinas superior izquierda e inferior derechas enfocadas ya que están cercanas al foco de la foto, y vamos a intentar desenfocarlas con Photoshop.

Seleccionemos el fondo (yo lo hice con la Quick Selection Tool) no tiene que ser exacto, ya veis en el ejemplo de abajo que no es necesaria mucha precisión y creamos una nueva capa a partir de la selección (cmd/ctrl + J)

Creamos una nueva capa y a hacer un degradado de negro a blanco. Esa capa será una máscara para acentuar el desenfoque:lo que sea negro NO estará desenfocado  y el blanco la zona donde se aplicará desenfoque, yo acabé con el siguiente degradado:

Vamos a irnos a la capa con el degradado, seleccionamos todo (cmd/ctrl A) copiamos (cmd/ctrl C) y nos vamos a la paleta de canales, creamos uno nuevo y pegamos (cmd/ctrl V) y deseleccionamos (cmd/ctrl D) con eso tenemos nuestra base para aplicar el degradado. En mi caso el nuevo canal es “Alpha 1″

Ahora la parte interesante: vamos a aplicar un desenfoque, pero no un desenfoque gaussiano, vamos a aplicar un desenfoque de lente (Lens Blur) a la capa que creamos con comando/control J. Lens Blur se acerca más al tipo de desenfoque que podría dar una cámara que Gaussian Blur.

Las opciones de Lens Blur no suelo tocarlas, el valor que de verdad importa es “Radio” que es el que va a dar la amplitud de nuestro desenfoque y la fuente (source) que debe ser nuestro canal Alpha creado:

Y obtendremos nuestra imagen desenfocada:

Si quedan bordes cortados o mal ajustados cargad la selección que creamos (cmd/ctrl click sobre la capa) e invertid la selección (cmd/ctrl I) y borrais (backspace/delete) un par de veces.

Para entrenar un poco intentad con diferentes degradados, aquí os dejo otra foto para contrastar:

Para empezar debemos elegir una imagen de alta resolución a la que valga la pena hacer zoom (imagenes de poca resolución no sale rentable, ya que pierden resolución con un zoom)

click imagen (+2 MB)

Muy bien, vamos ir a Archivo -> Exportar -> Zoomify (FIle – Export – Zoomify) y veremos que tenemos varias opciones; las que trae por defecto suelen ser las mejores porque están basadas en la imagen que hemos elegido. Podemos elegir el tipo de plantilla para el archivo HTML. La calidad de las imágenes (la mejor si queremos que el usuario aproveche la aplicación) y el tamaño de la tabla donde va a ir insertado.

Una vez que aceptamos, Zoomify crea una carpeta con las secciones del zoom (65 en mi caso) y un archivo flash para darle uso e insertarlo donde queramos  – No olvidemos el archivo HTML del que podemos obtener el código. Listo para subir a la web y ya.

<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" WIDTH="400" HEIGHT="400" ID="theMovie"> 

<PARAM NAME="FlashVars" VALUE="zoomifyImagePath=DSC01763_img&zoomifyNavigatorVisible=false">

<PARAM NAME="BGCOLOR" VALUE="#ffffff">

<PARAM NAME="MENU" VALUE="FALSE">

<PARAM NAME="SRC" VALUE="DSC01763_img/zoomifyViewer.swf">

<EMBED FlashVars="zoomifyImagePath=DSC01763_img&zoomifyNavigatorVisible=false" SRC="DSC01763_img/zoomifyViewer.swf" BGCOLOR="#ffffff" MENU="false" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"  WIDTH="400" HEIGHT="400" NAME="theMovie"></EMBED>

</OBJECT>

Puedes ver el ejemplo en Vivo

Crear marco

Crear borde insertado

Redondear esquinas

Crear Marco:

Esta acción nos crea un marco con el color trasero de nuestra paleta, así que si quieres el marco blanco, solo presiona la letra D en Photoshop.  En el proceso se te preguntará por el ancho del marco.

Crear Borde Insertado:

Creamos un borde interno insertado en la imagen, es bastante sencillo pero lo utilizo mucho en diseño web. El proceso preguntará por la distancia del borde, debemos colocar la misma distancia las dos veces que lo pregunte.

Redondear Esquinas

Este proceso lo uso mínimo 100 veces al día! El radio de la curva se lo daremos al definir el filtro Gaussian Blur (Desenfoque Gaussiano) cuando la acción lo pregunte. Muy útil para botones =D

Descarga el pack de 3 acciones: Pack Acciones Photoshop

Os hablo de que el otro día tenía muchas imágenes en JPG un viaje con la cámara digital de un amigo, y quería ponerlas en una web, todas con el mismo ancho por razones de estética;  la cámara de mi amigo era un desastre con fotos bajo nubes, así que decidí aplicarle autolevels de Photoshop, que trabaja bastante bien.

Para ello abrimos una imagen para tenerla como base y sobre ella grabar la acción. Lo primero que hice fue crear una acción nueva, en la paleta de acciones, el icono de nuevo en la parte inferior y nombrarla “Resize and Autolevels”.

Luego aplico autolevels (ctrl + L) y ajusto el ancho a 500 px – Este es el paso donde puedes agregar el proceso que necesites aplicar a tu lote de imágenes!

Todo esto mientras la acción se graba, con cuidado de no realizar ninguna otro comando en photoshop, ya que quedará reflejada en la acción que estamos grabando.

Ahora que tenemos nuestra imagen corregida de color y ajustado el tamaño, presionamos el botón de “Detener” – Stop – en la paleta de acciones y cerramos la imagen SIN GUARDAR los cambios.

Vamos a crear ahora el proceso por lotes File -> Automate -> Batch

Seleccionamos nuestra acción “Resize and Autolevels” en Set y Action

Set selecciona la carpeta de las posibles diferentes carpetas en la paleta de acciones y Action selecciona la Acción en concreto a aplicar. En Source tenemos que elegir donde están nuestros archivos, podemos trabajar con archivos ya abiertos en photoshop, pero yo elijo directamente la carpeta donde tengo las 300 fotos. También hay varias opciones para elgir, en una acción pueden haber comandos de Abrir y Cerrrar registrados, puedes seleccionar saltarlos asi no duplicas una apertura de archivo o el Guardarlos como, en nuestro ejemplo nos da igual, no tenemos ni abrir ni guardar en la acción que creamos, de igual manera tengo seleccionada la opción de suprimir advertencias de perfiles de color. Como destino elijo una carpeta nueva, podemos elegir tambien simplemente guardarlos, asi nos guarda los cambios en las imagenes, para prevenir males mayores prefiero guardar una copia en otra carpeta.

Las demás opciones nos permiten jugar con el nombre de las imágenes, numerarlas, ponerles diferentes prefijos al nombre, etc…

NOTA: Si seleccionamos la opción Override action “Save As” command tendremos que ajustar una por una cada una de las imagenes al momento de guardar como JPG si no son JPG. Podemos evitar esto si en la acción agregamos también el comando SAVE AS con los parámetros que mas nos gustan: Osea, después de aplicar el autolevels y ajustar el tamaño, buscamos “save for Web” y guardamos la imagen. Así nos repetirá ese “save for Web” con todas las imágenes en el proceso de lote.

La ejecutamos y ya tendremos una copia de todas las imágenes ajustadas en nuestra nueva carpeta.

Que se puede aplicar en las acciones a poner en procesos de lotes? casi de todo:

Ajustes de tamaño

Ajustes de colores

Cambiar tipo de imagen (JPG TIFF GIF etc)

Cambiar el modo (CMYK RGB B/W)

Incluso cambiar solo el nombre y agregarle una secuencia numérica

y muchos mas, es una herramienta útil que pocas veces utilizamos y que tenemos ahi mismo =)

1º Matas unas moscas, con cuidado.
2º Déjalas secar al sol 1 hora.
3º Toma las moscas, agarrate lápiz y papel…y ¡deja fluir tu imaginación!

ç

La creatividad tiene muchas formas de expresión ;)

ver/watch Original Size

Empecemos por decir que SEO no es una ciencia y no siempre sumar dos estrategias dan el mismo resultado. Son ya 10 años desde que pareció el término de SEO y a pesar de toda la documentación disponible, sigue siendo un tema “oscuro” para algunos.   Una de las cosas que más ha evolucionado estos 10 años relativas al SEO es la inteligencia de los motores de búsqueda, de hecho el Bot de Google es tan inteligente que prácticamente “navega” la web como un humano: sabe decidir que sitio es relavante con respecto a que tema y cual es una granja de links. Si quereis evitar que Skynet despierte, ya sabeis por donde empezar…

Sabemos que los elementos más importantes para un ranking alto es contenido + backlinks, pero hay otro elemento sin el cual ninguno funciona: Lógica. Lógica quiere decir que si tu sitio es un bar, no puedes tener un ranking alto en restaurantes ni por el hecho de estar ambos en el mismo campo: Alimentos y Bebidas. Por eso es bueno preguntarnos siempre si tiene lógica que nuestro sitio tenga ranking en palabras concretas (no hacemos nada que salga de primero en restaurantes si tenemos un Bar) Estás cubriendo ampliamente y en profundidad en tu web las palabras claves que quieres meter en ranking? Y de ser así, tienes tu sitio organizado para que los motores de búsqueda lo entiendan?   En el 95% de los casos donde no funciona todo el sistema de Backlinks (y hablamos de miles de dólares invertidos anualmente en una web por backlinks en un alto Page Rank) es culpa del contenido y la estructura de la web.

Crear un contenido estructurado es solo lógica pero aunque suene trillado, vemos muchos websites que obvian esto. Para seguir con el ejemplo anterior, si quieres entrar en ranking con bebidas y comidas tal vez debas crear una página con ambos productos y una breve descripción de cada uno luego para cada producto crea una página con una descripción más amplia incluyendo tal vez algún video e imagen. Para que funcione aún mejor podríamos dividir esas páginas en subproductos (bebidas alcohólicas, refrescantes, etc…) Esta estructura no solo nos ayudará en nuestro ranking por Bebidas (o bares) sino que nos empujará el ranking en Hostelería, ya que el tema está expuesto de una manera que los motores de búsqueda lo tengan fácil para “navegar”.   Este concepto no es para nada nuevo, pero aún así muchas web lo ignoran.

Ahora, no estamos diciendo que simplemente con estructurar la web va a lanzar tus rankings al espacio. Solo decimos que no deberías pensar en BackLinks sin antes haber estructurado todo de una manera SEO-Friendly, osea: Tener en cuenta el In Site SEO antes de ir a por el Off Site SEO.

La web ha evolucionado en los últimos 10 años: de páginas de texto puro a aplicaciones interactivas y desafortunadamentealgunos navegadores (en realidad solo hablo de IE) ya no soportan estas características. Entonces porque no se motivan a las empresas a actualizar? Aún veo empresas con IE 6 y reclamando que su web no es apta para IE6. Vamos, hay muchas opciones:

Google Chrome

Safari

Firefox

Opera

Internet Explorer 7+

Además cada vez menos compañías ofrecen soporte para IE6:

• Google no desarrolla ya aplicaciones válidas para IE6. (Google DOCS y Google SITES no se pueden apreciar desde IE6)
• WordPress acaba de quitar el soporte para IE6.
• Microsoft mismo no da soporte a IE6

Entonces porque no actualizar a un navegador más actualizado y asegurarse la mejor experiencia en internet? Creo que hablo en nombre de todos los diseñadores y desarrolladores cuando le doy las gracias a grandes como WordPress y Google por quitarse ese lastre de encima (y Microsoft que TAMPOCO da soporte a IE6, parte del agradecimiento desde aquí). Recientemente tuvimos un cliente que insistía que su sitio funcionara perfectamente en IE6. Esto requiere esfuerzo y tiempo extra para llevar a cabo, por ende la factura sube y el cliente se molesta, es un proceso redundante. En CoolVillage hemos decidido decir no a ese tipo de peticiones.

Se argumenta que todo depende de la cantidad de usuarios, aún hay sitios que tienen IE6 como el navegador mayoritario entre sus visitantes y abandonar esa parte de la audiencia puede ser determinante para una empresa. Como diseñadores, intentamos las empresas tengan la mejor imagen posible para que los clientes sientan confianza. Programando para IE6 es casi imposible que como empresa que te veas interesante a los ojos de tus clientes, y que te veas actualizado ni hablar. Meterse en una guerra competitiva con otras empresas cuando apuntas a medios desactualizados no es buena idea.
Podemos mantenernos actualizados con la cantidad de gente que usa IE y sus versiones gracias a w3school y como dato importante sólo un 1.3% de un total de 21.7% de usuarios de IE usa IE7. Creo que ya es hora de dejarlo.

Como Mac User (Fanboy dicen algunos) estoy muy contento de no tener nada que ver con IE ya que no es solo el 6, sino el 7 y el 8 los que no soportan estándares modernos como CSS3 y HTML5, recomiendo a todos utilizar FireFox o Chrome, incluso la versión de IE9 es una buena opción; en palabras de Steve Jobs “It just works”.

Elegante, eh?

Lo primero que debe tener una web para jugar a tu favor es dinamismo: No hagas una web estática, básicamente de lo que se trata esto de WEB 2.0 es de interactuar y de ofrecer contenido, pon un blog en tu web, una sección de preguntas y respuestas interactivas o incluso una página para comentarios de los clientes.

A muchas empresas no les gusta esa opción por los problemas que pueda generar con sus clientes descontentos, pero si haces las cosas bien no hay porque temer y esto ayudará a tu web en muchos aspectos:

1-. A Google le gusta las páginas que se mueven: mientras más actualices con palabras claves en tus temas más tendrá Google en cuenta tu web.

2-. Al generar contenido constantemente generas un motivo a tus clientes para volver.

3-. Creas confianza en tu empresa y un canal de comunicación con tus clientes y, sobretodo, posibles clientes.

Un canal de comunicación.

De esto es de lo que se tratan las redes sociales, de crear un canal de comunicación sólido con potenciales clientes. Tu empresa puede tener una imagen y no transmitirla por lo que debes crear una buena estrategia de marketing en Facebook, Twitter y demás social networks (incluida esa sección dinámica de la que hablamos al principio).

Son acciones complicadas que muchas veces requieren ayuda profesional y no hablo de un Social Media Expert: personalmente jamás contrataría a un “Community Manager” ya que estoy de acuerdo con quien dice que estamos cometiendo el mismo error que en la era de los .com: pon uno en tu empresa y eso te dará credibilidad. Mentira.

Pero para que nos sirve tener 5.000 fans y 10.000 “followers”? Es la norma básica de la publicidad: Donde cuesta más un anuncio en la tele? en un canal regional o en uno nacional? El nacional seguro lo verá mucha más gente que el regional y este mismo efecto se traduce a esa carrera por obtener seguidores en las redes o blog. Con una diferencia: tu eliges tus seguidores y cuando promociones tu empresa en Facebook o Twitter irá dirigido a tus seguidores, quien de verdad está interesado en el producto.
Una promoción bien llevada en internet puede generarte la misma cantidad de clientes que con medios convencionales con mucha menos inversión. Gaby Castellanos habla en su Blog de la eficacia de vender o gestionar compras gracias a la influencia de tu empresa en las redes sociales.

Con un incremento tan elevado en tu target gracias a Internet, vas a dejar que tu web siga siendo un trozo de papel escondido? Promociónala!

El diseño tiene influencias de Art Nouveau en sus motivos ornamentales vegetales como guiño a la primavera y algo de inspiración del pintor Mucha en las protagonistas del cartel con sus tintas planas y rebordes acentuados.

Un diseño basado en los espectáculos que recorrerán la ciudad: Moros y Cristianos, Gigantes y Cabezudos, Malabares, Pirotecnia…

El diseño tiene influencias de Art Nouveau en sus motivos ornamentales vegetales como guiño a la primavera y algo de inspiración del pintor Mucha en las protagonistas del cartel con sus tintas planas y rebordes acentuados.

En Cool Village tenemos siempre unas pestañas abiertas en nuestro Chrome (planteando pasarnos a Firefox4) que nos facilitan el proceso de diseño web: Fuentes, Diagramación, Colores, Efectos CSS y más… SOn servicios gratuitos que se encuentran en internet y a los cuales nos hemos acostumbrado hasta casi no trabajar sin ellos.

Color Scheme Designer

Esta herramienta nos facilita elegir colores. Cuando un cliente quiere un determinado color, tenemos que saber con qué colores se puede complementar la web: colores de links, fondos y demás elementos. Andrea como buena Licenciada, se sabe de memoria que colores son complementarios, opuestos, cálidos, etc… pero yo tengo memoria de pez y esta herramienta es genial para decirme  que colores combinan y cuales no, antes hacía webs verdes con azul! (tengo que listarla en el post anterior).

CSS3 Generator

Si eres de los que le gusta el Copy&Paste y odias escribir todo ese código, recargar la web, ver como queda, volver a guardar, recargar, etc. aquí tienes un generador de código CSS3, ajustas los valores y el generador te va dando el resultado en el área de previsualización.Te permite crear código CSS3 para:

• Sombras a cajas
• Sombras a texto
• Bordes redondeados
• RGBA (Colores con transparencia)
• @font-face (fuentes predeterminadas)
• Múltiples columnas dentro de una caja
• Box Resize y Box Sizing
• Outline (borde exterior)
• Transiciones
• Transformar (distorsión, cambiar de ángulo, tamaño, etc…)

Font Springs

Fontspring te permite bajar fuentes gratuitas o de pago y te genera el código crossbrowser @font-face para tu web, muchas opciones entre las fuentes y puedes comprar fuentes sin necesidad de una suscripción.

0 a 255

Es quizás la herramienta que más utilizamos: le decimos un color en hexadecimal y nos pone toda la gama de negro a blanco para poder hacer links del mismo color pero más oscuros, o fondos sobre contenedores de la misma gama de colores. Un simple click y ya tienes el código hexadecimal copiado al portapapeles.

Font Tester

Font Testes es un generador de estilos de fuentes en CSS, tienes 3 áreas para editarlas por separados y editar los estilos. Puedes copiar el código listo para pegar en tu elemento CSS. Además tiene  el lujo de mostrarte un previsualizador de web safe fonts (algunas no tan ‘safe’) para que elijas que fuentes quieras testear. una herramienta muy completa.

Y de regalo, nuestra herramienta estrella:

What The Font (WTF)

¿Alguna vez te ha llegado un cliente con “quiero esa fuente”? o “me lo hizo un chico pero no se que fuente es”? en esos casos suele ser Comic Sans, pero si alguna ves no es Comic Sans aquí tenéis una herramienta con la que con solo subir una imagen de la fuente, te dice (la mayoría de las veces) que fuente es. Eso si, intenta hacer caso a sus consejos para subir la imagen, debe tener buena resolución y que se vean los detalles.

A nosotros estas 5+1 herramientas nos vienen de perla mínimo una vez al día cada una. Y vosotros cuales usais?

¿Quién no ha visto una web y ha dicho “mis ojos mis ojos”? todos por seguro. Sabemos ya lo importante que es la presencia en internet, lo que puede ayudar a tu empresa a posicionarse en este siempre competitivo mercado pero entonces, porque hay tantas empresas que dejan de invertir los recursos apropiados en su presencia online?

Los casos no suelen limitarse a empresas pequeñas, hemos visto casos de grandes compañías que se niegan a invertir en una web en condiciones y aún estamos buscando los motivos, no pensamos que sea por desconocimiento, a estas alturas de la vida, de la importancia de internet para tu empresa.  Hay empresas que se niegan a crear una web, entendible si tienes la filosofía de “Internet es una moda pasajera” pero hay otras – lo cual es peor – que han invertido en su web y le dan la misma importancia que un tríptico en la caja de reciclaje. Creemos que una web debe ser dinámica, debe llegar al público y no esperar a que el público le llegue, tiene que usar las herramientas que internet ofrece para expandirse: Google, Redes Sociales, buen diseño, usabilidad, gancho, etc…

¿Pero de verdad hay empresas que no se dan cuenta que su web es parte importante de la estrategia comercial? por supuesto. Hay muchas webs con puntos que pueden ser reforzados para formar parte del engranaje de marketing de la empresa, webs con errores básicos en su usabilidad y contenido.

Estrategia: Debemos tener en cuenta que una web es como una tarjeta de presentación y no sirve de nada crearla y dejarla guardada en un cajón. Debe tener una estrategia de expansión: SEO, Redes Sociales, boca a boca, o cualquier método preferido; pero hacer una inversión en una web para no darle difusión es tirar el dinero.

Diseño: Como es el caso de la ropa los diseños de las webs deben cumplir con la tendencia actual, ser creativos; patrones de texturas agresivas como fondo ya no se llevan, botones que arropan el texto y dificultan su lectura tampoco. Para referencia tenemos estos 25 ejemplos de diseños CSS.

Contenido: El contenido debe acompañar el desarrollo de la web. El sitio web debe “moverse” y actualizar el contenido periódicamente. Las ventajas de este dinamismo son principalmente la fidelización del público y la implementación SEO (a Google le encantan las webs que se mueven).

Expansión: La web tiene que aprovechar los medios que ofrece la red para expandirse. Debe aprovechar el impulso que dan las redes sociales y promover tu empresa, siempre se ha dicho que el boca a boca es la mejor publicidad y ahora está al alcance de nuestras manos ponerlo a prueba.

Código: Igualmente esto está muy dicho, pero aún hace falta recordarlo: Diseños Tableless, usa CSS, diagrama con capas y usa estilos en archivos externos. Recuerda que cada línea de código es tiempo de carga así que optimiza tu CSS y HTML para el tiempo de carga, crossbrowser y W3C válido.

En resumen tenemos una web para sacarle provecho, para que nuestra empresa le saque provecho, no podemos ni debemos crearla y dejarla ahí esperando que alguien venga y la visite. Eso no genera ganancias a nuestra empresa.

Sin embargo hay varias empresas que prefieren no actualizar ni “retocar” los errores en sus webs corporativas y hemos visto muy al límite de lo permitido, desde efectos predefinidos en photoshop y fuentes como Comic Sans hasta diagramaciones sin lógica alguna. UNA LOCURA! xD

Esta es una web de un Centro Comercial (Centro Comercial Las Camaretas) importante en Soria, España y se puede ver que el diseño peca de obsoleto.

Si, es Comic Sans.

Podemos aplicar todos los fallos arriba enumerados para mejorar esta web, que obviamente no aporta ningún desempeño en el papel del Centro Comercial como empresa.

La siguiente web (http://www.extintoresdelcastillo.com/) está hecha en flash totalmente, lo que impide su desarrollo en campañas de SEO o expansión en redes sociales:

Hay una web muy atractiva para ver ejemplos de diseños que no debemos hacer: Los peores webs sites del 2010. Podemos pasarnos por ahí a reirnos un rato, pero sobretodo a tomar ejemplos de lo que NO debemos hacer.

Y vosotros que opinais? Vale la pena tener una web sin que se le pueda sacar provecho? Renta tener una web aunque sea con errores básicos de concepción?

Al Fin!

Vimeo saca su aplicación para poder videos en Iphone. Lo bueno es que no es solo un reproductor, la aplicación te permite Editar, subir, administrar y ver tus videos desde tu Iphone.

Características de la aplicación

• Ver y administrar todos tus videos existentes en tu cuenta de Vimeo y bajarlos al carrete de tu cámara.
• Subir tus tomas o archivos grabados en  HD o SD.
• Remplazar archivos existentes.
• Editar título, descripción, etiquetas y créditos.
• Pausar/continuar el proceso de carga (y te lo recuerda)
• Compartir en Facebook, Twitter, Tumblr, WordPress, Email o SMS.
• Agregar clips a tus grupos, canales y albums.
• Estadísticas de reproducción, “likes” y comentarios.

Un editor sencillo de usar

• Capturar video con contro de enfoque y alineación.
• Combina, edita y corta tus videos.
• Agrega transiciones, títulos y efectos.
• Agrega música y grabaciones desde tu biblioteca de Itunes via WIFI o USB
• Guarda tus videos en tu cámara o súbelos directamente a Vimeo.

Mucho más por ver:

• Puedes ver videos desde tu buzón de entrada en Vimeo, ponerlos en cola o ver videos que te han gustado.
• Descubrir nuevos e interesantes videos en la pestaña de navegación.
• “Like” videos facilmente, comentarlos o agregarlos a la cola de reproducción para verlos luego.

En Vimeo dicen que pronto sacarán las versiones para Ipad y Android, pero que primero quieren tener la versión para Iphone estable (a nosotros nos dio unos errores en el renderizado)

Pero si la cosa es así, porque cada dia cuesta más crear un diseño? espero no ser el único al que la parte creativa le toma más tiempo que la ejecución de un proyecto! bueno, miento, eso era antes. Porque señores yo, lo confieso, ROBO TODAS MIS IDEAS!ninguna idea es mia!! es extraida, modificada y adaptada de algún proyecto similar que me gustó mucho y por esa razón en mis Marcadores de Chrome tengo el 90% de webs que me gustan contra un 10% de webs que me proporcionan herramientas para el diseño. Pero es que básicamente para herramientas utilizo 3 o 4 y para “Robar” utilizo unas 100.

Robar. Estoy robando bajo una patética excusa de inspiración? o es moralmente aceptable el tomar “ideas” o “conceptos” prestados de otras personas y ejecutarlos de manera diferente para que parezcan tuyos? no me malinterpreteis yo a veces me curro mis conceptos, todos los tutoriales que vendrán a esta web son mios o creados entre amigos, pero eso es crear soluciones a problemas, no es crear una obra de arte. Vamos, que me siento estafado, YO QUIERO MI CREATIVIDAD! tal como la tenia van Gogh, como la tiene Bill Gates, si, porque la creatividad no son solo brochazos o tirar trozos de yeso en una escultura, también es idearte una forma de desarrollar tu empresa.

Poseo un poco de técnica y ejecución, si me tiro mierda también he de reconocer donde tengo cualidades, estos tutoriales dejan claro que la teoría la tengo estudiada , pero es una teoría que aprendí de otros. Son técnicas que desarrollé por problemas que encontraba en esas teorías, y hablamos solo de Photoshop, HTML, CSS o Javascript muchas de esas técnicas son obsoletas con los filtros o programas pre-construidos encontrados hoy dia. Osea, no es un gran logro.

Pero vamos a la parte positiva de todo esto, y es lo que os puede servir algún dia a vosotros si pasais por esta crisis de non-creativity life. Mis Favoritos! Olé xD

Tengo una sección de CSS que siempre reviso para hacerme una idea de como quiero que esté diagramada la web, eso si no la tengo ya definida por haberla robado en otra web en cuyo caso la reviso para pillar directamente el layout que mas me conviene xD

http://www.csseasy.com/

http://www.bluerobot.com/web/layouts/

http://www.glish.com/css/

http://www.araudi.net/

Y algo que hago muy a menudo, es mientras agarro sueño o me tomo un café, es revisar tutoriales de efectos de diversas webs, así veo un poco como se lo curran otros y que podría hacer yo con eso. Que webs visito para eso? Pues para código:

http://www.noupe.com/design/101-css-techniques-of-all-time-part-1.html

http://www.dynamicdrive.com/

http://css.maxdesign.com.au/

http://www.darioferrer.com/

Y para diseño:

http://elitebydesign.com/50-must-read-resources-for-incredible-web-design/

http://www.smashingmagazine.com/

http://www.hongkiat.com/blog/41-nicest-photoshop-photo-effects-photoshop-tutorials/

http://bgpatterns.com/

http://psdtuts.com/

http://pshero.com/

http://vandelaydesign.com/blog/design/photoshop-lighting-effects/

http://designreviver.com/tutorials/50-excellent-body-enhancement-photoshop-tutorials

http://wydstudios.com/blog/mega-tutoriales-para-photoshop-mas-de-100/

http://www.photoshoproadmap.com/Photoshop-blog/2008/04/01/100-wonderful-photo-effects-photoshop-tutorials

http://www.colourlovers.com/

http://www.photoshopstar.com/

Y muchos mas, pero son estos los que más reviso, los que más recursos tienen. Tengo otra sección interesante de técnicas específicas que me gustan, pero son para casos concretos: como crear gotas de agua, como crear superposición de texto con CSS y cosas por el estilo. Todas para robar, TODAS!

Es culpa de mi madre o mi padre que me dieron estos genes cutres y me obligan a robar =(

Ahi os lo dejo, porsi os quereis unir al club.

Saludos!

Pequeña viñeta con Wakkos y Sombrerera al mas puro estilo “Real Life”! (click para ver en grande)

=D

Imagen vectorial de uno de mis tantos dibujos de Alicia y el Sombrerero Loco, haz click para ver en grandote!

Diseño y diagramación (CSS, JavaScript y alguna API de Google para el Google Map) aunque para llos slideshow de imágenes nos pareció genial el Script de Jon Design Smooth Gallery. Totalmente gratuito y adaptable a nuestro proyecto.

Estos diseños fueron realizados para el bar La Pinta, en Soria, para darles un poco de imagen interna al bar. Aún faltan por terminar algunos otros, pero de momento, estos están ya colocados en el Bar.

Fueron dibujados y luego digitalizados y tratados (en Photoshop, obvsly xD)

Tarjeta de presentación para una compañía de Las Vegas,

Era complicado ya que lo que es el ratón va troquelado y a ese tamaño pocas imprentas lo hacían.

El diseño ganó el concurso en  99designs después de varios intentos:

intento3

intento 2

Intento 1

Con la nueva gerencia del camping quisieron darle una imagen diferente al típico tríptico con logo y mapa que tenían anteriormente, así que buscamos salidas con verdes y pequeños “znippets” del camping en sí.

Cliente: Camping fuente del Botón

Diseño: Tríptico A4, 4+4 colores, a dos caras.

Técnica mixta. Cuadro empezado con acuarelas y café, finiquitándolo en Photoshop

Viva la Experimentación!!!!

A la Sombrerera siempre me han gustado las mujeres rollizas.

Esta ilustración fue hecha en digital con Photoshop con un tableta a media marcha