Portfolio

A few quick snaps of my portfolio work.

Gallery Is Taking Shape

This has taken me about three whole days to work out how to make this jQuery work properly. I've tried many different versions and then gone for this one. It's basically a gallery where you have the thumbnails on the left and the main image on the right which changes according to which thumbnail you click. It has no images in this version but I have run a test version with some dummy images and it does definitely work. Above we have design view. Fascinating. 

Live view. I added a scroll bar to the thumbs gallery and shrunk it down so that I could leave space at the bottom to add text about the main image. I also resized the thumbs, changed the paddings and margins, both of the thumbs and the whole container. Overall there was a lot of jiggling code about to make it to how I wanted it but in the end I think I've made it work well.

Example of the roll-over function which enlarges the thumbnails when you scroll over them. All that remains now is to add content to this page. And then to copy it to the other categories of my gallery and then fill them up as well. Onwards.

Website Design Moves To Dreamweaver

So I took my Photoshop file, sliced it up with the slice tool and then opened it up in Dreamweaver and I've started adding bits of code and extra elements. I've managed to get it to stay centered in the middle of the browser whatever size you make it. Here's what I've got so far.

 

Design view of home page.

 

Preview in browser

 

CSS rules for text.

Super exciting stuff. Think it's looking good so far. I'm just having a little trouble getting the email link to follow the centering of the rest of the page. More code is needed it seems.

Screen Based Communication: Website Portfolio

The new unit started last week but I didn't really have anything to post as it was all just doing research, doing some scamps and general idea generation. The new unit is about designing and creating an effective, original & interesting portfolio website. As such I've been having dreamweaver tutorials which are going swimmingly. So after the first section which involved a lot of writing, it was time to do some design. The first thing I chose to do was to create a header of my name to go at the top of my site. I wanted it to be hand rendered (suprise) so that it was reflective of my work & my personality. Secondly I wanted it to be quite simple and natural, not overly complex or intricate, certainly nothing decorative.

After writing my name about 100 times in different ways I chose four, scanned them, cleaned them up and then live traced them, and then messed about with the threshold & min area for ages. I got these four. The first and second are done in a Faber Castell brush pen. Number 3 is done with a paint brush and ink. While option 4 is a 08 unipin. I didn't like the third one outright so that was gone, it was too much like the second one, but not as good because it didn't flow well enough. The second one itself I do really like but I though it looked a little bit graffiti style (feel free to correct me) which really isn't anything to do with my work so I cut that on out. Number 4 I really like, so simple and niave, very reflective of my work, so I tried out that & number 1 out and found that number 4 simply didn't have enough punch to be a header. So after about an hour of faffing I managed to cut it down to the top option there. Which was roughly the third or second one I wrote. Out of 100. In my normal hand writing. Time well spent. The 'B' at the bottom I just picked out of one of the times I was writing it because I really liked the way it looks, how curly and flowing it is so I though I'd make it a vector and use it as an ident.

Seeing as how I liked the other option so much but it was cut due to weight issues, I decided to use that style as the option for my buttons within the page, which don't need to be so weighted. I think the two styles fit well together, one is very flowing whilst the other is quite stunted and jagged, but both very loose & clearly hand rendered even though they've been vectorised (I'm not sure that's a word... made into vectors anyway).

I have a logo now.

Heres the first basic page of my website. It doesn't quite work as it should when it's shown here as it's a white box with a drop shadow, sat on a white background. Which is obviously whats happened... but it's supposed to sit within & take up an entire browser, not be left to float in the middle of a blog post. I'll try and make a photoshop mock up or something for the next post. I think this has worked really well. Simple, effective design. Interesting typography. Good layout. The name of the page is going to sit between my name and the logo at the top, and then the content evidently will be in the middle section. I'm not so sure about the lines though. I may remove those and just have whole thing very open and basic, I think they might be a little jaring once the content has been added. More to follow.