I just finished working on a banner for my univeristy. The design involves three logos for the three entities involved in this activity: the school mascot, the student organization and the house of representatives. I preferred the mascot vs the seal since I believe it's more natural for students to identify with. And to keep things light and informal I also preferred an easily recognizable figure rather than the official seal. There is indeed a nice such figure on their website here. Unfortunately, the image is small and the quality makes it even harder to use.
I don't really know much about graphics design or printing; only enough to know one needs high quality scalable images for something as large as a banner. To get a feel for the complexity of the issue, you may take a look at this webpage.
Since I really wanted to use this house figure for the banner, I decided to go through creating a scalable version. Here's what I had to do:
0. For all image editing I used the free Pinta Image Editor. Cropping out the text got me started with the circle I ended up spending long hours staring at.
1. I found a decent web service for tracing bitmap images into SVG files: vectormagic.com. They offer a couple free conversions after you sign up using your email. I tried so many inputs and made a single download once I was happy with it. Of course I was hoping I will just upload my cute circle and get back a scalable version, but here's what I got:
2. The logo has 50 little dots for each of the states around the circle containing the house figure. As the image comes in such low resolution, these dots are far from perfectly circular and the tracing software lumped each into a unique weird shape. So, it seemed I'll need to erase those from my input and figure out a way to put them back once I get the house.
3. It turns out the house itself isn't exactly symmetric, which means tracing ends up with different curves for corresponding features on the left and right. Not good. The only way I could thing of was to fire up my trusty Pinta and make sure the image is symmetric by copying the left half into a new layer, flipping horizontally and merging down.
This made things better, but for some reason, even with identical pixels on both sides, tracing didn't always produce the same result. So, I had to edit few pixels here and there to make it do what I wanted. The result was actually decent, at least for my purposes. Now I have my the main component in SVG format.
4. I should add that the circular boundary wasn't perfect either. Erasing the dots around it might have contributed to that. I spent sometime trying to fix it then I just gave up. Later on, I figured a fix, but this will have to wait for now.
5. Creating a separate SVG file with the 50 dots was the easiest part. It suffices to observe that there's a dot right at 12 o'clock, starting from there one can take steps of $\frac{2\pi}{50}$ to place each next dot. I wrote a script to generate the 50 dots of radius $r$ around a circle of radius $R$ with a controllable offset and scaling. This will come in handy as I had to tune the radii and offset to get something close to the original. This step provides a second SVG.
6. To merge the two SVGs, I found a free online SVG editor: vectorpaint.yaks.co.nz. I didn't know what to expect but they had a particularly nice feature that allows it to distinguish different parts of the SVG and manipulate each separately. I was happy to learn I could use this to remove the uneven boundary. This editor can draw some shapes. To get a perfect circle I found a donut shape that seemed to work for my purposes. However, I figured I'd better edit the script to include a background circle along with the 50 dots so I have fewer things to align.
Let me mention the editor couldn't load two SVGs so I did the merge manually, by copying the markup from one into the other, so I can load a single file. And that's it. Here's the final result, which I hope communicates what is intended:
Luckily, the university provides scalable trademark images including the mascot. As for the logo of student organization, which is a simple 3 letter design, convertio.co was able to do it easily.
I can't wait to see the 2'x12' banner!
I don't really know much about graphics design or printing; only enough to know one needs high quality scalable images for something as large as a banner. To get a feel for the complexity of the issue, you may take a look at this webpage.
Since I really wanted to use this house figure for the banner, I decided to go through creating a scalable version. Here's what I had to do:
0. For all image editing I used the free Pinta Image Editor. Cropping out the text got me started with the circle I ended up spending long hours staring at.
1. I found a decent web service for tracing bitmap images into SVG files: vectormagic.com. They offer a couple free conversions after you sign up using your email. I tried so many inputs and made a single download once I was happy with it. Of course I was hoping I will just upload my cute circle and get back a scalable version, but here's what I got:
2. The logo has 50 little dots for each of the states around the circle containing the house figure. As the image comes in such low resolution, these dots are far from perfectly circular and the tracing software lumped each into a unique weird shape. So, it seemed I'll need to erase those from my input and figure out a way to put them back once I get the house.
3. It turns out the house itself isn't exactly symmetric, which means tracing ends up with different curves for corresponding features on the left and right. Not good. The only way I could thing of was to fire up my trusty Pinta and make sure the image is symmetric by copying the left half into a new layer, flipping horizontally and merging down.
This made things better, but for some reason, even with identical pixels on both sides, tracing didn't always produce the same result. So, I had to edit few pixels here and there to make it do what I wanted. The result was actually decent, at least for my purposes. Now I have my the main component in SVG format.
4. I should add that the circular boundary wasn't perfect either. Erasing the dots around it might have contributed to that. I spent sometime trying to fix it then I just gave up. Later on, I figured a fix, but this will have to wait for now.
5. Creating a separate SVG file with the 50 dots was the easiest part. It suffices to observe that there's a dot right at 12 o'clock, starting from there one can take steps of $\frac{2\pi}{50}$ to place each next dot. I wrote a script to generate the 50 dots of radius $r$ around a circle of radius $R$ with a controllable offset and scaling. This will come in handy as I had to tune the radii and offset to get something close to the original. This step provides a second SVG.
6. To merge the two SVGs, I found a free online SVG editor: vectorpaint.yaks.co.nz. I didn't know what to expect but they had a particularly nice feature that allows it to distinguish different parts of the SVG and manipulate each separately. I was happy to learn I could use this to remove the uneven boundary. This editor can draw some shapes. To get a perfect circle I found a donut shape that seemed to work for my purposes. However, I figured I'd better edit the script to include a background circle along with the 50 dots so I have fewer things to align.
Let me mention the editor couldn't load two SVGs so I did the merge manually, by copying the markup from one into the other, so I can load a single file. And that's it. Here's the final result, which I hope communicates what is intended:
Luckily, the university provides scalable trademark images including the mascot. As for the logo of student organization, which is a simple 3 letter design, convertio.co was able to do it easily.
I can't wait to see the 2'x12' banner!
