SlideShare a Scribd company logo
Construction of Website
        1.Logo was created using Adobe Photoshop. A font was downloaded from
www.dafont.com called Angelic War. As can be seen a simple gradient overlay effect was
applied. Once logo was created was then added to a plain black canvas to create an Enter
                                 Page for the website.




2.The same font was then used to create Sub-Headings for each page. This time another
 effect was applied which was Drop Shadow. These images were saved in a PNG image
  format. This allowed us to save the image with a transparent background but keep the
                                         quality.




 3.We decided to create the website in Flash to give a more interactive feel to the site. As
can be seen a new document was created with the canvas size being 800 pixels wide and
  1100 pixels in height, with a Frame Rate of 20 frames per second to allow for smoother
                                        animation.
4.Once the pre-                                                                  loader was
  installed all the relevant files that were required for the website were imported into the
                                              library.




 5.Once the files                                                                  were
   imported the                                                                 buttons for
  the navigation                                                                 bar were
   created. This                                                                 was done
  but creating a                                                                  Button
Symbol and then                                                                 placing the
Text in the centre                                                                 of the
 symbol canvas.                                                                 From there
the colour of the                                                                text was
  altered for the                                                                different
   states of the                                                                  button.
6.Once the buttons were created different objects were animated using Motion Tweens.
The objects were animated for when the site initially loads after the pre-loader. As can be
            seen the Timeline shows the different objects on different layers.




 7.Once the initial                                                                objects
were laid out on the                                                              page the
  next step was to                                                                 create
    each area of
 information, such                                                               as the text
 area, the jukebox,                                                              the events
  information, etc.                                                               This was
  done by creating                                                               Movie Clip
 Symbols and then                                                                 animating
     within those                                                                 symbols.
As can be seen the                                                                text area
for the Home Page                                                                  is being
    created. The                                                                   Timeline
shows the different objects and when their state changes by looking at where the
                                Keyframes are positioned.




 8.With the Jukebox area, the music tracks had to be imported in. These music tracks first
had to be converted to a lower quality to decrease the file size so it would allow the overall
website file size to be lower and as a result would load quicker. The play, pause, next and
   previous buttons were created using the tools in Flash and then converting them into
                                      Button Symbols.




9.This step shows how the gallery was created. Once again it was created as a Movie Clip
   Symbol and the images were cropped and re-sized in photoshop. Then using Motion
 Tweens and Keyframes, the Alpaha Levels were altered along with the size of the image
                    to create a sense of a fade in, fade out gallery.
10.Once all the                                                            information
areas had been placed on the Timeline as separate layers and on the canvas, the site was
                           then previewed, as can be seen.




        11.This
      screenshot                                                             shows the
       exported                                                              version of
     the site. The                                                             site was
    then imported                                                               into a
   blank document                                                             in Adobe
    Dreamweaver                                                              and saved
     as the home                                                             page. The
   Enter page was                                                             linked to
   the Home page                                                             but saved
     as the Index                                                               page.

More Related Content

More from jamsjamsjams

Story Board Change
Story Board ChangeStory Board Change
Story Board Changejamsjamsjams
 
Storyboard
StoryboardStoryboard
Storyboard
jamsjamsjams
 
Sukh Evaluation Question[1]
Sukh Evaluation Question[1]Sukh Evaluation Question[1]
Sukh Evaluation Question[1]jamsjamsjams
 
Screenshots 4 Audience Feedback[1]
Screenshots 4 Audience Feedback[1]Screenshots 4 Audience Feedback[1]
Screenshots 4 Audience Feedback[1]
jamsjamsjams
 
Structure
StructureStructure
Structure
jamsjamsjams
 
Editing Of Music Video
Editing Of Music VideoEditing Of Music Video
Editing Of Music Video
jamsjamsjams
 
Construction Of Digipak
Construction Of DigipakConstruction Of Digipak
Construction Of Digipak
jamsjamsjams
 
Photographs From Filming
Photographs From FilmingPhotographs From Filming
Photographs From Filming
jamsjamsjams
 
Costume Planning[1]
Costume Planning[1]Costume Planning[1]
Costume Planning[1]
jamsjamsjams
 
A2–
A2–A2–
Understanding Our Editing Software
Understanding Our Editing SoftwareUnderstanding Our Editing Software
Understanding Our Editing Software
jamsjamsjams
 
Pitch Speech To Lead Singer Adam
Pitch Speech To Lead Singer AdamPitch Speech To Lead Singer Adam
Pitch Speech To Lead Singer Adam
jamsjamsjams
 
Filming Schedule & Editing Schedule 4 D Productions
Filming Schedule & Editing Schedule   4 D ProductionsFilming Schedule & Editing Schedule   4 D Productions
Filming Schedule & Editing Schedule 4 D Productions
jamsjamsjams
 
Editing Schedule
Editing ScheduleEditing Schedule
Editing Schedule
jamsjamsjams
 
Filming Schedule & Editing Schedule 4 D Productions
Filming Schedule & Editing Schedule   4 D ProductionsFilming Schedule & Editing Schedule   4 D Productions
Filming Schedule & Editing Schedule 4 D Productions
jamsjamsjams
 

More from jamsjamsjams (20)

Story Board Change
Story Board ChangeStory Board Change
Story Board Change
 
Rough Costume
Rough CostumeRough Costume
Rough Costume
 
Storyboard
StoryboardStoryboard
Storyboard
 
20091215113939464
2009121511393946420091215113939464
20091215113939464
 
20091215113959259
2009121511395925920091215113959259
20091215113959259
 
20091215113939464
2009121511393946420091215113939464
20091215113939464
 
20091215113927684
2009121511392768420091215113927684
20091215113927684
 
Sukh Evaluation Question[1]
Sukh Evaluation Question[1]Sukh Evaluation Question[1]
Sukh Evaluation Question[1]
 
Screenshots 4 Audience Feedback[1]
Screenshots 4 Audience Feedback[1]Screenshots 4 Audience Feedback[1]
Screenshots 4 Audience Feedback[1]
 
Structure
StructureStructure
Structure
 
Editing Of Music Video
Editing Of Music VideoEditing Of Music Video
Editing Of Music Video
 
Construction Of Digipak
Construction Of DigipakConstruction Of Digipak
Construction Of Digipak
 
Photographs From Filming
Photographs From FilmingPhotographs From Filming
Photographs From Filming
 
Costume Planning[1]
Costume Planning[1]Costume Planning[1]
Costume Planning[1]
 
A2–
A2–A2–
A2–
 
Understanding Our Editing Software
Understanding Our Editing SoftwareUnderstanding Our Editing Software
Understanding Our Editing Software
 
Pitch Speech To Lead Singer Adam
Pitch Speech To Lead Singer AdamPitch Speech To Lead Singer Adam
Pitch Speech To Lead Singer Adam
 
Filming Schedule & Editing Schedule 4 D Productions
Filming Schedule & Editing Schedule   4 D ProductionsFilming Schedule & Editing Schedule   4 D Productions
Filming Schedule & Editing Schedule 4 D Productions
 
Editing Schedule
Editing ScheduleEditing Schedule
Editing Schedule
 
Filming Schedule & Editing Schedule 4 D Productions
Filming Schedule & Editing Schedule   4 D ProductionsFilming Schedule & Editing Schedule   4 D Productions
Filming Schedule & Editing Schedule 4 D Productions
 

Recently uploaded

2024 MATFORCE Youth Poster Contest Winners
2024 MATFORCE Youth Poster Contest Winners2024 MATFORCE Youth Poster Contest Winners
2024 MATFORCE Youth Poster Contest Winners
matforce
 
Domino Express Storyboard - TV Adv Toys 30"
Domino Express Storyboard - TV Adv Toys 30"Domino Express Storyboard - TV Adv Toys 30"
Domino Express Storyboard - TV Adv Toys 30"
Alessandro Occhipinti
 
一比一原版美国加州大学圣地亚哥分校毕业证(ucsd毕业证书)如何办理
一比一原版美国加州大学圣地亚哥分校毕业证(ucsd毕业证书)如何办理一比一原版美国加州大学圣地亚哥分校毕业证(ucsd毕业证书)如何办理
一比一原版美国加州大学圣地亚哥分校毕业证(ucsd毕业证书)如何办理
taqyea
 
This is a test powerpoint!!!!!!!!!!!!!!!
This is a test powerpoint!!!!!!!!!!!!!!!This is a test powerpoint!!!!!!!!!!!!!!!
This is a test powerpoint!!!!!!!!!!!!!!!
briannedpegg
 
➒➌➎➏➑➐➋➑➐➐ Dpboss Matka Guessing Satta Matka Kalyan panel Chart Indian Matka ...
➒➌➎➏➑➐➋➑➐➐ Dpboss Matka Guessing Satta Matka Kalyan panel Chart Indian Matka ...➒➌➎➏➑➐➋➑➐➐ Dpboss Matka Guessing Satta Matka Kalyan panel Chart Indian Matka ...
➒➌➎➏➑➐➋➑➐➐ Dpboss Matka Guessing Satta Matka Kalyan panel Chart Indian Matka ...
➒➌➎➏➑➐➋➑➐➐Dpboss Matka Guessing Satta Matka Kalyan Chart Indian Matka
 
FinalA1LessonPlanMaking.docxdvdnlskdnvsldkvnsdkvn
FinalA1LessonPlanMaking.docxdvdnlskdnvsldkvnsdkvnFinalA1LessonPlanMaking.docxdvdnlskdnvsldkvnsdkvn
FinalA1LessonPlanMaking.docxdvdnlskdnvsldkvnsdkvn
abbieharman
 
Ealing London Independent Photography meeting - June 2024
Ealing London Independent Photography meeting - June 2024Ealing London Independent Photography meeting - June 2024
Ealing London Independent Photography meeting - June 2024
Sean McDonnell
 
In Focus_ The Evolution of Boudoir Photography in NYC.pdf
In Focus_ The Evolution of Boudoir Photography in NYC.pdfIn Focus_ The Evolution of Boudoir Photography in NYC.pdf
In Focus_ The Evolution of Boudoir Photography in NYC.pdf
Boudoir Photography by Your Hollywood Portrait
 
Tibbetts_HappyAwesome_NewArc Sketch to AI
Tibbetts_HappyAwesome_NewArc Sketch to AITibbetts_HappyAwesome_NewArc Sketch to AI
Tibbetts_HappyAwesome_NewArc Sketch to AI
Todd Tibbetts
 
All the images mentioned in 'See What You're Missing'
All the images mentioned in 'See What You're Missing'All the images mentioned in 'See What You're Missing'
All the images mentioned in 'See What You're Missing'
Dave Boyle
 
FinalFinalSelf-PortraiturePowerPoint.pptx
FinalFinalSelf-PortraiturePowerPoint.pptxFinalFinalSelf-PortraiturePowerPoint.pptx
FinalFinalSelf-PortraiturePowerPoint.pptx
abbieharman
 
一比一原版美国亚利桑那大学毕业证(ua毕业证书)如何办理
一比一原版美国亚利桑那大学毕业证(ua毕业证书)如何办理一比一原版美国亚利桑那大学毕业证(ua毕业证书)如何办理
一比一原版美国亚利桑那大学毕业证(ua毕业证书)如何办理
homgo
 
Barbie Made To Move Skin Tones Matches.pptx
Barbie Made To Move Skin Tones Matches.pptxBarbie Made To Move Skin Tones Matches.pptx
Barbie Made To Move Skin Tones Matches.pptx
LinaCosta15
 
Heart Touching Romantic Love Shayari In English with Images
Heart Touching Romantic Love Shayari In English with ImagesHeart Touching Romantic Love Shayari In English with Images
Heart Touching Romantic Love Shayari In English with Images
Short Good Quotes
 
My storyboard for a sword fight scene with lightsabers
My storyboard for a sword fight scene with lightsabersMy storyboard for a sword fight scene with lightsabers
My storyboard for a sword fight scene with lightsabers
AlejandroGuarnGutirr
 
My storyboard for the short film "Maatla".
My storyboard for the short film "Maatla".My storyboard for the short film "Maatla".
My storyboard for the short film "Maatla".
AlejandroGuarnGutirr
 
storyboard: Victor and Verlin discussing about top hat
storyboard: Victor and Verlin discussing about top hatstoryboard: Victor and Verlin discussing about top hat
storyboard: Victor and Verlin discussing about top hat
LyneSun
 
➒➌➎➏➑➐➋➑➐➐ Dpboss Satta Matka Matka Guessing Kalyan Chart Indian Matka Satta ...
➒➌➎➏➑➐➋➑➐➐ Dpboss Satta Matka Matka Guessing Kalyan Chart Indian Matka Satta ...➒➌➎➏➑➐➋➑➐➐ Dpboss Satta Matka Matka Guessing Kalyan Chart Indian Matka Satta ...
➒➌➎➏➑➐➋➑➐➐ Dpboss Satta Matka Matka Guessing Kalyan Chart Indian Matka Satta ...
➒➌➎➏➑➐➋➑➐➐Dpboss Matka Guessing Satta Matka Kalyan Chart Indian Matka
 
HOW TO USE PINTEREST_by: Clarissa Credito
HOW TO USE PINTEREST_by: Clarissa CreditoHOW TO USE PINTEREST_by: Clarissa Credito
HOW TO USE PINTEREST_by: Clarissa Credito
ClarissaAlanoCredito
 
❼❷⓿❺❻❷❽❷❼❽ Dpboss Matka ! Fix Satta Matka ! Matka Result ! Matka Guessing ! ...
❼❷⓿❺❻❷❽❷❼❽  Dpboss Matka ! Fix Satta Matka ! Matka Result ! Matka Guessing ! ...❼❷⓿❺❻❷❽❷❼❽  Dpboss Matka ! Fix Satta Matka ! Matka Result ! Matka Guessing ! ...
❼❷⓿❺❻❷❽❷❼❽ Dpboss Matka ! Fix Satta Matka ! Matka Result ! Matka Guessing ! ...
❼❷⓿❺❻❷❽❷❼❽ Dpboss Kalyan Satta Matka Guessing Matka Result Main Bazar chart
 

Recently uploaded (20)

2024 MATFORCE Youth Poster Contest Winners
2024 MATFORCE Youth Poster Contest Winners2024 MATFORCE Youth Poster Contest Winners
2024 MATFORCE Youth Poster Contest Winners
 
Domino Express Storyboard - TV Adv Toys 30"
Domino Express Storyboard - TV Adv Toys 30"Domino Express Storyboard - TV Adv Toys 30"
Domino Express Storyboard - TV Adv Toys 30"
 
一比一原版美国加州大学圣地亚哥分校毕业证(ucsd毕业证书)如何办理
一比一原版美国加州大学圣地亚哥分校毕业证(ucsd毕业证书)如何办理一比一原版美国加州大学圣地亚哥分校毕业证(ucsd毕业证书)如何办理
一比一原版美国加州大学圣地亚哥分校毕业证(ucsd毕业证书)如何办理
 
This is a test powerpoint!!!!!!!!!!!!!!!
This is a test powerpoint!!!!!!!!!!!!!!!This is a test powerpoint!!!!!!!!!!!!!!!
This is a test powerpoint!!!!!!!!!!!!!!!
 
➒➌➎➏➑➐➋➑➐➐ Dpboss Matka Guessing Satta Matka Kalyan panel Chart Indian Matka ...
➒➌➎➏➑➐➋➑➐➐ Dpboss Matka Guessing Satta Matka Kalyan panel Chart Indian Matka ...➒➌➎➏➑➐➋➑➐➐ Dpboss Matka Guessing Satta Matka Kalyan panel Chart Indian Matka ...
➒➌➎➏➑➐➋➑➐➐ Dpboss Matka Guessing Satta Matka Kalyan panel Chart Indian Matka ...
 
FinalA1LessonPlanMaking.docxdvdnlskdnvsldkvnsdkvn
FinalA1LessonPlanMaking.docxdvdnlskdnvsldkvnsdkvnFinalA1LessonPlanMaking.docxdvdnlskdnvsldkvnsdkvn
FinalA1LessonPlanMaking.docxdvdnlskdnvsldkvnsdkvn
 
Ealing London Independent Photography meeting - June 2024
Ealing London Independent Photography meeting - June 2024Ealing London Independent Photography meeting - June 2024
Ealing London Independent Photography meeting - June 2024
 
In Focus_ The Evolution of Boudoir Photography in NYC.pdf
In Focus_ The Evolution of Boudoir Photography in NYC.pdfIn Focus_ The Evolution of Boudoir Photography in NYC.pdf
In Focus_ The Evolution of Boudoir Photography in NYC.pdf
 
Tibbetts_HappyAwesome_NewArc Sketch to AI
Tibbetts_HappyAwesome_NewArc Sketch to AITibbetts_HappyAwesome_NewArc Sketch to AI
Tibbetts_HappyAwesome_NewArc Sketch to AI
 
All the images mentioned in 'See What You're Missing'
All the images mentioned in 'See What You're Missing'All the images mentioned in 'See What You're Missing'
All the images mentioned in 'See What You're Missing'
 
FinalFinalSelf-PortraiturePowerPoint.pptx
FinalFinalSelf-PortraiturePowerPoint.pptxFinalFinalSelf-PortraiturePowerPoint.pptx
FinalFinalSelf-PortraiturePowerPoint.pptx
 
一比一原版美国亚利桑那大学毕业证(ua毕业证书)如何办理
一比一原版美国亚利桑那大学毕业证(ua毕业证书)如何办理一比一原版美国亚利桑那大学毕业证(ua毕业证书)如何办理
一比一原版美国亚利桑那大学毕业证(ua毕业证书)如何办理
 
Barbie Made To Move Skin Tones Matches.pptx
Barbie Made To Move Skin Tones Matches.pptxBarbie Made To Move Skin Tones Matches.pptx
Barbie Made To Move Skin Tones Matches.pptx
 
Heart Touching Romantic Love Shayari In English with Images
Heart Touching Romantic Love Shayari In English with ImagesHeart Touching Romantic Love Shayari In English with Images
Heart Touching Romantic Love Shayari In English with Images
 
My storyboard for a sword fight scene with lightsabers
My storyboard for a sword fight scene with lightsabersMy storyboard for a sword fight scene with lightsabers
My storyboard for a sword fight scene with lightsabers
 
My storyboard for the short film "Maatla".
My storyboard for the short film "Maatla".My storyboard for the short film "Maatla".
My storyboard for the short film "Maatla".
 
storyboard: Victor and Verlin discussing about top hat
storyboard: Victor and Verlin discussing about top hatstoryboard: Victor and Verlin discussing about top hat
storyboard: Victor and Verlin discussing about top hat
 
➒➌➎➏➑➐➋➑➐➐ Dpboss Satta Matka Matka Guessing Kalyan Chart Indian Matka Satta ...
➒➌➎➏➑➐➋➑➐➐ Dpboss Satta Matka Matka Guessing Kalyan Chart Indian Matka Satta ...➒➌➎➏➑➐➋➑➐➐ Dpboss Satta Matka Matka Guessing Kalyan Chart Indian Matka Satta ...
➒➌➎➏➑➐➋➑➐➐ Dpboss Satta Matka Matka Guessing Kalyan Chart Indian Matka Satta ...
 
HOW TO USE PINTEREST_by: Clarissa Credito
HOW TO USE PINTEREST_by: Clarissa CreditoHOW TO USE PINTEREST_by: Clarissa Credito
HOW TO USE PINTEREST_by: Clarissa Credito
 
❼❷⓿❺❻❷❽❷❼❽ Dpboss Matka ! Fix Satta Matka ! Matka Result ! Matka Guessing ! ...
❼❷⓿❺❻❷❽❷❼❽  Dpboss Matka ! Fix Satta Matka ! Matka Result ! Matka Guessing ! ...❼❷⓿❺❻❷❽❷❼❽  Dpboss Matka ! Fix Satta Matka ! Matka Result ! Matka Guessing ! ...
❼❷⓿❺❻❷❽❷❼❽ Dpboss Matka ! Fix Satta Matka ! Matka Result ! Matka Guessing ! ...
 

Construction Of Website

  • 1. Construction of Website 1.Logo was created using Adobe Photoshop. A font was downloaded from www.dafont.com called Angelic War. As can be seen a simple gradient overlay effect was applied. Once logo was created was then added to a plain black canvas to create an Enter Page for the website. 2.The same font was then used to create Sub-Headings for each page. This time another effect was applied which was Drop Shadow. These images were saved in a PNG image format. This allowed us to save the image with a transparent background but keep the quality. 3.We decided to create the website in Flash to give a more interactive feel to the site. As can be seen a new document was created with the canvas size being 800 pixels wide and 1100 pixels in height, with a Frame Rate of 20 frames per second to allow for smoother animation.
  • 2. 4.Once the pre- loader was installed all the relevant files that were required for the website were imported into the library. 5.Once the files were imported the buttons for the navigation bar were created. This was done but creating a Button Symbol and then placing the Text in the centre of the symbol canvas. From there the colour of the text was altered for the different states of the button.
  • 3. 6.Once the buttons were created different objects were animated using Motion Tweens. The objects were animated for when the site initially loads after the pre-loader. As can be seen the Timeline shows the different objects on different layers. 7.Once the initial objects were laid out on the page the next step was to create each area of information, such as the text area, the jukebox, the events information, etc. This was done by creating Movie Clip Symbols and then animating within those symbols. As can be seen the text area for the Home Page is being created. The Timeline
  • 4. shows the different objects and when their state changes by looking at where the Keyframes are positioned. 8.With the Jukebox area, the music tracks had to be imported in. These music tracks first had to be converted to a lower quality to decrease the file size so it would allow the overall website file size to be lower and as a result would load quicker. The play, pause, next and previous buttons were created using the tools in Flash and then converting them into Button Symbols. 9.This step shows how the gallery was created. Once again it was created as a Movie Clip Symbol and the images were cropped and re-sized in photoshop. Then using Motion Tweens and Keyframes, the Alpaha Levels were altered along with the size of the image to create a sense of a fade in, fade out gallery.
  • 5. 10.Once all the information areas had been placed on the Timeline as separate layers and on the canvas, the site was then previewed, as can be seen. 11.This screenshot shows the exported version of the site. The site was then imported into a blank document in Adobe Dreamweaver and saved as the home page. The Enter page was linked to the Home page but saved as the Index page.