Citing the Images I Used In My Final Website.

These are the images that I used in my final website and my final flash banner that I used in my final design.

Images on the website -

 Photo 1 - http://www.bjstattoo.com/

Photo 2 - http://mogoel.com/tribal-celtic-tattoo-designs/

Photo 3 - http://kimsirrs.com/studio.php

Images used in flash banner -


http://www.tattoopilot.com/tattoodesigns/celtic-tattoo-designs/

 http://www.purplemoon.com/Stickers/flora.html

http://www.imethods.com/celtictattoos.html

http://www.imethods.com/celtictattoos.html

http://freewebs.com/picst/draw-celtic-knotwork.html

 http://www.celticsymbol.net/

Map -

Map from - http://www.google.co.uk/maps

Designing the Sturcture and Layout of My Web Page

After completing all of the tasks I looked through the work I had produced for each task and selected what I was going to use as the main components for my website.
Home page -

Below is a photograph showing my designs from my sketch book. I printed out and stuck down all of the components such as the header, footer and nav bar that I had designed to see how they would work compositionally.  

And below shows a screen shot of all of my content in my website. I am really pleased with this design as I feel the tartan back ground really gives a sense of the heritage behind the website but the clean images and the sans serif fonts gives it a modern and clean feel too.

Below is a screen shot of my actual home page that I constructed using dream weaver.

I will now move on to designing the layouts for my other pages from my website.

About us page -

This page will include some infomation about the studio and will answer questions such as:

• Who they are?
• What they do?
• And how they differ from other tattoo studios?

This page will mainly consist of text and a couple of images to break up the page and make it look more visually intresting rather than it just beign a block of text.

Gallery Page -

This will consist of mainly images and examples of work produced by the studio.

The images will be small thumb nails that when clicked open up a larger image in a new window. The thumb nail and the larger image will be two separate images as this will save loading time for the page rather then just having the larger image shown at a smaller size on the page as the smaller file size will reduce loading time over all for the page.

 FAQ page -

This page will be my FAQ page. It will consist of frequently asked questions about tattooing. It will include such as questions about the process and aftercare for people who are really serious about getting a tattoo.

This page will consist of mainly text but I will include one image just to make it look more interesting.  

Close to the top there will be a list of all of the questions that will be answered in this page and if the viewer clicks on the link it will bring them down to where that particular question is on the page.

Contact infomation page -
This page is quite an important page as it contains all of the contact information. It is important that this page be clear and contain all of the relevant information as this is the link between the viewer looking at the website and the viewer booking a consultation with the studio.

There for this page has to be really clear and include all the information the viewer will need to contact the studio.

Having links for example with the website and also including a map and linking it to Google maps ensures that the viewer can find and contact the studio easily.

Now that I have planned out my web pages i will now move onto making them and adding the content to them before linking them together and publishing them as a live site which I will then link to this blog.

Designing Flash Content for My Web Page

After completing task 4 and 5 I liked the idea of using a flash animation in my website but I did not want to use and of the flash banners I created in task 4 and 5.

So I decided to design and make a flash animation for the home page to show the recent work produced by the studio as I thought this might be a more interesting way to show case the studios work rather than just having the images placed on the page.    

The above photograph shows the sketches that I done when designing my flash animation.

I wanted to display about 3 images on the stage at a time and have them fade in over 30 frames (2 seconds) and then fade out over 30 (2 seconds) and repeat this to show a number of different images throughout the animation to show case the work of the studio in an interesting way.   

The below images show the images (at 100% alpha) that I used for my animation on the stage. I used the same green colour for the back ground of my stage as I did for the background of my container so that the banner blends into my design.
 

Frame 30

 Frame 90

 Frame 150

 Frame 210

I am really pleased with the flash animation that I have designed for my site. I took into consideration the timing for the animation as in previous tasks I said I felt like the animation was too fast so I used a lot more frames for this animation to make it slower.

But I really feel like this animation is an effective way of show casing the recent work produced by the studio.