Story (fictional)
1. Logo creation
We'll be creating a logo for Zona Club. We'll take into account the base color that the client has provided: dark red. With this in mind, let's begin creating the logo:
Step 1 - Creating a universal light/dark logo starting template
Open Photoshop and create a new document with the size 600x600px. Save the document as logos.psd
Use View > New Guide to create a new horizontal guide at 300px height. This will help on splitting the document into a white and dark background.
When you create identity, it's best to provide 2 different logos, one for light background and one for dark. Depending on the branding, sometimes you might need to make more versions, as long as the logo maintains it's identity.
Using the Rectangle Tool (U), create a rectangle in the lower half of the document and make it the color black (000000). You now have a base template for creating logos. I will provide this as a resource at the end of this tutorial. Go there now
Step 2 - Creating the light logo
Using the same Rectangle Tool, create a small rectangle and give it the color 950808, as in the image. This will be part of the logo. The ideea of the logo is like a small napkin on which the logo text comes.
Let's create a lighter margin for the rectangle we just created. Right click the rectangle in the Layers panel, click the Blending Options and enter the following settings:
Using the Horizontal Type Tool (T), create two text fields, one with the size of 26pt and Arial font, and the other the same, only 15pt size. Position the "club" text under the bigger "Zona" text and align it to the right side of "Zona", as in the picture:
I have set the colors for the text to white ( ffffff ). To align the big text in the center relative to the red rectangle, select the rectangle then select the text while holding Ctrl and go to Layer > Align > Horizontal Centers
Using 2 fields of text one under the others, we are making the logo assymetric, while keeping the alignment as a sense of arrangement.
Select the two text layers and the rectangle and hit Ctrl + G to group them in a folder. Click on the folder name and rename it to "Logo light".
Step 3 - Creating the dark logo
We'll now create the logo for the dark backgrounds, which we'll be used mainly for the website. Right click the logo_light group and hit Duplicate Group, like in the picture. We'll reuse this group's assets to create the dark logo. Rename this duplicated group "logo dark".
In the logo_dark group, select the rectangle and go to Blending Options > Stroke and change the color for the stroke to 951919. We need to make a lighter shade of dark red, because it has more contrast on a dark backgound.
Let's change the color of the text so they match the dark background. Select the "Zona" text field and in the layers panel, right-click on the Blending Options, check the Color Overlay and set the color to 400A08. This will color all the text with the chosen color. Do this for the other textfield and this is what you should come up with:
We now have both versions of logo. Let's create the business cards:
2. Business cards
Business card front
Up to this point, we have created the identity logo. Let's try to do a design for a business card. I will use the universal 3.5 x 2 inch business-card size for this.
Step 4 - Business card size
Create a new document in Photoshop, make it 3.5 x 2in, 300dpi and save it as "businesscard_front.psd".
Step 5 - Create the background
Using the Rectangle Tool (U), create a rectangle to match the stage dimensions. Go to Blending Options > Gradient Overlay and create a new Gradient with the colors 661111 and 971616, respectively, as in the picture:
Step 6 - Create the noise gradient
Duplicate the rectangle, rename it to "Noise" and in the Blending Options uncheck Gradient Overlay and check Color Overlay. Give it a darker shade of red, i used 691111. Close the Blending Options panel and in the layers panel, right-click again the duplicated rectangle and select Convert to Smart Object.
Tip: When you have live effects applied to a layer and want to apply an artistic effect, you can convert the layer to a smart object.
The artistic filters only work on raster layers.
Now, having the "Noise" layer selected, go to Filter > Noise > Add Noise and in the Amount field enter 10:
In the layers panel, click the Add layer mask icon.
With the layer mask icon selected, use the Gradient Tool (G), select edit gradient in the top bar and from the presets select Black and White. Now, holding the Shift button, drag from the near bottom to the top and release the mouse. This will create an opacity gradient and we will see the noise only on the top part. We want the noise to be subtle.
Step 7 - Name, address, telephone
Select the Horizontal Type Tool (T) and make a new Textfield with the contents of the name. Use the font "Palatino Linotype", size 24pt and change the style to italic. Position the text like in the picture:
Create another text field under the first with the text "Club Manager", give it the following settings and align it to the right side of the first:
- Font: Georgia
- Size: 12pt
- Style: italic
- Color: F4C0C0
Finally, add a bigger textfield for the address and contact info, and align it to the right of the business card, like in the picture. Use the following settings:
- Font: Arial
- Size: 9pt
- Style: normal
- Leading: 10pt
- Color: DB9F9F
Step 8 - Logo
Open the logos.psd document. In the logo_dark group folder, find the two text fields "Zona" and "club". Select both of them holding Ctrl, right-click and select Duplicate Layer .... In the dialog, set the Document to front, then hit OK.
Go back to the business card document and you'll notice the textfields are very small. We need to scale them up, because the logo was made at 72dpi and this is a 300dpi document. Scale the textfields and align them to the right of the name text, like in the picture:
There we go! We now have a front of the business card ready. You can finish off here and go print the business card, I'm just goint to show you how to make the other side, as having a two-sided business card is more stylish.
Business card back
Let's create the back for the business card. Reopen the "businesscard_front.psd" document and save it again as "businesscard_back.psd". We'll reuse the noised background for the back.
Delete the textfields and the logo, leaving only the background layer and the "Noise" layer. Import the full logo_dark layer from the logos.psd file (with the red rectangle). Resize the logo to be at least a third of the width of the business card.
Step 9 - Logo position
We'll position this in the center to finish the background. To align the logo, select the background layer ( the lowest layer ) and holding Ctrl, select the logo group and go to Layer > Align > Vertical Centers and Layer > Align > Horizontal Centers.
Step 10 - Cutout effect
We'll add a nice cutout effect, using a clever technique. Create a long and thin black rectangle, like in the picture and add a layer mask to it:
With the layer mask selected, use the Eraser Tool (E) to make a smooth opacity mask. I have used 128 for the size of the brush. Be very carefull to go very stright from one side to the other so you don't have ugly artefacts. It should look like in the picture:
Set the eraser brush size to 800 and click on the left and on the right, so you erase smoothly in both areas. Use guides for best precision. The brush circle has to be approximately half in the document, like in the picture:
Step 11 - Duplicate margin
Select the margin you have just created, right-click and select Duplicate Layer. With the duplicate layer selected go to Edit > Transform > Flip Vertical. Position this margin above the logo, like in the picture. You should end up with a nice cutout effect:
This is all there is to the back of the card.
Remember to save often, so you don't lose your hard built work!
Final preview
This are the logos and the business cards:
This is the end of the first tutorial. In the next tutorial of this series, we'll create the main design for the website and later we'll cut it in html and finally deploy it as a complete website.
If you want to be announced of when the next tutorial will arrive, you can register to our newsletter
