¡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.
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.
Esta imagen muestra el lienzo con las guÃas ya dispuestas correctamente.
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.
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 |
Jueves, 10 de Abril de 2008 a las 12.51
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.
Viernes, 11 de Abril de 2008 a las 11.15
Muchas gracias, por transmitir conocimiento, esta bueno el Taller
Guillermo Urquizo Nuñez
Santa Cruz Bolivia
Viernes, 11 de Abril de 2008 a las 16.54
¡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!
Miércoles, 3 de Septiembre de 2008 a las 16.02
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
Miércoles, 3 de Septiembre de 2008 a las 22.46
¡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!
Martes, 30 de Septiembre de 2008 a las 23.06
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.
Miércoles, 1 de Octubre de 2008 a las 10.17
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!