IMPRESS YOUR PEERS

STYLE GUIDE WINTER 2013

CONTENTS
Introduction Identity Logo Specications Logo Size Guidelines Logo Usage Color Palette Color Usage Color Application Typography Image Templates Article Image Template Banner Image Template Social Media Templates Exporting Images 11 12 7 3 4

WHO IS IYP?
Impress Your Peers is a collective group of music lovers with a network ranging from industry professionals to fans. The design elements reect the light-hearted, inspiring messages of IYP.

Style Guide: Impress Your Peers website

introduction 3

primary logo

secondary logo

LOGO SPECIFICATIONS
The IYP logo can be used in a couple ways (with and without the expanded text below). When using the logo be sure to follow space guidelines demonstrated here. The logo should be easy to identify. Include full logo if you dont have an opportunity to write Impress Your Peers out.

clear space 19.5 px (width of the I in IYP could change depending on logo size)

Style Guide: Impress Your Peers website

identity 4

minimum sizes

1 inch

.375 inches

LOGO SIZE GUIDELINES

For clarity reasons, use the primary logo no smaller than 1 inch wide. The secondary logo can be used until it is .375 inches wide.

Style Guide: Impress Your Peers website

identity 5

LOGO USAGE
The color of the logo can change depending on the context it is used; making sure it contrasts with the background it is placed against. You can use white, black, IYP blue, or IYP grey for the logo color.
not enough contrast incorrect color for IYP

not enough contrast

Style Guide: Impress Your Peers website

identity 6

C70 M5 Y0 K0 R0 G183 B234 #00b7ea

C5 M31 Y100 K0 R241 G178 B21 #f1b215

C0 M50 Y100 K0 R247 G147 B29 #f7931d

C41 M80 Y0 K0 R159 G83 B160 #9f53a0

C43 M0 Y100 K0 R159 G204 B58 #9fcc3a

C0 M90 Y82 K0 R239 G64 B58 #ef403a

C0 M95 Y20 K0 R237 G42 B123

COLOR PALETTE
The color palette of IYP is bright and engaging. It is used to appeal to a college aged audience. It is imperative to stick with this palette when generating cover images and banners.

#ed2a7b

C72 M5 Y42 K0 R50 G178 B165 #32b2a5

C0 M0 Y0 K10 R230 G231 B232 #e6e7e8

Style Guide: Impress Your Peers website

color palette 7

interviews

mixes

contests

tips

expanded colors

COLOR USAGE
The colors are primarily used as an overlay with black and white images. The process for setting up pictures is demonstrated on the next page. Each color is designated to a specic category used on the IYP website. These colors must be used correctly to maintain an easily recognizable key. There is room for growth in color application, if other categories are introduced to the website.

Style Guide: Impress Your Peers website

color palette 8

COLOR APPLICATION, PT 1
To save an image as black and white, open the image in Photoshop. First, select Image > Adjustments > Black & White. When the dialogue box opens, you can select Auto which will adjust the color values as the program best sees t. However, make sure the image looks colored correctly and adjust if needed. Save the image (File > Save As) in a folder designated for your IYP images adding -bw to the le name as pictured to the right. Make sure to save the image as a jpeg. The next step is applying color using the templates (demonstrated on the following page).

Style Guide: Impress Your Peers website

color palette 9

COLOR APPLICATION, PT 2
Once your image is saved as a black and white photo, you will either place it in a color-specied template or the generic template. If you are using the generic template but still need to apply a color overlay follow the following steps: After you have opened the template, place your image. Next, draw a color block over your image in the color you would like to overlay. Then select Multiply from the pull down menu found under Effects (which can also be accessed through Window > Effects). Be sure to save your document and export following the exporting templates guidelines.

Style Guide: Impress Your Peers website

color palette 10

Museo Sans 500

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
Museo Sans 500 italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
TYPOGRAPHY
Our primary typeface is Museo Sans in 500 and 500 italic. It is a sans serif used throughout the brand, and contributes to the cohesive look and feel of IYP.

Style Guide: Impress Your Peers website

typography 11

BANNER TEMPLATE
The banner that runs across the top of the IYP site is 960x385 px (pixels). When creating a banner for a color specied category, be sure to use the correct template. Templates are saved on the server under Templates > IYP Templates. If you do not have access to the server, check with Amy or Alicia. There is also a general template for non-color-specied content. When editing this template, you will notice there are FPO (for placement only) elements. These will not be on the nal export of your banner. They are there to designate where elements already exist on the website.

banner usage example

Style Guide: Impress Your Peers website

applications 12

contests
Jason Derulo Jason Derulo prizes for music costumes

FEATURE IMAGE FOR POSTS

The image that appears above each post should be cropped to 300x300 px (pixels). If the post falls under a color-specied category, the feature image should be created using the appropriate template. When using the designated template, be sure to place a black and white photo. The only text you should be editing is below the title (interviews/mixes/contests/etc). There is also a general template for non-color-specied content. Templates are saved on the server under Templates > IYP Templates.
feature image

post example

Jason Derulo

Style Guide: Impress Your Peers website

applications 13

twitter background and cover template

1920x1060 px (pixels)

SOCIAL MEDIA TEMPLATES

Twitter and YouTube IYP has a presence on all major social media sites including Facebook, Twitter, YouTube, Instagram and Pinterest. Many of these sites have cover images. Templates have been created for IYP to help plan images and art accordingly. Once again, notice the FPO elementswhich will not be in your export of the image. Templates are saved on the server under Templates > IYP Templates.
YouTube cover template

520x260 px (pixels)

2120x1192 px (pixels)

Style Guide: Impress Your Peers website

applications 14

facebook cover template 951x315 px (pixels)

SOCIAL MEDIA TEMPLATES

Facebook Shown above is the facebook cover image template. Another element used on facebook is the image tag for original IYP pictures. The tag goes in the bottom left or right corner as shown. Templates are saved on the server under Templates > IYP Templates.

image tag

Style Guide: Impress Your Peers website

applications 15

EXPORTING TEMPLATES
It is important to export the les correctly so that they appear on the website in the best quality. First, export as a high quality print pdf. Programmed settings are OK. Next, open said pdf in Photoshop. Leave settings in the dialogue box as they appear (should be 300 dpi). Go to Image > Image Size and change the resolution to 72, making sure the dimensions match the intended size (300x300 pixels, 960x385 pixels, etc). Finally, save as a jpeg.

Style Guide: Impress Your Peers website

applications 16