Aprendiendo algo más sobre tipografía

Kern y el track

- Dos conceptos a tener en cuenta antes de modificar el espacio entre letras, son el track y el kern.

Los tipógrafos han usado el track o tracking para alterar la densidad visual del texto o el espacio global entre un grupo seleccionado de caracteres. Esta alteración afecta a todos los caracteres, como regla general, cuanto más grande es el cuerpo más apretado debe ser el track. El track ajusta el espacio que existe entre los caracteres, abriendo los cuerpos más pequeños y cerrando los más grandes.

El Kern o kerning es el espacio existente entre dos caracteres individuales, para cuando dos de estos caracteres se encuentran demasiado juntos o separados. El kern es proporcional, ya que es del mismo tamaño en puntos que el cuerpo de los caracteres. Si un texto es de 10 puntos, el kern mide 10 puntos.

Te propongo un juego...

Kern Type, the kerning game.

https://type.method.ac/#

Acomodá los caracteres en su lugar y sumá puntos.

Read More

Conceptos de imagen digital

Una imagen digital o gráfico digital es una representación bidimensional de una imagen a partir de una matriz numérica, frecuentemente en binario (unos y ceros).

El píxel es la unidad mínima de visualización de una imagen digital. Si aplicamos el zoom sobre ella observaremos que está formada por una parrilla de puntos o píxeles. Las cámaras digitales y los escáneres capturan las imágenes en forma de cuadrícula de píxeles.



Resolución de una imagen

Es el grado de detalle o calidad de una imagen digital ya sea escaneada, fotografiada o impresa. Este valor se expresa en ppp (píxeles por pulgada) o en inglés dpi (dots per inch). Cuantos más píxeles contenga una imagen por pulgada lineal, mayor calidad tendrá.

1 pulgada = 2,54 cm

Las cámaras digitales prestan una calidad que se expresa en MegaPíxels. Así por ejemplo una cámara de 8 MP es aquella capaz de tomar una fotografía con 8 millones de píxeles.

¿Cuál es la diferencia entre Puntos Por Pulgada (DPI) y Píxeles Por Pulgada (PPI)?

Profundidad de color
La profundidad de color se refiere al número de bits necesarios para codificar y guardar la información de color de cada píxel en una imagen. Un bit es una posición de memoria que puede tener el valor 0 ó 1. Cuanto mayor sea la profundidad de color en bits, la imagen dispondrá de una paleta de colores más amplia. Se utiliza 1-bit para imágenes en blanco/negro, sin grises (0=color negro, 1= color blanco), 2-bits = 4 colores (00=color negro, 01=color X, 10=color Y, 11=color blanco), 3-bits = 8 colores, ..., 8-bits = 256 colores, ..., 24-bits = 16.7 millones de colores.


Modos de color

Llamamos modo de color al sistema de coordenadas que nos permiten describir el color de cada píxel utilizando valores numéricos.





Y el Modo CMYK. Cada color se forma por combinación de cuatro canales. Cada canal se corresponde con un color primario de impresión: Cyan (Ciano), Magent (Magenta), Yellow (Amarillo) y BlacK (Negro). Cada canal puede tener como valor entre 0 y 255. Se trata de imágenes con una profundidad de color de 32 bits.

Formatos de imagen
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.

BMP (Bitmap = Mapa de bits) 

• Ha sido muy utilizado porque fue desarrollado para aplicaciones Windows. 
• 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. 
• Ventaja: Guarda gran cantidad de información de la imagen. 
• Inconveniente: El archivo tiene un tamaño muy grande. 

GIF (Graphics Interchange Format = Formato de Intercambio Gráfico)

• Ha sido diseñado específicamente para comprimir imágenes digitales. 
• Reduce la paleta de colores a 256 colores como máximo (profundidad de color de 8 bits). 
• Admite gamas de menor número de colores y esto permite optimizar el tamaño del archivo que contiene la imagen. 
• Ventaja: Es un formato idóneo para publicar dibujos en la web. 
• Inconveniente: No es recomendable para fotografías de cierta calidad ni originales ya que el color real o verdadero utiliza una paleta de más de 256 colores. 

JPG-JPEG (Joint Photographic Experts Group = Grupo de Expertos Fotográficos Unidos)

• A diferencia del formato GIF, admite una paleta de hasta 16 millones de colores. 
• Es el formato más común junto con el GIF para publicar imágenes en la web. 
• La compresión JPEG puede suponer cierta pérdida de calidad en la imagen. En la mayoría de los casos esta pérdida se puede asumir porque permite reducir el tamaño del archivo y su visualización es aceptable. Es recomendable utilizar una calidad del 60-90 % del original. 
• Cada vez que se modifica y guarda un archivo JPEG, se puede perder algo de su calidad si se define cierto factor de compresión. 
• Las cámaras digitales suelen almacenar directamente las imágenes en formato JPEG con máxima calidad y sin compresión. 
• Ventaja: Es ideal para publicar fotografías en la web siempre y cuando se configuren adecuadamente dimensiones y compresión. 
• Inconveniente: Si se define un factor de compresión se pierde calidad. Por este motivo no es recomendable para archivar originales. 

TIF-TIFF (Tagged Image File Format = Formato de Archivo de Imagen Etiquetada)

• 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. 
• Ventaja: Es ideal para archivar archivos originales. 
• Inconveniente: Produce archivos muy grandes. 

PNG (Portable Network Graphic = Gráfico portable para la red)

• Es un formato alternativo al GIF. 
• Tiene una tasa de compresión superior al formato GIF (+10%) 
• Admite la posibilidad de emplear un número de colores superior a los 256 que impone el GIF. 
• Debido a su reciente aparición sólo es soportado en navegadores modernos como IE 4 o superior. 

Quinta Actividad:

Desarrolla en un documento de Word una tabla que incluya ventajas y desventajas de cada uno de los formatos.
Captura la imagen de la tabla y desarrolla una entrada en tu blog que la incluya.

Fuente:
http://www.ite.educacion.es/formacion/materiales/107/cd/imagen/imagen0104.html

Read More

Planos de una toma y ángulos (Repasemos conceptos)

Ejemplos:

Primerísimo plano:

Plano detalle:

Primer plano:

Plano corto:

Plano medio:

Plano americano:

"Indiana Jones y el Templo Maldito" - 1984

Plano general:

Gran plano general o panorámico:

"El planeta de los simios" - 1968

Ángulos de las fotografías

Una de las técnicas que comúnmente se usa para dar más importancia a un sujeto o un elemento, es resaltar las características de éste al cambiar el ángulo desde el que tomamos la foto.

Existen diversos tipos de ángulos a la hora de tomar las fotos:

Read More

La Comunicación visual

La Comunicación es un proceso de intercambio de información, en el que un emisor transmite a un receptor algo a través de un canal esperando que, posteriormente, se produzca una respuesta de dicho receptor, en un contexto determinado.



Así, en el proceso de la comunicación encontramos los siguientes elementos:

- Intención comunicativa: Toda acción comunicativa humana se inicia en la necesidad de intercambiar información. A partir de esa necesidad surge la intención comunicativa, la búsqueda de alcanzar determinados objetivos mediante la acción comunicativa.

– Emisor: es el que emite el mensaje. Ejemplos: un sujeto individual o un grupo de personas, pero también un mecanismo que nos avisa de que algo falla o un elemento de la naturaleza que nos alerta de que el tiempo va a cambiar.

– Receptor: es el que recibe el mensaje y lo interpreta. Ejemplos: un sujeto concreto o un grupo, así como, también, puede serlo un mecanismo que actúa cuando otro le manda una señal.

– Mensaje: es la información que se quiere transmitir. Ejemplos: puede encontrarse codificado en uno de los diferentes tipos de código: puede ser un mensaje hablado, escrito, dibujado, grabado en cd, etc).

– Canal: es el medio a través del cual se transmite el mensaje. Ejemplos: puede ser un medio artificial, como las cartas o un cd, o uno natural, como el aire.

– Código: Conjunto de signos y reglas que, formando un lenguaje, ayudan a codificar el mensaje. Podemos encontrar lenguajes simples, como la luz roja sobre la puerta de un estudio de revelado, o más complejos como los distintos idiomas del mundo.

– Contexto: Conjunto de circunstancias (lugar, hora, estado anímico de los interlocutores, etc) que existen en el momento de la Comunicación. Es importante a la hora de interpretar correctamente el mensaje.

- Ruido: En comunicación se llama ruido a procesos que afectan la comprensión del mensaje en cualquiera de las etapas, dificultando el acto comunicativo.


Comunicación visual

La comunicación visual es un proceso de elaboración, difusión y recepción de mensajes en los que predominan las imágenes en su construcción.



La comunicación multimedia es comunicación audiovisual. 

¿Qué son las imágenes?

Toda imagen es una construcción de un mensaje visual que conlleva siempre una intención comunicativa. Y la comunicación será exitosa siempre y cuando el destinatario de la misma pueda decodificar correctamente el mensaje, según las intenciones comunicativas del emisor del mensaje.

Observen las siguientes imágenes.

¿Qué mensajes comunican cada una de ellas? Describan las situaciones que ustedes creen que representan.

Fuente de la información:

"Comunicación visual y tecnología de gráficos en computadora"
Juan Carlos Asinsten - Portal Educ.ar

Actividad:

Deberás:

1) Seleccionar 4 de las siguientes imágenes, descargar cada una de ellas e incluirlas en una entrada en tu blog con el título "Epígrafes".
Debajo de cada una de ellas deberás incluir 4 epígrafes verosímiles (que puedan expresar de manera creíble su sentido).

1)

2)

3)

4)

5)

6)

7)

2) Descargar de Internet 4 imágenes, incluirlas debajo en la misma entrada y agregarle a cada una un epígrafe fantasioso y/o exagerado.

Fecha de entrega: 6/05

Read More

Genialidades Tipográficas

 

Hay personas que realizan genialidades como estas...

Realiza una entrada en tu blog con el título "Dibujando con letras" que incluya una de las imágenes superiores y algunas más que encuentres en Internet.

Y si te animás podés hacer tu propio diseño...

Busca un dibujo de líneas sencillas en Internet.

Por ejemplo:

2) Imagina el mismo dibujo creado con tipografías.

Podés hacerlo en papel y tomarle una fotografía con el celu y compartirla en la entrada.

Read More

La Cultura Alfabética

Vivimos en una cultura alfabética. El texto nos rodea y es la herramienta principal de comunicación que tenemos.
No es solo es importante lo que dice un texto, sino también cómo lo dice.
La forma de materializar un texto es a través de la tipografía.

Al escribir a mano usamos caligrafía pero en la actualidad cuando queremos transmitir un mensaje lo hacemos por medio de la tipografía, que tiene ciertas características.

Hay diferentes familias tipográficas: neutras (como la Helvética), otras de palo seco que son muy técnicas (como la Gotham), algunas que remiten a lo clásico (como la Garamond).

Hay muchísimas familias tipográficas diseñadas por personas que se dedican a ello, a diseñar la forma de cada caracter. Nosotros estaremos utilizando esas piezas tipográficas para construir nuestros objetos de diseño.

Tipografías Serif y Sans-serif



No solo comunica explícitamente el texto que está escrito caracter por caracter, sino que es importante la forma en la que ese texto dice lo que dice.
Las familias tipográficas escriben de cierta manera en particular.
Entre los grupos de tipografías hay dos que son los más importantes: SERIF y SANS-SERIF.

Las tipografías Serif emulan la escritura manual y caligráfica y tiene ciertos remates que tienen que ver con la impronta de la pluma. Por otro lado están las Sans-serif (del francés sin remates) que tienen un trazo homogéneo que no modifica el grosor a lo largo del caracter.

Consejos: 

• Cuando combinemos tipografías es conveniente seleccionar una de cada tipo.
• Para textos largos impresos se sugiere utilizar la tipografía de tipo Serif y para textos cortos la Sans-Serif, porque se lee mejor.
• Para la lectura es en pantalla se sugiere lo contrario: para textos largos una Sans-serif y para textos cortos una Serif.

Variables tipográficas

Dentro de una misma familia tipográfica tenemos variables, osea, diferentes diseños de caracteres, algunos más gruesos y más angostos, e inclinados. Usualmente los denominamos negrita o bold, o cursiva.

Algunas tipografías tienen varias variables:

La tipografía Univers nos muestra todo un sistema de variables más amplio: 

Cuerpo, interletrado e interlineado

¿Qué otras variaciones podemos generar?


Podemos modificar el tamaño del texto denominado cuerpo tipográfico.



Suele medirse en puntos una unidad de medida específica para el cuerpo tipográfico.

Por. ej. para un título se suele utilizar un mayor tamaño que para el texto principal.

Otra variación que podemos utilizar es la interletra o tracking, que es el espacio entre caracteres.

Al utilizar la interletra o espaciado entre caracteres, se generan cambios muy notorios. 

Otra variación es el interlineado, el espaciado entre lineas.

También se pueden lograr cambios al utilizar este tipo de variación.

¿Qué es el gris tipográfico?

Es el paisaje general de una tipografía.
Al jugar con las variables podemos modificar la cantidad de "negro y blanco" que hay en un texto, la cantidad de "figura" y de fondo que tenemos en el texto: la sensación que tenemos es la de un gris más oscuro o más claro.

La imagen superior nos muestra un texto más denso a la izquierda y uno más liviano a la derecha. La sensación es que tenemos un gris más oscuro a la izquierda que a la derecha, aunque el color de la fuente no se ha modificado.

Por ejemplo:

Se sugiere que si aparece una misma tipología en diferentes partes del texto se mantengan las mismas características o sea la misma forma gráfica (núme de páginas, títulos, párrafos destacados, etc.).

Fuente: Curso "Fundamentos del Diseño" - Acámica.

Read More

¿Qué es el diseño?

 

Un diseño es el resultado final de un proceso, cuyo objetivo es buscar una solución idónea a cierta problemática particular, pero tratando en lo posible de ser práctico y a la vez estético en lo que se hace.

Para llevar a cabo un buen diseño es necesario la aplicación de distintos métodos y técnicas de modo tal que pueda quedar plasmado bien sea en bosquejos, dibujos, bocetos o esquemas lo que se quiere lograr para así poder llegar a su producción y de este modo lograr la apariencia más idónea y emblemática posible.

Al diseñador le llega un problema a resolver, explicitado mediante palabras en forma de texto, y debe generar una solución que muchas veces tiene que ver con un objeto de diseño que modificará una situación o cubrirá una necesidad. Y hay un proceso de traducción: la problemática llega en formato textual y la solución es un objeto. Para realizar esta traducción, el diseño hace uso de varias herramientas y áreas del conocimiento a las que podemos organizar en tres grandes grupos que son: ARTE, TÉCNICA y CIENCIA.
El ARTE ocupándose de la sensibilidad estética de la pieza de diseño, la TÉCNICA ocupándose de la utilidad y de cómo se construye esa pieza y la CIENCIA ocupándose de los saberes que son necesarios para llevar a cabo un proceso de diseño.

Muchas veces en nuestra vida cotidiana nos enfrentamos a la necesidad de tener que generar piezas de diseño (un documento enriquecido, una tarjeta de invitación, un sitio web, etc.) y debemos utilizar herramientas que son propias del diseño gráfico: texto, tipografías, niveles de lectura, jerarquías, imágenes, para transmitir un mensaje de una manera eficaz.

Fuente: Curso "Fundamentos del Diseño" - Acámica.

Read More