miércoles, 19 de enero de 2011

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.



lunes, 10 de enero de 2011

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.

domingo, 9 de enero de 2011

Objetivo de SebaspaStudio


Hola a todos mi nombre es Juan Sebastian Parra, y mi objetivo con este Blog es mostrar unos tutoriales para realizar sitios web completos desarrollados con software libre. Comenzare con un tutorial para realizar el diseño grafico de un sitio web utilizando Gimp (Es un programa de diseño, gratuito y  muy bueno), y en mi segundo tutorial mostrare como maquetar completamente el sitio utilizando lenguajes como HTML y CSS con un software llamado Notepad++, pero pueden utilizar cualquier otro editor de código, como por ejemplo  Netbeans. Algo importante es que no importa si usas windows, linux o mac puedes hacer los tutoriales sin problema.

Espero que lo que publique acá sea de ayuda para mucha gente y si quieren complementar algo no duden en  escribir.

Mi usuario en Twitter es @sebaspastudio