Fun with Vector Graphic Designs

bezier vector graphic design

Quarterly Reports and CEO Presentations

Every quarter Sutter Health CPMC in San Francisco holds an Employee – Management Forum, they call CEO Town Hall. It’s a chance for employees to celebrate their work and to hear what the big initiatives are for the coming quarter.

This October the theme is “High Reliability.”

What does High Reliability mean? Here is the image I get. I think of the friend who, when you make plans to move your sleeper sofa up three flights of stairs, shows up ten minutes early with work gloves and an extra cup of coffee. That dude is the personification of high reliability.

Great mental image, but not one that translates well to the medical field.

In the hospital environment we are focusing on time-tested protocols that provide the best outcomes for patients. There’s a whole Ted Talk about it. Missed procedural steps can have major impact on the patient including increases hospital born infections.

Scary stuff. Patients need to be protected. Hence the shield.

Town Hall Vector Graphic Design MockupI found a low resolution sketch of a shield that I could modify and create using bezier vector points and gradients to produce a glossy, highly polished image. With illustrator, I knew I’d be able to get the client’s signature teal and grey just perfect. Getting the check mark distorted correctly took a little bit of finesse, but after a few tries I was happy with it.

The end result looks really sharp and being a vector file means the client can scale it for use on large high resolution posters and small power point slides without loss of quality.

And now the fun:

Sure infinite scaleability is nice, but there’s another reason to love vector images. SVG. I have been playing around with HTML / CSS code and wanted to see how svg’s work, mainly to improve speed results. Vector Graphics offer the benefit of small files, and fast load times. I wanted to see just how well the images retain their look, especially when using gradients and blend modes. I took the bloated code generated from Adobe Illustrator and ran it through Peter Collingridge’s SVG Editor. Below is a codepen with my vector image “saved as” an SVG.

Sure there were some issues. The overlay modes to create the highlights did not intensify the color correctly, only shading it and losing my pantone accuracy. But I had a pretty low bar set, I didn’t think it would read well at all. At 100% opacity the lower gradient turned pitch black with no white, dropping it to 60% seems to have helped. I’ll need to do some more research and experiment a bit more. For instance, I like the idea of assigning class names and css to shapes. A future codepen to muck about with for sure.

See the Pen epgVjr by Eric Gross (@ericgfx) on CodePen.

Featured Projects

Medical Ethics Annual Report... Posted by author icon Eric Gross Apr 17th, 2016 | no responses
Fun with Vector Graphic Designs... Posted by author icon Eric Gross Sep 29th, 2015 | no responses
Marketing for better Hospitals... Posted by author icon Eric Gross Mar 26th, 2015 | no responses

Random Projects

Undercover Assignment – After Effects... Posted by author icon Eric Gross Nov 14th, 2012 | no responses
A desperate campaign.... Posted by author icon Eric Gross May 31st, 2014 | no responses