Ever worked on a mock-up layout for a site but needed a faux logo? Sometimes I find that using an actual logo in place will help me see the various ways a layout could look like. Today, we will be creating a quick and simple logo placeholder for your mock-up. Since this logo won’t be used other than as a placeholder, we’ll be using Photoshop instead of Illustrator.
*Note: I randomly picked “312 Studios” off the top of my head and didn’t know that it was an existing company. This is used merely as an example and for this tutorial only.
STEP 1
We’ll start by opening our canvas to 500px x 500px. I like to leave extra space so that there’s a good amount of room to work with.
STEP 2
We’ll be using our Ellipse Tool to create a circle for our faux logo. The color used for it is #313C3F. Create a circle as big/small as you want. Just leave enough room for the text. You can create an even circle by holding the Shift+Alt (PC) or Shift+Control (MAC) and dragging out your mouse to the desired size. Then align your circle to the center of your canvas.
STEP 3
We’re going to create a copy of our circle. So while our Shape 1 layer is selected, press Ctrl+J (PC) or Command+J (MAC) to duplicate the layer.
Now, go back and select the “Shape 1” layer as we’ll add the white ring around our main circle. Double click on the “Shape 1” layer to get to the Layer Style. Add a Stroke effect and leave everything as is except we’ll change the color to #FFFFFF.
STEP 4
Move the “Shape 1 copy” layer underneath the “Shape 1” layer. We’re going to adjust and increase the size of our second circle that we duplicated earlier. Select our “Shape 1 copy” layer. Then press Ctrl+T (PC) or Command+T (MAC) to transform our circle. Now, while holding down Shift+Alt (PC) or Shift+Control (MAC), drag one of the corners to make our circle bigger.
STEP 5
We’re going to add the text or name of the company in the middle of the circle. Create a new layer above the “Shape 1” layer. Select the Horizontal Type Tool using a font of your choice. The font used in my example is Kalinga at 100pt for the “312” and at 38pt for “STUDIOS”. I used the color #98ABB8 for the number “1” to make it appear not so plain. You can adjust the font size as you see fit according to size of the circle.
STEP 6
Next we’ll add a grunge effect to make it appear less flat. If you don’t have any grunge brushes, you can grab some here. Create a new layer and name it “grunge effect”. Grab your grunge brush and place it to your liking. With the “grunge effect” layer selected, move it above the “Shape 1” layer. Then right click and select “Create Clipping Mask”. This allows the effect to stay within our main circle and not go past the white ring.
You’ll notice the effect comes out pretty strong. So we’ll want to play around with the Blend Modes to make it subtle. I’ve set the Blend Mode to “Soft Light” with the Opacity at 50%.
STEP 7
We’re going to trim the canvas down to the size of the logo itself. So hide your Background layer. Then go to Image > Trim and OK.
STEP 8
Now we’ll finalize our faux logo to use for our mock-up site. Go to File > Save for Web & Devices and change the file format to PNG-24 and Save.
And that’s it! We’ve just made a quick and easy to use faux logo for your layout. I hope you enjoyed this tutorial. Feel free to leave any questions or comments down below.
