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

Tutorial Photoshop

 

Tutorial por Solo Photoshop

Solo Photoshop

DISEÑO Y MAQUETADO DE PLANTILLAS WEB 9

Con Adobe Photoshop, y Macromedia Dreamweaver

En esta novena entrega junto a Paquo360 llegamos a uno de los puntos mas esperados del tutorial, es el que mas han pedido los usuarios desde el comienzo, hablamos de maquetar la web con Macromedia DreamWeaver.

Abre tu diseño de Página, ahora en HTML. Dreamweaver, cuando esta en Vista Estándar Vista Standard, contrario a Front Page, te presenta una página limpia, libre de tantas celdas, te la muestra casi como te la mostraría un navegador. Veamos pues como se vería en internet presionando F-12 en tu teclado.

Para respetar al camino que se siguió con F.P. 2000, cambiemos el color de fondo de nuestra página, sin embargo haremos una pequeña escala en el HTML para ordenarlo y limpiarlo de los malos tratos de Image Ready.

Adobe Photoshop

Rápidamente demos un correcto formato al texto HTML pues Image Ready deja mucho que desear a la hora de escribir el código. Commands > Apply Source Formatting. Tal vez no distingas nada en la Vista del Diseño Vista Diseño, pero puedes apréciar los cambios en la Vista del Código Vista Codigo. Luego quitamos las marcas que Image Ready dejo: Commands > Clean Up HTML usas los parámetro de la imagen. Nos dice que removí y listo.

Adobe Photoshop

Presiona Ok (Aceptar) y listo.

Continuemos pues con el Color de Fondo. Vamos a Modify > Page Properties y seleccionamos el color de fondo que hemos venido usando, escribiendo directamente el código para este color que es ECEDF7 o muestreando con el selector de color Selector de Color.

De paso corregimos el Margen Superior (Top Margin) a un Valor = 0.

La imagen muestra las áreas donde se realizaron los cambios encuadradas de rojo.

Adobe Photoshop

Ahora hay que alinear nuestra pagina al centro, lo cual es muy simple. Nos pasamos a la Vista Layout presionando su respectivo botón Vista Layout.

Hacemos clic sobre la cresta principal del diseño Layout Table para luego usar la Inspector de Propiedades (Window > Properties) Activamos el Tag Editor (o selector de etiquetas) Luego clic sobre el signo + Luego sobre el Menú Tag y seleccionamos Align Finalmente escribimos Center sobre el renglón emergente terminando con un Enter en tu teclado.

Este es el resultado.

Adobe Photoshop

Adobe Photoshop

Es hora de eliminar las imágenes del mismo color que el fondo de nuestra página. En algunos caso puede cambiar el tamaño de las cedas pero eso realmente poco afecta. Haz clic sobre las imágenes y presiona Supr (delete). Quitemos las imágenes de cada ventana.

Estas últimas sustitúyelas por color de fondo de celda, en este caso C3C7E5 que es el mismo color de las imagenes que las cubrían.

Toma la celda por cualquiera de los extremos y luego Sobre el Inspector de Propiedades cambia el Bg (background).

Adobe Photoshop

Adobe Photoshop

Y bueno ya solo nos falta la ultima entrega en version DreamWeaver, hasta la próxima.

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

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

↑ Tutorial

  • [»]

    [»]

    2006-06-07 08:36

    excelentes tutos realmente ayudan faciles de seguir felicidadesM
  • rickblanc02

    rickblanc02

    2006-06-07 10:01

    Yo ulilize capas enzimas de las celdas, me costo para alinearla pero creo q es mejorM
  • krosty64

    krosty64

    2006-06-07 19:52

    Yo utilizo tablas de diseño para colocar la pag y lograr menor peso y mayor rapidez al cargarse, por lo demas todo bien saludosM
  • kenshi

    kenshi

    2006-06-15 16:14

    Gracias por estos tutos, pero porfa manden la version para dreamweaver.M
  • Hilda Gutz

    Hilda Gutz

    2006-09-18 14:38

    Este tipo de tutorial es una herrramienta valiosa para estudiantes de Computación, en mi caso estoy en mi seminario de graduacion y tengo que hacer mi propio diseño de mi sitio web. Gracias por el material! Saludos. Hilda Gutierrez M
  • miarle

    miarle

    2006-10-30 15:10

    Estoy aprendiendo mucho. Gracias, muchas graciasM
  • danielEx_666

    danielEx_666

    2007-01-03 00:36

    esperamos la proxima publicacion en dremweaver gracias xD M
  • loquitonito

    loquitonito

    2007-03-30 01:17

    si esta buenazoooooo pero si tuvieran dreamweaver sus tutoriales seria mostro,felicionesM

↑ Tutorial