Diseñando webs en Gimp (como si fuera photoshop)

[joseomaker]

o 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/tutoriale...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...-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/tutoria...s-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:

Código CSS:

position: relative;
margin:0 auto;
 

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

Código CSS:

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

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

http://www.forosdelweb.com/f91/conse...-sitio-815319/

si quieres aprender mas sobre Gimp y demas temas que te serviran para aprender a hacer webs de lo mas profesionales,visita mi blog:

http://josewebmasterlibre.wordpress.com/ (este post fue sacado de mi Blog)