Managing Brand Assets from PDFs

Imagine being able to deploy a logo in a variety of different sizes, colorings, and adjustments from a single file. You could centralize your branding, iconography and UI elements, with the ability to make non-destructive edits and create alternate Retina-compatible assets available sitewide with just a few keystrokes. imgix provides the unique ability to do live real-time manipulation and conversion of vector objects within a PDF file and render them as raster assets for web use.

This is especially useful for working with branding elements such as logos and custom icon sets that need to be served out at different sizes and accessed across platforms. With imgix, you only need one multi-page vector file source to serve all of your brand assets, in as many sizes and formats as you need.

This tutorial will demonstrate how to use imgix to render out “web safe” imagery with the benefits of vector source files. imgix’s API combined with the PDF file format gives you the following features:

• Vector-to-raster conversion to web-friendly formats
• Lossless scaling and editing
• Logo or icon sets stored as one multi-page file
• Real-time hue adjustment, cropping, and access to imgix’s entire API for additional image manipulation

Creating Vector Assets

Read through the Best Practices for Creating Vector Assets tutorial to learn how best to set up your vector files in Adobe Illustrator and Sketch by Bohemian Coding. You can download the samples below to see what the optimal setup looks like in practice.

• Download Adobe Illustrator Source/Exported PDF
• Download Sketch App Exported PDF

Vector PDFs and the imgix API

Below are some examples and the URLs used to rasterize the vectors and make live adjustments. These effects occur losslessly on the server side, will get cached once applied, and are applied to the source PDF.

To change the appearance of the logo, you can add URL parameters to adjust how the PDF is processed. For example, using w or w is a simple way of adjusting the size, whereas using the page parameter will give you a different page from the PDF.

Converting to Web-friendly Formats

First, you want to specify how to output your graphic—you can choose any of the formats supported by the fm paramenter, but generally JPEG, WebP, or PNG are preferable. If you go with JPEG, you can also set the quality of compression with the q paremeter, with values from 0 to 100.

Any areas left blank, cut out from the graphic, or objects that contain lower opacity will maintain transparency when formatted as a PNG. You can also specify a background color value with the bg parameter.

Convert to a PNG with background transparency

format: fm=png

icons-adobe.pdf?fm=png

Convert to JPG at Compression Quality 80

format: fm=png
quality: q=80

icons-adobe.pdf?fm=jpg&q=80

Saved as a JPG with a black background

format: fm=jpg
width: w=256
background color: bg=000000

icons-adobe.pdf?fm=jpg&w=256&bg=000000

Scaling

You will need to deploy your vector assets at a variety of sizes. The benefit of vector formats is that they are lossless, and having a vector source allows you to upscale your graphics before rasterization, without a loss of visual quality. There is a limit of 2048px in either dimension for this type of scaling.

You can use the w or w parameters to define the size of the graphic.

Display the icon proportionately with a width of 128px

format: fm=png
width: w=256

icons-adobe.pdf?fm=png&w=128

Display the icon proportionately with a height of 512px

format: fm=png
width: w=512

icons-adobe.pdf?fm=png&h=512

Graphic Sets and Pagination

Your Adobe Illustrator artboards or PDF pages can be requested individually. This allows you to have multiple branding assets or an entire icon collection organized in one file.

Display Graphic, Page 2

format: fm=jpg
width: w=512
page: page=2

icons-adobe.pdf?fm=png&w=512&page=2

Display Graphic, Page 4

format: fm=jpg
width: w=512
page: page=4

icons-adobe.pdf?fm=png&w=512&page=4

Color Adjustments

You can make hue and saturation color adjustments, among others, to change the look of your vector graphics.

Orange to Green Hue

format: fm=png
hue: hue=80

icons-adobe.pdf?fm=png&hue=80

Orange to Blue Hue

format: fm=png
hue: hue=180

icons-adobe.pdf?fm=png&hue=180

Greyscale

format: fm=png
saturation: sat=-100

icons-adobe.pdf?fm=png&sat=-100

Retina and Device Pixel Ratio Scaling

The device pixel ratio is used to easily convert between CSS pixels and device pixels. This makes it possible to display images at the correct pixel density on a variety of platforms, such as Apple devices with Retina Displays and Android devices. You must specify either a width, a height, or both for this parameter to work. The default is 1.

Standard Screens

format: fm=png
width: w=256

icons-adobe.pdf?fm=png&w=256

Retina Screens

format: fm=png
width: w=80
device pixel ratio: dpr=2

icons-adobe.pdf?fm=png&w=256&dpr=2

Downloadable Brand Assets

If you need to make brand assets available for download, all you need to do is add the dl parameter to the URL and provide a filename. When the user clicks on the asset, it will download in the exact format specified by the parameters you chose, ensuring consistency across the board.

format: fm=png
width: w=256
download: ix-logo-256.png

icons-adobe.pdf?fm=png&w=256&dl=ix-logo-256

Summary

imgix’s PDF support gives you complete control over your brand assets and simplifies management of your master files. If a new size or format becomes necessary, generating it is as simple as adding or changing a parameter, whether it’s a one-off for internal use or a standardized version that’s customer-facing.