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 8 | Solo Photoshop

Tutorial Photoshop

 

Tutorial por Solo Photoshop

Solo Photoshop

DISEÑO Y MAQUETADO DE PLANTILLAS WEB 8

Con Adobe Photoshop, Microsoft Front Page y Macromedia Dreamweaver

Continuamos con la octava entrega junto a Paquo360 que nos enseña como crear una plantilla usando Adobe Photoshop, y luego maquetarla,. pero como algunos usuarios lo han pedido, hicimos primero la Maquetacion en Microsoft Front Page :) y aqui termina para luego entrar a Macromedia DreamWeaver.

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

Clic Botón Derecho del Ratón > Propiedades de Celda > Estilo > Formato > Borde

No en todas las celdas se usarán los 4 lados, como en al caso de la mayor y su contigua superior, junto al triangulo.

Con esto homogeneizamos el borde aplicado en "Photoshop" en las zonas oscuras de la Plantilla.

Adobe Photoshop

En el caso de la celda mayor hay que hacer lo siguiente para que aplique al borde oscuro: Clic Botón Derecho del Ratón > Propiedades de Celda

La imagen te muestra el resto (negro).

Adobe Photoshop

Hay que modificar un poco los márgenes, lo cual es opcional. Clic Botón Derecho del Ratón > Propiedades de la Página > Márgenes (pestaña de)

Especifica el Margen Superior con 0 px.

Adobe Photoshop

Sólo nos queda un detalle para terminar la Plantilla. La pequeña imagen de la esquina, esta debe ir a Hojalatería y Pintura en "Photoshop".

Hay varias formas de llevarla, pero la más simple es Clic Botón Derecho del ratón > Copiar.

Una vez en "Photoshop" File > New Ok Luego: Edit > Paste. Y listo, allí tienes la pequeña imagen.

Con la herramienta Line traza una línea color negro de 1 px entre la unión de los dos colores para simular borde negro de las celdas.

Adobe Photoshop

Aprovecharemos esta parte del tutorial para echarle una mirada al comando Save for Web. Tenemos una imagen en "Photoshop" y debemos editarla de manera que su tamaño os permita utilizarla sin problemas en Internet. De cierta forma ya hicimos esto con "Image Ready", pero ahora le toca turno a "Photoshop".

File > Save for Web

Es muy importante recordar el nombre y en que carpeta se guarda la imagen que luego será usada en el Editor HTML

Adobe Photoshop

Imagen anterior a Mayor Tamaño

Adobe Photoshop

Finalmente hay que traer de regreso la imagen, ya pintada, y sobre todo optimizada.

Pon tu cursos sobre la celda donde se localiza esta imagen y luego insértala.

Para esto presiona Imagen luego Explorar para llegar hasta donde se localiza tu archivo.

Adobe Photoshop

Esta es nuestra Plantilla Final que termina en 12 seg a 28.8 kb/seg lo que es una magnifica velocidad.

Te recomiendo que la veas el Resultado Final.

Adobe Photoshop

Hemos terminado con todo el tutorial para la version FrontPage. Proximamente las 2 entregas en version DreamWeaver.

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

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

↑ Tutorial

  • rickblanc02

    rickblanc02

    2006-05-21 12:07

    Esta muy bueno, aunq no uso frontpage, graciasM
  • elchimu

    elchimu

    2006-05-22 09:24

    espero con ganas el pasaje entre PhotoShop y DreamWeaver. graciasM
  • filtro

    filtro

    2006-05-24 07:51

    GraciasM
  • filtro

    filtro

    2006-05-24 07:51

    Muy loko el tutorial ... Pero yo uso Dreamweaver ... Espero el tuto dirigido a dreamweaverM
  • NikoMaco

    NikoMaco

    2006-05-30 11:20

    Muchas gracias por su gran generosidad.M
  • AlexanderVillalobos

    AlexanderVillalobos

    2006-05-30 17:38

    Gracias es muy útil... pero al igual que los demás. Photoshop y Dreamweaver es una mejor combinación.M
  • ithaca

    ithaca

    2006-05-31 16:22

    Gracias muy util y sencilloM
  • mcnadie

    mcnadie

    2006-05-31 20:26

    Muchas Gracias, muy buena la explicación, felicitacionesM
  • tiago

    tiago

    2006-06-01 18:49

    gracias por darnos la oportunidad de realizar nuestras propias plantilla para dreamweaverM
  • icophoto

    icophoto

    2006-06-02 12:48

    Excelente manual al alcance de todos, gracias.M
  • rpc

    rpc

    2006-06-04 09:01

    Agredecer la forma didactica y tu conocimientos para ponerlo al alcance de los demas. felicidades y sigas asi, yo espero el de dreamwever para completar .. mil gracias. Habra algun curso de flash, ojala pudiera encontrarlo.. cuideseM
  • carlatovar

    carlatovar

    2006-06-05 09:56

    Esperamos por el tutorial para dreamweaver..please!!!!M
  • nariel

    nariel

    2006-06-08 03:50

    weeeeeeeee gracias x el tuto! xo.. no podriais pegar una ayudita x ejemplo, a usar i-frames?? komo le das a un boton del menu por ejemplo y k solo te kambie la frame k kieres?? TT_TTM
  • fklibeer

    fklibeer

    2006-06-14 23:58

    Esta de Pelos Tu Tutorial Pero esperare el de Dremwever M
  • diyeidevil

    diyeidevil

    2007-01-31 14:02

    SE VE QUE ESTA MUY BUENO !!! FELICIDADES BROTHERS M

↑ Tutorial