Share
Lo que vas a crear¡Estamos llegando al final de esta serie de letras! En este tutorial, te proporcionaré algunos métodos más técnicos para crear varias formas de estilo adicional para tus letras. Ahora, obviamente sabes que hay infinitas formas de estilizar tus letras. Todavía tengo que intentarlo todo, pero para este tutorial, nos centraremos en nueve de los tipos más comunes de estilización que utilizo en mi trabajo:
Explicaré el proceso de estos de manera individual, pero siéntase libre de combinar múltiples estilos para crear un personaje único.
Nota: Este tutorial requiere un Nivel intermedio / avanzado de conocimiento de Adobe Illustrator. Usaré una terminología que tal vez no entiendas si esta es la primera vez que abres Illustrator. En cualquier caso, el proceso paso a paso debe ser lo suficientemente simple como para seguirlo y permitir que casi cualquiera lo complete. ¡Sólo prepárate para aprender una cosa o dos! Como siempre, si te quedas atascado o tienes preguntas en el camino, deja un comentario a continuación y te responderé lo antes posible.!
A lo largo de este tutorial, utilizaré algunas "H" personalizadas que creé. A pesar de que estas "H" pueden no ser "letras de mano" pueden demostrar muy fácilmente los estilos que voy a crear. Por lo tanto, aún puede utilizar el conocimiento a continuación para casi cualquier pieza de letra o tipografía que cree. Incluso podría personalizar un tipo de letra utilizando algunas de las técnicas a continuación. Se trata de elegir la técnica correcta para el proyecto correcto. Úsalos con moderación también, porque múltiples estilos pueden ser bastante abrumadores.
Por último, dentro de cada sección, he incluido un ejemplo de algunas aplicaciones "reales" de los tipos específicos de estilo que abordaremos. Esperamos que esos ejemplos puedan mostrarle exactamente cómo se pueden aplicar en otros lugares y no solo en las "H" con las que trabajaremos en este tutorial. Empecemos!
Llamo a esto el "estilo dividido" debido a la naturaleza de las formas de las letras después de que están "divididas". Las formas de letras están casi divididas en dos, de ahí el efecto de "división" que crea.
En el archivo vectorial "H Matrix" que proporcioné, comenzaremos en la parte superior izquierda y luego terminaremos en la parte inferior derecha., trabajando de izquierda a derecha.
Entonces, para comenzar, la primera "H" que diseñaremos es la "H" entre corchetes (esquina superior izquierda de la matriz). Durante este paso, siéntase libre de colorear "H" cualquier matiz o valor que desee. Para mi personalmente, lo mantengo en un valor de gris..
Para "dividir" las letras, utilice el Herramienta de segmento de línea en ilustrador y forma doslíneas en la parte superior de la "H". Dale a esas líneas un trazo blanco para crear el efecto de división.
Para finalizar, cree un segmento de línea horizontal más en la parte superior de la barra cruzada. Pero haría que su peso de trazo sea más fino que sus trazos verticales para equilibrar ópticamente todo.
Regla de oro cuando se trata de escribir: los trazos horizontales (especialmente cuando se conectan a los trazos verticales) aparecen más gruesos ópticamente.
El gif anterior es el proceso que acabamos de pasar. Espero que te dé más información sobre cómo se unió todo..
La pieza de rotulación anterior que completé hace unos meses utilizó el "estilo dividido" en todas partes. Esperemos que esto demuestre un buen uso de la estilización..
Durante esta parte del tutorial, puedes crear prácticamente cualquier cosa que tu corazón desee. Los detalles ornamentales pueden ser casi cualquier cosa. Formas, líneas, texturas, adornos, etc. -siéntete libre de volverte salvaje!
Para comenzar el siguiente estilo, estoy usando el segundo desde la parte superior izquierda "H". Recuerda, estamos trabajando de izquierda a derecha. Siéntase libre de colorear la "H" si lo desea. Ahora comenzaremos a crear algunos detalles ornamentales. Ahora, esta es una gran oportunidad para que hagas lo que sea que quieras. Los detalles en esta "H" pueden ser lo que quieras! Como siempre, también puedes crear lo que se me ocurrió..
Quería crear recortes de "estímulo" en los trazos verticales. Para hacer eso, forma un triángulo con la Lapicera (dale un relleno blanco) o como quieras. ¡Hay un millón de maneras de hacer una cosa en Illustrator! Puedes ver la forma que hice en la imagen de arriba. Una vez creada la forma inicial, puedes copiarla y pegarla en los tallos verticales.
A continuación, decidí agregar una forma de diamante en el centro con trazos que se extendían de arriba a abajo. De nuevo, lo que tu corazón desee. Los "adornos" que agregue a su tipografía pueden ser literalmente cualquier cosa. Solo usa tu sentido del diseño para asegurarte de que se vea bien!
Para crear las adiciones anteriores, formé un diamante con el Herramienta rectangular. Forma un cuadrado manteniendo Cambio, y luego gire el cuadrado 45 grados, y extienda los puntos de anclaje superior e inferior.
Por último, dibuje segmentos de línea para extender arriba y abajo, de manera similar a como lo hicimos en el "estilo dividido".
Para finalizar, creé algunas otras formas adicionales para extenderlas desde la forma de la letra. Además, utilicé otra forma de diamante para ramificar desde la barra transversal. Puedes ver en la imagen de arriba que formé las formas y duplicé esas formas en el otro vástago vertical..
Una vez que esté todo junto, el proceso debería aparecer como el gif anterior.
¡Es una locura cómo algunas formas simples agregadas o sustraídas de la letra pueden cambiar toda la sensación instantáneamente! Las posibilidades son infinitas.
No hay una respuesta correcta o incorrecta para formar detalles ornamentales. Es lo que el diseño requiere realmente. Use su criterio, entienda la apariencia y agregue adiciones en consecuencia.
En este ejemplo, los detalles ornamentales que agregué fueron los "espolones" y los que rodean la forma de la letra. Además, utilicé otras técnicas que le mostraré más adelante en este tutorial..
El proceso para la sombra paralela a continuación es el proceso que encuentro más fácil y más simple para crear el efecto que estamos buscando. Hay muchas, muchas formas de hacer lo mismo, así que si este proceso no le parece lógico, siéntase libre de completar la tarea de la forma que considere más adecuada.!
Vamos a comenzar con la parte superior derecha "H" en la matriz. En este punto, como siempre, siéntase libre de cambiar el tono y prepárese para abordar el siguiente paso.
Es hora de empezar a formar la sombra paralela. Para empezar, manteniendo pulsado. Opción en una Mac o Alt en una PC, comience a hacer clic y arrastre su "H" hacia abajo y hacia la derecha (o hacia la izquierda) unos tres píxeles. No es necesario que sea exacto, solo intente copiar la imagen de arriba. Si observa detenidamente la imagen de arriba, puede ver qué formamos. Se verá como si tuviéramos dos "H" en capas una encima de la otra. Siéntase libre de cambiar el tono o el valor de la "H" para que pueda ver la capa en curso.
A continuación, después de completar el Paso 2, todo lo que tienes que hacer es presionar Comando-D, cual es el atajo para Duplicar. Sigue presionando Comando-D hasta que tenga alrededor de cuatro a siete duplicados de su H. Debe terminar pareciéndose a la imagen de arriba. Es solo un montón de "H" apiladas una encima de la otra. Observe que la primera "H" en gris más claro, aún está en la parte inferior.
A continuación, lleve esa "H" gris más clara a la parte delantera para que el "sombreado" de valor más oscuro se encuentre en la parte inferior. Estoy seguro de que esto se ve un poco raro, ¡pero prometo que se verá mejor en el próximo paso! En este punto, lo haría Unir todos esos duplicados "H" de valor más oscuro para que tenga una sola forma. Debería ser similar a la imagen anterior, aunque la dirección y el ángulo de la sombra pueden parecer un poco diferentes y eso está bien.!
El último paso para terminar esta sombra es eliminar todos los puntos de anclaje innecesarios que se crearon una vez que fusionó sus "H". Comience a eliminar los puntos de anclaje adicionales que formaron esas secciones complicadas para hacer una conexión sin problemas. Una vez que hayas terminado, debe verse como la imagen de arriba! Ahora has completado una sombra simple.
Aquí hay un gif de proceso para mostrar el inicio y el final de la sombra paralela. Puede ser un par de pasos, pero cuando se hace correctamente, solo toma dos o tres minutos crear uno.!
La sombra paralela en el ejemplo anterior se completó con el mismo proceso exacto. Como puede ver con este ejemplo comparado con la "H", ¡funciona para cualquier tipo de letra! La razón por la que uso el proceso anterior en lugar de la opción "Extruir y biselar", por ejemplo, es debido a las formas, los puntos de anclaje y los grupos innecesarios que crea. Se vuelve un poco complicado en mi opinión. El método anterior es simple y al punto..
Este proceso a continuación puede ser mi favorito personal. El aspecto es siempre limpio y produce una gran profundidad también. Las personas se refieren a este proceso como un aspecto cincelado y en relieve. ¡Cualquiera de los nombres es correcto en mi libro! Empecemos.
Ahora estamos empezando a trabajar en la segunda fila de la matriz "H". Comenzando con la "H" más a la izquierda, cambie el tono y el valor a su gusto y prepárese para usar la herramienta Pluma!
Ahora estamos formando segmentos de línea que luego "dividiremos" utilizando la herramienta Pathfinder para crear nuestro efecto cincelado. Entonces, comienza a dividir tu "H" similar a la imagen de arriba. Esencialmente, lo que buscamos para esta "H" es un valor de luz, valor medio y valor de oscuridad. Estas divisiones asegurarán que su "H" tenga el sombreado adecuado.
Nuevamente, los segmentos de línea anteriores se crearon con la herramienta Pluma y tienen un trazo de 1 pt. La clave para hacer que esto funcione es asegurarse de que todos sus segmentos de línea se toquen entre sí. No necesitan cruzarse, solo toque para permitir que el proceso de división funcione correctamente.
Después de que creas que todos tus caminos están listos para continuar, elimina el peso del trazo de los segmentos de línea, dejando solo un camino sin trazo alguno. Debería parecerse a la foto de arriba. Solo puedes ver la ruta porque la he resaltado con mi mouse.
Con su "H" y todos los segmentos de línea seleccionados, navegue hasta su Pionero herramienta y seleccione la Dividir opción. Una vez dividida, su "H" debe aparecer como la imagen de arriba. Esencialmente, todas las partes de la "H" ahora están divididas en formas separadas para que las colorees en consecuencia.
Por último, para terminar con la división "H", es hora de colorear cada forma individual. Pero primero, necesitas determinar dónde estará tu fuente de luz. Para mí, he determinado que estará en la parte superior izquierda. Por lo tanto, las formas superiores serán el valor más claro, las formas laterales serán su valor medio y las formas inferiores su valor oscuro. Hágalo coherente en todo momento y use el juicio adecuado. ¡Usted sabe qué se ve bien y qué no! La imagen de arriba es como podría verse. Obviamente, sus valores y matices pueden diferir..
Otro proceso gif para mostrar el principio y el final. los Pionero la herramienta es tu mejor amigo!
En el ejemplo anterior, he usado exactamente el mismo proceso para dividir mi "Z". La textura y otros efectos fueron creados por separado. Para este ejemplo en particular, he aplicado la textura en Photoshop para disminuir el tamaño del archivo porque los archivos de Illustrator se vuelven más pesados una vez que se aplica una tonelada de textura. Describiré mi proceso de textura más adelante en el tutorial.!
Puede que este no sea el nombre apropiado para el estilo con el que estamos a punto de trabajar, es exactamente como lo llamo. Este proceso es increíblemente simple y no requiere mucho tiempo..
Tiempo para otro de mis estilos favoritos, el "inline". Utilizaremos la placa central serif "H" dentro de la matriz. Prepara eso Lapicera otra vez. Este proceso será muy rápido, no te preocupes.!
Para empezar, o bien use el Lapicera o la Herramienta de segmento de línea para formar una línea desde la placa superior serif hasta la tabla inferior inferior. Una vez que haya trazado esa línea, cópiela y péguela en el trazo vertical de la derecha. Si su "H" se parece a la imagen de arriba, está en el camino correcto. Esa fue la parte difícil!
A continuación, con los segmentos de línea trazados seleccionados, navegue el cursor hacia arriba hacia el selector de "perfil" de trazo. Esto también se puede encontrar dentro de la Carrera ventana. De todos modos, una vez que estés dentro del selector de perfiles, elige la primera opción, que parece un globo ocular aplastado. Queremos el perfil que afilará cualquiera de los extremos de nuestros trazos. Siéntete libre de jugar con otros perfiles. Algunos de ellos crean algunos efectos geniales..
¡Ahí tienes! El trazo disminuye de un extremo al otro, creando un movimiento agradable y puntiagudo en un simple clic de botón..
Como siempre, el proceso gif está arriba para que veas las etapas inicial y final. No mucho para el proceso de crear este estilo.! 
Como puede ver arriba, puse el estilo en línea para usar en el diseño de mi mazo para Girl Skateboards. Sentí que mis formas de letras eran un poco demasiado pesadas. Para reducir esa pesadez, agregué el estilo en línea no solo al color, sino también para agregar una textura agradable.El estilo de recorte que estamos a punto de comenzar es muy similar al estilo en línea porque volveremos a utilizar el selector de perfil para nuestros trazos. Es un proceso muy rápido..
Ahora, trabajando con la "H" más a la derecha en la fila del medio, comencemos la técnica de recorte. En este punto, cambie los colores, la escala, etc. a su gusto, y luego vuelva a preparar la herramienta Pluma!
Luego, dibuje una línea que sea aproximadamente un tercio de la longitud del vástago vertical. Solo dibuje una línea porque luego puede copiarla y pegarla en el resto del formulario. Debería terminar pareciéndose a la imagen anterior después de que se haya completado toda la copia y pegado..
Por último, tal como lo hicimos en el Paso 3 de la sección "Estilo en línea", navegue el cursor hacia arriba hasta el selector de perfil. Con sus trazos seleccionados, en lugar de seleccionar la primera opción de reducción, vamos a seleccionar la forma de aspecto triangular. Al igual que la imagen de arriba. Ese perfil hará que la base de tu trazo sea plana, mientras que el resto se afila. Esencialmente creará una forma de triángulo que cortará tus tallos.
Aquí está el proceso muy rápido de arriba. Solo se requieren unos ocho clics del mouse para crear el efecto deseado. No está mal!
El efecto de recorte es otro de mis favoritos. He incluido el estilo de recorte en esta pieza dibujada a mano para State Bicycle Co. Sin embargo, no usé Illustrator para esta. Creé el efecto de recorte de forma tradicional con un lápiz..
El sombreado abierto es casi idéntico al proceso de "sombra paralela" que completamos anteriormente. La única diferencia es el espacio negativo entre la forma de la letra y la sombra que crearemos. Su sombra o sombra puede caer hacia la parte inferior izquierda o la parte inferior derecha. Una cosa que mencionaré es que un tono de abajo a la izquierda se considera un "tono de pintor de letreros", mientras que el de abajo a la derecha es un "sombreado de impresoras".
La sombra de un pintor de carteles requiere menos trazos y, por lo tanto, menos pintura. Se trata de eficiencia al pintar sombras. Por lo tanto, los tonos que van hacia la parte inferior derecha requieren más trazos del pincel. En este caso, estamos utilizando Illustrator, por lo que realmente no nos importa, ya que es un vector. Solo pensé en compartir esa información en caso de que decidas pintar una sombra.!
Estamos llegando al final! Comencemos ahora con la parte inferior izquierda sans serif "H". Haz lo que quieras con esta "H": colócala, escállala, cualquier otra cosa que tu corazón desee y prepárate para un proceso muy similar al de la sección "Sombra"..
A continuación, al igual que en el paso 2 en la sección "Eliminar sombra", mantenga presionada la tecla Opción y haga clic y arrastre una "H" hacia abajo alrededor de 5 px. Entonces presione Comando-D alrededor de cinco a siete veces más para crear tu sombra. Terminará pareciéndose a la imagen de arriba. Por último, Unir Todas esas formas copiadas para formar una sola forma..
Lo siguiente que debe hacer es mover esa "sombra" hacia atrás para que quede detrás de su "H" original. A continuación, cambie el color / valor de la primera "H" copiada. Esto le permitirá ver lo que estamos haciendo en los próximos pasos. Después de que todo está dicho y hecho, debe verse similar a la imagen de arriba.
Continuando más, ahora vamos a Sustraer nuestra diferente "H" valorada del resto de la sombra que acabamos de crear. Esta resta creará el espacio negativo abierto entre la forma de la letra y la sombra.
Nuevamente, tal como lo hicimos antes en el Paso 5 de la sección "Sombra", comience a eliminar todos los puntos de anclaje innecesarios. Después de que los elimines todos, ¡debería verse casi terminado! Sólo una última cosa que hacer.
Lleve la pantalla un paso más allá y haga que parezca más como si se estuviera extendiendo desde la "H". En la imagen del Paso 5, la sombra se separa en las esquinas. Para solucionarlo, elimine esos puntos de anclaje adicionales y luego desplace el único punto de anclaje a la derecha. No importa qué punto de anclaje elimines, ya que de todos modos moverás el punto de anclaje restante. Compara y contrasta la imagen del Paso 5 y el Paso 6. Verás lo que quiero decir.
Usa este proceso gif de arriba para ayudarte, si es necesario. El proceso puede ser un poco confuso si esta es la primera vez que intentas algo como esto. 
En mi ejemplo del mundo real anterior, en realidad creé un sombreado abierto de dos tonos: un tono azul de valor más claro en la parte superior de un tono azul de valor más oscuro. Usé el proceso exacto que describí anteriormente.
Para esta parte del tutorial, vamos a utilizar la textura de madera de Nick Slater, ya que está entregándola gratuitamente. ¡Dirígete a su página de Dribbble, descarga la textura y prepárate para comenzar el proceso! Esta técnica puede funcionar igual para cualquier tipo de textura. Ya sea concreto, madera, fibra, piel, etc., será posible siguiendo los pasos a continuación. Vamos a empezar.
Ahora estamos trabajando con el medio sans-serif H en la fila inferior. Cambia el tono, el valor y cualquier otra cosa que desees. A continuación, abre esa textura que vinculé arriba en Illustrator.
Ahora, con la textura de grano de madera abierta, copia la textura. Navega hacia tu "H" y pega la textura de grano de madera en la parte superior. Debería terminar pareciéndose a lo anterior. En este punto, seleccione la textura y Expandir para asegurar que sea una forma sólida y no un golpe.
El último paso es seleccionar tanto la textura como la "H". Con los dos seleccionados, navegue con el mouse hacia Pionero panel y usar el Frente menos opción. Esto tomará la textura y la "restará" de lo que esté detrás de ella. En este caso, a nuestra "H" se le quitará la textura, dejando una "H" de grano de madera.
Utilicé el mismo proceso en esta pieza. Mi pieza de "Follow Your Bliss" se imprimió en pantalla, y en lugar de usar un tono "amarillo" en la parte superior de las letras, "resté" la textura de las letras para permitir que se vea el papel amarillo. Este proceso de eliminación es perfecto para serigrafía o tipografía cuando desee utilizar el color del papel en su diseño.. 
La última "H" en la matriz! Esta técnica requerirá que entiendas el panel de Apariencia así como el panel Trazo. Empecemos.
Vamos a comenzar a añadir el primer trazo a nuestra forma de letra. Esta es la parte facil. Seleccione su "H" y navegue hasta su Carrera Panel para añadir un trazo de 2 pt. Cualquier color servirá, siempre y cuando podamos ver el trazo. Siempre termino usando un color realmente desagradable o loco para ver lo que estoy haciendo..
El siguiente paso es agregar el segundo trazo. Para hacer eso, abre tu Apariencia panel. Con su "H" seleccionada, haga clic en el ícono cuadrado trazado en la parte inferior izquierda del panel. Aparece un poco resaltado en la imagen de arriba. Haz de este un movimiento de 4 puntos. Ahora tenemos dos golpes ... Pero nuestro primer golpe todavía no es visible. Nos encargaremos de eso en el siguiente paso..
El panel Apariencia actúa como lo harían las capas. Así que reordena tu trazo de 4 puntos hacia abajo mientras que tu trazo de 2 puntos permanece en la parte superior, como en la imagen de arriba. Eso debería permitir que ambos movimientos sean visibles. Si no, asegúrate de ir a la Carrera Panel y alinea tu trazo al exterior. Esto empujará el trazo hacia afuera en lugar de hacer que el trazo consuma su forma de "H".
En este punto, hemos terminado! Siéntase libre de cambiar esos colores de nuevo a algo más sutil y consistente. Además, siéntase libre de cambiar las esquinas de trazo para obtener un efecto redondeado o en ángulo.
El ejemplo anterior fue un experimento para mí. Nunca utilicé el efecto de doble golpe hasta que estuve trabajando en el proyecto de Girl Skateboards. Cuando se combina con otros estilos, el efecto de doble movimiento parece bastante dulce si me preguntas!
Existen asi que muchas formas de agregar estilización a sus formas de letras. Para encontrar grandes texturas, características, combinaciones de colores, profundidad, etc. para agregar a sus letras, emprenda una aventura en algún lugar cercano o cercano al lugar donde vive, e inspírese de sus experiencias diarias. Tal vez sea jugar con herramientas que normalmente no utilizarías para crear letras, como una esponja, un tenedor, un tejido; las posibilidades son infinitas. Experimenta sin cesar!
Accentsconagua