Que DEBERIA saber un diseñador/maquetador web

primero que nada,tengamos claro todo,no es lo mismo un diseñador web a un maquetador web pero en si dejando de lado lo que realizen igual necesitaran unos conocimientos de varios temas.

Entre ellos:

  • usabilidad
  • accesiblidad
  • SEO (aunque tengan un consultor SEO propio,saber SEO aumentara la calidad de los diseños listos antes los bots de los navegadores)
  • redes (toda persona que trabaje con web debe saber que es apache,ISS,Server-side,DNS,FTP,Samba,etc)
  • lenguajes de marcado (HTML,XHTML,XML,SGML,como minimo)
  • lenguaje de hoja de estilos (CSS)
  • Lenguajes de scrips client side (javascript)
  • Lenguajes de server-side (PHP y si lo deseas,asp.net. al menos a nivel basico)
  • Edicion de imagenes (ni hace falta opinar)
  • SVG (es el futuro,se espera que pronto lo usen sistemas como google maps y muchos otros,a diferencia de flash,es 100% indexable,se puede buscar y mucho mas en el)

y bueno,con eso concluyo.

Anuncios

mi regalo para el a;o nuevo

bueno,en la pestana “plantilla gratuitas” esta mi relago,una nueva plantilla,la tercera viene camino,si alguien me ayudara estarian listas en un mes cada una.

Otra cosa,el de a;o nuevo sera mejor todavia,esperenlo.

Mi primer libro escrito y subido

Estar en este blog me a motivado y bueno,llege al puente en que escribi un libro completamente libre y gratuito,la descarga esta en la pagina “Libros (Escritos por mi)”

UFRaw: Editor Raw Profesional libre

http://ufraw.sourceforge.net/

La mayoría de las modernas cámaras digitales incluyen la posibilidad de hacer fotos en RAW. El problema es que a veces no funciona con los visores y editores de imagen y necesitamos un plugin gratis: UFraw (Unidentified Flying Raw,menuda parodia del termino UFO), que es necesario por ejemplo para un editor de imágenes como Gimp. También funciona sin necesidad de Gimp, pero en cualquier caso necesitas tener instalado si no Gimp, sí Gimp Tool Kit (GTK+2).

UFRaw ofrece opciones interesantes, como por ejemplo la posibilidad de leer las curvas tonales en cámaras como Nikon, un zoom que alcanza el 100%, posibilidad de adelgazar las imágenes, exposición de los datos EXIF (que son los datos técnicos de la fotografía en el momento de pulsar el disparador), y que están operativos en cámaras como Canon, Nikon, Pentax, Samsung, Sony, Fuji, etcétera. UFraw puede convertir estos datos a JPEG y DNG. Una herramienta imprescindible para quienes quieren trabajar con RAW.

Si no tienen GIMP lo puueden usar como programa idependiente pero es menos potente porque no tendra cosas como el boton de “editar en GIMP” con el cual,despues de editar el raw en UFRaw podemos terminar de retocar en GIMP,cosa MUY util.

Saludos.

 

Sitio web Oficial de UFRaw: http://ufraw.sourceforge.net/

Eligiendo los colores para tu diseño

esto es siempre un problema,así que…

hay que tener en cuenta 4 variables:

1- tener el cuenta en cuenta el “target”: esto es básico en el marketing y el diseño,ahí que buscar los posibles tipos de visitantes van a visitar la pagina ahí varios tipos de visitantes,que son:

-los niños: visitan para entretenerse,jugar o por solo mover el mouse,dales un aspecto bonito y simple de navegar ademas de usar un lenguaje claro.

-los estudiantes: estos buscan imformacion accesible y una navegación rápida,dale los que quieren,es fácil,un buen ejemplo es la wikipedia.

-profesionales: esto engloba a los que a los que ya desempeñan cierta actividad profesional ya sea el diseño,la arquitectura,la construcción,etc.

-Los ciudadanos: esta es mas general,se trata de un sitio para los ciudadanos como los del gobierno o los de política.

-los veteranos: personas mayores,necesitan una interfaz simple y alto contraste entre texto y fondo.

2- Elegir colores apropiados para la actividad: crucial,no tengo mucho que decir,tendran como ejemplo imformacion mas abajo.

3- No utilizar demasiados colores: al menos no para fondos y texto,pero,las imagenes,siente libre de usar los colores que quieras.

4- debe ser legible: obvio.

Ahora, cortesía de http://www.infoeditores.com/ aca les traigo una lista de varios colores con sus significados:

Rojo: acción, energía, fuerza, pasión, fuego, calor, energía, ambición. Un color masculino fuerte. El rojo es un buen color para llamar a la acción. El rojo es entusiasmo, y calor. El color de rosa es una versión suave del rojo y es el más asociado con el romance, pero es un color femenino.

Azul: confianza, trascendencia, libertad, verdad, profesionalismo, abundancia y energía. También tranquilidad, confiabilidad, aceptación, paciencia, comprensión, cooperación, comodidad, lealtad y seguridad. Es uno de los colores que calman y se asocia al cielo y el mar, la inteligencia y la confianza. El azul también se ha asociado a la supresión del apetito, así que no sería bueno para los libros de cocina o recetas, pero puede utilizarlo para las actividades o productos asociados a dietas.

Verde: dinero, abundancia, prosperidad, calma, salud, alimento, naturaleza, esperanza, crecimiento, frescura, el compartir, y la sensibilidad. El verde simboliza la renovación y la fertilidad.

Anaranjado (naranja): salud y vitalidad, otoño, juventud, fuego cálido, valor, confianza, amistad, calor, entusiasmo y energía estimulante. Se ha asociado a la estimulación del apetito. Vibrante y caliente, el color naranja se asocia al otoño y a la tierra.

Amarillo: luz, pureza, comprensión, precaución, brillo, inteligencia, alegría, organización, actividad. El amarillo representa a menudo al sol, el calor y la luz, la energía y la felicidad.

Púrpura: dignidad, sofisticación, creatividad, espiritualidad y misterio. El morado oscuro se asocia a los derechos y a la riqueza, mientras que la lavanda se asocia a romance y a nostalgia.

Marrón: credibilidad, estabilidad, el hogar, la tierra, la madera, la comodidad y la fuerza. El marrón se puede utilizar como un color neutro o color caliente, se adapta al contexto (Por ejemplo las aberturas de madera no solo quedan bien en su color natural, sino que son casi un toque obligado en el diseño).

Negro: espacio, noche, autoridad, dramático, confiado, seriedad, energía y dureza, elegancia, y sofisticación.

Blanco: pureza, paz, perfección, frescura, facilidad, limpieza, calidad y espiritualidad. El blanco representa la vida y la unión en la cultura occidental tradicional, pero representa muerte y dolor en culturas orientales.

Gris: un color conservador, simboliza la seguridad, madurez y confiabilidad.

Recuerden,también pueden usar un color que represente el producto que tratan de dar.

Espero que les sirva.

Integrar GIMP a Kompozer

logo de kompozer

Algo que el software libre para diseño gráfico y web siempre a envidiado a los propiedades (Microsoft Expression,Suite Adobe,Corel Graphic Suite) es la integración con el resto de los productos de las suite.

Ahora si bien yo en mi Post anterior sobre convertir Gráficos y vectores en CYMK con Scribus.

Si bien la suite B.I.G (Blender,Inkscape,GIMP) como le dicen algunos,se integra perfectamente,cosa que pueden comprobar y Scribus y OpenOffice tambien se integran al 100% entre ellos y con la Suite BIG.

Ahora hablaremos sobre como integrar Kompozer y GIMP como si se tratasen de Dreamweaver y Fireworks o Photoshop.

Si bien no me gusta usar programas WYSIWYG pero… Kompozer tiene usos adecuados que ya e mencionado antes.

Asique… Comenzemos.

Abrimos el kompozer y vamos a Herramientas > Preferencias.

https://i2.wp.com/img219.imageshack.us/img219/3929/screen1yr.png

Bien,vamos a la pestaña aplicaciones y seleccionamos la opcion de Editor de Imagenes en la parte de aplicación.

Ok,busquemos el link del ejecutable de GIMP,en mi caso (y en el de la mayoria si usan Windows) es:

C:\Archivos de programa\GIMP-2.0\bin\gimp-2.6.exe

La configuracion les quedara asi:

Ven,ya los mejores Software libres para diseño se integran entre si como las suites privativas.

Saludos.

Convertir Vectores y imagenes a CYMK con Scribus

Bueno,si hay algo que nos enoja a los Diseñadores Gráficos que usamos software es que ni Gimp ni Inkscape tienen un buen soporte para CYMK.

Pero bueno,tenemos a un poderoso compañero: Scribus.

El si maneja CYMK,es muy estable y esta bien preparado para exportación a PDF.

Ahora algo simple es transformar uno de nuestros Vectores (hechos en inkscape) o nuestros BitMaps (Hechos en GIMP) en CYMK.

Abramos Scribus y importemos los gráficos que necesitemos

cuando tengamos todo lo que necesitemos convertir,continuemos

Ahora vamos a: Editar>Colores y entraras a un menú con la lista de colores. Selecciona el que quieras convertir de RGB a CYMK (o viceversa) y le das clic a botón Editar.

Esta ya es la ultima parte,ahora es simple y lo explicare clara y gráficamente:

Ahora,esto es simple,en Modelo de color ponemos CYMK ( o si queremos,RGB para webs).

Ahora,si ves que al transformarse el color tiene algún defecto,retoquen un poco con el color picker de la derecha y listo.

Saludos.

Si es posible trabajar para imprentas con software libre

Estaba hablando con Joaclint Istugud (alter-ego de Joaquín herrera),mi diseñador grafico favorito y casualmente, el también usa 100% software libre para diseñar,claro,yo me e ido mas por el lado de diseño web, al contrario de el.

Le pregunte:

No tienes problemas para imprimir los trabajos que haces en GIMP?.

Y le e contado como trabajo:

“Primero preparo todo y retoco lo que necesito en GIMP,luego con ya las imagenes y todo listo armo la tarjeta en Inkscape y la exporto a .png y luego,en scribus tomo una hoja del tamaño que necesito ( A4 o lo que me diga la imprenta) y luego voy copiando la tarejta y poniendolas en orden (dejando un margen entre capa una claro esta) y finalmente,lo guardo como PDF para impresion (que lo que hace es que guarda el PDF y todo como CYMK)”.

Y me a dicho:

“Prueba el plug-in de Gimp Separate+. Te crea un Tiff en formato con toda la información CMYK, Incluso te permite trabajar con los perfiles de color que prefieras. Lo normal es usar los de Adobe que están disponibles para libre descarga.
Ese Tiff creado por Separate+ también lo puedes convertir en PDF con CMYK en Gimp con Cmyk_tiff_2_PDF.
Usar Scribus también es posible pero ten en cuanta que es seguro que echará mano de los perfiles de color que tengas en usr/sare/color/icc, igual que hace el plug-in Separate+”.

Ahora el problema es que por motivos varios uso Windows y no me arrepiento de decirlo,pero es que linux me da problemas (aunque pienso comprarme un PC que trae Linux Debian instalado).

Pero,vamos,usr/sare/color/icc es para linux, en Windows esta en algún sitio de la carpeta de usuario.

La conversación se me a hecho interesante  y la verdad coincidimos que desde hace poco se puede trabajar en Software Libre sin problemas ya sea para Diseño grafico para imprenta o para web y multimedia.

Ahora, bueno, la conclusión es SI SE PUEDE, solo hay que seguir las recomendaciones que dimos arriba, la de joaclint en caso de una tarjeta de presentación hecha 100% en UIMP y  para el resto, el mío, también puedes usar separate+ para GIMP para el TIFF y trabajar con el en los distintos programas.

Es mas,jesusda tambien trabaja con software libre y lo que hace es que trabaja en gimp y luego exporta a CYMK con Krita.

Espero que les haya sido útil.

Convertir imagen en fondo Tileable

Actualmente con la web 2.0 y la necesidad de realizar sitios que simulen situaciones  reales nos vemos con ganas de usar una textura 100% realista tileable (para usarla como mosaico en el fondo),esto en Gimp es muy facil (es mas,es mas facil que en photoshop)

Primer Busquemos la imagen,yo tome esta:

imagen original

Luego la corregimos (yo use la herramienta de sellos para la mancha amarilla,la herramienta de quemado y la opcion colores>balance de colores):

imagen arreglada

escalamos la imagen a un tamaño aceptable para fondo (puede ser 96x96px),ahora cortamos la parte que usaremos y la volveremos tileable con este filtro:

Filtro>mapa>mapear objeto

Configuramos el filtro y recuerda despues de cada cambio usar la vista previa,es muy recomendable (ademas recuerda desactivar el punto de luz de imagen en la pestaña “luz”).

Ahora lo guardamos en el formato que mas nos convenga en cuanto a peso y calidad.

yo recomiendo usar el plug-in “save for web” ya que con el y FX fouldry Gimp se vuelve mas rapido a la hora de trabajar y pasa a ser una alternativa no solo al photoshop sino tambien al FireWorks.

PD: este tutorial es un port de uno de photoshop,sin embargo en gimp se hace esto mas rapido y de igual (puesto que GIMP esta mas preparado para gestion de color y posee mas cantidad de filtros por el hecho de usar los suyos y poder adaptar casi cualquier recurso,pincel o trazo a el),aca les dejo el link del tutorial original para photoshop:

http://psd.tutsplus.com/articles/how-a-turn-a-texture-into-a-seamlessly-tiled-background/

OJO,en photoshop el proceso es mas largo y engorroso ya que photoshop no cuenta con el filtro que usamos.

50 mejores favicon segun smashing magazine

hace tiempo smashing magazine publico una lista de los 50 mejores favicons de internet:

http://www.smashingmagazine.com/2007/01/31/inspire-yourself-50-remarkable-favicons/

claro,en mi opinion,falta el de mtvla:

http://www.mtvla.com/

bueno,yo por experiencia les digo que con IcoFX y GIMP pueden hacer favicons iguales o mas bonitos todavia 😛