Background and Buttons

Background

this is the orginal picture

the star and shells looks so weird after we put it in our website

(Reference : http://www.ipad-wallpapers.us/white-sand-ipad-background/ )

so, we used photoshop to clone it 

it become like this

we used this as our website background 

Buttons

We decide to choose this 3 types of buttons for our website

Type 1 button = for the main button

Type 2 button = for the roll over image button

Type 3 button = for the each sub-topic or sub pages button

Pulau Kapas banner

Now let us show you

how we did the our banner~

^_^

1st -  open the original picture

2nd - double click > choose "satin" and " gradient overlay" > Blend mode = multiply, Opacity = 8% 

to make the picture have a better effect 

3rd - choose the "Crop Tool "

4th -  then it will become like this

5th - Image > Adjustment > Posterize

6th - set levels = 10

7th - then it will become like this.
after that, add text by using " Horizontal Type Tool (T) " 

font type = Brush Script Std

Font size = 100pt

8th -  apply lens flare on the background layer

filter > render > lens flare
in the lens flare box ,  set brightness=119%

lens type = 50-300mm Zoom

9th - this is layer style box for background

choose "inner glow" and "satin"

10th -  this is layer style box for "Pulau Kapas" font layer

choose "Drop Shadow" , "Outer Glow" and "Bevel and Emboss , Contour " 

11th - use "magic wand" tool to select the love shape

12th - move the love shape to the banner side

13th - ctrl+T > adjust and move the love to the right hand side

14th - this is the layer style box for the "love shape" layer

choose "Colour Overlay"  and "Gradient Overlay"

15th - then it will become like this.

16th -  move 3 pictures inside the banner 

17th - resize the 3 pictures by pressing ctrl + T

18th - this is the layer box that will apply on the 3 pictures

choose "Drop Shadow" and blend mode = Multiply

19th - so it will become like this

20th - add in the "S.O.S" font at the love shape 

font type = Pristina

font size = 150 pt

21th - add in the rainbow picture inside the banner

22th -  ctrl+T to resize it

23th - this is the layer style box of rainbow picture

blend mode = multiply

opacity = 23%

this is the outcome of our "Pulau Kapas" banner

^_^

Thank you!

Accommodation - Muhamad Aizuddin

Accommodation

Description on the individual link

This individual link is created to introduce the accommodation or places to stay in Pulau Kapas to viewers. There will be some pictures of places and its purpose is to guide viewers when they come to Pulau Kapas . Descriptions for each place is also provided.


Objective of the link

The main objective of this link is to promote hotels,resorts and chalets in Pulau Kapas to the viewers especially foreign tourists because they love to travel around the world just to find a nice and comfortable place to stay and it has become a routine for them.Furthermore this link is created to promote Malaysia to the world so we can at least make one contribution for our country.

Design of GUI

This is the initial layout for my group's website. On the top of the left side, it will be our group logo. Beside the logo, it is my group's designed banner and other subtopic banners. There will be 6 buttons below the banner. Each button represents different links and each links will be design by our different member. So it gonna show out different style of our group member. Below the button, it will be the content. So when you click on the different button, it will show up different content. And the content will based on the subtopic present it out. The content will be presented with words, image, flash and video. Below the content, it is the signature of my group (copyrighted).

So this is the layout that i'm going to use as my individual site page (Accommodation). When the viewers click on the button of accommodation,this layout will be coming out. The top of the left side is our group logo. On the right,it will be the subtopic banner for each of the site page. Below the banner, it will be the button for other links. I'm going to put flash or video inside my individual site which is located at the left side of the content. The right side will be 3 button which are the name of places so stay. When viewers click on one of them,they will get more infos therefore they can choose which one of the 3 places they want to stay.Below the content, there will be always our group's signature 

(copyrighted).

This is out flowchart of my individual site.

How to go? - Tan Guan Kiat

How to go?

Description on the individual ideation of the link

The idea of the site is describe how to how to get to Pulau Kapas. This link is to ease the viewers that want to get to Pulau Kapas.

Objective of the link

The objective of the link is to let people know how to get to Pulau Kapas. This link tells you which jetty to go to and how much is the fare to get there. This can make the viewers easy to go to Pulau Kapas and to make sure that there will be no difficulties going there.

Design of the GUI

This is the initial layout for my group's website. On the top of the left side, it will be our group logo. Beside the logo, it is my group's designed banner and other subtopic banners. There will be 6 buttons below the banner. Each button represents different links and each links will be design by our different member. So it gonna show out different style of our group member. Below the button, it will be the content. So when you click on the different button, it will show up different content. And the content will based on the subtopic present it out. The content will be presented with words, image, flash and video. Below the content, it is the signature of my group (copyrighted).

After you like the ''How to go?'' Button, you see will something like this :

I'm going to use this layout as my individual site page (HOW TO GO?). There's no special buttons or flash or animation. My individual site is straightforward and all the information is in one page.

This is out flowchart of my individual site:

Webmaster - Kong Joan

Webmaster

Description on the individual ideation of the link

-          Introduce team of webmasters

-          Provide the info of webmasters such as name, contact, majoring and so on

-          Provide the questionnaire links

    

Objective of the link

-          Can ask the webmaster if have any inquiries

-          Know about the webmaster so that they do not feel doubt

-          Want to let the viewer about the team of webmasters

         Design of GUI

This is the layout of webmaster page. There is the logo link and Q& A part. Under the Q&A section, there will be name, email and comments for the viewer to key in details and comments or questions.

This is the interface after you click into the logo links. This will have the photos and have more details about each of our S.O.S Team members. 

Flow Chart of individual site

Adobe Photoshop will be used to edit and create the banners,pictures and buttons of the website.
Adobe Dreamweaver will be used to create the website.
Adobe Flash will be used to create the flash of our website. 

Attraction - Chan Mei Wui

Attraction


Description on the individual link (Attractions)
The creation of this individual link is to introduce the attractions of Pulau Kapas to viewers. Real pictures of the attractions of Pulau Kapas will be presented to show how is the place and how beautiful is the island. Furthermore, the descriptions of  each attraction can let the viewers gain more information about the island.


Objective of the link
The main objectives of this link is to promote Pulau Kapas to the viewers. Thereby increase the number of local and foreign tourists to the island. And also, to let the people know that there is a beautiful island in Malaysia so that people can spend their holidays and enjoy in Pulau Kapas.


Design of GUI

This is the initial layout of my group website. There will be a banner for the site and below are the links for the particular sub topic. The tittle in the banner of the website is " Pulau Kapas". The subtopics are introduction, how to go, attractions , accommodation, and webmaster. Before you click for further information, there will be a slide show embed in the website to show some picture in the website to gain some attraction of the viewer and to show the general things will be presented in the website.

Flow chart and layout of the individual site- Chan Mei Wui ( Attractions)

This is the initial layout that i'm gonna use in my individual site. When the viewer clicks into my site, a flash or a video of the attractions of Pulau Kapas will be shown in the top of the left. The content will be categorized to four groups ( yellow boxes). When the viewer click into one of those, it will link to another page that shows all the information and pictures of the related content. 

This is the flow chart of my individual site. 

Photoshop will be used to edit and create the banners and pictures of the website. Dreamweaver will be used to create the website. 

Introduction - Phoon Yip Lynn

Introduction

Description on the individual link

The creation of this individual link is to introduce the history and geology of Kapas Island. The images of the kapas island are present to show how nice is the island. The description of the history and geology can let the viewer get more information on the Kapas Island.

Objective of the link

The main objective of this link is to introduce the Kapas Island's history and geology to all the viewer. This link also provide the viewer which are going to Kapas Island to know more about it. Then they will know which beach is bigger or the location of the garden or hotel.

Design of GUI

This is the initail layout for my group's website. On the top of the left side, it will be our group logo. Beside the logo, it is my group's designed banner and other subtopic banners. There will be 6 buttons below the banner. Each button represents different links and each links will be design by our different member. So it gonna show out different style of our group member. Below the button, it will be the content. So when you click on the different button, it will show up different content. And the content will based on the subtopic present it out. Normally the content will be present by words, image, flash and video. Below the contents, it will be the signature of my group (copyrighted).

Layout and Flowchart for the Individual site- Phoon Yip Lynn( Introduction)
I'm going to use this layout as my individual site page (INTRODUCTION). When the viewer is click on the button of introduction, this layout will be coming out. The top of the left side is our group logo. Beside the logo, it will be the subtopic banner which means is for the introduction banner. Below the banner, it will be the button for other links. I'm going to put flash inside my individual site which locate at the left side of the content. The right side will be 2 button which are named by HISTORY and GEOLOGY. When the viewer click on the history, it will come out the history of Kapas Island. To be a friendly user website, i will create a back link under the content. So when the viewer finish read about the history, they can click on the back, to get into the homepage of the introduction webpage. After that, they can click on the geology to get more information about Kapas Island. Below the content, there will be always our group's signature (copyrighted).

This is the flow chart for doing my individual site (introduction).

Photoshop and flash will be used to create the logo, banner, button and other image.

The dreamweaver will be used for create the website.