Web Studio Session Two

Web Studio Session Two


So at first we had to make a list of what content you wanted on your website and then categorise the pages.

Then we had to make a site map showing navigation from pages and what pages would be linked to what, this was my first one I created and then I decided once looking at it that I wanted to categorise it better.

I think that due to the long time spent pondering over it I realised that Alton Towers need its own page due to its vast amount of content on that subject which necessarily need to be together.

Then we had to create our homepages and what we want them to look like at the moment. I created two, although these are very quick designs as I haven't really thought about the layout due to struggling with the content.

Then we had to go round and give people feedback on peoples websites plans, here is my feedback I received.

• I think the second layout is more fitting to your subject matter. What else is shown when you scroll down?
• Think that both designs are practical but, could be seen to be cliche. I would suggest trying something a little different in terms of a grid.
• Top design does not really fill the potential of the concept - too commercial. The bottom design has much more potential for interaction.
• The top website seems very neat & accessible. I like the bottom design best if you could possibly make that line scroll down the homepage.
• Good concept to second design, however could incorporate some of the structure form the first design. What is this site for? Theme is a bit unclear?

Creative Session Two

Creative Session Two
Photoshop

Every image you work on in photoshop will have a mode you find this by going to image > mode.
Also if you make a new photoshop document you can set the colour mode here if needs to be done before. 

If you take an image from a camera or scan something in the file mode is an RGB.
The default mode in photoshop is RGB, and we can see this by looking along the title bar of the image.

Now to convert the file mode to CMYK you need to:

Go to: image > mode and select CMYK although if you do this you will only have a small selection of options when you come to filter it as some of them are unavaliable.

Many colours produceable with RGB sit outside the CMYK colour gamut. So therefore if you switch to CMYK from RGB the colours will change. As this is impossible to print due to the bright colours be able to be used on the screen.

So we have uploaded a RGB photo to photoshop:

We now can see where there is a gamut warning by going to view. Here is what it looks like when the warning is set to show.

Now you can change so you have no gamut warning by going to hue/saturation and then changing the levels to the appropriate levels so there is no grey warning.

You can also just change it by changing the mode back to CMYK so it changes it for you.

But also you can you can work in RGB but the preview you are seeing on screen is how it will look when you work in CMYK, but you have all the functions as you are working in RGB. Nothing will change to the image, just the title bar changing from just saying RGB/8 to RGB/8/CMYK.

This is a recommended work flow. And should be the last thing you should do is to convert it to CMYK before to take it to your layout software.

To delete your swatches on photoshop you have to do them individually by hoovering over the swatch and holding alt down scissors will appear and then you click and it will delete.

Then you need to save swatches so you go to swatches menu and click save swatches then save the swatch wherever you want then you can reset the swatches and it will give you the standard swatches.

Then we can load swatches by finding our palette in the saved item. By going on to the swatches menu.

The colour picker:

You need to go to this icon And then click on the colour foreground palette. You need to keep an eye on the icons at the side. The exclamation mark appears this means its not in the CMYK range, if you click it it gives you the nearest colour available. 

Once you find your colour you can then add to swatches.

Spot Colours:

This makes the print job cheaper and we can be very specific colours if you give them the code and it allows you to use non CMYK colours.

You can also click colour libraries in the colour picker and this brings all the pantone swatches up.

You can then type in your colour is you know the colour and then this colour has loaded in the foreground colour.

 

This colour will be now be printed with CMYK due to it been in a CMYK mode. Photoshop will only work with one image. SO there is no way to print this spot colour within the CMYK image. We can't use spot colours in this way, we have to work with specific techniques so they will maintain their attributes for spot colours.

If we are using spot colours the printer needs to know the correct colour and therefore this is why we have to work in this way so there is a reference to the code of the orange 165:

We are now working with a grey scale image this means when it is printed it is just going to be black ink. To work with spot colours you have to work with a duotone image.

You firstly have to make your image greyscale to be able to work with it in duotone which can both be found in image > mode.

Then this window will come up:

You can then change the colour of the monotone by clicking on the ink and then you can change the one colour print. You can therefore change this by clicking on the colour library and then chose a spot colour.

Then I can change it to the duotone option which will allow the second ink colour to be change and therefore you can see the difference in the sepia tone added to the black ink.

You can change the amounts of ink added which can take one to over power the other by clicking on the diagonal line in the first box as follows:

You can just adjust this by moving the lines around creating different effects as inverting & negative prints.

You can constantly change them and always make adjustments to the inks & to the curves.

You have to save this as a photoshop file, so we can see the application of spot colours will work when it goes to print.

Now there is a second way you can also use a spot colour:

Is by using channels which can be found in the layers panel.

Channels are always greyscale images and then when you highlight together they will appear in full colour. Then if you change to CMYK then you will see C, M, Y & K channel. If you highlight only the C & Y channel you will see how the colours mix then you can see how it adds up to make the whole channel.

So we are now going to see how the application of images add to spot colours.

Because it is greyscale the image we are using there is just one channel due to it been one ink to print the image.

So now we can click on the menu on channel and chose new spot channel and then a new channel will appear and a box will appear like below:

Then we can chose a spot colour from the colour library like before, and then apply it to the channel.

So now if you click the paint brush and then you can draw and lay over the colour onto the top channel to blend the two colours. We are simulating print black in then printing on top of that the spot colour, the spot colour is transparent. This is because the channel is grey scale so therefore have to work in one tone.

You can see how this is working by switching off the grey channel.

Then if you chose a tone of grey it will allow you to work with a tint of the chosen colour.

So you can also use the magic wand tool to make a selection then if you use the new spot option in channel and the colour you chose to be your spot channel you can apply to the whole selected area.

To apply a spot varnish this way if sending it to the printers you need to tell them this by typing into the channel spot varnish and also making sure its a different channel thats not been used anywhere else.

You can also change the solidity of it so the spot colour is not transparent. By changing the percentage on the spot channel options.

If you want to screen print this would be a good file to use. As you can only see black & white when click on separate channels but together adds an creates colour.

When saving you need to make sure that you have the spot colour option ticked:

You can always consolidate the number of inks you have to print before it goes off to print.

Navigation

Navigation

So the first task what to think of some common & uncommon navigation ways within a website in groups.


Here are the ideas we came up with:

At first we was very confused as to what would be uncommon as when we have looked at the websites for the brief we have obviously been looking at highly design websites and not the typical type, so what hard to differentiate between common & uncommon.



Below are some phrases I didnt know about and therefore thought I would research more into them:

Breadcrumbs: Breadcrumbs typically appear horizontally across the top of a web page, often below title bars or headers. They provide links back to each previous page the user navigated through to get to the current page or—in hierarchical site structures—the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting or entry point. A greater-than sign (>) often serves as hierarchy separator, although designers may use other glyphs (such as » or ›), as well as various graphical treatments.


A typical breadcrumb looks like these below:

Site Map: A site map is a visual or textually organized model of a Web site's content that allows the users to navigate through the site to find the information they are looking for, just as a traditional geographical map helps people find places they are looking for in the real world. A site map is a kind of interactive table of contents, in which each listed item links directly to its counterpart sections of the Website. Typically, site maps are organized hierarchically, breaking down the Web site's information into increasingly specific subject areas. There are many types of different site maps.



Inline linking: In-line linking refers to a link within a web page which causes content from another website to be automatically loaded onto the web page. To the user, the content from the other website appears to be part of the web page. 

After this we had to make our own navigation through our pages we want to have linking all the pages we would be liked link together by arrows. Here is my original grid:

But when I got home I wanted to make it more clearer and start adding in parts rather than my initial thought as I didn't really know what I wanted as my headers as we was a session behind, although I do believe I will have a more of an idea when we have the next session which then I will do another navigation map to finalise my idea.

I think definitely shows I have more of a focused idea now and making it neater and bolder & bigger has made it a lot clearer to myself to work with.