Diseñando webs en Gimp

yo la verdad tengo una practica en Gimp que es muy poco común en el,pero,MUY común en Photoshop. Se trata de hacer plantillas para web sites desde un editor de imágenes profesional como photoshop o Gimp.

Bueno,buscando por internet sobre diseño web (siempre vale la pena aprender mas) me encontre con 2 tutoriales muy interesantes sobre la misma tecnica de la estoy hablando pero enfocados a GIMP,que sorpresa!. Buena les dejo los links:

http://www.scarfive.com.ar/tutoriales-gimp/sitio-web-estilo-grungy/ (esta explica como hacer un diseño en espefico,no como en general,pero te puedes fijar al menos en como es la técnica,si ya lo haz hecho en photoshop,en GIMP te sera pan comido,fijense que en el diseño que se muestra no se aplican las normas de accesibilidad).

y este:

http://www.tribulinux.com/como-crear-una-barra-navegacion-web-con-gimp.html (este es basico pero es muy util,lo malo es que no enseña a guillotinar la imagen,pero bueno…)

Bueno,el chiste es que,yo para aprender a diseñar plantillas webs con gimp solo tuve que leer un tutorial de photoshop y con los conocimientos que tenia en ese entonces de gimp,que eran,pocos,por no decir nulos,me las ingenie y me fije en el nombre de las funciones y fui probando,en media hora aprendí a hacerlo de manera fluida,aca te doy los pasos:

1- haces el diseño del sitio en GIMP como si se tratase de una imagen,recuerda respetar la legibilidad,la usabilidad,etc. Recuerda dejar un espacio para lo que seria el texto,como ancho recomiendo para los siempre de ancho 960 para que sea en resoluciones de 1024×768 que espacio,esto contribuye al descanzo visual del usuario,recuerda que estas maquetando un sitio,no una imagen o un afiche. aca ahí un tutorial para photoshop,con el te puedes guiar un poco en el uso de esta técnica:

http://www.solophotoshop.com/tutorial/diseno-de-una-pagina-web-con-photoshop-cs-parte-1/284/

2- hacer las lineas guia necesarias,les dire que las opciones para las lineas guias están en la barra de herramientas de GIMP en la sección “imagen”,las opciones para las lineas guia están en la sub-sección “guias” y la opción de guillotinar (partir la imagen en varias según las lineas guia,como en el photoshop) esta donde mis están las opciones de las lineas guia,pero en el sub-seccion “transformar”.

3-cuando se guillotinice la imagen ,cierra las imágenes que categorizaras como “basura” porque al guillotinar por las lineas guias quedan,por decirlo asi,partes que no sirven para nada a la hora se armar el sitio. recuerda guardar las imagenes en una carpeta como es normal cuando diseñas un sitio.

4- armar el sitio con codigo XHTML valido y CSS también valido,también valida el sitio con tawdis. las partes que haz hecho usalas como imagen,normalmente.

Consejos y trucos:

-en gimp,la pagina hazla sin fondo,el fondo lo haces cuando ya estes escribiendo el codigo.

-haz un codigo semantico

-NO USES TABLAS PARA HACER EL DISEÑO.

-cuando hagas el sitio,diseña todo dentro una Container,que contendra todo y a ese container lo centras con CSS de la siguiente manera: poniendole:

position: relative;
margin:0 auto;

-Haz un “reset” del css,añadiendo las siguientes lineas en la hoja de estilos:

* {
margin: 0px;
padding: 0px;
}

-ten en cuenta los consejos que di en este post:

https://josewebmasterlibre.wordpress.com/2010/09/04/consejos-para-disenar-tu-sitio/

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: