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.  



Task 5 - Creating an Animated Banner (Graphics)

For this task I wanted to incorporate images into my flash animations.

Design 1 - 

I used images that I collected when carrying out my reserach for task 2.

 I chose this image for my first design. I changed the colour of the image so that it would tie in my the theme of my website as you can see below.

 I firstly just wanted to experiment by fading the image in and out with the text as i had done on the privious task.

You can see from the print screens below the alpha of the image incresing through out the animantion so that it fades in and then back out over 45 frames (3 seconds).

Frame 1

 Frame 11

 Frame 20

As you can see from the print screens above the image and text fades in up to frame 20 and then begins to fade out again until the aplpha of both the image and text is at 0% again in frame 45.

When played on a loop it looks like the text and image are fading in and out continuously. 

Design 2 -

For my second design I wanted to experiment with a number of different images to create a longer animation. This time I used four images which you can see below.

Below you will see screen shots at various frames of my animation.

Frame 1 

 Frame 5

 Frame 15

 Frame 25

 Frame 35

The different images and the text fade in and out over 10 frames each. I do like this banner more than my previous banner because I feel the different images makes the animation more interesting to look at and may lead to more interaction from the viewer as they may notice that there is are different images used.

However I feel that this animation is a bit too fast and would be more effective if slowed down a bit so that the viewer had more time to register the different images used within the animation.    

Design 3 - 

For my last design for this task I wanted to look at experimenting with fading the image in but also look at increasing or decreasing the size of the image and text throughout the animation to give it more depth rather than just changing the alpha.

I began by making both the image and text really big so that they were bigger than the stage it’s self as you can see from the second screen shot below. Also in frame 1 the alpha for both the image and the text is at 100%

Below are screen shots showing my animation at various points.   

Frame 1

 Frame 10

 Frame 28

 Frame 40

 Frame 45

As you will see over the 45 frames the size of the image and text decreases over the tween to fit the stage and also the alpha increases too.

I did quite like this effect however I am not sure if an animated banner is exactly appropriate for my website. Although I do think flash can really enhance a web page, so I will look into designing another flash animation that will be more appropriate for my design.  



Task 4 - Creating an Animated Banner (Typography)

For task 4 I had to design a number of flash banners for my website using typography and simple shapes. The size of the stage from my animations is 600 px by 200 px.   

Design 1 –

For my first design I just wanted to focus on animating the typography. Using the colours that I had used for my header design in task 2 I put some text onto a back ground. Then by converting the text into a symbol I then changes the alpha so that the text would fade in and out over the animation.

These are screen caps from my animation.

Frame 1

 Frame 23

 Frame 45

This animation is 45 frames (3 seconds) long. At from 23 the alpha for the text is at 100%, it then fades back out again to frame 45. When played on a loop the text looks as if it is fading in and out continuously.     

I do like the effect of the text fading in and out. However I would like to experiment further to see how else I could animate the typography.

Design 2 - 

For my second design I wanted to experiment with masks to see how I could animate the text.

For this banner the text remains still, however I wanted to see if I could make the text look like is was gleaming to still create movement.

I turned the second line of text into a masked layer to that it would only show part of whatever was behind it.

I then added this image (above) behind the text layer and created a tween so that it would move behind the text layer. You can see from this screen shot the tween that which the image will move along.

And below is a screen shot from the actual animation showing how the image can only be seen through the masked layer.    

 I do like this effect however if I were to extend this design I would make the image bigger so that the whole of the line of text could be seen for the length of the animation rather than only part of it been visible at a time.

Design 3 -

I liked on my first design how the text faded in and out so I wanted to extend this further.  

So for my third design I wanted to focus on animating two layers of text so that they moved together at the same time.

Below are screen shots at various frames throughout my animation to show the fading out of the text.

Frame 1

 Frame 6

 Frame 15

 Frame 23

Frame 45 

These screen shots show the text fading in and out through out the animation by changing the alpha of the diffrent layers of text.

I do like this fade in and fade out effect and would like to experiment with it further. However for my next task I will try to extend my designs by incorporating images into the designs.