En esta sección se resolverán temas de diseño gráfico, como uso de herramientas como photoshop, illustrator, herramientas para prototipado, herramientas de diseño web, entre otros.
Moderator: julianmartinez16
-
xacarana
- Site Admin
- Posts: 1213
- Joined: Fri Jan 15, 2016 6:13 pm
Post
by xacarana » Mon Feb 15, 2016 8:59 pm
Code: Select all
Los sprites (del inglés ‘duendecillos’) fueron popularizados por Jay Miner. Se trata de un tipo de mapa de bits dibujados en la pantalla de ordenador por hardware gráfico especializado (MSX, Atari 400/800, Commodore 64 y Commodore Amiga fueron unos de los pocos ordenadores que soportan sprites reales) sin cálculos adicionales de la CPU. A menudo son pequeños y parcialmente transparentes, dejándoles así asumir otras formas a la del rectángulo, por ejemplo puntero de ratón en ordenadores de la serie Amiga. Esto es posible ya que se podía hacer una operación lógica OR o AND entre la imagen original y otra, y dejar el resultado en otra posición de memoria. De esta manera era sencillo cambiar colores o eliminar el fondo mediante una "máscara". Típicamente, los sprites son usados en videojuegos para crear los gráficos de los protagonistas. Por ejemplo, los personajes de un Pac-Man podrían ser sprites. Generalmente son utilizados para producir una animación, como un personaje corriendo, alguna expresión facial o un movimiento corporal.
Este concepto que tiene sus origines en los videojuegos antigüos pero que todavía son vigentes, también se usan al crear documentos html, estos son muy populares y ayudan bastante en optimizar el rendimiento de la carga de un sitio o aplicación web, en el siguiente video se explica como crear un sprite de forma manual, es decir, sin usar herramientas que permitan automatizar el proceso.
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez
-
xacarana
- Site Admin
- Posts: 1213
- Joined: Fri Jan 15, 2016 6:13 pm
Post
by xacarana » Mon Sep 26, 2016 2:13 pm
Herramienta para optimizar imágenes
shoe box
Permite crear un sprite, cortar imágenes y mucho más, como lo muestran los siguientes videos.
Insumo para el ejemplo de clase

Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez
-
xacarana
- Site Admin
- Posts: 1213
- Joined: Fri Jan 15, 2016 6:13 pm
Post
by xacarana » Mon Sep 26, 2016 2:48 pm
En la hoja de estilos se define la siguiente clase
Code: Select all
.bandera{
background-image: url(img/sprite_idiomas.png);
background-position: 1px 1px;
background-repeat: no-repeat;
width: 33px;
height: 27px;
background-color: white;
}
Si esta editando el archivo main.css, debe poner en la url la imagen de la siguiente forma
Code: Select all
background-image: url(../img/sprite_idiomas.png);
En el html, se pone el contenedor de la imagen, en este caso es un div
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez
-
xacarana
- Site Admin
- Posts: 1213
- Joined: Fri Jan 15, 2016 6:13 pm
Post
by xacarana » Mon Sep 26, 2016 2:52 pm
Vamos a realizar un sprite, con base al siguiente grupo de imágenes de banderas de países
Banderas de paises
Tomado de
iconarchive.com
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez