ACADEMIC WEB-ONE AFFAIRS IMAGE + BANNER STYLE GUIDE · 2013. 9. 3. · web-one academic affairs...

ACADEMICAFFAIRSWEB TEAM

WEB-ONE

IMAGE + BANNERSTYLE GUIDE

AUGUST 26, 2013DRAFT

WEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE

DRAFT

DRAFTTABLE OF CONTENTS

00 INTRODUCTION

01 GENERAL OVERVIEW

02 TYPOGRAPHY

03 SOFTWARE USAGE

04 IMAGE EDITING GUIDELINES

05 BANNERS 05.1 Two Banner Sizes

05.2 Two Typographic Applications

05.3 Making Main Banner with Embedded Type

05.4 Making Short Banner with Embedded Type

06 IMAGE LINKS 06.1 Overview

06.2 Single Column Layout

06.3 Two Column Layout

06.4 Three Column Layout

07 SAMPLES 07.1 Overview

07.2 Main Banner Type Embedded

07.3 Short Banner Type Embedded

07.4 Image Links

WEB-ONE

IMAGE + BANNERSTYLE GUIDE

DRAFTWEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE

DRAFT

THE PURPOSE OF THIS STYLE GUIDE

This document is a guide to assist in the creation of visual elements to the current Web-One Theme. The following provides recommended procedures for image selection, cropping, type layout, and saving images for the Web-One Theme. These preferred styles are recommendations to web content administrators to create a visual harmony among all department and college websites.

TABLE OF CONTENTS

00 INTRODUCTION

01 GENERAL OVERVIEW

02 TYPOGRAPHY

03 SOFTWARE USAGE

04 IMAGE EDITING GUIDELINES

05 BANNERS 05.1 Two Banner Sizes

05.2 Two Typographic Applications

05.3 Making Main Banner with Embedded Type

05.4 Making Short Banner with Embedded Type

06 IMAGE LINKS 06.1 Overview

06.2 Single Column Layout

06.3 Two Column Layout

06.4 Three Column Layout

07 SAMPLES 07.1 Overview

07.2 Main Banner Type Embedded

07.3 Short Banner Type Embedded

07.4 Image Links

INTRODUCTION 00


DRAFT

DRAFT

BANNERSMust be 1128 px wide

FEATURED IMAGES + IMAGE LINKSSizes vary

These are to be used sparingly to emphasize content with imagery that is not already dynamically built into the Drupal Web-One system.

IMPORTANT NOTE:As with all imagery on all CSUN websites, it is imperative that the content creators provide alternate descriptions of images in compliance with ADA requirements.

Visit http://www.csun.edu/accessibility/ for more information.

GENERAL OVERVIEW 01


DRAFT

MUSEO SANSMuseo Sans is a sturdy, low contrast, fairly geometrical, highly legible sans serif typeface very well suited for any display and text use. The family is very versatile for digital type display and its various weights allow for a range of contrasting type treatments.

ADOBE GARAMONDGaramond is a family of old-style serif typefaces derived from the work of Claude Garamond in the sixteenth century; most Garamond fonts have become renowned for their excellent readability, elegance, and character.

Museo SansABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Adobe GaramondABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

TYPOGRAPHY 02


DRAFT

DRAFT

ADOBE PHOTOSHOPYou will need a version of Adobe Photoshop to open and edit the template files that correspond to this style guide.

It is also recommended that you have an intermediate level knowledge base of Adobe Photoshop to work with the following techniques:

layer arrangement and folders

type editing and sizing

color effects and layer effects

masking

cropping

saving for web and devices

RESOURCES AND TUTORIALShttp://lynda.csun.edu

SOFTWARE USAGE 03


DRAFT

1. Find an image that is at least 1128 pixels wide. Note that scaling or sizing an image larger than its original size will pixelate the image.

2. Make sure your document is 72 dpi and in the RGB color mode.

3. Choose images that will look better horizontally cropped and are not vertical.

4. When scaling images in Photoshop, scale them proportionally. This can be done by holding the “shift” key when sizing and clicking and dragging.

To watch a video of images being created in Photoshop please visit: http://www.viscomcenter.com/web-one

CORRECT: PROPORTIONALLY SCALED INCORRECT: STRETCHED IMAGERY

Remember to hold the “shift” when scaling manually

IMAGE EDITING 04GUIDELINES


DRAFT

DRAFT

WIDTH:

Must be 1128 px wide

HEIGHT IS FIXED TO THE FOLLOWING PIXEL SIZES:

400 px

356 px

330 px

300 px

264 px

156 px

IMPORTANT NOTE:Every image in a slideshow must be the same height.

1128 x 330

1128 x 156

BANNERS 0505.1 Banner Sizes


DRAFT

A. IMAGE WITH TYPE EMBEDDEDThe type in this sample is embedded using Adobe Photoshop. The fonts and layout are created then saved as a .png or .jpg for placement into Drupal.

B. IMAGE WITH TYPE CREATED IN DRUPALThe type in this sample is dynamically created using the Drupal system. It is HTML driven type that is prestyled by the Drupal Web-One templates. The Web-One training modules cover how to make these banners. USE THIS IF YOUR IMAGE NEEDS TO LINK TO ANOTHER PAGE.

NOTE: IMAGES WITH TYPE EMBEDDED MUST HAVE AN ALTERNATE TEXT DESCRIPTION

BANNERS 0505.2 Two Typographic Applications


DRAFT

DRAFT

Must be 1128 px wideNOTE: IMAGES WITH TYPE EMBEDDED MUST HAVE AN ALTERNATE TEXT DESCRIPTION

STEP 1.Find an image that is at least 1128 pixels wide. Note that scaling or sizing an image larger than its orginal size will make the image pixelated. STEP 2.Create a new document that is 1128px wide by x-height for your banner. Keep in mind 380px is the maximum height. The banners on this page are 330px tall. Make sure it is 72dpi/RGB.

STEP 3.Drag or copy/paste your image into your new banner document.

STEP 4.Scale the image porportionally and accordingly for your composition.

STEP 5. (OPTIONAL)Type out your text using the type tool. It is recommended to use Museo Sans or Adobe Garamond.

STEP 6.Save for web and devices and choose .jpg high quality or .png 24.

For sample template files as well as a video of a banner being created in Photoshop please visit: http://ww.viscomcenter.com/web-one

BANNERS 0505.3 Making Main Banner with Embedded Type

STEP 2.

STEP 3-4.

STEP 1.


DRAFT

Must be 1128 px wideHeight is approx. 150 px tall

STEP 1.Find an image that is at least 1128 pixels wide. Note that scaling or sizing an image larger than its orginal size will make the image pixelated. STEP 2.Create a new document that is 1128px wide by x-height for your banner. Keep in mind 150px is a desired height. Make sure it is 72dpi/RGB.

STEP 3.Drag or copy/paste your image to your new banner document.

STEP 4.Scale the image porportionally and accordingly for your composition.

STEP 5. (OPTIONAL)Type out your text using the type tool. It is recommended to use Museo Sans or Adobe Garamond.

STEP 6.Save for web and devices and choose .jpg high quality or .png 24.

For sample template files as well as a video of a banner being created in Photoshop please visit: http://ww.viscomcenter.com/web-one

BANNERS 0505.4 Making Short Banner with Embedded Type

STEP 2.

STEP 3-4.

STEP 1.

150


DRAFT

DRAFT

OVERVIEWImage height is variable, but the recommended height should be no greater than 170px.

Recommended sizes of each image by columns.

5 COLUMN215px wide

4 COLUMN270px wide

3 COLUMN367px wide

2 COLUMN567px wide

It is recommended that a 5 column image link set is the maximum amount displayed.

IMAGE LINKS 0606.1 Overview

215 x 170 215 x 170 215 x 170 215 x 170 215 x 170

270 x 170270 x 170270 x 170270 x 170

367 x 170

567 x 170 567 x 170

367 x 170 367 x 170


DRAFT

SINGLE COLUMN LAYOUTApproximate sizes of each image in pixels.

Image height is variable, but the recommended height should be no greater than 170px.

5 COLUMN215px wide

4 COLUMN270px wide

3 COLUMN367px wide

2 COLUMN567px wide


215 x 170 215 x 170 215 x 170 215 x 170 215 x 170

270 x 170270 x 170270 x 170270 x 170

367 x 170

567 x 170 567 x 170

367 x 170 367 x 170

IMAGE LINKS 0606.2 Single Column Layout


DRAFT

DRAFT

206 x 170

272 x 170

415 x 170 415 x 170

272 x 170 272 x 170

206 x 170 206 x 170 206 x 170

IMAGE LINKS 0606.3 Double Column Layout

DOUBLE COLUMN LAYOUTApproximate sizes of each image in pixels.

Image height is variable, but the recommended height should be no greater than 170px.

4 COLUMN208px wide

3 COLUMN242px wide

2 COLUMN369px wide



DRAFT

THREE COLUMN LAYOUTApproximate sizes of each image in pixels.

Height is variable.

3 COLUMN179px wide

2 COLUMN270px wide

1 COLUMN545px wide


179 x 170

270 x 170

545 x 350

270 x 170

179 x 170 179 x 170

IMAGE LINKS 0606.4 Three Column Layout


DRAFT

DRAFT

SAMPLES

The following are several treatments of the image banners and buttons. These are examples for inspiration and not intended to be exactly how content creators are to make them, but they provide a range of ideas.

SAMPLES 0707.1 Overview


DRAFT


SAMPLES 0707.2 Main Banner Type Embedded


DRAFT

DRAFT


SAMPLES 0707.2 Main Banner Type Embedded


DRAFT

DRAFTSAMPLES 0707.2 Main Banner Type Embedded



DRAFTSAMPLES 0707.2 Main Banner Type Embedded



DRAFT

DRAFTSAMPLES 0707.3 Short Banner Type Embedded

The Oviatt Library

Art Galleries


DRAFT

DRAFTSAMPLES 0707.4 Image Links



DRAFT


SAMPLES 0707.4 Image Links


DRAFT

DRAFT


SAMPLES 0707.4 Image Links

ACADEMIC WEB-ONE AFFAIRS IMAGE + BANNER STYLE GUIDE · 2013. 9. 3. · web-one academic affairs...

Documents

Transcript of ACADEMIC WEB-ONE AFFAIRS IMAGE + BANNER STYLE GUIDE · 2013. 9. 3. · web-one academic affairs...