Diseño de Interfases WEB 1

Tutorial Photoshop de Interfaces y Diseño Web

Tutorial por Paquo360 de SóloPhotoshop

Este es uno de los primeros tutoriales publicados en SóloPhotoshop, que estuvo perdido por algún tiempo y sigue vigente luego de casi 4 años. Paquo360 nos enseña a crear una Interfase o Plantilla Web, sencilla y atractiva.

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.

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.

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.

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.

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).

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.

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).

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

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