Este documento presenta información sobre diseño gráfico. Explica elementos del diseño como color, líneas, escala, forma, alineación y contraste. También describe parámetros de imágenes y sonido digitales como formatos, resolución y cuantificación. Explica ocho formatos de imágenes fijas y seis elementos que describen una imagen digital. Finalmente, enumera herramientas para edición de imágenes y cuatro sitios gratuitos para diseño web.

1. DISEÑO GRÁFICO
Elaborado por:
Estefanía Ruiz
Ingeniería en Marketing
DI SE ÑO
CARRERA:

2. TEMAS:
 Indique los elementos del diseñador con ejemplos.
 Describa todos los parámetros que debe considerar en la imagen y en el
sonido digital.
 Explique de cuantas maneras se pueden generar imágenes fijas, indicar ocho
formatos de imágenes con sus respectivas características.
 Indique y explique seis elementos que describen una imagen digital.
 Enumere 4 herramientas para la edición de imágenes.
 Indique y explique brevemente 4 sitios gratuitos para diseño de páginas web.

3. Elementos del diseño gráfico
 Color.
 Líneas.
 Escala.
 Forma.
 Alineación.
 Contraste.
 Espacio.

4. Color
El ojo humano puede
distinguir entre 10.000
colores.
El círculo cromático nos sirve para observar la organización básica y la
interrelación de los colores. También lo podemos emplear como forma para hacer
la selección de color que nos parezca adecuada a nuestro diseño.
El círculo cromático moderno se compone de tres colores primarios (rojo,
amarillo y azul), que teóricamente se pueden mezclar en diferentes proporciones
para producir colores secundarios e intermedios.
La variedad de colores lo
podemos visualizar por la
combinación de varios
de ellos.

5. Líneas
Una de las características mas relevantes de este elemento es la “delgadez”,
gracias a esta propiedad, una línea puede sugerir una dirección determinada, al
darle curva genera sensación de movimiento y acercando una con otra puede
producir ilusión de volumen.

6. Escala
Es la proporción de aumento o
disminución que existe entre las
dimensiones reales y las dimensiones
representadas de un objeto, no es lo
mismo que tamaño. En efecto, para
representar un objeto de grandes
dimensiones, deben dividirse todas sus
medidas por un factor mayor que uno,
en este caso denominado escala de
reducción; y para representar objetos de
pequeñas dimensiones, todas sus
medidas se multiplican por un factor que
uno, denominado escala de ampliación.
Finalmente, deben indicarse sobre el
dibujo las dimensiones del objeto real, y
la escala en que ha sido elaborado. Se
puede usar la escala para crear una
jerarquía visual para un diseño.

7. Forma
Para nuestra percepción visual, todo lo que nos rodea tiene forma. La forma es el
aspecto exterior de las cosas (objetos, animales, plantas), la podemos describir
trazando su contorno (líneas) o dibujando su silueta (manchas) sobre un plano,
así individualizamos la forma y la diferenciamos del fondo. Contamos con dos
categorías de formas, las formas geométricas, que se definen en proporciones
uniformes perfectas (como un círculo, un cuadrado o un triángulo) y las formas
orgánicas, que tienen bordes menos definidos y proporciones fluctuantes y,
esencialmente, no tienen reglas (como las cosas onduladas o con forma de gota,
que no se ajustan a ninguna categoría real).

8. Alineación
La alineación nos ayudará a crear orden, o su opuesto, creando conexiones visuales
entre ellos. Cuando una composición está alineada, automáticamente nuestro
cerebro percata cohesión y orden. Puede que existan elementos separados entre sí
pero aún así hay como un lazo invisible que los conecta entre ellos. No importa los
tamaños de los elementos o los colores utilizados, en el fondo hay una relación
entre ellos que aportan un significado global.
Las alineaciones horizontales son imprescindibles para conseguir un diseño en
niveles estables, ya que las líneas horizontales aportan equilibrio.
Las alineaciones verticales, son más comunes a la izquierda, ya que es la normal en
los libros y demás soportes textuales, estando nuestra vista educada para tratar con
ella.

9. Contraste
El contraste nos ayudará a diferenciar dos elementos, o bien a separar un
elemento del fondo. Es sin lugar a duda, uno de los principios básicos. La falta de
contraste puede provocar que no se diferencien suficientemente todos o algunos
de los elementos de la composición. Pero el contraste no se refiere únicamente al
color, también a la forma o la dirección.
Ejemplo: un conjunto de cuadrados e insertamos un círculo.

10. Espacio
El espacio es las partes vacías entre una forma dibujo o contorno estos espacios
pueden dar la sensación de distancia e incluso de velocidad. Todas las formas por
mas pequeñas que sean ocupan un espacio, el espacio así mismo puede ser visible
o ilusorio (para dar una sensación de profundidad) el espacio en blanco es
esencial ya que le permite un descanso al ojo mientras recorre la página. Su
propósito es organizar coherentemente las formas y las relaciones espaciales entre
ellas creando puntos de enfoque e interés.

12. Imagen Digital
La valoración a partir de parámetros
tradicionales es ahora más que
nunca cuantificable. Definición,
tono, color, etc. son valores
numéricos, de lectura matemática y
por tanto modificables y ajustables
con mayor facilidad y sobretodo
precisión. El análisis de la imagen
parte de valores objetivos, aunque
no podemos olvidar su valoración
subjetiva. Centrándonos en los
valores objetivos, éstos pueden ser
mesurables a partir de los
parámetros de resolución,
profundidad, modo de color, etc.

13. Imagen Digital
Las imagénes digitales se pueden guardar en distintos formatos. Cada uno se
corresponde con una extensión específica del archivo que lo contiene. Los más
utilizados en la actualidad son: BMP, GIF, JPG, TIF y PNG.

14. Imagen Digital
La resolución se define como el número de píxeles que componen la imagen y se mide
en píxeles por pulgada (ppi, pixels per inch), o puntos por pulgada (dpi, dots per inch),
cuando se refiere a dispositivos de salida. A mayor resolución, mayor detalle de
imagen y, por tanto, mayor calidad. La tonalidad de la imagen viene dada por
múltiples parámetros y por esta razón será un atributo difícil de valorar.
Principalmente, la tonalidad de la imagen vendrá determinada por la resolución y la
luminosidad o profundidad de color. La luminosidad hace referencia a la información,
el número de bits, que representa cada píxel. 1 bit representa 2 tonos, 8 bits 256 tonos,
24 bits 16 millones de tonos y 32 bits 4.000 millones de tonos. Finalmente, el ruido
consiste en las pequeñas alteraciones aleatorias a la luminosidad del color y sería el
equivalente al grano de la imagen convencional. Un sensor con una alta relación entre
señal y ruido representa una imagen con gran precisión.

15. Sonido Digital
Los parámetros básicos para describir la secuencia de muestras que representa el
sonido son:
 El número de canales: 1 para mono, 2 para estéreo, 4 para el sonido
cuadrafónico, etc.
 Tasa de muestreo: El número de muestras tomadas por segundo en cada canal.
 Número de bits por muestra: Habitualmente 8 o 16 bits.
Como regla general, las muestras de audio multicanal suelen organizarse en
tramas. Una trama es una secuencia de tantas muestras como canales,
correspondiendo cada una a un canal. En este sentido el número de muestras por
segundo coincide con el número de tramas por segundo. En estéreo, el canal
izquierdo suele ser el primero.

16. Sonido Digital
Parámetros clave
 Frecuencia de muestreo: Cantidad de muestras de amplitud por segundo
 Resolución: cantidad de información por muestra
Parámetros habituales
 Valor de Bitrate (bits/segundo): Cantidad de información por segundo. Por
ejemplo 128 kbps
 Tipo de bitrate: – CBR (constante) – VBR (variable) – ABR (Media de valor)

17. Sonido Digital
Formatos digitales sin pérdida
AIFF ● PCM / CDA ● WAV ● MIDI ● FLAC
Formatos digitales con pérdida
● MP3 ● AAC / M4A / ARM ● OGG ● RM ● WMA ● AC3 (Dolby Digital, etc)

18. Imágenes Fijas

19. Imágenes Fijas
Existen 41 formas para crear imágenes fijas entre ellas
se encuentran los formatos que los hacen posible
como: art. – bmp. – cin. – cpt. – dpx. – exr. - gif. – etc.
De los cuales hoy ciaremos 8.

20. Imágenes Fijas
Formato Característica
1. art. Art. Es un formato de imagen propietario usado habitualmente por el software
cliente de AOL. El formato art. Únicamente soporta una imagen fija que ha sido
muy comprimida.
2. fpx. Formato que admite múltiples resoluciones de una imagen. Con o si compresión de
8 a 24 bits de profundidad de color.
3. gif. GIF. es utilizado popularmente en la web. Formato de 8 bits (256 colores máximo)
con soporte de animación por frames. Utiliza la compresión LZW
4. jpeg. Es usado ampliamente para fotografías e imágenes de gran tamaño y variedad de
color en la web y por las cámaras digitales. Es un formato comprimido con pérdida
de calidad, aun que esta se puede ajustar.
5. psd. Formato propietario utilizado por Adobe Photoshop. Posee cantidad de
características extra, como la composición por capas. Poco compatible con
programas externos a la casa Adobe .
6. bmp. La imagen se forma mediante una parrilla de píxeles. El formato BMP no sufre
pérdidas de calidad y por tanto resulta adecuado para guardar imágenes que se
desean manipular posteriormente.
7. tif. Almacena imágenes de una calidad excelente. Utiliza cualquier profundidad de
color de 1 a 32 bits. Es el formato ideal para editar o imprimir una imagen.
8. png. Es un formato de reciente difusión alternativo al GIF. Admite la posibilidad de
emplear un número de colores superior a los 256 que impone el GIF.

21. Elementos que describen la imagen digital
Imagen
 Es el elemento más importante de una aplicación multimedia.
 Se emplea en la construcción de la interfaz como para la ilustración de las
diferentes escenas.
 Las imágenes estáticas pueden ser grandes, pequeñas, o llenar la pantalla, en
color, situadas aleatoriamente, distribuidas geométricamente, etc…

22. Elementos que describen la imagen digital
 Pixel: Abreviatura de Picture Element, es un único punto en una imagen
gráfica. Los monitores gráficos muestran imágenes dividiendo la pantalla en
miles (o millones) de pixeles, dispuestos en filas y columnas. Los pixeles están
tan juntos que parece que estén conectados.
Mapa de pixeles de una imagen digital

23. Elementos que describen la imagen digital
 Vóxel: (Volumetric píxel) es una manera de representar objetos volumétricos
como bitmaps tridimensionales en lugar de como vectores. Es decir, es la
unidad cúbica que compone un objeto tridimensional, análogamente a lo que es
un píxel en 2D. Al igual que con los píxeles de un mapa de bits, los vóxeles no
suelen tener su posición (x, y, z) explícitamente codificada junto con sus valores
sino que se deduce basándose en su posición con respecto a otros vóxeles en el
archivo de datos.

24. Elementos que describen la imagen digital
 Relación de aspecto: La relación
de aspecto es la proporción entre el
ancho y el alto de una imagen.
Típicamente en TV analógica
(NTSC, PAL) es de 4:3, es decir el
ancho es 1.33 veces el alto. En
cambio la relación de aspecto de
HDTV es de 16:9, es decir el ancho
es 1,78 veces el alto. En el cine las
proporciones de aspecto van de 4:3
hasta 2,85:1. En TV las
proporciones son básicamente dos:
4:3 y 16:9. Actualmente estamos
viviendo una transición de modo
que encontraremos ambas
proporciones de aspecto en
distintos televisores.

25. Elementos que describen la imagen digital
 Resolución de imagen: La resolución
expresa el número de píxeles que forman
una imagen de mapa de bits. La calidad de
una imagen, también depende de la
resolución que tenga el dispositivo que la
capta. El número de píxeles que contenga
una imagen dependen de cuántos píxeles
utilice el sensor CCD de la cámara para
captar la imagen. La resolución de una
imagen digital se expresa multiplicando su
anchura por la altura en pantalla. Por
ejemplo la imagen de 1200 x 1200 píxeles
= 1.440.000 píxeles, expresado en Mp
megapixel es igual a 1,4 Mp.

26. Elementos que describen la imagen digital
 Resolución de pantalla: La resolución de pantalla es el número de píxeles
que se muestran en nuestro monitor, manifestado a través de la multiplicación
de los píxeles horizontales y los verticales. Entender esto es muy importante
para poder controlar diversas funciones de nuestro equipo. Existen diferentes
tipos de resolución de pantalla, que vendrán establecidas en función de la
capacidad del equipo o la tarjeta gráfica de que dispongamos.

27. Elementos que describen la imagen digital
 Cuantificación: El
efecto de la
cuantificación viene
dado por la
imposibilidad de tener
un rango infinito de
valores de medida
para la intensidad de
brillo de los píxeles.
Efecto de la
cuantificación: De
izquierda a
derecha, 8 bits, 1
bits y 4 bits.

28. Herramientas de edición de imágenes
 Microsoft Paint (1985):
Formatos soprotados PNG, BMP,
GIF, TIFF, JPGE.
 Adobe Ilustrator (1987):
Formatos soportados svgz, svg, ai,
ait, eps, epsf, ps, PNG, BMP, GIF,
TIFF, JPGE, entre otros.
 Photoshop (1990): Formatos
soportados: PSD, PDD, PostScript,
EPS, DCS, BMP, GIF, JPEG, PICT,
PIFF, PNG, PDF, IFF, PCX, RAW,
TGA, Scitex CT, Filmstrip, FlashPix.
 Gimp (1996): Formatos
soportados JPG, GIF, PNG, PCX,
TIFF, PDD, PSD, PS, XCF, SVG,
SVGZ, entre otros.

29. Sitios gratuitos para diseño de páginas web
 Wix: En Wix podemos crear
nuestra página web de forma
sencilla con un resultado
impactante. Wix aloja a más de
26 millones de webs en su
plataforma y se registran más de
30.000 usuarios diarios.
Weebly: Weebly ofrece un poderoso
sistema de «drag and drop» en el editor y
cien plantillas profesionales para crear una
página web. Más de 12 millones de personas
usan actualmente Weebly.

30. Sitios gratuitos para diseño de páginas web
 000webhost: La transparencia es su
lema, no hay costes ocultos. Las cuentas
gratuitas cuentan con 1.5 GB de espacio
en disco, 100 GB de tráfico. Anuncian
con orgullo que sus servidores han
estado online el 99,9% del tiempo en los
últimos 5 años.
Yola: Permite crear webs con aspecto
profesional en cuestión de minutos sin
ningún tipo de experiencia técnica. Ahora
mismo tiene 7 millones de clientes.