MAKING A PICTURE GALLERY IN DREAMWEAVER

For this page I wanted to just make a gallery of my images that could be quickly viewed but none of these had the text with them, I intended to put biggerscale pictures with the text on other pages, this was just a little overview.
One thing I do need to go back and sort out is the jpg bits written on the end of the titles and so the next step is removing these.
This was made in dream weaver using something called WEBGALLERY and was a really quick way of getting your images together. I would most probably work a little more on the presentation of my gallery and try another method as I go along.

GIFF, JPEG OR PNG

This is another version of me deciding on what file format I should save them in and this picture is one of the most detailed and so this took alot of trying and tweaking.

results

This is me in the middle process of making my index page and uploading a selection of front screen images that the page would automatically open on if the website was up and running.
I was going for this idea of frames hung on a white wall and they are all different and of different sizes, which makes them a little quirky.
Due to the field I want to go into, I am only going to make a gallery website, with details and not much else.

saving as web devices

Once I had produced my images in photoshop at 72 dpi, because that is the resolution needed for a website compared to printing which is normally around the 300 dpi.
Then I had to save them for web and devices which in the end opened up this screen, what you could do was go through the different files such as JPEG, PNG AND GIFF.
Then you would have to look and see what gave best results, but at thesame time how much time it took to upload. So once I had decided on these images it was time to get them up as a file format, I normally chose 4 up to view them. This gave me a 4 way split screen and I could see the original and then three others at different quality percents. Really you shouldn't go under 60 otherwise the quality isn't there and for photography that is not good.
Once I was happy with that, I decided to save them and name them appropriatley and this allowed me now to open in dreamweaver and use the image with ease.

linking pages

There was a really interesting thing that i found out while I was creating my basic site and that was you could link the pages and that means when you click on something it can take you to another page.
So what I did was highlight the word gallery and then click on the link selection below and by chosing the file you want it will automatically link that part to the other page with that title.

This was really interesting and I thought that part was going to be alot harder than it was, and it is a brilliant function.

main index page

This is the index page of my website and I have decided that I am going to place three images within frames on it to show a range of work.
I decided to keep the layout very simple and so I decided to stick purely with the black and white idea and so this will keep everything looking crisp and sharp.

I had never used Dream weaver before and so it took me a little while to get used to it.
Alot of my items were created in photoshop and then once saved they were brought into dream weaver and placed within the page.

fifteeth image

"The ghosts of my life, blow wilder than the wind"

I wanted my final image to be this shot of the bare bulb in a dark room and this idea of a little light in the big dark space but the only problem is it eventually needs to burn out and then you are in permanent darkness like our person the pictures will be. Then there is no way of finding yourself again.

fourteenth image

"Just when i thought I could not be stopped!, when my chance came to be king"

The mirror is this persons worst enemy, they have looked and themselves reflected back, the mirror is showing what they do not want to see and so it must be destroyed.
The line just when I thought I could not be stopped, but really the mirror is one of the things stopping them.
The person takes a bottle and screaming at the top of their lungs they are smashing it.

thirteenth image

"now the doubt inside my mind, comes and goes but leads nowhere, just when i think I'm winning when I've opened everydoor the ghosts of my life blow wilder than before"

Now there is lines about doubt, and most of the time doubt creeps up on you and there is almost this sense that the hand is going to grab you and so you are in a nervous and uncomfortable situation.
I shot this with a little blur on the image just to give this sense of movement and really make the shadow seem even more like a real person.

twelvth image

"Once I was so sure"

I wanted this idea of someone writing in a book, but I wanted this bare bulb just to illuminate the hand and a little bit of the body.

He could be writing a million things and I wanted you to start thinking about his mental state and the things that could be written.

eleventh image

"The simple lifes no longer there"

Drink by the bed, really re-iterating the point of is that going to help?

If someone can only lift themselves long enough to drink then there is problems.

tenth image

"Now I find myself alone, the simple life's no longer there"

For this image I really thought about someone alone and all I was getting was someone in the corner of the room by the door.

So there is a way of getting out but the person is not using it, you get slightly frustrated and want to say just open the door but things are not as easy as this and the door is not for letting someone out, it is for keeping someone in.

ninth image

"Well, I'm feeling nervous"

I wanted to create this real idea of tension and I thought waht better way than to physically show tension within the hand.

So as you can see the knuckles are tight and the hand is really gripping on and when you look at this you find your body almost feeling a little tensed as we know this is not how the hand is when relaxed.

Also i wanted this idea of someone trying to hold on as all these things were coming through. Again I am using fragmented pieces of the body and I think this works well.

eight image

"The ghosts of my life blew wilder than the wind"

For most of the ghosts lines I was going to use shadows and I had this idea to have the shadow looking up, as though the idea of defeat and giving up, we throw our heads back and normally arms out.
I wanted to really focus in on the form of the head and so I took the image in nearer and thought it was effective.

seventh image

"Just when I thought I could not be stopped, when my chance came to be king"

This is another image about showing someone trying to regain composure, but due to the blur you can see there is movement and someone has had the shakes.
This picture almost looks like a mirror and you are seeing yourself in it, this makes you feel a little on edge and you sympathise with this character.

sixth image

"The ghosts of my life blow wilder than before"

For the ghosts part of the lyrics I decided that from my earlier research that I was going to use shadows as a representation. Infact I was going to use the main person of the pictures shadows.

I believe that these are showing ghosts because it is another form of a person, we create shadows by blocking out light and surely light is representational of the good.

Also shadows are always by you and there is this sense of lurking.

The reason I included the door was I wanted this idea of the shadow escaping from that, so I am representing the ghosts escaping from the inside of the mind.

fifth image

"Just when i think I'm winning, when I've broken everydoor"

For this image I wanted to show this idea of someone trying to regain some calm and positivity, people smoke to calm themselves and its something addictive and it is as though he is relying on this to help him.

By having him smoking into the mirrror, he is reflecting upon himself and trying to face himself.

Mirrors have alot of connotations in the sense of the person looking into them.

fourth image

"And I've no particular place to go"

I was thinking about showing the idea of getting yourself into such a state that there is nowhere to turn to and sometimes people find themselves turning to alcohol, but the thought is that does alcohol help the proble or just make it a whole lot worse.

All the empty bottles indicate that this has obviously gone too far over a period of time.

third image

'Well I ought to leave but the rain it never stops"

This image was all about making the rain line work really well, and what more of emotion do you want than a tear which is representational of the rain never stopping and so the tears are never stopping.

I really liked this idea of fragmented body parts and so the person doesn't really have key identity and this makes it applicable to so many more people, than if you completely showed the person within the photograph.

I wanted to get near in so that you had to look at this eye, you couldn't focus much else and so it is forcing you to face this issue.

final images

"When the room is quiet, daylight almost gone, is there something I should know".

Above are the first two pictures from my sequence that was created from the lyrics of Ghosts by Japan.

I decided that i wanted my images to be black and white in the end to really relate to that ghostly theme. Also it gave this real sense of the past and almost a memory and i think that these really relate well again to my original concepts.

I decided that i wanted to make these images look as though they had been placed inside frames, this is the idea of keeping something preserved and this links up to the idea of his thoughts being preserved in his head and he just can't seem to get rid of them.

My final idea is to present these images in twos on my website, with the pieces of text that are relevant underneath.

I am making the text look like a typed font, as though this is entries in someones journal and extracts have been taken.

I like the idea of black and white use on my website as I think that this gives a clean and crisp look, the only thing i would probably change is I would make my web page black and change the colour of the writing.

interesting font

When I was looking the different fonts that were on the photo shop palette and noticed something that was label font and thought it was really interesting.

fonts

I have been looking at a selection of different fonts as i have been going through the process of creating my website.
Some of them work really well and others I find really are either too busy or fussy which can make them illegible or distracting.
Anything like the lucida blackletter can be really swirly and this is just really confusing for the eye to look at and the eye has to work to figure out what the name is and this can be a little annoying for the viewer.
Fonts like Optima are really clean and crisp and can look eye catching on your web page, the viewer can identify straight away the name and what the site is for.

here is a clip from top of the pops of ghosts, which i am hoping to run over the pictures

a final idea for development

This is a basic idea of what I would like to do in order to present my images.

I think the frame really creates something more interesting but at the same time does not take too much away from the photographs, so it enhances them and really shows them off to the best.

When it comes to the gallery pages then there will be a number of frames on the wall depending on how many are in a collection. Also there will be a photographed wall that these frames and photographs will be hung on. This will give me the crisp and sharp look that I wanted but at the same time it will also have something a little more than a white background to look at.

I am also going to test this concept with darker backgrounds but I do believe that the white is best. I am going to continue trying the Logo and also I am going to keep this Font as I believe that it is legible and still works with the swirly FONT. So this is my final idea starting point and I am going to continue developing from that.

I also think the mirror image will work really well for my image text on the galleresque wall and so I am going to try that.

developed idea

all images from google images

I have been thinking about other ways to present my work that are not too complicated and don't distract from my actual images that I am trying to show, so my idea is to have my gallery page background of a pure white wall, almost like a gallery.

I am going to photograph a selection of frames and then place my images inside them and the put back onto wall.

This is to replicate the idea of images on a gallery on a wall and because I am purely using this as a gallery site, this would work really well.

logo

The reason that I chose this style of writing as my LOGO was because I wanted to keep it very simple and something that most people could read.

The other thing that caught my eye while going through all the different fonts was that the middle letter looks like an "a" and my middle name is Ann. This works and almost spells out the intitals of all three of my names and so I really like this and think it is what I am going to use for the Logo.

I also like the black writing on white and believe that this is clean, sharp and looks very classy in its presentation.

So this is my starting point and I am going to work on it form here, maybe have a play with graphichs just to see if it can be jazzed up in anyway.

another design

I have decided to give puttting something on my background a try to see if that would make it seem a little more interesting. I added one of my photographs to the background and then placed a central box over the top just so I could lay all my pictures out and they wouldn't look too heavy with the background. I do like the added effect to the right hand side of the screen but the only thing is at times I find the eye drawn to that before anything else and so this means the photographs are not getting noticed straight away. I like the font that has been used as it does seem to go with the LOGO but the only thing is not everyone would be able to read that as easy and so that could cause a few problems on a web page. But black, white and grey tones are definitley working for me and so I have just got to play around with those and work something out.

initial web designs

This is my initial design for a web site page, I really like this idea of keeping things really simple and everything laid out so anyone can navigate their way around it.

The only thing that I think with this is, it is far too basic and possibly needs something that will make it stand out a little more.

I like the little logo in the corner and so I think that I am going to keep that and develop upon all the elements slightly.

I am still thinking about keeping the black and white and just tweaking all the little details as I go along.

vector graphics

Unfortunatley due to a loss of hardrive material through a broken hardrive it means that I have no examples of Vector Graphics to show but I did create quite a few designs.
Vector Graphics are created using shapes in illustrator and what I really liked about using this was you could control quite alot about these graphics.
You can do things like change the colours that are within your graphics, you can continuously alter the size of the shapes and a thing that I thought was a really good thing was, if you created things like stars, you can determin how many points are on that. So you can go from 5 points up to as many as you like and this creates some really interesting shapes.
The only negative point that I have about using these is that quite alot is happening with the shapes plus all the factors, which means that once again I am not going to achieve the clean and crisp look that I want within my web pages and so I will not be using these.

symbols

These were created using web2 and these are very good for creating things like buttons and drawing attention to areas.

I like the gradient that falls across them and highlights certain parts of the shape, it creates 3D effects.

The only thing with these are that they are very clumpy and so they look a little heavy for sites that need to be a little delicate.

Quite alot of web 2 is like this and so I do not think that these will work for my site and the design. Again it was something interesting to learn and try.

larger image

This is what one of the images would look like if in theory it was clicked on and then opened as a bigger image.

This is definitley a really good way of displaying images on a web page and this really is a good idea.

images as thumbnails

Another thing that we had a go at trying was taking your images, making them into thumbnails as a way to view all image and then by clicking on them in theory you would be able to view larger versions of the images.

I really like this idea because it gives people a quick bitesize idea of what your work is like and then there is the idea of the interaction and the person sliding the thumbnails across and clicking on them to open the main one.

The other thing that I really like about these is that if they are on a main page it is one less click for the viewer to have to do in order to get to your gallery and normally there is the 3-click rule.

I think also it can work when mixing up your black and white images with your colour images.

So i think this is a possible consideration for my final design and I will play with it a little more as time goes on.

using images as headers, buttons and main focus

This was an image that I shot last year on saltdean beach and I decided that I would use this image for something else. When just playing with the idea of the basic Layouts, I decided to place a section of the image into my header and use it as the background to my name.

Although I think that it is a really nice way of using photographs, I decided that once again the background becomes distracting and so you lose sight of things like names and logos which are really important things.

I believe that I would keep my site to minimal colour and keep the logos and text really clean and crisp. Also keeping along the gallery side that is also another reason to keep sites really sharp.

So I do not think that I would be using this method for my final design, maybe more for a header on a blog or email.

using brushes

This is me using brushes that were downloaded from the internet and these are in the form of Grunge style. I made this page 1600x 1000 pixels becuase this is the best size to fit most monitors and things can be viewed easily.

I really like the use of these and think you can really create some interesting designs. I decided to put an image from my portfolio on the page just to see how they would interact with the images. My personal opinion is that the brushes are slightly distracting from the main image and that is not the best thing to do for your work. Again I think that this is a case of more simple ideas winning and being used just purely because my site is going to be used for gallery purposes. I want all of this to be about my images and not the surrounding area.

WIRE FRAMING

This was a really good way of getting your head around the idea of a basic layout of the website.

There were so many possible things that I could have done and so i sketched a few and annotated them, this really put my mind into thinking about how these should look purely as shells to start with. Key elements within the design is where things like your logos, navigation bars, name and gallery are going to go.

vector backgrounds

These vector backgrounds were downloaded from a site that is full of different designs.

I don't think that I would use Vector backgrounds because I am thinking about keeping my site purely as a gallery because I want to become a forensic photographer and I don't need a site to sell my work just display it.

I think texture in this form may be a little complicated or heavy for what I am doing but I think it is a very interesting thing to play with.

WEB DESIGN

This was one of the first things that we did in our web design lesson and what we did was look at texture and the idea of placing text ontop of texture and linking the two.

Texture in web design:
Volume, depth, patter and colour to evoke different emotions

Evoking surfaces

Promotes emotion
Creates ambience
Adds depth- 3D

We were given a sheet which gave a list of titles and what we had to do was find a picture of texture that we thought would relate to that title and then we had to find a font that worked well with the word and also the textured image it would be placed on.

Also we could change things like opacity and contrast to really make it stand out or blend into the texture.

my first shot

This is for the line when the room is quiet.

I like this idea of dark and dingy, you can just make out what is there and it keeps you there long enough to try and take in the surrounding scene.

The use of a raw bulb I decided upon because, it was incorperating this idea of something that would eventually burn out and fade.

Earlier contact sheet

I decided to just shoot something a few weeks previous, using the same location and outfit.
This was to just give me an idea of what I was working with and to get my model used to the space of shooting.
My initial idea was going to be a panorama of the room and the man progressing around that and so you are seeing the transition. But when we shot a few I soon realised that although the location was perfect, there was an issue with the space to create all these images and not have to stay in the same area too many times. So it got me thinking back to the mirrors I liked using and so I decided to have smashed mirror pieces and by reducing colour and slightly distorting imagery they could go into each of the pieces and it could be representational of all the pieces of his life smashing apart.

more contact sheets

The first contact is half more of the corner shots and the second half is photographs to represent, "when the room is quiet" and i decided to just shoot the hanging light. I shot it in complete darkness and with a little bit of light. Its this idea of something illuminating something but eventually it will burn out (a little bit like the man). Also I took a couple of shoots of it just slightly illuminating the bed, with thrown over sheets to show that someone was in there. It is the first shoot and creates this atmospheric and moody shot to set up the scene and it almost looks like you have just walked into the room.

Just for another idea, using the same light I photographed the model sitting by the light writing in a book. People say writing is a good release and it could be the "ghosts"that are going in that book.

So the first contact sheet is the continuation of the mirror smashing scene.

The second contact is of the man wound up in the corner and this is for the line, now i find myself alone, the simple life is no longer there.

I wanted this idea of you not seeing the identity of the man again and just seeing the tension in his body and its almost as though his "ghosts" are forcing him into a corner he cannot get out of. Again I used the lamp light and a bare bulb to get this harsh colourcast and shadows.