Crear interfaz web con Photoshop CS3
Al comenzar un proyecto de una página web, es necesario tener la mayor
cantidad de información disponible de parte del cliente, es decir, logotipo,
imágenes (preferiblemente de alta resolución), MP3 (si aplica), videos (si
aplica).
Luego de tener toda la información procedemos al diseño, y si estamos
empezando, nuestra primer pregunta es ¿Qué tamaño le doy al documento?.
Tomando como punto de partida que nuestro sitio va a ser visitado por
monitores de 1024 x 768 mínimo, diseñamos para esa resolución y le vamos a
dar al documento 1000px * 500 px, ¿pero porque tan poco alto?, la respuesta
es sencilla, simplemente porque no queremos tener tanto espacio en blanco
en el sitio, recuerda que cuando leemos un libro o un tutorial leemos de
izquierda a derecha y de arriba hacia abajo, el ojo está acostumbrado a esa
regla, así que no importa cuánto vaya a bajar el sitio por el contenido de una
página determinada, lo que nos debe preocupar es el ancho no tanto el alto, de
todas formas en Dreamweaver podemos, utilizando CSS, repetir una imagen
en donde corresponda para mantener siempre la estética del sitio, pero eso lo
veremos más adelante.
Dimensiones del Documento y Resolución
Las dimensiones del documento son: 1000px (ancho) / 500 px (alto), la
resolución la mantendremos en 72 pixeles/pulgada (ver cuadro 1).
La resolución es la densidad de puntos, o píxeles, que tiene una
imagen.
La resolución de la imagen, es la cantidad de píxeles. La
resolución se utiliza también para clasificar casi todos los
dispositivos relacionados con las imagen digital ya sean
pantallas de ordenador o televisión, impresoras, escáneres,
cámaras, etc.
La resolución expresa el número de píxeles que forman una
imagen de mapa de bits. La calidad de una imagen, también
depende de la resolución que tenga el dispositivo que la capta.
La resolución de una imagen es directamente proporcional al
peso en Kb o Mb de la imagen, las imágenes que se publicarán
en internet deben tener resolución baja (72dpi – 96 dpi). Las
imágenes de resolución alta (200dpi – 500dpi), son utilizados en
Diseño Web || Walter Alvarez: www.solucionesseo.com
6
Imprenta y se hace así para que la imagen impresa tenga la
mayor cantidad de información de colores posible y pierda
menos calidad.
Ahora que entendemos un poco mejor lo relacionado a la resolución, puedo
decirte que la resolución se mide en dpi o ppp (dpi= dots per inch ; ppp =
puntos por pulgada). Raramente veremos la resolución expresada en pixeles /
centímetro, no porque no se pueda, sino porque Puntos por Pulgada es el
estándar.
Sino haz la prueba, pregúntale al joven o la joven diseñadora de la Imprenta en
la que sacas tus documentos, si le mandas la resolución en pixeles por pulgada
o pixeles por centímetro, probablemente te responda “no importa”, sin embargo
si realizas este tipo de cambio en la resolución de una imagen y más si esta va
a la imprenta para sacar volantes mejor avísale al diseñador de la imprenta así
te evitarás futuros dolores de cabeza

.

Creación de un documento nuevo de Photoshop
Si presionamos la pestaña Custom, se nos
desplegaran las opciones de tamaño de
documento que Photoshop tiene preestablecidas,
Default Photoshop Size = es 454
* 340 pixeles. U.S. Paper = tamaño carta,
Legal y Tabloide y así sucesivamente para
cada opción que se lecciones de Presets.
Si observas con atención cuando cambias la
opción Presets a custom o cualquier otra de
las opciones la casilla Size se activa y te
permite cambiar entre tamaños, por su parte
las casillas de width (ancho) y height (alto)
cambian respectivamente al realizar el cambio.

A la par de la opción Width y Height encontrarás siempre la unidad de medida, dentro de las
cuales las más usadas son cm (centímetros), inches (pulgadas), mm (milímetros), pixels
(pixeles). ¿Cual usaremos nosotros?, pixeles, ya que es la interfaz de una página web la que
voy a realizar y va a ser vista a través de monitores y los monitores trabajan con pixeles.
A la par de resolution (resolución) aparece otro cuadro en el cual puedes seleccionar si la
resolución la quieres representar en pixeles/pulgada o pixeles/centímetro. Te recomiendo
pixeles/pulgada (anteriormente expliqué la razón).
Cuando hayamos configurado nuestro documento presionamos “OK”, seguido nos aparecerá
un documento en blanco, el cual es nuestro documento con las dimensiones que hayamos
definido anteriormente.

Elementos de la Interfaz de nuestra página web

En esta sección definiremos los elementos a utilizar, las secciones que
utilizaremos (botones, encabezados, fuentes, colores, etc).
Debemos tener claro que un sitio web consta básicamente de la siguiente
estructura:

No importa cuál es la forma que le vayas a dar, ni el tamaño del documento
que utilices, la estructura de una página web es siempre la misma, veamos
cada elemento por separado:
1. TOP
a. Es el encabezado de nuestro sitio web y ubicaremos en el
logotipo de la empresa, slogan de la empresa y si el diseño lo
amerita, la imagen de la sección.

2. Menú
a. Le llamamos menú al conjunto de opciones o secciones de
nuestro sitio web, algunos prefieren llamarlo como “links internos”,
pero no importa como lo llamemos, la función del Menú es
siempre la misma, ofrecerle al visitante la posibilidad de navegar
a través de nuestro sitio web.
b. Toma en cuenta que las opciones del menú deben estar
disponibles en todas las páginas de nuestro sitio web, así que lo
que conviene es que cada opción tenga como nombre la sección
que será visitada, es decir, “Acerca de la Empresa” llevará al
visitante a una página en la que se encuentre información de la
Empresa, posiblemente una breve reseña, misión y visión,
además valores y cualquier otra información que se considere de
valor.
c. Una página web es como una presentación en Power Point de tu
empresa, la diferencia es que es a nivel Mundial, y como en una
presentación no lo puedes poner todo, debes ser capaz de
seleccionar el contenido y publicar únicamente lo que es útil para
el visitante.
i. Al usuario probablemente no le interese cuantos
empleados hay, ni cuanto se gasta mensualmente en las
compras del supermercado, tampoco cuanto se paga de
energía eléctrica, o cuantas cartas se reciben por aire o
cuantas cartas se reciben por tierra, etc.
ii. Hay que realizar una selección exhaustiva de la
información a publicar.
iii. Una correcta selección de información le será muy útil a la
empresa, a la vuelta del final del desarrollo del sitio web
toda la información útil va a estar online.
3. Contenido
a. En esta parte se muestra la información de la pagina individual,
en el caso de la portada no caigamos en el error de mostrar un
texto de bienvenida,
b. Una página web de éxito muestra al navegante sus productos
como primera instancia, o sus servicios si es una empresa de
servicios, los Mensajes de Bienvenida no resultan muy útiles a la
hora de construir paginas cuyo propósito es vender, pero si
resultaría útil si la bienvenida la acompañamos con una reseña
breve de lo que puede encontrar en este sitio web.
4. Footer / Pie de pagina
a. Generalmente mostraremos aquí información de contacto de la
empresa: “Empresa.com Todos los derechos reservados. Tel:
555-555555; fax : 555-555555, etc” y además los créditos. Que no
se te olviden los créditos con un enlace hacia tu sitio web.

Dimensiones de los elementos de la Interfaz de nuestra
página web
1. TOP
Ancho = 1000 px
Alto = 200px
i. Puedes variar el alto entre 150px y 200px, haz las pruebas.
Dependerá del alto del logotipo y lo que desees mostrar en este
espacio.
2. Menú
Ancho = 200 px – 250 px
i. Aquí es el ancho el que nos preocupa, ya que el ancho debe
haber espacio suficiente para escribir las opciones del menú,
200px en ocasiones es suficiente, sin embargo un numero un
poco mayo nunca es malo, sobre todo si el sitio va a ser
dinámico y las opciones del Menú van a ser extraídas de una
Base de Datos de la cual nosotros no tendremos control sobre la
cantidad de caracteres. El espacio debe ser suficiente para
escribir dos palabras moderadas, sin embargo el usuario en este
caso en particular es el que va a escribir esos textos por lo que
conviene dejarle un espacio suficiente para que la cantidad de
caracteres no descuadre nuestra forma posteriormente.
ii. Es preferible dejar el ancho calculando el 20% del espacio total,
recuerda que son solamente opciones las que mostrarás.
􀂙 Alto = Proporcional al contenido
i. Puedes comenzar (solo para darle un alto cualquiera), 200px de
alto.
ii. La altura aquí no es tan importante, ya que va a ser el usuario el
que determine, con la cantidad de opciones que tenga, la altura
de este cajón.
3. Contenido
Ancho = 750px
Alto = Proporcional al contenido
i. El alto del cajón Contenido, dependerá de la cantidad de
información mostrada en la página web, y tomando en cuenta
que no todas las paginas tienen igual cantidad de información,
conviene hacer un espacio pequeño que luego podamos
agrandar
4. Footer / Pie de página
Ancho = 100% del ancho total de la pagina
Alto = no menos de 50px
Con lo que hemos visto hasta aquí, ya conocemos lo básico, ahora pasemos al diseño
en Photoshop.
Si nunca has usado Photoshop, te recomiendo que leas la ayuda del Programa, te
servirá de mucho, si ya has usado el programa se te hará más fácil la comprensión. No obstante trataré de explicar los procedimientos y las herramientas lo mejor y más
comprensible posible.

Debido a que no podemos recargar tanto una pagina esta primera parte termina aqui pero puedes seguir viendo la segunda parte