FGFGFGFHFBFB

.
Diseo de
Interfaces
Multimedia
DISEO DE INTERFACES MULTIMEDIA
Indce
Presentacin
Red de contenidos
Unidad de Aprendizaje 1
CONCEPTO FUNDAMENTALES DEL DISEO WEB

1.1 Tema 1 : Conceptos bsicos del diseo web
1.1.1 Que es una Pagina Web y su diferecia con un sitio Web
1.1.2 Diseo de Interfaces Web orientada a aplicaciones de
escritorios y juegos web
1.1.3 Diseo de Interfaces Web segn dispositivos (mviles y tablets)
1.1.4 Uso del lenguaje HTML
1.1.5 Dominio y Tipos de Dominio
1.1.6 Servicio de Hosting y su uso
07
08
13
16
18
19
1.2 Tema 2: Organizacin de un Proyecto Web

1.2.1 Diseo de Mockup y Prototipos
1.2.1.1 Emuladores Web
1.2.2 Fundamentos del Diseo Web
1.2.2.1 Navegabilidad
1.2.2.2 Funcionalidad
1.2.2.3 Usabilidad
1.2.3 Cronograma de Proyecto Web
1.2.4 Presupuesto Web
1.2.5 Brief de Proyecto
20
22
25
25
25
25
26
28
29
DISEO DE INTERFACES
2.1 Tema 3: Tendencias y Elementos en Diseo Web
2.1.1
2.1.2
2.1.3
2.1.4
Tipografias para Web

Texturas y Motivos
Manejo de Imgenes
Iconografias
33
25
36
39
2.2 Tema 4: Diseo de Interfaces usando Adobe Photoshop

2.2.1
2.2.2
2.2.3
2.2.4
2.2.5
2.2.6
2.2.7
Tamaos de pantallas y elementos dentro del diseo

Creacin de estructura usando capas
Manejo de motivos y efectos en el diseo
Edicin de contenidos (Uso de tipografas adecuadas)
Diseo de una interfaz clsica
Diseo de Interfaz One page
Diseo de Interfaz full sreen
40
42
43
46
47
54
57
2.3 Tema 5 : Diseo de Interfaces usando Adobe Illustrator

2.3.1
2.3.2
2.3.3
2.3.4
2.3.5
Configuracin de mesas de trabajo para interfaces

Creacin de Iconos con vectores
Diseo de contenedores y backgrounds
Armado de una interfaz
Exportar como psd y html
CARRERA DE DISEO Y PUBLICIDAD
57
58
61
63
65
CIBERTEC
DISEO DE CONTENIDO INTERACTIVO

3.1. Tema 6: Adobe Flash orientado a recursos Web
3.1.1. Entorno de Adobe Flash para diseo de interfaces web
3.1.1.1. Configuracin de escenario
3.1.1.2. Manejo de objetos en bibliotecas
3.1.1.3. Lnea de tiempo, capas
3.1.1.4. Barra de herramientas
3.1.2. Diseo de banners y sliders
3.1.2.1. Manejo de imgenes
3.1.2.2 .Uso de smbolos (grficos y clip de pelcula)
3.1.2.3. Tipos de interpolaciones
3.1.3. Diseo de mens interactivos con Action script 3.0
3.1.3.1. Uso de smbolos tipo botn
3.1.3.2. Diseo de botones
3.1.3.3. Interaccin y navegabilidad de botones con Action script 3.0
3.1.3.4. Manejo de audio con bibliotecas
3.1.4. Animaciones multimedia
3.1.4.1. Efectos de mascaras
3.1.4.2. Uso de filtros
3.1.5. Diseo de una historia interactiva
3.1.6. Diseo de una interfaz multimedia
3.1.7. Publicacin de archivo en html
71
71
71
72
72
74
74
74
75
77
77
77
78
80
80
80
81
82
84
86
3.2. Tema 7: Adobe Edge animate para la interaccion de recursos

3.2.1.
3.2.2.
3.2.3.
3.2.3.1.
3.2.3.2.
3.2.3.3.
3.2.3.4.
3.2.4.
3.2.4.1.
3.2.4.2.
3.2.4.3.
3.2.4.4.
3.2.4.5.
3.2.5.
3.2.5.1.
Que es Adobe Edge Animate y su Interfaz

Estructura de archivos Adobe Edge Animate (html5 y Css3)
Diseo de Interfaz
Herramientas de dibujo
Creacin de textos
Importar contenidos
Uso de filtros
Creacin de animaciones
Configuracin de fotogramas claves
Transformacin de objetos
Tipos de transiciones
Efectos (aceleracin y Toggle Pin)
Configuracin de animacin
Animacin dentro de un diseo HTML
Publicacin para web
87
89
89
89
92
94
95
96
96
97
97
99
100
101
106
CIBERTEC
Presentacin
El curso de Diseo de Interfaces multimedia, tiene como objetivo proporcionar
conceptos bsicos que se necesitan conocer para ingresar al mundo del diseo web.
Algunos conceptos bsicos que veremos en el manual es por ejemplo el cdigo
HTML, identificando sus funciones e importancia dentro del diseo web; es necesario
tambin por ejemplo, temas como servicios de hosting, dominos, mapa de sitio,
presupuesto de proyecto web, para que nuestros estudiantes no solo vean el tema de
diseo si no que es lo que hay detrs de ese diseo creado.
Como dice el nombre del curso Diseo de Interfaces Multimedia, en este manual
veremos tambin el diseo de nuestras interfaces, aplicando dentro de esta creacin
principios bsicos como navegabilidad, funcionalidad y usabilidad, generando as
productos que sern tiles en nuestros proyectos.Para este cometido utilizaremos
programas como Adobe Photoshop Adobe Illustrator, creando recursos e interfaces
completas aprovechando las caracteristicas de estos programas.
Por ultimo veremos como podemos dar interactividad a nuestro sitio web, ayudados
por programas como Adobe Flash y Adobe Edge Animated, creando interfaces y
recursos interactivos en donde el usuario final pueda apreciar diseos dinmicos.
Con todos estos recursos el objetivo es que nuestros estudiantes puedan tener una
idea clara de todos los aspectos involucrados en el desarrollo web y que tengan la
capacidad de poder sacar adelante su primer proyecto web.
CIBERTEC
Red de contenidos
Unidad
1
Conceptos
Bsicos del
Diseo
Web
Unidad
2
Organizacin de un
Proyecto
Web
Tendencias y
Elementos
en Diseo
Web
Diseo de
Interfaces
usando
Adobe
Photoshop
Unidad
3
Diseo de
Interfa-ces
usando
Adobe
Illustrator
Adobe
Flash
orientado a
recursos
web
Adobe
Edge
Animate
para la
interaccin
de recursos
Web
CIBERTEC
UNIDAD
1
CONCEPTOS FUNDAMENTALES
DEL DISEO WEB
LOGRO DE LA UNIDAD DE APRENDIZAJE
Al trmino de la unidad, el alumno define y conoce los conceptos bsicos de
web, tiene los conocimientos necesarios para redactar un brief del cliente, crear
un concepto para una web y disear la estructura para el sitio web.
TEMARIO
1.1 Tema 1 : Conceptos bsicos del diseo web
1.1.1 Que es una Pgina Web y su diferencia con un sitio Web
1.1.2 Diseo de Interfaces Web orientada a aplicaciones de
escritorios y juegos web
1.1.3 Diseo de Interfaces Web segn dispositivos (mviles y tablets)
1.1.4 Uso del lenguaje HTML
1.1.5 Dominio y Tipos de Dominio
1.1.6 Servicio de Hosting y su uso
1.2 Tema 2: Organizacin de un Proyecto Web

1.2.1 Diseo de Mockup y Prototipos
1.2.1.1 Emuladores Web
1.2.2 Fundamentos del Diseo Web
1.2.2.1 Navegabilidad
1.2.2.2 Funcionalidad
1.2.2.3 Usabilidad
1.2.3 Cronograma de Proyecto Web
1.2.4 Presupuesto Web
1.2.5 Brief de Proyecto
ACTIVIDADES PROPUESTAS
Identificar las caractersticas principales que intervienen en el diseo
web.
Crear un brief de proyecto web donde intervengan los temas vistos para
la organizacin de un proyecto web.
CIBERTEC
1.1. CONCEPTOS BASICOS DEL DISEO WEB

1.1.1. Qu es una pgina Web y su diferencia con un sitio web?
Una pgina web es un documento creado en cdigo html (Hyper Text Markup
Language o Lenguaje de Marcado de Hipertexto), en la cual intervienen elementos
como imgenes, videos, texto, audios. Dicho documento tambin pueden contener
enlaces llamados hipervnculos los cuales nos pueden direccionar a otras pginas
web.
Para visualizar una pgina web se debe cumplir dos condiciones tener instalado en
nuestro dispositivo cualquier browser como chrome, internet explorer, Firefox, safari
entre otros. As como contar de que esta pgina web este alojada en un servicios de
hosting o servidor web.
Pagina HTML
Servidor Web o
Hosting
Browser Web
Figura 1.- Requisitos de visualizacin de una pgina web.
Pueden existir dos grandes clases de pginas web, dinmicas (el usuario final puede
contribuir en la creacin de su contenido) y estticas (el usuario es solo un espectador
de un contenido preestablecido). En la actualidad las pagina web son orientadas a ser
dinmicas lo que se conoce como web 2.0 , donde el usuario tiene herramientas como
blogs , chats , redes sociales con las que puede tener mas interaccin con la pgina
web.
La mayora de veces nos referimos de una manera equivocada a un sitio web,
pensando que pagina web o sito web son sinnimos. Sin embargo ,existe la diferencia
de conceptos entre una pgina web y un sitio web .La pgina web es la unidad de
cualquier sitio web, mientras este ltimo es el conjunto de pginas web organizadas de
manera jerrquica, teniendo como pagina web principal la pgina index o pgina de
inicio. Si viramos esta diferencia de manera metafrica se podra decir que es como
si el sitio web es un libro y las hojas por las que este estn conformados vendran a
ser las pginas web.
CIBERTEC
Pgina HTML
Sitio Web
Figura 2.- Estructura de una Pgina HTML y un Sitio Web

Fuente: http://www.learnthenet.com/spanish/web/050www.htm
1.1.2.
Diseo de Interfaces Web orientada a aplicaciones de escritorios y

juegos
La interfaz web es la cara de presentacin de nuestras pginas web en la cual

nuestros usuarios o clientes podrn interactuar y conocer lo que queremos transmitir
con nuestro sitio, por este motivo debemos tener en cuenta su diseo y la
organizacin de sus elementos.
Es muy importante pensar en el usuario final cuando comenzamos a disear nuestra
interfaz, con el fin de que sienta que logro conseguir la informacin que estaba
buscando accediendo a nuestro sitio y que su visita fue de su utilidad.
Segn pruebas realizadas por Jakob Nielse (ingeniero de interfaces estadounidense),
la organizacin de nuestros elementos segn su importancia tiene un espacio pre
establecido dentro de la visualizacin de los visitantes del sitio, el siguiente grfico nos
explica dichas pruebas.
Figura 3.- Las imgenes muestran lo ms visto en los Sitios Web a partir de las investigaciones de J. Nielsen; los
colores rojos y amarillos indican lo ms visto; azul y gris, lo menos visto.
Fuente: http://www.nngroup.com/
El desarrollo de una interfaz es parte de un proceso multidisciplinario en donde

intervienen las siguientes acciones:
CIBERTEC
Figura 4.- Metodologa del Proceso de Diseo de Interfaces

Fuente:
http://es.slideshare.net/Interlat/diseando-interfaces-web-abordando-proyectosdesde-la-estrategia-hasta-la-forma
Para disear una interfaz web de escritorio, as como para cualquier otro diseo de
interfaz es necesario saber cules son las necesidades y demandas de nuestro
cliente, saber estas caractersticas ser lo que nos diferencie en crear un diseo
personalizado y a medida que uno utilizando plantillas.
Otorgando a nuestro diseo:
Versatilidad, debido a que empezaremos a disear desde cero y ,
Exclusividad por ser un diseo personalizado lo cual aporta mayor prestigio a la
marca.1
Figura 5 Ejemplo de interfaz web para desktop

Fuente: http://ricar.es/diseno-web-medida/
CIBERTEC
10
Aqu Presentamos algunos ejemplos de interfaces web para desktop originales:
http://www.uxabilidad.com/recursos/40-disenos-de-interfaces-para-portafolio.html
http://www.uxabilidad.com/recursos/40-disenos-de-interfaces-para-portafolio.html
Los elementos a tomar en cuenta cuando diseamos nuestra interfaz web para
desktop son los siguientes:
Area de
busquedas,
CIBERTEC
Iconos
Redes
Sociales
11
Area de
navegacin
principal
Contenidos
adicionales
como
noticias,
blogs
Area de
contenido
principal
Area de
navegacin
secundaria o
pie de pgina
Para disear una interfaz web relacionada a los juegos web, debemos de analizar,
planificar, y tener en cuenta el desarrollo de la funcionalidad del juego as como el
entorno a desarrollarse.
Dentro del diseo de la interfaz intervienen dos aspectos: aspecto funcional y aspecto
esttico.
CIBERTEC
12
Punto de Atencin: Determinar cual

es el objeto ms importante de la
composicin que llame la atencin del
jugador.
Movimiento del Ojo : Un buen

diseo ayuda al jugador a descubrir
rpidamente cual es este punto.
Bases para
el Diseo de
Menu
Principal de
un
VideoJuego
Colores Balance y Peso :
Combinacin de colores, animaciones,

tamao y forma de los distintos elementos
que aparecen en pantalla.
En este ejemplo se puede ver a lado izquierdo un diseo de men principal que no
cumple las condiciones vistas lneas arriba y al lado derecho un diseo que cumple la
consideraciones acerca de determinar el punto de atencin indicando la opcin
principal del juego ayudando al jugador intuir de manera inmediata de que trata el
juego y cul es su dinmica.
Otro punto importante que hay que tomar en cuenta al momento de disear una
interfaz de videojuego son los entornos donde estos se desarrollaran.
CIBERTEC
Circulo
Cuadrado
Representa el area que

abarca el juego asi
como el movimiento de
rotacin que produce.
Figura que representa

estabilidad y de
permanencia en el
desarrollo del juego.
13
Triangulo
Figura estable con 3
puntos de apoyo ,
primando el sentido de
verticalidad en el
desarrollo del juego.
Tipos de Entornos de VideoJuegos
1.1.3.
Diseo de Interfaces Web segn dispositivos mviles (Tablets y

Smartphone)
En la actualidad el uso de dispositivos mviles como tablets y smartphone para la

visualizacin de sitios o aplicaciones web es cada vez ms frecuente. Es por este
motivo que cuando pensamos en disear interfaces web debemos de tomar en
consideracin este tema, para que nuestro diseo sea funcional y adaptable a
cualquier tipo de medio donde se visualice generando tambin un mayor impacto hacia
los internautas.
CIBERTEC
14
Figura 6 Estadsticas de Uso de dispositivos mviles en el mundo

Fuente: comScore
Una de las consideraciones importantes es maquetar el diseo de nuestra web en

funcin al menos de las 3 pantallas principales de dispositivos.
Figura 7 Ejemplo de Diseo adaptado a dispositivos mviles

Fuente: http://www.destacaimagen.com/diseno-y-maquetacion-web-smartphones-y-tablets/
Segn el ejemplo que visualizamos de izquierda a derecha tenemos el mismo diseo

sin perder sus caractersticas principales para dispositivos como Smartphone, Tablet y
CIBERTEC
15
desktop. Tengamos en cuenta para disear o maquetar de esta manera adaptativa

que por lo general la interfaz presentada para el diseo en el dispositivo Smartphone
es a una columna mejorando as el tema de navegabilidad.
Las resoluciones principales
monitores son las siguientes:
para disear en dispositivos como mviles, tablets y
Luego de tener estas consideraciones bsicas para el diseo o maquetado de

nuestras interfaces para los diversos dispositivos es necesario conocer que existen
plantillas y distintos software de diseo web que nos ayudan en como armar la parte
funcional de este diseo web responsivo o responsive design.
El responsive design es una serie de tcnicas web usando lenguaje html entre otros
lenguajes como media queries que nos ayudan a la visualizacin de nuestro diseo
web en los diversos tipos de dispositivos, adaptndolos a la medida correspondiente y
cumpliendo las consideraciones visuales que ya hemos visto.
Figura 8 Caractersticas del Diseo Responsive

Fuente: http://www.40defiebre.com/que-es/diseno-responsive/
CIBERTEC
1.1.4.
16
Uso del lenguaje HTML
El lenguaje HTML, siglas de HyperText Markup Language (lenguaje de marcas de

hipertexto) es el cdigo base detrs del diseo de toda interfaz web. Dicho cdigo se
maneja a travs de instrucciones llamadas etiquetas por medio de las cuales podemos
dar instrucciones de diseo, funcionalidad y estructura a una pgina web.
Las etiquetas HTML se componen de la siguiente manera:
Estas etiquetas pueden tener distintos atributos

funciones. En su estructura tienen un inicio y un cierre.
<Etiqueta>Contenido</etiqueta>.
En esta seccin se ubicar el contenido que

ser afectado por la instruccin de dicha
etiqueta.
Si nosotros hacemos el ejercicio de dar clic derecho a cualquier pgina web y

elegimos la opcin de ver cdigo fuente podramos ver cmo se desarrolla el diseo y
estructura de dicha pagina en cdigo html.
Dentro de una estructura bsica tenemos las siguientes etiquetas HTML:
CIBERTEC
17
Etiqueta principal que indica el

comienzo de una pgina web
<HTML>
<head>
<title> Titulo de la Pgina </title>
Contiene los elementos

pertenecientes al encabezado
de una pgina web. Ej: El titulo
de la pgina.
</head>
<body>
<p> Contenido de la Pgina </p>
</body>
Contiene los elementos

pertenecientes cuerpo o
contenido de la pgina como
textos, imgenes, videos, todo
lo concerniente al diseo de la
misma.Ej.un prrafo con texto.
</HTML>
Dentro de otras etiquetas HTML, tenemos por ejemplo, la etiqueta <Font></Font>, la

cual puede tener atributos como color, tamao, tipo de fuente.
<font color="#FF0000" face="Arial" size="+5">

texto
</font>
El resultado a esta etiqueta seria:
CIBERTEC
1.1.5.
18
Dominio y Tipos de Dominio
El dominio es el nombre propio o alias nico

de cada sitio web, es el identificador que
colocamos en la barra de direcciones y por el
cual nosotros accedemos a cada sitio o
pagina web. Dichos nombres de dominio
representan o traducen la direccin fsica (IP,
Internet Protocol) de donde est alojado cada
sitio web.
Un nombre de dominio debe de cumplir las siguientes reglas:
Todos los nombres de los dominios han de poseer un mnimo de 3 caracteres y un

mximo de 63 caracteres.
Las letras utilizadas son de la A a la Z siguiendo el cdigo ASCII, sin acentos,

diresis, espacios en blanco u otros signos, no se puede utilizar por ejemplo la
letra .
Se pueden utilizar los nmeros del 0 al 9.
nicamente se puede utilizar el signo guin medio "-" como medio separador de
palabras, un dominio no puede empezar ni terminar por el signo guin medio.
Cada dominio est conformado por dos elementos principales: nombre del dominio y
su extensin o terminacin.
www.google.com.pe
Nombre del
dominio
Extencin
de dominio
Existen distintos tipos de extensin de dominio, cada tipo representa a una actividad
o un tipo de organizacin distinta as como tambin la orientacin geogrfica de cada
sitio web. Estos dos tipos de extensiones se conocen como:
Extensiones geogrficas o territoriales, hacen referencia a la regin o pas a la que
pertenece cada pgina, generalmente estn
compuestas por 2 caracteres los cuales representan
el nombre del pas o regin, en la actualidad existe
un promedio de 243 extensiones de este tipo.
Por ejemplo:
.pe
.mx
.la
Per
Mexico
Latinoamrica
CIBERTEC
19
Extensiones genricas, hacen referencia al tipo de

actividad o informacin que ofrece el sitio web,
pueden conformarse por dos caracteres a ms.
Por ejemplo:
.com
.net
.org
.gov
.edu
1.1.6.
Comercio
Redes e Internet
Organizaciones
Entidades pblicas
Educacin
Servicios de Hosting y su uso
El hosting es el servicio por el cual nosotros podemos visualizar nuestro sitio web en
internet, es decir, es un espacio fsico dentro de un servidor web que nos proporciona
la salida de nuestro sitio en el ciberespacio.
Las caractersticas del servicio de hosting es que poseen un ancho de banda, que es
la transferencia o velocidad con la que se puede enviar cierta cantidad de datos o
informacin en internet, otra caracterstica es la capacidad de almacenamiento medida
en mgb o gigas que no viene a ser otra cosa que el espacio fsico que puede ocupar
nuestro sitio web dentro de un servidor web.
Los servicios de hosting pueden ser gratuitos as como de paga, variando segn esta
eleccin las caractersticas agregadas que podemos conseguir como pueden ser,
correos corporativos, mayor capacidad de almacenamiento y ancho de banda,
estadsticas sobre el ingreso de cibernautas a nuestro sitio web.
1
2
3
Figura 9 Funcionamiento del Servicio de Hosting
CIBERTEC
20
En la imagen podemos apreciar como es el proceso del funcionamiento del hosting

para que nuestra pgina se muestre en internet:
1. Diseamos nuestra pgina web usando el lenguaje html para agregar
recursos como imgenes, videos y audio.
2. Esta pgina o sitio web es almacenado a un servicio de hosting o
servidor web.
3. Desde este momento cualquier cibernauta por medio de nuestra
direccin web (nombre de dominio) puede solicitar una peticin al
servidor web por medio de la conexin a internet y as poder visualizar
nuestra pgina web.
1.2.
ORGANIZACIN DE UN PROYECTO WEB
1.2.1. Diseo de Mockup y Prototipos

El mockup es el primer diseo o
boceto de nuestra interfaz web en
donde tendremos en cuenta la
organizacin, proporcin y tamao
de los elementos que intervendrn
dentro de nuestro diseo, siendo el
primer prototipo con el que
podamos interactuar con nuestro
cliente para darle a conocer
nuestras propuestas de diseo y en
base a ella ajustar cambios y
mejoras para luego pasar a la etapa
del diseo digital de nuestra
interfaz.
El mockup tambin es conocido como wireframe, aparte de verificar el tema
organizacional del los elementos dentro de nuestro diseo tambin podemos usarlo de
gua para ver los temas relacionados a la funcionalidad de nuestra pgina web. La
utlizacin de esta estructura es importante en la medida que no contiene elementos
distractores como tipografas o grficos centrndonos solo en temas de organizacin
de elementos y las funciones que realizarn.
Si bien es cierto un mockup o boceto web se puede realizar mediante una hoja y un
lpiz, existe muchos recursos gratuitos con los que podemos realizar esta labor de
manera sencilla, uno de ellos es el programa balsamic mockup, el cual se puede
descargar en versiones para mac y Windows.
Para disear un prototipo con el programa balsamic mockup, luego de descargarlo e
instalarlo se deben seguir los siguientes pasos:
CIBERTEC
21
1. Inicializar el programa y reconocer las herramientas del mismo
En la parte superior podemos ver los elementos que tenemos

disponible para realizar nuestro boceto, se pueden visualizar todos
los elementos asi como segn su funcin o escribiendo el nombre
especifico de cada elemento en la casilla quick add
2. Para crear nuestro boceto es recomendable que utilicemos como base el

elemento browser window. Podemos seleccionarlo y llevarlo al rea de
diseo.
Cuando utilizamos
cualquier recurso en
el rea de diseo
aparecer tambin
un recuadro con las
propiedades
de
dicho
elemento
donde
podremos
configurar
por
ejemplo el tamao
que tendr.
3. De la misma manera como hemos ubicado nuestro primer elemento, podemos

crear toda la estructura que ira dentro de nuestro boceto web, configurando los
tamaos reales que utilizaremos luego para el diseo final.
CIBERTEC
22
4. Al momento de culminar tenemos la opcin para guardar el desarrollo de

nuestro boceto y poder seguir editndolo en cualquier momento, as como
tambin la opcin de exportarlo como imagen.
1.2.1.1.
Emuladores Web
Con un emulador web podremos tener una idea de cmo se ver nuestro diseo de
interfaz web en distintos navegadores as como en los variados tamaos de
dispositivos desde donde un usuario puede acceder a nuestro sitio. Este tipo de
herramienta nos ser muy til a la hora de llevar a cabo un proyecto web.
A continuacin mencionaremos algunos emuladores web importantes en el proceso
del diseo de nuestras interfaces.
1. gesdi.com (http://gesdi.com/responsivator/), este emulador permite ver
nuestro diseo de interfaz adecundolo a las pantallas de dispositivos mviles
como smathphone vertical y horizontal, as como en pantallas tipo Tablet. La
manera de utilizarlo es colocar la direccin de nuestro sitio web y dar clic al
botn Responsivate para obtener las visualizaciones correspondientes.
CIBERTEC
23
El resultado se presenta segn las pantallas de dispositivos as como

especificando las medidas de resolucin en pixeles:
2. ipadpeek.com (http://ipadpeek.com/), este emulador permite ver nuestro

diseo en dispositivos Apple, tanto en presentaciones iPod, iPhone o iPad.
Antes de probar este emulador verificaremos lo siguiente:
Cambiarle el user-agent a: Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac

OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko)
Version/4.0.4 Mobile/7B334b Safari/531.21.10
Deshabilitar el plugin de Flash.

Clic en que presentacin
deseamos ver nuestro diseo
Ingresar la
direccin del
Sitio web
CIBERTEC
24
3. url2png.com (https://www.url2png.com), con este emulador podemos

descargar en formato de imagen png la captura de pantalla de cualquier pgina
web.
Ingresar
la
direccin de la
pgina y clic en el
botn verde, a
continuacin
aparecer al lado
derecho
la
miniatura de la
pantalla.
Con el botn Save podremos guardar el

print de pantalla en formato png.
4. quirktools.com (http://quirktools.com/), lo peculiar de este emulador es que

en mucho ms completo; tiene dentro de cada opcin por dispositivos (desktop,
tablet, mvil, tv) sub opciones de resoluciones y marcas especificas, as como,
la posibilidad de colocar alguna medida personalizada.
Ingresar la
direccin del
Sitio Web.
Luego de ingresar la direccin nos muestra la siguiente imagen en donde podemos

elegir en qu tipo de dispositivo deseamos ver nuestra pgina as como las sub
opciones que nos muestra cada dispositivo.
CIBERTEC
25
1.2.2. Fundamentos del Diseo Web

Dentro de los temas a tener en cuenta en el diseo web es cmo ser la interaccin de
nuestra interfaz con nuestros usuarios finales, para ello debemos conocerlos y de esta
manera disear una pgina que cumpla con sus expectativas a nivel diseo y
funcionalidad, es decir que le sea til y as se convierta en un referente de informacin.
1.2.2.1.
Navegabilidad
El diseo de nuestra interfaz no debe ser

indescifrable para nuestro usuario, al
contrario debe ser intuitivo y fcil de
acceder a las opciones e informacin
que brindamos dentro de nuestro sitio
web.
Esto se logra aplicando una serie de estrategias, por ejemplo pensar en un diseo
ptimo para navegar platendonos las siguientes preguntas como si furamos los
usuarios finales:*
Dnde estoy?
Dnde he estado?
Dnde puedo ir?
(*Fuente: http://accesibilidadenlaweb.blogspot.com/2007/11/accesibilidad-usabilidad-navegabilidad.html)
Entonces, basndonos en estas preguntas podemos concluir que una buena

navegabilidad es la que permitir a nuestros usuarios saber en qu seccin de nuestro
sitio web se encuentran y donde pueden hallar la informacin que necesitan.
Otras consideraciones importantes son por ejemplo:
CIBERTEC
26
Que el usuario no haga ms de 3 clic para acceder a un recurso o informacin

de nuestro sitio web, al menos para los recursos ms importantes.
El men de navegacin debe estar presente en todas las pginas de nuestro
sitio.
Es vlido si utilizamos dos opciones de men uno de acceso rpido en la parte
superior y otro detallado en el pie de pgina.
Utilizar un mapa de sitio en donde podamos ver la estructura de nuestro sitio
web y la distribucin de las pginas, proporcionando enlaces directos en sus
opciones.
Una buena navegabilidad agiliza la experiencia de navegacin por
nuestro sitio web, eliminando cualquier obstculo entre el usuario y
la informacin que busca. Puede ser el principio de una relacin
cordial entre la marca y sus potenciales consumidores.
(http://www.4rsoluciones.com/como-lograr-una-buena-navegabilidad-en-nuestro-sitio-web/)
1.2.2.2.
Funcionalidad
El concepto de funcionalidad web tiene que ver con que el diseo de nuestra interfaz
este ligado con caractersticas que lo hagan utilitario y prctico es decir, que tanto en
realidad les sirve nuestra web a nuestros usuarios.
El propsito de visitar un sitio web es
encontrar en l la informacin que
buscamos de manera clara y concreta,
respetando la razn de ser de dicha
web, la cual puede ser informativa o
de entretenimiento. Esto tambin tiene
que estar ligado al concepto visual que
trabajemos para su diseo teniendo en
cuenta la combinacin de colores,
saturaciones, tipografas que permitan
una estada agradable y cmoda en
nuestro sitio.
Dentro de este diseo funcional se
recomienda
evitar
por
ejemplo,
introducciones tipo flash, fondos
musicales o imgenes con mucho
peso que impiden acceder de manera rpida a la informacin que deseamos obtener.
Para finalizar hay que tener en cuenta que cada elemento o recurso que incluyamos
en nuestro diseo web tiene una funcin especfica y til y no estn ocupando espacio
sin utilidad dentro de nuestra pgina.
1.2.2.3.
Usabilidad
La usabilidad tiene que ver con la manera fcil y eficaz que nuestros usuarios
interacten con los elementos y recursos disponibles en nuestro sitio web.
Segn lo que mencin a Alberto la Calle en su sitio http://albertolacalle.com/ , refiere
que la usabilidad tiene estos cuatro puntos fundamentales:
CIBERTEC
27
Centrado en los usuarios: Para desarrollar un producto usable, tienes que

saber, entender y trabajar con personas que representen a usuarios actuales
o potenciales. Un diseador, un responsable de proyecto, un supervisor o un
cliente slo se representan a s mismos y no pueden sustituir a los usuarios
finales.
Productividad: La gente considera que un producto es fcil de usar y
aprender despus de valorar el tiempo que necesita, el nmero de pasos
que ha de dar y el xito en predecir las acciones adecuadas. Si quieres
disear un producto usable, debes entender los objetivos de tus usuarios.
Usuarios ocupados: El software es una herramienta de trabajo u ocio, y las
personas somos poco proclives a
dedicar tiempo a aprender y
utilizar herramientas.
El usuario decide: Los usuarios,
y
no
los
diseadores
o
desarrolladores,
determinan
cundo un producto es fcil de
usar. Cada persona estima el
esfuerzo y el tiempo necesario
para obtener algo.
La usabilidad se refiere a la capacidad de un pgina web o tienda

online de ser comprendida, aprendida, usada y ser atractiva para
el usuario, en condiciones especficas de uso
.
(http://merka20.com/consigue-y-fideliza-clientes/usabilidad-y-accesibilidad-web/)
1.2.3. Cronograma Proyecto Web

Cuando decidimos o acordamos con un cliente el diseo de un proyecto web
necesitamos establecer que actividades realizaremos, cunto tiempo y recursos nos
tomarn cada una de ellas, especificar el tiempo de inicio y fin de cada una de las
actividades.
Por ello es muy importante establecer detalladamente un cronograma de proyecto el
cual nos ayudar posteriormente para poder calcular por ejemplo cuantos recursos
materiales y recursos hombre se utilizaron como tambin el tiempo por actividad y de
esta manera saber los costos del proyecto como tambin establecer las fechas de
avance y entrega con el cliente.
Hay muchos programas online para poder realizar este tipo de cronogramas de
actividades, los que se basan en diagramas de Gantt (representacin de las
actividades y el tiempo de duracin por medio de barras de colores)
Uno de ellos es Toms Planner (http://www.tomsplanner.es/), el cual se puede acceder
crendonos una cuenta o probarlo sin registro, la ventaja de crearnos una cuenta es
que podemos almacenar dentro de ella el ltimo cronograma de proyecto realizado.
CIBERTEC
28
Una vez que ingresamos tendremos un tipo de hoja cuadriculada en donde podemos
establecer las actividades a realizar, que recursos utilizaremos por cada una de ellas
as como, especificar el tiempo que nos tomar realizarlas teniendo la opcin de
poderlas agrupar por tipo de actividad si deseamos.
1.2.4. Presupuesto de Proyecto Web

Establecer el costo promedio de nuestro
proyecto web es muy importante y para
obtener un monto real debemos considerar
varios aspectos, como
las horas que
dedicaremos a disear nuestras interfaces,
as como que tipo de hosting utilizaremos.
Para
establecer
cuantas
horas
dedicaremos a nuestro proyecto web,
tendremos en cuenta la complejidad del
mismo, cuantas pginas web o interfaces
CIBERTEC
29
distintas tendremos que disear para nuestro sitio, los recursos que utilizaremos tanto
como recursos materiales los cuales pueden ser equipos, software y recursos hombre
es decir, cuantas personas estarn trabajando dentro de nuestro proyecto.
El tipo de hosting tambin es importante, generalmente se recomienda no trabajar con
hosting gratuitos en un proyecto web para un cliente debido a que este tipo de servicio
gratuito no cuenta con respaldo de datos, al menos que sea un hosting que nosotros
ya hallamos probado antes y le comuniquemos a nuestro cliente sus ventajas y
desventajas, es recomendable hacer uso de un hosting de paga y este tambin tiene
repercusin en el presupuesto.
Luego de establecer estos datos bsico se puede calcular el monto del presupuesto
utilizando la siguiente frmula:
Establecer Cuantas Horas tardar en elaborar mi

Proyecto
Colocar un costo por hora
Dar un margen de 20% mas del tiempo
establecido(tiempo de contingencia)
Presupuesto = Nro. de Horas x S/.Hora
Ejemplo:
Horas Establecidas : 20horas

Porcentaje Margen en Horas (20%) : 3 horas mas
Total de Horas : 23
Costo por Hora : S/.50 soles
23 horas x S/.50. Soles = S/.1150
1.2.5. Brief de Proyecto

El brief es el documento en el cual podemos
conocer datos clave sobre la empresa a la que
realizaremos el proyecto web, por lo general se
utiliza para fines publicitarios, sin embargo a
nosotros tambin no beneficiara por que ser un
nexo con nuestro clientes y as conocer cules son
sus objetivos, el rubro que maneja y el publico
objetivo al que desea llegar.
Esta es una base necesaria para poder crear un
concepto visual dentro de nuestro diseo.
La manera de redactar un brief de proyecto web
no est establecida por parmetros , pero si
debemos de tomar en cuenta incluir secciones que
hablen sobre la propuesta del proyecto web , el publico objetivo , prepuesto , requisitos
tcnicos , cuidando que la informacin que tengamos dentro del brief sea explicita pero no
muy extensa.
CIBERTEC
30
Como resumen podemos establecer los siguientes puntos base a tomar en cuenta al
momento de crear un brief para un proyecto web:
Datos de cliente e informacin preliminar: como nombre de la empresa, giro o

rubro, productos y servicios , publico objetivo, competencia, datos de contacto,
Imagen corporativa: slogan, logotipo, colores y tipografas corporativas,
fotografas de productos y/o servicios.
Informacin para las construccin del sitio web: objetivo del sitio web,
referentes visuales o de pginas web, contenido disponible para colocar en las
pgina web, antecedentes de presencia online (si es que ya existe una pgina web
del la empresa).
Debemos de tratar de plasmar esta informacin de manera ms grfica que textual en las
secciones que lo permitan, para tener mejor fluidez y poder ir armando un concepto del
diseo que propondremos con esta informacin, por ejemplo , para el tema de imagen
corporativa podemos usar un moodboard .
A parte de esta informacin es recomendable aadir a este brief de proyecto las

propuestas de mockup del diseo propuesto para el sitio, el cronograma de actividades,
mapa de sitio y presupuesto web.
CIBERTEC
31
Resumen
1.
La diferencia entre pgina y sitio web es que, la pgina web es la unidad de un

sitio web.
2.
En la actualidad no solo debemos centrarnos en el diseo de interfaces para

desktop sino tener en cuenta el uso de los dems despticos de donde tambin
accedemos a los sitios web.
3.
El lenguaje HTML, es la base de donde parte el desarrollo de una pgina web.
4.
Para que nuestro sitio web pueda visualizarse en internet, tenemos que contar con
un dominio (nombre para nuestro sitio web), as como con un servicio de hosting
(almacenamiento en un servidor web).
5.
El comienzo del diseo de interfaz web est en el desarrollo del mockup o boceto
web en donde veremos la organizacin de los recursos y estructura del diseo.
6.
La navegabilidad, funcionalidad y usabilidad son conceptos clave que no hay que

dejar de lado al momento de disear nuestras interfaces.
7.
Para tener una idea real de cual es presupuesto de nuestro proyecto web, es
necesario establecer un cronograma de actividades en donde veamos las horas,
das y recursos que utilizaremos.
8.
El brief de proyecto es un documento resumen que nos sirve de nexo

comunicador entre el cliente y nosotros para conocer mejor la realidad de la
empresa y as poder establecer una propuesta visual coherente de acuerdo a lo
que quiere y necesita el cliente.
Pueden revisar los siguientes enlaces para ampliar los conceptos vistos en esta
unidad:
Consideraciones para un mockup :http://www.guiadigital.gob.cl/articulo/que-esuna-interfaz

Diseo de interfaces web : http://es.slideshare.net/Interlat/diseando-interfacesweb-abordando-proyectos-desde-la-estrategia-hasta-la-forma
Caso
prctico
de
diseo
web
:
https://msdn.microsoft.com/eses/library/windows/apps/hh868264.aspx
Ejemplos
de
sitios
con
una
navegabilidad
destacada
:
https://webdesignledger.com/30-examples-of-excellent-website-navigation
CIBERTEC
32
UNIDAD
2
DISEO DE INTERFACES
Al trmino de la unidad, el alumno disea las interfaces de un sitio web segn
la estructura y organizacin planteada, basndose en las tendencias del
diseo web, utilizando software de diseo como adobe photoshop y adobe
illustrator.
Temario
2.1. Tema 3: Tendencias y Elementos en Diseo Web
2.1.1.
2.1.2.
2.1.3.
2.1.4.
Tipografas para Web

Texturas y Motivos
Manejo de Imgenes
Iconografas
2.2. Tema 4: Diseo de Interfaces usando Adobe Photoshop

2.2.1.
2.2.2.
2.2.3.
2.2.4.
2.2.5.
2.2.6.
2.2.7.
Tamaos de pantallas y elementos dentro del diseo

Creacin de estructura usando capas
Manejo de motivos y efectos en el diseo
Edicin de contenidos (Uso de tipografas adecuadas)
Diseo de una interfaz clsica
Diseo de Interfaz One page
Diseo de Interfaz full screen
2.3. Tema 5: Diseo de Interfaces usando Adobe Illustrator

2.3.1.
2.3.2.
2.3.3.
2.3.4.
2.3.5.
Configuracin de mesas de trabajo para interfaces

Creacin de Iconos con vectores
Diseo de contenedores y backgrounds
Armado de una interfaz
Exportar como psd y html
Presentacin del Proyecto N2 (Diseo de Interfaces de Proyecto en Photoshop o
Illustrator (como propuestas pgina personal y empresarial))
CIBERTEC
33
2. DISEO DE INTERFACES
2.1. TENDENCIAS Y ELEMENTOS EN DISEO WEB
Las tendencias en el diseo web varan de manera constante, estos cambios se dan
desde el uso de las tipografas, tamaos y tipos de imagen as como la definicin de la
organizacin de los elementos dentro del diseo.
En la actualidad la tendencia del diseo web opta por diseos menos complicados y
ms sofisticados utilizando por ejemplo, imgenes a pantalla completa e iconografas
de diseo plano.
Debido a todos estos cambios constantes al momento de disear nuestras interfaces
debemos de tener en cuenta todos estos aspectos.
2.1.1. Tipografas para web

Cuando elegimos una tipografa para
nuestro diseo web, es necesario saber si
ser la adecuada al momento de
visualizarla en los navegadores web, tener
en cuenta si nuestra fuente elegida es
legible y facilita la lectura a nuestros
usuarios.
El tipo de fuente ms adecuado para
trabajar en diseo web son los sans-serif,
por adecuarse mejor y no distorsionarse en los monitores de baja resolucin.
Actualmente el uso de tipografas para web no se limitan a las que tenemos preinstaladas en nuestro equipo, tambin podemos elegir tipografas desde paginas
externas como https://www.google.com/fonts o descargarlas de sitios como
http://www.dafont.com/es/.
Se debe considerar elegir nuestra tipografa segn la imagen corporativa de la
empresa y centrarnos en un mximo de 3 fuentes distintas por pgina web de manera
que no cause distraccin al usuario y se pueda sentir cmodo con la lectura.
Una regla bsica que debemos tomar en cuenta es lo necesario de utilizar textos
editables y no imgenes dentro de nuestro sitio web por motivos como los siguientes:
Si sobrecargamos nuestro diseo con imgenes que representan texto nuestra

pgina demorar en descargar para su visualizacin.
Los motores de bsqueda no podrn incluir a nuestra pgina por no poder leer
el contenido de la misma.
Existiran problemas de legibilidad al momento de aumentar la resolucin de la
pantalla.
Se complicara el tema de actualizar el contenido.
La pgina webstudio316, nos proporciona una gua para elegir nuestra tipografa web:
Contraste: Una manera de verificar el buen contraste de la tipografa y el fondo

es tomando una captura de pantalla del texto en tu sitio web y ponerla como
CIBERTEC
34
imagen en un editor, cambiar la imagen de color a escala de grises, as se

podr observar si tiene suficiente contraste.
Tamao: Es importante que el texto de nuestro sitio web tenga el tamao
correcto
para
que
pueda
leerse
apropiadamente
por
todos,
independientemente del dispositivo que se use. Se recomienda que el tamao
de la fuente no baje de 12px.
Jerarqua: Muy a parte de los colores que utilicemos, variar el tamao de letra
es una de las mejores maneras de diferenciar el contenido.
Espacio: Dejar espacios en blanco dar un respiro a nuestro contenido y el
lector se podr centrar mejor en el texto que esta visualizando, la idea es
encontrar un buen balance entre los espacios en blanco y los textos dentro de
nuestro diseo.
Presentamos a continuacin algunas de las fuentes ms utilizadas en el diseo web:

Helvtica
Verdana
Museo
Eurostile
Gill Sans
Impact
CIBERTEC
35
2.1.2. Texturas y motivos

En los inicios del diseo web, la prioridad era el colocar el contenido informativo de la
misma, dejando de lado detalles como el fondo para diferenciarla de las dems
pginas por ejemplo.
Ahora el uso de fondos es un elemento importante, convirtindose en un medio que
refuerza el concepto de nuestra web, teniendo en cuenta el buen uso de las texturas y
motivos.
Antes de decidir si utilizaremos algn tipo de textura o motivo dentro de nuestro diseo
de interfaz veamos un pequeo concepto de estos dos temas:
Textura: Es aquella que permite

conocer la estructura de la
superficie de un objeto. Por
ejemplo, si nos fijamos en un
objeto que todos conocemos:
una mesa. Podemos ver que
distintas
mesas
tienen
diferentes texturas
como
metlicas, de madera o de
plstico.
Si
las
tocamos,
sentimos una distinta sensacin.
Es decir transmiten la sensacin de un objeto a travs de su textura.
Patrn o Motivo: Es aquel

que se basa en la repeticin
de una unidad. Por ejemplo,
tenemos el mantel de la
cocina. Este est decorado
con un patrn de puntos. A
lo largo de todo el mantel se
ver la unidad repetida
infinitamente.
Para saber que elegir debemos de pensar en el propsito del uso, si es decorativo
podramos elegir motivos o si deseamos transmitir una sensacin es adecuado
trabajar con texturas.
Con Adobe Photosop podemos crear patrones personalizados con los siguientes
pasos:
Creamos un lienzo de 60px x 60px con fondo

tranparente y dibujamos en el nuestro patrn o
motivo.
CIBERTEC
36
Nos dirigimos a la opcin de Edicin, definir

motivo y guardamos nuestro motivo con un
nombre.
Abrimos la imagen o creamos en nuevo lienzo donde queremos aplicar el

motivo, ingresamos a los estilos de capa y aplicamos el motivo creado con la
opcin superposicin de motivo.
Existen tambin pginas de donde podemos descargar texturas y motivos ya

establecidos, como las siguientes:
http://www.ucreative.com/resources/40-excellent-fabric-textures-for-your-nextdesigns/
http://abduzeedo.com/tags/ttt
http://designm.ag/resources/2000-absolutely-free-textures/
http://www.creativosonline.org/blog/ms-de-500-motivos-patterns-gratis-paradescargar-y-usar-en-photoshop.html
2.1.3. Manejo de Imgenes

Al momento de elegir nuestras imgenes es necesario considerar las tendencias
actuales e integrar las imgenes de manera correcta generando el impacto deseado,
sin dejar de lado el tema de los pesos para no sobrecargar el tamao de nuestro sitio
web y dificultando con ello su rpida navegacin y carga de contenidos.
En cuanto a formatos de imgenes , si bien es cierto los formatos gif y jpg pueden
ser utilizados para las imgenes en nuestra web , en la actualidad el formato
CIBERTEC
37
recomendado es png , por tener un esquema de comprensin sin perdidas al momento

de reducir el tamaos de los archivos manteniendo intacta la calidad de las imgenes ,
este formato puede trabajar en modo Escala de Grises (con un canal alfa), en modo
Color Indexado (8 bits, hasta 256 colores, paletas de colores) y en modo RGB (24 bits,
16,8 millones de colores y 48 bits, con 24 bits para canales alfa), por lo que admite 256
niveles de transparencia.
Para guardar una imagen con este formato pgn en adobe photoshop, basta con abrir la
imagen y dirigirnos a la opcin Guardar para Web, dentro del men archivo y escoger
formato png.
A continuacin mencionaremos algunas tendencias actuales en el manejo de

imgenes:
CIBERTEC
38
Visuales monocromticas:
Las
imgenes
monocromticas
son
especialmente eficaces para

los sitios web que tratan de
mantener un aspecto limpio
y
suave.
apariencia
Crean
una
equilibrada
relajada y son, por lo tanto,

tiles para canalizar la atencin del visitante acorde a la jerarqua de contenido
de la pgina web en cuestin. Las paletas monocromticas hacen referencia
tambin a tonos y matices.
Tipo Infografas: Las imgenes que

cuentan una historia o transmiten
conocimientos
tiles
son
una
herramienta de gran impacto en el
diseo
web
actual.
Las
infografas, como comnmente se les
conoce, son un gran mtodo para
mostrar el contenido de una manera
concisa y eficaz. Teniendo como
ventaja que los visitantes de tu sitio
estarn mucho ms dispuestos a leer
este tipo de elementos que a ir a
travs de prrafos largos de textos.
Imgenes
que
representen
la
realidad:
No
es
adecuado el uso
imgenes
que
presentan
una
realidad
inexistente en lugar
de fotos que sean
una representacin
vida real. Utilizar
bellas modelos en
poses ficticias se
est volviendo un
recurso desfasado y
de mal gusto que nos desconecta con lo que queremos transmitir. Los usuarios
prefieren ver gente y situaciones que se asemejen a las situaciones que
conocen y que viven a diario en sus propias vidas. Este tipo de trabajo de
CIBERTEC
39
fotografa en un sitio web genera un sentido de familiaridad y confianza que

una imagen de archivo simplemente no podra entregar.
Imgenes manipuladas: El uso de

imgenes manipuladas, colocndole
tipo de filtros o texturas influenciara
en darle distincin y personalidad a
nuestro diseo web, esta labor se
puede realizar en programas como
adobe photoshop o en editores para
fotografas online.
(Fuente: http://es.wix.com/blog/2014/08/tendencias-de-diseno-web-en-imagenes/)
2.1.4. Iconografas
El uso de iconografas dentro del diseo web nos ayuda para una comunicacin rpida
y efectiva con nuestros usuarios. Son los elementos que complementan el diseo de
nuestra pgina, la tendencia en la creacin de las iconografas utilizando vectores
(diseo flat) basado en contrastes resaltando la parte principal del cono ayudando con
ello a una comprensin universal de lo que representan.
Es recomendable que el diseo de nuestras iconografas este de acorde al estilo de

nuestro sitio web.
En conclusin, los conos no solo son parte de la esttica, son elementos importantes
dentro de la funcionalidad de nuestro sitio web que nos ayudan a sintetizar la
informacin.
CIBERTEC
40
Podemos crear nuestros iconos con la utilizacin de software como el adobe

photoshop o illustrator, pero tambin tenemos opciones de descarga on line, aca
algunas alternativas:
2.2.
Iconos de estilo minimalista: http://www.pedropuig.com/2012/05/07/pack-deiconos-august-interactive/

Iconos a mano alzada : http://www.recursos2d.com/2011/07/iconos-en-estiloboceto-icons-sketch.html
Iconos de redes sociales formato fuente : http://www.fontfabric.com/socialmedia-icons-pack/
Librera de conos : http://www.iconarchive.com/
DISEO DE INTERFACES USANDO ADOBE PHOTOSHOP
Las herramientas web de Photoshop facilitan la creacin de componentes para las

pginas web o de pginas web completas en formatos preestablecidos o
personalizados gracias a sus mltiples opciones para guardar las imgenes en
distintos formatos compatibles con el diseo web.
2.2.1. Tamao de pantallas y elementos dentro del diseo

Adobe Photoshop tiene la opcin de configurar las medidas de su lienzo en pixeles
que es la unidad de medida trabajada dentro de diseo orientado a la web.
Actualmente el 60% de todos los monitores estn configurados a 1024x768 pxeles, y

un 17% usan 800x600 pxeles. Otro 18% de usuario utiliza resoluciones iguales o
mayores a 1280x1024 pxeles.
CIBERTEC
41
Figura 10 Medidas segn resoluciones

Fuente: http://albertolacalle.com/diseno/resoluciones.htm
As como estamos determinando que resolucin utilizar para nuestro diseo web,
tambin es importante saber la manera de cmo o porque criterios ubicaremos
nuestros elementos o recursos dentro de nuestra pgina web.
Una de estas consideraciones es el peso visual y direccin de nuestras imgenes, con
peso visual nos referimos a tener en claro la fuerza visual que ejercen nuestros
recursos visuales en los visitantes, con direccin visual debemos de considerar el
movimiento o ubicacin de cada imagen utilizndolas en los lugares estratgicos para
que sugieran que es lo siguiente a visualizar dentro del sitio.
Se puede medir el peso visual definiendo que reas
de la composicin atraen nuestra atencin, esto se
puede conseguir aislando las otras caractersticas,
dentro de adobe photoshop, podemos ayudarnos
con la opcin de ocultar capas.
Algunas caractersticas que nos ayudarn a dar peso
visual a las nuestras imgenes son las siguientes:
Tamao: Los elementos ms grandes tienen

mayor peso visual que los elementos
pequeos.
Color: Los colores clidos avanzan hacia el
primer plano y tienden a cargar ms peso
que los colores fros, que residen mejor en el segundo plano.
Valor: Los elementos oscuros tienen ms peso visual que aquellos ms
livianos.
Ubicacin: Se percibe que los elementos ubicados en la parte superior de la
composicin son ms pesados que los elementos ubicados en la parte inferior
de la composicin. Mientras ms lejos del centro o rea dominante de una
composicin, mayor el peso visual de un elemento. Los elementos en el
primer plano pesan ms que los elementos en el segundo plano.
Textura: Los elementos con textura parecen ser ms pesados que aquellos
sin textura.
CIBERTEC
42
Orientacin: Los objetos verticales parecen ser ms pesados que los

horizontales. Los diagonales tienen mayor peso.
(Fuente: http://www.staffcreativa.pe/blog/principios-de-diseno-de-paginas-web-peso-visual-y-direccion/)
El sitio web www.staffcreativa.pe , nos proporciona varios anlisis de diversos diseos

web orientados al tema de peso y direccin, como el siguiente:
Los coloridos elementos de esta pgina se animan en un solo lugar, llamando

mucho la atencin hacia s mismos. Aun si te pierdes la animacin, es probable
que veas estos elementos como los que llevan el mayor peso visual debido a
los saturados colores rosado, amarillo y azul. Estos elementos ocupan el
mismo espacio, crean un rea densa en el medio del espacio vaco.
Los grficos de la parte inferior son los siguientes elementos con el mayor
peso. Son oscuros, grandes y complejos en forma. Separan tu mirada hacia
tres secciones que contienen los siguientes elementos visualmente ms
prominentes: la seccin encabezados.
El encabezado principal de la pgina es grande y oscuro comparado con el

siguiente texto debajo de l. Para m, los otros elementos que resaltan, debido
a su alto peso visual, son el nombre de la compaa en la parte superior y el
logo en la parte inferior.
Las tres tuercas podran ser considerados como un solo tringulo, aunque con
curvas, pero estableciendo direcciones diagonales que es la direccin con ms
peso dentro de un diseo. Son los
nicos diagonales de la pgina
web.
Entonces concluimos que a la fuerza se

le conocer como peso visual, y la
direccin percibida de las fuerzas
CIBERTEC
43
visuales es direccin visual. Ambos son conceptos importantes de entender si se

quiere crear jerarqua, flujo, ritmo y balance en tu composicin de pgina web. (Fuente:
http://www.staffcreativa.pe/blog/principios-de-diseno-de-paginas-web-peso-visual-y-direccion/)
2.2.2. Creacin de estructura usando capas

En el tema anterior hemos visto la utilidad de trabajar con capas dentro de adobe
photoshop, nos sirve para ocultar elementos y poder establecer su peso y direccin
por ejemplo, as como para organizar mejor la estructura organizndola en capas y
grupos de capas.
En la siguiente imagen podemos observar una interfaz web diseada en photoshop, la
cual est organizada en capas de tal manera que podemos tener en un mismo lienzo
el diseo de todo un sitio web estructurado por grupos de capas.
En esta imagen apreciamos parte de la

estructura de nuestro diseo distribuido
en capas y organizado dentro de un
grupo. Tambin podemos observar que
para ayudarnos en la organizacin cada
capa debe contener un nombre referente
a su contenido, garantizndonos as la
CIBERTEC
44
facilidad al momento de editar cualquier parte del diseo.

(fuente:https://helpx.adobe.com/es/photoshop/using/generate-assets-layers.html)
2.2.3. Manejo de motivos y efectos en el diseo

Para crear un motivo en Adobe Photoshop seguiremos los siguientes pasos:
Crear un lienzo de acuerdo a la medida que

deseemos tenga nuestro patrn, para el ejemplo
usaremos un lienzo de 100px x 100px.
Dentro de este lienzo dibujaremos nuestro patrn o

motivo, podemos utilizar alguna tipografa, la
herramienta pincel o un sello preestablecido.
Definir nuestro motivo dentro del men Edicin,

opcin definir motivo, guardar nuestro motivo con un nombre.
Abrir la imagen donde queremos aplicar el patrn o motivo y en los estilos de

capas seleccionar el motivo que hemos guardado dentro de la opcin
superposicin de motivos.
Los efectos de diseo, por lo general se utilizan para darles un toque original a las
fotografas utilizadas en nuestros diseos, trabajando con los diversos filtros que nos
proporciona Adobe Photoshop.
CIBERTEC
45
Desenfoque gausiano, da un efecto tipo suavizado a nuestras fotografas para

aplicarlo, ir al men Filtro, opcin desenfoque, desenfoque gausiano, elegir el valor de
desenfoque.
Filtro tipo mosaico, en el men filtro elegir la opcin pixelizar, mosaico y aplicar el
numero de cuadros para el mosaico.
Filtro trazos de pincel, permite convertir una fotografa a un dibujo aplicando las
diversas opciones de este filtro, para aplicarlo nos dirigimos a men filtro, galera de
filtros , grupo de opciones trazos de pincel.
CIBERTEC
46
Convertir imgenes en blanco y negro, en el men imagen seleccionar la opcin

ajustes, blanco y negro.
2.2.4. Edicin de contenidos

Para que una pgina muestre el mismo tipo de letra con que se ha creado el diseo, la
fuente debe estar presente en el sistema operativo del visitante.Podemos lograr esto
de 3 maneras:
Utilizando la tipografas comunes pre establecidas.

Aadiendo tipografas de libreras externas por ejemplo, las disponibles en la
pagina de google fonts (esto solo se puede lograr establecindolo en una hoja
de estilos)
Importando una fuente externa, para ello debemos importar la fuente externa,
instalarla en nuestro equipo, al macenandola en la carpeta de nuestro sitio web
y llamarla dentro de la hoja de estilos.
Como ya habamos mencionado lo recomendable es que los textos sean editables y

creados en html, pero si como referencia queremos utilizar por ejemplo, una tipografa
importada en nuestro diseo digital tenemos que seguir estos pasos:
Descargar la fuente en este caso de la pagina dafont.com.
Doble clic en el archivo descargado e instalar la fuente.
CIBERTEC
47
Abrr el Adobe Photoshop y buscar la fuente instalada.
Mencionaremos algunos puntos que debemos evitar al momento de trabajr texto

dentro de nuestro diseo:
Evitar vacios o huecos dentro de nuestros prrafos, manejar bien el espaciado

entre palabras para que esto no suceda.En ocaciones no es conveniente
justificar los prrafos de esa manera nos evitaremos este error.
No se pueden colocar extractos de texto seguidos de puntos suspensivos, esto

se puede considerar como un descuido en la edicin o un error del diseador
web.
Otro error comn es dejar un espacio entre letras inadecuado, si es muy

pequeo la lectura es incmoda y si es muy grande se ven las palabras como
letras sueltas.
Evitar tener distintos estilos de textos, es importante tener una gua de estilos
para mantener un diseo consistente a lo largo de todo el sitio, se debe tener
siempre el mismo tipo de letra y colores que adems le den identidad y
uniformidad al sitio.
(Fuente: http://www.paredro.com/5-errores-tipograficos-de-diseno-web-que-debes-evitar/)
2.2.5. Diseo de una interfaz clsica

A continuacin daremos los pasos para crear la siguiente interfaz clsica con Adobe
Photshop:
CIBERTEC
48
Paso 1: Configurar un documento de 1200px x 1600px en color blanco, modo rgb y

resolucin de 72 pixeles / pulgada.
Paso 2: Llene el fondo con el color # 101010 , darle a la capa el nombre de fondo y
crear las siguientes guas (Men> Ver> Nueva gua .)
CIBERTEC
120px verticales
600px verticales
1080px verticales
49
Paso 3: Organizar las capas en grupos de capas y nombrar todas las capas con
nombres adecuados para que la edicin del diseo sea mas fluida.
Paso 4: Crearemos la cabecera de nuestro diseo, A continuacin, seleccionar la

herramienta rectngulo del rea de formas vectoriales de la barra de herramientas:
Dibujar un rectngulo de color # 25252, con la dimensin de 1200px de ancho por

10px de altura:
Configurar una sombra interna al nuevo rectngulo, para ello doble clic en la miniatura
de capa y trabajar los siguientes valores en la opcin de sombra interna.
CIBERTEC
50
Paso 5: Ahora vamos a crear el men, crear una nueva carpeta llamada "Top
Menu" en el grupo de cabecera.
Dibujaremos un nuevo rectngulo
con una altura de 90px y 10px en
eje Y.Establecer luego un estilo de
tipo sombra externa en el
rectngulo.
Luego creamos
el texto del
men. La fuente utilizada es:
"Droid Serif. Colocar el texto al 20px desde la lnea de gua de la derecha.El tamao
de la fuente es de 18px y el espaciado es de 4 espacios entre cada opcin.
Paso 6: Creamos la seccin donde ira el slider de imgenes, seleccionamos en el

panel de capas el grupo SLIDER y creamos dentro una capa la cual nombraremos
como degradado y dibujar un rectngulo con la herramienta de forma rectangular y
establecemos las propiedades:
Medidas de 400px x 100px altura y en el eje, con el color #77b400.
CIBERTEC
51
En estilos de Capa,
utilizar la opcin de
superposicin
de
degradado, en modo
de fusin multiplicar
y
utlizamos
un
degradado de negro
a transparente para
dar
el
siguiente
acabado a nuestro rectngulo.
Paso 7: Dentro del mismo grupo Slider, creamos dentro una capa la cual
nombraremos como slider-back y dibujar un rectngulo con la herramienta de forma
rectangular y establecemos las propiedades:
CIBERTEC
52
El color de este rectngulo es blanco con una opacidad del 30%, aplicamos para esta
capa dentro de las propiedades de estilos de capas un bisel y relieve con los
siguientes valores:
Para colocar las imgenes duplicaremos la capa y la renombraremos como sliderimagenes, luego volvemos a colocarle el 100% de opacidad y le damos la siguiente
dimensin.
Slider -Imgenes
Slider -back
Paso 8: Ahora crearemos las

flechas deslizantes para este slider.
Creamos un nuevo documento de
100px x 100px.
CIBERTEC
53
Seleccionamos la forma personalizada vectorial (U) en la barra de herramientas,

hacemos clic-derecho en el documento para abrir la lista de formas vectoriales
personalizado. Para crear la flecha, empezamos con una forma predeterminada flecha,
y luego la personalizaremos:
Con la herramienta seleccin

directa
(flecha
blanca),
tranformamos los nodos y la forma
de nuestra flecha.
Luego ingresamos a
los estilos de capas
y configuramos las
opciones de sombra
externa
y
superposicin
de
degraados.
Gurdamos la flecha con el nombre de flechadeslizante. Nos dirigimos al documento de nuestro

diseo e importamos la flecha: Menu Archivo
Importar. Ubicar las flechas a los extremos del
rectngulo donde ira las imgenes.
CIBERTEC
54
Paso 9: Para culminar interfaz, siguiendo los pasos

anteriores establecemos, los contenedores y textos
para la parte inferior, teneniedo en cuenta de trabajar
cada elemento en una capa separada.
(Fuente: http://webdesign.tutsplus.com/tutorials/create-a-dark-clean-website-design-in-adobe-photoshop-free-psd-webdesign-1382)
2.2.6. Diseo de una interfaz one page

En la actualidad las interfaces one page estn
tomando protagonismo a la hora de disear
interfaces web, se trata de realizar el diseo de
una pgina web a nivel vertical colocando dentro
de ella varias de sus secciones.
A continuacin daremos los pasos para crear un
diseo de esta naturaleza.
Para comenzar es necesario como ya sabemos
empezar desde la creacin del mockup donde
veremos como dividiremos nuestra pgina de
diseo one-page y como sern ubicados
nuestros elementos.
Paso 1: Establecemos el tamao de nuestra pgina , creamos un documento nuevo

en adobe photoshop con las siguientes caracteristicas
CIBERTEC
55
12001640 pixels con resolucin de 72 pixels. Podemos habilitar las lneas guias para
separ las secciones del diseo.
Paso 2: Creamos 5 seccines divididas por capas:
Capa
fondo:
color (#ededed),
aadir filtro tipo
ruido con valor de
0.5. Aplicar en
estilos de capas
la
opcin
de
superposicin de
degradado
en
modo de fusin
luz suave , el
degradado ser el
54% de color
negro y el 46% de
color blanco en un
angulo de 90 a
75% de escala.
Capa encabezado : medidas 1200px x 128px
Capa seccin 1 (about) : medidas 1200px x 625px
Capa seccin 2 (works) :
medidas 1200px x 400px
Capa seccin 3 (contact): medidas 1200px x 430px
Capa foot : 1200px x 48 px
Como resultado tendremos las siguientes divisiones:

Para aadir los colores correspondientes
seguimos las siguientes indicaciones:
Aadir, usando la herramienta Rectngulo
(U), una nueva forma (color # 608bb6, altura
alrededor de 400 pxeles) para el
contenedor medio, establecer el modo de
mezcla a Color Burn y relleno a 75% y, a
continuacin, aadir un trazo blanco de 1
pxel ( de Estilo de capa). Finalmente la
forma rectangular de los crditos (el pie de
pgina), utilice la misma herramienta y el
color del contenedor medio, pero Blend
ahora establecido en Luz lineal y opacidad
al 70%.
CIBERTEC
56
Paso 3: Trabajar un
patrn para todo el lienzo.
Abrimos
un
nuevo
documento de 12 1 pxeles, desbloqueamos la capa de fondo aplicar zoom a
3,200%, aadir una nueva capa y utilizar la herramienta Marco rectangular aadir
cuadrada de dos 1 1 pxel, llenar uno con el #fff color y el otro con # 000, como se
muestra a continuacin. Luego ir a Edicin> Definir motivo.
Volvemos a nuestro
documento
principal.Creamos una
nueva capa y (con la
herramienta
Marco
Rectangular)
dibujar
una
seleccin
que
cubre todo el lienzo, lo
rellenamos con un color
aleatorio,
establezcemos
un
relleno
a
0%
a
continuacin,
aadir
superposicin
de
patrones de estilo de
capa.
Paso 4: Creamos uno

de los contenedores
donde
colocaremos
informacin.
Utilizamos
la
herramienta Rectngulo
para dibujar un cuadro
blanco 480 425, aadir
dos lneas grises como
se
muestra
(Crear
mscara de recorte a
Limite los segmentos
dentro
de
la
caja
blanca).Agremos
un
texto
tipo
titulo
y
creamos
un
efecto
sombra
a
nuestro
contenedor, los valores
se
muestran
a
continuacin:
CIBERTEC
57
Paso 5: Una vez establecidas las

caracteristicas principales como las
medidas de las seccines, patrones
para el fondo y creacin de
contenedores principales, podemos
trabajar los dems detalles de
nuestro diseo guindonos por los
lmites de cada seccin.
(fuente:http://www.javajan.com/news.php?id=115web&idioma=3)
2.2.7. Diseo de interfaz full

screen
El diseo de interfaces full screen, tambin son tendencias en la actualidad, consiste
en presentar la pgina principal a tamao pantalla completa teniendo como
protagonistas de diseo las imgenes de alta resolucin o fotografas.
A continuacin daremos algunos consejos para poder crear un diseo a pantalla
completa:
La capa contenedora principal no tiene un ancho pequeo, sino que abarca

todo el ancho de la pantalla, como medida estadar para una imagen full screen
debemos
colocarla
en
1280 x 1024 px
.La imagen de
fondo
que
coloquemos
puede ser igual,
grande
ocupando toda
la pantalla o
puede
ser
grande
pero
CIBERTEC
58
postrndose slo en una parte del sitio, dejando el otro lado para el contenido.
Debe primar la imagen de fondo con una buena resolucin.
En lo referente a textos ubicar el men del sitio web sin que oculte detalles de
la imagen de fondo, si colocamos algn texto adicional buscar el contraste
adecuado para que no se pierda con la imagen, para evitar ello se puede crear
un contenedor con trasparencia.
Estos son algunos ejemplos de sitios web que utlizan el diseo full screen:
http://www.red-monkeys.de/
http://www.priscillamartins.com/
http://www.fizzy.ch/
http://www.rogerdubuis.com/
2.3. DISEO
DE
ILLUSTRATOR
INTERFACES
USANDO
ADOBE
2.3.1. Configuracin de mesas de trabajo para interfaces

Cuando diseamos una interfaz web en Adobe Illustrator, podemos trabajar en un solo
documento todas las interfaces de nuestro sitio web, configurando las mesas de
trabajo que necesitemos en con las medidas de cada una de nuestras interfaces.
Para lo cual realizamos los
siguientes pasos:
Abrimos
Adobie
Illustrator y creamos
un documento de
1024 x 768 px, en
las opciones de nro
de mesas de trabajo
colocamos el nro de
mesas
que
necesitamos
para
disear
las
interfaces de nuestro
sitio
web.No
olvidemos
de
configurar
las
unidades
de
medidas en pixeles.
Con la herramienta mesa de trabajo, podemos

seleccionar cada una de las mesas de trabajo creadas y
personalizar por ejemplo sus medidas.
CIBERTEC
59
Para
cambiar las
medidas de
una
mesa
de trabajo,
basta
con
seleccionarl
a y en la
parte
superior
configurar
las nuevas
medidas.
2.3.2. Creacin de Iconos con vectores

Los dibujos y elementos tipo vector estn tomando un papel importante en el diseo
de nuestras interfaces, es por ello que crearemos iconos del tipo vector para poder
utlizarlos y personalizarlos en nuestro diseo.
Crearemos el siguiente icono RSS en illustrator.
Paso 1: Configurar una mesa de

de 100px x 100px en fondo blanco.
Paso 2: Crear un rectngulo
redondeado de 60px x 60px.
trabajo
Paso 3: Pintarlo con el siguiente

degradado, tipo linear en angulo -90.
Los colores usados son de #F15A24 a
#FBB03B.
Paso 4: Con el rectngulo aun seleccionado

aplicar el mismo degradado al contorno de la
imagen.
CIBERTEC
60
Paso 5: Con la herramienta crculo dibujar una

forma en otra parte de la mesa de
trabajo. Limpiar cualquier relleno, y aadir un
trazo negro grueso 6pt.
Con la herramienta seleccin directa (flecha
blanca) , seleccionar los nodos indicados y
suprimir estos
puntos para que
solo quede parte
del circulo.
Paso 6: Copiar y pegar la imagen e ir escalndola hasta

lograr el resultado final, aadir un circulo de fondo negro
al final de los semi crculos.
Paso 7: Seleccionar todas las formas y aplicarles el

siguiente degradado.
Paso 8: Agrupamos estos elementos y los

colocamos sobre el rectngulo anaranjado.
CIBERTEC
61
Paso 9: Por ultimo si deseamos darle un brillo adicional podemos crear en una capa
superior un rectngulo que ocupe las tres cuartas partes del icono pintarlo de blanco a
y
darle
una
opacidad del 15%.
2.3.3. Diseo de
contened
ores y backgrounds
Dentro de nuestro diseo es importante tambin saber como crear los contenedores
donde colocaremos la nformacin de nuestro sitio as como aplicar un diseo especial
a nuestos backgrounds y darle personalidad a nuestra pgina.
Creamos un contenedor:
Paso 1 : Ubicar en que parte de nuestro diseo iran los contenedores , para
saber las medidas exactas de cada uno de ellos nos podemos guiar por las
medidas que ya tenemos en el mockup o boceto web
Paso 2: Luego de establecida la ubicacin
procedemos a dibujar los contenedores con la
herramieta rectngulo.
Paso 3 : Podemos pintar los contenedores con degradados asi como dibujar
contenedores de
soporte que iran
detrs de los
contenedores
donde
CIBERTEC
62
mostraremos la informacin.
Creamos efectos tipo patron para nuestro background:
Paso 1: Creamos un nuevo documento de 980 px x 830 px en modo rgb de

fondo blanco.
Paso 2: Dibujamos un
cuadrado de 50px x 50 px y
le colocamos el color que
deseemos.
Paso 3: Dibujamos un circulo

de 24px x 24 px , lo pintamos
d color gris y lo ubicamos en el centro de nuestro
cuadrado.
Paso 4: Copiar cuatro veces los cuadrados y crculos

y ubicar los elementos en la siguiente posicin.
Paso 5: Seleccionar todos los elementos y con el

panel buscatrazon aplicar la opcin formar interseccin.
Se debe realizar uno por uno. Nos quedar el siguiente
resultado
Luego colocaremos estos
recortes en nuestra primera
imagen.Pintar los crculos de
color blanco,
CIBERTEC
63
Paso 6:
Agrupamos los elementos y los guardamos en el
panel de muestras.
Paso 7 : Dibujamos un contenedor del tamao de

nuestro documento y lo pintamos con el motivo
creado.
Paso 8: Si deseamos le podemos agregar una capa superior con algn tramado y
trabajarlo con modo de fusin luz suave para obtener el siguiente acabado.
(Fuente : http://cosasdeprincesas-blog.blogspot.com/2012/05/como-crear-tu-estampado-con-illustrator.html)
2.3.4. Armado de una interfaz

Paso 1: Cree un Nuevo documento, como se
muestra en el ejemplo, teniendo en cuenta
que el tamao del documento ser el tamao
que tendr la web. En este caso 960 px de
ancho por 1500 px de alto.
Paso 2: Hacer uso de lneas gua , para
ubicarse mejor en el espacio, se puede usar
CIBERTEC
64
una ventana de un buscador como fondo (se puede descargar de Internet).

Despus de eso, se debe de arrastrar lneas gua al rea de trabajo para delimitar las
secciones de la web. Las lneas son sumamente importantes porque ellas nos dan la
pauta de cmo usar los espacios, para posteriormente poder colocar los objetos.
Paso 3: Creamos los componentes,

asignamos color a cada una de las
secciones, es decir, ya anteriormente
habamos determinado que la web
estara formada por 3 secciones. A la
cabecera le asignaremos un color
degradado en tonos grises oscuros;
a la segunda seccin, tonos turquesas
(con degradados muy suaves); y la
tercera, donde colocaremos el texto,
tonos grises claros.
Paso 4: Diseamos los dems componentes

guindonos del siguiente mockup, primero
convertimos esas reas grises en secciones de
nuestra
web.
Para
ello, se debe crear nuevas capas y, en ellas, ir
convirtiendo
esas
reas
grises
en
capas de texto o en imgenes. Nos basaremos
siempre en las lneas gua creadas
anteriormente.
Despus de eso, colocaremos los textos con la
fuente deseada. Para este ejemplo se us
Myriad Pro.
CIBERTEC
65
Paso 5: Trabajar las imgenes en

miniatura, para colocar las imgenes en
miniatura, primero debemos de importar las
imgenes deseadas y las colocamos por
debajo de la capa de la figura con los
bordes redondeados. Luego, le damos clic
derecho y la convertimos en mscara.
Si se desea darle un
toque elegante, se crea
un rectngulo negro con
50% de
opacidad y sobre l se
escribe un texto en color
blanco como se muestra
en la imagen.
Paso 6: Configurar la ubicacin de

los iconos , se recomienda, para
hacer ms funcional el men de una
web, utilizar conos querefuercen la
idea de las secciones del men. De
esa
forma
se
vuelve
mucho
msintuitiva la seleccin de las reas
que se desean ver. Para ello, uno
puede
disear
su
propio
cono
en
Illustrator
o
descargarlos de Internet.
Paso 7: Ubicar las imgenes y textos

en los dems contenedores para
lograr el resultado final.
CIBERTEC
66
2.3.5. Exportar como psd y html

Exportar como psd: Por ser de la misma familia Adobe tenemos la ventaja de una gran
compatibilidad entre sus programas , por ello luego de crear un diseo o pieza grfica en
illustrator podemos exportarla a photshop sin perder sus propiedades.
Nos ubicamos en Menu Archivo Exportar
Elegimos la opcin .psd (adobe photoshop)
Luego en
el
siguiente cuadro podremos elegir la resolucin, modo
de color y si queremos conservar las capas de
nuestro objeto o deseamos exportarlas en una sola
capa.
Exportar como HTML: En illustrator tenemos

la opcin en convertir el diseo de nuestra
interfaz en una pgina html, con los siguientes
pasos.
Con la herramienta de seleccin de sectores
CIBERTEC
67
dividir por secciones nuestro diseo
Cada recuadro enmarcado por lneas

rojas sern las partes en las que se
dividir nuestro diseo cuando lo
exportemos para web.
Luego nos dirigimos a Menu

Archivo Guardar para
Web. Elegir exportar todas
las capas y de preferencia
en tipo de archivo png.
Con esta opcin podemos guardar

nuestro diseo como html o guardar
las partes de nuestro diseo en una
carpeta para luego trabajar en un
editor web los sectores diseados.
CIBERTEC
68
Resumen
1. Para disear nuestras interfaces web debemos considerar las tendencias en
diseo teniendo en cuenta las tipografas adecuadas, texturas y diseos de
backgrounds personalizados que le den a nuestro diseo un toque individual.
2. Las iconografas e imgenes con vectores son muy apreciadas en los diseo
de pginas web por darle a nuestra pgina un diseo tipo flat, sencillo de
entender, moderno sin cansar la vista en tantos detalles.
3. La utilizacin de iconos es importante por sintetizar la informacin y acortar
camino para ingresar a algunas opciones de nuestro sitio web.
4. Podemos realizar interfaces completas tanto en Adobe Photoshop como en

Adobe Illustrator, creando contenedores, efectos e iconografas.
Organizandonos por grupos de capas o mesas de trabajo respectivamente, lo
cual nos ayudara para una edicin sin retrasos.
unidad:
Tipografas mas usadas en internet :

http://www.culturaweb.com/blog/post/las-20-tipografias-mas-usadas-eninternet
El arte de la tipografa en diseo web : http://www.mas-quedibujitos.com/Blog/el-arte-de-la-tipografia-en-diseno-web/
Tcnicas para usar imgenes en diseo web :

http://www.ciudadano2cero.com/fotos-imagenes-paginas-web/
Consejos para usar photoshop en diseo web :

http://franciscoamk.com/usar-photoshop-diseno-web/
CIBERTEC
69
UNIDAD
3
DISEO
DE
INTERACTIVO
CONTENIDO

Al trmino de la unidad, el alumno desarrolla interfaces web con recursos amigables e
interactivos utilizando los estandares vigentes en el mercado brindando asi soluciones
multimedia con las herramientas oportunas.
Temario
3.1. Tema 6: Adobe Flash orientado a recursos Web


3.1.3.3. Interaccin y navegabilidad de botones con Action script 3.0(tipos de enlaces)
3.1.4. Animaciones multimedia
3.1.5. Diseo de una historia interactiva
3.1.6. Diseo de una interfaz multimedia
3.1.7. Publicacin de archivo en html
3.2. Tema 7: Adobe Edge animate para la interaccion de recursos

3.2.1. Que es Adobe Edge Animate y su Interfaz
3.2.2. Estructura de archivos Adobe Edge Animate (html5 y Css3)
3.2.3.
3.2.3.1.
3.2.3.2.
3.2.3.3.
Diseo de Interfaz
Herramientas de dibujo (creacin de Objetos , rellenos , degradados y contornos)
Creacin de textos
Importar contenidos
CIBERTEC
3.2.3.4.
3.2.4.
3.2.4.1.
3.2.4.2.
3.2.4.3.
3.2.4.4.
3.2.4.5.
3.2.5.
3.2.5.1.
70
Uso de filtros
Creacin de animaciones
Animacin dentro de un diseo HTML
Publicacin para web
Presentacin del Proyecto N3 (Diseo de un sitio web usando Adobe Flash)
Presentacin del Proyecto N4 (Diseo de un sitio web usando Adobe Edge)
CIBERTEC
71
3.1. ADOBE FLASH ORIENTADO A RECURSOS WEB

En la actualidad ya no es tan comn el desarrollo de recursos web con adobe flash, sin
embargo veremo algunos aspectos de diseo interactivo con flash debido a que aun
existen varias pginas vigentes que cuentan con este tipo de recursos.

Creamos un nuevo docuemento con las medidas en pixeles para empezar el diseo de
nuestra interface. Las medidas que usaremos son 1024 px x 780px

Luego de tener configurado nuestro escenario importaremos en el panel de biblioteca
las imgenes a utilizar o los smbolos que necesitaremos para armar nuestro diseo.
Para importar las imgenes

podemos usar la opcin de men
archivo importar a blibioteca
arrastrar la imagen dentro del
panel biblioteca.
CIBERTEC
72
Para crear un smbolo, por

ejemplo,
podemos
crear
un
rectngulo que represente el
contenedor principal y luego
presionando F8 , lo convertimos a
smbolo tipo grafico a continuacin
podemos apreciar que se almaceno
en la biblioteca.

Luego de tener los elementos que vamos a utilizar en nuestro diseo almacenado en el
panel biblioteca, procedemos a ubicarlos haciendo uso del panel lnea de tiempo en el
cual podemos organizar nuestros elementos por capas y grupos as como estableces
cuanto tiempo permanecern en escena por el manejo de fotogramas.
FotogramaClave
Fotograma Normal
En esta imagen identificamos 2 tipos de fotogramas : Fotograma clave , representa el

inicio o el cambio de un elemento dentro de la animacin, fotograma normal segn su
extencin representa el tiempo que durar dicho objeto en la animacin.

En la barra de herramientas tenemos elementos que
nos servirn desde para crear contenedores hasta
herramientas de dibujo a mano alzada para poder
crear algunas animaciones.
A continuacin describiremos algunas de las herramientas principales:

CIBERTEC
73
Herramienta Seleccin (flecha):

. Es la herramienta ms usada de todas. Su uso
principal es para seleccionar objetos. permite seleccionar los bordes de los objetos, los
rellenos (con un slo clic), los bordes (con doble clic), zonas a nuestra eleccin...
Adems, su uso adecuado puede ahorrarnos tiempo en el trabajo.
Herramienta Lnea:
Permite crear lneas rectas de un modo rpido. Las lneas se
crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde
queramos que llegue la lnea recta. Una vez creada la podemos modificar sin ms que
seleccionar situar el cursor encima de los extremos para estirarlos y en cualquier otra
parte cercana a la recta para curvarla.
Herramienta Texto:
Crea un texto en el lugar en el que hagamos clic. Sus
propiedades se vern en el tema siguiente.
Herramienta valo:
La herramienta valo permite trazar crculos o elipses de
manera rpida y sencilla.
Herramienta Rectngulo:
Su manejo es idntico al de la Herramienta valo, tan
solo se diferencian en el tipo de objetos que crean.
Herramienta Lpiz:
Es la primera Herramienta de dibujo propiamente dicho.
Permite dibujar lneas con la forma que decidamos, modificando la forma de estas a
nuestro gusto. El color que aplicar esta Herramienta se puede modificar, bien desde
el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en laBarra de
Herramientas.
Herramienta Brocha:
Su funcionalidad equivale a la del lpiz, pero su trazo es
mucho ms grueso. Se suele emplear para aplicar rellenos. Se puede modificar su
grosor y forma de trazo.
Herramienta Cubo de Pintura:
Permite aplicar rellenos a los objetos que hayamos
creado. Al contrario que muchos otros programas de dibujo, no permite aplicar rellenos
si la zona no est delimitada por un borde. El color que aplicar esta Herramienta se
puede modificar, bien desde el Panel Mezclador de Colores o bien desde el
subpanel Colores que hay en la Barra de Herramientas.
Herramienta Borrador:
Su funcionamiento es anlogo a la Herramienta Brocha.
Pero su funcin es la de eliminar todo aquello que "dibuje".
Herramienta Lazo:
Su funcin es complementaria a la de la Herramienta Flecha,
pues puede seleccionar cualquier cosa, sin importar la forma, (la Herramienta Flecha
slo puede seleccionar objetos o zonas rectangulares o cuadradas). En contrapartida,
la Herramienta Lazo no puede seleccionar rellenos u objetos (a menos que hagamos la
seleccin a mano).
CIBERTEC
Al
seleccionar
esta
74
Herramienta,
en
el
Panel
Opciones
aparecen
estas
imgenes:
. Esto, es la Herramienta "Varita Mgica", tan popular en otros
programas de dibujo. Permite hacer selecciones segn los colores de los objetos. El
tercer dibujo que aparece es este:
permite hacer selecciones poligonales.

Para disear un slider animado en flash, primero
tenemos que establecer que tamao tendrn nuestras
imgenes en dentro de nuestro diseo, se recomienda
estandarizar su tamao antes de importarlas a la
biblioteca. Luego las importamos al panel biblioteca y las
convertimos en smbolo tipo grafico dndoles nombres
correlativos.

Para crear el efecto deslizante de las imgenes necesitamos crear un clip de pelcula,
que es un tipo de smbolo en el cual podemos agrupar varias animaciones y colocarlas
como uno solo en la lnea de tiempo principal de nuesto escenario.
Comenzamos trayendo
al escenario la imagen
numero uno del slider y
a
continuacin
la
convertimos en clip de
pelcula presionando la
tecla F8.
CIBERTEC
75
El smbolo clip de pelcula tiene como icono representatico una

pequea tuerca, tal como vemos en la imagen.

Existen 3 tipos de interpolaciones bsicas: clsica, de forma y de movimiento, a
continuacin explicaremos un concepto bsico de cada una de ellas.
La interpolacin clsica, igual que

la interpolacin de movimiento,
consiste en el desplazamiento de un
smbolo de uno a otro lado del
escenario.Las
animaciones
se
aplican sobre simbolos y deben
estar en la misma capa.
La interpolacin de forma, trabaja con

formas vectoriales dentro de un fotograma
en concreto, dibujandose otra forma en otr
fotograma especifico. Flash interpolar las
formas intermedias creando una animacin
de una forma cambiante.
La interpoalcin de movimiento nos

permiten realizar cambios en la posicin y
forma respectivamente. Solo se puede
aplicar a smbolos.
(Fuente: http://es.calameo.com/read/0006456507c577b6aba9f)
CIBERTEC
76
Para nuestro ejercicio utilizaremos la interpolacin clsica.

Paso 1: Ingresar a la lnea de tiempo del clip de pelcula, esto se realiza dando doble
clic al clip de pelcula que hemos creado.
Paso 2: Ubicar en cada capa de la lnea de tiempo cada una de las imgenes, cada
imagen tendr una duracin de 30fotogramas por lo tanto cada una de las imgenes
empezar 5 segundos antes de concluir la anterior.
Ej : imagen 1 va desde el fotograma 1 al 30 , imagen 2 va desde el fotograma 25 al 60.
Paso 3: En el ltimo frame de cada

imagen crear un fotograma clave con
F6 y darle un efecto del tipo alfa al 20%
para que la imagen se desvanesca y
entre la siguiente. Aplicar entre cada
tramo de fotogramas clave la
interpolacin clsica que esta dando
clic derecho entre las lneas de tiempo.
Luego regresamos a el escenario principal y probamos n uestro slider, si es que la

animacin transcurre muy rpido podemos bajar los fps a 12.
CIBERTEC
77

ActionScript 3.0 es el lenguaje ActionScript usado en las ultimas versiones de adobe
flash. Este lenguaje define la sintaxis as como los tipos de datos de nivel superior
para programar elementos en adobe flash.

Haremos uso de este tipo de smbolos para crear el men interactivo. La creacin de un
botn tiene tres aspectos a configurar:
El diseo del botn,
La interaccin del botn en sus tres estados (reposo, sobre y activo) y
El aspecto funcional que son las intruccines en actin script para que el botn
nos lleve al destino requerido.
Creamos un rectngulo sin
contorno de color #333333
y de tamao 127px x 49px
Luego lo convertimos en
smbolo tipo grafico y por
ultimo a smbolo tipo botn
presionando F8.
Luego con el doble clic sobre el

smbolo botn ingresamos a la lnea
de tipo del botn que es donde
configuramos los aspectos de la i
nteraccin que tendr en cada uno
de
los
estados.Para
ello
presionamos F6 y creamos la
variante del diseo del botn en
cada estado.

Podemos disear nuestros propios botones o tambin utilizar los predeterminados en la
bibiloteca botones.En el ejemplo anterior estbamos en la lnea de tiempo del botn en
cada estado podemos modifica el diseo del mismo.
Reposo :
Sobre:
Presionado:
Realizamos los mismo pasos para las dems opciones .

CIBERTEC
78
Si queremos utilizar diseos de

botones pre establecidos, nos
dirigimos al menu ventana biblioteca
comunes botones
Tendremos el panel de biblioteca de botones para

elegir el que deseemos, para utilizarlo en nuestro
diseo lo arrastramos a n uestro escenario, estos
botones ya tiene configurado el diseo para cada
estado.
3.1.3.3. Interaccin y navegabilidad de

botones con Action script 3.0(tipos de
enlaces)
Luego de tener nuestro men completo, pasaremos a darle a cada botn las
instrucciones necesarias para que funcionen como enlaces. Estos enlaces
pueden llevarnos a una pagina htlm o a otro fotorgama clave.
Seleccionamos el primer botn y le

colocamos un nombre de instancia, luego
presionamos el F9 para aperturar el panel de
acciones.Dentro de este panel existe una
opcin fragmentos de cdigo en donde
temos cdigo ya establecido para poder
usarlo segn la accin que configuremos.
CIBERTEC
79
Por ejemplo:
Si queremos que nos lleve a una pagina web html distina eligiremos la
carpeta acciones y la opcin hacer clic para ir a pgina web.
Si queremos que nos lleve a otro fotograma clave elegimos la carpeta
Navegacin en lnea de tiempo y la opcin hacer clic en fotograma y
detener
Antes de configurar las opciones de navegabilidad, es necesario que uno de nuestros
fotogramas clave que estn en el primer frame, tengan la opcin stop y as no
repodusca toda la animacin hasta nuestras instrucciones por el botn.
Seleccionamos uno de los
fotogramas, presionamos F9 y
en el rea del panel acciones
escribimos: Stop ();, nos
aparecer un smbolo tipo alfa
donde se coloco el stop.
Luego
seleccionamos
el
Boton
Products, ingresamos al panel de
opcines presionando F9 , y elegimos
la
opcin
de
navegacin
por
fotogramas, indicndole que nos envie
al fotograma clave donde estar
desarrollada la opcin correspondiente.
A continuacin nos mostrara el siguiente cdigo el cual tenemos que modificar

colocndole el nmero del fotograma donde deseamos que nos lleve.
CIBERTEC
80
Adobe Flash tambin nos proporciona una biblioteca con

sonidos pre establecido, para poder usarlo nos dirigimos a
men Ver Biblioteca comunes Sonidos.
En este panel podemos probar los sonidos asi como
aadirlos en el fotograma donde deseamos que se
reproduzcan, arrastrndolo dentro de dicho fotograma.
Por ejemplo, si queremos colocar un sonido al

pasar por el mouse en nuestras opciones del
men. Nos dirigimos a la lnea de tiempo del
botn seleccionando siempre el fotograma
clave de esta seccin, ahora arrastramos el
sonido a la biblioteca de nuestro proyecto y
luego en el panel de propiedades elegimos el
sonido configurando las propiedades que se
muestran en la imagen.
3.1.4.
Animaciones multimedia
Disearemos un efecto
de mscara aplicado a
una
transcin
de
imgenes, las cuales
iran apareciendo de
manera
circular
de
pequeo a grande.
Colocar una imagen en
el
escenario
y
convertirla a clip de
CIBERTEC
81
pelcula, dentro de la lnea de tiempo de clip de pelcula creamos una capa superior
llamada mascara y animamos un circulo que empieze pequeo en el frame 1 y termine
grande en el frame 30 aplicndole una interpolacin clsica.
En una capa inferior colocar una imagen la cual ser afectada por la mscara que
estamos creando.
Frame 1
Frame 30
El siguiente paso ser dar clic derecho a la capa mscara y chequear la opcin
mscara
para
que aplique el
efecto a la imagen
que esta debajo y
muestre
la
aparicin de dicha
imagen de manera
circular.

Los filtros son los equivalentes a los estilos
de capas en adobe photshop , se los
podemos agregar a los smbolos como clip
de pelcula y botones , para aplicar un
filtro :
Seleccionar el smbolo.
Nos ubicamos en la parte inferior
del panel de propiedades del
smbolo.
Tenemos una seccin de Filtros y
un botn inferior donde podemos
agregar y configurar cada filtro.
CIBERTEC
82
Los filtros se pueden configurar en

desenfoque, calidad, intensidad, entre
otras propiedades segn lo requiera
nuestro diseo. Los filtros disponibles son
los siguientes:
3.1.5.
Diseo de una historia interactiva
Podemos crear historias interactivas con flash por medio de botones y acciones con
cdigo actin script.
Crearemos una interaccin para que al momento de dar clic a una imagen aparesca la
informacin solicitada.
Creamos la imagen tipo botn, en una nueva capa insertamos
una imagen la cual convertiremos primero a smbolo grfico y
luego a botn.
En otra capa crearemos el contenido interactivo que mostrara dicha imagen,

podemos animar el contenido aplicndole un efecto alfa para que le de un efecto
de aparicin o una animacin del tipo escala en donde el contenido valla
apareciendo aumentando su tamao.
En este ejemplo crearemos el

contenido y le daremos un
efecto alfa, para ello creamos
el contenedor y su contenido
Converimos en clip de pelcula
,
CIBERTEC
83
Dentro del clip de pelcula

creamos fotogramas clave
El efecto alfa va desde
fotograma 1 en alfa de 10%
al fotograma 30 en alfa de
100% ,
Seguidamente
aplicamos
interpolacin clsica para
lograr el efecto.
Lo que queda por hacer es dar las intruccioes en el panel de acciones de action script
para que al dar clic en la imagen aparesca la animacin del contenido.
Seleccionamos la imagen presionamos F9 para ingresar al panel de acciones,
seleccionamos en fragmentos de cdigo la opcin navegar en la lnea de tiempo y
escribimos en el cdigo el nmero de fotograma donde esta el contenido animado.
CIBERTEC
3.1.6.
84
Diseo de una interfaz multimedia
Con Adobe Flash podemos disear recursos independientes como sliders, mens y
otros efectos, los cuales se integran luego a nuestra estructura html, como tambin
tenemos la posibilidad de armar toda nuestra interfaz dentro del programa. Para ello
configuraremos el escenario con la medida total de nuestro diseo e iremos
estructurando y creando los recursos de nuestra interfaz.
A continuacin crearemos una inaterfaz para una pgina de inicio.
Paso 1: Configuramos un escenario de medidas
1024px x 780 px. de color de fondo #333333
Paso 2: Creamos una capa llamada contenedor
principal de medidas 935px x 736px de color
#666666 y la convertimos en simbolo grfico; en
este contenedor organizaremos los dems recursos
de nuestro diseo.
Paso 3: Creamos una capa llamada men en la cual
dibujaremos una lnea para el soporte del men asi
como los botones que nos llevaran a las dems
opciones.
Ubicacin del Men
Capas: Contenedor principal y

men.
Hasta este momento hemos creado las capas que permanecern en todo el
diseo de nuestras interfaces, por lo tanto la dimensin de la lnea de tiempo de
estas capas tendrn que mantenerse a lo largo de las siguientes capas que
crearemos.
Paso 4: Crear
una
carpeta llamada home,
que
contendr
los
recursos pertenecientes a
esta seccin, dentro de
esta carpeta creamos
una capa llamada sliderimgenes, dentro de esta
CIBERTEC
85
capa pegaremos el clip de

pelcula con el slider que hicimos
en el tema de sliders. Lo
colocaremos en la parte inferior al
men.
Paso 5: Luego crearemos dentro

de la carpeta home , una nueva
capa llamada contenedores home
en
donde
colocaremos
contenedores con la informacin
de esta seccin.
Paso 6: Si deseamos crear las dems secciones crearemos nuevas carpetas con el
nombre de cada seccin y dentro de ellas las capas con sus respectivos elementos. Por
ultimo configuraremos por medio de action script los botones del men para que nos
lleven a los fotogramas correspondientes de cada seccin.
CIBERTEC
3.1.7.
86
Publicacin de archivo en html
Cuando terminamos nuestra animacin podemos exportarla con

extencin .swf que es el archivo de publicacin de flash con el
cual tenemos nuestra animacin lista para visualizar e insertarla
como recurso web en cualquier pgina html.
Para publicar este archivo tenemos que dirigirnos al men
Archivo- Configurar publicacin y elegir la ubicacin donde se
publicar nuestra pelcula de flash.
Para
visualizar
esta
publicacin cabe resaltar que
el
equipo
debe
tener
instalado el Adobe flash
media player.
Si queremos exportar nuestra pelcula flash como archivo html nos dirigimos al menn
Archivo Configurar publicacin y le damos check a la opcin Envoltorio HTML y
configuramos la ubicacin en donde se exportar nuestro html de flash.
CIBERTEC
3.2.
87
ADOBE EDGE ANIMATE PARA LA INTERACCION DE RECURSOS
3.2.1. Que es Adobe Edge Animate y su Interfaz
Adobe Edge es un nuevo software de la familia Adobe, con la cual podemos crear
animaciones para nuestra web, este programa surge como una alternativa a adobe
flash siendo ms compatible con los navegadores web asi como en telefona mvil y
tabletas IPad.
Adobe Edge aun esta insertndose en el mercado por lo que no tiene las multiples
opciones que posee adobe flash , sin embargo, es buena alternativa para afrontar el
diseo
de
animaciones
en
cdigo
abierto
no
propietario y sobre todo destinado a todo tipo de navegadores y dispositivos.
Una gran diferencia entre flash y adobe Edge es que este ltimo utiliza tecnologa
HTML5 , Css3 y Javascript para mostrar sus contenidos animados , es por eso la gran
compatiblidad entre navegadores.
La interfaz de este editor de animaciones es amigable al usuario, mantiene algunas
caracteristicas del adobe flash, por ejemplo la lnea de tiempo as como botones para
controlar la repodroduccin de las animaciones.
CIBERTEC
88
A continuacin conoceremos el entorno de adobe Edge.
1. Barra de Mens. Ofrece el acceso a todas las opciones del programa en

una barra de mens que es tpica en programas Windows: File, Edit, View,
(Archivo, Editar, Ver,)
2. Barra de Herramientas. Dispone de las principales herramientas de
trazado y ubicacin de elementos sobre el escenario: Seleccin,
Transformacin, Recorte, Rectngulo, Rectngulo redondeado, Texto, Color
del Fondo, etc.
3. Panel de Propiedades. Permite editar las propiedades del escenario
(Stage) o del objeto que est seleccionado actualmente sobre el escenario.
Estas propiedades son el nombre del objeto, las coordenadas X e Y de la
posicin en el escenario, la anchura y altura, los valores de transformacingiro, etc.
4. Escenario. Es el lienzo blanco donde se sitan y animan los objetos que
ver el usuario final de la animacin.
5. Panel de Elementos. Muestra los distintos elementos que forman la
animacin y que aparecen en el escenario. Pueden ser imgenes, rectngulos,
cuadros de texto, smbolos, etc. Cada elemento se sita en una capa
independiente en este panel situndose de forma ordenada de arriba hacia
abajo segn el orden en que muestran en el escenario de delante hacia atrs.
Se puede modificar este orden de solapamiento simplemente arrastrando un
elemento sobre otro en este panel.
6. Panel de Biblioteca. Contiene las imgenes importadas en la pestaa Assets
(Activos), los smbolos creados en la pestaa Symbols (Smbolos) y las
fuentes de texto importadas en la pestaa Fonts (Fuentes). Los smbolos son
objetos reutilizables que tienen su propia lnea de tiempo independiente de la
lnea de tiempo principal.
7. Panel de Lnea de tiempo. Contiene los elementos que se animan sobre la
lnea de tiempo. Cada elemento se sita en una capa. La animacin consistir
en definir valores concretos de las propiedades de un elemento en un
fotograma clave inicial y otros valores distintos en otro fotograma clave final.
CIBERTEC
89
Estas propiedades pueden ser el tamao, la posicin en el escenario, el giro, la

opacidad, etc. Adobe Edge generar automticamente una animacin de
transicin progresiva del valor de una propiedad de un fotograma clave a otro.
Esta transicin generar la animacin. Tambin, incluye las acciones (play,
stop, ir a una pgina web, etc.) que se pueden asociar a un fotograma o a un
elemento concreto situado en el escenario.
3.2.2. Estructura de archivos Adobe Edge Animate (html5 y Css3)

HTML5 y Css3 son los lenguajes de
diseo web compatibles como Adobe
Edge. Conoscamos el concepto y
utlidad de estos dos lenguajes.
HTML5, es la versin actual del
Lenguaje de Marcado de Hipertexto,
que como ya sabemos es el cdigo
base con el que se crean las pginas
web. Esta nueva versin introduce
etiquetas exclusivas para audio y video
las que soportan distintos codecs de
reproduccin, asi como etiquetas que
soportan animaciones y contenidos 2D
y 3D sin necesidad de instalar ningn plugin adicional.Como vemos esta versin nos
permite mayor interaccin con nuestra pgina sin dejar de lado la compatibilidad con
los navegadores .
Css3, es la nueva versin de hoja de estilos (donde colocamos las caracteristicas de
diseo de nuestro contenido web) esta nueva versin se comenz a desarrollar en el
2005 ofreciendonos cada vez mas variedad para nuestro diseo web como opciones
de sombreado, redondeado, funciones de movimiento, transformacin y transcisin.
3.2.3. Diseo de Interfaz

3.2.3.1.
Herramientas de dibujo (creacin de Objetos , rellenos ,
degradados y contornos)
Antes de utilizar nuestras herramientas
de dibujo, debemos configura nuestro
documento en el panel de propiedades.
CIBERTEC
90
Los elementos que dibujemos en Edge

animated se almacenan en el panel de
biblioteca.
Adobe Edge no posee herramientas especficas de dibujo como Adobe Flash,

pero si podemos dibujar figuraas bsicas que nos servirn de soporte a nuestras
animaciones. Para dibujar estas figuras en el rea de trabajo las seleccionamos
en la barra de herramientas ubicadas en la parte superior.
Para establecer colores de relleno especficos, degradados, colores o ancos de

trazo o filtros tipo sombra, debemos de seleccionar nuestro objeto y dirigirnos al
panel de propiedades.
CIBERTEC
91
Colores solidos y degradados,

propiedades de trazo.
Tamao y posicin del objeto
Establecer sombra u otros

filtros
Dentro del panel de degradados, se pueden configurar degradados lineales o

radiales.Asi como configurar las siguientes acciones:
Utilizar detenciones de color para crear degradados complejos.
Crear degradados lineales o radiales.
En el caso de los degradados lineales, especificar el ngulo del degradado.
Guardar degradados personalizados como muestras.
Especificar un valor de color en cualquiera de los tres formatos: RGBa,

hexadecimal o HSLa. La a hace referencia al valor de alfa o al valor de la
opacidad. Independientemente del formato que utilice para definir el color,
Animate convierte los valores a formato RGB en ltima instancia.
Para aplicar las propiedades de CSS al degradado radial como, por ejemplo, la
elipse hacia el extremo ms alejado o el crculo hacia el lado ms alejado,
entre otras, mantenga pulsado el botn de degradado radial. Seleccione la
opcin que desea aplicar.
A continuacin, describiremos las propiedades de la opcin de degradados:
CIBERTEC
92
A. Quitar color B. ngulo de degradado lineal C. Muestra de degradado

lineal D. Muestra de degradado radial E. Detencin de color F. Aadir muestras de
degradado G. Repetir patrn H. Botones de formato de color I. Regulador de
luminosidad J.Regulador de color K. Regulador de opacidad L. Aadir muestra de
color M. Muestra de color N. Color seleccionado O. Color original P. Botn de
degradado radial Q. Botn Degradado R. Botn de degradado lineal.
(fuente : https://helpx.adobe.com/es/edge-animate/using/whats-new-edge-animate-15.html#id_97541)
3.2.3.2.
Creacin de textos
Para trabajar textos de manera correcta es

necesario que utilizemos reglas y lneas gua, para
habilitarlas nos dirigimos al men ver reglas o
lneas gua.
Cuando pulsemos la herramienta texto, que se encuentra en la barra de herramientas de

la parte superior, nos aparecer una caja de texto donde podremos introducir nuestro
contenido.
CIBERTEC
93
Dicha ventana solo aparece para que nosotros podamos

editar nuestro contenido una vez terminado le damos clic al
botn cerrar que se encuentra en la parte superior de la
ventana y solo nos quedaremos con el contenido
introducido.
Si queremos modificar un texto ya creado, debemos de

seleccionarlo y con el clic derecho elegir la opcin de
editar texto.
Cuando estamos editando algn texto, tenemos a nuestra disposicin en panel

propiedades con las caracteristicas principales del texto para poder configurar su
tamao, posicin, interlineado y tipogrfia.
Posicin y tamao
Tipo de Fuente, tamao y color
CIBERTEC
94
Para trabajar con una fuente externa, debemos de seguir los siguientes pasos:
Trabajaremos con la pagina de https://www.google.com/fonts , para elegir nuestra
fuente. Cuando la seleccionemos vamos a copiar el cdigo de su ubicacin en el
servidor.
En el panel de bibiliteca ubicamos la biblioteca correspondiente a fuente y le damos clic

al botn aadir fuente (+), nos mostrar la siguiente ventana donde colocaremos el
nombre y ruta de la fuente.
Una vez que aadimos la fuente podemos ubicarla en el panel de propiedades para
utilizarla.
3.2.3.3.
Importar contenidos
Para importar nuestros archivos de la manera ms nos dirigimos al men File >
Import o con su atajo de teclado cmd + I , ubicamos la carpeta m seleccionamos las
imgenes que necesitaremos y dar click en Open.
Edge al igual que varios
programas de la familia
de Adobe nos
permite
importar nuestros archivos al
rea de trabajo de distintas
maneras, y en esta ocasin lo
que tambin podemos hacer
es ir a nuestro escritorio y
buscar
los archivos que
queremos importar y los
arrastramos y soltamos en el
rea de trabajo.
CIBERTEC
95
Una caracterstica importante en Adobe Edge es

que cuando importamos nuestros elementos o
archivos, estos se cargan en capas independientes
dentro de la lnea de tiempo listos para ser
animados.
A su vez los objetos que importemos asi como los

que creemos dento de Adobe Edge se cargan en el
panel Elements en donde podemos volverlos a
organizar o anidar.
3.2.3.4.
Uso de filtros
Los filtros son una herramienta eficaz que

los autores web pueden utilizar para
conseguir interesantes efectos visuales.
Las opciones del panel Filtros nos ayudan
a aplicar rpidamente filtros CSS a
smbolos, texto, etiquetas div e imgenes.
Anteriormente, solo poda aplicar estos
efectos mediante un editor de imgenes.
Actualmente, los filtros CSS son
compatibles con las versiones ms
recientes de Chrome, Safari, iOS6 y
Blackberry 10.
Para aplicar un filtro CSS, seleccione un
objeto del escenario y utilizamos las opciones del panel Filtros con fin el de aplicar los
efectos deseados.Por ejemplo, para aplicar filtros a la imagen insertada,
seleccionamos la imagen y aplicamos los filtros que deseamos.
Para quitar un filtro del elemento, haga clic en el botn x correspondiente.
(fuente : https://helpx.adobe.com/es/edge-animate/using/whats-new-edge-animate-15.html#id_97541)
CIBERTEC
96
Seleccionar la imagen
aplicar los filtros por

medio de los diales
3.2.4. Creacin de animaciones

Podemos crear animaciones en Edge Animate utilizando mtodos de animacin
tradicionales basados en fotogramas clave. Edge Animate tambin proporciona un
mtodo alternativo basado en la herramienta Pin para crear fotogramas clave.
3.2.4.1.
Los fotogramas clave especifican el valor de una propiedad en un punto del tiempo.
Cuando la animacin se lleva a cabo con fotogramas clave, se aade un fotograma
clave a dos o ms ubicaciones en la lnea de tiempo y se definen las propiedades de
los distintos elementos en cada lugar. Edge Animate utiliza los valores de la propiedad
para animar el contenido entre los fotogramas clave.
Para animar con fotogramas clave:
Seleccionamos el elemento que desee animar en el escenario.
Movemos el cabezal de reproduccin a la ubicacin en la lnea de tiempo en la

que desea que comience la animacin.
En el panel de propiedades del elemento,

hacemos clic en el botn Aadir fotograma
clave (botn en forma de rombo) que hay
junto a la propiedad que desea cambiar con
el tiempo.
Movemos el cabezal de reproduccin a otra

ubicacin en la lnea de tiempo y cambiamos el
valor de la propiedad.
Edge aade automticamente un fotograma

clave final y crea la transicin.
CIBERTEC
97
Para obtener una vista previa de la animacin, haga clic en el botn

Reproducir en el panel de la lnea de tiempo o presione la barra espaciadora
del teclado.
(Fuente: https://helpx.adobe.com/es/edge-animate/using/create-animations.html)
Si queremos editar fotogramas claves individuales seguiremos estos pasos:
Mueva el cabezal de reproduccin a un fotograma clave (icono en forma de

rombo) en la lnea de tiempo.
Cambie el valor de la propiedad editable en el lado izquierdo del panel Lnea de

tiempo.
3.2.4.2.
De la misma manera de como hemos

aplicado filtros, podemos seleccionar un
objeto y en el panel de transformacin,
modificar su tamao, eje o rotacin.
Es de utilidad para poder escalar por
ejemplo nuestros obejtos dentro de una
animacin.
3.2.4.3.
Adobe Edge anmate , posee una biblioteca con transciones animadas , esta biblioteca
consta con mas de 25 efectos.
Las transiciones en Adobe edge son el paralelo de las interpolaciones que conocamos
en Adobe flash, los botones de activacin para la transicin automtica se encuentra en
la parte superior de la lnea de tiempo.
Cuando el modo automatico de transiciones esta activado, se crea sin necesidad de

configurar nada ms una interpolacin desde un fotograma a otro del mismo objeto.
Si queremos crear una transcin personalizada, seleccionamos un bloque de
fotograma clave a fotograma clave en la lnea de tiempo y con el clic derecho elegimos
la opcin de Crear transicin.
CIBERTEC
98
Para seleccionar el tipo de transicin luego seleccionamos nuestro objeto y con el clic
derecho aadimos la opcin Add Key frame y elegimos el tipo de transcin.
Si deseamos copiar una transicin ya creada podemos copiarla en la lnea de tiempo del
mismo elemento o de otro elemento siguiendo estos pasos:
Clic en una transicin en la lnea de tiempo para seleccionarla. Cuando se

selecciona esta opcin, aparece un borde de color naranja alrededor de la
barra de transicin en la lnea de tiempo.
Presionamos Ctrl+C (Windows) o Cmd+C (Macintosh) para copiar la transicin

en el Portapapeles.
Tambin podemos cortar la transicin desde el elemento con Ctrl+X (Windows)

o Cmd+X (Macintosh).
Si deseamos copiar la transicin a otro elemento, seleccionamos el elemento

en el escenario:
1. Movemos el cabezal de reproduccin a la ubicacin en la que se desea
que comience la transicin copiada.
2. Presionamos Ctrl+V (Windows) o Cmd+V (Macintosh) para pegar la
transicin en la lnea de tiempo.
CIBERTEC
3.2.4.4.
99
Los efectos de asceleracin se aplican segn la transcin o animacin del objeto, por
defecto la aceleracin de cualquier animacin es lineal, si nosotros deseamos cambiar
este tipo de animacin, nos dirigimos al botn asceleracin que esta sobre la lnea de
tiempo.
Los tipos de asceleracin disponibles son linear, ease in o aceleracin , ease out o
desaceleracin , ease in out o acelerar y desacelerar y swing o oscilante.
Cada una de estos tipos de ascelaracin contiene ms opciones.Por ejemplo la opcin

desaceleracin o Ease Out.
Para aplicar cualquiera de estos tipos de asceleracin solo basta con darle clic a la
elegida.
La herramienta Toggle Pin, fija los valores de las propiedades de los elementos en un
punto del tiempo en la lnea de tiempo. Cuando se realiza una edicin, la herramienta
Pin fija el valor actual mientras se cambian los valores de las propiedades en el cabezal
de reproduccin. Edge Animate genera los fotogramas clave y las transiciones al
cabezal de reproduccin o desde este.
Para animar con esta herramienta debemos de hacer lo siguiente:
CIBERTEC
100
Definimos las propiedades del elemento que desee fijar a un punto del tiempo
en la lnea de tiempo.
Hacemos clic en el botn Alternar pin en el panel Lnea de tiempo.

Para activar el pin, tambin puede
hacer doble clic en el cabezal de
reproduccin o presionar la P del
teclado.
Arrastrar el pin de la lnea de tiempo al

punto de la lnea de tiempo en el que
quiera fijar las propiedades del
elemento.
Con las propiedades iniciales fijadas, cambiamos los valores de las

propiedades del elemento.
Debido a que el patrn tipo "chevron" apunta al cabezal de reproduccin, los

cambios se establecen en la ubicacin del cabezal de reproduccin.
Adobe Edge Animate aade automticamente fotogramas clave y transiciones

entre el cabezal de reproduccin y las posiciones del pin. No tiene que aadir
manualmente fotogramas clave o volver a colocar el cabezal de reproduccin
en la lnea de tiempo.
(Fuente: https://helpx.adobe.com/es/edge-animate/using/create-animations.html)
3.2.4.5.
Una vez que terminemos un proyecto necesitamos configurar como lo guardaremos, en

que ubicacin y que archivos se generan.Es conveniente guardar cada proyecto de
animacin de Adobe Edge en una carpeta independiente del resto. Para guardar
nuestro proyecto seguimos estos pasos:
Selecciona File > Save As (Archivo >Guardar como)

Clic en el botn Examinar carpetas para ofrecer una visin ampliada de este
cuadro de dilogo.
Clic en el botn Nueva carpeta para crear una nueva carpeta con el nombre,
por ejemplo autoMovie. Tras aceptar nos ha creado esta carpeta y nos ha
situadodentro.
Introduce como nombre de la pgina HTML: autoMovie.html y pulsa en el
botn Guardar.
Tambin, es posible definir como nombre del archivo:index.html
CIBERTEC
101
Si visitamos la carpeta destino

con el explorador de archivos,
veremos que se han creado los
siguientes archivos y carpetas:
3.2.5. Animacin dentro de un diseo HTML

A continuacin crearemos un banner animado el cual funciona por medio de un botn
play, el cual luego configuraremos para publicarlo en la web.
Paso 1. Importar los archivos grficos: Importar los dos archivos de imagen:
auto.png y fondo.jpg.
Paso 2. Configurar las propiedades del Escenario (Stage)
En el panel Properties (Propiedades), podemos configurar las propiedades

del escenario principal Stage de la animacin.
En el cuadro de texto Untitled (Sin ttulo) haz clic para introducir el nombre
del proyecto; por ejemplo, autoMovie.
Clic en las dimensiones W-Width
(Anchura) y H-Height (Altura) para
definir un
tamao del escenario: 550x400
pxeles. Es el tamao de la imagen
que utilizaremos de
fondo.
Clic en el cuadro de color de fondo
situado a la derecha de las
dimensiones para definir el color
del escenario. En este caso,
vamos a elegir el color negro.
Asegrate de que la casilla de
CIBERTEC
102
verificacin AutoPlay (Reproduccin automtica)

est activada para que la animacin se inicie inmediatamente despus de su
descarga al equipo del cliente
En la seccin Preloader (Cargador), selecciona la opcin Immediate
(Inmediato) y pulsa en el botn Edit.
A continuacin, haz clic en el botn Insert Preloader Clip-Art (Insertar Clip-Art
para el Cargador). En el catlogo,
elige una opcin; por ejemplo, la
barra de progreso horizontal de
dimensiones 220x1 9px. Para
regresar al escenario principal, haz
clic en la palabra Stage en el texto
<- Stage /preloader que se muestra
en la pestaa que contiene el
escenario
.
Paso 3. Situar los elementos sobre el escenario
Arrastra una instancia de la imagen

fondo.jpg
desde
la
Library
(Biblioteca)
hasta
el
Stage
(Escenario). Sitalo de tal forma que
se ajuste a las dimensiones del
escenario.
Para ver el escenario en su
totalidad, puedes utilizar el Zoom.
Para ello, selecciona
Ver> Zoom Out o bien pulsa
sucesivamente Ctrl y tecla -Haz clic sobre la imagen que has
situado en el escenario para
seleccionarla.
En el panel Properties
(Propiedades), define en el apartado
Location (Posicin) losvalores 0 px
en las coordenadas X e Y para
ajustar la imagen a la esquina
superior izquierda del escenario.
Arrastra una instancia de la imagen
auto.png desde la Library
(Biblioteca)
hasta el Stage (Escenario). Sitalo
fuera del escenario en la esquina
inferior derecha del mismo.
Paso 4. Crear la animacin del auto
En este caso, vamos a definir una animacin de traslacin sobre el eje X.

Sobre la imagen del auto situada en el escenario, haz clic derecho para
seleccionar
CIBERTEC
103
Add Keyframe > Translate (x) (Aadir Fotograma Clave > Traslacin X).
Observa que al aadir un fotograma clave a la instancia del auto situada sobre
elescenario en la Timeline (Lnea de tiempo), se ha creado una capa con el
nombre del elemento (auto) y debajo una subcapa con la propiedad que
utilizaremos en la animacin, es decir, aquella cuyo valor modificaremos entre
el fotograma clave inicial y final. Se pueden definir varias subcapas para un
elemento. Cada una de ellas se corresponde con una propiedad. Por ejemplo,
en la subcapa Translate (x) se muestra el valor que tendr la propiedad x
(coordenada X de la posicin sobre el escenario) para el fotograma clave inicial
que se muestra en la posicin 0:00 con el cono de un rombo blanco.
Para reducir el zoom de la lnea de tiempo,

arrastra
el
deslizador
situado
en
su
esquina inferior derecha. De esta forma,
podremos acceder a una lnea de tiempo con
una cadencia ms grande; por ejemplo, de
segundo en segundo.
Clic sobre la escala graduada de la lnea de tiempo, por

ejemplo, en el segundo 0:05, para situar la cabeza
lectora en ese instante. En esta posicin, vamos a
situar el fotograma clave final.
CIBERTEC
104
Clic en el botn Add KeyFrame (Aadir Fotograma Clave) que acompaa a la

capa Translate (x).
En el instante 0:05, se ha insertado un fotograma clave que se muestra en
lasubcapa Translate (x) con el cono de un rombo blanco.
Es posible personalizar el tipo de animacin que se aplicar. Por defecto es

Linear (Lineal), es decir, la variacin de la propiedad (la coordenada X en este
caso)ser uniforme en el tiempo. Pero si pulsamos en este botn situado en la
Timeline(Lnea de tiempo), se podrn elegir distintos modelos de aceleracin:
Ease In, Ease Out, etc. Las grficas que se acompaan ilustran grficamente
cada opcin. En este caso, dejaremos la opcin por defecto Linear.
Asegrate de que la cabeza lectora est situada en la posicin 0:05 donde has
situado el fotograma clave final. Sobre el escenario, haz clic en el auto para
seleccionarlo y a continuacin utiliza una de estas alternativas:
o Pulsa reiteradamente la combinacin de teclas Mayus + Flecha
izquierda para mover el auto y situarlo a la izquierda del escenario.
o Haz clic e introduce por teclado un valor negativo suficiente (ejemplo: 660) en la capa Translate (x)
o Haz clic e introduce el valor suficiente (por ejemplo: -188) de la
coordenada X en el panel Properties (Propiedades)
CIBERTEC
105
Con cualquiera de estas

alternativas, el auto se
situar a la izquierda del
escenario en el fotograma
clave final. Observa que la
lnea de tiempo ahora
muestra en color el espacio
comprendido entre ambos
fotogramas
clave
para
indicar que ha interpolado la
animacin.
Para ver el aspecto de la animacin, haz clic en el botn Play de la Timeline

(Lnea de tiempo). Tambin, es posible ver esa animacin mediante File >
Preview InBrowser (Archivo > Vista previa en Navegador). De esta forma, se
abrir el navegador web por defecto del equipo mostrando la animacin.
Paso 5. Reproduccin Continua

Si observas la animacin resultante, vers que el coche se detiene cuando alcanza la
posicin final. Sin embargo, si deseamos que la animacin se reproduzca de forma
continua, vamos a situar una accin al final de la misma para que cuando la cabeza
lectora alcance la posicin 0:05, esta vuelva a comenzar.
Clic sobre la marca 0:05 de la lnea de tiempo para situar la cabeza lectora en
esta posicin.
Clic en el botn Insert Trigger (Insertar disparador) para insertar una accin en
esta posicin de tal forma que cuando la cabeza lectora alcance esta posicin
ejecute la accin especificada.
En panel de Acciones, haz clic en el botn play. Esto aadir una accin de
inicio de la reproduccin que har que la animacin se reanude
CIBERTEC
106
En este caso, para ver la animacin completa, debers elegir File >
Preview In Browser (Archivo > Vista previa en navegador). De esta forma, se abrir
el navegador web por defecto del equipo mostrando la animacin.
3.2.5.1.
Publicacin para web
Para publicar nuestra animacin guardada con extencin HTML , es necesario que la
subamos a un servidor web .
Como guia veremos los siguientes pasos:
Sube a tu servidor web, Google Sites o DropBox la carpeta que contiene todos
los archivos necesarios para la correcta visualizacin de la animacin. Sern
todos los archivos generados por Adobe Edge a excepcin del archivo *.edge.
Obtn la URL de acceso a la pgina HTML de la animacin.
Puedes enviar esta URL en un email para compartirla con otras personas.
Otra posibilidad es insertarla en una entrada de tu blog. Para ello utiliza el
siguiente cdigo IFRAME:
<iframe src="url_pgina_html" width="550" height="400" frameborder="0"
scrolling="no"></iframe>
En este cdigo, sustituye la URL por la direccin real de la pgina HTML que
muestra la animacin alojada en tu servidor. Recuerda que la anchura (width)
y la altura (height) deben coincidir con las dimensiones definidas para la
animacin en Adobe Edge.
Copia y pega este cdigo en el cdigo HTML de la entrada de tu blog.
(fuente : Tomado de Animaciones HTML5 con Adobe Edge 2012. FPP. canalTIC.com)
CIBERTEC
107
Resumen
1. Adobe Flash es una alternativa que aunque menos presencia que otros
tiempos an sigue vigente para la creacin de recursos de diseos web.
2. Los elementos bsicos para poder crear una animacin en flash son los
smbolos del tipo grfico , botn y clip de pelcula.
3. Dentro de un clip de pelcula se pueden oreganizar varias animaciones a la
vez.
4. Podemos organizar nuestros archivos en flash mediante carpetas que agrupen
capas y asi diferenciar cada parte de nuestras interfaces.
5. Adobe Edge anmate , es una nueva alternativa que lanzo la familia Adobe
para poder crear animaciones orientas al diseo web.
6. Esta nueva herramienta tiene mejor complatiblidad que Adobe flash porque sus
efectos y animaciones se generan com cdigo HTML5 y CSS3 a travs de una
interfaz grfica intuitiva para ul usuario.
7. Las animaciones que creemos con Adobe Edge anmate se pueden exportar
como html y publicarlas en un servidor web.
unidad:
Plantillas de referencia con animaciones de recursos web desarrolladas

en Adobe Flash (http://www.freeplantillas.com/flash-animation/)
Tutorial bsico de Adobe Flash
(http://www.adobe.com/la/products/flash.html)
Elementos bsicos de Adobe Flash
(http://www.cursosenhd.com/featured/curso-flash-professional-cs6capitulo-1-introduccion/#.VcBi4_l_Oko)
Conceptos de HTML5 (http://www.trazos-web.com/2010/02/01/html5que-es-y-como-usarlo/)
Tutorial oficial de Adobe para Adobe Edge
(https://helpx.adobe.com/edge-animate/tutorials.html)
Aplicin de filtros en Adobe Edge
(https://helpx.adobe.com/edge-animate/how-to/edge-animate-css
filters.html?product=animate&path=fundamentals)
Novedades en Adobe Edge (https://helpx.adobe.com/es/edgeanimate/using/whats-new-edge-animate-15.html#id_97541)
CIBERTEC
108
CIBERTEC

FGFGFGFHFBFB

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

FGFGFGFHFBFB

Hochgeladen von

Copyright:

Verfügbare Formate

.

DISEO DE INTERFACES MULTIMEDIA

CONCEPTO FUNDAMENTALES DEL DISEO WEB

1.2 Tema 2: Organizacin de un Proyecto Web

Tipografias para Web

2.2 Tema 4: Diseo de Interfaces usando Adobe Photoshop

Tamaos de pantallas y elementos dentro del diseo

2.3 Tema 5 : Diseo de Interfaces usando Adobe Illustrator

Configuracin de mesas de trabajo para interfaces

CARRERA DE DISEO Y PUBLICIDAD

DISEO DE INTERFACES MULTIMEDIA

DISEO DE CONTENIDO INTERACTIVO

3.2. Tema 7: Adobe Edge animate para la interaccion de recursos

Que es Adobe Edge Animate y su Interfaz

CARRERA DE DISEO Y PUBLICIDAD

DISEO DE INTERFACES MULTIMEDIA

CARRERA DE DISEO Y PUBLICIDAD

DISEO DE INTERFACES MULTIMEDIA

DISEO DE INTERFACES MULTIMEDIA

CARRERA DE DISEO Y PUBLICIDAD

DISEO DE INTERFACES MULTIMEDIA

1.2 Tema 2: Organizacin de un Proyecto Web

CARRERA DE DISEO Y PUBLICIDAD

DISEO DE INTERFACES MULTIMEDIA

1.1. CONCEPTOS BASICOS DEL DISEO WEB

Figura 1.- Requisitos de visualizacin de una pgina web.

CARRERA DE DISEO Y PUBLICIDAD

DISEO DE INTERFACES MULTIMEDIA

Figura 2.- Estructura de una Pgina HTML y un Sitio Web

Diseo de Interfaces Web orientada a aplicaciones de escritorios y

La interfaz web es la cara de presentacin de nuestras pginas web en la cual

El desarrollo de una interfaz es parte de un proceso multidisciplinario en donde

CARRERA DE DISEO Y PUBLICIDAD

DISEO DE INTERFACES MULTIMEDIA

Figura 4.- Metodologa del Proceso de Diseo de Interfaces

Figura 5 Ejemplo de interfaz web para desktop

CARRERA DE DISEO Y PUBLICIDAD

DISEO DE INTERFACES MULTIMEDIA

Aqu Presentamos algunos ejemplos de interfaces web para desktop originales:

CARRERA DE DISEO Y PUBLICIDAD

DISEO DE INTERFACES MULTIMEDIA

CARRERA DE DISEO Y PUBLICIDAD

DISEO DE INTERFACES MULTIMEDIA

Punto de Atencin: Determinar cual

Movimiento del Ojo : Un buen

Colores Balance y Peso :

Combinacin de colores, animaciones,

CARRERA DE DISEO Y PUBLICIDAD

DISEO DE INTERFACES MULTIMEDIA

Representa el area que

Figura que representa

Tipos de Entornos de VideoJuegos

Diseo de Interfaces Web segn dispositivos mviles (Tablets y

En la actualidad el uso de dispositivos mviles como tablets y smartphone para la

CARRERA DE DISEO Y PUBLICIDAD

DISEO DE INTERFACES MULTIMEDIA

Figura 6 Estadsticas de Uso de dispositivos mviles en el mundo

Una de las consideraciones importantes es maquetar el diseo de nuestra web en

Figura 7 Ejemplo de Diseo adaptado a dispositivos mviles

Segn el ejemplo que visualizamos de izquierda a derecha tenemos el mismo diseo

CARRERA DE DISEO Y PUBLICIDAD

DISEO DE INTERFACES MULTIMEDIA

desktop. Tengamos en cuenta para disear o maquetar de esta manera adaptativa