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

Transcripción

1 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:

2 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:

3 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

4 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

5 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. 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:

6 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).

7 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:

8 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.

9 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

10 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 imagen imagen 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.

11 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:

12 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:

13 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

14 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:

15 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. Lo siguiente que de bemos hacer es pegar el siguiente codigo en el archivo "estilo.css", este codigo es un RESET. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline;

16 background: transparent; body { font-size:13px; line-height: 1.4; font-family:"trebuchet MS", Arial, Helvetica, sans-serif; ol, ul { list-style: none; blockquote, q { quotes: none; blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; /* remember to define focus styles! */ :focus { outline: 0; /* remember to highlight inserts somehow! */ ins { text-decoration: none; del { text-decoration: line-through; /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; /*CLASES*/.clear { clear:both;.l.img { margin:10px; float:left;

17 .r.img { margin:10px; float:right;.alpha { margin-left:0px;.omega { margin-right:0px; /*HTML*/ ul, ol { list-style:none; a:link { color:#f33; text-decoration:none; a:visited { text-decoration:none; color:#f33; a:hover { text-decoration:underline; color:#f33; a:active { text-decoration:none; h1 {font-size:26px; h2 {font-size:30px; color:#81aa48; h3 {font-size:16px; h4 {font-size:14px; h5 {font-size:12px; h6 {font-size:10px;

18 li {list-style:none; a {text-decoration:none; a:hover {text-decoration:underline;