Graphics Continued

For my Moods page I did not know which images I wanted to use, and due to the fact that I had created all of my images on my website I wanted to create these as well.

I first thought about using 2 images that I had found from the internet, the reason that I had chosen these was because I wanted to show how different colours affected the moods of an image or picture.

Both of these images would have been good for this page because both of these are showing how colours affect the moods, however I found that I wanted to use something a bit different.

I therefore decided to use my own images that I had taken myself previously.

This is an image of Ayres Rock that I had taken about 5 years ago, I chose this image because of the heat that the place has and what I want to achieve at the end.

I have changed the shadows and highlights to blue and I then placed a blue object over the top and I decreased the opacity to 25%, this is to give the illusion that the hot place is actually cold.

I then thought that I would have to do another image however I would do the opposite and use an image that is cold and make it hot.

This is a photo of a field that I had taken when it snowed heavily. I chose this image because of how cold snow is, and I want to change the image to achieve the end result.

I have changed the highlights and the shadows of the image on the left to yellow/red, I also placed a yellow object over the top and then changed the opacity to 25%.

Both of these images I have chosen for a specific reason as I have said before, but the main reason was because I wanted to show how having different colours affect the feeling and the moods of the images, therefore having a very hot place look cold and a very cold place look hot was my goal.

Heading Changes

Due to the feedback that I had from my pitch, I had found that they liked my heading however to make it look better I needed to get rid of the shadow that was behind the colours, the reason for this was so the colours would flow easier and better and they would not be cut off by the black of the shadow.

The original heading was:

And the one that I changed to was:

I had place a background colour to this so it would be able to fit in with the background colour of my page. Also due to the colours being gradient I had to save it as a Jpeg, and unfortunately Jpeg's do not allow for the background to be transparent therefore I had to place the background in, in order for the heading to match the background of the page.

My Mock Ups for Pitch

Here are all of the mock ups that I had created for my pitch. Each of these have been made different to show the different variables that I could have.

At first I used my first idea for the buttons and then I changed them to the second idea. This is where I found out that my button size was too big and therefore I had to change the size of them to fit my site.

I then decided to add a paper like background because that would then make the aspects of the page stand out as well as create a frame of which the content will sit.

This was my final idea, and the feedback that I got from it wasn't very good, this is because the buttons were too big, also I got told that there are no websites with the buttons on both sides of the page, the text in the middle should be left aligned, the heading should not have a shadow.

I took all of this in and then created my final page:

Here I have taken into account everything that was said about my mock-ups, and I have changed the elements that needed changing and I have got a good website that works well for what I wanted.

My chosen Wireframes

For my pitch I had to create mock ups and wireframes of what my page would look like.

I had created 5 wireframes for my pitch and this is the one I chose to use to then create my mock ups.

The feedback that I got for my wireframes use that it looked like I had thought about where I wanted to place things in detail, however the wireframe that I had chosen was a bad decision and that I really should have chosen a different one, therefore when I looked back to the other wireframes I then chose this one:

However, I did not use 2 logos because I felt it would have been too much for the size of the page that I had created.

My graphics

All of the graphics that I have chosen for my website I will be creating because then they would be all of my own original designs.

My ideas for my graphics were based on each page this was so I could demonstrate what I will be trying to explain.

The first graphic that I created was the colour wheel for my second page, I did this by using the same technique as I did with my logo. My idea for the colour wheel page was that when you either click on or rollover the words down the side of the wheel it would change to that word, for example if you clicked on or rolled over the word Primary, the primary colours would show up and an explanation would appear underneath.

Here is an example of one of the colours wheels that I had to create:

This image is the Analogous image that I will use when the viewer clicks on or rolls over the ord Analogous, as you can see I have decreased the opacity of the colours that I do not ant to use and then that leaves the colours that will demonstrate that particular word.

The next graphic that I created was for my website was for the Prism page, and for this page I had decided that I would like to use more then one graphic to explain the theory of the prism.

This graphic shows how the white light goes into the prism and comes out the other side as the 6 colours. The way I created this graphic is by first using the star tool and using the downwards arrow button to decrease the amount of points there were until I had a triangle I then used the line to to give the illusion of a prism, I then kept the line tool to create the lines of colour, and all I did was change the lines to the colours that I wanted.



This is the graphic that I used to expain the different frequencies that each of the colours have including infer-red and ultra-violet.

The way I created this graphic was to first make a rectangle using the rectangle tool, and then using the gradient tool. Using the gradient palette I was able to change the colours and add points so it looked like a colour spectrum, I then added the wavey line by first putting a straight line in and then adding points and moving them and then changing each of the points to make them rounded.

This graphic is the last one I created for my prism page.

Here I have created a image explaining how we see colours in everyday life. This graphic was very simple to create, I first drew the sun using the circle tool I then drew the leaf using the circle tool and then adding extra points and then changing them to make the shape, lastly I used the line tool to make the light.

The next couple of graphics that I created was for the RGB & CMYK page, these were to explain about how the different sets of colours were additive and subtractive.

These 2 images I created using 3 circles, however because of the nature of these I have to use the 'Divide objects below' option this was so I could show each of the colours and demonstrate how these images are supposed to look.

This is the last graphic that I had created for the last page of my website.

This graphic is supposed to be easy to understand and using the text that will be next to it in the website everything will fit together nicely.
This graphic was very easy to create all I had to do was create 3 indentical squares that will placed at each corner and then make the lines that connects them together.

Each of these graphics I had created so that the explanations that will be on my website will make sense and will be easy to understand.

Lastly, each of these graphics I had created first for my pitch so see what everyone thought of them and whether I should use them or not. Once I had shown them in my pitch I had found that everyone understood them easily and that I could use them in my website to help explain what I wanted to explain on each of my pages.

The Buttons

My buttons I had a few ideas at first however I came up with what I wanted to use, and that I had came up with for my pitch.

My first idea was to use the triangles from a colour wheel, and then using the primary and secondary colours from that.

My next idea was to use the colour wheel itself, as I have created here.

I presented each of these in my pitch and the feedback that I got was that using my second idea would make the website look tacky and it would have been too much use of colour, and with my first idea I the feedback was they were too big, also no other website has buttons that appear on either side of the web page, therefore what I had to do was shrink the size and then maybe combine the ideas so that I would then have my buttons.

Here is my final button design, I have using the triangle section from the colour wheel and I have used the extra section from idea 2, I used the extra section because I felt that each of the words wouldn't have fitted in the triangles properly and then making my buttons look non-professional.

I then thought that I would like to create a rollover image so that the buttons moved slightly when the viewer rolled the mouse over them, also I would then have the rollover image to stay when the viewer clicked on the button, this is so they are able to see which page they are on.

As you can see here I have moved the text along and I have increased the length of the triangle.

With the size I had to use another button to determine how long I was going to make the triangle, therefore I had to chose the button with the longest word, which was principles, this was so that I knew that every button and text would fit when the rollover image would appear.

My logo design

I had a few ideas at which I have sketched into my sketchbook, I then came up with 2 final ideas.
One was to used a spectrum and have it in a circle, I had first tried this idea as it was my original idea, and I thought that if I could make it somehow then it would look really good, however when I tried to create it in both Photoshop and Illustrator I found it more difficult then I first orginally thought.

I therefore decided to try and create my other final idea, and I had found that after a few attempts at it I was able to create it.

I created it in Illustrator using 3 circles, the line tool and the divide path action.

I first made the three circles and then I placed them inside each other in the correct places, I then drew the lines that will in the end split the circles up so I can make each of the sections of the circles different colours and shades.
To split the circles I had to select one of the lines and then go to Object/Path/Divide objects below, I then repeated that same proces until I had done that to all of the lines. Then I selected the colours I wanted for the outside then I selected a whiter version of the colours for the inside colours, and for the middle I just selected white and to make the logo personal I placed in one of my own initials in the middle.

I chose this design because I felt it was the best design for my topic, also having the colours as they are makes the viewer look into the middle where the text is.

Website Research

I have had a look through other websites that are of a similar nature to what I am trying to create. The one that caught my eye, that site is:
http://www.worqx.com/color/index.htm
I liked this site because it was simple and easily accessible, however there are a few things that I would change, for example I would probably have a footer at the bottom or something to allow the user to get back to the top quicker and easier.
Also I would have put in less text, that is because I find personally that too much text is quite daunting to see when you are trying to find something out.

Another website I found was:
http://www.colormatters.com
This website is good at first, however if you don't know where to look for a specific item or topic then it would be quite hard to navigate around. I found that once I have gone through a few links I cannot remember where I have been, therefore to improve this site it would have been good if they had put in some sort of 'bread crumbs' (where it shows you how you got to where you are).

Using these websites as a basis for mine I will hopefully be able to create my website so that it is accessible for everyone and it is easy to navigate around.