Gumbo Identity and Website Manual
A guide to the identity of Gumbo, formatting and uploading content to the Gumbo website. Last updated 18/12/08
Logo 4 Logo Concept 5 Logo Colours 6 Logo Construction 7 Logo Usage 8 Typography Website 10 Introduction 11 Accessing the Website CMS 12 Filing System 13 Section Colours 14 Section Structure 15 Image Sizes 16 17 18 19 Saving Images Making .gif Files Making Introductions Making Sketch Images
20 Uploading Images 1/2 21 Uploading Images 2/2 22 Moving Into Position 23 Making Videos 24 Uploading Videos 25 Making Links 26 Making Open & Close Arrows Credits & Support
Logo / Logo Concept
Logo Concept The concept of the Gumbo logo is a typographic visualisation of the meaning of the word ‘gumbo’. It is a mixture of very different typefaces which can also be changed or edited and expanded. The logo can be infinitely rearranged. There are however some pre-made logo variations supplied on file which can be used. These are located in the gumbo > logo folder. There are two folders of pre-made logos; the logo_cmyk (for print) and the logo_rgb (for web). There are also the files logo_ construction folder which contains the lettering grid and can be used to create new lettering combinations.
Logo / Logo Colours
Logo Colours The logo itself has no preferred colourscheme or corporate colours. It is free to adapt to the context of where it is placed. However, the colours of the logo should always be chosen with regard to its placement. For example, on the website the logo is used in white as it should not compete with the colourful content.
Logo / Logo Construction
Logo Construction The logo is created using a random selection of different typefaces and lettering. Each of these letters are set within a grid (shown in grey tones). All the grid spaces are equal except for the space for the letter ‘M’. This space is ½ wider than the others (ratio 2:3). This is due to the common proportions of the letter ‘M’ in relation to the other characters. These selection of typefaces are supplied in outline so that you do not need to install the fonts. This selection is in no way complete or definite — new characters / typestyles / lettering are encouraged. New Letters It is important that any new lettering added to the selection sit on the same baseline as the other characters. This way the Gumbo logo still reads as a ‘unit’. Any new lettering should not exceed the size of the grid sections. The sections are there to make it easy to chop and change the lettering of the logo.
Pre-selected Logo Typefaces
Logo / Logo Usage
Logo Usage There are not many rules regarding use of the logo and where it placed. So far the logo has only been used horizontally. Once common sense is used I believe the logo can be used quite freely. But there are some guidelines which are good practise.
Do not place the logo in areas which are very busy.
Do not rotate any letters or make any letters leave the baseline.
Do not rotate the logo
Do not add effects to the logo
Do not distort the logo
Logo / Typography
Typography The typeface used is Typ 1451 in the three weights shown here. It is available from www.lineto.com. The typography should always be used at legible sizes with decent line spacing. A good rule is to keep the line spacing between 2—4 pt bigger than the typesize in smaller sizes, and 6—10 pt bigger in larger sizes.
Typ 1451 Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789-(.,:?+!#)*”$£%”[\]&@</>
Typ 1451 Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789-(.,:?+!#)*”$£%”[\]&@</>
Typ 1451 Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789-(.,:?+!#)*”$£%”[\]&@</>
Website / Introduction
Introduction The website has a Content Management System (CMS) meaning you can upload and change the website at any time, and from any computer with internet access. However, this means some guidelines have to be followed in order to keep the consistency of design. Please refer to this guide when you are making changes or uploading new content to the website.
Website / Accessing the Website CMS
Accessing the Website CMS To access the Content Management System (CMS) type the web address below:
CMS Control Panel
Delete: Deletes the item immediately, be careful, it can’t be undone. Move: Option to move an item to any section, whole sections can also be moved if you click on the first item. Edit: Opens the edit panel where new images can be uploaded, rollover colours chosen and text can be changed. See Uploading Content. *It is worth noting that the control options for each item appear below that item.
Website / Filing System
Filing System It is good to note from the outset that files and templates have been created for different section of the website. These are located in the gumbo_website folder supplied. They are colour-coded, red means live on the website while green is the finished construction file of the live website file. There are also many templates provided in the gumbo_website folder, please use these when creating new content. It is vital that when you use these templates you choose the ‘Save As’ option. File Names There is also an ‘t’ or ‘f’ ending added to the end of some files names. The ‘t’ means thumbnail and the ‘f’ means full size. This does not have to be used rigorously, it is just a hangover from when everything on the site used to expand. It can still come in handy though. There is also shortened versions of the subsections to help with file names: sf: Sugarfoot mm : Mr Macaroni gh: Gangster Hamster po: Pombo fm: Freak Marbles bz: Bazooka ms: Misfits dv: Dr Vet ra: Random Artwork sh: Shop
Green: Construction file Red: File uploaded to website
Website / Section Colours
Section Colours Each section on the website should have its own colour. The colours are created using a code which can be inputted by clicking ‘edit’ under the first item in a section. This selection will affect the rollover colour of everything in that section. To choose a colour you have to enter a HTML colour-code 6 digit number. These colours are known as websafe colours because they can be displayed on any monitor. Basically they work like RGB in that the first two digits stand for the R value, the middle two digits are the G value and the final two digits are the B value. Please note that for a colour to be web safe, each digit in the pair has to be the same value. There is also a Photoshop option to help with this, or else Google ‘HTML colour codes’ for a full colour spectrum and colour codes.
HTML Colour Codes
Mr Macaroni FF3366
Dr Vet FF3333
Gangster Hamster 999999
Freak Marbles CC99FF
Website / Section Structure
Section Structure Each section follows a definite structure and order. It is important to keep this order so that users can navigate the site as easily as possible. This does not mean that the structure is inflexible. Different sections have varying amounts and types of content which have to be catered for. To create a subsections on the back-end, click the ‘New Subsection’ option which is located at the bottom of each section.
Section Logo gif
Subsection Introduction If there are any subsections not present in a section then that section is left out and the sections after follows it. For example: not every section has ‘Videos’, so therefore the ‘Meet the Characters’ section will follow the ‘Introduction’ Section.
Meet the Characters
Other Relevant Artwork
Sketches / Storyboards (always last)
Website / Image Sizes
Image Sizes The website does not have a built-in grid. The grid is created by sizing the images to specific sizes in Photoshop. Therefore It is very important the images follow these guidelines or else the website will appear very chaotic. Height The most important of there measurements is the height of the images. There are 3 main image height options. Thumbnail height: 100 px Medium image height: 210 px Large image height: 320 px The website uses a 10 px space in between images, both vertically and horizontally, hence why this 10px has been added to the height measurements stated above. Width The width is can be much more flexible. The basic rule is that the width measurement should be a multiple of 25 px. The longest images are used for the introduction. These should not exceed 900 px as if they are any bigger they will not display on all screen sizes. Minimum image width: 150 px Average image width 450px Maximum image width: 900 px *Keep images multiples of 25 px Video Sizes Setting a video size is slightly different, see Making Videos.
Basic Vertical Image Grid
Thumbnail height: 100 px
Medium Image height: 210 px (rarely used)
Grid height: 10 px
Large Image height: 320 px (mostly used)
Basic Horizontal Image Grid
Minimum Thumbnail Width: 150 px
Average Image Width: 450 px
Grid width: 10 px every 25 px
Maximum Image Width: 900 px
Website / Saving Images
Saving Images First make sure the Colour Settings of your image are set to RGB (Image > Mode > RGB) and that the image is the correct size (Image > Image Size). To save an image click on File > Save for Web & Devices. This will bring up a new menu screen and options. Please note that this method of saving images is much more effective for websites than the Save As option. Files will be a fraction of their original size but keep the quality. However this is not recommended for saving print files Save Options Make sure the option 2-Up is selected on the top left of the window. This displays the original image on the left and how the saved version will appear on the right. Then select JPEG from the menu on the right and set the quality to 60%. This is (usually) the minimum quality before the image starts to ‘break’. If you notice that the image quality drops at 60% then you can adjust this to a higher setting but bear in mind this increases the file size making it take longer to display on the website. Once you are happy then click save and name the file. See File Naming.
Save For Web Menu Select 2-Up Select JPEG Set Quality to 60
New image size Original image size
Website / Making .gif Files
Making .gif Files To make a .gif file in Photoshop click on Window > Animation for the Animation menu to display. It is best if you have all the images you would like to be in the gif to be saved on different layers prior to opening the Animation menu. The Animation menu works much the same as the Layer menu and even shares some of the icons. For example, new frame is the same icon as new layer. To make a gif, create a new frame then select which items you want viewed in that frame via the Layer menu, then click ‘New Frame’ and repeat. Frame Rate Once you have all the frames created, then you can choose the frame rate by clicking on the time displayed under the thumbnail. There is a hierarchy to the speed of the frame rates used in each section. Please consult the Frame Rate Table on the right. Saving the .gif To save the file as an animated gif click on File > Save for Web and Devices. This is will bring up a new screen. Make sure the format .gif is chosen from the menu on the right-hand side and then click save. It is good to save the file as a .psd file as well so you can edit it later, a gif file cannot be easily edited.
New frame Play Frame rate Looping options
Frame Rate Table Logo .gif Logo frame: between 6 – 9 sec. (Keep logo frame random so all the logo animations are not on the same cycle). Image frames: 0.1 sec. Video .gif Image frames: 0.5 sec. Other Image .gif (characters etc.) Image frames: 1 sec. Sketch .gif Image frames: 1.5sec
Make sure GIF is chosen, all other options can be played with until a satisfactory color display is found
Website / Making Introductions
Making Introductions To make an introduction please use the introduction template supplied in the Website > Template folder named ‘intro_ templ_f.psd’ The introduction to each section is the first image that appears once that particular section is clicked on. These usually consist of a logo with a short text underneath and a image to the right. This is a contained within a single image .jpg file. Text The text should be a short summary, not exceeding the 320px in height. The text should be set in Typ 1451 Medium and sized at 13px on 17px leading (line-spacing). This can be selected on the Character Menu (Window > Character). Make sure the type measurement is px in the Photoshop > Preferences > Units & Measurements Menu. Paragraph Space It is important to break the text into small paragraphs to make them easier to read. This space between paragraphs is 9 px, Photoshop can make it quite frustrating to change this space. The easiest way is to type a space in the paragraph break, highlight this space with the cursor and then change the leading from 17 px to 9px on the Character Menu. Images All images should be should be 72dpi (Image > Image Size > Resolution: 72). If you drag images into the template then they will automatically change to this setting. To save, see Saving Images.
Max Image width: 900 px Image begins Text box ends
Type size Leading
Website / Making Sketch Images
Making Sketch Images There is a template for making sketch images in the Website >Template folder called ‘sketch_templ_f.psd’. The width of this template can be changed but it is nice if all the sketches in a section are the same size. To make a sketch image you will need to know the HTML colour code of the section where it will be placed. Open the sketch image and make it the correct size. Then select Image > Mode > Greyscale to make the image black and white. Then play with the contrast and levels until satisfied. Then switch the image back to RGB (Image > Mode > RGB). Create a new layer and colour that layer the section colour (for example: Sugarfoot orange FF9900). Then click on the sketch layer and select ‘Multiply’ on the Layer Menu. This will make all the whites turn to transparent. Make sure your image is on a layer above the flat colour. Then click Save for Web & Devices (see Saving Images).
Select ‘Multiply’ on the sketch layer Place coloured layer underneath sketches
Website / Uploading Images 1/2
Uploading Images 1/2 To upload an image onto the website open the backend CMS at:
To add a new image scroll down to the section where the image is to be placed (in this case Sugarfoot). The menu is located at the very end of the sections, it will appear after the close arrow. You will now be on the ‘Edit Content’ web page, see next page of this manual, Uploading Images 2/2
Select ‘New Image’ which is located at the very bottom of each section.
Website / Uploading Images 2/2
Uploading Images 2/2 You will now be on the ‘Edit Content’ page. Upload the content as shown on the righthand-side then click ‘Save’. Please note: sometimes an updated image doesn’t appear to change when ‘Save’ is clicked, (particularly if you are updating an image which uses the same filename as the previous image). This is normal and the image will appear correctly on the site, and update on the backend soon after. Once you have uploaded the content, click ‘Back’ to return to the overview. Then Move into the correct position (See Moving into Position).
Click ‘Choose File’ to search for a file from your computer to upload. Make sure it is the correct size and ‘Saved for Web’ Edit Teaser: Type a text description in here. It will appear in the orange box once saved. Close Section: This will make the item open and close the section when clicked. Leave as ‘No’ unless it is an end of section arrow. Prevent Hover: This will make the item not have a mouse rollover colour. Leave as ‘No’ unless it is an introduction text. URL: Leave blank unless the item is to be a link to an external website, or link to an email address. Save: This saves the content and changes.
Website / Moving Into Position
Moving Into Position Once ‘Back’ is clicked you will return to the overview. The new image will appear at the bottom (in this case, below the close arrow). The coloured box beside it is a preview of the rollover colour. To move the new image, click ‘Move’ underneath the image. The page will then reload with a selection of ‘Move here’ option in between each item. Simply select the ‘Move Here’ position you want the item to go and click on it. The page will reload again with the image in its new position.
Moving Function in CMS Menu
Select ‘Move’ to move the item into position. The page will reload. Then various ‘Move Here’ options will appear in between each existing item. Select the correct position and click. The page will reload once more with the new item in the selected position.
Website / Making Videos
Making Videos Videos have to be in Flash format to be uploaded onto the website. This is file names ending in .flv. There are many different applications which will convert videos to different formats (www.media-convert.com). However these will only do smaller files. I used a programme called Sorenson Squeeze to format the videos. All settings were selected using trial and error. It is best to keep the videos under 12 mb so that they will upload to the website and play without stopping. (Having said that, I have uploaded shorter videos [15 sec] in high quality that were only 6 mb but they didn’t play smoothly.)
Website / Uploading Videos
Uploading Videos Videos have to be in Flash format to be uploaded onto the website. This is file names ending in .flv. Holding Image To upload you will need a holding image which appears before play is selected. This image will define the dimensions of the video player. To make this image, open the video in Quicktime (or whatever video programme you use) and take a screenshot (cmd + shift + 4) and open it in Photoshop. Then resize the image height to 300 px (Image > Image Size). Then select ‘Save for Web’ and save as a jpg. This holding image is 300 px high because there will be a 20 px high menu bar added to it on the website, making it the correct 320 px to fit in the grid. Thumbnail .gif You will also a thumbnail gif animation. Take more screenshots of the video playing and make a gif animation as normal (see Making .gif Files). There is a template supplied in the template folder ‘video_animat_templ_t.psd.’ Please make sure the ‘play arrow’ is displayed on each frame. Creating Video Section Select ‘New Video’ on the backend CMS. It is located at the bottom of each section, directly below the ‘New Image’ option. For further info on where this menu is see Uploading Images.
Uploading Video Menu
Upload the thumbnail gif animation here. Add thumbnail text here.
Upload flv video file here. Upload the fullsize preview image. I recommend using the first frame/image of the video. Please note: this preview image will determine the dimensions of the video. Add video description in here. Add ‘Click here for background story’ Then click ‘Save’ and ‘Back’ and move into position (see Moving into Position)
Website / Making Links
Making Links The links on the website are designed in Photoshop using the template supplied in the template folder, ‘link&type_templ.psd’. Then they should be uploaded to the site as a standard image (click ‘New Image’ not ‘New Subsection’). The only difference being that the web address is entered the link text box in the Edit section. Type the full website address, for example ‘http://www.example.com’. To make a link to an email account then enter ‘mailto:email@example.com’, (this is used in the contact section).
The correct template should always be used depending on the amount of lines the words take up.
Select ‘Typ 1451’ and ‘Medium’ Select typesize 26 px and leading 28 px
Making Links Active on CMS
Add link in here. For external website link add: http://www.example.com For email link add: mailto:firstname.lastname@example.org
Website / Making Open & Close Arrows
Making Open & Close Arrows There is a template supplied in the template folder called ‘open&close_arrow_ templ.psd’ If the arrows are for a new section then first pick a websafe colour (see Colour section). To make the arrow shape create a new layer then select Paths, there are arrow templates for left and right. Click on the path template you would like and then select ‘Load Path as a Selection’. Then use the paint bucket to colour this selection and save for web. Upload Then upload them by selecting ‘New Image’ and uploading the arrow image as normal. Then select ‘Yes’ in the ‘Close Section’ option to make the arrows open and close the section. Then move the arrows to there correct position at the beginning (just beneath the opening logo animation .gif file) and at the end of the section.
Making Open / Close Arrows
Select a path Select ‘Load path as a Selection’ Then paint the selection with the paint bucket tool.
Selecting Open / Close Section Function
Select ‘Yes’ in the ‘Close Section’ option. This will make the item close the section once clicked
Credits & Support
Website and identity by Mind Design. For any queries please contact Mind Design. Telephone: +44 (0)20 7254 2114 www.minddesign.co.uk