Logo Design
Over the last couple of days, I have been thinking about a logo, or something that isn't just the mascots. Something that would represent Wired Fatherhood... So I have been fiddling around with favicons and trying to come up with a logo for this site.
Initially, I was thinking that I would just go with a hand written 'wf'. Maybe something wavy or cursive. Then the more I looked at it, the more it didn't quite really sit right with me. I kept trying to write it curvier, then cleaner, then blocky. I showed my wife a couple of these scribbles and she agreed that it didn't look right. After some more scribbling and erasing, I hit the dead end. Heh, it took a while, but I finally figured out that I didn't want to free hand the logo.
She suggested that I did something else that relates to writing, maybe a keyboard key or something. After maybe about a hour or so of researching fonts and trying to get a good template image of a keyboard key, I had something that was passible in the form of a 'wf' on a white keyboard key. Similar to the old school keyboards, but instead of the usual letters, it was a 'wf'. I thought to myself: "It's ok, that could work" and then that's when I realized, my theme was white! It would going to look like the Michelin Man wearing a white hoodie eating a marshmallow! Way too much white... And it was then I saw it. The little black 'fn' key at the bottom left corner of the MacBook Pro. That's the look I was going for.
Of course, finding a picture or a template with this was surprisingly difficult. Google wasn't giving me the right images and my photoshopping skills were less than ideal to deal with editing a real picture. So I had to draw on my days when I was making an app for the iPhone. I think a button like that could be passed off as a keyboard key, and the glossiness would make it pop up.
Armed with GIMP (The GNU Image Manipulation Program) and an old tutorial I dug up, I set off to make my logo. Interesting note, all I could find were video tutorials... maybe my search terms weren't right, but it was strange. Anyways, keep reading if you are interested in the steps to make a logo so you don't have to sit through a video. ;-)
Feel free to use whatever application you feel comfortable with. These instructions are technology agnostic. Its pretty simple once you have your logo. I found the longest time had to do with making the actual logo look right, the glossy overlay was pretty quick.
Steps to making an iOS Glossy Logo/Icon
- Start off with a transparent Background Image as your base layer
- Create a new layer where you will make your logo
- I recommend building up your logo in layers from the back to front. In my case, it was simple with just a Rounded Rectangle that filled up 500px. I did a Radial Gradient from the top to the bottom with 2 shades of black to make the base look like it was being lit from the top. I added the text 'wf' and played around with it until it looked right.
- Feel free to jazz up your logo some more
- Adding the glossy part. Select your logo but not the transparent parts. Create a new layer. Use a circular selector and put it on intersect mode. Start selected outside of your icon, and have it come in across to about half way spanning the entire width of your logo. At this point, all of the top of your logo should be selected, and the bottom edge of the circle should start at around 1/3 from the top on the left, come down to 1/2 at the middle and then go back up to 1/3 from the top on the right.
- Select your foreground color to white
- Use the gradient tool, but instead of going from foreground color to background color, make it go from foreground color to transparent. Change the gradient type to linear and make it go from white to transparent in your intersected selection.
- Ensure that the Gloss layer is selected and change it's opacity to your liking. Mine is set to somewhere between 35%-45%
Let me know what you think of the logo in the comments!
E