sábado, 30 de enero de 2016

7.B Diseño tipográfico


¡Buenas!

Hoy os muestro un alfabeto que he realizado, cogiendo como letra base la "e" de Microsoft Edge.
Es el primer alfabeto que realizo y no tengo mucha práctica, pero creo que a quedado bastante bien.

Aquí os lo dejo, echarle un vistazo.


Logo original:

http://www.zonamovilidad.es/fotos/2/ovco3sjldc8drljgsfjs.jpg



Alfabeto:












Con guías (altura x, trazos ascendentes y descendentes)






¡Espero que les guste!
¡Hasta la próxima!




7.4 Tipografía creativa.


En este apartado os comentaré las diferencias entre las tipos de edición y la creativas:


- Tipos de edición:

Son legibles, con interlineado y línea de base regular, con kernin regular, con márgenes, uniformidad de caracteres... Son tipos que pasan desapercibidas y den belleza, serán de un modo u otro según el soporte y el público, por ejemplo en un libro, periódico, revista...


http://www.congresotipografia.com/wp-content/uploads/Mostra01_w.jpg


- Tipos creativas:

Comunican a través de una imagen, de por las palabras en sí, aporta una metáfora visual, con estilos variados, con imágenes, con diferentes composiciones, con contornos, juega con el Kerning e interlineados y rompe la línea. Son tipos que llaman la atención, que impactan y comunican claramente un mensaje. Para carteles, poster...


http://hazmeweb.es/wp-content/uploads/2014/04/Tipografia_dibujo.jpg


- El texto: adquiere valor de imagen y como ya he dicho se puede hablar de metáfora visual.              
- Ahora os mencionaré algunas fuentes libres, decorativas y de titulares:

Como ya mencioné en el apartado 5.6 Tipos libres, decorativos y detitulares esto ahora dedicaré a mencionarlo por encima, si quieren saber más solo tiene que ir a ese punto del blog.

http://www.letramania.com/archivos/miniaturas/Stencil.jpg
Algunas tipos son:

  • Stencil/ Pantalla




http://content.altfonts.com:88/img/T/E/Techno-Hideo.png


  • Techno



http://cdn.designbeep.com/wp-content/uploads/2012/10/25.free-brush-fonts.jpg


  • Brush



http://st.depositphotos.com/1030956/5167/v/950/
depositphotos_51675639-Halftone-dots-font-dirty-
grunge-color-pixels-print-texture-lett.jpg




  • Texture








https://mapra2preimpresion.files.wordpress.com/2011/11/fantasia.jpg



  • Fantasía...






¡Espero que les haya gustado!
¡Hasta la próxima!



7.3 Programas tipográficos.


A continuación os comentare unos cuantos programas tipográficos, para crear tipos:


-El primero fue FontForge, es un software para linux. Y es un software libre, pero solo para Linux. Con una ventana con todos los caracteres que tiene la fuente y otra en la q aparece la letra seleccionada, con sus espaciados, la línea de base,...

https://upload.wikimedia.org/wikipedia/
commons/d/d0/FontForge_2012.png

Para hacer las pruebas de espaciados se suelen hacer las pruebas con los caracteres siguientes, con OOOROHOO... , la O se suele elegir ya que es un cuadrado o rectángulo y es la que más espacio ocupa...

------




-FontLab, es un software para Windows y para Mac. Este antes fue lo más, pero ya no.

-Fontographer, sirve para crear y editar tipos, creado por FontLab. Es un software para Windows y y Mac. Y a parte de estos dos también se hizo otro llamado Typetool. Este era un programa más básico para estudiantes... es como una iniciación al diseño gráfico. Ahora mismo es lo más

http://imagenes.es.sftcdn.net/es/scrn/1000/1620/typetool-8.jpg
FontLab fue el programa indiscutible de texto, pero perdió contra Fontographer, porque le integraron a este último más contenido y se dedica más al diseño, y FontLaba se dedica más a la edición.

------

-Glyphs, se trata de un software para Mac. Su versión 1 no alcanzo a FontLab, pero la versión 2 si lo hizo.
-Robofont, se trata de un software para Mac. 
Y es un programa de postproducción de fuentes. A partir del Master, genera la familia completa, de cursivas,...


Fontself, es como estensión de adobe, que todavía esta en proyecto. Y lo que se pretende es que de una imagen dibujada construir casi de una manera automatica las fuentes, pero aun no esta disponible.


Y por último mencionar que el formato tipográfico estándar sería el (.UFO)

Y mencionar IfontMaker, que se trata de una aplicación táctil para la tableta, en el que dibujas las letras para aprender a hacer tipos por la tablet.


¡Hasta la próxima!

7.2 Fundamentos del diseño tipográfico.



1- Lo primero que hay que plantearse cuando se quiere hacer un proyecto tipográfico es definir las características de la familia tipográfica que uno pretende crear. Características a tener en cuenta:

-Peso
-Eje/ modulación
-Ancho x
-Altura x
-Contraste trazos
-Remates

Son las características que definen a la letra, de edición normalmente.


2- Correcciones ópticas, las correcciones que hay son:



https://tiposformales.files.wordpress.com/
2010/09/he2.jpg
- Coherencia formal; Si estoy haciendo una fuente tipográfica y tengo claro las caracteristicas que tiene que tener, tengo que intentar repetir las mismas características en todas las letras de la fuente.

- Correcciones concretas; También hay correcciones concretas, como por ejemplo en la “E” mayúscula. En la “E” el palo del medio se coloca ligeramente mas arriba y no en el medio, para que cuando lo veamos lo hagamos bien, esto es debido a un efecto óptico, La O no es un circulo, sino que tiene un eje que le da más altura que anchura, el circulo interno le da el grosor y la curvatura. Entre otras muchas correcciones.




https://upload.wikimedia.org/wikipedia/commons/
thumb/d/da/Kerning_EN.svg/2000px-Kerning_EN.svg.

3- Espaciado no solo lo tienen las letras, sino también:


-Prosa o kerning, espaciado entre caracteres. 

-Numerales.

-Espacios verticales, que afectan a los interlineados. Es el espacio entre los parrafos, para impedir, por ejemplo que una “j” del párrafo de arriba moleste a una “l” del parrafo de abajo. Para que haya el bastante espacio entre párrafos para que los trazos ascendentes y descendentes no se toquen.

-Acoplamiento: que consiste en que se superponener los espacios de los huecos de las letras,
por ejemplo en PAVA , la A invade el espacio de la P y la V de la A. Esto ocurre por las formas de las letras, que parece que en unos sitios queda más espacio en blanco que en otros y esto se arregla superponiendo los espacios.



¡Hasta la próxima!

7.1 El proceso de diseño tipográfico.


http://tipo-e.com/blog/wp-content/uploads/
2012/08/gandhi_bocetos_2-600x459.jpg

1-A la hora de diseñar algo se tiene en cuenta un proyecto que tiene dos partes; 
(Motivación y Bocetos)

Para diseñar cualquier cosa hay que tener en cuenta un proyecto, en el cual lo primero que se hace es un boceto, pero antes del boceto esta la motivación para diseñar una tipografía. 

Puede haber una motivación de caracter personal o un encargo, pero además hay otros motivos a parte de estos dos anteriores, por ejemplo, el interes por aprender o ampliar conocimientos, practicar una
 disciplina, para darse a conocer, por ganar dinero...


2 -Ya realizado el proyecto, de pensar el para que y como se va a usar y los bocetos, se pasa al siguiente paso que sería la digitalización:

Lo primero sería crear la fuente con el peso normal, eso se llama Master, es la tipo base de la que surgen todas las variaciones de la tipo. Se elije la ilustración que puede estar en papel abocetada , escaneado... y se empieza a digitalizar. Se suelen hacer las tipos en illustrator y después se exportan a un programa de diseño tipográfico.


https://tiposformales.files.wordpress.com/2010/08/156_desarrollodefuentetelteca.jpg

3- Y pasamos al siguiente paso que sería la producción

En este proceso se hacen los múltiples o la familia de la fuente (negrita, cursiva...)

4- Y pasamos a la postproducción

En este proceso se crean y calculan o miden los espaciados, un proceso muy importante de la tipografía. Las formas y contraformas se tienen mucho en cuenta a la hora de medir y calcular los espacios. El espaciado que debe de haber entre las letras se llama; Prosa ó Kerning.

5- Y el último paso sería la comercialización

Llegados a este paso, ya hemos acabado la fuente tipográfica y estamos preparados para ponerla a la venta, y distribuirla. Hay ya cada uno hace lo que vea mejor, si la quiere vender, ponerla gratuita, regalarla, colgarla en su pagina web, apoyarse en una fundición digital como MyFonts por ejemplo, que la va a poner en circulación...


¡Hasta la próxima!

6.C Diseño ‘PechaKucha’ de fundición digital (Atipo)


A continuación os dejaré un Pechakucha que se realizo para presentarse en clase sobre una fundición digital, en mi caso, Atipo. En el vídeo se mostrarán las 20 diapositivas, pero no tiene audio, ya que la exposición se realizo oralmente en clase y no se grabó.

(Lo subiré cuando pueda, ya que por motivos que desconozco, no me deja subirlo)

6.B Post investigación: Una fundición digital (Atipo)


Buenas, a continuación os voy a hablar de una fundición digital española llamada Atipo.



https://scontent-mad1-1.xx.fbcdn.net/hphotos-xaf1/
v/t1.0-9/164996_157259987653132_3681410_n.jpg?
oh=00c8eeacbdbbcff4996ca8d2e1046df8&oe=57350E38



http://graffica.info/wp-content/uploads/2013/12/00_foto_Atipo.jpg

Atipo es un pequeño estudio multidisciplinar (de comunicación gráfica, diseño editorial, identidad corporativa, web, motion, tipografía e ilustración), que fue creado en 2010 por los diseñadores Raúl García del Pomar e Ismael González González en Gijón.

Ambos diseñadores coincidieron en la Facultad de Bellas Artes de Salamanca, donde se licenciaron en Diseño Gráfico y Audiovisuales. Después de trabajar en diferentes estudios y agencias, en plena crisis, ambos decidieron desarrollar su proyecto personal Atipo.




Atipo tiene un estilo clásico, pero con un aire actual, ya que pretenden que sea intemporal. Con un diseño cuidado y sin estridencias. Destacan en el uso de la tipos y cromatismos, de base conceptual.

Intentan actualizarse siempre y aprender de sus errores.

Piensan que en un furuto el papel perderá protagonismo pero aun sigue seguirá estando, al igual que  las tipos para impresión y que además, abrá nuevas tipos digitales para pantallas, web, móviles y tablets.

Y comentar que en poco tiempo consiguieron cierta fama y recibieron numerosos premios (algunos fueron: Laus, Brand New Award, Motiva...)



http://www.unostiposduros.com/wp-content/uploads/2012/11/calendas-01.jpg


Atipo a creado varias fuentes a lo largo de estos años, como por ejemplo Calendas, que fue la primera que realizaron y fue desarrollada para uno de sus proyectos llamado “Dosmilonce”
Con aire clásico, gran legibilidad y elegancia, pesada para trabajar en tamaños pequeños y con remates caligráficos. Más adelante realizaron la Calendas plus, una versión mejorada de la anterior.
Comentar que Edward Leida vio en Calendas la nueva tipo que usaría para el rediseño de la revista Town & Country, Además solicito a Atipo nuevas versiones o pesos (versión para texto (más femenina), semibold, semibold italic, titulares y swashes).



http://atipo.es/wp-content/uploads/2013/04/10calendas-tandc.jpg


Además mencionar que Dosmilonce, fue un proyecto que como ya e dicho, realizo Atipo, que 
consistió en convertir un calendario en una novela y durante este proceso fue cuando se desarrollo la tipo Calendas, como ya mencione.


http://atipo.es/wp-content/uploads/2014/09/cassannet-01.jpg


Otra de las tipos que hicierón fue la Cassannet esta tipo está inspirada en tipos usadas por Cassandre. Es una sans-serif, con formas geométricas, sencilla y equilibrada, que recoge el espíritu de la época con muchas variantes y ligaduras. 
.
Comentaros que la tipo Cassandre surgio a partir del proyecto Grafilm de Atipo. En el que realizaron nuevas versiones de carteles clásicos de cine, recreados con el estilo gráfico de mitos del diseño.

Además para promocionar la tipo Cassannet, decidieron hacer un homenaje a Cassandre y recrearon en carne y hueso el tríptico “dubo, dubon, dubonner”. A continuación les dejo el video, que me resulto bastante curioso:



http://atipo.es/wp-content/uploads/2014/09/tcassannet01.jpg
http://www.mryuse.com/wp-content/uploads/dubonnetpost.jpg





http://bariol.com/wp-content/uploads/2015/08/bariol-slider-web2015-01.jpg

http://bariol.com/wp-content/uploads/2015/08/bariol-icon-02.jpg


Otra tipo es Bariol, es una tipo sans serif redondeada, condensada ligeramente, amable y cercana. Y 
muy legible hasta en tamaño pequeño. Además tiene una versión con serif y una larga lista que iconos curiosos y divertidos.


http://bariol.com/wp-content/uploads/2015/08/bariol-icon-06.jpg



http://atipo.es/wp-content/uploads/2014/09/salome-01.jpg

La Salomé es otra familia tipográfica con un diseño único y atractivo, inspirada en las didonas, con líneas puras y alto contraste. Tiene cuatro estilos y cursivas con bastantes ligaduras y alternativas. También realizaron Salomé booklet, que era un folleto con ilustraciones para promocionar esta tipo.


https://scontent-mad1-1.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/
11017692_865898450122612_1578591748697401896_n.jpg?
oh=728f5f0665e6cd2c2fd8f9c0d7e374c7&oe=572E5157

La tipo Geomanist tiene un diseño contemporaneo sans, limpio y elegante, con una combinación de formas geométricas y toques humanistas. También realizaron Geomanist booklet, un folleto inspirado en esta tipo.



Comentar que todas las tipos que hemos visto las podéis encontrar en la página oficial de Atipo gratuitas o pagando lo que quieras. 



Además la agencia de branding ico design les encargo crear una fuente e iconos a medida para la nueva identidad y señalización del aeropuerto Luton de Londres.



https://scontent-mad1-1.xx.fbcdn.net/hphotos-xpf1/v/t1.0-9/
1384325_829082410470883_1924912634369187650_n.jpg?
oh=369eba78152ba5eba3c71a63f296410d&oe=5724A665


Esta gente no solo se dedica a hacer tipos sino que también hace diseños de marcas o entidades, ilustraciones y lettering,... hasta incluso han realizado un cuento interactivo.
Como por ejemplo Animodul, en el que crearon el diseño de la marca de ropa y juguetes para niños, en el que tema escogido fue los animales. O The Poool, donde realizaron las ilustraciones y lettering para esta revista, donde hicieron tributo al jazz. También crearon otros diseños de identidad como el de Minke, el de Play restart o el de Bömarzo. Además crearon un cuento interactivo para niños, “El viaje de alvin”, en el que el prota esta dispuesto a recorrer 400 km en su segadora para reencontrarse con su hermano.


http://atipo.es/wp-content/uploads/2014/09/01animodul1.jpg

Y para despedirme aquí os dejo Fontface, otro de los homenajes que han realizado, esta vez dedicado a 4 diseñadores de tipos famosas. En este proyecto realizaron diferentes tipos en la cara de una chica, para elaborar 4 carteles, cada uno dedicado a una tipo en concreto. Aquí les dejo los carteles y el video:

https://vimeo.com/19558725



http://images.bigcartel.com/bigcartel/product_images/
33476500/max_h-1000+max_w-1000/fontface_05.jpg




Aquí os dejo, espero que os haya gustado.

¡Hasta la próxima!





6.5 Tipografía en soportes digitales.


En este apartado os comentare los diferentes soportes digitales que hay.


1- Web

Comentar que hace unos años atrás si usabas una de las tipos de Windows o Mac para una pagina web, sabias que lo escrito iba a salir bien, que los demás verían el texto tal y como tu lo estabas viendo, pero si trabajabas con otras tipos que no fueran ni de Windows ni Mac, corrías el riesgo de que los demás no lo viesen como tu lo estabas viendo, pero esto se fue arreglando con el tiempo. 

 Tipos que se podían usar: vendarna, time new roman, comic sans sans serif,...

Y comentar que los estándares de las pantallas se han ido cambiando a lo largo de tiempo, antes eran más pequeños y ahora son grandes, y las tipos se han tenido que ir adaptando. Y decir que el tamaño de las tipos no bajan de 9, ya que no se leería bien.



2- Móvil/ tablets:
http://dispersium.es/wp-content/uploads/
2014/04/responsive-vs-mobile-first.png

Hay que tener en cuenta que lo que hagas, digitalmente, se va a ver en tablets, ordenadores, móviles...

Actualmente hay un movimiento llamado Mobile First, por el que se consume más datos desde el móvil, que desde otros dispositivos, entonces cuando se diseña una pagina por ejemplo, para lo primero que se diseña es para móviles y después es cuando ese diseño se pasa a formato tablet y ordenador.







3 – Libros digitales:

Uno de los avances que hizo la wed fue las Hojas de Estilo (CSS), define como va a ser el texto de un contenido que esta en la web, el tipo de fuente, tamaño, jerarquía...

En la versión 1 de la CSS no se podía integrar ninguna fuente, solo se podía utilizar las que tenía el sistema por defecto, tu no podías añadirles nuevas. O si no tenías que incluir dos alternativas, una para MAC y otra para Window, de tipos, entonces tenías que pensar el como iba a salir en Mac y como iba a salir en Windows, y era un lio.

Y llego la version 2 con una función llamada @font-face, que te permitía añadir en tu pagina web una fuente y eso automáticamente servía como una carga temporal o incrustada, cualquier fuente que tu utilizaras al entrar el cliente se veía, con cualquier fuente que utilizases, pero no tenía mucha seguridad y esto provocó que muchos informáticos pudieran coger la tipo de ahí y las piratearan, esto facilito la piratearía de fuentes.

En la versión 2.1 eliminaron la función @font-face. En 2008 llego el CSS 3, se inventaron los alojamientos virtuales de fuentes virtuales, que permite la carga temporal de la tipo y permite usar fuentes que están en un servidor.



4- Texto y programación:

Elementos de tipografía para hacer contenido experimental de carácter creativo aplicado a texto:


https://s-media-cache-ak0.pinimg.com/236x/
dc/ef/4f/dcef4f15728cb219d29b26a126adf934.jpg


1- Processing: es un sistema o lenguaje de programación muy básico pensado para diseñadores y artistas para gente que no tiene muchos conocimientos pueda escribir códigos y puedan programar, para que lo tengan mas fáciles. Se trata de un código.

2- Scriptographer: es un plugin de illustrator, en el que tu no haces el dibujo a mano, sino que es un dibujo con formas generativas, que se genera por códigos , por algoritmos del programa no a mano. Y se genera en tiempo real.







3- Paper.js: es una implantación de HTML5, que es la ultima versión de l HTML, con muchas funciones , muchas de carácter generativo, sobre todo de animación, movimiento, con tecnología flash.

4- Natebox: es un sistema de código libre, con caracteres generativos.

5- Cindex: crea formas auto generadas, no están realizadas a mano, esta realizado por códigos. Código libre.



¡Hasta la próxima!


6.4 Fundiciones digitales.


En este apartado os hablaré de las fundiciones digitales que debéis visitar y las que no.


http://4.bp.blogspot.com/-69HVSMfaBLw/U0LtFJ0wBrI/
AAAAAAAAIrU/iWZ_0_5cgnk/s1600/
Donde+descargar+tipografi%CC%81as+y+donde+no2.jpg


Empezaré comentándoos las que no debéis visitar, ni debéis descargaros ninguna tipo, que son las siguientes: Dafont, Fontzone, 1001 freefonts... entre otras, ya que las tipos que ofrecen están
incompletas , mal diseñadas o mal vectorizadas. Además mucha tipos son pirateadas y acaban en estos sitios.






Y ahora os hablare de las grandes fundiciones digitales que si vale la pena visitar y descargar sus tipos.
Son las siguientes:

MyFonts: una de las más famosas, pertenece a la industria monotipia. Se modernizaron, pasaron de dedicarse a las máquinas de escribir a dedicarse a las fuentes digitales.

Linotype: pertenece a la industria Linotype y al igual que Myfont, se modernizo.

Fontshop: fue la primera, creada por Spiekermann y Brody en 1989. Con tipos de gran calidad.
Con aplicación para móviles y ipad.

Fonts.com: pertenece también a Monotipia

http://2.bp.blogspot.com/-nNpqxXZCqMA/U0LtkxoG2hI/
AAAAAAAAIrc/xHvPVjUusPs/s1600/
Donde+descargar+tipografi%CC%81as+y+donde+no3.jpg
Hype for type: Es más nuevas , pero cada vez va cogiendo más fuerza.

Creative market: este es de recursos en general no solo de tipografía , con tipos , fondos de pantallas, imágenes de vectorizadas predeterminadas , texturas, …

Emigre: Es una revista importante, también tiene 
una sección dedicada al comercio de tipografías







Hay nuevos conceptos de sistemas de comercialización de tipos:

Typekit by Adobe: este propone una tarifa plana de tipografía . Tu pagar un servicio temporal y puedes usar las tipos que quieras de Typekit durante ese tiempo que pagas., pero las tipos no son tuyas.

Fontstand: Lo que haces es que alquila s la tipo durante un tiempo y la puedes utilizar durante ese tiempo que has alquilado .

Otros métodos: Es que pagas lo que quieras dar por la tipo.

Otras fundaciones españolas: Atipo, Typerepublic, entre otras.


¡Hasta la próxima!