OUGD505: Type Session 2

The first part of the session focussed on Kerning. We were asked to type out our first name and alter the kerning to ensure that the type had the correct kerning. 

We identified the biggest space between each letter, this was kept un-altered and the spaces between other letters was changed by using the kerning tool.

Breaking sentences:

Graham spoke about Graphic Designers and how sentences are split onto two lines. He said that designers would usually break the sentence so that, when it is centred, it looks 'good'. 

Type Hierarchy

Working with a large amount of text:

Put the text on an A4 page....

OUGD504: Design Production - Design for Print Creative Suite Session 3

In this session we worked with inDesign. It is important for us to use inDesign to pull together all of our text and image files.

• The bleed is for trimming. Anything which is going to be printed will always be printed on paper larger than the intended format which will allow for successful trimming. 
• The Slug area is used for printers marks, registration marks and colour bars. 
• Facing pages with present our work in two pages which are side by side - booklet format
• Primary text frame - If the majority of the page will be text it will automatically add a text frame to each page. Text heavy documents
• Starting page number - If we do not want the first page of our document to be the first page of the publication

To apply colour we must add it to a shape. It is the same way as adding colour on Illustrator.

Using the swatch palette it is very easy to make global changes to a colour which has been used on the page. 

Adding swatches and changing the tint several times..

If we altered the 100% swatch it would alter all of the other shapes because it is global.


Adding spot colours..

New swatch and choose the different pantone books which are available.

We can type in the pantone number and this will add the pantone swatch to the swatch bar.

Adding the pantone swatch to the shapes. 

Previewing an image will show us the greyscale image. 

Any spot colours which we have used on Photoshop will be added to the swatch palette in indesign. 

Spot colours will also be added..

Same for illustrator files..

Photoshop:

• Resolution 300dpi - print resolution
• Actual size - images need to be prepared in Photoshop so they are the size that they are going to be in the inDesign document
• CMYK or SPOT
• TIFF or PSD

PSD files have layers which allow it to be edited. TIFF files do not support transparency.

Illustrator:

• Dont have to consider resolution
• CMYK and SPOT
• .AI
• COPY and PASTE

How to get from an inDesign document to the different plates with separate colours.

C 

M

Y

K 

& 1 SPOT COLOUR

5 COLOURS OVERALL

Indesign can separate the image into the different inks

This will show us how the inks will be separated.

There will be a slight change to the document - images will increase in quality

Viewing the different colours will allow us to see how each of the individual inks will be applied

Indesign will separate each of the colours and will allow the printer to print out a negative for each colour which we are using. 

We need to use half tones to print photographic images. 

Over printing or Knocking out

What happens during the separation process

By viewing the Cyan shape it will knock out the colour underneath where it overlaps.

And Visa Versa

Default to black is over printing. Black would cancel out other inks.

The black would obliterate a yellow

Ink can either knock out or over print

Window - Output - Attributes

Overprint fill will allow us to see what the ink would look like if they mix

We can only see this in Overprint Preview

OUGD504: Design Production - Design for Web Workshop 3

Creating our website:

At the start of the session we were asked to make the three other buttons for our website. We were told that they had to be a specific size and saved in a specific way.

Examples...

How to import these buttons to dream waver

adding another div id

selecting a roll over button

we choose the web buttons in this window

the button in place

How we link pages to others

Editing the code to link to the pages

 To link the pages we simply changed the name of the text inside the body and saved each page separately.

After we had been shown how to do this we were asked to link the other pages.

Diagram detailing the columns we are adding to the website

The box model..

Take the width that is available, add up all  of the different factors which we are planning to have, then minus it from the width.

20 px padding is the usual

Diagram to explain the box method

adding the code for the two columns

adding text before copy has been completed. we use Lorem Ipsum

formatting our type

<p> = paragraph break

<br> = line break

 here we can see the columns working

changing the font size...

in stylesheet after the font family..

font size:14px;

changing the colour

color:COLOURGOESHERE;

heading tags..

h1 in stylesheet

add it to html.

preview in safari.

We can have as many heading tags as we want

Adding an image to our website..

To upload video use Vimeo - embed

For audio use sound cloud and embed

Advantages -

• does not use our bandwidth
• streams it, it does not need to buffer

 Other options to work with...

• Lightbox - image gallery