Crea un efecto de texto de neón brillante

A menudo, son los efectos más simples los que se ven más llamativos, y el texto de neón es uno de esos proyectos. También es mucho más fácil crear un efecto de neón que parezca realista de lo que piensas. Si bien este tutorial completo solo usa una imagen de fondo, su cerebro se engaña a sí mismo para ver esto como un letrero de neón real y funcional: ese es el poder de Photoshop CC Estilos de capa de. Más información sobre cosas increíbles que puedes hacer con las capas de Photoshop aquí .

El hecho de que todo este proyecto se construya desde cero, desde la fuente hasta los colores del brillo, hasta la eventual animación, significa que hay mucho margen para la creatividad. Puede elegir exactamente cómo desea que se vea cada parte de este efecto.

El neón sigue siendo popular. Mostrar tonos saturados contra un fondo oscuro y apagado es una excelente manera de presentar un página de destino , a diseño de logo o un encabezado, y es fácil animar su trabajo y guardarlo como un GIF con un tamaño de archivo bajo. Veamos cómo crearlo.



01. Empiece a crear la fuente

Usa Photoshop

Utilice la herramienta Pluma de Photoshop para dibujar su primera letra

Cree un nuevo documento de 550x550px en Photoshop y abra la cuadrícula presionando cmd / ctrl + ' . Crea una nueva capa y con la herramienta Pluma, dibuja tu primera letra. Deje espacios en el personaje, ya que este será un tipo de letra de estilo neón. Una vez que esté satisfecho, presione Trazo dentro de la pestaña Rutas para dibujar la letra.

02. Trabaja con el alfabeto

signos de dólar y libras en Photoshop

No te olvides de los personajes especiales

Crea tantos personajes como quieras, con el lápiz en una nueva capa cada vez. Si lo desea, agregue algunos caracteres especiales, como símbolos de moneda, puntuación y letras acentuadas. Siga el mismo estilo básico con el que comenzó, para que su fuente sea cohesiva.

03. Mover a FontCreator

prueba de fontcreator

Hay una versión de prueba gratuita de FontCreator disponible si la necesita

Si usted tiene Creador de fuentes de alta lógica , esta es la parte donde puedes convertir tus personajes en una fuente. Si no lo hace, hay una prueba gratuita disponible. Al pegar cada carácter en FontCreator, podemos crear un tipo de letra utilizable para Photoshop.

Ábrase camino a través de FontCreator haciendo doble clic en cada carácter y pegando su trabajo dibujado con lápiz. Asegúrese de que cada letra esté en la misma línea de base.

04. Kern tu texto

revisa tu kerning

Siempre verifique su kerning

El kerning es el espacio entre cada una de las letras (para obtener más información, consulte nuestra glosario tipográfico ), y la opción Auto-kerning dentro de FontCreator naturalmente espacia las letras para que la fuente se vea ordenada. Pruebe esta opción y asegúrese de que todas las letras se vean bien juntas.

Una vez que esté completo, exporte su fuente e instálela en su computadora. Esto lo agregará automáticamente a Photoshop CC.

05. Configurar un documento de Photoshop

paleta de documentos de Photoshop

Utilice nuestra paleta sugerida o cree la suya propia

Crea un nuevo documento en Photoshop. En una nueva capa, cree una paleta de colores con un pincel grande. Fuimos con # 501d26, # af273d, # f74663, # ffdae1, # 35e985 y # b2dcc4.

Luego, busque una imagen de fondo adecuada y arrástrela a Photoshop. Crea una nueva capa, rellénala con el color rojo oscuro y duplica. Establezca una capa para Multiplicar y otra para Color. Cree una capa de Brillo / Contraste y establezca -75 en Brillo. Duplique esto y enmascare el centro para una viñeta.

06. Ingrese el texto

texto predeterminado en Photoshop

Escribe algo de texto y rasterízalo

Toma la herramienta Texto y selecciona tu fuente (si no creaste una fuente antes, simplemente colócala en cada letra individualmente). Deletrea tu texto antes ctrl + clic derecho la capa y seleccionando Rasterizar tipo.

07. Crea un brillo

agregar un bisel en Photoshop

Dale a tu texto un poco más de profundidad con un bonito bisel

Ctrl + clic derecho la capa y vaya a Opciones de fusión> Resplandor exterior. Allí, ingrese una opacidad del 50%, una extensión del 5% y un tamaño de 63px. Ahora, puede ver que su texto de neón comienza a verse mucho más realista. Elija un color brillante.

Haga clic en Bisel y relieve, aún en la opción Estilos de capa. Elija Profundidad: 250%, tamaño: 5px, Suavizar: 2px. Usa los modos Resaltar y Sombra para agregar un poco más de profundidad al texto y juega con estas opciones hasta que encuentres la combinación adecuada.

08. Juega con las sombras

sombra paralela en Photoshop

No estropees tu brillo exterior con tu sombra paralela

Para la Sombra interior, elija el mismo color brillante que eligió para el Resplandor exterior. Todo lo que necesitarás editar aquí es el tamaño, dependiendo del tamaño del texto. Modifique esto y deje todos los demás valores en 0.

Como el texto de neón va a quedar un poco fuera de la pared, necesitaremos una sombra paralela sutil, pero no demasiado, ya que no queremos comprometer el Resplandor exterior. Usa una opacidad baja y dale a este algo más de Distancia y Tamaño.

09. Enciéndelo

cadena agregada al texto en Photoshop

Asegúrese de que la cadena siga a todos los caracteres

Ve a la capa de texto, control / haga clic derecho y elija Copiar estilos de capa. Haga clic en la capa de animales, control / haga clic con el botón derecho y elija Pegar estilos de capa. Haga doble clic en el ícono FX y cambie los colores rosados ​​a verdes para un poco de contraste con el texto.

Toma la herramienta de lápiz y crea una cadena a través del texto de neón y los animales que has creado. Asegúrese de que siga a través de todos los caracteres, y luego trazar con # 808080, con un pincel de 2px seleccionado con 1% de espacio.

10. Agrega una sombra paralela

agregar una sombra paralela en Photoshop

Dale a la cuerda un bisel y un poco de sombra

Vaya a las Opciones de fusión para la cadena que acaba de hacer. Dirígete a Bevel para darle una forma sutil y también dale una sombra paralela sutil. Las variables aquí dependen del tamaño y la forma de la cuerda que ha creado, así que experimente para ver qué funciona.

11. Cree una versión 'desactivada'

efecto parpadeante en Photoshop

Ahora haga una copia no brillante para que pueda crear un efecto de parpadeo

Creemos una capa de texto que no brille, para que podamos animar un parpadeo en algunas de las letras. Duplique la capa de texto, luego oculte el estilo Resplandor exterior. Establezca la Sombra interior en # 808080, luego modifique la Luminosidad de esta capa a -50, usando Tono / Saturación ( cmd / ctrl + U ).

En la capa de texto brillante, tome la herramienta Marquesina y seleccione algunas letras que desee desactivar brevemente en la animación. Haga duplicaciones de esta capa, con estas letras enmascaradas hasta que tenga suficientes capas para crear una animación.

12. Anime su diseño

exportar animación como gif en Photoshop

Exporta como un gif animado y listo

Vaya a la parte superior derecha de Photoshop y seleccione Movimiento como una opción de espacio de trabajo. La línea de tiempo de la animación aparecerá en la parte inferior; aquí, puede definir en qué capas se muestran u ocultan durante el tiempo que desee.

Cree nuevos marcos en la parte inferior con varias letras brillantes o no, dependiendo de si la capa está visible o no. Establezca el tiempo de la animación de cada capa usando la pequeña flecha en cada fotograma también. Guarde como GIF usando Guardar para Web.

Este artículo se publicó originalmente en Web Designer, la revista de diseño web creativo, que ofrece tutoriales para expertos, tendencias de vanguardia y recursos gratuitos. Suscríbase a Web Designer aquí .

Artículos relacionados: