Diseño de Interfaces Web 1
Tutorial Photoshop
Tutorial por Solo Photoshop
SoloPhotoshop
DISEÑO DE INTERFACES WEB 1TUTORIALES TALLER WEBMASTERUno 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) |
|
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%. Ahora hay que crear una punta, para esto necesitamos ir a: 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: |
|
Por consultas o sugerencias sobre esta entrega, puedes ir a nuestro foro |
Comentarios de Diseño de Interfaces Web 1
↑ Tutorial
Arthur
2007-07-20 13:51