Cómo crear banners con fuentes personalizadas usando solo URL

Diseñar pancartas para fiestas divertidas y visualmente atractivas puede ser una tarea complicada si no tiene suficiente experiencia en diseño gráfico o no sabe cómo usar software de edición de imágenes, como Photoshop o Sketch. Comprar e instalar un software de edición de imágenes, instalar fuentes personalizadas, diseñar los gráficos y descubrir cómo aplicar una superposición de texto puede llevar mucho tiempo y costar mucho dinero … Sin embargo, hay otra opción:Cloudinary—Que es fácil de usar y puede acelerar el proceso de diseño con el uso de una única URL.

Cloudinary es un servicio basado en la nube que proporciona una solución de gestión de imágenes y videos de un extremo a otro que incluye cargas, almacenamiento, administración, manipulación y entrega de imágenes. Un ejemplo de funciones de manipulación de imágenes son las superposiciones de texto de imagen (que es el tema de discusión).

En esta publicación, le mostraré cómo lograr la superposición de imágenes en el ejemplo anterior usando Cloudinary, no solo con fuentes comunes, sino con cualquier fuente personalizada de su elección. Al final, verá lo simple, poderosa y flexible que es esta solución en comparación con el uso de software de edición de gráficos.

1. Configurar Cloudinary

Cloudinary es fácil de configurar y usar. Solo necesita crear una cuenta, después de lo cual se le asigna un almacenamiento en la nube para sus imágenes:

Cree una cuenta de Cloudinary GRATUITA usando el formulario de registro.

Cuando se registra con éxito, se le presenta un panel que contiene sus credenciales en la nube. Puede almacenarlos de forma segura para uso futuro:

2. Cargar imágenes

Ahora que tiene una cuenta gratuita de Cloudinary, puede probarla. Ve a la Mediateca y sube algunas imágenes a tu nube:

Como puede ver, el widget de carga le permite cargar desde su computadora o proporcionar un enlace. No se moleste en buscar imágenes bonitas en su computadora, puede usar lo que Te tengo de pexels.

Haga clic en el pulgar que muestra la imagen que cargó y copie el enlace de la página de detalles de la imagen.

Así es como se ve la imagen original después de reducirla a 700px de ancho:

Ofertas de Cloudinary

Antes de comenzar a implementar la función de superposición de texto, permítame informarle sobre las ofertas principales de Cloudinary:

• Almacenamiento: Encontramos esta característica al subir imágenes al servidor.
• Entrega: La URL que obtuvimos de la biblioteca de medios es la que usamos para entregar imágenes de Cloudinary.
• Transformación: Cloudinary le permite manipular imágenes ajustando los parámetros de URL en la URL de entrega. La imagen de arriba se transforma antes de la entrega agregando el parámetro de transformación ‘w_700’ que escala la imagen de su ancho original de más de 1,000 píxeles a 700 px.

3. Texto superpuesto

Las superposiciones de texto en este contexto se refieren a la aplicación de caracteres como una máscara en imágenes gráficas. Este proceso se usa comúnmente en herramientas de edición de imágenes como Photoshop, Sketch o Illustrator, donde importa una imagen a su tablero de arte y usa el control de texto para aplicar caracteres sobre la imagen. Por ejemplo:

El texto impreso en la imagen de fondo de la fiesta es lo que se conoce como «superposición de texto».

Usé la fuente Verdana en el texto «JOHNSONS PRESENT» en el ejemplo anterior. Verdana es una fuente popular y está disponible como fuente común. Sin embargo, en algunas situaciones, es posible que deba utilizar fuentes personalizadas. En este caso, puede ir a un sitio web como dafont.com, descargue una fuente personalizada, instálela en su máquina y úsela en sus diseños.

Las superposiciones de texto se aplican como transformación a través de los parámetros de transformación, al igual que hicimos con el ancho de la imagen de la fiesta. El siguiente ejemplo muestra una superposición de texto en la imagen:

http://res.cloudinary.com/christekh/image/upload/w_700/l_text:Verdana_20_bold_underline:JOHNSONS%20PRESENTS,g_north,y_25,co_rgb:F9583C/pexels-photo-341858_hx5cva.jpg

Esta URL define las muchas características que ocurren con esta transformación de imagen:

• w_700: Reduce la imagen a 700 px
• l_text: Define el texto superpuesto que se colocará en una imagen. Esta es una característica de transformación.
• Verdana: Estilo de fuente
• 20: Tamaño de fuente
• negrita: Peso de fuente
• subrayar: Decoración de texto
• JOHNSONS% 20 PRESENTES: Texto superpuesto codificado en URL
• g_north: Ubicación del texto que se encuentra en la parte superior de la imagen.
• y_25: desplazamiento del eje y del texto desde la parte superior en porcentaje
• co_rgb: F9583: Color del texto de la superposición

4. Fuentes personalizadas

Nuestro banner de fiesta está tomando forma, pero para hacer el banner más festivo, queremos agregar algunas fuentes locas. No solemos ver fuentes locas, por lo que no debería esperar ver una. Es por eso que no puedes simplemente usar l_text: CrazyFont.

Sin embargo, Cloudinary es muy flexible. Puede cargar su propia fuente personalizada en Cloudinary, luego usar su ID público como el l_text valor. San Valentín de medianoche es una fuente típica de fiesta que podemos usar. Descargue el archivo comprimido, descomprímalo y cargue el .ttf archivo de fuente.

(Nota: solo puede cargar fuentes .ttf o .otf).

Debe especificar el tipo como autenticado y tipo de recurso como crudo. Puede hacer esto mientras carga a través de SDK. Diga Node, por ejemplo:

var cloudinary = require(’cloudinary’)

// Credentials retrieved from dashboard

 cloud_name: 'CLOUD_NAME',

   api_key: 'API_KEY',

   api_secret: 'API_SECRET'

cloudinary.v2.uploader.upload(

   __dirname + '/Midnight-Valentine.ttf',

   {resource_type: 'raw',

   type: 'authenticated',

   public_id: 'Midnight-Valentine.ttf'},

   function(error, result) {

     console.log(result, error)

Ahora puede entregar la imagen usando la fuente personalizada que cargamos:

http://res.cloudinary.com/christekh/image/upload/w_700/l_text:Verdana_20_bold_underline:JOHNSONS%20PRESENTS,g_north,y_25,co_rgb:F9583C/l_text:Midnight-Valentine.ttf_80:CLUB%20NIGHT,co_rgb:ffffff/pexels-photo-341858_hx5cva.jpg

Encadenamos otra transformación a la que teníamos antes. Esta vez, el l_textEl valor del estilo de fuente ahora es Midnight-Valentine.ttf que es el ID público de la fuente que subimos. Quitamos el g_north propiedad, así como la y propiedad, por lo que la posición de superposición permanece en la ubicación predeterminada, que es el centro de la imagen.

Divirtámonos un poco más añadiendo el lugar y la fecha de la fiesta:

http://res.cloudinary.com/christekh/image/upload/w_700/l_text:Verdana_20_bold_underline:JOHNSONS%20PRESENT,g_north,y_25,co_rgb:F9583C/l_text:Midnight-Valentine.ttf_80:CLUB%20NIGHT,co_rgb:ffffff/l_text:Verdana_20:Venue:%20JOHNSONS%20PARTY%20CLUB,g_south,y_130,co_rgb:ffffff/l_text:Lato_18_bold:Date:%2008-01-2017,g_south,y_100,co_rgb:ffffff/pexels-photo-341858_hx5cva.jpg

Conclusión

La primera imagen que se muestra al principio de este artículo fue diseñada en Sketch. La última imagen se creó componiendo parámetros en una URL. Puedes imaginar lo poderoso que es este último. Conocer las propiedades adecuadas en Cloudinary usar le permitirá comenzar a generar gráficos dinámicamente sin la ayuda de un diseñador gráfico.

Puede obtener más información sobre estas propiedades en el Documentos de Cloudinary.

[– This is an advertorial on behalf of Cloudinary –]