Accommodation ~ dreamweaver

Dreamweaver part for accommodation

1) i had inserted all the image as button and the flash banner for the page accommodation.

2) i click the properties in the right. And then i adjust depend on the page. 




3) For the page after press the hotel button, i just insert the flash i make for hotel.

4) After that i do the linking of button. 

5) i link for the top side bar too.

6) The back button is placed at the bottom of the page of hotel.























Last result on the dreamweaver~

After press the button hotel in the page above. Page below will show.

After the mouse hover on the Anson hotel button, info of the hotel will shown.

Below image show the About Perak page that i did.

do visit my personal blog for all separate post on assignment.
http://digitalmedianing.blogspot.com/

Accommodation ~ Flash

Flash for the accommodation page.

1) document properties for the stage i change to 736px *400px. And then i import all the thumbnail make from photoshop into the stage and i arrange them nicely. Background image i found from google.

2) for the first hotel. Anson Hotel. i right click and edit in place. Then it will shown as below.

3) i insert a keyframe in the down state. To make the information shown when the mouse hover over it.

4) And then i drag the information picture and adjust it on the stage.

Accommodation ~ photoshop

 

For the blue button thumbnail as shown in the GUI, i used photoshop to make it. 

I search the images of hotel, resort, camping site and others from google.

first i do for the hotel thumbnail.

1) i use the 15cm x 5cm for the size of blank psd.

2) after that drag of hotel image and background image into the blank psd file. Adjust both image to right place.

3) i added the word hotel. After that, i use the layer style -- drop shadow to make the word like more attractive.

4) i want to add the 2 line at the top and bottom for the word to let user to focus on the word. And i use the same angle of drop shadow on it.

5) For other thumbnail, i used the same method to show unity.

Information of accommodation.

1) 10cm * 2cm is the width and height of the button for name of hotel.

2) background i add a image and add a white stroke (layer style -- stroke) on it.

3) After that i put text and add stroke on it too.

4) Now i do for the information like address and telephone number for hotel. For the background i put opacity to 70%. Then i use brush tool to make the purple border.

5) The information of the hotel is listed inside the border.

idea on Assignment 3~

Description on the individual ideation of the link

My parts are introduction and accommodation about Perak. Introduction is the history and brief information of Perak like head of state, population and others. For the accommodation available in Perak, it means for the places that visitors may stay such as resorts and hotels.


Objective of the link


The objective is to let user to explore about the state, how big is Perak, what is the word 'Perak' mean, how Perak grow from 16th century till now, famous and non famous hotel and resorts in Perak. Address and contact info for accommodation will be provided in the link to make it easier for user.


Design of GUI


GUI design for our group website is prepared by another teammate because we want our design to be unity.

Below is the GUI that I want to use for the accommodation part. I add on the button below the pages. The other part is same as the above picture shown. The blue button is for user to click on the option they want and the info will link to the button. 

Flowchart of the individual site

Use of tools in Photoshop, Dreamweaver and Flash


Photo and video will be designed and edited with using Photoshop Flash and Dreamweaver.




References


I'm taking information of Perak from the2 link below. Pictures used in Photoshop and Flash are search from google.

http://www.peraktourism.com
http://www.about-malaysia.com/perak/index.htm

Screen shot of final output

dreamweaver on personal website~

photoshop for header footer..
madam may feel free to see my website on http://student.mmu.edu.my/~1101107817
http://student.mmu.edu.my/~1101107817/index.html

Final product on E-wallpaper including lab 5 of advenced layering~

Summary on assignment 1 ~ E-wallpaper

i think my last output is a bit different from the before one. Because i think the before one is a bit confuse.

My photo on close up view~

These are my image to put in my close up view.

i use the selection tool to select my whole body out..

and then i use selection tool to select out the little little snow.

And then this is the background for my photo.

after i drag the image into the bank psd, then i arrange it nice.and use the free transform to make the snow larger.

Lab 3 and 4 : Retouching and Enhancing digital photos

For tutorial 3 and 4~

we learned about retouching and enhancing digital photos~

after listening about madam lydia's comment on some e-wallpaper~

so i get some new idea for my wallpaper..

firstly i checked all my images used on layering~

i found that ebee had spoilt by me when i'm selecting it from white background~

so i use clone stamp tool to clone back the shoe..

alt + mouse left click to clone the image..

den release alt and click on the empty place to paste..

besides~

i had choose a new image for my wallpaper..because madam lydia said we do not need to include fom building~so i change the building to a earth image~

there are few word surround the earth and within the earth..
so i use clone stamp tool here too~

after cloning and stamping~all the words disappear~as shown below..

after that~
i would like to make the earth look like have more 3D feel~
so i use the quick selection + magic wand tool + polygonal lasso tool to select the land on the earth~

after that..image > adjustments > replace color~
den change the lightness to minimum..den it will be black~

press ctrl +alt to copy the same image out to a new layer..

because i want to separate the land and sea part of earth~

layer > layer style > color overlay
i add a blue colour to my land of the earth~ to make it more sharp~
drop shadow has been added to make it look like 3D~

the above showed the image after adjusted~

next~

make the earth active~

and then i use the same technique to enhance the photo~

color overlay and drop shadow for the earth~

after that~

i combine the blue land part and the earth~

i ctrl and click the two layer~

right click either one and choose merge layer~

then the land layer and earth layer mixed to 1 layer called earth~

after the merging~i can move the earth easily without considering either the land layer or earth layer~

seem like the earth is not enough bright~

so~

image > adjustments > brightness/contrast

image > adjustments > shadow/highlights
this is to make shadow for earth~




filter > sharpen > unsharp mask
i feel the ebee is not enough sharp when i enlarge it~so i use the unsharp mask~
i adjust to 114% ~












after the sharpening~
i arrange my ebees around the earth~
i use ctrl + alt to make copy of ebee~
and i use free transform and flip horizontally to make ebee with 2 directions~ 

for the FOM platter~
left one is before edited~and right one is after i edit using photoshop~

at first the FOM word is dark in colour because initially is grey colour~
so i use selection tool to select the F O M~
image > adjustments > replace color
i put hue and saturation to the minimum~and lightness to max~so that the outcome is white colour like the right side of below pictures~




for the last image~
the mmu logo~

i use filter > distort > lens correction
because initially the mmu logo slightly tilt to left~
so i need to move it tilt right a bit~

below picture showed that i had select the logo from the white background~
i use magic wand, rectangular marquee tool, elliptical marquee tool, polygonal lasso tool~
to select the logo slowly and neatly~
after that i right click and press select inverse~then delete to delete the background color..





this is my jpeg file on lab3 and 4~
stay tune for last part~
thank you~