El problema lo resuelve el plugin para Gimp: Save for Web, que provee de las mismas herramientas que su homólogo de Adobe.

Su instalación no difiere del de otro plugin –para windows– :

• Descargar Save for Web y extraer el archivo.
• Copiar el archivo webexport.exe a la carpeta de plugins de Gimp, puede ser algo como:
  Windows XP: C:\Documents and Settings\nombre-usuario\.gimp-2.6\plug-ins
  Windows vista y Windows 7: C:\Users\nombre-usuario\.gimp-2.6\plug-ins
• Reiniciar Gimp si se esta usando.

Personalmente me ha sido fácil adaptarme al entorno de Gimp, que sin duda es una alternativa seria a Photoshop, que suple capital con comunidad. Si usan Gimp ¿Qué otros plugins usan? Sirve me ayudan a sacarle más provecho a este excelente software.

Una de las cosas que aprendí mientras empece a bloguear es el tema de las imágenes, como diseñador que se dedica a los impresos , siempre se tiene la idea de que un archivo más pesado es mucho mejor, o mas aún, pierdes la noción que mientras en el los impresos hablas de MB en web se sigue hablando en KB, definitivamente si inicias con tu proyecto web te será de gran ayuda conocer los diferentes formatos de imágenes para web y saber cual usar en cada momento.

GIF, el gran amigo de la web

Graphics Interchange Format como es su nombre completo del formato GIF, es un formatos que tuvo un gran fama cuando la explosión de la web inicio, gif se mantuvo durante muchos años con un estándar para imágenes de internet, con 256 colores (que ahora ya están en desuso), y su gran característica que reconocía el canal alfa por lo que nos dejaba guardar imágenes con transparencia.

Desgraciadamente este formato tienen una patente, por lo cual los fabricantes de software tenían que pagar a la empresa dueña de los derechos llamada Unisys, esto hizo que otras alternativas como el PNG, pudieran tener gran demanda ya que este tenia una patente libre. Sin embargo, aunque el PNG es uno de los formatos más usados hoy en día el GIF ha pasado a ser el formato para banner animados, ninguno de las alternativas al GIF tiene esta característica por por lo que su utilidad aún sigue siendo buena.

Hablando en cuestiones técnicas el GIF tienen una limitada gama de 256 colores, aunque el formato com tal no representa perdida de calidad, si tu imagen tienen más de los colores que el gif soporta hablando de profundidad de color superior a 8 y entendiendo como profundidad de color a “la cantidad de bits de información necesarios para representar el color de un píxel en una imagen digital”, en el proceso hay una adaptación de los colores, lo que si es una perdida de calidad significativa sobre todo para imágenes como fotografías.

PNG, la patente libre con transparencia pero sin animaciones.

PNG (Portable Network Graphics) fue la  natural del GIF, buscando un formato que dejara atrás los obstáculos de patentes libres y sobre todo que no se limitara a una paleta de 256 colores, cuando las computadoras ya soportaban millones de colores, por lo cual era una limitante el seguir usando gif

Aunque como tal el PNG no  soporta animaciones hay un formato llamado MNG el cual se ha desarrollado para esto, sin embargo ha tenido poca promoción.

Una expoliación sencilla para hacer una comparación de la cantidad de colores entre el GIF y el PNG es que el primero solo es de 8 bits (2 a la 8= 256) mientras que el segundo es de 89 bits (2 a la 89 potencia=millones de colores).

JPG compresión y fotografía

El JPG significa “Joint Photographic Experts Group” que lo que buscaba era crear un grupo de investigación donde se compartieran las experiencia en la digitalización de imágenes. A menudo se le denomina un formato cuando más bien es un método de compresión de imagen.

Aunque se trata de una compresión de imagen con perdida es decir que no obtendremos una versión igual é de la compresión, el poder elegir el nivel de compresión es de gran utilidad ya que podemos hasta cierto punto controlar su calidad segun nuestra necesidades. Por ejemplo el formato JPEG/JFIF es el formato de todas la imágenes de internet. JPEG/EXIF es por ejemplo el formato para casi todas las cámaras de fotografía pero a ambos se les conoce de manera indistinta como JPG a secas. este formato es uno de mis preferidos para llevar archivos portátiles, y sobre todo porque en su máxima calidad es relativamentete poca la información que se pierde pero su peso es considerablemente menor.

Pero sino creen como se desgasta un JPG  vean esto.

Generation Loss from hadto on Vimeo.

¿Y cual usamos?

Como veremos GIF y PNG son los formatos web por naturaleza y la verdad recomiendo ampliamente el formato PNG, sobre todo si tus archivos son con transparencia, este puede ser una opción inmediata y dejar el GIF solo para animaciones o imágenes que tengan colores planos y cosas muy sencillas  (lo que nos hará un tamaño de imagen extremadamente pequeño y sobre todo que cargara de manera inmediata.

Por otor lado las únicas observaciones que le haría el png es que si  se tratan de fotografías, o imagenes muy elaboradas solo se use si se necesita transparencias, la calidad de la imagen es muy bueno pero suele ser un poco más pesado que un JPG.

El JPG es mi formato favorito cuando en nuestra web o blog ponemos fotos, ilustraciones, etc, la calidad del JPG la manejo en “high” o “medium” lo cual no me hace un gran perdida de calidad, una de los tips que me han funcionado mucho es dejar la imagen del tamaño exacto a usarse, sucede que muchas veces tenemos la imagen mas grande y eso nos da un peso innecesario en el archivo. Su único problema son las transparencias pero para eso existe PNG.

Por último. el peso es lo importante en web

Quizás les parezca extremo, pero debo decirles que un JPG o PNG de Kb de peso pueden parecer poco, pero les invito a pensar de manera integral en su proyecto web, ¿Qué les gusta más cuando navegan cargar una imagen de manera rápida o lenta?, Opino que aunque no deba de ponerse en riesgo nuestra calidad de las á siempre tratemos de guardar un estándar en el peso de estas que nos brinde la certeza de una experiencia de usuario buena ante una web que se carga en segundos, esto va muy de la mano con no desperdiciar bits con imagenes más grandes de lo necesarias.

Free PSD Theme es un iniciativa del diseñador Dany Duchaine, que libera de forma gratuita el archivo fuente para Photoshop (PSD) o el código HTML de sus temas premium para WordPress. De este modo puedes codificarlo y usarlo de forma totalmente gratuita en proyectos personales y comerciales.

Además de usarlo como diseño completo, estos archivos pueden ser un buen repositorio de elementos web como botones, menús, formularios, etc. Actualmente hay 7 diseños en descarga directa.

Este modelo de regalar el archivo fuente (PSD o HTML) y vender una versión terminada es muy interesante. Se ganan enlaces, donaciones y reconocimiento por los archivos gratuitos y dinero con la venta del producto terminado.

Como sea, material de buena calidad para echar mano.

Sitio: freepsdtheme.com

¿Cuántas veces nos ha pasado que queremos publicar varias imágenes de diferentes tamaños en nuestro blog y simplemente hay que batallar mucho para editarlas una por una? La cosa es fácil cuando tenemos 3 imágenes cuando mucho, pero personalmente he tenido la experiencia de querer publicar alguna muestra de fotografía con alguna temática ( más de 10 imágenes), lo cual hace que la tarea de editar sea tardada.

Quizás nuestros objetivos sean publicar toda una colección inspiracional de 30-40 imágenes. Como sea el caso; este tutorial te puede servir si quieres ser más productivo y editar imágenes con las mismas características de vez en cuando, pero con un solo click.

Photoshop (PS) tiene una herramienta llamada Acciones (Actions) que justamente sirve para no tener que repetir el mismo proceso con cada imagen, y que esto se traduzca en una menos inversión de tiempo para hacer lo que de verdad nos interesa: centrarnos en pensar en nuestro contenido y no en cuanto nos llevara realizar la edición del post. En internet puedes encontrar miles de acciones para PS descargables, pero hoy  aprenderemos a hacerlas desde cero.

Una imagen basta de ejemplo

Primero debemos de tener un archivo con el cual grabaremos todas las acciones para después guardarlas. Ahora abrimos la ventana de las acciones menú Window→Actions

Ahora en la esquina derecha le damos click y agregar nueva acción.

Lo que haremos será oprimir el botón rojo que comienza  a grabar todo lo que hacemos (abrir menús, cambiar opciones, etc) nos vamos al menú Image→Image Size y ahí ponemos los datos de nuestra imagen.

Regularmente cuando tengo imágenes me preocupo por el ancho de estas para que cubran gran parte del espacio del post; en mi caso, el espacio es de 640px, así que solo doy ese valor, marco la casilla de guardar proporciones y el alto se reducirá a proporción.

Oprimimos Comand(mac) o Crtl(PC)+Alt+Shift+s o menú Archivo→Save for Web & Devices.

Listo regularmente pongo opción PNG-24 pero ahí tu puedes usar las opciones que quieras.

Cuando damos guardar asignamos una carpeta nueva, cuando hacemos acciones lo mas fácil es que por omisión los archivos se guarden con el mismo nombre, para no sobreescribir asigno por ello una carpeta nueva donde se guardarán los archivos con esta acción.

Luego cerramos el archivo y stop en la ventana de acciones.

Para terminar

Ahora puedes abrir cualquier imagen, solo dar click y estará guardada en la carpeta que asignaste. Sin problemas, ya no perderás más tiempo, esta solo es la base, puedes modificar según tus necesidades las acciones e incluso hacer diferentes grupos de estas, como cuando quieres hacer cambios de contraste o otros tamaños que necesites.

Espero este pequeño tutorial te sea útil.

En esta ocasión he creado un pequeño tutorial para realizar un banner con estilo grunge, la idea es repasar lo que hemos aprendido sobre contraste y legibilidad. Empecemos por descargar el archivo “texturas banerBW.zip” donde tendrás el archivo para poder trabajar este tutorial.

Para hacer este banner usaremos Adobe Photoshop y Adobe Illustrator CS4, pero las funciones que utilizaremos pueden usarse desde la versión CS de estos programas así que si no tienes las versiones actuales no hay problema.

Texturas de papel

En este paso usaremos tres texturas de papel , abre el archivo Texturas bannerBW.psd. Hay un sin fin de lugares donde puedes encontrar texturas de este tipo, pero si tienes al oportunidad de escanear o tomar fotos también es muy bueno, la idea es jugar con las texturas, con las posibilidades que el modo de capa nos da, como lo es ” multiply”, “hard ligth” y demás tipos, las opacidades también pueden servir.

En este caso use 4 texturas, como lo puedes ver en el archivo y veras como jugué con los tipos de capa y sus opacidad para lograr la textura que busco .No hay limite de posibilidades, pero lo ideal es no excederse con el numero de layers que al final eso hará que tu RAM se sobrecargue).

Una vez concluida tu experimentación con las texturas te recomiendo unir las capas, da click en el de la parte izquierda de la ventana de Layer→Merge Visble.

Poniendo tipografía

Ahora ponemos tipografía, damos doble click en la ventana de color y agregamos nuestro texto elige el color #4b2617; en este caso use la Defused que pues descargar de dafont.com con un estilo muy destroy, luego en el Menú Layer→ Layer Style.

Ponemos los siguientes valores en la las opciones Drop Shadow.

Ahora toca poner el subtitulo o descripción del sitio, para esta tipografía puedes usar alguna que sea serif y haga un buen contraste,usando el color #4b2617 y ponemos los siguientes valores para Drop Shadow ( Menú Layer→Layer Style).

Haciendo una cinta de pegote de la nada

Oprimimos las teclas cmd(Mac) o control (PC) + shft + N y creamos en automático otro layer, ahi haremos una selcción con la herramienta de selección cudadrada. Ahora la rellenamos con el color #ffc705 (shift + f5) o menú edit→Fill

Ya que está esto usaremos uno de los pinceles, de forma irregular.

Con el color #ad7010 al 13% en modo multiply hacemos unos pequeños click para hacer que el amarillo se vuelva un color moteado y así hacer un poco de textura,

Después con ese mismo pincel pero con el color #ffdf71 y en modo Hard Color comenzamos a pintar para ahora dar la sensación de luces (se paciente y no te excedas con los clicks del mouse).

Ahora con el menu select→deselect , hemos terminado, nuestra cinta de pegote. ahora seleccionemos el layer del texto (bloggin/desarrollo web) y manteniendo shift apretado seleccionamos el layer de nuestra cinta, con esto hemos seleccionado los dos layers.

Ahora presionemos Ctrl(PC) o Cmd (Mac) + T y así podremos girar un poco nuestro cinta con todo y el texto.

Agreguemosle al layer de la cinta un poco de sombra con los siguientes valores

Tintas

es tiempo de ponernos más audaces y para ellos usaremos unos vectores de manchas de tinta que descargamos gratuitamente del sitio Vecteezy, lo abrimos en adobe Illustrator y copiamos un par de ellos para pegarlos en el archivo de Photoshop.

A la hora de pegarlo en Photoshop (le decimos que lo haga como pixel) luego en el menú Image→ Adjusment→Hue/saturation ponemos los siguientes valores. ponemos el Layer en modo Multiply.

Hacemos lo mismo con otro de los vectores pero ahora ponemos el siguiente valor. Es muy importante tener seleccionada la opción de colorized.

¡Listo! podemos duplicar capas y moverlos como se nos antoje e incluso poner en algunos con cambios de opacidad.

El grunge es irregular

Nuestro banner ya casi queda listo ahora es cosa de darle a nuestro banner un terminado como de hora rasgada,usaremos las lineas guías del archivo de apoyo (sino la ves ve al Menú View→Show→Guide) y basando en ellas empieza a borrar sobre el layer de la textura de papel( por ellos unimos layers de texturas previamente). y a borrar, recuerda la idea es hacer que el banner tenga una forma irregular, usa los pinceles de forma regular te serán muy útiles.

Terminado esto solo añadimos sombra con los siguientes valores.

listo hemos terminado

Conclusión

Usa esto como una guía al fina tu mismo puede encontrar tu propio estilo y hacer un banner mas personalizado y único. juega con texturas de otros materiales, y vectores tu gusto. Internet es una gran librería de recursos gratuitos, pero también los hay de pago (unos cuantos dólares) solo analiza bien que es lo que buscas si prefieres las opciones de pago.

Espero te sea útil este tutorial dejame cualquier comentario sobre que te pareció y si lo prefieres puede agregarme a twitter @ulizes

¿Que hace exactamente? Que mejor que unos ejemplos: Con la herramienta Content-Aware Fill, solo seleccionas un objeto que no deseas aparezca más en una foto y Photoshop CS5 automáticamente llenara el hueco. Otro ejemplo, quieres hacer una imagen más pequeña sin disminuir la escala de los objetos, bien, señalas los ejes de compresión y al final tendrás un mejor reescalado líquido.

Velo tu mismo:

Una característica muy atractiva que hará aun más fácil la reparación de fotografías o la creación de fotomontajes. El suit de Adobe CS5 se espera para el próximo Abril.

Vía: CS5

Para ayudar con este problema, Raymi Saldomando ( @raymicha ), maquetadora web especializada en XHTML, CSS, Javascript y WordPress ha creado una serie de videotutoriales llamada "Como la armamos en español" compuesto de varios capítulos alojados en vimeo:

• Capitulo 1: Aquí les presento a la plantilla.
• Capitulo 2: parte I: Cortar, Organizar y Nombrar.
• Capitulo 2: parte II: XHTML!!!!!
• Capitulo 3 parte I: El concepto del modelo de Bloque
• Capitulo 3 parte II: FULL CSS!
• Gotitas de Javascript
• Formularios Básicos.

Y ya que estas aprendiendo maquetación, puedes seguir derecho y aprender a pasar de HTML / CSS a WordPress con otros dos videotutoriales de Raymi:

• Edición WordPress. Parte I
• Edición WordPress. Parte II

Puedes estar atentos a la continuación de esta serie en su cuenta de Vimeo para empezar a construir tus diseños desde cero. Un esfuerzo bastante útil y por supuesto, plausible.