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

Tutorial Photoshop

 

Tutorial por Solo Photoshop

Solo Photoshop

DISEÑO Y MAQUETADO DE PLANTILLAS WEB 6

Con Adobe Photoshop y Macromedia Dreamweaver

Continuamos con la sexta entrega junto a Paquo360 que nos enseña como crear una plantilla usando Adobe Photoshop, y luego maquetarla con 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. !!

Una vez hechos los cortes, optimizaremos las imágenes que lo requieran, pues las de un solo color regularmente se sustituyen por una celda con fondo del mismo color de la imagen, a estas no las trates si no lo deseas, pues las eliminaremos.

Image Ready nombra automáticamente las imágenes de tu diseño una vez cortadas, sin embargo es preferible que seas tu quien las nombre para poder identificarlas fácilmente en el Editor HTML. En este caso Ejemplificaremos con la imagen de nuestro Logo "Web Muestra" Toma Slice Select para, como su nombre lo dice, seleccionar este Corte, el #03 de la imagen. Nos indica también que tiene un peso de 5.767K en formato Gif. Selecciona Tipo Imagen y hemos escogido el Nombre logo.

Adobe Photoshop

En el caso de que gustes agregar un Hipervínculo a la imagen hazlo desde URL: y el tipo de ventana desde Target, en este caso _blank para una Nueva Ventana. Finalmente BG se usa para conjugar tu imagen con algún color de fondo.

En este tutorial sólo usaremos el menú Slice para nombrar nuestras imágenes, el resto lo dejaremos en blanco o como este.

Mucho facilita el trabajo reconocer las imágenes por el nombre que les diste, por eso recomendamos dar nombres muy claros e identificables.

Una vez que hayas nombrado las imágenes colócate sobre las pestañas Optimize, tanto de Pantalla como Paleta. Utiliza estos valores en todas las imágenes importantes; tan solo 32 colores debido a que nuestro diseño, que tal vez no te diste cuenta, fue preparado con una paleta de colores lista para la Web, lo que nos facilita una alta calidad con pocos colores, podrías usar incluso 16 colores y no sería tan notorio, sin embargo a mi juicio 32 es exacto. Manejamos el formato Gíf por ser un diseño creado con computadora y con poca coloración, sin embargo con un Lossy de 0 para mantener la calidad visual.

Adobe Photoshop

Un método Selectivo de color y con Diffusion como método de distribución. El Dither de 100%, que usualmente no es muy usado, a nosotros nos agrada pues preferimos unos cuantos Bytes de sobrepeso que una imagen con marcadas bandas de color y más con esta que es la imagen principal de nuestro diseño.

Presionando Adobe Photoshop en la Barra de Herramientas puedes previsualizar tu Página en el explorador.

Y además de la previsualización nos proporciona los siguientes datos.

Formato de Imágenes: GIF
Dimensiones: 780w x 750h
Tamaño: 20.85K
Imagenes: 35
Valores: Selective, 100% Diffusion Dither, Non-Interlaced, 0% Web Snap
Codigo Fuente: (HTML)

Adobe Photoshop

Finalmente hay que guardar la plantilla, pero ahora como HTML e imágenes.

File > Save Optimzed As

Adobe Photoshop

Hasta aquí llega "Image Ready" ahora son los editores HTML Front Page y/o Dreamweaver los encargados de la finalización del tutorial, a partir de las proximas entregas.

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

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

↑ Tutorial

  • bultaco

    bultaco

    2006-05-07 02:45

    Muchas gracias por esta gran entrega. Espero impaciente las próximas para seguir aprendiendo.M
  • krlitos5872

    krlitos5872

    2006-05-07 07:36

    muy bueno todo esto y esperamos la proxima entrega en dreamweaverM
  • manyevolution

    manyevolution

    2006-05-09 12:15

    Que ondas con dreamweaver.. como hago pa poner eso en el dreamweaverM
  • carlatovar

    carlatovar

    2006-05-12 14:53

    Gracias por este tutorial, aunque esta última entrega estaba un poco confusa. Espero con ansias la proxima entrega!! M
  • maomas

    maomas

    2006-05-17 10:34

    muy kopado loko ! espero con ansias la proxima entrega ...M
  • Musico_440

    Musico_440

    2006-05-31 11:41

    BIEN VIEJO ESTA RENOTA ESTOS TUTORIALES HE ! PERO NO LOS DEJE DE ENVIAR !M
  • splaing

    splaing

    2008-10-20 13:47

    muy buen tutorial voy a ver si lo utiliso en otr web que voy a hacerM

↑ Tutorial