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.

Concepts. OUGD504

Concept

• a plan or intention
• an idea or invention to help sell or publicise a commodity
• Is received or conceived.

As a group we were asked to pick out 3 words from one vase, and one from another, and from these we came up with a concept to do with these words. Our group got given a bar to create a concept for, and the three words we were given were curtain, clock and court.
We had to think about many different aspects whilst coming up with our concept such as:

• Who is the audience?
• What is the purpose?
• Potential customers?
• Current customers?
• How can we push the concept as far as it can go?

For the word clock, we had many ideas that included time, time travel, and having a bar that looked back into different eras and decades that were interesting. We also looked into Salvador Dalis' melting clock paintings and thought about a bar that was quite abstract and post modern.

For the word court we thought about the regal court, and also a sports court and having a sports bar. But mainly we focused on the court of law and how we could bring those ideas into a bar. We also thought about the justice system and hit upon an interesting idea of the prison, and mainly focusing on the venue of the bar.

For the word curtain we thought a lot about the idea of theatre and performance and how the curtain is used in different performance situations. We thought about the idea of opening and closing curtains in performance, and also how curtains are used in tents such as circus tents.

After a lot of discussions over many different ideas, we landed upon the idea of a prison themed bar, but in a quite subtle way. The venue of the bar would be in a converted prison over three floors. We struggled a bit with the target audience of our bar, as it had to be located in Leeds we were unsure whether to target it at students, which are in abundance in leeds and so the market would be huge, however there is a lot of competition within leeds. For this reason we decided to target our concept at young professionals who have more money than students and are more likely to travel a little further out of the centre. 
From here we came up with the entire concept for the bar. We wanted the bar to be fairly classy and attract young professionals and so it needed to be slightly more high end than the cheaper student bars that you generally find in leeds city centre. The location of the bar was the most important factor, in an old converted prison, and so from here we thought about what the interior would look like, the kind of events/music/drinks would be here and what else we could do to push the concept.

 The main cell block of the prison was our focus, with a ground floor and two balconies above.
The ground floor would have the main large bar running down the middle and bar stools around the bar. This is also where the stance would be so that bands and live music can be performed at special events.
The first floor balcony would house the booths and main socialising  area for the customers. The booths would be in the cells around the first floor balcony.
The third floor balcony would be the vip area with booths that are able to be hired out for special events.

We were mainly inspired by a hotel in The Netherlands that is a converted prison. It has kept a lot of its main features and history, but had been teken into the modern era by the addition of lighting and furniture. This is what we wanted to achieve with our interior, and so we decided to keep the colour scheme quite neutral and modern with black and white, but also keeping some of the prisons original features such as exposed red brick walls and the metal of the bars and balconies.