Juan Manuel 9 de abril de 2008 a las 16.01
   Imprimir artículo
elWebmaster.com

Taller de Adobe Photoshop: La maquetación de tu sitio web


Taller Adobe Photoshop: La maquetación de tu sitio web¡Bienvenidos a la segunda práctica del Taller de Adobe Photoshop! La práctica anterior vimos qué elementos básicos conformarían el contenido e interfaz de nuestro sitio web y les quedó como tarea hacer un boceto del sitio en papel y juntar todos los recursos que usarían.

Hoy llevaremos a la pantalla ese boceto, para poder generar la plantilla de nuestro sitio web. Fotos, banners, íconos, tipografía y muchos otros elementos deberán tener un lugar específico. ¡Comencemos!

Varios tipos de recursos

En nuestro sitio usaremos varios tipos de elementos. Dejaré lo complicado para más adelante, dado que todavía no dominamos Photoshop a la perfección ;).

Un sitio sencillo pero profesional podría incluir:

  • Un Banner central, con una imagen y el logo o nombre del sitio.
  • Una Barra de navegación con sus respectivos botones.
  • Un espacio para el contenido (Texto fotos, etc).
  • Un footer o pie con una dirección de mail de contacto.

Por supuesto que las opciones son infinitas, los elementos de esta lista son sólo un ejemplo, que tomaremos como base para nuestra práctica de hoy.

La idea es que una vez que puedan lograr un sitio como éste, se pongan a realizar aquél que bocetaron la práctica anterior.

Comenzando la maquetación del sitio

Me viene de película la aclaración que hace Thor al final de su última clase de Dreamweaver, dado que es muy importante saber dentro de qué marco trabajaremos, es decir, el formato de nuestro sitio web.

Sólo cómo ejemplo, usaremos un lienzo de 950 x 650 píxeles. Vamos a Archivo->Nuevo (o hacemos Ctrl+N) e indicamos las medidas correctas.

En la casilla “Resolución” ponemos 72 píxeles/pulgada (recuerden que esa resolución se usa para pantallas, monitores y en fotografía digital como un estándar).

En “Modo de color” seleccionamos RGB de 8 bits (¿se acuerdan? el RGB se usa para la web).

Las demás opciones las dejo a su gusto.

Una vez que tenemos el lienzo preparado (donde crearemos nuestro sitio web) sólo nos resta dividir los sectores donde irán el banner, la barra de navegación, etc. Para esto usaremos las Guías.

El uso de Guías

Las guías son líneas verticales u horizontales que podemos situar sobre la imagen para tener una ayuda visual al alinear objetos. Hay que destacar que no saldrán al imprimir un documento o al guardar la imagen salvo que indiquemos lo contrario, por lo que podemos usarlas sin miedo.

Para usarlas, sólo tenemos que hacer clic sobre una de las reglas (para verlas, vamos a Vista->Reglas) y arrastrar el cursor hacia el centro del documento.

Taller Adobe Photoshop: La maquetación de tu sitio web

Vemos que entonces aparece una línea que podemos mover y desplazar a gusto si tenemos seleccionada la herramienta mover [V].

De esta forma vamos situando una serie de guías como si fueran líneas sobre una hoja de papel. La idea es que delimiten dónde irá cada elemento del sitio.

Taller Adobe Photoshop: La maquetación de tu sitio web
Esta imagen muestra el lienzo con las guías ya dispuestas correctamente.

Taller Adobe Photoshop: La maquetación de tu sitio web
Aquí he resaltado los sectores que pretenden delimitar (no es que tengan que pintar todo de colores, jejeje). El color rojo representa el lugar que ocupará el Banner, el verde la botonera, el azul el contenido y el rosa el mail de contacto.

Taller Adobe Photoshop: La maquetación de tu sitio web
Podemos ver entonces cómo quedará el archivo una vez que terminemos el diseño, situemos la tipografía, el logo, la botonera, etc. ¿Cómo llegamos a esto? Tranquilos, lo veremos de a poco.

La próxima clase también es una práctica. En ella veremos cómo generar los elementos que componen la intrefaz, tal cual como los podemos ver en la última imagen.

¡Hagan sus deberes! ^_^

<< CLASE ANTERIOR
 

CLASE SIGUIENTE >>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (9)

  1. JOSE LUIS GARCIA dice:

    k super esta tu tutorial, lo poco k se de photoshop lo e aprendido en internet y la verdad el tuyo es bueno, espero que sigas siempre para delante,

    lo unico que te pediria es que coloques que photoshop utilizas, porque yo tengo el adobe photoshop 6.0
    y esta en ingles, pero e tratado de conseguir uno en español, pero no tengo mucho tiempo para buscarlo, si me puedes mandar el programa seria genial, sino solo cual es, eso me seria de mucha utilidad.

  2. Guillermo Urquizo Nuñez dice:

    Muchas gracias, por transmitir conocimiento, esta bueno el Taller

    Guillermo Urquizo Nuñez
    Santa Cruz Bolivia

  3. Juan Manuel dice:

    ¡Hola, JOSE LUIS!

    Puedes usar cualquier versión, nosotros trabajamos con la última (CS3) pero hay muchas cosas que si sabes hacerlo en una versión sabrás hacerlo en otra.

    Cuando comencé en la Universidad usé la versión 6, es bastante aceptable (dentro de las versiones que han entrado en desuso).

    A partir de la versión 7 ya puedes considerar que estás “dentro” de lo estándar.

    Lo más idóneo es manejar la versión posterior, la CS, o las CS2/CS3.

    Puedes bajarte una demo por 30 días desde el sitio de Adobe (haz clic aquí).

    ¡Saludos!

  4. julieta gomez rodriguez dice:

    Es un placer haber dado con este sitio, entre por una cosa y decidi tomar el taller desde cero, muchisimas felicidades, estoy incursionando en el diseño web,y tengo una duda de lo mas basico…como delimito mi medida del area donde quiero trabajar, es decir, en este tema tu usas un lienzo de 950 x 650 píxeles, existe una medida estandar que debo usar?…yo quiero hacer una pagina donde no tenga que utilizar la barra (por ponerle un nombre) para desplazarme hacia arriba o abajo, que mi diseño abarque toda la pagina sin necesidad de bajar o subir…

    espero haberme explicado, cuando entremos al tema de los botones por ahi estare dando lata, sobre todo con medidas que es lo que no tengo muy claro

    saludos
    julieta gomez

  5. Juan Manuel dice:

    ¡Hola, Julieta!

    Me alegra que hayas decidido tomar el curso ^_^. En la clase 19 explico cómo determinar el tamaño de imagen y/o lienzo, de modo que te recomiendo echarle un vistazo. A mi modo de ver, las últimas clases, la 30 y la 32 más precisamente, son claves para el curso (en la clase final vemos cómo diseñar un sitio web paso a paso).

    Por último y no menos importante, la resolución que necesitas no deberá superar el tamaño de pantalla de los usuarios de tu sitio (para evitar que tengan que hacer scroll).

    Por esto te recomiendo trabajar dentro de los 950 x 650 píxeles la caja de contenido, el resto puedes llenarlo con un bonito fondo.

    ¡Espero que te haya podido ayudar, cualquier cosa me consultas nuevamente! ^_^
    ¡Saludos!

  6. Gloria Susana dice:

    Te agradezco por publicar esto, es lo que necesitaba, gracias de verdad, queria saber como estan configuradas las reglas, las “preferencias” de las reglas que utilizas en este caso, soy novata y estoy aprendiendo gracias a vos.Espero tu respuesta y seguire con las clases, chauu.

  7. Alejandra dice:

    Para diseño web te conviene configurar todo en píxeles, menos la tipografía que es mejor manerjarla en puntos. Para configurar la regla tenés que ir a Edición y elegir la opción Preferencias. O Edit / Preferences en inglés. Saludos!

  8. Alexis Damian dice:

    la verdad que muy buenas las clases.. ah mi siempre me gusto esto pero nunca me habia decidio y nunca pense que iva ah encontrar clases online.. muchisismas gracias–

  9. Cesar maldonado dice:

    estoy muy impresionado con la calidad del tutorial, soy autodidacta trabajo en diseño web y con este material estoy aprendiendo a diseñar las paginas casi completas aparte de trabajar con las fotos los felicito ! MUY BUENA

    se despide cesar maldonado
    santiago de CHILE

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder