Creating a Custom Logo For Your App Without Photoshop on Mac

Recently I was inspired to learn how to make my own custom logo for the web apps I’ve been building. However, I don’t have Adobe Photoshop or any other paid image-editing software. So I looked into what tools were already available to me on my Macbook Pro (macOS Catalina), and found that there was plenty of capability when it came to editing JPEG and PNG images with Preview on Mac. I was able to use basic, built-in tools to create a totally unique and clean looking logo, so I figured I would share what I’ve learned about it to this point by creating a PNG logo with a gradient colored background, and explaining my process as I go.

Opening Steps

I’ll be creating a custom logo for an app I made up just now called ROOKie which teaches chess to beginners. Thinking about my first step, I feel it’s logical to surf Google images for chess-like images that I can easily reshape to create a new pattern or image.

Here’s a PNG image I found that I liked which was free and didn’t have watermarks:

Downloaded from here

The nice thing about this image is that it is actually a PNG, meaning it has a transparent background. Sometimes when you search for PNG images, even when they have the checkered grey and white background PNG images have, they may not actually have transparent backgrounds when you open them.

I thought it would be nice to cross this rook chess piece image with a fancy looking “R”, so I found this one that I thought would go well with it:

Downloaded from here

Even though it isn’t noticeable here, this “R” image has a white background. It even claims to be a PNG when I was downloading it:

Ripping the Background Out of an Image

My first goal before combining these two images is to get the “R” image to actually become a PNG. In order to do that, I’ll open the image in Preview and click on the “Markup Toolbar” icon:

Since I plan to only use the right half of this “R”, I went ahead and cropped the right half of it. The next step to remove the white background is to click on the magic wand icon, known as the Instant Alpha tool:

Here is a demonstration of how I use the Instant Alpha tool:

After I release the click, I hit the delete button to remove the selected area inside the dashed lines

Notice how I drag from inside the area I want to erase until the entire image turns red, then I move back slightly before I release my click. This helps ensure the most crisp line when we remove the selected area, even though a lot of times it does not work perfectly. I continued using the Instant Alpha until I got this result:

Combining the PNGs

Now that we have two PNGs with actually transparent backgrounds, let’s create a new image so that we aren’t editing over one of our original images. Press Command+A to highlight the image, then use Command+C to copy to clipboard. Next, go to “File” at the top of the screen and select “New from Clipboard”:

A window with a new copy of the image should appear, and this is the one we’ll be editing/combining with the “R” image. Now that I have a new rook image ready, going to the other “R” image, I can use Command+A (to highlight) followed by Command+C (to copy). After coming back to the new rook image window, I can Command+V (to paste) them in the same window together. After adjusting the size, this is the arrangement I settled on:

I’m starting to like it, but we can spice it up a little more

Create an Inverse of the Image to Customize Background

If we want to change the boring solid black to a custom gradient or pattern, we need to create an inverse of the image, kind of like a mold. I start by finding a square white image on Google and opening it in Preview. Next, I copy the logo over the top of the plain white image. Then, we use the Instant Alpha (magic wand icon) to delete everything EXCEPT the background. It looks like this:

Then we can pick a custom pattern or gradient to put our mold over. I found this cool diagonal blue and black checkered pattern on Google and pasted a copy of the mold I created over the top of it:

Now we can crop it down to the white square, and use the Instant Alpha tool again on all unwanted white spaces, leaving only the desired checkered logo behind:

That’s a little more creative, but hard to see against dark backgrounds

Finishing Touches

I took the liberty of pasting our new checkered logo over a lighter grey color diamond shape, and adding a square black box outline to make the logo stand out a little more and look more complete. Here is what the finished product looks like:

Conclusion

Even though this logo might not be the most amazing logo I’ve ever seen in my life, I think it demonstrates my point; That with 4–6 google images, a little imagination and creativity, and the Markup Toolbar in Preview which comes standard with Macs, you can accomplish a lot of clean looking image-editing and come out on the other end with a decent logo for free.

I hope someone out there finds this article mildly interesting or helpful. If you made it this far, thanks for reading! Good luck creating your own logos!