editing the tables

After finishing the website and letting the client have a look at the webpage, the clients didn't like the tables proportions. they felt that the images of their designs were to small in comparison to the table. this was a fair point as their designs were very small on the table and although you could see the designs clearly if you clicked on them it is nice for people to be able to see the designs at a quick glance rather than having to click on each individual design.

to remedy this problem we each picked a category (these being: Christmas, Corporate, Birthday, Wedding, Easter, Halloween and christening). i decided to pick christenings. we had to then draw a design for the table and put the images that related to the category on the image. we also had to add another image that is related to the category, as i chose christenings i decided to pick candles and a mug as these are important parts of a christening. To get these images onto my design and turn them into watercolours i had to use "live-trace". this saves a lot of time and effort as it cuts the image out and saves the main bit of the image into black and white. this is very helpful and can have a nice effect.

we had to make sure that the images were better proportioned this time so we changed the design of the table. the old table design was of the table being looked at from a distance away. the new design has only the edges of the table so it gives the feel that it much more zoomed in and easier to see each image.

this is my table design without any objects. i think this is better than the previous design as the table is much bigger and draws in the attention much more. the two main christening objects are now at the top and in the corners. this is a better place for them as they don't draw all of the attention but they are still there and noticeable. the colour around the edge of the table is also nice as it clearly shows the edges of the table.





































this is one of my tables with 3 of the 5 images on it. i like the way they are organized onto the table. they all fit in nicely and are all a reasonable size so they are easy to see. they draw your attention to them as they stand out more than the candles and mugs as they are on a white background with the blue around them.


















this is my other table with the last two images on it. i like the way they are put on the table as they are pretty much the same size and together they draw the attention of the person viewing the table. the blue background makes the images stand out more because of the contrast of colours and although one of the designs is white it is still clearly visible on the table and easy to see.

problems we encountered

Like everything, we encountered problems. One of the main problems that was encountered wasn't with me but with Aarron. As he was doing all of the css related stuff for the website it was crucial that he could get it up and running. One of the main problems he had was that as there is: IE, Firefox, safari and chrome he had to get them all to work properly. This did prove a bit difficult for him.

The first problem I had wasn't a terrible problem but it did slow down my work process until i sorted it out. The problem was with the table drawing using Illustrator. The problem was that as i drew a line near another line that line would simply disappear. I managed to fix this as i realised that i hadn't taken off the white fill that was being put with the line. Once this was realised it made drawing the tables and the items on the tables much easier.

Perhaps, the biggest problem that we had was with the images. As there was a lot of them and they all had to be cut out, it was key that they were cut out quickly and well. However, some of these images weren't cut out well so a few of us had to go back and cut them out again. this was a time consuming process and took people away from other tasks that were in need of being completed. Another problem that we had with the images was that someone saved the images as a GIF file rather than a png. this seemed a problem at first but in a way helped us as it then gave us the idea of saving all of the images as JPEGS to so we could then see them as thumbnails and it would make it easier for people to select the image they needed much easier as they wouldn't have to open up photo-shop just to see the image.

A problem we did have that was quite serious was the access to the submissions folder on the college network. This was quite a problem when we were trying to sort out all of the images into folders and groups. There was no way for us to sort this either so we just had to struggle and make sure that nobody else was accessing the folder or it made things impossible. This was annoying and made work slow for a while as people were needing to access the submissions folder

working with the client

throughout the design and making of the website we stayed in contact with the client, we had to do this as it was essential that we listened to the clients wishes when it came to the design of the website. email was the easiest way for us to stay in contact as an email can be read at anytime and be read easily and at any time.

We had to keep the client up to date as to what was being accomplished and at what times. it was also key for them to see updated stages so they could give their opinions and for them to get their concerns across about any areas of the website that they didn't like.

As we were posting updates of what we are doing on the blog we would send them an email telling them that we have updated our blogs, this was important as they could check what everyone was doing in the group. this must of been nice for them as there were differant work groups within the group working on all of the differant tasks.

the group

to get this website up and running in time to meet the deadline we had to split up and accept differant roles.

Aarron decided to do the CSS side of the website as he was familiar with the software and had used it before.

as there were so many images to cut out in a short time there were a few people doing that. Pete, Dan, Alex, Matt, Andy and I cut out the images. i didn't cut out many of the images as i had other responsibility's. Matt took control of what the people did as he was a natural leader and was the first to accept the role.

Alex Duffy and I had to draw tables using illustrator. we got the basic design of the table then started adding the themed items for each theme.

As i started helping cutting out the images Alex started adding the images to the tables then giving them to Aarron.

Matt and I also had to sort the images after they had been cut out into the 7 categories. we worked well as a team and were quick to decide where each image was to go.

cutting out the image

the first step was to upload the image into photoshop.










the next step was to create a new layer. you create this so you don't edit over the original layer.











you then make the new layer a bright colour like red so you can see the ares of where you have cut out.








you then create a copy of the image. you do this in case you make a big mistake on the original image.









you then move the background copy up to the top of the layers. you have to do this because the layer at the top is the layer you will be looking at unless you click on the little eye which then makes that layer invisible.







the next step you need to do is to make a layer mask. you do this to protect the layer. if you have the layer mask on the layer you are cutting out to cant do anything destructive to the layer.







the red line on the image is actually the bit of the image that has been cut out. the mark on the layer mask is showing that that line is cut out.











this image shows how you can rub out what you have coloured. this is a simple thing to do. in the bottom left hand corner there is a black and white box. the black box means you are colouring it and the white box means you are erasing it. all you have to do to switch the boxes around is press x.







this image is showing how to use the polygonal tool. it draws straight lines so can make cutting out images with straight shapes easy. all you have to do is click and a point will appear then click where you want the line to extend to. this can be easy to use but wont give you a very realistic curve to your shape.




you then join up the lines of the polygonal tool. this is just a quick example of a square using the polygonal tool. when choosing that area to cut out you have to change the black and white box around. you have to use the white box to cut out the area.









this is the finished picture. as you can see the image has been successfully cut out.

work for 8/12/09

in the tuesday lesson i did a variety of tasks but which circulated around the images that were being used on the web page. at the start of the lesson we went around the class finding out who was doing what for that lesoon. as my previous of task of drawing the tables was completed i offered to help cutting out the images as this was a big task and had not being completed at the time. this took around an hour and a half to complete as it is quite a slow process as you have to be careful.

after this was done we put all of the images into a folder and Matt and I put the images into 7 folders. these folders were:

corporate

birthday

christmas

halloween

christening

wedding

easter

we had to use these folders because these were the 7 differant types of table that we were using at the external clients wish.

as we were in this process we realised that some of the images hadn't been successfully cut out so Pete, Dan, Matt and I had to cut some of the images a second time. another problem we encountered was that some of the images had been saved into GIF files rather than png. we successfully completed this task shortly before the end of the day.

overall i think it was a successful lesson as i managed to accomplish a few tasks that needed to be finished before the end of the lesson as we needed to get the images on the tables and then get those to Aarron so he could put them on the website.

photos into groups

we had been sent around 40 images of various designs from the external client. I had to rearrange these photos into groups so they could be easily found and accessible for the others to use. these five groups were:

. Cup cakes
. Black coloured designs
. Red coloured designs
. Solitary designs
. Group collections

as there was quite a large selection of images that can be used some of these fitted into two categories so there are a few images in more than one folder.

I chose these categories to use because I thought these would make finding the image you want reasonably easy.

I chose to add the cup cake folder because there were a lot of images with cupcakes involved either with the design being used to hold a cupcake or with the image having the cupcake in the design.

I chose to add the category of "black coloured designs" because there were quite a few images that used the colour black for the design. This was the same reason i decided to create the category of "Red coloured designs"

I chose to create the category of "solitary designs" because a large number of the images involved just one design. As there may be a tab added for solitary designs on the webpage, with this category the pictures will be perfectly accessible because they will all be together.

The other category that i have added is "group collections" I thought that this would be a very important category to include because there were a lot of images involving more than one design being included.

In my opinion these categories will be sufficient for everyone to find the images that they are going to need.