On Olives and Owls: Amateur Logo Creation on the Cheap

By tlkirsten, March 9, 2020

You would be forgiven for thinking that, because I’m calling this space The Goddess of Enlightenment, my blog posts will be full of navel-gazing pontifications on the nature of existence.

But no, I intend on writing about practical things at least on occasion – information you can put to good use.  So today I thought I’d offer up, while still fresh in my mind, how to create a logo on a budget using really basic tools that you probably already have on hand. 

I’m not running a fancy business so I wasn’t going to shell out big bucks for this website’s logo. I toyed with a number of ideas of what I’d like my logo to include, and found shortcuts by mashing up imagery (legally) to create something I thought didn’t look too bad. 

Not only will I share how I created The Goddess of Enlightenment logo, but I’ll also show you how to create the kind of image which floats, without a background, overtop a header photo, as these are often popular on image-focused website templates. 

This is also an activity teachers and teacher-librarians can do with students as a design-cycle activity. Ideally you’ll leave some of this to your students’ imagination – in doing so you can help them develop problem-solving skills. I enjoy the play involved with solving technology-related puzzles, and so I worked out how to do the following by: 

• • Using a combination of searching online for answers
  • Being patient enough to use trial and error using my prior knowledge of the applications
  • And by having a willingness to try things out – I know I’m not going to break my computer doing so. 

Taking on this kind of challenge can help your students develop perseverance. That said, this guide will help you mentor students through the process, give them a starting point/hints, and can be provided to those students who end up getting too frustrated.

You might also want to adapt this activity for less screen-time. Image components can e.g. be sketched out and manipulated on a desk before scanning and finalizing on computer.

Tips for Screenshots

• • Make sure cursors, selection lines etc., are removed before you take the shot, unless you want to make a point regarding how these lines are used (as I do below with the owl body). Deselect whatever you’re working on and place your cursor away from the image.
  • Right click and “Ignore” spelling and grammar suggestions – you don’t usually want the red and blue squiggly lines under words in your screenshots.
  • Working on a Mac, I used command +shift+4 to select the image I wanted. On a Windows PC I’d use the Snipping Tool application.

Choosing the Imagery I Wanted to Represent this Site

As a child, I loved Greek and Roman mythology, and went on to take quite a few classical-studies courses as university electives in my archaeology-focused program. Athena was my favourite goddess for a variety of reasons, and so I decided to incorporate some of her symbolism into my logo. 

Finding Imagery

It took me a while to find suitable images that were also legal to use.

The owl in my logo is a Microsoft Words icon:

 

I only wanted the owl head and there are a few ways to get rid of the body. In this case it’s easiest to right click on the icon and convert it into shapes, which will break down the icon into manipulatable parts.

     

 

I then visited Creative Commons. I specifically ticked the “use for commercial purposes” and “modify or adapt” boxes because a) maybe one day I do want to monetize my blog and b) I needed to modify what I found in order to incorporate it into a cohesive logo.

 

Once I got my search results I was able to filter by type of image:

 

I copy and pasted the green branch into Word, but I was unable to convert it into shapes like I had with the owl icon. Instead, I “erased” some of the leaves by using a white pen tool, as in the image below:

 

Then I moved the owl head to sit closer to the branch, and made it larger. But the “erased” (really white pen on a white background) area obliterates the owl head, so I have to right click on the owl head to bring up the option to bring the owl head in front of (on top of) the mess:

 

Right click again and choose “Format Object”, which will bring up this menu, in order to manipulate colour, lines, etc. I did this for the owl head:

 

 

 

 

 

 

 

 

I needed olives, so I just:

• • Inserted a circle shape.
  • Adjusted the size and made it oval rather than circular.
  • Then right-clicked it to choose a fill colour (as with the owl head above). 
  • I copied that oval a few times and adjusted the direction of some of the olives:

 

Once that was done, I took a screenshot of the head, branch, and olives together so it would be a cohesive image file rather than multiple images. 

 

---

 

How to Create a Floating Signature or Other Graphic Without a Background

There are a couple of ways to do this. One is much more complicated than the other, but there are times where the more complicated version becomes necessary.

Method #1 (simpler)

The first, simpler way is:

• • Create a text box in Word, and type within that in the fancy font of your choice. 
  • Once that’s done, right click on the text box and choose “Format Shape”. 
  • Under “Shape Options” select “Picture or Texture Fill” and insert a picture of your choice from your computer. 
  • Text can be formatted in all sorts of goofy ways, which is not something I actually recommend for a logo as it looks a bit cheesy (as per the mirror image below), but this is just to illustrate what can be done.

 

This background photo was taken while I was on a small research boat at Bamfield Marine Station.

 

Method #2 

This method becomes necessary if using an application with a specialized font which doesn’t work in Word, or if e.g. you handwrite a title/signature yourself and scan it into Word, or otherwise use an image with a background you want remove.d

In this case: 

• • I took a screenshot of the entire title I typed out in Word and opened it in Preview (Mac – more image tips can be found here). For a Windows computer, see this article. Note – I discuss how to create a title/signature with white font instead of a black font below this section, which requires an extra step.
  • In Preview, I first clicked on the pen tip (to the right in the image below), which brought up a submenu, which included something that looked like a magic wand. 
  • I clicked on the magic wand.

 

Once I saw this image (the broken lines were moving), I selected the background by dragging my cursor across a bit of it and hit delete:

In this photo below, the background has now been removed. You’ll notice in the picture below though that the white space inside the looped letters still exists. This part is a bit fiddly if you struggle with fine motor control, but:

• • I placed my cursor into the inside of a loop (remember, the magic wand must still be lit up blue), and movedd the cursor every so slightly (otherwise I would have ended up removing parts of the text – if by accident this happens to you, hit undo and try again). 
  • Now the moving broken line will be inside the loop and again I hit delete. This was done with each loop.
  • I then saved the file.

 

If you have a template in a website application such as WordPress or SquareSpace, you’ll often upload your background image into the header area, and then, depending on the template, there may be an option to place a logo over this image. In the case of my example here, I simply:

• • Inserted both the background image and the title into Word. 
  • To layer the title over the photo, I right clicked and selected “Wrap Text” and then click “In front of Text” (I’m not sure why it’s called this since my title is actually an image file, not typed text anymore, but whatever, this works). 

 

Once the title was placed where I wanted it over the background, I took another screenshot of the image in Word to create a cohseive image file. And voila! I took this photo, I think, at Porpoise Bay Provincial Campground in British Columbia (I go on a few of these trips through the school I teach at so sometimes I do lose track of which photos were taken where). 

 

Again, you don’t have to use a black font. Many of these website headers have a white script as a logo. To do this, place your text within a text box. Select the text box, right click, and select “Format Shape”. 

 

Under “Shape Options”, select a solid fill in a colour which will contrast significantly with your text colour. Indicate you want “No Line” under that section to remove the text-box border. Then select your text and under “Text Options”, choose a solid fill of white. Finally, take a screenshot of the text box, which you can open in Preview and remove the background as I described in the previous section, and continue on as described previously. 

 

Have fun experimenting!