1.- Iniciar software Adobe Photoshop y crear un nuevo archivo (Atajo de teclado Ctrl + N) de medidas 1920 x 1080 pixeles, resoluci\u00f3n 72 y fondo transparente.<\/p>\n
2.- Componer una escena acorde a los conceptos y tema elegido. Los elementos para agregar pueden ser el t\u00edtulo del portal web, zonas de textos simples para sugerir botoner\u00edas y\/o zonas de despliegue de informaci\u00f3n.<\/p>\n 3.- Destacar de la escena algunos elementos gr\u00e1ficos para transformar en botones de interacci\u00f3n posteriormente en el software Adobe Animate.<\/p>\n 4.- Cortar los elementos de la escena y crear las versiones de gr\u00e1fica alternativa (imagen en negativo, monocolor, multicolor, distorsi\u00f3n, etc.). Para cortar utilizar herramienta \u201cLazo poligonal\u201d (Atajo de teclado \u201cL\u201d) y experimentar con las variantes “Lazo” y “Lazo magn\u00e9tico”.<\/p>\n 5.- Las im\u00e1genes creadas en funci\u00f3n de su concepto a destacar deber\u00edan tener 2 versiones para diferenciar los estados activos del bot\u00f3n para crear. Una versi\u00f3n id\u00e9ntica a la figura en la imagen de fondo y otra versi\u00f3n alternativa para destacar al posicionar el cursor encima (bot\u00f3n rollover).<\/p>\n 6.- Exportar todos los archivos en formato PNG 24 transparente desde la opci\u00f3n \u201cGuardar para web<\/em>\u201d (Atajo de teclado CTRL + Shift + Alt + S). Crear una carpeta exclusiva para la gr\u00e1fica del portal web.<\/p>\n Creaci\u00f3n y programaci\u00f3n web en Adobe Animate.<\/em><\/strong><\/p>\n 1.- Iniciar software Adobe Animate y crear un nuevo archivo de medidas 1920 x 1080 pixeles, fotogramas 24 fps y HTML5 Canvas en codificaci\u00f3n.<\/p>\n 2.- Se generar\u00e1 un pa\u00f1o blanco en el cual colocaremos la imagen base de composici\u00f3n creada en Adobe Photoshop. Para ello seleccionaremos el primer frame (en la imagen es el recuadro amarillo A) de la capa nombrada como \u201cFondo\u201d. Para importar vamos a pesta\u00f1a Archivo \/ Importar \/ Importar a escenario<\/em> o podemos utilizar el atajo de teclado Ctrl + R. Guardamos nuestro archivo Adobe Animate en la carpeta con la gr\u00e1fica dise\u00f1ada en Adobe Photoshop.<\/p>\n 3.- Crearemos otra capa a la cual llamaremos \u201cBotones\u201d. Lo ideal es usar nombres sin espacios y de f\u00e1cil asimilaci\u00f3n acorde a los contenidos para todos los escritos. Seleccionando el frame 1 de la capa \u201cBotones\u201d insertaremos un nuevo s\u00edmbolo bot\u00f3n, para ello seleccionamos pesta\u00f1a Insertar \/ Nuevo s\u00edmbolo<\/em> o podemos utilizar el atajo de teclado Ctrl + F8. Colocaremos el nombre del bot\u00f3n y especificaremos que es un bot\u00f3n.<\/p>\n 4.- Se abrir\u00e1 otro pa\u00f1o blanco, el cual es de uso exclusivo para la creaci\u00f3n de botones. Veremos 4 frames activos los cuales tienen una funci\u00f3n visual en particular:<\/p>\n –\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Frame 01: es la gr\u00e1fica del bot\u00f3n en reposo.<\/p>\n –\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Frame 02: es la gr\u00e1fica del bot\u00f3n con el puntero encima.<\/p>\n – \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Frame 03: es la gr\u00e1fica del bot\u00f3n presionado.<\/p>\n –\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Frame 04: es la gr\u00e1fica del bot\u00f3n que delimita la zona activa.<\/p>\n Importaremos al primer frame \u201cReposo\u201d la imagen del robot en rojo (Ctrl + R). Luego presionaremos F6 para pasar al segundo frame, donde importaremos la imagen que indicar\u00e1 que la instancia tiene interactividad y v\u00ednculo a otro sitio web. Posteriormente presionaremos F6 hasta llegar al frame 4 de zona activa. Volveremos a la escena principal clickeando la flecha del recuadro amarillo B.<\/p>\n 5.- Ya en el escenario, seleccionamos el frame 1 de la capa \u201cBotones\u201d y desde el panel biblioteca a mano derecha arrastramos el bot\u00f3n Robot y lo soltamos en el escenario. Lo posicionamos de manera correcta y lo proporcionamos acorde a nuestras necesidades.<\/p>\n 6.- Ahora agregaremos la programaci\u00f3n a nuestro bot\u00f3n. Clickeamos el bot\u00f3n Robot en el escenario y abrimos pesta\u00f1a Ventana \/ Acciones (Tambi\u00e9n podemos utilizar el atajo de teclado F9)<\/em>. Posteriormente seleccionaremos \u201cfragmentos de c\u00f3digo\u201d en el recuadro amarillo C. Tendremos as\u00ed 2 ventanas de programaci\u00f3n abiertas.<\/p>\n 7.- Seleccionaremos el bot\u00f3n Robot en el escenario y en la ventana fragmentos de c\u00f3digo desplegaremos la Carpeta HTML5 Canvas \/ Navegaci\u00f3n de l\u00ednea de tiempo<\/em> y daremos doble click al fragmento de c\u00f3digo \u201cDetener en este fotograma\u201d<\/em> as\u00ed el flujo de avance en el sitio web se detendr\u00e1 en esta escena con nuestro fondo en particular.<\/p>\n Volveremos a seleccionar el bot\u00f3n Robot en el escenario y desplegaremos la Carpeta HTML5 Canvas \/ Acciones<\/em> y daremos doble click al fragmento de c\u00f3digo \u201cHacer click para ir a p\u00e1gina web\u201d<\/em>. Aparecer\u00e1 entonces una codificaci\u00f3n en la cual podremos cambiar la direcci\u00f3n web de destino al hacer click en el bot\u00f3n.<\/p>\n Desde ac\u00e1 y para cada bot\u00f3n hacia web externa a crear utilizaremos el fragmento de c\u00f3digo \u201cHacer click para ir a p\u00e1gina web\u201d <\/em>sin tener que usar \u201cDetener en este fotograma\u201d pues se aplica para todos los primeros frames en la l\u00ednea de tiempo.<\/p>\n 8.- Llegamos a la \u00faltima parte de la creaci\u00f3n del portal, la cual consiste en exportar la web para subirla a un hosting y testear su funcionamiento. Para ello vamos a pesta\u00f1a Archivo \/ Configuraci\u00f3n de publicaci\u00f3n. Se abrir\u00e1 un panel con 3 configuraciones, para la B\u00e1sica elegiremos la carpeta de salida del proyecto web, en el recuadro amarillo D, y seguiremos este patr\u00f3n de arreglos\u2026<\/p>\n <\/p>\n Para el HTML5 \/ JS\u2026<\/p>\n Para la configuraci\u00f3n de imagen\u2026<\/p>\n![\"\"](\"https:\/\/profe.evilspout.com\/tutos\/wp-content\/uploads\/2025\/03\/webttml5canvas11.png\")
<\/a><\/p>\n<\/a><\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n