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 y Maquetado de Plantillas WEB 1 | Solo Photoshop

Tutorial Photoshop

 

Tutorial por Solo Photoshop

Solo Photoshop

DISEÑO Y MAQUETADO DE PLANTILLAS WEB 1

Con Adobe Photoshop y Macromedia Dreamweaver

En las 4 entregas anteriores de DISEÑO DE INTERFACES WEB, vimos junto a Paquo360 como crear una plantilla usando Adobe Photoshop, quedo pendiente el maquetado de la misma con Dreamweaver, eso veremos ahora.

Nota: Si bien fue desarrollado en Photoshop 6, se puede ejecutar en Photoshop CS 2 sin problemas, al igual que usar Dreamweaver 8 para el maquetado. !!

Este fue el comienzo de nuestro Primer Gran Tutorial en el año 2002, en el Viajaremos a través de 4 distintas aplicaciones de Diseño Web como lo son: El magnifico "Photoshop", su inseparable "Image Ready", el tan popular "Front Page" versión 2000 (tambien se puede aplicar el 2003) y el completísimo "Dreamweaver" versión 4 (o superiores hasta la actual DW 8). Recordamos que en este tipo de Tutoriales la explicación esta dada para personas que ya tienen un conocimiento previo del programa aunque sea minimo (si quedan dudas pueden consultarlas en el foro), pues la extensión del mismo no permite que nos detengamos a detallar cada uno de los pasos. Si no cuentas con un conocimiento medio de Photoshop, tendrás dificultades para entenderlo, lo que significa que difícilmente lo acabarás; y aconsejamos por ello leer antes nuestros tutoriales basico, recomendamos que empieces por los tutoriales de texto, botones y retoque, te aseguramos que entonces estarás más que capacitado para entender este Tutorial.

Este es el diseño de Pagina que usaremos. Como verás es mas adecuada para un portal que para pagina personal.

Provisionalmente hemos colocado el nombre a las distintas ventanas, sin embargo al final eres tú quien decide en qué usar en cada una de ellas.

Nota:
En delante, por cuestión de espacio visible, trabajaremos sin nombre sobre las ventanas. Si así lo deseas hacer también sólo bórralos.

Recomendación:
Te sugerimos que después de cada tres o cuatro pasos guardes tu trabajo, pero con un nombre diferente. Esto para evitar errores irreparables. Podrías llamarlo "pagina1" luego aplicas "Guardar Como" y llamas al segundo "pagina2", y si al final estas conforme con tu trabajo puedes borrar los archivos que ya no te sirvan.

Interfaces y Templates Web

Hay que crear selecciones para cada ventana y luego rellenarlas con color.

La primera será la más complicada.

Para elaborar las selecciones es imperante que acoplemos bien una guía por cada línea y/o punto de inclinación que veamos en el dibujo, en este caso en la primera barra, la del logotipo y banner de publicidad.

La imagen te muestra el resultado: 6 guías verticales y 6 horizontales.

Interfaces y Templates Web

En el tutorial de Interface Básica encuentras una más amplia explicación de las Guías, Reglas y Selecciones.

Para aparecer u ocultar las reglas presiona "Ctrl + R"

Para aparecer u ocultar las guías presiona "Ctrl + ' "

Dentro del menú View activa el Snap (salto) para asegurarnos de que la selección se base en las guías. Si deseas ser mas específico dirígete a:
"Snap to > Guides"
Toma la herramienta Rectangular Marquee Interfaces y Templates Weby traza la primera selección.
La imagen te muestra el resultado.

Interfaces y Templates Web

Ahora tenemos un largo rectángulo, sin embargo no es la figura que necesitamos.

Hay que recortar las esquinas de nuestra Selección para acoplarla a nuestro diseño.

Hay mucha mas comodidad y precisión con un Zoom (Interfaces y Templates Web) de 300%.

Toma la herramienta Polygonal Lasso Interfaces y Templates Web y presionando la tecla Alt crea un triángulo. Cuando cierres el triángulo cerciórate de ver un pequeño círculo, el cual te indica que lo haces en el lugar adecuado, donde se unen las puntas y se cierra el triángulo.

Al soltar la tecla Alt el área que ocupaba el triangulo, dentro de la Selección, desaparece.

La imagen te muestra el antes y después de soltar la tecla Alt .

Repite la operación en las cuatro esquinas de nuestra Selección.

Si en algún momento las guías te molestan por atraer la Selección a donde no deseas, desactiva el Snap.

Interfaces y Templates Web

Interfaces y Templates Web

La siguiente área a tratar es el área de publicidad o banner. Si no lo consideras necesario para tu página salta a la siguiente etapa.

Presiona "Ctrl + ' " o en el menú "View > Snap To > Guides" para ver las líneas del bosquejo que tenemos tras las guías e identifica la posición del banner.

Haz lo contrario para volverlas a ver y continuar.

Toma la herramienta Rectangular Marquee Interfaces y Templates Web y presionando la tecla Alt crea una selección siguiendo las guías.

La imagen te muestra el resultado.

Interfaces y Templates Web

Guarda la selección. "Selection > Save Selection" y nómbrala Banner. Luego presiona "Ctrl + D" para quitarla y continuar.

La siguiente selección es la pestaña inferior izquierda de la barra de título.

Lo haremos en tres pasos, como lo muestran las imágenes.

1 .- Crea la selección basado en las guías. Ojo: he movido una guía central que estorbaba.

2 .- Luego: "Select > Transform Selection" con esto se forma un recuadro alrededor de la selección. Sigue con "Edit > Transform > Skew" con esto puedes tomar las esquinas inferiores del recuadro y arrastrarlas hasta los puntos rojos de la imagen 1 (en la intersección).

Interfaces y Templates Web

3 .- Una vez colocadas las esquinas correctamente presiona Enter en tu teclado para aceptar la selección creada. La imagen 3 te muestra el resultado.

Guarda la selección con el nombre de Pestaña.

Ver las demas entregas < 1 > < 2 > < 3 > < 4 > < 5 > < 6 > < 7 > < 8 > < 9 > < 10 >

Comentarios de Diseño y Maquetado de Plantillas WEB 1 | Solo Photoshop

↑ Tutorial

  • lucianorossi

    lucianorossi

    2006-04-17 15:32

    muy bueno todo lo que hacen por nosotros "los que no sabemos", espero con ansias la proxima entrega. Saludos, Luciano.M
  • carlatovar

    carlatovar

    2006-04-18 16:40

    Será una pregunta tonta pero donde esta la "carpeta almacén" que mencionan en el tutorial?M
  • idolo2006

    idolo2006

    2006-04-19 20:40

    gran aporte te psasteM
  • fersanvel

    fersanvel

    2006-04-21 00:18

    la verdad, esta increible, todo esto que hacen por nosotros los noveles es enorme y en lo personal lo agradezco mucho.... le deseo siempre lo mejor a todo el equipo y muchas felicidades. su amigo fersanvelM
  • LucyAA

    LucyAA

    2006-04-22 06:03

    Yo también me pregunto ¿Cómo acceder a la "Carpeta Almacén"?M
  • sk8900

    sk8900

    2006-04-22 09:18

    buenoM
  • fueradelresto

    fueradelresto

    2006-04-25 23:42

    Era justo lo que buscaba hace tiempo, incluso busque cursos cortos para ello, pero gracias a Uds. no gastare mi dinero. Muchas gracias por tu colaboracion. ::SaLuDos A ToDa La CoMuNidAd::. >.< M
  • medranda

    medranda

    2006-06-12 10:56

    muy bien ya que si conosco de los programas M
  • yoelxD

    yoelxD

    2006-07-04 18:04

    excelente....solo una pregunta....la plantilla con lo q estan haciendo el trabajo es muy aparte o tambien ay q seguir pasos para hacer esa plantillaM
  • arkariuz

    arkariuz

    2006-10-04 20:10

    para mi tambien este tema es muy interesante ya que yo no se nada de photoshop i me gustaria aprender desde la parte cero en que empesaron a armar este tema para poder asi entender mejor... grax...XDM
  • Pjames

    Pjames

    2006-11-09 08:04

    hoal buenas, a toda la comunidad, y mas que todo a todo el equipo de la pagina, una cosa muy buena...una sugerencia...por que no armamos una pagina web con todos los que sabemos alguito de esto, eso si gratis y para demostrar que los tutoriales sirven....animense... bay. M
  • jorgecordova

    jorgecordova

    2006-12-01 12:22

    Excelente.... hacer presentaciones en paginas con photoshopM
  • tierno01

    tierno01

    2007-07-08 16:17

    muy buenoM
  • liove

    liove

    2007-09-13 17:05

    es algo super, este tipo de presentaciones, son una ayuda excelente. toda esa trama de diseño, y configuracion de formas y colores.M
  • zaqwsx

    zaqwsx

    2008-05-11 15:19

    muy bueno el tutorial excelente pero no se como acomodar el texto en la platilla M
  • adianez

    adianez

    2008-07-19 15:46

    PAra que es de buena utilidad, gracias tambien quisiera si ver como se puede acomodar esa plantilla en dreamweaver y editarlo desde ahiM
  • tierno01

    tierno01

    2008-07-26 22:09

    vjhvbjbknbjkjnbjM
  • tierno01

    tierno01

    2008-07-26 22:09

    vjhvbjbknbjkjnbjM
  • tierno01

    tierno01

    2008-07-26 22:09

    vjhvbjbknbjkjnbjM
  • Aztekero

    Aztekero

    2008-12-17 20:35

    BienM

↑ Tutorial