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
Iniciar sesión