Introducción al ejercicio

Creación de un documento nuevo, tamaños, resoluciones y zoom.

Píxeles o centímetros, guías y su uso.

Las capas y las carpetas son las herramientas fundamentales para tener nuestro trabajo organizado en todo momento.

Para trabajar con el color, hay que tener claro cómo seleccionar o cambiar un color de primer o de segundo plano.

Cómo aplicar colores con el Bote de pintura o la herramienta Pincel.

Uso efectivo de la herramienta de Selección y sus opciones, incluyendo la opción Suavizado.

Si sabemos mover y duplicar nuestros elementos, trabajaremos mucho más rápidamente.

Veamos en qué consiste exactamente la capacidad de trabajar no destructivamente con Adobe Photoshop. Capas, selecciones, suma de selecciones. Bloqueo de transparencias.

La creación de capas a través de copias es uno de los secretos del trabajo efectivo con Adobe Photoshop.

Para conseguir una continuidad en el diseño el uso de la copia de elementos es fundamental, pero hay que saber cómo hacerlo correctamente.

Uso de las herramientas de creación vectoriales.

Dibujo de formas no vectoriales.

Personalización de presets de Adobe Photoshop.

Cambio de la forma de objetos vectoriales o de píxeles (escala)

Opacidad de capa, transparencia y su uso.

La máscara de capa nos permite mostrar las partes de una capa que nos interesen.

Creación de degradados y sus tipos y usos en Adobe Photoshop

El efecto que más vamos a usar es la sombra paralela, que nos ayuda a mejorar la legibilidad.

Cómo crear textos y cuáles son las maneras de hacerlo más legible. Características de la paleta Texto.

En este primer paso vamos a crear una plantilla base para usarla en nuestros diseños web.

Planificaremos el espacio general para el contenido de la web, creando el contendor general, y posicionaremos el logotipo

A continuación aprenderemos a diseñar el menú principal de nuestra web.

Vamos a diseñar los estados de los botones de la barra de menú, esto es: los estados de reposo, rollover y pulsado

Aprenderemos a crear elementos ornamentales para usar en el fondo de la página, descargando para ello pinceles y motivos de internet.

Vamos a crear el contenido de la página principal del site, buscando imágenes de carácter e internet. También aprenderemos a formatear texto con un planteamiento HTML. Con ello nuestra home queda terminada.

Resumen del tema y pequeña sinopsis de los conocimientos que hemos adquirido en el ejercicio práctico.

Este segundo ejercicio contará con una mayor dificultad: se trata de una página corporativa algo más compleja y de formatos puramente HTML cuya cantidad de texto nos obliga a generar un archivo vertical. Se trata de la web corporativa de la inmobiliaria A

Si no sabes de dónde conseguir un check box, nosotros te lo contamos.

Con la herramienta Varita mágica podemos realizar selecciones de forma rápida y, combinada con la Máscara rápida, seremos capaces de ser aún más efectivos.

El estilo de capa Trazo nos crea un marco alrededor de nuestra capa: posición, modos, tamaño, etc.

Hemos terminado y ahora queremos exportar una copia del diseño para nuestro cliente o para el maquetador (Guardar para web y dispositivos).

Continuamos con el diseño de la web, creando un subnivel de la carta (los entrantes). Para ello modificaremos ligeramente el estilo de diseño de la imágenes, lo cual nos permitirá integrar el submenú.

Creamos el diseño de otro apartado de la sección Carta, en la que necesitaremos crear dos columnas.

En esta sección aprenderemos a diseñar tablas HTML.

Continuaremos con el diseño de tablas aplicando formato para que la legibilidad sea óptima.

Aquí aprenderemos a simular el diseño de los elementos interactivos, como links que muestran capas, incluyendo la captura de un cursor tipo mano.

En esta sección vamos a aprender a simular elementos interactivos, como un mapa de Google, que los programadores insertarán posteriormente en el código.

Los formularios son páginas muy comunes que se utilizan para interactuar con el usuario, así éste puede rellenar unos campos y enviar así sus consultas o peticiones. Aquí veremos cómo crear una.

En los detalles está la diferencia. Por eso, tenemos que diseñar incluso los comportamientos del formulario en el caso, por ejemplo, de que alguien quiera enviarlo sin tener todos los campos rellenados.

Hay algunos elementos del diseño que necesitan ser creados aunque no nos los soliciten, como las páginas de error del servidor, aprenderemos a diseñar una página estilosa de error 404.

En este caso y para finalizar el proyecto, mostraremos cuáles son los archivos que se van a entregar a nuestro cliente para validar y el entregable final que el programador necesita.

Resumen del tema y pequeña sinopsis de los conocimientos que hemos adquirido en el ejercicio práctico

Los filtros son efectos de Photoshop que se han convertido en una librería de efectos que le dan encanto a nuestro diseño final. En este proyecto usaremos el filtro Destello.

Con el efecto Sombra interior daremos una sensación de recorte sobre las capas inferiores.

En este ejercicio vamos a diseñar una web bastante compleja: la de una agencia inmobiliaria que expone su catálogo de inmuebles por internet. Unas casas realmente especiales. Afortunadamente, en este caso, la empresa que lo va a desarrollar nos ha proporcionado un wireframe o prototipo para saber qué elementos debe contener y cómo situarlos.

En este apartado diseñaremos la cabecera de la página, posicionaremos el logotipo y aplicaremos los colores corporativos dándole un diseño bastante efectista.

A continuación diseñaremos la barra de menú principal, compuesta por pestañas, y sus estados resaltado y pulsado.

Para completar la barra de menú, diseñaremos un buscador.

Diseñaremos el menú secundario, localizando aquellos elementos que nos resulten necesarios, como las banderas de los idiomas.

A continuación, vamos a conocer qué es exactamente un visor de imágenes dinámico no realizado en Flash y veremos algunos ejemplos para diseñar el nuestro.

En este paso vamos a crear la zona central de la galera, donde aparece la imagen destacada y la información correspondiente en texto HTML.

Creamos las dos secciones laterales de la galería para pasar al siguiente elemento y recuperar el anterior.

¿Qué son los breadcrumbs, migas de pan o hilo de Ariadna? Veamos algunos ejemplos.

En este apartado vamos a diseñar un modelo sencillo de migas de pan para nuestra web que incluirá un separador gráfico.

Diseñamos un mapa para la búsqueda por provincias.

En este caso, vamos a diseñar un formulario de búsqueda rápida, creando un estilo de campos avanzado.

Diseñamos el primer destacado de texto, con un botón combinado y una imagen central.

A continuación terminaremos de rellenar la zona central replicando contenido y crearemos el icono-botón de suscripción al servicio RSS, buscando recursos en internet.

Diseñamos el comportamiento que tendrán los contenidos centrales al pasar el cursor sobre ellos.

Creamos un pie de página para equilibrar el diseño y formalizar un cierre visual.

Diseñamos el banner que proporciona acceso a la página del buscador avanzado, enlace necesario según el wireframe entregado por el cliente.

Creamos los tooltips de información para el campo de búsqueda y el mapa interactivo de la zona izquierda.

Finalmente exportamos todos aquellos archivos necesarios que el cliente necesitará para aprobar este diseño.

Resumen del tema y pequeña sinopsis de los conocimientos que hemos adquirido en el ejercicio práctico.

Partiendo del formulario de búsqueda que hemos guardado en el paso anterior, diseñaremos, reutilizando los máximos elementos posibles el formulario de búsqueda

Continuamos capturando elementos para el formulario y duplicando aquellos que nos hacen falta.

Finalizamos nuestro formulario con aquellos elementos que son necesarios como un cierre, una casilla para guardar el filtro y un botón de acción.

Adaptamos los elementos del contenido central, agrandando el lienzo del documento, para generar espacio y poder incluir tanto la paginación como el texto con los criterios de búsqueda.

Comenzamos a trabajar sobre la banda lateral derecha, creando el formulario Enviar contenido. Para ello duplicaremos contenido existente. Para adornarlo, buscaremos una imagen de carácter en internet.

Diseñamos uno de los banners del pie lateral, siguiendo la línea ya marcada en la home.

Continuamos con el resto de banners, replicando contenidos y cambiando los textos.

Finalizamos la sección, exportando el archivo como JPG para su validación.

Resumen del tema y pequeña sinopsis de los conocimientos que hemos adquirido en el ejercicio práctico.

Realizaremos un repaso sobre el material que necesitamos para llevar a cabo este ejercicio tanto de imágenes como de tipografías.

Vamos a crear un modelo distinto de archivo a los anteriores y diseñar el fondo sobre el que aplicaremos nuestro diseño así como las barras de navegación principal.

Diseñamos el pie de página y la barra secundaria.

Colocaremos una serie de imágenes en una retícula, utilizando principalmente técnicas de mascara de capa.

Rematamos la zona central, organizando y sobrescribiendo a las imágenes los textos de cada sección.

Aprenderemos a mostrar el comportamiento de la pantalla cuando el usuario espera la carga de los contenidos.

Diseñaremos el comportamiento de los elementos centrales cuando realizamos el roll-over sobre un contenido.

Crearemos un nivel interior para conocer cómo aplicar las normas de diseño creadas en la home, creando un cuerpo de texto y las imágenes que nos hacen falta para el editorial.

Trasladaremos el efecto de precarga creado para la home a estos contenidos interiores.

Aprenderemos a diseñar los efectos de roll-over de la barra de menú cuando nos encontramos en cualquiera de los interiores.

Para los programadores Flash deberemos exportar todas y cada una de las secciones diseñadas con sus comportamientos.

Resumen del tema y pequeña sinopsis de los conocimientos que hemos adquirido en el ejercicio práctico.