I’d like your opinions on these two scenes I’ve made for my animation so far.

They were made by tracing over images in Illustrator and then scaling them up, added the different textures (to the park one) and yeah… I think they both have a nice effect but they’re both very ‘busy’. I’d be most appreciative if any of you have tips for toning it down! Let me know what you think and I’ll change them accordingly =).


I like the idea of the big colours and textures, I think that will engage children but then characters on top of that will simply get lost.


So there we go. Oh, I got another first for my essay on GOB =).

I am finally ready for the day at 10.30, despite setting my alarm for 8.30!


Anyway, over the last couple of days I have already drawn a rough idea for 7 characters for my animation, most of which will appear in the background with the exception of the two main characters. I also already have an idea of their style but I’ll post about that later today.


Here’s my first Character Sheet for the character tentatively known as CJ.

And the style, a homage to Amanita Design.

Key Motions

Kneeling

Waving

Walk Cycle

Animated Walking

Static
Static Walking


Tweened
Tweened Walking

Already I’ve reached Phase 3 of the first year of the course and the time seems to have gone so quickly. I’ve just handed-in the previous essay and the site hand-in is Wednesday (not feeling too confident about either of those) but with the kick start of a new term I’m hoping for the best. So some reflections on what’s happened with working in my first proper group on this course.

Well for me it’s been quite stressful, after some group meetings James gave us roles and we all agreed that he should be project manager (organised, reliable, confident – all good qualities for the position). Since then it has taken a while for us to get much work done, there has been a lot of planning but not much doing. Because of this I broke out of my own roles as image/ graphics/ producer and started on the site. With hindsight I should probably have done this from the beginning but I’m glad I started because the team member that was supposed to do the site still has not contributed any work to the project.

Sorting out the navigational content and site map was surprisingly hard. A lot of sites these days are quite ‘flat’ everything can be accessed from the front page (BBC is an exemplar of this). We wanted ours to be similar but a lot of issues came up from that, how do we implement profile pages? Should we have extra pages? The latest example of which is showcasing the video, we did have the idea of putting the video you clicked on in the middle left of the page with a featured video on the right and a video carousel at the bottom but even when roughly making this it was clear it was too complicated and too many video thumbnails. Currently we’re going for something like the BBC’s YouTube channel with small thumbnails on the right in its own box.

A few other issues I think is just the number of people in our group, six is quite a large number to all give meaningful jobs to. Yet some have ended up working a fair amount more than others, I think this is to do with group dynamics and perceived roles. I think I always seem to believe I have to do much more than I actually do but only it seems to pick up what others don’t do. I was also a fairly active member in the conception process. Coming up with the initial idea of a music review site, the name and the current logo, of course the others helped shape it and it would be silly to think that I could do it all by myself so thank you to all.

I’ll leave it there for now. =)

I believe the site’s took taken shape (thank you Julia) and is fully working. If anyone finds any usability bugs please do get in touch, though.

Things I have learnt in the last couple of weeks:

• Some basic PHP
• Some basic Javascript
• How nice (so far) Dreamhost are, even if they do keep trying to sell me a private server.
• The loveliness and forgiving nature of HTML 5
• How the best designs in Photoshop are the accidental ones
• That I actually find it easier to hand code than use Dreamweaver and go through its menus.
• The importance of typography
• The importance of accessibility
• How WordPress works and how to customise templates.

It’s been pretty fun designing this from the ground up and getting back to grips with it all. Everything validates at HTML  5 and CSS 3 apart from my  blog, but I’m working on that. It has two errors because of inline CSS when a gallery is implemented but I’m not sure how much I can influence that or if it’s just WordPress, anyone got any ideas?

I still have to make the kerning on the titles look more natural, they’re all set to a kern of -75 but because of the nature of the waves it makes some letters look much closer to each other so I’ll have the fun task of typing each letter into it’s own layer and aligning them tomorrow!

Just a few stills from the music video for ‘Stay With You’ by Lemon Jelly, designed by the ever beautiful Airside. I also believe it’s heavily influenced by a 2004 interactive Flash animation by world renowned Japanese web developer Yugo Nakamura called Borders.

Anyhoo here are a few stills to help illustrate what I’m aiming for in my own portfolio.

You’ve probably noticed that the last one is completely different, that’s because it is. It’s from the same DVD/ album and is called ‘Go’ (featuring vocals by the legendary William Shatner) and uses the same layering effect. Like the Stay With You video it also takes the viewer on a journey through vast landscapes and is quite powerful despite not much really happening – just a guy with different backgrounds walking from one end of the screen to the opposite side. Anyway, the point of layers is still there and it uses photos to generate texture and meaning.

A couple of days before I received the One Day Project brief I had, coincidentally, started working on my page structure and header design for my own portfolio. I’ll take you through the steps that brought me to my current design but with the new brief, I’ll probably scrap this design and start afresh but we’ll see.

Firstly, I drafted and brainstormed what I believe would constitute ‘me’ on the web. You can see these below:

From this, I decided that it should be personal, but in an almost non-identifiable way. So I took a fairly low quality picture of myself with iSight and used the Cutout filter in Photoshop to stylise it – giving it that slightly more anonymous feel. I then used the smudge tool to give the header some more fluidity.

First draft of my header design

The font used is Garamond with -75 tracking so it’s all quite close together. I used Garamond in this simply because it’s my favourite font and, hopefully, adds to a more ‘professional’ feel. The red and blue used I liked because of its simplicity. I keep thinking of the ‘Marley & Me’ logo, (not that I’ve ever seen the film, mind) although I just looked at it on iMDB and they don’t share much resemblance so it must be the Marley & Me logo in my mind.

As you can see though, the colours look atrocious and ugly, far too brown and not the kind of image that I want to show to prospective employers. I think it would also be hard to design a whole site with that kind of swatch so, as you’ll see in the next design I lighten it. The smudging I don’t think works particularly well either and I’m left with the problem that when viewed online it will look like a box because of the lack of fading and block colours.

Second header with lighter image

I quite liked the fact that the background seemed to be coming out of my head in the first one, like ideas. So I’ve tried to keep the same sort of thing going in the second one by adding the words ‘Graphic’ and ‘Web’. The overlay circle is quite nice because it lightens the colours and gives me something a bit nicer to work on in terms of a swatch. Circles are also representative of protectiveness as well as being quite dynamic. As Mark Shufflebottom said, they’re good to use on the web because it breaks out of the grid in a kind of Dadaist way, mainly because they’re quite a bit harder to setup and look good!

In this one I’ve also extended the image to include my hand holding my mouth (yes, that is what it is). Unfortunately, the image still doesn’t flow well with the page. So I resolved to fix this in the next design by adding… lines!

Third header revision, now including lines.

In this design the thick lines have been added to be quite bold and give some structure as to where and how to read the image. I also added the word ‘Games’ to give a third addition to my repertoire but I don’t think we cover any of that until the second year but no harm in putting it in now. However, when I imported this design into my rough HTML structure the thick black lines obscured the menu and was too low down so…

Fourth revision with cutoff head

My final design so far now is cutoff below the line, taking out those hands and mouth once again like the initial design. Because of this you also get a semi-circle which I think are quite fun looking. The colours for the words are all colours from the face as well. I am quite happy with this design there are just a few things that I know I can improve upon. These are:

1. The font colours simply don’t look right, they look nice enough but I don’t think they work when coupled with the face image. I think I need a more ‘block’ like font to match the lines.

2. The browns, although lighter, are still brown. I could completely change the hue to something quite exotic or use shades of grey to make it monochromatic, I’ll play around in Photoshop after this post and some lunch to see what looks good and update from there.

Apart from that, I’ll add some other ideas and perhaps go down a different route as I seem to be slightly ahead and, at the moment at least, have the advantage of time, which I haven’t had since I started this course it feels!