Design for Print. OUGD504.

I Am Dora, Part 1.
Claire Huss

I love the way that this publication is put together. At first the many pages look ordered when all aligned, and even when the pages are turned around the paper fastener they seem to make sense, but when all taken apart they can become completely separate and individual. I think that something like this would work well for my info pack, especially the process and finishing section where I think he pages or sections would need to be able to come apart and taken away from the whole publication if it is needed for reference. It would be much easier for the reader to be able to take just one or two cards or pages along with them, rather than having to take the full publication.

This got me to thinking about different ways that I can fasten paper or different stocks, and so I looked further into other ways of doing this. 

The first is the same as used in the publication above, which would work well for a smaller amount of paper and thin stocks, although these aren't very strong, they give the option for the pages to move around but still stay in the correct order. The second is a more secure way of fastening paper, but also gives the option to open and close it easily to take pages out of the publication. However, this does not give the option for the pages to move around in a circle like the first option, this type of clip would let the reader view the publication as a book from left to right, or from the top.

 

Both bulldog clips and paper clips would work well to secure paper in place, but neither keep the pages in order or in a specific place too well. Also, the paper clips easily bend out of shape and cannot hold many pages together at all, although this would work if i wanted to  just secure one thing to my publication that doesn't need to have a specific location.

Content

For this info pack, I think it would be interesting to have the information in different sections for different parts to do with design for print. This would make it much easier for the reader to access the information they need, but it also needs to be able to be all together in one pack or publication so that the information is all in one place.

What is needed in this pack or publication to inform and educate new students to design for print, and what do i need to communicate?

Processes/Finishing

Different Processes to do with print/design for print.

• Screen Print
• Laser cut
• Lino cut
• Foiling/flocking
• Mono print
• Embossing/ debossing
• Letterpress

Colour

Different colour modes and what works best for what

• RGB
• CMYK
• Spot Colour

- Explain for each of these what they are and used for and what works best. Explain how each colour mode works (e.g. additive, subtractive, pantone colour systems)

Stock

Explain what stock means and give examples

• Paper, and the different thicknesses (gsm)
• Wood
• Plastic etc.

- For each of these, give examples of what kind of processes would work best for these kinds of stocks.

I also have to explain how you need to consider stock when designing, and consider the design when choosing stock - always keep it in mind.

The process and finishing section will most likely be the largest section of my publication, with the stock and colour sections being smaller. I want to be able to include examples of everything I write to the best that I can, for example try and use as many processes as I can within the publication so that the reader will know exactly what to expect when doing these processes. However with this, I have to be careful not to make it too crowded or use anything that isn't needed. I want this info pack to be streamline and easily accessible to the reader, and so I can't include anything that isn't needed or will clutter the piece.

Creative Suite Session2.

Photoshop
every image that you work on in photoshop has a colour mode but RGB and CMYK are the most common. The default mode for a photoshop image is always RGB. 
The RGB colour mode has many more colour options than CMYK, and so when converting between RGB and CMYK, some of the colours may be changed to the next closest colour.

 On an RGB colour photograph, you can use the gamut warning on the view menu to show which colours lie outside the CMYK colour range. 

The saturation and brightness of an image has a lot to do with the colours being outside the CMYK colour range, and so adjusting these can quickly fix the image. 

Selecting proof colours in view, this lets you work in RGB mode, but shows you how the image will look when you convert to CMYK colour, and so this will show you exactly how the image will look when it is printed. 

To pick a colour and add it to swatches in photoshop you have to double click on the foreground colour and choose the colour, then add to swatches. The box with the exclamation mark above it shows that the colour chosen is not within the CMYK colour range and so by selecting on that colour it will choose the colour closest to the one you have selected.

To use spot colours in photoshop we need to be able to show the specific pantone code within the image

Creating a duo tone image
The original image has to be greyscale, then from the mode menu, choose duo tone.

 

By using duo tone we can choose spot colours for the image, up to 4, and also change the curves to adjust the colours. 

 

 

 

Another way to use spot colours in photoshop is to use channels in the sidebar, and with these you can choose a new spot channel where the colour can be chosen and then shapes drawn over the image or text.

With the channels you can also select an area and then apply a spot channel over the top of that and so only that area will be coloured.
The solidity of the spot channel affects the transparency of the colour, although this only really changes its appearance in photoshop.

Web Design Session2. OUGD504.

Navigation should always be kept consistent and visible on the page. For example, if navigation is at the bottom of the screen, on a smaller screen size the navigation would not be visible. 
Web Scamps - Simplistic drawings of the layout of a page, like a thumbnail of the page showing where everything could go and the variations of the layout that could occur. 
Wire Frame - All the measurements for each of the elements of the website, making it much easier to 
Creating a layout
1024x768 pixels - this ratio will work on 94% of devices available at the moment.

Using Stylesheet CSS
The first thing to create for this website will be the container in which all of the components of the website will be contained. 

After the closed bracket after body, press return twice to create a space between the body and a new piece of code. To create the div (container) use  #container and open up a curly bracket {. This will bring up a drop down bar of options. To specify the width choose width on the drop down bar and then you need to specify the measurement in this case it is 1024px. To then close this setting use a semi colon, and the do the same thing again to specify the height. 

To then close this div, use a closing surly bracket.

To then save this onto the website, go into the source code tab at the top of the screen and after body, open an angular bracket and write <div id and then you can choose the correct div from the drop down menu, in this case "container". Then to close this div write </div> 

To change the colour of the background of this container, after the height, find background on the drop down menu and then choose colour from the options. This will automatically choose the correct colour code and change the colour of the background. Then make sure to end the action using a semi colon. 

To align this container int he centre of the page we have to use percentages, and to always get it to align in the centre of any screen size we have to align it left by 50%, but then also move it back to the left by half of the size of the container. 
To do this you have to take away half of the full length of the container, so in this case it is 512px. This means that the container will be aligned 50% left, minus 512px, and so will always be aligned in the centre.

To create a navigatoin bar on the left hand side of the page, create a new div called "#nav" and set the width, height, background and position as before, and after position choose float:left so that the navigation bar is set on the left of the container. 

Then add this into the html as before by using <div id="nav"> and close the div with </div> and then you have a navigation bar. 

To insert a logo from illustrator you first need to save it properly, by going to save for web and saving it as a png - 24.

To insert the logo into css, choose the width, height, position and float:left as needed and to insert the image, choose background image and choose the image from the file on the computer.

To make things easier to see on HTML, use tabs to line up each open and close of divs to make it easier to see which is for which.

To create a rollover button for the side menu, you first need to create the space for the button within the container, and so set up height, width, position and float as needed. However to create a rollover button you need to use a set up in HTML rather than CSS. 

After inserting the div into HTML, go to insert, image objects and then rollover image, where you can choose the two images needed to change as the mouse rolls over the button. 
This then creates the code needed for a rollover button.

Creative Suite Session 1

Illustrator
Designing for the commercial print process and how to work with colour for this process.

Two main colour models:
CMYK - Subtractive, also called Process Colour
RGB - Additive

CMYK - as inks are printed, they over print and can create many different colours. K(black) is called the 'Key'.  When there is 100% of CMY, we get K. Black is called the 'key' colour because it pulls everything together after C, M and Y have been printed it keys the image together.

In Illustrator. to switch between the fill or stroke, just use 'x'.
Swatch Palette has pre set swatched that you can use as fill or stroke, and these mean that you consistently get the same colour every time you use it.