Basic Training: How to Design a Logo

This is a three-part training in branding that will involve the creating a logo, favicon, and design application in print and web layout. 

Here at LAITS, you may be asked by a client to design a logo to help brand themselves, their course, or their program(s). Some courses also create printed material on mugs, bookmarks, buttons, etc., which is why we would like you to familiarize yourself with how to do this. For the logo, the majority of the drafting can be done in photoshop. Use Adobe Illustrator for refining and finalizing the design.

The logo should be minimal as well as symmetrical in its design. A minimal design helps maintain clarity when applying to different platforms as well as simplify the process of designing a paired down version for a favicon. Symmetry in design is an effective way to catch a viewer’s eye before they may even register the image before them. It creates balance, harmony, order, and aesthetically pleasing results. Consider all types of symmetrical compositions such as bilateral, radial, and translational as well as readability of your logo.

Here are examples of symmetrical layouts:

Bilateral, Radial, and Translational are shown below respectively.

Here are examples of minimal logo designs:

LOGO

If you were creating a brand for yourself, what would it look like? Will you use bright colors or muted colors, and how will that effect the overall mood of your logo? Can line weight and shape make your logo feel bold or delicate? Take come time to check out the follow resources to better understand how these things influence branding choices:

Getting your brand in shape: The psychology of logo shapes

How to choose a brand color palette: Taking a spin on the color wheel

The Psychology of Color in Branding

Specific requirements:

– The image must be symmetrical and minimal in appearance

– Layers will be kept unmerged with only a white background on the first locked layer

– Use your initials, nick name, or full name to make it personalized and an image that is in line with your brand’s identity

– Color can be flat or have gradients

– Verison 1 must include image, full text of name, and be in achromatic color (image and text will be black and the locked background layer will be white)

– Version 2 must include image, acronym, and be in achromatic color (image and text will be black and the locked background layer will be white)

– Version 3  must include image, full text or acronym, and be in chromatic color (image and text will be in color and the locked background layer will be white)

 

Steps to follow:

1. Sketch your logo variations/ideas using paper & pencil, or Photoshop

2. Ask for feedback from STA team lead

3. Make a black and white version of your logo that includes full text and one that includes an acronym [AI OR PS]

4. Ask for feedback from STA team lead

5. Apply a minimum 2 or a max of 4 colors to your logo [AI OR PS]

– Show how color version appears on a black background

– Show how color version appears on a white background

6. Ask for feedback from STA team lead

7. Save to training folder in volume and upload progress in basecamp

 

APPLIED DESIGN

Now that the logo has been created, it is ready to be applied to different types of promotional material. Mock up your design on different products such as mugs, bags, etc. Here are some resources to check out:

https://www.customink.com/

https://www.printful.com/

 

Options for designing promotional material are not limited to just these sites. Feel free to explore other options and interesting objects to print on. If you do use another site, include the link in your basecamp assignment. Make sure to look through the site’s requirements for dpi, sizing, coloring, cropping, etc. before uploading your logo to the sites.

Steps to follow:

1. Upload your logo onto 3 different types of products from the site

2. Save screenshots of the 3 products, each with a crop of a 2:3 ratio 

3. Ask for feedback from STA team lead

4. Save to training folder in volume and upload progress in basecamp

FAVICON & WEB

For this part of the training create a favicon to place in a “web page”. The page is located here: https://utexas.app.box.com/file/680125089551 The promotional material made in the last section will be included on this page as merchandise for sale as well. 

A favicon appears at the top of a web browser and serves as a convent way for people visiting the site to locate your page with multiple tabs open. These images work best as simple shapes or 1-3 characters of text.

– A reduced version Logo must be legible as a “favicon”

– Make sure your favicon is aligned with the coloring of your logo, a paired down shape of your logo, or contains the letters that were included in your logo.

– The favicon standard size is 16 x 16 pixels for this practice. No non-square pictures allowed as they are not supported as a favicon. (Additionally, favicons can come in sizes of 32×32, 24×24, 48×48, 64×64, 128×128, and 256×256 pixels.)

                

Steps to follow:

1. Create a mock-up on Photoshop of your favicon

2. Get feedback from STA team lead

4. Insert favicon to the “web page” tab

6. Fill in additional areas of the “webpage” as labeled

This entry was posted in Basic Trainings, Photoshop. Bookmark the permalink.

Comments are closed.