Solo Photoshop

Tutoriales y recursos Photoshop

Bienvenido a SoloPhotoshop, donde encontrarás la mejor información sobre tutoriales, recursos y artículos de Adobe Photoshop!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

Anunciar en SoloPhotoshop

Diseño de Interfases WEB 2 | Solo Photoshop

Tutorial Photoshop de Interfaces y Diseño Web

 

Tutorial por Paquo360

Muy buena aceptación tuvo la primera entrega DISEÑO DE INTERFASES WEB 1, es por ello que Paquo360 nos trae la segunda.

Muy buena aceptación tuvo la primera entrega DISEÑO DE INTERFACES WEB 1, es por ello que Paquo360 nos trae la segunda.

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

El siguiente paso es dibujar una barra gris: sobre una Nueva Capa (New Layer) a la que nombraremos "Barra gris" hay que colocar una selección que recorra horizontalmente de lado a lado el diseño y que verticalmente se restrinja entre las guías 50 y 90 px. Luego lo rellenamos de Gris Claro (CCCCCC).

Deselecciona luego.

Preparacion del Area de Trabajo

Vamos por una nueva barra, en este caso de color Verde (CCFF00). El procedimiento es el mismo de la anterior, sólo que los limites verticales de esta van de 65 a 90 px.

Sin perder la selección rellena (CCFF00). Entonces deselecciona y verás algo más o menos así.

Preparacion del Area de Trabajo

Es hora de hacer algunos ajustes sobre la barra gris. Dirígete a: Editar>Transformar>Distorsionar
(Edit>Transform>Distort) y con la tecla Shift presionada (para evitar desviaciones) arrastra la punta superior derecha de tu barra gris hasta la guía vertical de 600 px y la inferior hasta cerca de los 650 px.

Finalmente presiona Aceptar (enter) en tu teclado.

Preparacion del Area de Trabajo

Las siguiente es la ultima barra que necesitamos y la llamaremos "Barra Mayor". Coloca una Capa Nueva (New Layer) justo bajo la capa "Barra Gris" Esta capa será la encargada de soportar tanto el titulo como el logotipo de la Interface. Crea la selección desde 0 hasta la guía horizontal de 90 px. A continuación rellénala de color blanco. Quitamos las guías:

Vista>Ocultar>Guías
(View>Hide>Guides)

Luego aplica unas Nubes (Filter>Render>Clouds).

Preparacion del Area de TrabajoAsegúrate de tener como color de frente Blanco y como color de fondo Verde (99CC66) para obtener el efecto deseado.

Luego aplicamos el filtro Molinete con un ángulo de 250°.
Filtro>Distorsionar>Molinete (Filter>Distort>Twirl)

Así Vamos:

Preparacion del Area de Trabajo

Ahora hay crear el cuadrado, usando el filtro Patchwork:
Filter>Texture>Patchwork

Con un Tamaño del cuadro de 4 y Relieve de 2. Nos queda algo así.

Preparacion del Area de Trabajo

Seguimos, inmediatamente, con un pequeño desvanecimiento del efecto del filtro: Edit>Fade Patchwork

Nota: Si hiciste cualquier movimiento ya no podrás desvanecer. Necesitarás regresar y aplicar nuevamente el filtro.

Preparacion del Area de Trabajo

Nos resulta algo como esto:

Preparacion del Area de Trabajo

Ahora: Imagen>Ajustar>Niveles Automáticos
(Image>Adjust>Auto Levels)

Preparacion del Area de Trabajo

Desvanecemos el efecto de los Niveles:

Edit>Fade Auto Levels

Conserva la Opacidad en el 100% y sólo cambia el modo a Luminosidad (Luminosity). Finalmente deselecciona.

Preparacion del Area de Trabajo

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

Comentarios de Diseño de Interfases WEB 2 | Solo Photoshop

↑ Tutorial

  • juass

    juass

    2006-04-06 20:02

    muy bueno.... espero la tercera entregaM
  • lucianorossi

    lucianorossi

    2006-04-07 00:15

    Ya ya ya la tercera entrega, por favor expliquen paso a paso como se pone en dreamweaver !!!!!!!!M
  • ErrPelon

    ErrPelon

    2006-04-07 10:24

    Espero que laproxima entrega sea pronto esta muy bueno el tutorial!!!!!!! M
  • Pokas DJ

    Pokas DJ

    2006-04-10 01:07

    Amigo, esta muy bueno y muy bien explicado el tutorial, creo que como los demás, estoy esperando ansioso la tercera entrega, suerte y gracias por la ayuda a todos!M
  • milongamadre

    milongamadre

    2006-04-10 01:58

    Excelente, esperando ansioso la tercera parteM
  • aguja11

    aguja11

    2006-04-10 14:52

    Impecable. Felicitaciones y muchas gracias. Vamo arriba!!M
  • aquirosguio

    aquirosguio

    2006-04-10 15:45

    Buenísimo, está super, espero que sigas haciéndolo como hasta ahora. La tercera parte la espero con los pelos de punta pues todo ha quedado brillante. Gracias.M
  • aegz81

    aegz81

    2006-05-18 14:34

    necesito si alguien me puede ayudar, estoy siguiendo los pasos, pero al llegar al segundo de esta entrega en el que se hace la barra verde, cuando selecciono el color CCFF00 el cuadrito del color, se pone gris, y si lo aplico en la capa para rellenar se ve gris. si selecciono el color para cambiarlo, esta seleccionado el color verde CCFF00, si alguien sabe porque me pasa esto, y me pueda ayudar se lo agradeceria... espero respuestaM
  • ivancii

    ivancii

    2007-01-24 08:06

    no puedo selecionar molinete alguien sabe xk M
  • MBG-C

    MBG-C

    2007-06-14 04:53

    a ver si alguien me puede ayudar, veran al llegar a la parte de (Luego aplica unas Nubes (Filter>Render>Clouds).)en mi photoshop cs version 8 no lo encuentro alguien sabe de estoM

↑ Tutorial