20
CONSEJOS PRÁCTICOS PARA EL USO DE ÍCONOS E IMÁGENES COMO APOYO VISUAL Guía rápida de buenas prácticas para utilizar, manipular y crear imágenes e íconos sencillos, como apoyo visual en la creación de recursos educativos. TALLER DE IMÁGENES MSc. Melissa Berrocal Jiménez ELABORADO POR: [email protected]

TALLER DE IMÁGENES · Tutorial 4.1 Descargar un ícono Tutorial 3.3 Recortar imágenes Tutorial 4.3 Crear un nuevo ícono en VECTR Tutorial 3.2 Cambiar la calidad al exportar una

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: TALLER DE IMÁGENES · Tutorial 4.1 Descargar un ícono Tutorial 3.3 Recortar imágenes Tutorial 4.3 Crear un nuevo ícono en VECTR Tutorial 3.2 Cambiar la calidad al exportar una

CONSEJOS PRÁCTICOS PARA EL USO DE ÍCONOS E IMÁGENES COMO APOYO VISUAL

Guía rápida de buenas prácticas para utilizar, manipular y crear imágenes e íconos sencillos, como apoyo visual en la

creación de recursos educativos.

TALLER DE IMÁGENES

MSc. Melissa Berrocal Jiménez

ELABORADO POR:

[email protected]

Page 2: TALLER DE IMÁGENES · Tutorial 4.1 Descargar un ícono Tutorial 3.3 Recortar imágenes Tutorial 4.3 Crear un nuevo ícono en VECTR Tutorial 3.2 Cambiar la calidad al exportar una

Taller de imágenes - MSc. Melissa Berrocal Jiménez 2

https://creativecommons.org/licenses/by-nc-sa/4.0/

Los Talleres de Herramientas Digitales son elaborados por profesionales en Diseño y Comunicación Visual de la Unidad TEC Digital.

Se recomienda que estos talleres sean brindados por expertos en la creación de materiales de aprendizaje para ambientes presenciales y virtuales, para que el resultado sea óptimo de acuerdo a las necesidades institucionales. Además, facilitadores de la unidad pueden abarcar dudas correspondiente al desarrollo, ejecución y material brindados durante cada taller.

El TEC Digital no se hace responsable de que terceras personas utilicen estos materiales para otros fines, ni de los resultados que se obtengan a partir de estos.

Los materiales están bajo la Licencia Creative Commons Atribución-NoComercial-CompartirIgual 4.0 Internacional.

Si desea más información o recibir este taller comuníquese a:

CONTÁCTENOS

[email protected]

2550-2069

Page 3: TALLER DE IMÁGENES · Tutorial 4.1 Descargar un ícono Tutorial 3.3 Recortar imágenes Tutorial 4.3 Crear un nuevo ícono en VECTR Tutorial 3.2 Cambiar la calidad al exportar una

Taller de imágenes - MSc. Melissa Berrocal Jiménez 3

ÍNDICE

1. BUENAS PRÁCTICAS PARA LA SELECCIÓN DE IMÁGENES

2. TIPOS Y FORMATOS DE IMÁGENES

3. MODIFICAR DIMENSIONES DE UNA IMAGEN

4. IMÁGENES VECTORIALES

5. OTROS RECURSOS

6. REFERENCIAS

Tutorial 3.1 Modificar las dimensiones de una imagen

Tutorial 4.1 Descargar un ícono

Tutorial 3.3 Recortar imágenes

Tutorial 4.3 Crear un nuevo ícono en VECTR

Tutorial 3.2 Cambiar la calidad al exportar una imagen

Tutorial 4.2 Modificar un SVG o Vector

Tutorial 3.4 Quitar el fondo de imágenes

Tutorial 4.4 Uso de íconos e imágenes en el portal del curso

Pág. 7

Pág. 12

Pág. 9

Pág. 14

Pág. 8

Pág. 13

Pág. 10

Pág. 15

PÁG 4

PÁG 6

PÁG 7

PÁG 12

PÁG 18

PÁG 20

Page 4: TALLER DE IMÁGENES · Tutorial 4.1 Descargar un ícono Tutorial 3.3 Recortar imágenes Tutorial 4.3 Crear un nuevo ícono en VECTR Tutorial 3.2 Cambiar la calidad al exportar una

Taller de imágenes - MSc. Melissa Berrocal Jiménez 4

BUENAS PRÁCTICAS PARA LA SELECCIÓN DE IMÁGENES

1

Este documento es una guía rápida de buenas prácticas para utilizar, manipular y crear imágenes e íconos sencillos como apoyo visual en la creación de recursos educativos.

La información visual ayuda a comprender y responder más rápido en comparación con materiales textuales. Los elementos visuales ayudan a mejorar el aprendizaje, comprender los conceptos fácilmente al estimular la imaginación y afectar sus capacidades cognitivas.

Una selección correcta de imágenes puede convertirse en la herramienta para más eficiente para motivar al usuario y reducir la carga cognitiva.

1. PIENSE EN IMPORTANCIAEvite buscar inspiración. Busque imágenes específicas, relevantes para el tema y su audiencia. Piense qué quiere comunicar y qué quiere que los usuarios aprendan . La imagen o imágenes seleccionadas añaden valor al proceso de aprendizaje.

2. REFUERCE EL MENSAJE Una imagen irrelevante puede distraer y confundir a su audiencia. Las imágenes deben apoyar el texto, transmitir el mensaje y ayudar a comprender el contexto. Si las imágenes no transmiten el mensaje correcto no las utilice.

3. BUSQUE IMÁGENES QUE EVOQUEN ALGUNA EMOCIÓNImágenes con gran carga emotiva pueden hacer que su audiencia recuerde la imagen y el mensaje con mayor facilidad. Las emociones y la información visual se procesan en la misma parte del cerebro humano, por lo que las imágenes y metáforas visuales logran crean impresiones fuertes y recuerdos duraderos en su audiencia.

“EL CEREBRO HUMANO PUEDE PROCESAR IMÁGENES 60,000 MÁS RÁPIDO DE LO QUE COMPRENDE EL TEXTO.”

3M Corporation, 2001

Page 5: TALLER DE IMÁGENES · Tutorial 4.1 Descargar un ícono Tutorial 3.3 Recortar imágenes Tutorial 4.3 Crear un nuevo ícono en VECTR Tutorial 3.2 Cambiar la calidad al exportar una

Taller de imágenes - MSc. Melissa Berrocal Jiménez 5

4.UTILICE TEXTO CONCISO Y CLARO PARA ELIMINAR LA CONFUSIÓN.La imagen debe ser importante, pero recuerde que el texto también. Divida textos en bloques, para facilitar la lectura.

5.FAMILIARIDADSímbolos, lenguaje y referencias familiares facilitan el proceso de aprendizaje, para comprender mejor el material, descifrar patrones y formar asociaciones con el tema.

6. SEA CONSISTENTELas imágenes, íconos y demás material gráfico tiene que ser consistente a lo largo del curso o la presentación. Incorporar muchos estilos o combinaciones puede distraer e interrumpir el proceso de aprendizaje. La consistencia en los elementos ayuda a los estudiantes a concentrarse y les facilita hacer una conexión más acertada con su contenido.

7. ENCUENTRE EL BALANCE ENTRE TAMAÑO Y CALIDADAsegure que esté utilizando el formato y resolución correcto para sus imágenes o gráficos. Emplee un tamaño similar en todas las imágenes, se recomienda utilizar una calidad entre el 80 y el 60% de la imagen original.

Recuerde que cuanto menor sea la resolución, menor será la calidad tendrán las imágenes. Al incluir imágenes de muy alta resolución puede que los archivos sean demasiado pesados para abrir o descargar.

8.NO RECARGUE SUS PRESENTACIÓN CON IMÁGENESAplique una jerarquía clara, utilice una o dos imágenes al lugar de usar muchas imágenes pequeñas. Priorice, recuerde las imágenes son sólo un recurso para guiar el aprendizaje.

9.RECUERDE LOS DERECHOS DE AUTOR Lea las políticas de derechos de autor de cada imagen y respete las leyes de copyright. Si las imágenes que va a usar no provienen de una fuente autorizada, no las utilice. Considere elegir imágenes libres de derechos de autor o bajo la licencia de “Creative Commons”, que vienen con la menor cantidad de restricciones. Para usar este tipo de imágenes, recuerde dar crédito al creador.

Created by Alex Taifrom the Noun Project

Figura 1: Uso de pictogramas para mantener la familiaridad

Figura 2: Inconsistencia del estilo gráfico de íconos

Figura 3: Comparación de calidad en imágenes

CALIDAD 10%

CALIDAD 100%

Por Bakunetsu Kaito

Por buheicon, IDPor Arafat Uddin, BD

Por Brunno Bosse

Page 6: TALLER DE IMÁGENES · Tutorial 4.1 Descargar un ícono Tutorial 3.3 Recortar imágenes Tutorial 4.3 Crear un nuevo ícono en VECTR Tutorial 3.2 Cambiar la calidad al exportar una

Taller de imágenes - MSc. Melissa Berrocal Jiménez 6

Cuando se trabaja con imágenes, se debe valorar el contenido de la imagen, la calidad en función del uso y el tamaño que tendrá el archivo. Las imágenes se dividen en 2 tipos:

FORMATO DE IMAGEN

VENTAJAS DESVENTAJAS

BMP - Bits Map Protocole • Funciona bien con la mayoría de programas en windows y OS

• No se escala ni se comprime bien• No son compatibles con la web

TIFF- Tagged Image File Format

• Ideal para imprimir y procesar fotografías (Nivel Profesional)

• Permite reconocimiento de capas• Se puede editar sin que pierda

calidad

• Tamaño del archivo es muy grande• Consume grandes cantidades de

espacio en el disco duro• Tiempo de descarga es lento

JPEG* - Joint Photographic Experts Group

• Formato popular en medios digitales• Recomentado para fotografías con

gran detalle de color• Comprime gran cantidad de

información de la imagen

• No posee transparencia• No se puede animar• Les añade fondo blanco a las imágenes

sin fondo

GIF - Graphics Interchange Format

• Permite la transparencia• Tiene alta tasa de compresión• Permite exportar secuencias de

animación

• Solo soporta 256 colores• El tamaño del archivo generado es

mayor a generado por el formato PNG

PNG* - Portable Network Graphics

• Posee transparencia• Es el más indicado para utilizar

digitalmente• Mantiene una calidad de imagen

muy alta

• No puede ser animado• No es bueno para imágenes grandes

porque genera un archivo muy grande• No todos los navegadores web soportan

el formato

SVG -Scalable Vector Graphics

• Permite la escalabilidad sin cambiar la calidad de la imagen

• Es posible visualizar los contenidos desde cualquier navegador

• El tamaño del archivo aumenta si el objeto esta compuesto por muchos elementos pequeños.

• Se puede modificar con software especial o código CSS

1.IMÁGENES VECTORIALESImágenes constituidas por objetos geométricos (líneas, curvas, polígonos) que están definidas por ciertas funciones matemáticas, infinitamente escalables.

2.IMÁGENES DE MAPA DE BITS Formada por diversos puntos minúsculos (pixeles). Cada uno de los píxeles que contiene información de color y luminosidad.

TIPOS Y FORMATOS DE IMÁGENES

2

*Formato de imagen recomendado

Page 7: TALLER DE IMÁGENES · Tutorial 4.1 Descargar un ícono Tutorial 3.3 Recortar imágenes Tutorial 4.3 Crear un nuevo ícono en VECTR Tutorial 3.2 Cambiar la calidad al exportar una

Taller de imágenes - MSc. Melissa Berrocal Jiménez 7

¿CÓMO MODIFICAR IMÁGENES?

3

Para modificar las dimensiones, calidad, recortar imágenes y quitar el fondo de una imagen se va a utilizar el software GIMP que puede ser descargado en el siguiente enlace:

Figura 4: Acción para abrir una imagen en GIMP

Figura 5: Detalle de dimensiones actuales de la imagen

Figura 6: Acciones para escalar una imagen

https://www.gimp.org/downloads/

TUTORIAL 3.1: MODIFICAR DIMENSIONES DE UNA IMAGEN

Un problema común es tener una imagen demasiado grande para ser publicada, utilizada en una página web o enviada por correo.

Para cambiar la imagen a un tamaño más pequeño, siga los siguientes pasos:

PASO 1: ABRIR LA IMAGEN EN GIMPPara abrir la imagen en GIMP, seleccione la opción del menú archivo abrir y seleccionar la imagen deseada.

Es probable que cuando abre la imagen por primera vez se muestre toda la imagen en el área de trabajo.

PASO 2: CAMBIAR EL TAMAÑO En la parte superior de la ventana puede encontrar las dimensiones actuales de la imagen. Para cambiar el tamaño de la imagen, se necesita acceder a la ventada de escalar imagen.

PASO 3: ESCALAR IMAGENEn el cuadro de diálogo de escalar imagen, encontrará dos cuatros para ingresar los nuevos valores de ancho y alto.

IMAGEN

ARCHIVO

ESCALAR CAPA

ABRIR

Page 8: TALLER DE IMÁGENES · Tutorial 4.1 Descargar un ícono Tutorial 3.3 Recortar imágenes Tutorial 4.3 Crear un nuevo ícono en VECTR Tutorial 3.2 Cambiar la calidad al exportar una

Taller de imágenes - MSc. Melissa Berrocal Jiménez 8

PASO 4: CAMBIAR UNIDADESSi desea especificar un nuevo tamaño diferente en unidades que no sean pixeles, puede cambiarlo haciendo clic sobre la opción píxeles.

PASO 5: INGRESAR NUEVO VALORAl ingresar un nuevo valor para el ancho, de manera automática si cambiar la altura.

PASO 1: EXPORTAR IMAGENCuando se han concluido las modificaciones de la imagen y desee exportar solamente debe seleccionar:

PASO 2: FORMATO IMAGENEn el cuadro de diálogo puede ingresar un nuevo nombre para el archivo. Tenga en cuenta que la extensión muchas veces por defecto es .JPEG.

PASO 3: SELECCIÓN DE FORMATOEn caso que desee exportar en otro formato recuerde que existe una opción “Todas las imágenes exportadas” para seleccionar el formato deseado.

Junto a los cuadros existe una cadena, este ícono muestra que los valores están bloqueados uno con respecto al otro, para mantener la misma relación de alto y ancho evitando que la imagen se deforme.

TUTORIAL 3.2: CAMBIAR LA CALIDAD AL EXPORTAR UNA IMAGENEl tamaño y la calidad de un archivo, se puede modificar cuando se exporta a un formato como JPEG. Al guardar imágenes el formato JPEG se sacrifica la calidad de la imagen para obtener un tamaño de archivo más pequeño.

Figura 7: Acciones para cambiar las dimensiones de una imagen

Figura 8: Acción para exportar imagen

ARCHIVO EXPORTAR IMAGEN

Page 9: TALLER DE IMÁGENES · Tutorial 4.1 Descargar un ícono Tutorial 3.3 Recortar imágenes Tutorial 4.3 Crear un nuevo ícono en VECTR Tutorial 3.2 Cambiar la calidad al exportar una

Taller de imágenes - MSc. Melissa Berrocal Jiménez 9

PASO 4: SELECCIONAR CALIDADLa seleccionar el botón de exportar del cuadro de diálogo aparecerá una nueva ventana donde podrá seleccionar la calidad de la imagen.

PASO 1: SELECCIONAR CALIDADPara cortar una imagen puede utilizar de la caja de herramienta la opción de recorte o desde el menú de herramientas.

PASO 2: SELECCIONAR ÁREACuando se activa la herramienta, el cursor del mouse cambiará para indicar el área a recortar.

PASO 5: EXPORTARSeleccione el botón de exportar para finalmente exportar la imagen en la calidad y el formato deseado.

Figura 9: Ventana para selección de calidad

Figura 11: Acceso desde el menú de herramientas

Figura 12: Barra de herramientas ícono de recortar

Figura 10: Usando la misma imagen se puede observar la calidad usando diferentes niveles de comprensión.

CALIDAD 100% CALIDAD 40% CALIDAD 10%

TUTORIAL 3.3: RECORTAR IMÁGENESExisten muchas razones por las cuales se desea recortar una imagen. Es posible que se quiera eliminar un borde o algún elemento de la fotografía.

HERRAMIENTA DE RECORTE

Page 10: TALLER DE IMÁGENES · Tutorial 4.1 Descargar un ícono Tutorial 3.3 Recortar imágenes Tutorial 4.3 Crear un nuevo ícono en VECTR Tutorial 3.2 Cambiar la calidad al exportar una

Taller de imágenes - MSc. Melissa Berrocal Jiménez 10

PASO 3: SELECCIONAR AREA A RECORTARCuando se activa la herramienta, el cursor del mouse cambiará para indicar el área a recortar.

PASO 1: AÑADIR CAPA DE TRANSPARENCIASeleccione la capa que contiene la imagen, cuando esté activa, seleccione en el menú de capa, transparencia y añadir el canal alfa.

PASO 2: AÑADIR CAPA DE TRANSPARENCIAAgregue una nueva capa. Esta puede ser del color del fondo deseado o transparente.

PASO 4: AFINAR RECORTEDespués de hacer las selección, notará que se muestran cuatro rectángulos, que permiten manipular y afinar la selección del recorte.

PASO 5: MOVER SELECCIÓNPuede hacer clic y arrastrar cualquier lado o esquina para mover esa área de selección.

PASO 6: AFINAR RECORTEUna vez que esté satisfecho puede presionar la tecla de enter para confirmar el recorte.

Recuerde que para comenzar de nuevo solamente necesita presionar el botón de escape.

TUTORIAL 3.4: QUITAR EL FONDO DE IMÁGENESEn algunas ocasiones resulta útil quitar fondos de una imagen. Para separar un objeto del fondo, o colocarlo sobre un color plano, o simplemente mantener el fondo transparente para usarlo sobre un fondo existente.

CAPA

CAPA CAPA NUEVA

TRANSPARENCIA AÑADIR CANAL ALFA

Figura 13: Selección de área de recorte

Figura 14: Añadir canal alfa a la capa existente

Figura 15: Agregar nueva capa con transperencia

Page 11: TALLER DE IMÁGENES · Tutorial 4.1 Descargar un ícono Tutorial 3.3 Recortar imágenes Tutorial 4.3 Crear un nuevo ícono en VECTR Tutorial 3.2 Cambiar la calidad al exportar una

Taller de imágenes - MSc. Melissa Berrocal Jiménez 11

PASO 4: POSICIÓN DE LA CAPAEsta acción creará una capa nueva. Asegúrese que esta nueva capa esté posicionada después de la imagen principal.

PASO 3: CAPA TRANSPARENTEEn la nueva ventana de diálogo de crear capa nueva, seleccione la opción de transparencia y de clic en aceptar.

PASO 5: SELECCIÓN DEL OBJETOCon la herramienta de selección libre, siga el borde la figura usando las líneas curvas o rectas dependiendo de la figura a seleccionar.

Debe asegurarse que el punto inicial y el punto final coincidan. Una línea punteada aparecerá sobre la figura, seleccione el botón de “Enter” para poder ejecutar la selección.

PASO 6: SELECCIÓN DEL OBJETOEn el menú de seleccionar, seleccione la opción de invertir. Esta acción hace que invierta la selección, de manera que el fondo se selecciona automáticamente para poder removerse.

PASO 7: BORRAR EL OBJETOPara borrar el fondo simplemente utilice el comando de cortar (shift+x) o en el menú editar seleccione la opción de cortar.

PASO 7: EXPORTAR IMAGENRecuerde exportar la imagen y agregarle el formato PNG, ya que de lo contrario el programa automáticamente va a agregar un fondo blanco al lugar de transparente.

Figura 16: Posición de capa de transparencia

Figura 17: Agregar nueva capa

Figura 18: Invertir la selección

HERRAMIENTA SELECCIÓN LIBRE

Page 12: TALLER DE IMÁGENES · Tutorial 4.1 Descargar un ícono Tutorial 3.3 Recortar imágenes Tutorial 4.3 Crear un nuevo ícono en VECTR Tutorial 3.2 Cambiar la calidad al exportar una

Taller de imágenes - MSc. Melissa Berrocal Jiménez 12

PASO 1: INGRESE A THE NOUN PROJECTIngrese a la página de the Noun Project. Seleccione un ícono que le llame la atención o busque uno nuevo, puede utilizar la barra de búsqueda.

PASO 2: CREE UNA CUENTACree una nueva cuenta utilizando su correo electrónico o perfil de facebook para poder descargar el ícono deseado.

PASO 3: DESCARGUE EL ÍCONODescargue el ícono en formato SVG. Para la descarga gratis el ícono, seleccione la opción de “Basic download” .

TUTORIAL 4.1: DESCARGAR UN ÍCONO

Para modificar y crear imágenes vectoriales es necesario un software que puede ser utilizado en línea (VECTR) o también se puede descargar una versión para escritorio en el siguiente enlace:

Para modificar un ícono es necesario tener un archivo en formato .SVG que puede descargarse en cualquiera de los siguiente sitios:

https://thenounproject.com/

https://www.flaticon.com/

https://vectr.com/

IMÁGENES VECTORIALES

4

PASO 4: SELECCIONE EL FORMATOCuando especificó dónde va a utilizar el ícono, elija el formato SVG (recuerde de darle crédito al autor cuando utilice el ícono o lo modifique para alguno de sus proyectos).

Figura 20: Selección de un ícono para descargar “Noun Project”

Figura 21: Descarga de íconos gratis bajo licencia “Creative Commons”

Figura 19: Pantalla principal de Vectr

Page 13: TALLER DE IMÁGENES · Tutorial 4.1 Descargar un ícono Tutorial 3.3 Recortar imágenes Tutorial 4.3 Crear un nuevo ícono en VECTR Tutorial 3.2 Cambiar la calidad al exportar una

Taller de imágenes - MSc. Melissa Berrocal Jiménez 13

TUTORIAL 4.2: MODIFICAR UN SVG O VECTOR

PASO 1: USO DE VECTRUtilice el programa VECTR para subir el archivo del tipo SVG que descargó. Para esto puede arrastrar el archivo directamente la pantalla o seleccionar el botón de subir archivo.

PASO 2: PESTAÑA PAGESEn la pestaña de pages, se puede visualizar todas las pantallas agregadas al documento. En la parte inferior, se puede modificar las propiedades y dimensiones de la pantalla.

PASO 3: PESTAÑA LAYERSEn la pestaña de “layers” se visualizan todas las capas y los trazos que componen cada la figura en el área de trabajo.

Figura 22: Pestaña “Pages” y “Layers.

PASO 4: MODIFICAR VECTORSeleccione un trazo y modifique los parámetros como color, borde o elimine las elementos que no necesita. Recuerde que puede aumentar o disminuir el tamaño de los elementos y agregar nuevas formas según lo requiera.

PASO 5: EXPORTARPara exportar la imagen, seleccione el botón de “Export”. Se mostrará una ventana pequeña donde podrá modificar el tamaño a exportar y formato deseado. Recuerde que el utilizar el formato PNG, si desea transparencia.

BOTÓN DE EXPORTAR

Figura 24: Ventana para exportar

Figura 23: Parámetros para modificar la figura

Page 14: TALLER DE IMÁGENES · Tutorial 4.1 Descargar un ícono Tutorial 3.3 Recortar imágenes Tutorial 4.3 Crear un nuevo ícono en VECTR Tutorial 3.2 Cambiar la calidad al exportar una

Taller de imágenes - MSc. Melissa Berrocal Jiménez 14

PASO 2: ÁREA DE TRABAJOModifique el área de trabajo a 100X100 px en la pestaña de “Pages” .

PASO 5: MODIFICAR LÍNEA Después de crear la figura, seleccione el trazo que desea que modificar. En el menú de la derecha, encontrará las opciones para cambiar el color, quitar el fondo y agregar un borde.Desactive el check de color de fondo y seleccione el color negro (#000000) para cambiar el grosor del borde de la figura a 3px.

PASO 6: EDITAR LÍNEAPara editar la forma de línea, y agregar redondear vértices, haga clic dos veces sobre el trazo o la figura a modificar. Aparecerá una línea roja en el vértice que permitirá manipular el radio. No olvide exportar la figura en formato PNG para mantener la transparencia.

TUTORIAL 4.3: CREAR UN “SOBRE” EN VECTR

PASO 4: HERRAMIENTA PINCELSeleccione la herramienta de pincel para dibujar líneas que componen el sobre.

PINCEL

PASO 3: DIBUJAR LA FIGURASeleccione la herramienta de rectángulo con bordes redondeados e inserte un rectángulo en el área de trabajo.

RECTÁNGULO REDONDEADO

PASO 1: TRABAJAR EN VECTRIngrese al sitio web en línea de VECTR y cree un nuevo archivo. Para crear un archivo nuevo, puede utilizar el botón de crear nuevo.

ARCHIVO NUEVO

Figura 25: Modificar área de trabajo

Figura 26: Dibujar una figura en el área de trabajo

Figura 27: Modificar línea o trazo

Page 15: TALLER DE IMÁGENES · Tutorial 4.1 Descargar un ícono Tutorial 3.3 Recortar imágenes Tutorial 4.3 Crear un nuevo ícono en VECTR Tutorial 3.2 Cambiar la calidad al exportar una

Taller de imágenes - MSc. Melissa Berrocal Jiménez 15

PASO 1: TENGA LISTO EL MATERIALDiseñe o descargue todos los íconos que va a utilizar. Debe asegurarse que tienen un formato del tipo PNG, en caso que desee que éstos presenten transparencia.

Recuerde que el TEC Digital, tiene la posibilidad de personalizar el portal de curso. Puede agregar imágenes a las secciones para hacerlo más atractivo e interactivo para sus estudiantes.

PASO 2: INGRESE A SU CUENTAIngrese con sus credenciales al sitio del TEC Digital y seleccione el curso que desea personalizar.

PASO 3: GUARDE EL MATERIAL EN DOCUMENTOSEn la carpeta de documentos del curso seleccione la opción subir y añada todas las imágenes del tipo PNG.

Si lo desea puede crear una carpeta nueva con todos los íconos e imágenes que va a utilizar para la sección.

PASO 4: COPIAR URLCuando tenga todas las imágenes guardadas en el la carpeta del curso. Posicione el cursor sobre el nombre de la imagen y haga clic derecho sobre la imagen, seleccione la opción de copiar enlace.

TUTORIAL 4.4: USO DE ÍCONOS E IMÁGENES EN EL PORTAL DEL CURSO

Figura 28: Selección de archivos para subir a documentos.

Figura 29: Ventana para subir archivo nuevo.

Figura 30: Copiar dirrección del vínculo de la imagen.

Page 16: TALLER DE IMÁGENES · Tutorial 4.1 Descargar un ícono Tutorial 3.3 Recortar imágenes Tutorial 4.3 Crear un nuevo ícono en VECTR Tutorial 3.2 Cambiar la calidad al exportar una

Taller de imágenes - MSc. Melissa Berrocal Jiménez 16

PASO 5: ADMINISTRACIÓN DE SECCIONESEn el menú de “admin”, busque la sección de Administración de secciones personalizadasy elija la sección que quiere personalizar o puede crear una nueva sección si así lo desea.

PASO 6: INSERTAR IMAGEN EN EL CONTENIDOPara insertar una imagen en el contenido seleccione el ícono de fotografía que se muestra en la barra de herramientas.

PASO 7: PARÁMETROSCuando seleccione el ícono, se le mostrará una ventana emergente con tres pestañas, donde se pueden modificar parámetros generales y apariencia de cada ícono.

PASO 8: PESTAÑA GENERALEn el espacio de URL de la imagen; peguar el enlace que copió (paso 4) de la imagen que subió anteriormente a la carpeta del curso y peguelo en ese espacio.

PASO 9: PESTAÑA APARIENCIAEn la pestaña de apariencia puede modificar las dimensiones de la imagen y la alineación. Por ejemplo, se puede seleccionar alineación izquierda y modificar 100X100 px el tamaño de la imagen original. Seleccione “OK” para agregar la imagen al cuerpo de texto.

Figura 31: Selección de archivos para subir a documentos.

Figura 32: Selección de archivos para subir a documentos.

Figura 33: Selección de archivos para subir a documentos.

ÍCONO IMAGEN

PASO 10: PREVISUALIZACIÓNUna vez que haya insertado la imagen según las dimensiones deseadas, se podrá previsualizar la imagen agregada en el cuerpo de texto. No olvide guardar para aplicar los cambios.

Page 17: TALLER DE IMÁGENES · Tutorial 4.1 Descargar un ícono Tutorial 3.3 Recortar imágenes Tutorial 4.3 Crear un nuevo ícono en VECTR Tutorial 3.2 Cambiar la calidad al exportar una

Taller de imágenes - MSc. Melissa Berrocal Jiménez 17

PASO 11: VISUALIZACIÓN DEL PORTALPara visualizar la imagen y texto insertado en el portal del curso, solo debe seleccionar el nombre del curso en la parte superior de la pantalla.

Figura 34: Previsualización de la imagen insertada.

Figura 35: Visualización del portal del curso.

Page 18: TALLER DE IMÁGENES · Tutorial 4.1 Descargar un ícono Tutorial 3.3 Recortar imágenes Tutorial 4.3 Crear un nuevo ícono en VECTR Tutorial 3.2 Cambiar la calidad al exportar una

Taller de imágenes - MSc. Melissa Berrocal Jiménez 18

OTROS RECURSOS

5

https://www.pexels.com/

https://pixabay.com/es/

https://unsplash.com/

https://deathtothestockphoto.com/

http://travelcoffeebook.com/

http://www.freeimages.co.uk/index.htm

https://stocksnap.io/

https://isorepublic.com/

http://imcreator.com/free

https://picography.co/

En este apartado encontrará los enlaces para el software libre utilizado en esta documentación.

GIMPPrograma gratuito para la edición de imágenes. Aquí podrá descargar el programa y encontrar tutoriales.

VECTRVectr es un software de gráficos gratuito para crear gráficos vectoriales de manera fácil.

ENLACES PARA IMÁGENES GRATUITASAquí encontrará enlaces para fotografías gratuitas o bajo la licencia de “Creative Commons”.

https://www.gimp.org/

https://www.gimp.org/tutorials/

https://vectr.com/https://vectr.com/tutorials/

https://skitterphoto.com/

Page 19: TALLER DE IMÁGENES · Tutorial 4.1 Descargar un ícono Tutorial 3.3 Recortar imágenes Tutorial 4.3 Crear un nuevo ícono en VECTR Tutorial 3.2 Cambiar la calidad al exportar una

Taller de imágenes - MSc. Melissa Berrocal Jiménez 19

https://www.flaticon.com/

https://www.freepik.com/free-icons

https://thenounproject.com/

https://www.foodiesfeed.com/

https://picjumbo.com/

https://barnimages.com/

http://startupstockphotos.com/

https://www.lifeofpix.com/

http://freenaturestock.com/

ENLACES PARA ÍCONOSAquí encontrará enlaces para íconos gratuitos o bajo la licencia de “Creative Commons” en formato SVG o PNG.

Page 20: TALLER DE IMÁGENES · Tutorial 4.1 Descargar un ícono Tutorial 3.3 Recortar imágenes Tutorial 4.3 Crear un nuevo ícono en VECTR Tutorial 3.2 Cambiar la calidad al exportar una

Taller de imágenes - MSc. Melissa Berrocal Jiménez 20

REFERENCIAS

6

Lundquist Samual (2016). Image file formats: everything you’ve ever wanted to know. 99 Designs, https://es.99designs.com/blog/tips/image-file-types/

Ofnuts. GIMP Tutorial - Image Formats Overview. GIMP, https://www.gimp.org/tutorials/ImageFormats/

Sreenivasan Sreeram (2017). 7 Types Of Visual Content To Make eLearning Courses Effective. Elearning Industry, https://elearningindustry.com/7-types-visual-content-to-make-elearning-courses-effective

Jandhyala Dana (2017). Visual Learning: 6 Reasons Why Visuals Are The Most Powerful Aspect Of eLearning, Elearning Industry, https://elearningindustry.com/visual-learning-6-reasons-visuals-powerful-aspect-elearning

Gutierrez Karla (2016). Making the Most of Visuals in eLearning: 9 Tips and 5 Examples, Shift Elearning https://www.shiftelearning.com/blog/visuals-elearning-tips-and-examples