Taller Webmaster

Tutoriales para Webmasters

Bienvenido a Taller Webmaster, donde encontrarás la mejor información sobre tutoriales y recursos para webmasters!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

Publicidad

Diseño de Interfaces Web 1

Tutorial Photoshop

 

Tutorial por Solo Photoshop

SoloPhotoshop

DISEÑO DE INTERFACES WEB 1

TUTORIALES TALLER WEBMASTER


Uno de los primeros tutoriales, perdido por algun tiempo pero tan vigente y todavia UNICO en la web luego de casi 5 años. Paquo360 nos enseña a crear una Interface Web, sencilla y atractiva de esas que atraen a los visitantes y es sin embargo sencilla de elaborar.

Nota: Si bien fue desarrollado en Photoshop 6, se puede ejecutar en Photoshop CS 2 sin problemas !!

1.- Preparación del Área de Trabajo.

Esta es nuestra Interface en pañales, tan sólo es un esbozo de lo que será. En ella podemos ver ya las medidas y las posiciones que ocuparán tanto el nombre de la empresa y el logotipo. Esta imagen la encuentras en el zip de imágenes en tamaño real, pero por si la quieres hacer desde cero, la imagen es de 800 600 px con fondo transparente.

Preparacion del Area de Trabajo

A continuación Presiona Crtl + R para ver las Reglas, hecho esto podemos utilizar las guías: haz clic encima de una regla, vertical u horizontal según sea el caso, y sin soltar arrastra hacia el diseño, y con esto te aparece una guía. Usualmente de color azul, estas te dan mayor exactitud a la hora de dibujar. Hay que poner una en cada medida. La imagen te muestra cómo deben de quedar.

Hay que activar el Salto: Ver>Salto a>Guias (View>Snap To>Guides)
Una vez listas las guía podemos iniciar con nuestro diseño, lo primero que hay que hacer es dibujar los distintos elemento de fondo.

Reglas Guia

2. Diseño de Elementos Básicos de la Interface.

Crea una Nueva Capa: Capa>Nueva Capa (Layer>New Layer) luego toma la herramienta Marco Rectangular , haz clic y sin soltar crea un rectángulo vertical desde 0 hasta 140 px luego rellénala con un gris muy oscuro, casi negro (333333) y nos queda así, sin la capa de fondo (el dibujo a lápiz). Deselecciona Presionando Crtl + D.

Reglas Guia
Reglas Guia

Hay que crear una Nueva Capa y con Marco Rectangular siguiendo las guías para formar la primera crestilla. Seguimos con la gama de grises, pero esta vez menos bajo aun (666666), y disminuimos su opacidad hasta un 50%.
El rectángulo va de 90 a 520 px Horizontal y de 140 a 160 px vertical (cresta inferior)

Ahora hay que crear una punta, para esto necesitamos ir a:
Editar>Transformar>Distorsionar
(Edit>Transform>Distort)

Y presionando la tecla Shift arrastramos la punta inferior derecha de nuestro rectángulo hacia arriba. Finalmente Presiona Aceptar (Enter) en tu teclado.

Reglas Guia

Deselecciona.

Duplicamos esta capa arrastrándola hasta el icono de Nueva Capa (New Layer) en la paleta de Capas.Presiona Ctrl + T o ve a: Editar>Transformar>Escalar (Edit>Transform>Scale) y arrastra la parte inferior de la forma hasta guía de 495 px horizontal. Pon la opacidad de esta capa en 75% (cresta media). Haz lo mismo con otra, duplica la primera, sin embargo colócala a la altura de la guía de 470 px horizontal y una opacidad del 100% (cresta superior).

Reglas GuiaReglas GuiaReglas Guia

En este momento nos viene bien ver la capa de fondo, color blanco, para empezar a distinguir entre los distintos componentes de la Interface, que no son blancos. Crea una Nueva Capa (New Layer) y rellénala de blanco. Y ahora sí podemos distinguir claramente el efecto de las transparencias en las crestillas.

Reglas Guia

Así es como vamos en las capas, tan sólo son 5 junto a nuestro fondo blanco artificial.

Para nombrar a las capas debes de hacer clic con el botón derecho del Ratón sobre la capa y del menú emergente seleccionar Propiedades de Capa (Layer Properties).

Reglas Guia

Hemos terminado los elementos del fondo y así vamos hasta ahora:

Reglas Guia

Ver las demas entregas < 1 > < 2 > < 3 > < 4 >

Por consultas o sugerencias sobre esta entrega, puedes ir a nuestro foro

Comentarios de Diseño de Interfaces Web 1

↑ Tutorial

  • Arthur

    Arthur

    2007-07-20 13:51

    Esta todo excelente pero seria posible que lo pudieras poner en Video ya sea usando el FLV Player o el CamStudio ambos son buenos..... ya que me tengo que entrar y salir.... y con el Video lo puedo estar oyendo o viendo en un recuadro y seguir paso a paso lo que gentilmente nos enseñas... Gracias y Saludos