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

Tutorial Photoshop

 

Tutorial por Solo Photoshop

Solo Photoshop

DISEÑO Y MAQUETADO DE PLANTILLAS WEB 7

Con Adobe Photoshop, Microsoft Front Page y Macromedia Dreamweaver

Continuamos con la septima entrega junto a Paquo360 que nos enseña como crear una plantilla usando Adobe Photoshop, y luego maquetarla con Macromedia Dreamweaver, pero debido a algunos pedidos de usuarios haremos primero la Maquetacion en Microsoft Front Page :)

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

Abre tu diseño de Página, ahora en HTML. La Primera impresión en Front Page 2000 o superior es un poco tosca (ruda) pues las celdas aparentan estar fuera de lugar, sin embargo no es así y lo puedes comprobar en la Vista Previa Vista Previa.

Lo primero que haremos será cambiar el color del fondo de nuestra Página.

Adobe Photoshop

Formato > Fondo > Colores > Fondo > más colores > Valor = EC,ED,F7.

Con esto se homogeniza el fondo de nuestra página y estamos en posibilidades de eliminar las imágenes cuyo color es el mismo que el de fondo. Sólo haz clic sobre estas y luego presiona Supr (delete), no importa que cambie el tamaño de la celda. Si tienes duda, en cualquier momento puedes comprobar que tu celdas aun concuerdan con la Vista Previa

Evita en todo momento hacer un cambio a las celdas de los extremos superior y derecho, pues son estas las que dan estabilidad a tus tablas.

Ahora ve a la pestaña HTML y busca lo siguiente (6, 7, o 8 línea):

Adobe Photoshop

Debajo encontrarás el siguiente código. Agrega el comando ALIGN.

<TABLE WIDTH=780 BORDER=0 CELLPADDING=0 CELLSPACING=0>

<TABLE WIDTH=780 BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER>

Con esto tu Plantilla se centra sobre la página como en la imagen.

Hasta ahora mi contador Contador de Tiempo de Cargade Tiempo estimado de carga marca 15 seg. a 28.8 kb/s, es decir que si tienes una velocidad de conexión a Internet de 56 kb/s tu Plantilla se cargará en 7.5 segundos (la mitad). Sin duda es una tentadora marca, sin embargo hay que pensar en que se le agregarán más celdas, scripts, imágenes y muchas otras cosas que aumentarán enormemente el peso de la Plantilla, es por esta razón que debemos bajarla aún más.

Quitemos las imágenes de las pantallas de cada ventana. Excepto un triangulo que anda por ahí.

La imagen nos muestra el resultado, y vemos también la imagen del triangulo a la que me refería.

El Tiempo Estimado de Carga disminuye a 12 segundos, nada mal.

Adobe Photoshop

A continuación hay que sustituir las imágenes con el mismo color. Posiciónate en alguna de las celdas cuya imagen de color eliminaste luego: Clic Botón Derecho del Ratón > Propiedades de Celda > Fondo, baja el sub-menú de color > Mas Colores > Seleccionar. Y ya con el gotero muestrea el color oscuro de la imagen del triangulo, que es el color de las imágenes borradas, o simplemente usa el siguiente valor: C3,C7,E5. En delante este valor estará cargado en los Colores del Documento, lo que significa que no será necesario muestrear nuevamente.

Adobe Photoshop

Como ven ya falta poco :), hasta la proxima

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

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

↑ Tutorial

  • Charity

    Charity

    2006-05-17 20:55

    Muy interesante!! estoy segura que aqui aprenderé mucho SaludosM
  • paginillasweb

    paginillasweb

    2006-05-18 08:06

    y en dreamweaver?????M
  • mcnadie

    mcnadie

    2006-05-18 10:01

    Realmente muy bueno !!! Saludos y gracias.M
  • pinolere

    pinolere

    2006-05-19 07:05

    por fa hacer lo mismo pero en el dreamweaver.M
  • carlatovar

    carlatovar

    2006-05-19 10:56

    en dreamweaver please!!!!!!M
  • rickblanc02

    rickblanc02

    2006-05-19 11:56

    Esta bueno aunque ya lo habia realizado, pero en dreaweaver tambien use esta tecnica de diseñar la plantilla en photoshop y maquetarla en DW y agregue estilo CSS, queda mucho mas profesionalM
  • juanvarela

    juanvarela

    2006-05-29 21:23

    Hacer Maquetas o plantillas en Fireworks es más facil, pero la finalización es mucho mejor en Photoshop, sobre todo en botones y sobras. buen tutoM
  • salinas282003

    salinas282003

    2006-06-05 17:08

    acabo de revisarlos toditos y estuvo okkkkkkM
  • aldobond

    aldobond

    2006-06-06 14:42

    estuvo muy bien....muchas gracias por el aporteM
  • freelander

    freelander

    2006-06-10 18:10

    gracias por el dato esta muy bueno M
  • wilytus

    wilytus

    2006-06-10 21:22

    ta bueno los tutoriale graciasM
  • wilssonly

    wilssonly

    2006-06-10 22:35

    Lo hago y de ahi les comentoM
  • marjorie davila

    marjorie davila

    2006-06-13 15:32

    Gracias, me ayudo de mucho sigue enviado mas tutoriales, saludos y un abrazoM
  • duver

    duver

    2006-07-10 02:06

    Excelente!!M
  • rickblanc02

    rickblanc02

    2006-10-23 00:58

    Ya publique mi pagina en un servidor gratuito, http://grucrii-beta.4t.com visitenla y escriveme al correo que sale en contactosM
  • tutupaturro

    tutupaturro

    2006-11-19 17:35

    heyyyyyyy me gustaria saberlo pero en dream weaver por fa hacerlo rapido ! 911M
  • aarias

    aarias

    2007-01-18 08:48

    Es muy bueno, me gusto mucho.M

↑ Tutorial