Scarfive web

Vamos a utilizar El Gimp para realizar el diseño de una página web. Una vez más, este tutorial es una adaptación de un tutorial para Photo$hop, e intenta demostrar la capacidad de esta herramienta de diseño, la mejor del mundo libre.

1 – Primero vamos a descargar algunos recursos: texturas de papeles, elementos grunge, y rayos de sol. Algunos archivos están en formato PSD, pero a no preocuparse, ya que en El Gimp pueden abrirse esos archivos como si de cualquier imagen se tratara.

2 – Creamos una imagen de 1000px por 800px, y rellenamos la misma con el color #E3D4B9.

3 – Colocamos una textura de papel en la imagen. Aviso que hay que recortarla porque contiene un fondo. Pero con un poco de paciencia se puede lograr el objetivo. Sino, utilicen la capa del papel que pueden encontrar en el archivo con el ejemplo terminado.

4 – Ahora abrimos como capa la mancha de café y la duplicamos. Aquí tenemos que tomarnos el trabajo de volver a recortar la imagen. Para lograr este paso convertí las manchas de café y el papel al tamaño de la imagen (Capa » Capa a tamaño de imagen). Seleccioné con la herramienta de selección de color (Mayúsculas + O) la región transparente del papel, y luego, en cada una de las capas de mancha de café, borré la selección (Supr) previamente hecha. Al final, autorrecorté las capas (Capa » Autorrecortar capa) y bajé su opacidad al 20%.

5 – Abrimos la tira de cinta adhesiva, la escalamos y rotamos hasta alcanzar el resultado de la siguiente imagen. Bajamos la opacidad de cada una de estas capas al 80% y la saturación (Colores » Tono y saturación) a -40. En la cinta adhesiva inferior coloqué su brillo a -40 (Colores » Brillo y contraste).

6 – Abrimos como capa el clip, y borramos la parte del mismo que queda detrás del papel. Bajamos su saturación (Colores » Tono y saturación) a -40.

7 – Abrimos como capa la nota, y también bajamos su saturación (Colores » Tono y saturación) a -40. Agregamos un texto acorde a nuestro contenido.

8 – Para armonizar el diseño, vamos a colorear la capa del papel. Utilizamos la herramienta de coloreo (Colores » Colorear…) y colocamos los valores de tono a 40, saturación a 25 y luminosidad a 15.

9 – Abrimos como capa uno de los motivos de ‘Sunburst’ (el de 20 rayos) lo colocamos en el lugar adecuado, llevamos su tamaño al tamaño de la imagen (Capa » Capa a tamaño de imagen) y bajamos su opacidad al 10%. Seleccionamos la capa transparente de la capa del papel, nos colocamos nuevamente en la capa del ‘Sunburst’, y borramos la selección (Supr). Para finalizar colocamos el modo de la capa en ‘Multiplicar’.

10 – Vamos a crear un borde para una imagen. Añadimos una nueva capa transparente, seleccionamos en ella un cuadrado de 120px de lado y lo rellenamos con un color marrón oscuro. Encogemos la selección rectangular en 10px (Seleccionar » Encoger…) y borramos su contenido. Tomamos la herramienta de borrado (Mayúsculas + E) y seleccionamos una brocha con un dibujo cualquiera (yo utilicé una del juego de brochas Soleil, hay muchísimos juegos de brochas para agregar al Gimp, aquí les dejo un ejemplo de ello). Bajamos la opacidad de la brocha al 30%, ajustamos su escala si es necesario, y realizamos unos trazos aleatorios. Para terminar autorecortamos la capa.

11 – Una vez hechos los marcos, podemos colocar en su interior las imágenes que querramos y disponerlos en la parte inferior del papel.

12 – Abrimos como capa otra de las texturas de papel (la que simula los canales de un cartón). La adaptamos al tamaño de nuestra imagen y la recortamos para que quede como muestra la figura. Luego, para poder darle una sensación de profundidad, duplicamos esta capa, borramos su contenido, y seleccionamos una región rectangular desde el borde superior de la capa hacia arriba. Seleccionamos para el pincel (P) una brocha circular difusa de 21px, colocamos el color de frente en negro, y trazamos la selección (Editar » Trazar selección…, indicando que vamos a utilizar el pincel para pintar). Entonces bajamos la opacidad de la capa al 30%. Así logramos una sombra en la parte superior del cartón.

13 – Importamos otra textura de papel, la escalamos y realizamos sobre ella una selección a mano alzada (o selección libre)(F). Invertimos la selección (Ctrl + I) y borramos (Supr).

14 – Aplicamos sobre esta textura una sombra (Filtros » Luces y sombras » Sombra arrojada) con los valores de desplazamiento en X de 0, desplazamiento en Y de 5, radio de desenfoque de 5 y una opacidad del 30%.

15 – Para no alargar este tutorial más de lo debido, he comprimido aquí varios pasos. Agregué más texturas, dupliqué algunas capas, las redimensioné, roté y trabajé con la saturación, tono, brillo y contraste de cada una de ellas tal como lo indiqué en los pasos anteriores. Recuerden que esto es sólo una guía y no la palabra santa del diseño. Lo mejor para lograr un buen resultado es utilizar la imaginación. Pueden guiarse con el archivo de ejemplo una vez que lo hayan descargado.

16 – Vamos a crear un menú para la página. Creamos una nueva capa transparente por encima de las demás, seleccionamos como color de frente un marrón oscuro, y colocamos una lista de opciones mediante la herramienta de texto (T). Nos podemos ayudar con una línea guía vertical para alinear el texto. Con un pincel circular trazamos líneas divisorias entre las opciones (marcando un punto, presionando Mayúsculas y llevando el puntero al punto final de la línea; ahí marcamos el otro punto y tendremos una línea recta). No es necesario que estén perfectamente alineadas, ya que este será un detalle de nuestro diseño. Tomamos la herramienta de borrado, y con una brocha adecuada al 50% de opacidad borramos parte de los trazos. Luego, con alguna brocha de nuestro gusto, marcamos los ítems de las opciones de la lista del menú.

17 – Creamos ahora una interfaz para login o registro. Agregamos una nueva capa transparente. Utilizamos la misma fuente del menú para las etiquetas y el mismo color de frente. Trazamos dos rectángulos para las cajas de texto y uno para el botón. Los rellenamos con el color de frente y luego los borramos con una brocha con baja opacidad, tal como se ha indicado anteriormente para otros elementos de la página.

18 – Para terminar con el trabajo, agregamos los enlaces de la página en el pie de la misma. Para ello, he utilizado trozos de cinta adhesiva en el fondo de los títulos. Las redimensioné, las roté y trabajé con su tono, saturación y luminosidad (todo desde Colores » Tono y saturación). También roté un poco los títulos para reflejar la dirección de las cintas, y bajo cada uno de ellos coloqué los enlaces. Espero que este tutorial les haya servido de ayuda para un futuro desarrollo apostando al software libre.

:: Descargar el archivo XCF ::

El tutorial original en http://psdfan.com/tutorials/designing/design-a-unique-grungy-website/

Etiquetas: diseño, gimp, grunge, pagina, tutorial

Esta entrada se publicó , el Jueves, 28 de Mayo de 2009 a las 0:04 horas y está guardada bajo Tutoriales Gimp. Puedes seguir cualquier respuesta a esta entrada mediante el canal RSS 2.0. Puedes dejar un comentario o enviar un trackback desde tu propio sitio.