DISEÑO GRAFICO DE UNA PAGINA WEB CON GIMP

Lo primero que haremos será descargar un paquete de archivos, para hacer nuestros diseños alineados, así que vamos a utilizar 960 Grid System, que lo podemos descargar desde acá.

Una vez descargado abrimos la carpeta y nos encontramos con esto: (Para ver las imagenes mas grandes da un clic encima de ellas)

Luego entramos a la carpeta templates -> gimp -> 960_grid_24_col

Abrimos el archivo, y lo guardamos con un nombre diferente para no dañar el original, después de esto cambiamos, el nombre de la capa Background, a Fondo como se ve aca: 

 

Con la herramienta de selección (R), hacemos una selección de 1020px X 100px; para hacer la selección exacta, nos podemos ayudar con los campos de tamaño en el menú izquierdo digitando los valores. Como se ve aca:

 

Colocamos una guía justo en la línea inferior de la selección para guiarnos más. (Para hacer la guía hay que hacer clic en la regla superior y sin soltar el mouse arrastrar hasta el lugar deseado la guía).

 

Hacemos doble clic en el color de frente (en este caso el negro es el frente y el blanco es el fondo), para abrir sus opciones, en ellas escribimos el código que se muestra en la siguiente imagen.

 

Creamos una nueva capa, con el botón nueva capa y la llamamos cabecera_fondo, en esta capa con opción de relleno, rellenamos el espacio seleccionado del color que elegimos anteriormente.

Tomamos la herramienta texto, la configuramos con las opciones mostradas en la siguiente imagen y escribimos el nombre de nuestro sitio web o lo que ustedes quieran.

En el color de texto haciendo doble clic escribimos el código del color también mostrado en la siguiente imagen y nos debe quedar todo esto asi:

 

Con la herramienta texto configuramos de nuevo las opciones mostradas en la siguiente imagen, y escribimos todo el menú. Si este queda corrido con la herramienta mover (M) lo pueden posicionar para que se quede viendo de la siguiente manera:

 

Creamos una nueva capa llamada, fondo_boton_menu y luego con la herramienta selección, hacemos una selección de 65px X 35px, y colocamos el siguiente color.

 

Con la herramienta mover lo posicionamos para que nos quede de la siguiente manera

 

Con la herramienta selección hacemos una selección de 960px X 430px. Y la ponemos debajo de nuestra cabecera.  E importamos una imagen de exactamente estas medidas. la imagen que yo utilicéla pueden descargar de aca

 

Trazamos una guía 50px aprox debajo de la imagen para posicionar una pequeña imagen como se muestra acá:(Las imagenes utilizadas a continuacion las puedes descargar de los siguientes links --- imagen 1 --- imagen 2 --- imagen 3 --- imagen 4)

Trazamos una guía debajo de la imagen aprox 20 px debajo luego, con la herramienta texto escribimos “Soporte” con un tamaño de 15, le aplicamos el siguiente color: #81aa48, debajo de este titulo aprox 20px, trazamos otra guía y escribimos un texto de ejemplo con un tamaño de 12, y le aplicamos el siguiente color: #2f3235.

 

Luego repetimos lo mismo hasta completar algo como esto:

 

Creamos una nueva capa llamada fondo_btn_vermas, colocamos una guía 20 px debajo de los textos, después con la herramienta selección hacemos una selección de 100px X 35px. En el color de frente ponemos el color: #66923e, y en el color de fondo ponemos #76a150. Con la herramienta mezcla (L) hacemos clic en la parte superior de nuestra selección y arrastramos hasta el final de la selección (de arriba hacia abajo), con esto nos queda un degradado que se veria asi:

 

Con la herramienta de selección elíptica (E) hacemos un circulo de 15px, ayudándonos de nuestras opciones como lo hacíamos antes con las selecciones rectangulares. Con la herramienta de relleno rellenar el circulo con el color: #4d4d4d, con la herramienta mover posicionarlo en su sitio. Con la herramienta texto escribir el símbolo “+”, de color blanco y posicionarlo encima del circulo. Con la herramienta de texto escribir con color blanco “Leer mas” y posicionarlo encima del botón quedando de la siguiente manera:

Duplicamos las capas que conforman el botón “Leer mas” haciendo clic derecho encima de las capas correspondientes y eligiendo la opción duplicar capa, esta capa duplicada se ubica correctamente para completar los botones restantes quedando asi:

Ponemos otra guía debajo de los botones y con la herramienta texto la configuramos con un tamaño de 30 y un color: #81aa48, escribimos “Somos los mejores !!”  debajo de esta ponemos otra guía y escribimos otro texto de ejemplo con el mismo color utilizado para los textos de ejemplo anteriores, y debe quedar asi:

 

En la parte derecha del diseño siguiendo las guias, y las configuraciones de los textos anteriores  escribimos como titulo “Siguenos” y nos descargamos 2 imágenes una de Twitter y otra de Facebook, las importamos y con la herramienta escalar la escalamos hasta lograr el tamaño deseado, y con la herramienta mover las posicionamos para que queden asi:

 

Creamos una nueva capa llamada “Pie_pagina”. Con la herramienta de selección hacer una selección de de un ancho de 960px x 54px. Hacemos el mismo degradado utilizado en los botones de ver mas. Con la herramienta de texto y un color blanco escribir los derechos de autor y el año actual, quedando de la siguiente manera:

 

Con esto terminamos el diseño grafico de un sitio web desarrollado en gimp, espero les guste, cualquier duda escríbanla y responderé lo más rápido posible.