Tips for Successful Content Management: Part 5, Vector Image Effects

Search Options
Blog Search
Sign up for our monthly marketing trends enewsletter
  • 4/30/2020
    Welcome to the final segment of our content management series featuring tips for the marketing coordinator or manager flying solo without a front end-development team.
     
    You’ll learn how to better manage your content’s technical side and deliver a polished finished product to your audience, especially in your graphics. If you didn’t start at the beginning, be sure to catch up on each post in the series.
     
     
    In part five, we’re diving deeper into managing your website’s visuals. Let’s take a look at effects that can be applied to vector graphics and how those effects influence the selection of image assets in your CMS.
     

    What Exactly Are Vector Graphics?

    Most of the images you’re going to encounter on your site are raster. You may be able to create some interesting visual effects with them as we outlined in the previous post in this series, but since the raster image itself is just a picture from the computer’s perspective, it’s pretty limited in the ways that it can be modified.
     
    While the vector graphics are generally much simpler (think logos and icons rather than photographs), they allow for more modification because of how the computer understands them. While a raster image is a grid of pixels, a vector graphic is the instructions for drawing an image. These instructions isolate each part of the image into its own set of instructions. Those instructions can be modified individually. If you zoom in, a raster image will become a set of blurry pixels while a vector image will stay clear.
     
    Raster Image Effects
     
    If you have a picture of a starry sky that’s a vector image, the sky is possibly a rectangle covering the whole artboard and each star is a shape. If you want to fade the sky from black to blue and slowly rotate the stars, you would modify the color characteristic of the rectangle and the rotation characteristic of the other shapes over a period of time.
     

    How can I start modifying vector images?

     
    To improve site performance, you can treat a vector image like a raster image, uploading it as its own file and using that file in the site. Interactive effects only work when the vector image is delivered as part of the web site’s code, not as a separate asset. Even icons which aren’t interactive are often best to include as code instead of files for the sake of performance.
     
    If your website uses vector graphics to accomplish interactive effects, those graphics might not be changeable from within your content management system (CMS), requiring a programmer’s coding skill to update them.
     
    This custom programming would usually be needed to open up the image and move its instructions into the site. However, a CMS can be made to update these images if the administrator has the technical expertise to prepare the files correctly. With a little knowledge and the right tool, these users can trade constant support assistance for a one-time CMS update.
     
    The tool in question is a vector image editing program. The industry standard for this type of software is Adobe Illustrator, although a free and open-source alternative called Inkscape also exists.
     

    What do I need to know in order to prepare a vector image?

     
    Your “need-to-knows” will vary depending on your site and type of image. It helps to have background knowledge regarding vector image use or the help of a trained graphic designer. 
     
    Whether you’re working with a designer or alone, there are a few general subjects that you should be familiar with in order to undertake the management of interactive vector graphics:
     
    • Artboard size: While vector graphics are designed to be scaled to different dimensions, the artboard size determines the aspect ratio. A site with manageable vector graphics is likely to specify an artboard size for each type of image.
    • Fills, strokes and expanding: Each shape in a vector image can have an outline called a stroke. Shapes which form complete regions can fill those shapes. Fills and strokes are usually combined into one shape unless you choose to “expand” the shape. Expanding turns strokes and fills into separate shapes, which can help accomplish certain effects.
    • Other types of expanding: Vector graphics can contain other objects than shapes, for example text. If an object is represented as text, its characteristics include what the text says and the font to draw it in. If you expand the text, you turn it into a shape, losing these details but gaining other abilities such as being able to modify the resulting shape.
     
     
    Unexpanded (top) versus expanded (bottom) text as shown in Adobe Illustrator. The top one can be edited by typing, the bottom one is technically a set of shapes not able to be edited by typing. The bottom is what we recommend using in web graphics.
    • Grouping and identifying: The more complex the effect is, the more the site will need to know your intentions for the details of the image. There are a few ways to provide this context. Objects can be grouped together, noting that their purpose is the same. Objects and groups can also be named, and the site can look up the names in the code and treat them differently to accomplish certain effects.
    • Formats and export options: Of the various formats that vector graphics can be exported to, the one that we use on the web is SVG. There are a few options in the export screen, and which ones to choose may also depend on the site or the way the image is being used. The video below shows SVG vector image hover effects on a website’s home page.
    0x224plgpd

    Have a vision?

    Vector graphics can be used to create amazing hover effects, cool animations and more. With the right knowledge of graphics and web-based coding, your website has the ability to stand out from the pack with the creative touch provided by these graphics.
     
    Have an interesting idea of something we can build for you with vector imagery on the web? Let us know! Our production team has extensive expertise in vector graphics and in bringing web ideas from concept to screen. 
    We’re imagining the possibilities now. Reach out and let’s talk vector!
    Missed a section? View the previous post: Part 4, Raster Image Effects here.
    About the author::Benjamin John is a Senior Lead Front-End Developer at thunder::tech. He's responsible for programming interactive user interfaces and developing production processes. He enjoys creative problem solving and appreciates a clever riddle.
Sign up for our monthly marketing newsletters