Estructura y Composición de un Sitio Web

La página web y su constitución Lo que define el diseño de una página web es la forma de organizar los elementos que la componen. Hay miles de formas diferentes, pero son pocas las que funcionan y adquieren el sentido que necesitamos para nuestro trabajo.

Podemos recurrir a estructuras como Bootstrap o 960grid para tener un apoyo importante. Hoy en día hay muchos frameworks con los cuales podemos basarnos a la hora de diseñar un nuevo proyecto.

Básicamente, los sitios web se componen y estructuran de la siguiente manera:

Contenedor

Esto es lo que definimos en la regla Body o en algun div de nuestra estructura. Dentro de este contenedor estarán todos los elementos del sitio; módulos, contenidos, imágenes, etc.

Este contenedor puede tener un ancho fijo; el ancho será igual para todos los navegadores y dispositivos, o uno fluido que se adaptará al ancho de nuestra ventana. Si usamos web responsive, podemos manejarlo con CSS sin problemas.

Logotipo

Acá es dónde debemos dejar la imagen de la empresa, que identificará la marca en todo el sitio. Puede ser el logotipo de la empresa o el nombre. Al estar arriba acompañara la navegación por todo el sitio ayudando al reconocimiento de la marca.

Navegación

Que importante es la navegación y el menú que la contiene. La forma más aceptada y fácil, es el menú horizontal, que siempre tiene a mano lo más importante del sitio web.

Los menús verticales pueden usarse como complementos o sub menús, de los horizontales, y siempre cerca de la línea horizontal del menú principal y deben ser visibles en el primer pantallazo, al entrar.

Contenido

Lo más importante y fundamental de una buena página. Lo que mantiene al visitante cautivo e interesado. Si el contenido es malo o poco interesante, abandonará la página en pocos segundos. Para eso, debe estar centralizado y enfocado y a la primera vista. El mejor lugar debe ser para los contenidos. Para Google, el contenido es el rey.

Footer

Localizado al final del sitio, abajo, generalmente dejamos ahí información de Copyright y legales o menús secundarios. Aunque en los últimos años, se usa mucho para incluir información de redes sociales, direcciones, noticias.

Espacio Negativo

Esto es tan importante como el espacio positivo. También llamado espacio blanco, es todo lo que no tiene información de ningún tipo, pero que cumple un rol importantísimo para la web; nos ayuda a tener espacios de respiración, a equilibrar y dar balance a todo el diseño. Si eres novato, o tu cliente es ignorante en la materia, tratará de llenar esos espacios, con la consiguiente saturación de contenidos, dejando una web ilegible e innavegable.

Anuncios

Crear con Illustrator una bola del mundo giratoria en 3D

Advertencia: La bola del mundo que creamos con esta técnica no es una imagen precisa. Sólo se debe usar como globo de referencia general en mapas más detallados. por ejemplo. Para crear globos terráqueos geográficamente precisos y detallados es necesario usar otras técnicas y herramientas más apropiadas.

La técnica resumida

  1. Crear un mapamundi plano con sus rayas geográficas y guardarlo como “Símbolo“.
  2. Crear un trazo en forma de semicírculo.
  3. Aplicar al semicírculo la herramienta “Efecto - 3D- Girar” para crear una esfera.
  4. Proyectar sobre la esfera el “símbolo” del mapa.
  5. Colocar encima un semicírculo en transparencia “Superponer” para darle más volumen.
  6. Opcional: Añadirle una sombra debajo (como se ve en la imagen de arriba).

Ni más ni menos.

Paso a paso

Crear el mapamundi

No nos engañemos. No vamos a crear un mapamundi. Lo usual es usar algún mapamundi vectorial de calidad razonable de los miles que hay disponibles; por ejemplo: All free map (éste es el que he usado) o Perry-Castañeda Library Map Collection: World Maps.

La proyección geográfica y el nivel de detalle quedan al criterio de cada uno, pero de debe tener en cuenta:

  • La falta de detalle de un mapa de mala calidad se notará si el tamaño final del trabajo es lo suficientemente grande.
  • Por el contrario, el exceso de detalle (número de nodos) de un mapa demasiado detallado y preciso será un lastre que puede volver el trabajo inmanejable. Por eso no debemos usar un mapa excesivamente preciso.
  • Si queremos destacar países o zonas en el trabajo final, debemos tenerlos ya marcados ya en este mapa de inicio. Por eso, debemos tener en cuenta que cualquier detalle geográfico o político relevante debe hallarse ya en este mapa de partida.

Una vez elegido el mapa, procedemos a darle un tamaño razonable (por mera comodidad, es mejor que sea cercano al que vamos a usar, aunque no es necesaria ninguna precisión). En este caso, unos 120 mm. de ancho. Si es demasiado complejo, lo simplifico un poco usando “Objeto - Trazado - Simplificar“. En el mapa del ejemplo, un “Umbral de ángulo de 0º” y una “Precisión de curva de 96%” bastaron para eliminar la mitad de los nodos (de unos 8.000 a unos 4.000) sin que se notase demasiado.

Ahora, lo coloreamos. En este caso, he usado CMYK “50/0/100/0” para el relleno y CMYK “80/0/0/0” con 0,3 puntos para el trazo de las masas de tierra.

Advertencia: No uses degradados ni efectos como “Estilizar - Sombras paralelas / Resplandor interior / Resplandor exterior” y similares. La razón es que el efecto de giro en tres dimensiones y su proyección de imágenes no los recoge y los resultados son impredecibles (pero siempre malos).

Crear las líneas de coordenadas

Aunque hay muchos modos de crear líneas paralelas y perpendiculares, en un caso como éste, lo más sencillo es usar la herramienta “Cuadrícula rectangular“, que está en el mismo grupo que “Segmento de línea“.

Nos colocamos encima del mapamundi y trazamos una cuadrícula rectangular que lo cubra razonablemente. Antes de soltar, podemos controlar el número de rayas verticales y horizontales con las teclas del cursor del teclado (hacia la izquierda y abajo, quitamos; hacia la derecha y arriba añadimos). Tras soltarla, vamos a “Ventana - Transformar” y rematamos el tamaño, redondeándolo (en el ejemplo: 120 mm de ancho y 80 mm de ancho)

Una vez la tengamos, le damos el grosor necesario al trazo (0,3 puntos) y lo hacemos discontínuo (“Ventana - Trazo - Línea Discontinua - Guión: 2 ptos / hueco: 4 ptos“). Como color de trazo, le damos CMYK 100/0/0/0; de “Relleno“, le damos “Ninguno“.

Para el mar, creamos un recuadro exactamente del mismo tamaño que la cuadrícula, lo rellenamos de 40% de cian y lo enviamos detrás.

Para rematar, centramos la cuadrícula y el fondo con respecto al mapa con la herramienta “Alinear“.

Crear el símbolo

Agrupamos los tres elementos (mar, mapa y cuadrícula) y los arrastramos dentro de la paleta “Ventana - Símbolos“. El motivo es únicamente que Illustrator sólo puede proyectar imágenes que previamente hayan sido convertidas en “Símbolos“.

Asignamos nombre al símbolo.

Si vamos a trabajar con más imágenes como símbolos es buena idea darles nombres adecuados y descriptivos.

Crear la esfera

paradoja: La esfera no es una esfera. Debe ser un semicírculo. Por eso, primero creamos una circunferencia con la herramienta “Elipse“.

Cortamos el círculo en dos con las tijeras.

A continuación, la cortamos en dos partes iguales con las “Tijeras“.

Le damos color de trazo (no de relleno) de 75% cian. A doferencia del color, el grosor no es especialmente relevante pero conviene que sea más bien fino.

La esfera y sus opciones

Con el semicírculo seleccionado, vamos a “Efecto - 3D - Girar“. Aparecerá el cuadro de diálogo que vemos arriba. Por cierto, éste es un filtro que consume bastante ordenador y, dependiendo de tu máquina, podrías encontrarte que el sistema se vuelve inestable. Cierra programas, simplifica ilustración,… Y, si puedes, trabaja con la previsualización desactivada. Quedas avisado.

Advertencia: Si en vez de una esfera, aparece una especie de taburete, como el que se ve arriba, la solución es cancelar y rotar el semicirculo 180º (La razón de este comportamiento es el sentido de giro que aplica el filtro y no hay que preocuparse por ello).

En la opción “Superficie“, que sirve para crear un sombreado de iluminación, marcamos “Sin difuminado“, ya que daremos el efecto de volumen como veremos más adelante. La opción “Difuminado plástico“, que es la que viene predefinida, es la más realista y compleja.

La proyección del mapa

Para proyectar el mapamundi sobre la esfera, vamos a la opción “Mapear ilustración“. En la persiana desplegable de “Símbolo“, elegimos la ilustración que vamos a proyectar. En este caso, es el mapamundi que guardamos como “Símbolo“.

Si el tamaño original del símbolo es mucho mayor que el de la esfera, podemos marcar la opción “Escalar para ajustar“, pero eso deformará el símbolo proyectado. De ahí mi advertencia anterior de trabajar a tamaños similares. En nuestro caso, como queremos vestir la esfera con el mapamundi, la usamos.

Una vez veamos que se ha cubierto el tapiz, damos a “Aceptar“..

Si queremos variar la perspectiva, jugamos a placer con los tres valores de rotación (ejes X, y y Z).

Dar volumen

Aunque podríamos haber usado la opción de iluminación del filtro 3D de Illustrator, es más fácil, flexible y sobrecarga menos el sistema usar el siguiente método.

Creamos una circunferencia del mismo ancho y alto que la esfera del mapamundi.

Creamos un degradado de Cian 100% a Blanco (CMYK 0/0/0/0) y lo aplicamos pinchando en una zona superior izquierda con la herramienta “Degradado” para simular una iluminación superior (debe quedar más o menos como vemos sobre estas líneas).

Con la paleta de “Transparencia“, la ponemos en modo “Superponer“.

La colocamos justo encima de la esfera del mapamundi (sobre cómo colocar de forma precisa elementos en Illustrator sin mover el de referencia, ya hemos hablado en otra página).

El trabajo ya está realmente terminado, pero aun podemos afinar un par de detalles.

Añadir una sombra ficticia

Duplicamos el círculo que hemos usado para dar volumen y lo reducimos sólo verticalmente a un tercio o cuarto de su tamaño original. Le damos de relleno un color 40% de negro y le aplicamos un “Efecto - Estilizar - Desvanecer” del valor que mejor nos parezca.

Conclusión

Illustrator no es un programa 3D, no nos engañemos. Pero permite hacer pequeñas cosas que pueden sacar del paso en dibujos sencillos.

La paleta apariencia

Lo mejor de esta técnica es que podemos rotar la esfera como queramos después de haberla construido.

Seleccionamos el semicírculo (recuerda que está “debajo” del círculo en modo superponer) y abrimos la paleta “Ventana - Apariencia“. Allí verás que está disponible el efecto “Girar - 3D” con todas sus opciones. Basta con editar lo que quieras.

Combinar colores con el CIRCULO CROMATICO

Es el tradicional círculo basado en los colores rojo, amarillo , azul y sus derivaciones. Isaac Newton desarrolló el primer diagrama circular de colores en 1666. Desde entonces científicos y artistas han expuesto variantes de este concepto.

Sin pretender entrar en los detalles de la teoría del color, me remitiré a enunciar conceptos que fácilmente podremos aplicar y de esta forma lograr obtener mejores resultados a la hora de elegir nuestra paleta de colores.

Para esto recordaremos la composición de lo colores en dicho círculo:

Colores primarios son aquellos tres colores puros que no están compuestos por ninguna mezcla, es decir que no derivan de ningún otro conjunto de colores, estos son : rojo, amarillo y azul.

Colores secundarios son aquellos que se logran a partir de la mezcla de dos primarios. Estos son: naranja, verde y violeta.

Colores Terciarios son los que se forman partiendo de la mezcla de un primario y un secundario que son contiguos en el circulo  cromático.

En un ejemplo: El azul (primario) y el amarillo (primario), forman el verde (secundario). Si queremos lograr un terciario a partir de esta mezcla, por ejemplo un tono de verde mas claro, le agregaremos mas amarillo, por el contrario si queremos que el verde sea mas intenso le agregaremos mas azul.

Los terciarios son entonces los distintos tonos de colores secundarios con mas o menos cantidad de alguno de los colores primarios que lo componen.

Colores análogos son aquellos que se encuentran uno al lado del otro en el circulo.

Colores opuestos o complementarios son los que se encuentran enfrentados en el circulo cromático. El opuesto a un primario siempre sera el color secundario logrado con los dos colores primarios restantes. Ejemplo: opuesto al azul sera el naranja logrado a partir del amarillo y el rojo.

Bien, enunciadas estas reglas, observamos que el orden de los colores en el circulo responden a ellas. De que nos sirve saberlas??

Depende del efecto que queramos lograr, si queremos un contraste máximo entre dos colores, tomaremos dos que se encuentren enfrentados, o tonos derivados de dos colores enfrentados en el circulo.

Las siguientes ilustraciones presentan algunas fórmulas básicas para lograr esquemas de colores armoniosos ya sea a partir de análogos o de opuestos.

Sistema Tipográfico de Medidas

La escritura es uno de los inventos más importantes de todos los tiempos. Conozcamos la historia y antecedentes del Sistema Tipográfico de Medidas.

Sistema Tipográfico de Medidas

La escritura es uno de los inventos más importantes de todos los tiempos, hemos apreciado su evolución durante miles de años; también, los sistemas en los que se aplica la escritura evolucionan y cada día todos somos, de algún modo, deleitados con ésta que es una de las formas más abstractas de recibir información y conocimiento, la tipografía. Conozcamos la historia y antecedentes del Sistema Tipográfico de Medidas.

Antecedentes del Sistema Tipográfico de Medidas

Pierre Fournier fue el primero en comprender la necesidad de racionalizar los cuerpos de los tipos o medidas de los caracteres, en 1737 publicó su sistema del punto tipográfico para la fundición sistemática de los caracteres, que llamo duodecimal. Tomó el tipo de letra más pequeño que se usaba en ese entonces llamado nomparela y lo dividió en seis partes, a cada una le dio el nombre de punto y a la medida de 12 puntos, la llamó cícero.

La equivalencia con el Sistema Métrico Decimal es:

1 punto = 0.0350 cm

1 cícero = 0.420 cm

En 1760, Francisco Ambrosio Didot, perfeccionó el sistema de medida de Fournier, tomando como base la medida de longitud usada en aquella época en Francia, llamada pie de rey. El punto tipográfico de Didot, equivale a 1/72 de pulgada francesa. Lo que equivale en el Sistema Métrico Decimal a:

Punto Didot = 0.0376 cm

Cícero Didot = 0.4512 cm

La Asociación de Fundidores de Tipos de Imprenta adoptó en 1886 su propio sistema. Benjamín Franklin al establecer su fundición de tipos en Filadelfia adaptó el sistema Fournier. El sistema angloamericano llamado Sistema Pica, se difundió a Inglaterra y sus colonias. Se basa en la pulgada inglesa, que es equivalente a 2.54 cm.

Su equivalencia en el Sistema Decimal es:

1 punto = 0.0352 cm

1 pica = 0.4233 cm

El Sistema Tipográfico no se basa en el Sitema Métrico Decimal, ya que este fue posterior, surgió en 1799.

El Sistema Tipográfico es un sistema propio llamado duodecimal, por la relación que existe entre la unidad mínima de medida, el punto y la unidad superior, la pica, que consta de 12 puntos.

Tabla de Equivalencias

1 pica = 12 puntos

1 pulgada = 6 picas

1 pulgada = 72 puntos

1 pulgada = 2.54 cm

1 pica = 0.423 cm

1 punto = 0.035 cm

Símbolo de la Pica | 1/2 Pica = 0.6

Relación entre centímetros, picas y pulgadas

El Tipómetro

Para medida y cálculo se utiliza el tipómetro, que sirve para medir materiales con tipografía, los hay sólo con medidas tipográficas con escala de puntos y picas y los hay con sus equivalencias métricas con escalas en centímetros y pulgadas, además de línea agatas; se trata por lo general de una regla de acero o material plástico.

Partes del Tipómetro

Tipómetro de Acetato

Familias tipográficas

Vamos a conocer las familias tipográficas y sus grupos y clasificaciones.
Una familia tipográfica es un grupo de signos escriturales que comparten rasgos de diseño comunes, conformando todas ellas una unidad tipográfica. Los miembros de una familia (los tipos) se parecen entre si, pero también tienen rasgos propios.

Las familias tipográficas también son conocidas con el nombre de familias de fuentes (del francés antiguo fondre, correspondiente en español a derretir o verter, refiriéndose al tipo hecho de metal fundido). Una fuente puede ser metal, película fotográfica, o medio electrónico.

Existen multitud de familias tipográficas. Algunas de ellas tienen más de quinientos años, otras surgieron en la gran explosión creativa de los siglos XIX y XX, otras son el resultado de la aplicación de los ordenadores a la imprenta y al diseño gráfico digital y otras han sido creadas explícitamente para su presentación en la pantalla de los monitores, impulsadas en gran parte por la web.

Unas y otras conviven y son usadas sin establecer diferencias de tiempo, por lo que es necesario establecer una clasificación que nos permita agrupar aquellas fuentes que tienen características similares.

Son muchos los intentos por lograr agrupar las formas tipográficas en conjuntos que reúnan ciertas condiciones de igualdad. Generalmente están basados en la fecha de creación, en sus orígenes dentro de las vertientes artísticas por las que fueron influenciadas o en criterios morfológicos.

Los sistemas de clasificación de fuentes más aceptados son:

Clasificación de Maximilien Vox (1954)

Divide las familias en:

  • Humanas
  • Garaldas
  • Reales
  • Didonas
  • Mecanos
  • Lineales
  • Incisas
  • Scriptas
  • Manuales

Clasificación de Robert Bringhurst

Divide las fuentes en:

  • Renacentistas
  • Barrocas
  • Neoclásicas
  • Románticas
  • Realistas
  • Modernistas geométricas
  • Modernistas líricas
  • Posmodernistas

Clasificaciones ATypI

La ATYPI (Asociación Tipográfica Internacional, http://www.atypi.org/), con objeto de establecer una clasificación general de las familias tipográficas, realizó en 1964 una adaptación de la clasificación de Maximilien Vox, conocida comoVOX-ATypI.

Clasificación VOX-ATypI

Esta clasificación está relacionada también con la evolución de las familias tipográficas a lo largo de la historia, aunque modifica ciertos elementos de la clasificación de VOX..

Evolución de los remates en los carcteres

Otra clasificación de fuentes de la ATypI, evolución de la anterior, es la basada en la agrupación de fuentes por características comunes, normalizada con el nombre DIN 16518.

Divide las familias tipográficas en los siguientes grupos:

Clasificación DIN 16518

Romanas

Formado por fuentes que muestran influencias de la escritura manual, en concreto de la caligrafía humanista del s. XV, y también de la tradición lapidaria romana, donde los pies de las letras se tallaban para evitar que la piedra saltase en los ángulos.

Las fuentes Romanas son regulares, tienen una gran armonía de proporciones, presentan un fuerte contraste entre elementos rectos y curvos y sus remates les proporcionan un alto grado de legibilidad.

Fuentes Romanas

Las Romanas se dividen cinco grupos fundamentales:

  • Antiguas: también llamadas Garaldas (por Garamond), aparecen a fines del siglo XVI en Francia, a partir de los grabados de Grifo para Aldo Manuzio. Se caracterizan por la desigualdad de espesor en el asta dentro de una misma letra, por la modulación de la misma y por la forma triangular y cóncava del remate, con discretas puntas cuadradas. Su contraste es sutil, su modulación pronunciada, cercana a la caligrafía, y su trazo presenta un mediano contraste entre finos y gruesos. Entre ellas destacan las fuentes Garamond, Caslon, Century Oldstyle, Goudy, Times New Roman y Palatino.
  • De Transición: se manifiestan en el siglo XVIII y muestran la transición entre los tipos romanos antiguos y los modernos, con marcada tendencia a modular más las astas y a contrastarlas con los remates, que dejan la forma triangular para adoptar la cóncava o la horizontal, presentando una gran variación entre trazos. Esta evolución se verificó, principalmente, a finales del siglo XVII y hasta mediados del XVIII, por obra de Grandjean, Fournier y Baskerville. Ejemplos de este grupo son las fuentes Baskerville y Caledonia.
  • Modernas: aparecen a mediados del siglo XVIII, creadas por Didot, reflejando las mejoras de la imprenta. Su característica principal es el acentuado y abrupto contraste de trazos y remates rectos, lo que origina fuentes elegantes a la vez que frías. Sus caracteres son rígidos y armoniosos, con remates finos y rectos, siempre del mismo grueso, con el asta muy contrastada y con una marcada y rígida modulación vertical. Resultan imponentes a cuerpos grandes, pero acusan cierta falta de legibilidad al romperse los ojos del carácter, al componerse a cuerpos pequeños y en bloques de texto corrido. Ejemplos destacables podrían ser Firmin Didot, Bodoni, Fenice y Modern Nº 20.
  • Mecanos: son un grupo aislado que no guarda ninguna semejanza constructiva con el resto de los tipos romanos con remate, tan solo el hecho de poseer asiento sus caracteres. No tienen modulación ni contraste. Entre sus fuentes podemos destacar Lubalin y Stymie.
  • Incisas: otro grupo aislado dentro de las romanas, al igual que las mecanos, son letras en la tradición romana más antigua, ligeramente contrastadas y de rasgo adelgazado ahusado. No se puede hablar de remates, pero sus pies abocinados sugieren, tal como ocurre con las serif, una línea imaginaria de lectura. Su ojo grande y sus ascendentes y descendentes finos, hacen de él un tipo que, aunque es extremadamente difícil de digitalizar, es muy legible a cualquier cuerpo. A pequeña escala, puede confundir y parecer de palo seco al perderse la gracia de su rasgo. Como ejemplos podemos citar las fuentes Alinea y Baltra.

Palo Seco

Las fuentes Palo Seco se caracterizan por reducir los caracteres a su esquema esencial. Las mayúsculas se vuelven a las formas fenicias y griegas y las minúsculas están conformadas a base de líneas rectas y círculos unidos, reflejando la época en la que nacen, la industrialización y el funcionalismo.

Fuentes Palo Seco

También denominadas Góticas, Egipcias, Sans Serif o Grotescas, de dividen en dos grupos principales:

  • Lineales sin modulación: formadas por tipos de un grosor de trazo uniforme, sin contraste ni modulación, siendo su esencia geométrica. Admiten familias larguísimas, con numerosas variantes, aunque su legibilidad suele ser mala en texto corrido. Ejemplos de este tipo serían Futura, Avant Garde, Eras, Helvética, Kabel y Univers.
  • Grotescas: caracterizadas porque el grosor del trazo y el contraste son poco perceptibles y por ser muy legibles en texto corrido. La principal fuente de este tipo es Gill Sans.

Rotuladas

Las fuentes rotuladas advierten más o menos claramente el instrumento y la mano que los creó, y la tradición caligráfica o cursiva en la que se inspiró el creador.

Fuentes Rotuladas

Existen tres grupos principales de fuentes rotuladas:

  • Caligráficas: aglutina familias generadas con las influencias más diversas (rústica romana, minúscula carolingia, letra inglesa, caracteres unciales y semiunciales), basadas todas ellas en la mano que las creó. Con el tiempo la escritura caligráfica se hizo cada vez más decorativa. En la actualidad se utiliza en invitaciones a ceremonias o determinados acontecimientos. Como ejemplos de este tipo podemos citar las fuentes American Uncial, Commercial Script, Cancelleresca Seript, Bible Seript Flourishes, Zapf Chancery, Young Baroque.
  • Góticas: de estructura densa, composición apretada y verticalidad acentuada, manchan extraordinariamente la página. Además, no existe conexión entre letras, lo que acentúa más su ilegibilidad. Ejemplos de este tipo son Fraktur, Old English, Koch Fraktur, Wedding Text, Forte Grotisch.
  • Cursivas: suelen reproducir escrituras de mano informales, más o menos libres. Estuvieron muy de moda en los años 50 y 60, y actualmente se detecta cierto resurgimiento. Ejemplos: Brush, Kauffman, Balloon, Mistral, Murray Hill, Chalk Line y Freestyle Script.

Decorativas

Estas fuentes no fueron concebidas como tipos de texto, sino para un uso esporádico y aislado.

Fuentes Decorativas

Existen numerosas variaciones, pero podemos distinguir dos grupos principales:

  • Fantasía: similares en cierto modo a las letras capitulares iluminadas medievales, resultan por lo general poco legibles, por lo que no se adecuan en la composición de texto y su utilización se circunscribe a titulares cortos. Ejemplos de este tipo son las fuentes Bombere, Block-Up, Buster, Croissant, Neon y Shatter.
  • Época: pretenden sugerir una época, una moda o una cultura, procediendo de movimientos como la Bauhaus o el Art Decó. Anteponen la función a lo formal, con trazos sencillos y equilibrados, casi siempre uniformes. Muy utilizados en la realización de rótulos de señalización de edificios y anuncios exteriores de tiendas. Ejemplos de este grupo son Futura, Kabel, Caslon Antique, Broadway, Peignot, Cabarga Cursiva, Data 70, LCD, Gallia.

Variantes de una familia

Dentro de cada familia, las variables tipográficas permiten obtener diferentes soluciones de color y ritmo. Las variables constituyen alfabetos alternativos dentro de la misma familia, manteniendo un criterio de diseño que las “emparenta” entre sí.

Variantes de la fuente Helvetica

Las variaciones de una fuente se obtienen modificando propiedades como:

  • El cuerpo o tamaño: mayúsculas, minúsculas y capitales.
  • El grosor del trazado: ultrafina, fina, book, redonda, media, seminegra, negra y ultranegra.
  • La inclinación de los ejes: redonda, cursiva e inclinada.
  • La proporción de los ejes: condensada, comprimida, estrecha, redonda, ancha, ensanchada y expandida.
  • La forma del trazado: perfilada, sombreada, etc.
  • Otras variantes de una fuente incluyen versalitas, números, números antiguos, símbolos de puntuación, monetarios, matemáticos y misceláneos, etc.

Algunas familias poseen muchas variaciones, otras sólo unas pocas o ninguna, y cada variación tiene un uso y una tradición, que debemos reconocer y respetar.

imagen realista de un ojo con photoshop

Magnífico tutorial de Akyen Kyopsi Akyo Kyatyaltan en el que detalla los pasos a seguir para crear la imagen realista de un ojo con photoshop.

1. Abrimos una imagen de unos 780 x 780 pixeles
2. Dejamos la 1era capa en blanco y creamos 2 nuevas (una para la iris y la otra para la pupila)
3. Ponemos en Guides/New Guide y ponemos estos valores : Horizontal : 390 px || Vertical: 390 px y por ultimo tecleamos donde dice “Snap”
4. Ahora con el marco elíptico hacemos una circunferencia algo grande y una pequeña para la pupila y que quede mas o menos así.:

5. Ahora creamos una capa nueva (A la cual le podemos poner “Fibras”) y a esta le hacemos un marco elíptico mas grande que la pupila y la rellenamos de blanco…
6. Después a este circulo blanco le añadimos Ruido… Filtro/Ruido/Añadir Ruido || o Noise con un valor de 100….Esto quedara así: –

7. Después de esto vamos a Filtro/Desenfoque/Desenfoque radial y ponemos “Mejor” “Zoom” y un valor de 100.
y quedara como esta tercera foto.

8. Y luego a esta capa le vamos a poner en Superponer u Overlay para que se vea  así:

9. Bueno hasta el momento nuestra paleta de Capas o Layers debería estar así:

10. Después creamos una nueva capa y en ella dibujar una linea circular parecida a esta sexta imagen:

11. Luego a este circulo le hacemos unas ondulaciones en Filtro/Licuar o Liquify… para hacer algo parecido a esto:

12. Copiamos la pupila (Ctrl+J) y la pintamos con estos valores:

13. A esta capa de la pupila con los valores anteriores le vamos a dibujar algunas ondulaciones como estas del mismo color que la capa, así:

14. Y a esta capa la ponemos en Overlay o Superponer y deberíamos tener la paleta de Layers así:

15. Mientras trazamos tantas fibras azules como las de arriba nos tomamos nuestro tiempo para terminarlas y que nos quede algo así como esta 11 imagen (He ocultado las guías para que veas mejor):

16. Va quedando bien no?, en una nueva capa dibujaremos una ventanita como esta:

17. Y debería quedarnos la paleta como esta numero 13:

18. (Bueno agregue de nuevo las guías) Con un pincel grande dibujamos bordes rosados como estos:

19. Esto sera un poco complicado… Utilizaremos la misma técnica de las fibras para que en otra capa dibujemos las venas de el ojo. Y ya deberíamos tener esta paleta de layers:

20. Una vez terminado espero nos haya quedado una imagen asi:

Gracias.