Assignment 3 ( Photoshop and Flash)

To proceed with my assignment 3, I have used the Adobe Photoshop and Adobe Dreamweaver to assist me..

Now I will show you all what I did for this assignment..

First of all, I want to create the buttons for my page which is the Activities for the four places in Pahang. I tried doing the buttons just as I plan which is using vertical text on the pictures of the places. However, they seem hard to read and ugly so I changed my plan. So, now I start off with a picture of the place. 

The picture above is the picture of the cable car in Genting Highlands. Now, I want to add a rectangular box using the Rectangle tool. Then, I change the opacity. After that, I add a Horizontal Text and rotate it. The end result is something like this. 

I did the same for the other 3 buttons. 

Ok, that's all for the buttons. Now, I move on to the images that I want to use for Flash. It is almost similar actually. 

That's about all for Adobe Photoshop. Now, move on to Adobe Flash. First, I import the files to the library. Then, I set the size to 600x500. The, I just drag the image in and resize them. 

After arranging and resizing, then click on the left button and press F8 to convert it to symbol. Then, I change the name to left and choose buttons for the type. I did the same for the right button.

Then, right click on the button and click Actions.

After that, I type the command into the menu. The command is on(release) {gotoAndStop (Frame)}. For the left button, I put 4 as the frame because I got 4 images and the left button would lead the user to the previous image which is the 4th image. As for the right button, I put 2 in the frame blank because it would lead the user to the next image which is the second image. 

I did the same for the other images. Just change the frame number for the command. After that, I press Alt+Ctrl+Enter to test the slide show. It moves very fast but I stop it to check whether the button works or not. 

So, now to make it stop looping back and forth, I want to make it stop so that the user can click the buttons by themself. I press F9 for the actions menu. Then, I put this command. stop();

So, that's it for Adobe Flash. Will move on to Adobe Dreamweaver soon. :)

Planning and Design for Website

Here comes the final project of Digital Media 1! In this project, we are suppose to create a website with a theme of  "Promotes Tourism - Malaysia Holiday Destination". We are in a group of 5 and each of us have their own task to do. My part would be to create a page about activities in Pahang. 


Description on the individual ideation of the link


The idea of the link is to provide information regarding the activities in the four places that we chose for Pahang which is Genting Highlands, Cameron Highlands, Taman Negara, and Pulau Tioman. There are links for transportation, accomodation and so on, hence definitely the viewers of the site wants to know what they can do at those places. That would be the ideation of the link called "Activites".


Objective of the link


The objective of this link is basically to inform and attract the viewers about the activities in the four places. There will be information on what they can do at those places, when will the activities be available, how much they have to pay for certain activities and images regarding the activities such as jungle trekking, diving and so on. I would like to enable the viewers to gather their information with little effort on their side so, I would divide the activities into their respective places and just within few clicks. 


Design of GUI


We have decided to divide our website into four famous places of Pahang which is Genting Highlands, Cameron Highlands, Taman Negara and Pulau Tioman. Since there are four places and there are many activities in each place, so it would be crammed up if all the information are being simply put into one page. Hence, I decided to design my interface like below.

The screen shot above will show the page after you have clicked on Activities on the Home page. The four small boxes on the top half page would be the buttons that link to the four places. I plan to use pictures with a vertical text in each of the boxes as buttons. I will use Adobe Photoshop to help me on that. And, for the big box at the bottom half page, I would like to put a slide show or maybe an animation regarding the activities in those four places. In this case, I would use Adobe Flash to help me. 

As for the layout above, this is what I planned on how to arrange my information when you clicked on any one of the four buttons. There would be pictures of the activity and information on that activity itself. I believe by this way, people could find their information easier. And if they want to get information on other places, they can just go back to the Activities page and choose from there. 


P/S : Please note that the design of GUI did not include the banners and buttons for the whole website. This is because there might be still some changes in the home page. 


Flow Chart of Individual Site

This is the flow chart for my link. Basically, under Activities there will be the four places that I've mentioned before. And below each place, there will be images and text to inform the viewers about the activities they can do there. 


Reference


For now, I already have some references where I gather information from. I will find more references for pictures to put into the website. Here are the references. 

http://www.kuantan-hotels.com/genting-highland/activities.htm

http://www.kuantan-hotels.com/cameron-highland/activities.htm

http://www.kuantan-hotels.com/activities/nationalpark.htm

http://www.kuantan-hotels.com/impiana-inn-tioman/activities.htm

http://www.asiatravel.com/malaysia/tioinfo.html

http://www.rainforestresort.net/activities.html

I'll be back with more updates. Thank you. :)

My e-wallpaper~~

Well, here comes the compilation of Adobe Photoshop...I have to come out with an e-wallpaper for MMU FOM Open Day on 21st March 2012...I started with the 5 images that i have chosen...

I don't like the road so I use the Clone Stamp tool to turn it into grass...

Then i go to Layer>Styles to do some custom edits...

After that, I use the Adjustment tool to increase the contrast...

After that, I add another effect called Fresco...

Next, I move the graduate image to the FOM building...

It seems that the graduate image is not so obvious...so, I added some effects through the Styles menu again...

Now, its time to move on to the other images...I duplicated the degree image and rotate it...

Next, I want to make the images look more appealing and attractive so, once again I move on to the Styles menu...Then, I add the effects including Stroke...You can see what effects are done at the bottom right corner under the layers...

After that, I added text using the Horizontal Type Tool and I even added arrows and shapes using the Elipse tool and Line tool...

I also added a Star shape behind the text to make it more attractive...

Lastly, i use the gradient tool to light up the background...

That is my final result for e-wallpaper! Actually, there are many more effects that you can explore but as I am a beginner, I am satisfied with this.. Thank you! :)

Retouching and Enhancing Digital Photographs

Now we have come to the retouching part!! Woohoo! Wait! Do you even know what is retouching? Touch the picture again?? Haha.. It's basically making the photo look better with effects and remove or add whatever you want or don't want..

For now, I will show you some of the basic skills of retouching...I select the FOM building picture for this...

I don't like the roads to be seen and I prefer the land would be all grass...So, now I will use a clone stamp tool to make it work! 

After clicking the clone stamp tool, now hold Alt and use left click on your mouse to drag it along the grass area..Then release the Alt button and just using left click, drag it at the road..It will end up like this...

Oh ya! You can actually adjust your brush size for the difficult parts...Here, I'll show you..

Ok, now we'll move on to the basic effects in Adobe Photoshop...Here I'll be using the sponge tool...

I used the sponge tool on the grass in which certain part I make it more saturated and certain part its desaturated..

Next, I use the Auto Tone function at the Image menu...

Next, I also tried using Shadows/Highlights...

It end up like this...

Now, I want to insert the Graduate photo into this image of the FOM building...I want to retouch it too...xD

I use the Hue/Saturation and Shadow/Highlights skill again here....I'm still new and so I don't know much about the other effects yet...But I will explore it and share it here again next time!

Lastly, you can try adjusting the colours, brightness and so on...for example, you can use the level function and customize your own adjustments...

That's roughly all the basics for retouching and enhancing digital photographs...See you all next time!

Tutorial 1 ( Selection )

Welcome to the first step of my journey. The first destination is the adobe photoshop selection process. I will show you how to select the images that you want from the raw images.


First of all, you need to search for raw images from the web. These are the raw images that I selected :

The FOM building

A graduate

Graduate hat

a degree

MMU logo

Now we will proceed to the selection.


Let's start with the FOM building. First, open the file or the image using Adobe Photoshop. Then, use the rectangular marquee tool (second top left menu) select the area you want to select by simply clicking and dragging on the image.

Then, click on the magic wand tool (fourth top left menu) and click on the areas that you don't want to have in your selection. This process might need some patience so be careful and the result will be something like this.

Next, just click on the move tool ( first top left menu ) and move it to a new clipboard and you will have something like this.

Allright, we are done with the FOM building selection so we will now move on to the graduate image. Open the image just like what we did for the FOM building.

Next, use the rectangular marquee tool again and do the same.

After that, use the magic wand tool and do the same thing. It will turn out like this.

Then, just drag it to the other clipboard by using the move tool.

Here you go. Two images already been selected. You can do the same for the other images as well.

I forgot to show you guys on how to drag it to another clipboard. Sorry for that. No worries, I'll show it here.
After you have done selecting the image, just create a new clipboard by going to File<New<International Paper. Then, click on the Arrange Documents icon as shown below and choose whichever style you like.

After choosing the document arrangement, you will have something like this.

Then, just click on the move tool and drag it to the other clipboard. You'll now have 4 images.

Now, I want to duplicate the degree image and rotate it. So, here's something new to learn. Watch and learn. First, select the degree image using the same method and then go to Edit<Transform<Rotate.

After that, now we'll see how to duplicate it. Make sure you select the image first and then, hold ALT on your keyboard and drag the image using the left click on your mouse.

Now we have two degree images!! Isn't that cool? Allright, so you can use the same steps for other images as well. And I had add in another image which is the MMU logo to the selection. Hence, all together I have five images.
I have a rough idea on how to arrange the images for the FOM Open Day design. It will look something like this.

I will add some texts in between the images so stay with me along my journey and we'll see where it goes...


Thank you for your time!