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 contrasea

Registro de Usuario

Anunciar en SoloPhotoshop

Diseño de Interfases WEB 1 | Solo Photoshop

Tutorial Photoshop de Interfaces y Diseño Web

 

Tutorial por Paquo360

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.

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

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

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 >

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

↑ Tutorial

  • lucianorossi

    lucianorossi

    2006-04-05 19:58

    Buenisimo!!!!!!!! por favor segunda entrega!!! Muchas gracias por ayudar ! Saludos, Luciano RossiM
  • avatar

    avatar

    2006-04-06 14:43

    Esta bunisimo espero con ansia la segunda parteM
  • juliant

    juliant

    2006-04-06 15:30

    Muy bueno, esta excelente. Y espero que muy pronto la segunda entrega. Este programa es muy bueno.M
  • claumb

    claumb

    2006-04-06 15:42

    espero que pronto continue...M
  • fumatamax

    fumatamax

    2006-04-06 16:01

    esta bastante bien explicado esperemos que la siguiente no tarde bastante en salir y asi seguimos todos jijijiM
  • manuelclemente

    manuelclemente

    2006-04-13 08:07

    Ahora estoy completamente alucinado, esto es justamente lo que yo buscaba, y encima super facil, guay guay :-)M
  • filtro

    filtro

    2006-04-20 23:00

    Me estoy enamorando de esta Página ... M
  • kybalion

    kybalion

    2006-04-21 13:18

    el tutorial es exelente muy sencillo, atractivo y facil de elaborar sigue asi photoshop. M
  • mktmarco

    mktmarco

    2006-05-06 14:42

    exelente el tutorial me ayudo mucho en la elaboracion de mi web graciasM
  • djmov

    djmov

    2006-05-11 00:42

    muy bueno, saludos de argentina-la riojaM
  • DarkNeoX

    DarkNeoX

    2006-05-13 13:57

    lindo lindo.. y el zip de las imagenes?M
  • jesucristo

    jesucristo

    2006-05-17 00:27

    Una obra de arte para los que no sabemos nada de nada. Muchas gracis señores de solophotoshop, recomendare esta pagina mucho.M
  • printamatik

    printamatik

    2006-05-29 10:06

    Unos excelentes tutoriales. Muy agradecido por todo el trabajo que han hecho. M
  • j0nAtHan_

    j0nAtHan_

    2006-06-02 00:43

    buenoM
  • astharot

    astharot

    2006-06-18 12:25

    muy buenos tutoriales , gracias...........M
  • coquinukleo

    coquinukleo

    2006-06-30 17:27

    esta muy buenoM
  • Jorge_Krlos

    Jorge_Krlos

    2006-07-01 23:47

    está muy bueno, pero no encuentro el .zip de la imagenes en tamaño real, espero por al ayuda de uds. estuve tratando de hacerla desde cero pero las reglas no me salen como en el segundo diseño, y no sé que hacer.M
  • wilmatt

    wilmatt

    2006-09-21 19:16

    buena hasta que se me hizo la luz, justo lo que buscaba amigos... graciasM
  • Dark_Kaiser

    Dark_Kaiser

    2008-08-13 21:20

    muy bueno,graviasM
  • sty_fx

    sty_fx

    2010-03-08 19:46

    se agradece el aporte !! :DM

↑ Tutorial