Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
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
WEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE
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
DRAFTWEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE
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
WEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE
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
DRAFTWEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE
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
WEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE
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
DRAFTWEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE
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
WEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE
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.
DRAFTWEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE
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
WEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE
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
DRAFTWEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE
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
It is recommended that a 5 column image link set is the maximum amount displayed.
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
WEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE
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
It is recommended that a 4 column image link set is the maximum amount displayed.
DRAFTWEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE
DRAFT
THREE COLUMN LAYOUTApproximate sizes of each image in pixels.
Height is variable.
3 COLUMN179px wide
2 COLUMN270px wide
1 COLUMN545px wide
It is recommended that a 3 column image link set is the maximum amount displayed.
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
WEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE
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
DRAFTWEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE
DRAFT
NOTE: IMAGES WITH TYPE EMBEDDED MUST HAVE AN ALTERNATE TEXT DESCRIPTION
SAMPLES 0707.2 Main Banner Type Embedded
WEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE
DRAFT
DRAFT
NOTE: IMAGES WITH TYPE EMBEDDED MUST HAVE AN ALTERNATE TEXT DESCRIPTION
SAMPLES 0707.2 Main Banner Type Embedded
WEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE
DRAFT
DRAFTSAMPLES 0707.2 Main Banner Type Embedded
NOTE: IMAGES WITH TYPE EMBEDDED MUST HAVE AN ALTERNATE TEXT DESCRIPTION
DRAFTWEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE
DRAFTSAMPLES 0707.2 Main Banner Type Embedded
NOTE: IMAGES WITH TYPE EMBEDDED MUST HAVE AN ALTERNATE TEXT DESCRIPTION
WEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE
DRAFT
DRAFTSAMPLES 0707.3 Short Banner Type Embedded
The Oviatt Library
Art Galleries
WEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE
DRAFT
DRAFTSAMPLES 0707.4 Image Links
NOTE: IMAGES WITH TYPE EMBEDDED MUST HAVE AN ALTERNATE TEXT DESCRIPTION
DRAFTWEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE
DRAFT
NOTE: IMAGES WITH TYPE EMBEDDED MUST HAVE AN ALTERNATE TEXT DESCRIPTION
SAMPLES 0707.4 Image Links
WEB-ONE ACADEMIC AFFAIRSIMAGE + BANNER STYLE GUIDE
DRAFT
DRAFT
NOTE: IMAGES WITH TYPE EMBEDDED MUST HAVE AN ALTERNATE TEXT DESCRIPTION
SAMPLES 0707.4 Image Links