Friday, 26 March 2010

Treasure Island Toys Project

We were asked to pick a story out of a list which we will be illustrating/animating. There were only 9 stories so a few of us wrote our own, as did I, I decided on the title 'Bertie makes a cake' This is what I have so far...

Bertie makes a cake

It was a cold, rainy day and Bertie the pirate was terribly bored. He sat looking out of the window wondering what to do. Bertie sighed.

Bertie suddenly remembered that it is Toby the tortoises birthday tomorrow and he had forgotton to get him a present! ‘I know’ said Bertie to Pecky the Parrot ‘Lets make Toby an extra special cake for his birthday party!’ ‘What a good idea’ Pecky replied.

After finding Berties umbrella off they went to the shops to buy some ingredients for their extra special birthday cake….

They got some flour, sugar, eggs, butter and cocoa. “Right, I think thats everything” said Bertie “Don’t forget the strawberry sprinkles!” said Pecky

When they got back to Berties house they started to make the cake, mixing up all the flour, eggs, chocolate and butter, it looked yummy! They put the cake in the oven and sat down for a rest, “Oh dear” said Pecky, “I think we’ve made a bit of a mess!”

Bertie and Pecky cleaned up the kitchen and decided that next time they would be tidier! Bertie’s Mummy always says that a good chef is clean and tidy!

The kitchen was sparkling clean when there was a knock at the door, it was Kate the kitten, she wanted to borrow Berties ball. “Just a second, I’ll go and get it” said Bertie.

Kate could smell something coming from the kitchen “Mmmmmmm, that smells yummy” said Kate. She walked into the kitchen and saw the extra special birthday cake, she just had to have a bite! One bite turned into two and then she realised she had eaten half of the cake!

Bertie walked into the kitchen and saw Kate the kitten with lots of chocolate cake round her mouth “That cake wasn’t for you!” said Bertie “It was for Toby the tortoises birthday!” Kate ran away feeling very guilty!

Bertie went to bed early that night and was very upset as he still didn’t have anything to give to Toby.

In the morning Bertie went down to the kitchen to have his breakfast and on the kitchen table was a huge cake! Even better than the one he had made! Kate must have brought another cake round while Bertie was asleep. “Toby will love this cake! Thanks Kate!”



Monday, 1 March 2010

Everything..

I am now coming to an end of making my site. There have not really been many main problems... A few things that took a while to work out, such as; hover over nav buttons, nav buttons change colour when on a particular page, getting the nav buttons to sit on the lined paper... There was a lot of playing around!
When I started this project I actually hated it - I couldn't get my head around it, and didn't have a clue what all the code meant. It took me a long time to get hold of it and I only managed to start building properly after half term when I could ask more questions! I have now completely got the hang of it and don't mind doing it at all! It can be quite frustrating in ways, but when you get it right, it feels really good.
I would change a lot of design decisions after making my first site. I now understand how everything works and after just designing for print, things for the web are very different. My original designs didn't look like the overall site. I don't think my site is 'great looking' but for my first ever website I am very proud of it!

...

Designing a font:
This page is going to be kept quite brief. I will talk about some ways of starting to design a typeface but mainly will have a list of links to good websites/books and tutorials...

Choosing Typography:
This is another page that I will be using images. I have got some images from the book 'Stop Stealing Sheep and find out how Type works' - This book is very useful and has great exercises in it. This page will help the viewer to understand how type works and how to choose it successfully.
I have inserted 6 images and briefly talked about them. I have then added a sort of step by step on choosing type at the bottom.

Fonts:
For the fonts page, I have chosen several fonts to talk about, for each font I have gathered a few photographs of where people may have seen the typeface used. I made these images in Photoshop and placed them together to make long, thin images. These sit under each lot of text.

...

Once I had finished the homepage, I copied and pasted it into other html docs so I can edit from there rather than repeat the whole process again. My next page to work on was Terminology, for this page I made a diagram to go with each term I was describing. I made all of these in Photoshop. Below are a few samples...

These diagrams sit on the right under the div, with a small piece of writing to the left of them saying what they mean. Originally I didn't make the diagrams all the same width, so when I put them onto the site they looked terrible, I have now made them all the same width and changed them, they look a lot better!

I had some problems trying to sit the images and text side by side. I tried 3 different ways of doing this and eventually got it right. Firstly, I put 2 column divs next to each other in one main div - This didn't work! Secondly I put each image and text set in individual divs - This was just messy! At last it worked well just by sitting them all in one big div! Eg:
Image - text
Image - text
Image - text
Image - text
Image - text
Image - text
and so on...

This page is looking really good now, at last - progress!

And so on...

I have decided to change my design from brown paper to a textured paper colour I made in Photoshop. It will look much better tiling and will have no join lines.
To begin with I made my layout, tiling the tablecloth background (which is only 4 small squares originally), I then tiled the paper (which was also a tiny image). The paper is my wrapper where all my content will sit. I put the Nav bar in (notepad) and it looked far to big, I decided to cut it down to about half the size and make the text buttons much smaller. My logo sits well above the nav and I now have more room for content, without it all being pushed aside.
The homepage is just a brief introduction/history to Typography. I have put a div to the right of the nav and another under the nav and text, this is so the text will look as if it is floating around the nav. I have also added the image of the book, all images I have removed the backgrounds so they are transparent in Photoshop. I have added a small footer, which isn't really that noticeable - But its not supposed to be...