Maquetación Web con Dreamweaver y Photoshop (2/2)

Maquetación Web con Dreamweaver y Photoshop (2/2)

1. Maquetacionweb con
Photoshop
Marzo 2018
Maquetacionweb con
Photoshop
Marzo 2018
JoseA. García [email protected]

2. Lo básico

3. Lo básico

4. Maquetación con photoshop
1.Dibujar una imagen.
2.Trazar líneas guías
3.Cortar con las líneas guías
4.Salvar optimizado
5.Nuevo documento de Dreamweaver
6.Insertar tabla contenedor 1x1
7.Insertar tablas dentro de otras tablas
8.Insertar imágenes dentro de tabla

5. Maquetación con photoshop
1.Creamos o descargamos nuestro diseño PSD.

6. Recordatorio
2.Trazar líneas guías

7. Recordatorio
3.Dividimos el diseño en sectores
•OJO: no deben quedar “sectores” o “Slices” grises, si
aparecen significa que el cortado esta mal hecho.

8. Recordatorio
4.Guardar optimizado para web

9. Recordatorio
4.Guardar las imágenes en el formato adecuado.

10. Recordatorio
5.Abrir en resultado en Dreamweaver para
corregir el htmlde Photoshop.
Crear sitio nuevo
Abrir documento hecho en Photoshop
Crear documento nuevo (html)

11. Recordatorio
5.Insertar tablas contenedoras (si procede)
•Los anchos de las tablas deberán ir acorde al ancho del
diseño a insertar
•(OJO) Fijar ancho (herramienta de PX)

12. Recordatorio
6.Insertar tablas dentro de otras tablas según lo
necesiten
•Repetir el proceso de fijar el ancho en cada tabla
insertada
•Recordar que las tablas externas nos sirven de
contenedores de las tablas internas.

13. Recordatorio
7.Convertir imágenes dentro en background.

14. Recordatorio
El trabajo final se debe de ver como el diseño de
photoshop.