Preparando las imágenes para la maquetación con GIMP

Cuando maquetamos una página web la idea principal es hacerla lo más parecida al diseño original, y que además todas las imágenes y demás archivos utilizados tengan el menor peso posible.

En nuestro archivo de Gimp, vamos a separar las imágenes que vamos a utilizar de la siguiente manera.

Primero seleccionamos la capa de la cabecera, presionamos la tecla Shift y hacemos clic en el ojo que aparece en la capa seleccionada para que se habilite únicamente esa capa como podemos ver en la siguiente imagen.

 

Con la herramienta de selección, hacemos una selección de 1px X 100px como vemos aca:

 

Creamos un archivo nuevo con las mismas proporciones como vemos acá:

 

Del archivo original copiamos el pedacito que seleccionamos y lo pegamos en el nuevo archivo, vamos a Archivo -> Guardar Como, y estando ahí creamos una carpeta con el nombre que ustedes quieran darle al proyecto, dentro de esa carpeta crean una carpeta llamada imágenes, estando ahí en la parte inferior podemos ver un símbolo de “+” y dice “Seleccione el tipo de archivo” desplegamos las opciones y elegimos JPEG como vemos en la siguiente imagen:

 

Le colocan el nombre de “fondo_cabecera.jpg” , clic en guardar, luego en exportar, y por ultimo nos aparece una barra, la aumentamos hasta el 100% y aceptamos de esta manera guardamos nuestra imagen.

Luego seleccionamos la capa de Logo y hacemos lo mismo que hicimos anteriormente, con la herramienta selección, hacemos la selección de todo el logo, copiamos la selección creamos un nuevo archivo de 120px X 22px y pegamos el logo allí, como se ve aca:

 

 

Este logo lo guardamos pero de tipo PNG para tener transparencias en el logo. “logo.png”

Ahora seleccionamos las capas del botón ver mas y hacemos el mismo procedimiento, lo recortamos, en un nuevo archivo así como se ve acá:

 

Guardamos esta imagen como JPEG con el nombre “btn_vermas.jpg”

Por último seleccionamos la capa del pie de página y repetimos los pasos de la cabecera y hacemos la selección de 1px X 54px como se ve aca:

 

Y la guardamos con el nombre de “fondo_pie.jpg”

Y con esto tenemos todo listo para comenzar a maquetar nuestro sitio web, que ya muy pronto subiré la forma de cómo se hace esto. Espero esto les haya quedado claro y cualquier cosa no duden en preguntar.