Design for Print// Info Pack

‘Chapters’ might include, colour conventions, inks, stock, format and others.

You will need to evidence research into:

• Production Methods.
• Stock considerations
• Colour systems
• Commercial costings

Typography Workshop

Typography Task

Goudy Old Style

http://www.behance.net/gallery/Typography/1101777

Software Workshop - Design for Web

Initial Reactions

ollymoss.com  

black
boring
negative space
plain
empty
produced using indexibit

The content of the website should make it look good, not the design.

www.malikafavre.com

busy
colourful
flashing
garish
produced using cargo

www.360langstrasse.sf.tv/page

urban
german

http://noble-design.co.uk/

vector
japan

Questions to ask yourself.

What is the purpose of the website?
Who is the target audience?
What do the target audience need?

http://cat-bounce.com/

To entertain
Cat lovers
To be entertained

Ask the target audience what they expect/ want to see.

Navigation, type & image = website

Limitations 

Size - resolution of images, some screens eg. retina display is 227dpi whereas some screens are still 72dpi.  Sizes of screens range from 800 x 600 to 1680 x 1050.

Typeface - most typefaces installed on all computers eg Arial, helvetica, georgia, verdana are all free to use until it comes to using them commercially.  To avoid paying for these fonts then there are variations of fonts available to download online from websites like dafont.  

Colour - Must use websafe colours when designing for web, available in photoshop colour picker, tick the web colours only box, select a colour and it gives you a code.

HTML - Hyper text markup language

CSS - Cascading style sheets

WYSIWYG - What you see is what you get

URL - Uniform Resource Locator

FTP - File Transfer Protocol

CMS - Content Management System

Dimensions

1024 x 768

Web Design Workshop

5 reasons for websites

Promotion
Information
Persuasion
Contact
Entertainment

The Audience is never everyone, but for a target audience.

Usability, Aesthetics and functionality

What to have on your website?

Landing Page?  Why what is the point?

Homepage

Navigation Bar
Name
Job Title

Contact Page or a Footer

Name
Email Address
Phone No.
Company/ Address for where you work
Link to Blog/Tumblr/Twitter

About

CV
Portfolio

Shop/Link to Shop

Blog

Common Crit Feedback in the Class

Clean Layout but slightly generic
Navigation
Redundant Features 
KISS - Keep it simple stupid
Grids

Crit Feedback I received:

• Add more contact details
• Like use of shapes but maybe just stick to one
• Name in top corner is good as first thing seen also large scale
• Good usability
• Simple structure
• Maybe too simple?
• Prefer second design to first
• Hate rounded corner boxes
• Composition is cool on bottom, top one is slightly generic
• Wouldn't need a logo on the right, use it as your header
• Large images will show off your work well!  They may need project enough below.
• Contact info should go before shop
• Clear distinct style, sells sort of designer that you are
• Different to others
• On top design maybe rethink all content, is logo neeeded?  More space for image of work
• Navigation seems simple, imagery is well laid out
• Logo should be placed at the top
• Prefer top, Logo should be up top with name, name is logo?

Good & Bad Examples of Websites

10 Examples of Good Website Design

http://thefieldtrip.com.au

The examples of good website design that I have found all share common appearances.  They often have simple neutral colours used as they're not garish and they're easy on the eye and the text stands out well against it.  Also most of them have the navigation bar along the top for easy access.

http://www.size.co.uk/search/adidas+jeremy+scott/latest/?cm_re=home-_-slider-3-_-jeremy-scott-aw12

http://www.caavadesign.com

http://noble-design.co.uk

Bad Examples of Website Design 

The examples of bad website design I have collected mostly have garish colours used that aren't pleasant to look at and/or there is far too much text to quite understand what is going on on the page.

http://www.spacetribe.com

http://www.scottish-places.info/towns/moretpix357.html

http://www.dreadlockssite.com

http://www.kitecalendar.co.uk

Software Workshop

Types of Book Binding

Saddle Stitching (multiple of 4 pages)
Perfect Binding (multiple of 2 pages)
Ring Binding

Reader Spreads - shows in InDesign what the book will look like.

Printer Spreads - how the pages will be arranged on the sheets of paper which are then put together and made into a booklet.

L   R

8    1

2    7

6    3

4    5

The printer spreads should always add up to 1 more than the total

 number of pages ^ eg. they all add up to 9.

Page Numbering

Double click the master page and then create a text box, select type, insert special character, markers, insert current page number 

To Print:

Select, file, 'print booklet'

Select '2 up saddle stich' then "print settings'

GENERAL - Always select 'print blank pages' 

SETUP - Change orientation to landscape, if you have area for bleed then you cannot print 2 A4s on A3 it would have to be A2 to leave room for bleed and print marks.

To print double sided:

Export pages as PDF and then upload to ISSUU, to create a digital way of viewing the booklet online.

Here is an example from the ISSUU website:

 

Open publication - Free publishing - More fashion


Helpful Illustrator Point

How to cut something out (not using a clipping mask) but a compound path.

Typography Workshop

Goudy Old Style  http://www.behance.net/gallery/Goudy-Old-Style-Type-Spec-Book/417548

Print Information - Amber Smith

Different Types of Printing

Lithography - etched aluminium plates wrapped around a cylinder transfer ink to an 'offset' rubber blanket roller.

Web Offset - printed on a roll not paper.

Rotogravure - copper plates (with mirror image) transfer ink directly to print surface, usually on rolls.  Durable plates, good for longer print runs, high volume, e.g. newspapers.

Flexography - a positive mirror image rubber polymere plate, on a cylinder, transfers 'sticky' ink directly to print surface - usually roll feed.  Sweet wrappers etc, gift bags.

Digital Printing - ideally suited to short run or specials on a range of print media from paper to metal.

Pad Printing - a printing process that can transfer a 2D image onto a 3D object

Colour Processes

Subtractive Colour - more colours layed on top of each other colour deeper

Additive Colour - exact reverse of above, more colours mixed together gets lighter

Colour Systems 

Technical Essential knowledge for control of your work.

7 things you need to know about Print

Colour Models - CMYK, RGB, Hexachrome, Spot Colour, PMS Pantone Matching System

Formats - Standard ISO Paper sizes, A & SRA sizes, Imperial (North America) vs Metric ( Rest of the World), Tabloid (compact) Broadsheets Berliner, Envelope 'C' Sizes

Stock - Weights (gsm), Finish - gloss/silk/matt/coated/uncoated, Laid or Wove, Boards, Carton, many more variations, plastics and acetates

Artwork - Document set up, file formats & fonts, spellcheck,  colour spec, printer marks, pre-flight check, mock-ups, proof, sign off (really important)

Print Processes - Lithographic, Gravure, Screen-print, flexography, pad-printing, six colour, laminate gloss/matt, foil blocking, embossing/debossing

Finishing - Binding, Folding & Creasing, Die Stamping/drilling 

Costs - Get a quote early on, before you start the job in earnest if possible get identical spec for 3 print estimators to work to, learn roughly what things cost (unit cost), understand viable minimum quantities, extras/ authors corrections, delivery.


My Examples of different types of stock:

Software Workshop// InDesign

1) Missing image link when you open doc

2)  There hasn't been any area left to allow bleed

3)  There are unused swatch colours in the swatch palette

4)  Bird 3 is RGB

5)  Resolution of Bird 5 is only 72dpi, we would need to

 contact the client to ask for a higher quality image.

6)  An image has been scaled down by 15.8%, edit in PS, press alt & double click image, go to doc size and ensure 'resample' is ticked.  Width/Height - 15.8%, save, close, go back to ID and it should be updated.

7)  A colour swatch is RGB, the blue background.

8)  The link on the back has all colour swatches selected, need to untick, including registration marks and then select black.

PDF acceptable for use to send for commercial print [press quality].  This is still half the size of the inDesign file and you don't have to worry about texts etc.

Packaging Nets

The net below was originally an incense packet:

This net was originally from a cup a soup box:

This was originally the net for a box of icing sugar:

This was originally a box for Pukka tea bags:

The final printed and mocked up designs:

InDesign Software Workshop

Master Pages

If you want to have the same image/text on every page, create the image/text on the master page then double click on other pages in the page menu to view the text/image on every page.

You can have a different master page for every page for example having different chapters in books.

Application of Colour

When you apply colour in InDesign, you must fill it in a frame whether it be a pre-set shape or a pen-drawn vector shape.  All colour swatches created in inDesign can link up with the Pantone System, when creating a new swatch change the colour mode from CMYK to the type of Stock/Pantone you desire.

There is also a 'new colour tint' menu.  Printing using tints can reduce price as the same ink is used just less of it.

Preparing images for inDesign, remember:

Photoshop

1)  CMYK or Greyscale

2)  300 dpi

3)  Actual Size

4)  Save file as a PSD or a TIFF (PSD - if there is any transparency)

Illusttrator

1)  CMYK

2)  Save file as AI or Copy & Paste

If you paste or place an image into inDesign the spot colours are automatically added to your swatch list.

If you have a grayscale tiff file on inDesign, if you select the image and then select another colour swatch, it acts as a monotone and changes to that colour.  

If you need to edit an image while on illustrator, select image, right click then click edit with or alt and double click.  If you are working with files with transparency you must save it as a PSD file and place it into inDesign.

You must always delete unused swatch colours from the palette.