Every good website or business needs a logo.
A logo is the visual cue that helps make your brand identifiable. It also boosts your image, makes you look professional and helps you to be taken seriously.
Think about every time you drive past the ‘golden arches’ – you know there’s a McDonalds restaurant there simply by seeing their logo!
But most people starting websites or an online brand don’t have a logo or a lot of money to pay for one. You could quite easily head over to a designer and pay hundreds or even thousands of dollars but if you know what you want and it’s basic, why not create a very basic, text-based logo yourself?
Below is an easy beginners guide to create a super basic but clean and tidy logo you can upload onto your website.
It’s dead easy, all you need is a copy of Adobe Photoshop or you can sign up for a Canva account. If you don’t have Photoshop you can pay under $15.00 per month for it or even just download the 30 day trial simply for the purpose of creating this logo – whilst Canva is free, but has less options.
First, here are the videos
I have recorded this process and created a video of it, explaining the process as I go. I do recommend watching the video as you can better see what’s happening.
There are two options: in this post for creating your logo:
Please Note: By playing any videos on this page, you hereby consent to the use of YouTube’s Cookies.
How to create a Text logo in Photoshop
So let’s get started.
Open Photoshop, go to File -> New to create an image. There’s no hard and fast rule, but if you want to make something for both Social Media and a website, pop in 1080 x 1080 pixels with background options ‘transparent’ (as below), then click ‘Create’.
The transparent setting will produce a checkered background instead of a flattened background. But we do want to create a layer with a color on it that represents the color thew logo will sit on top go on your website. It can be green, black, white or any color – this is here so we can make sure the logo is legible against this color.
So pop up the ‘Layers’ docker (if it isn’t there, head to your top menu to ‘Windows’ -> ‘Layers’. Select your layer (or create a new on by clicking the square simple with the ‘+’ sign in it. Grab your Paint bucket tool and fill.
In this tutorial, I went with white.
Choose a Font
Before you make any decisions, just remember – this is a logo, so the text must be clear, legible and match the theme of your branding (your industry, colors, etc). If you run a website about antiques, don’t find a futuristic font that looks like it belongs on Star Trek or vice versa.
First of all, you can find a font within Photoshop by typing out your business name, and scrolling through the fonts. to do that, click text tool on the left tool bar, click into your document and start typing, then select the text your ant to alter. Then click on the font drop down menu and scroll through until you find a font you like (below).
Of course, you may not find a font you like, so you’ll have to do a bit of a search online.
Here’s a few free websites you can use:
- Google Fonts (these can be used on your website also, look out for a how to post soon!)
- Font Squirrel
- Da Font
- The League of Movable Type
- Font Fabric
- Lost Type
Of course if you want a bigger selection, you can buy fonts from Fonts.com.
Just check that the licensing for the fonts you find are for commercial use.
A lot of these websites you can actually type in custom text and it will show you all of the fonts available using that string of text. That way you can preview the font before downloading it:
Once you’ve found a font and downloaded it, you’ll need to install the font (Da Font has some instructions here but if you use PC simply unzip the fonts, highlight them and click ‘install’) and go back into Photoshop and choose it from your font drop down (as described earlier).
You can simply experiment, choose a font and see how it looks, then choose another – it’s that simple.
Rearrange & Style Things a Bit
But a logo doesn’t just stop at a line of text, there’s many different ways you can arrange the text or words in general to maximize the effect. For example, I’ll take the words in “Primal Food” and split it onto two separate layers. You can do this by duplicating the layer (drag the layer in the square ‘+’ icon in the layer docker. Simply removing the ‘Food Co.’ portion from one of the text boxes, then selecting the other and removing the other text (Primal), you’ll have created 2 text layers.
You then have two separate text layers you can control. Maybe you want to change the color, adjust the letter spacing, or anything to get the effect you’re after – simply highlight (using the text tool) the text you want to change and turn on the character styling box on the right
You can have a bit of a play with the settings on the character box, they are pretty straight forward. Up the top you can choose the font name and style, below it are the options for size, spacing, color, height etc. Have a play, experiment and you’ll quickly learn what each button does to the text you have selected.
After you’ve got the text the way you want it, you can then simply move things around and put them where you want.
Start to move things around by clicking on the text you wish to edit, using the text tool mentioned several times above. Then simply go to the above drop down menu ‘Edit’ -> ‘Free Transform’.
As below, you’ll see a box which enables you to resize by grabbing any of the small boxes attached to the border, move by simply clicking and dragging within the box or rotate by clicking and dragging outside of the box.
Simply move and arrange the text layers into the position and size you want. You can change the text color and background color (grab paint bucket mentioned earlier, fill in the bottom color layer with the color of your choice).
I change the layout, swapped some colors and went from there. I also chose to change the font on the word ‘Primal’
If you want to, you can add a Drop Shadow (on your layers window, right click on the text layer and head to ‘Blending Options’ – there’s a Drop Shadow section down the left you can tick and adjust by clicking the word ‘Drop Shadow’. Try the other areas if you want to explore the effects for yourself.
Once you’re happy you should have something similar to this (but your own design)
Once you’re happy, we’ll save this logo for two purposes – a social media ID photo and website navigation.
Go to ‘File’ -> ‘Save for Web & Devices’ and choose from the drop down choose JPG and adjust the quality slide until you thin kit looks clear without being a huge file (more then 120kb or so for a website).
That’s the social media image sorted. Le’s look at a logo for your website.
You will need to remove the background, so go to your layers docker, click the eye symbol to the left of the layer with the background color. Then pick your square selection tool on your left toolbar, select the area you to crop to.
The in you rtop menu go to ‘Image’ -> ‘Crop.
The save for web again! this time choose a PNG 24 with transparency turned on.
The Logo is Ready!
Now you can go ahead upload your PNG to your theme’s logo or header image area and pick the JPG for social media. You’re done! Be sure to save the file as a PSD (File -> Save As) for future editing and updates.
That wasn’t hard was it? Pretty easy and a great start to learning your way around Photoshop.
Creating a Logo in Canva
I’ve recently create this same process for Canva, a simple and free online program, you can check out the process in this video:
Now you’ve got a simple text based logo design!
It’s not going to win any awards but it’s a good starting point for your website. I do recommend getting a professional eventually if you intend for this website to become an income generating business, but this works as a great design to get things moving and can help give your website a more professional image.
I hope that is of some use to you, if you have an response or want to see more please leave a comment below – and let me know what you want to see!
Thanks for reading!