My INSURER PTE LTD - Insurtech Innovation Award 2024
Creation of the website
1. Creation of the website
Here are the stages that I went
through to create the website.
2. Step 1
• I firstly used
Adobe
Dreamweaver to
create the
document. And I
used the HTML
format.
3. Step 2
• I firstly set out the
layout for the
webpage; I created a
table with 5 rows and
4 columns and I
made the lines
invisible- this was so
that the components
would stay in place
and the layout would
be neat, but the lines
wouldn’t be visible as
I felt this made the
page look
amateurish.
4. Step 3
• I then added in
the title of the
film; I kept this
the same as the
poster and trailer
as I felt that this
would help them
all link together. I
placed it in the
centre column
and top row in
order to make it
highly visible.
5. Step 4a
• I used Adobe
Fireworks to
create the
navigation; I
started by
‘inserting and
new button’ and
changing the
colour, font and
shape.
6. Step 4b
• I then entered the
button’s over state
this is when the
user hovers over
the button and it
changes colour. I
copied the
existing button
into this state but
swapped over the
colours so that
there was a clear
change.
7. Step 4c
• I then copied the
button and pasted
it several times to
create 6
buttons, However
I change the text
so that each
button would
supposedly link to
a different page.
8. Step 4d
• After exporting
this navigation
bar I could insert
it into the
website
• This is how it
looks.
9. Step 5
• I then decided to
add in the flatline
media copyright
sign; this was
because I firstly
wanted it to be
clear who the
production
company was but I
also wanted the
poster and the
website to link.
10. Step 6a
• I wanted an actor
profile to be
included on the
page; I decided to
set it out like a file
and have an image
and some
background
information I
started by pasting a
file image into
Photoshop
11. Step 6b
• I then added in
the name of the
actor using the
text tool
12. Step 6c
• I then moved
onto the picture
I decided to use
one of his
headshots as I
didn’t feel a trick • I also added a
shot would be paperclip
because I felt
recognisable to that this would
him. make it look
like the image
was pinned to
the file
13. Step 6d
• I then added in
the background
information and
some fun facts
using the text
tool – this
completed the
image
14. Step 6e
• After exporting
the file as a JPG
image I could
insert it into the
website this is
how it looks
16. Step 7a
• I then moved
onto the border
images. I started
by setting up the
correct size in
Photoshop
17. Step 7b
• I imported an image
of George, I had
decided in the design
that I would remove
half of his face and
only have half of his
face as the border; To
do this I used the
select toll and
selected the half of
the face I no longer
needed and deleted
it.
18. Step 7c
• This completed
one of the
borders; so I
exported the
image and
pasted it into the
website
19. Step 8
• I then moved onto
the opposite
border; I had
taken a mid shot
of Becca and felt
this would work
well for the
second border as
it was similar to
George’s shot.
20. Step 8b
• I started by
cutting the image
as before but with
the opposite side;
I also made sure
that her hand
wouldn’t be in the
shot as this
wouldn’t of
worked as well.
21. Step 8c
• I then removed
the background
with the rubber
tool and replace
it with a white
background
22. Step 8d
• I then felt as
though she should
have been
wearing lipstick to
fit in with the
storyline; I traced
over the lips with
the red
paintbrush tool
23. Step 8e
• By changing the
opacity of the
layer I could
make the lips
blend in – this
gave me my final
image
24. Step 8f
• I imported the
image into the
opposite side to
the other border
which gave me
this
26. Step 9
• I felt as though
the gap below the
trailer should be
filled with an
image; I wanted
the Polaroids to
be a clear feature
so I proceeded to
make a image in
Photoshop
27. Step 9b
• I pasted 6
poloroids
pictures into the
document and
spread them out
to look like one
of the scenes out
of the trailer.
28. Step 9c
• I then started to
add in the
snapshots of
George I used
the same images
as in the trailer
to help with
continuity.
29. Step 9d
• I then added in a
kiss mark as I
felt this would
link to the trailer
and the idea of
the stalker’s
Polaroids.
30. Step 9d
• I imported this
image into the
space I had
chosen .
32. Step 10a
• I had left the final
space for a cover
flow that I
planned to create
I started by
downloading the
data from a
tutorial site called
flashmo.com
33. Step 10b
• I then moved
onto naming my
images; I needed
to name them
image_1, image_
2 and so in in
order to create
the right coding.
34. Step 10c
• I went through the code
I had downloaded and
copied each section of
code the number of
times needed to have
the correct amount of
images included I also
had to change each of
the file names to the file
names I had chosen as
shown on the right.
35. Step 10d
• I then used Adobe
Flash to open up the
document; I then
changed the sizing of
the stage to the size I
had kept for this
feature within the
website.
36. • This is the final
Step 10e coverflow that I
created
37. Step 10f
• I then
exported
this into my
website; I
used the
swf format
as this is
how I had
saved the
document.
