August 12, 2016

Vector Art

The front page of datayze was starting to feel rather lacking. I ditched the early 2000’s style side menu, but what was left just felt blocky and boring. I needed some artwork to give it a little life. Despite my years of art club president, I’m only passable (at best) with pencil and paper. Somehow translating it to digital form never works out as well as I think it will. Since commissioning artwork is out of the question at present time, I needed to find something I could do with the tools I had.

The graphics program I use (paint shop pro) has presets for standard shapes, and lets me resize, slice and rotate them pretty easily. I have no idea how it compares to the more commonly used tools. I’ve fairly proficient with it and this old dog only has so much time to learn new tricks.

One of the first ideas that came to me was a clock background for my Business & Motivation Apps. Clocks are pretty easy to design since there aren’t a lot of free variables involved. It’s basically a circle (possibly multiple concentric circles) and a lot of lines. Minute ticks are every 6 degrees, hours are every 30. I literally drew one line and rotated it 60 times. Since I wanted the clock to have a very professional feel I went with roman numerals over the traditional decimal system. I also quickly decided I needed an inner border since I was only going to display a portion of the clock. The only design choice left was whether to do something different for the hour marks than the minute marks. I tried different shapes like diamonds (with both normal and beveled edges), and thicker marks, but those all looked informal. Eventually I settled on a multi-line look, rotating the hour marks 2 degrees in both direction.


The process took roughly two hours, twice as long as it needed to because I eyeballed the placement of the first line. Since I was cloning it 60 times everything was effectively a half a degree off. It was noticeable enough to drive me nuts so I redid it from scratch.

The next background imaged I worked on was the aperture for the Photography Apps. This one proved a bit more time consuming because I wasn’t sure what shaped to start with for the outside perimeter. My first attempts included the dodecahedron and the octogan, both shapes in PSP. Neither quite looked right. The 12 sides the dodecahedron corresponded with 12 blades in my aperture. Depending on how I drew the blades the aperture was either too opened, or too closed. The octogan was a little better, but too simple.

I needed a decagon, but PSP didn’t have on naively, so I would have to make due with two pentagons. When using shapes with psp you can specify the height and width. A perfect pentagon with equal sides will have a wider width than it’s height. I ended up drawing a pentagon. Rotating it 60 degrees to see if it would perfectly overlap itself. Un-rotate it and stretch either the width or the height. Lather, rinse, repeat. (I didn’t really feel like doing the trig to figure out the dimensions from the start. Color me lazy.)

Once I had the outline I used gradient fill and rotated the fill direction like I rotated the lines. Like the clock, I’m very happy with how it came out.


At this point I was pretty hooked on the vector art approach. It was looking better than anything I could draw by hand, and had the right math feel to it (despite my avoidance of trig). So I decided to finally get around to doing my new logo.


What do you think?

Posted in Work Life | Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *