Contenido del curso

Photoshop para diseño web: 3 ejemplos prácticos

Comenzamos con una introducción rápida al mundo del diseño web y

sus diferencias fundamentales con el diseño para papel, así como

una serie de trucos y recursos que te ayudarán a comenzar a trabajar.

A continuación seguiremos con un repaso a los conceptos fundamentales

del trabajo con Adobe Photoshop que necesitas para realizar tus diseños de

la forma más rápida y efectiva.

Después de estos capítulos introductorios, viene la práctica:

diseñaremos desde cero la apariencia de la home, utilizando

toda nuestra creatividad. Una vez realizada esta parte del trabajo,

veremos cómo ser consecuentes en las páginas interiores y en el

resto de páginas del sitio.

Veremos el diseño de tablas HTML, de las interacciones del usuario,

de los formularios y hasta de la página de Error 404, siempre teniendo

en cuenta que nuestro trabajo está pensado para conjugar nuestra

creatividad con la usabilidad final y con el trabajo posterior que

tendrán que hacer maquetadores y programadores con él es una

de las herramientas más potentes que existen en el mercado para

el dibujo vectorial, y a lo largo de este curso vamos a encontrar y

aprender lo esencial para poder manejarlo y sacarle partido

desde el primer momento.

 

Adobe Photoshop para diseño web I

Primer ejemplo: web corporativa de un restaurante

 

Índice del curso

INTRODUCCIÓN

Introducción al diseño web

Google es tu mejor amigo (o casi)

Recursos de utilidad

Descripción del ejercicio: web corporativa

 

CONOCIMIENTOS NECESARIOS (I)

Creación de archivos

Reglas y Guías, unidades de medida

Capas y carpetas

Selección de colores

Aplicación de colores

Selecciones

Desplazamiento y duplicado de contenidos

Carga y Combinación de selecciones

Duplicación de capas y carpetas

Copiado de contenidos

 

CONOCIMIENTOS NECESARIOS (II)

Formas vectoriales

Formas no vectoriales

Personalización

Transformación

Uso de transparencia de capa

Máscaras de capa

Degradados

Efectos de capa

Herramienta Texto

 

CONOCIMIENTOS NECESARIOS (III)

Capturas de pantallas

Varita mágica y la Máscara rápida

Efecto de capa Trazo

Exportación a web

 

MENÚS

Crear la plantilla de navegador

Planificar los contenedores generales

Crear nuestro menú principal

Estados de botón

Adornar el fondo de la página

Crear el contenido de la home

Resumen del capítulo

 

DISEÑO EN LOS INTERIORES

Crear el segundo nivel de la web

 

INTERIORES

Crear los interiores de carta I

Crear los interiores de carta II

 

TABLAS

Diseñar tablas HTML

Dar formato a una tabla HTML

Crear una capa interactiva

Simular un mapa de Google

 

FORMULARIOS

Diseño de formularios

Comportamientos del formulario

 

ÚLTIMOS RETOQUES Y EXPORTACIÓN

Diseño de una página de Error 404

Preparación de los archivos

¿Qué hemos aprendido?