:::: MENU ::::

Blog del taller

  • Sep 15 / 2016
  • Comentarios desactivados en Programa de diseño de sistema de tapas de libros 2016
Diseño I, Programas

Programa de diseño de sistema de tapas de libros 2016

5- Programa del ejercicio Sistema de tapas de libros 2016

Objetivo pedagógico:
Que los alumnos diseñen completamente (imagen, tipografía y cromática) un sistema de tres tapas de libros para una colección dada.

Contenidos principales a tratar durante las clases:

  • Los elementos del libro.
  • Los componentes habituales de las tapa de los libros.
  • Diferentes tipos de colecciones: de mayor a menor recurrencia u homogeneidad.
  • Los sistemas gráficos: constantes y variables.
  • El carácter persuasivo de la tapa.
  • Lo explícito y lo metafórico. Retórica de la imagen.
  • Diferentes técnicas de representación: foto, dibujo, collage, montajes.

Pedido de diseño
Los alumnos diseñarán un sistema de tres tapas de libro (el frente y el lomo de cada una) de una misma colección. Por lo tanto las tres tapas deberán tener un grado suficiente de recurrencias gráficas y/o estilísticas (aire de familia). Se dará a cada alumno: títulos, autores, nombre de la colección y editorial. Dichos elementos figurarán en cada tapa, más una imagen que cada alumno deberá generar. Las imágenes podrán ser obra del propio alumno (foto, ilustración, etc.) o producida a través de intervención sobre imágenes preexistentes.
Las ilustraciones de tapa deberán tener alguna vinculación con el contenido de cada libro de manera directa, indirecta o figurada. Si bien un sistema de tapas puede resolverse solamente con recursos tipográficos, no los consideramos una opción válida para los objetivos pedagógicos de este ejercicio. Las ilustraciones ocuparán un espacio no menor al 40% de la superficie de la tapa. El formato de las tapas será de 14 x 21 cm (vertical).

Pautas principales de evaluación

  • Ajuste tipológico: evidente inscripción del diseño en el género “tapa de libro”.
  • Pertinencia de las imágenes: inteligibilidad de lo representado y vinculación (metafórica o directa) con el tema.
  • Estilo adecuado: compatibilidad del tratamiento gráfico general en los tres títulos del sistema.
  • Carácter sistémico: uso adecuado de elementos constantes y variables, que permitan identificar la colección.
  • Calidad gráfica general: armonía de la composición, calidad de las imágenes,
  • Tipografías y demás recursos elegidos.

Temas:

1: Literatura argentina
Colección: Letras cercanas
  1. El diario de la guerra del cerdo (Adolfo Bioy Casares)
  2. El juguete rabioso (Roberto Arlt)
  3. No habrá más penas ni olvido (Osvaldo Soriano)
2: clásicos del teatro
Colección: Tablas
  1. El zoo de cristal  (Tennessee Williams)
  2. Muerte de un viajante (Arthur Miller)
  3. Bodas de sangre (Federico García Lorca)
3: clásicos ciencia ficción
Colección: Tiempo y espacio
  1. Solaris (Stanislaw Lem)
  2. La máquina del tiempo (Herbert George Wells)
  3. Yo, Robot (Isaac Asimov)

Condiciones de entrega
Se entregarán las tres tapas en una lámina cuyas características se informarán en clase oportunamente.

  • Sep 08 / 2016
  • Comentarios desactivados en Programa del ejercicio interfaz para videojuego 2016
Diseño II, Programas

Programa del ejercicio interfaz para videojuego 2016

1. Objetivos pedagógicos a cumplir

Que cada estudiante diseñe un sistema de baja complejidad para la interfaz de un videojuego.

2. Contenidos principales a tratar en las clases

  • Función del diseñador gráfico en la industria del videojuego
  • Reconocimiento y diferenciación entre géneros o mecánicas
  • Elementos de la interfaz
  • Interacción del usuario
  • Pertinencia estilística
  • Análisis y diagnóstico de videojuegos similares a cada tema.
  • Detección de ejemplos de alto rendimiento.

 3. Pedido de diseño

Cada alumno diseñará el sistema gráfico de un videojuego que incluirá las siguientes piezas:

  • Marca producto e ícono
  • Splash screen
  • Menú principal
  • Ganar
  • Pantalla de selección
  • In game

Splash Screen: Es una pantalla donde se muestran los desarrolladores del software.

Menú principal: Es la pantalla donde se acceden a las opciones generales del juego y es la primera con interacción para el usuario.

Ganar: Es una pantalla o Menú emergente donde se felicita al usuario por un logro y generalmente se le comunica un desbloqueo de alguna función del juego. Por ejemplo un nuevo escenario disponible.

Pantalla de selección: Sirve para que el usuario decida entre varias opciones a dónde se va a dirigir en el juego. Por ejemplo selección de niveles o lugares para recorrer o investigar.

Los temas y detalles de cada uno, se pueden ver aquí.

4. Pautas principales de evaluación

  • Adecuación estilística: es la mayor o menor pertinencia del estilo gráfico propuesto (tipo de imágenes, logotipo, tipografías, organización del plano, cromática, etc.) al rubro del producto y al perfil particular del caso.
  • Calidad gráfica: es la armonía estética, la coherencia y el ajuste de los elementos gráficos propuestos para inscribirse dentro de los estándares altos de su tipo.
  • Coherencia sistémica: las piezas gráficas deben mantenerse dentro de un sistema y a la vez cumplir los diferentes objetivos comunicacionales.
  • Ajuste técnico: que cumpla los aspectos técnicos y formales con el pedido enunciado arriba (con los ajustes que se le hagan en clase).

 5. Límites

La marca, selección tipográfica, tipo de imágenes y demás decisiones gráficas quedan a criterio del alumno y no se ponen límites o restricciones técnicas mientras se cumpla con los parámetros de estilo, llamado de atención, singularidad, calidad, etc. fijados.

6. Entrega

  • Lámina 50x70cm de presentación.
  • Entrega de archivos digitales.
  • Resolución de las pantallas: 2.048 × 1.536 pixeles a 72 DPI. Orientación vertical.

7. Links de referencia

  • Sep 05 / 2016
  • Comentarios desactivados en Programa del ejercicio diseño de apertura de serie de TV
Diseño III, Programas

Programa del ejercicio diseño de apertura de serie de TV

1. Objetivo pedagógico

Que los estudiantes diseñen la apertura de una serie de TV propuesta por la cátedra. Dicha tarea implicará articular imágenes, texto y sonido, en una composición audiovisual compatible con el clima general de la serie.

2. Contenidos a tratar en las clases

  • Funciones y características principales de las aperturas de series.
  • La calidad en el medio audiovisual.
  • Movimiento, sonido, tiempo y ritmo.
  • Las herramientas para el diseño de la gráfica en movimiento.

3. Pedido de diseño

Una productora de televisión argentina ha adquirido el formato de un episodio de la serie inglesa Black Mirror para producir una nueva serie (de varios episodios) tomándolo como base. A cada alumno le será asignado uno de los tres siguientes episodios de la serie mencionada: Be Right Back, 15 million merits y White Bear. Los títulos en castellano de la nueva serie serán, respectivamente:

  1. En seguida vuelvo
  2. 15 Millones
  3. Oso blanco

Es decir que el capítulo asignado se presentará como serie autónoma adaptada a la televisión argentina, desplegándose en varios episodios pero conservando la temática y el clima. Cada episodio comenzará con la misma apertura, la apertura que debe ser diseñada en este ejercicio.

La apertura deberá contener la siguiente información: el título de la serie, los nombres de un mínimo de 6 actores y, también como mínimo, los nombres del guionista, autor de la música y director. Todos los nombres deberán corresponder a actores y profesionales del cine y televisión nacional. El orden, la manera de aparición y el tratamiento gráfico de dichos datos es libre.

La selección del material gráfico y sonoro y sus combinaciones quedarán a criterio del alumno. Pueden utilizarse: fotogramas, tomas o secuencias de la propia serie, articuladas y/o sometidas a tratamientos especiales; animaciones creadas por el alumno o extraídas de otras fuentes, con cualquier técnica y retórica (abstracción, realismo, collage, stop motion, siluetas, metáforas, etc.) y toda clase de combinaciones posibles entre dichos recursos.

El diseño requiere de la incorporación del sonido: una misma música continua o varias, combinación de música con sonidos especiales, etc.

El diseño solicitado tiene tres condicionamientos simples:

  1. Que el clima general que den la animación de imágenes, textos y música de la apertura sea compatible con el contenido y clima de la serie que le da origen. Dice el diccionario RAE:

COMPATIBLE: 1. adj. Dicho de una persona o de una cosa: Que puede estar, funcionar o coexistir sin impedimento con otra.

  1. Que la información textual sea legible y su tratamiento refleje las jerarquías y órdenes de importancia.
  2. Que la apertura dure 60 segundos, con un mínimo de 30” diseñados por el alumno. Por ejemplo, quien diseñe una animación de 40” deberá agregar una secuencia de la serie, sin diálogos, de 20”, tiempo en el que se terminará de incluir la información. Es decir que todos los trabajos tendrán que completar la información textual requerida en 60 segundos.

4. Criterios de evaluación

  • Pertinencia tipológica: La inscripción de la pieza dentro del tipo «apertura de serie de TV».
  • Compatibilidad estilística: los recursos estéticos adoptados deberán transmitir un clima compatible con la serie.
  • Calidad audiovisual: Armonía entre los elementos gráficos e imágenes, el movimiento, el manejo del tiempo y la banda de sonido.
  • Adecuada claridad informativa: clara comunicación de los datos (título y créditos).

5. Presentación

Cada alumno entregará un video de 60 segundos en formato HDV 720p30 (720 x 1280 px) ó HDV 1080i30 (1920 x 1080 px). A los 60 segundos del trabajo se les deberá anteponer una placa fija con fondo negro y los siguientes datos:

  • Cátedra Belluccia
  • Año 2016
  • Materia Diseño Gráfico III
  • Comisión: Nombres completos de los docentes
  • Trabajo práctico: Apertura de serie de TV
  • Nombre completo del alumno

La duración de la placa fija deberá ser de 5 segundos. Es decir que el video a entregar durará 65 segundos en total.

El archivo deberá tener la siguiente denominación:

2016_dg3_apertura-de-serie-de-TV_Nombre-Apellido.???

Se recomianda generarlo con algún tipo de compresión, como H.264 o similar, ya que los videos sin compresión pesan mucho y tienen problemas para mostrarse en algunos sistemas.

6. Material de consulta

Ejemplos de títulos de apertura de series de TV

Tutoriales de After Effects

Tutoriales para animación de textos

 Comentarios sobre los capítulos de la serie Black Mirror

Audio para descargar

Plugins para After Effects

  • Ago 30 / 2016
  • Comentarios desactivados en Cómo publicar un sitio via FTP
Diseño III, Programas

Cómo publicar un sitio via FTP

Esta guía está orientada únicamente a quienes no tengan idea sobre el tema. El resto puede resolver la publicación del sitio de la forma que considere más conveniente.

 

Crear una cuenta en algún servicio de Hosting

Para subir el sitio lo primero que se necesita es tener un servicio para alojar el sitio (hosting). En general este es un servicio que se paga pero hay opciones gratuitas que no te permiten tener dominio propio pero sí te dan una URL de un subdominio. Por ejemplo:

Al registrar la cuenta te envían por mensaje por email un link de confirmación. Hay que darle click a ese link. Una vez confirmado el email te llega un segundo email con consejos y una guía de inicio (en inglés). Pueden ignorarla. Dentro del panel de control ir al menú «Ajustes», «General», donde se puede encontrar la información para conectarse por FTP. Los datos que nos importan son los pintados de rojo:

—————————————————

Detalles FTP

FTP transfer: ON
Nombre del Host: files.000webhost.com
Usuario: usuarioprueba

Contraseña: la misma contraseña que la de tu sitio web

—————————————————

Cliente FTP

Lo siguiente que se necesita es contar con un programa de FTP que nos permita conectarnos con el servidor para subir los archivos. Hay miles gratuitos como:

Pero también hay programas de edición de código que incluyen un cliente FTP. Brackets no lo incluye por defecto, pero varias extensiones que se pueden descargar desde el mismo programa. Una de ellas es SFtpUpload. Para instalarla hay que ingresar al menú «Archivo» y luego al submenú «Gestionar Extensiones». Una vez que la ventana del gestor de extensiones termine de cargar, escribir «SFtpUpload» en el campo de búsqueda y cuando aparezca la extensión, darle click al botón «Instalar». Esta opción es bastante buena para el que ya sabe, porque permite configurar el sitio para que se suban los archivos cada vez que se guardan y así mantener sincronizada la versión local con la versión remota. Para el que no comprende bien el tema FTP sugiero utilizar cualquier cliente FTP como los mencionados, que suelen mostrar la pantalla dividida en dos: de un lado los achivos locales y del otro los archivos remotos.

Veamos el caso de Filezilla, que está disponible para Mac y Windows. En el menú «Archivo», seleccionar «Gestor de Sitios». Crear un nuevo sitio y en la pestaña «General» ingresar los datos de nuestro servidor de hosting, como se muestra en la siguiente imagen.

Deben completar el campo servidor con el nombre del host que encontraron en el panel de control del ar.000webhost.com, luego su usuario y contraseña.

Luego, en la pestaña «Avanzado», prestar mucha atención a los campos de directorios. La carpeta que debemos incluir en «Directorio local predeterminado» debe ser la misma en la que se encuentra la home del sitio (generalmente index.html). La pueden buscar con el botón «Examinar». En el caso de la carpeta remota, esta va a depender del servicio de hosting que utilicen. En ar.00webhost.com es «/public_html». Muchas veces se llama «/www». Presten atención a la barra del principio.

En la pestaña «Avanzado» verán dos opciones útiles. Una es «Usar navegación sincronizada», que sirve para mostrar la carpeta remota y la local en forma simultánea. La otra opción es «Comparación de directorios». Esta opción muestra pintadas de color verde los archivos que son iguales en el servidor remoto y en la máquina local y en amarillo los archivos que necesitan sincronizarse. Para subir o bajar un archivo basta con darle doble click al archivo o arrastrarlo de una ventana a la otra.

Para poder conectarse a ar.00webhost.com deberán seleccionar la opción «Pasivo» en la pestaña «Opciones de Transferencia». Una vez conectados a este servidor verán que la carpeta «/public_html» incluye un archivo llamado «default.php». Para que el sitio funcione deberán eliminar ese archivo.

 

Qué archivos subir y qué archivos no

Muchas plantillas vienen con una serie de carpetas que no son necesarias para el funcionamiento del sitio, generalmente de documentación o versiones en otros códigos de programación (PHP). La carpeta que deben subir es la que contiene la home del sitio. Nada más que eso. Toda otra carpeta que esté a la par de la que contiene la home del sitio, no deben subirla al servidor. Pero no deben subir la carpeta en sí, sino solamente su contenido. Es decir que la página de la home debe quedar directamente en la carpeta raíz del sitio en el servidor, sea cual sea su nombre, «/htdocs», «/public_html» o «/www».

Por otra parte, como comentamos en clase, notarán que algunas plantillas vienen con una carpeta llamada «less» o «sass». Esas carpetas no son necesarias para el funcionamiento del sitio. Pueden obviarlas.

Una vez que hayan subido todos  los archivos vayan a la dirección web que definieron al crear la cuenta de hosting y deberían encontrarse con el sitio que están desarrollando.

  • Ago 08 / 2016
  • Comentarios desactivados en Programa de diseño de infografía 2016
Diseño I, Programas

Programa de diseño de infografía 2016

1. Objetivo
Que los alumnos diseñen una infografía para una doble página central de diario/revista.

2. La infografía
Entendemos por infografía la explicación visual sintética, simplificada, de un hecho complejo. Por ejemplo: el edificio y las instalaciones de un teatro; un accidente de aviación; las causas y consecuencias de una enfermedad, de un terremoto, de una tormenta; un viaje espacial; el ciclo de vida de una especie; los viajes de Colón; etc.

Es un recurso de diarios y revistas para facilitar la comprensión rápida de un hecho al público en general. Se diseña en un solo plano que el lector observa completo ante sí. Utiliza ilustraciones, fotografías, gráficos, diagramas y textos para explicar los contenidos del tema. Se basa en la capacidad de la imagen, los gráficos y los diagramas para transmitir información rápida y comprensible, y reduce los textos a lo indispensable. Debe atraer y retener al lector mediante la calidad estética de sus elementos, y debe informarlo mediante una clarísima lectura del relato general.

A diferencia de una puesta en página convencional donde el diseñador recibe los textos e imágenes para diagramar, en la infografía el diseñador debe:

  • Comprender y analizar perfectamente el tema a comunicar.
  • Definir qué es lo importante, qué es lo secundario y qué datos del tema hay que dejar fuera de la infografía.
  • Definir qué tipo de datos deben comunicarse mediante texto, mediante fotos, mediante ilustraciones, mediante gráficos, mediante planos o diagramas, etc.
  • Operar sobre las fotos o hacer ilustraciones “a medida”.
  • Darle el tamaño y la ubicación adecuada a cada elemento para organizar una suerte de “video” ameno y, a la vez comprensible.
  • La infografía requiere de una intervención activa por parte del diseñador.

3. Contenidos principales

  • La infografía.
  • La función informativa dentro del mensaje.
  • Comprensión de un tema y selección de información relevante.
  • Organización y jerarquización de la información.
  • Los recursos gráficos (texto, imagen y diagrama) y sus usos adecuados.
  • Manejo de elementos gráficos.
  • Integración imagen-texto.

3. Pedido de diseño
Los estudiantes, agrupados de a dos, diseñarán una infografía sobre un tema que será asignado en clase, para una doble página central de una revista de divulgación/interés general, de las siguientes medidas: 26 cm x 34 cm cada una, total 52 cm x 34 cm. La doble página, que podrá ser vertical o apaisada, deberá incluir volanta, título y una bajada. De manera opcional se podrá incluir el texto correspondiente a una nota breve. Deberá incluir una imagen central, y al menos tres formas diferentes de graficar información (tablas, gráficos, planos, diagramas, etc.) y los textos indispensables para la comprensión rápida y certera del tema.
La doble página tendrá un margen externo de 1 cm que no irá impreso (solamente el margen externo, no el lomo donde se unen las dos páginas).

4. Pautas de evaluación
Para las correcciones en clase y para la evaluación final del ejercicio se tendrán en cuenta los siguientes parámetros:

  • Carácter infográfico
  • Adecuada inscripción de la pieza dentro del género “infografía”
  • Comunicación/claridad informativa/pertinencia
  • Organización inteligible del contenido.
  • Comprensión rápida y certera del mensaje.
  • Manejo adecuado de las jerarquías.
  • Correcta legibilidad.
  • Pertinencia de los recursos elegidos.
  • Pertinente elección de la o las imágenes.
  • Riqueza de contenido.
  • Calidad gráfica
  • Armonía de la puesta en página y diagramación.
  • Adecuada selección y uso de la tipografía.
  • Adecuada selección y tratamiento de las imágenes y demás recursos utilizados (diagramas, gráficos, fondos, misceláneas, etc.).

5. Entrega
La doble página se entregará desplegada, montada sobre un soporte rígido. En el dorso de ambas piezas se incluirán los nombres de los alumnos, comisión y cátedra.

Se adjuntará un CD claramente identificado con marcador indeleble (2016, DG1, Infografía, Nombre y apellido del alumno) que contendrá el trabajo en formato PDF y en JPG (imágen de 1920 pixeles de ancho). El nombre del archivo PDF responderá al siguiente criterio:

2016_dg1_infografia_Nombre-Apellido.pdf

La entrega se considerará en horario hasta las 20 hs.

Temas
1- Personaje (real o ficticio), contenido relacionado con el deporte
2- Lugar, monumento, contenido relacionado con la historia o la arquitectura
3- Máquina, artefacto o vehículo, contenido relacionado con la ingeniería
4- Contenido relacionado con la ciencia, geografía o astronomía

Páginas:12345678...24