Dreamweaver- Assignment 2

For this assignment, what we have to do is creating a website using dreamweaver. The website is mainly about individual website which can will used as a resume for a job seeking reference.

Continued from the first dreamweaver tutorial, I will proceed them by creating new websites. In this website, I hope that my target audience can get my complete info at once. Hence, I include few webpages like homepage (welcoming page), biography, resume and contact. There are total 5 links I made. The links will connect to the respective webpages and my blogsite as well. 

STEPS

Firstly, I has made some buttons for the links by using photoshop. I saved them in png form in order to get a transparent background. 

   

Next, I made my banner and welcome pic as well by using photoshop.

Moving to dreamweaver now. After saving the homepage as index.html, I import all the buttons and images needed. I made my homepage as simple as possible where I only put the banner and 'welcome' image plus links. I plan to use only text for the links that connected to other pages to keep my homepage simple.

homepage

But for the next webpages, I will use the buttons I made instead of the words. Same way in linking webpages to the texts, I link all the buttons to the respective webpages and links. Except for the homepage, I have used the same layout for the rest webpages beyond in order to make my website looks more uniform. 

layout chosen

The next steps continued by typing all the infos needed in respective webpages. In resume page, I had created    

table for education section to insert all my education info in a simplified and complete form. I made some formats on the text and table design by making setting in the properties window located at the bottom. 

resume page 

For the contact page, I link my email address by inserting email link. The audiences can send email to me just by clicking on it by this way.

email link

Last but not least, I will set the background of my website by going modify>page properties. I chose to use an image as my background and hence i go for browsing tab under background image option. I use a simple background to match with my layout design.

page properties

background image

and that's how my website done after I have saved all of them in html respectively.

p/s: I learnt to emphasize white space concept during lecture. So, I decide to simplify my website design by not using too much images and colours. since I used a grey background for my banner, I apply the website design mostly in grey colour but in a diversified form.

DREAMWEAVER tutorial 1

as we completed our first assignment which is the photoshop assignment, we are now proceeding to the 2nd adobe software--- dreamweaver that we going to apply it too for our final assignment.

for the first tutorial, we had learned how to create a website. what we had done were creating few webpages which including homepage, blog, hobby, background and contact.

Here are the steps in approaching dreamweaver during my first tutorial:

1. Open a folder in my pc and named it as "home". then, import any files or images that will be used in the website into it. For our 1st tutorial, we will use our e-wallpaper. hence, I put my e-wallpaper into the folder.
2. Start the dreamweaver and go to site>new site. After putting the name and import the "home" folder, the folder will appear under the files window at the right hand side. 
3. Next, goes to file>new to create a new webpage. We will import e-wallpaper into it by dragging it from the files window. Then, make the page as our  homepage by save it in index.html.
4. same methods goes for other webpages. Type or insert any relevant info to respective webpages and save them at html form respectively as well.
5.  Now, for the links part. In the homepage, we will insert a table and key in the respective titles of the webpages. Link the text (title) then by going to insert>hyperlink and link them to their own html file except for the blog. the blog should be link to the blog website. 



link

6. Saving all the changes and try it by preview in browser.

*the index.html should be in small letter (same for other .html)
  the image import can be in any form. (either jpeg or psd file)
 make preview by using firefox browser.

throughout this tutorial, I had learnt how to insert table, images and links for my websites.

And hence, I will proceed them to my second assignment.

photoshop assignment (advanced layering)

finally, it comes to the last step for my e-wallpaper....

Just following what Mdm Lydia had announced, I did the advanced layering as my last step for completing this e-wallpaper.

I had made some practice based on the e-book. First, I found a cube shape..

 I decided to insert fom building, mmu logo and fom website into this cube. hence, i use vanishing point.
during this process, the first thing I have to do is drawing grid line using draw plane tool in the vanishing point tool. I continue the step by doing select pixel of the layer > cut it>  paste it on vanishing point.

drawing the plane

cut the layer I want put onto the cube

paste it on the cube (in vanishing point window)

final product

APPROACHING E-wallpaper..

I was headache thinking of what shape or object should I use in this e-wallpaper... After browsing the web, I had found this matrix cube clock. I wanted to make them into TV screens which used for displaying the fom related images....

matrix cube clock

Next, I used and made selection from the following pictures:

fom stand sign

fom building

mmu graduation

and I had applied vanishing point and done the advanced layering which is putting the images onto the cube clock...

I made some adjustments on the layers (images) before I merged all the layers together (merge visible). The result comes out like this...

(AFTER) screen

after that, I selected (with quick selection tool) and moved this tv screens into my e-wallpaper that I had done for tutorial 3 & 4 and named it as cube screen layer. In between , I made some adjustments and added effects on the layers as well... for the info text, I added gradient effect on it to make it more visible.

(before) from last tutorial

(After) 

Here I had completed my e-wallpaper... I had learnt many photoshop skills throughout this assignment. Hopefully, I can fully utilised them on my group assignment.

tutorial 3 & 4 - enhancing & retouching skills

After attending the tutorial class last week, I decided to make a major change for my e-wallpaper which will be in outer space theme. Still, i will reserve some images that I selected during 1st tutorial.

so, I began by selecting the new images (space shuttle & astronaut) that I want. Both images selected by using quick selection tool.

the original images as shown as below. I obtained all the images from the website through googling.

I choose the image below as my background. I removed the moon by using clone stamp tool since I don't want it and I had reduced the noise of the image. later, I put the red carpet together into the fixed background.

BEFORE

AFTER

Now, I replaced the colour of the space shuttle by referring to the e-book. What I did is selecting the space shuttle by rectangular marquee and then pick up the portion and color I want replace on it.

Before

After

Once putting the MMU logo, space shuttle and astronaut layers into the background, I started typing all the words. This time I playing around the effects through blending options on the fonts. The figure below shows how I did effects for the 'F' and same went for 'M'. I did some free transform by resizing and rotating for the fonts and the earth (selected in tutorial 1) too.

As you can see, the "FOM" word  with effect had created. I will turn to the "OPEN DAY" now. I had learnt some new skill from the e-book which is typographic design and I had applied it on the "OPEN DAY".

What I did:  choose a glitter background > place it on the "OPEN DAY" layer> click create clipping mask

And finally...

then, I continued type in all the info.... and enhancing my e-wallpaper by making some adjustment such as highlight and shadow, light and contrast, hue and saturation and etc. Here is my final product.

GROUP ASSIGNMENT-- Proposal

ok.... finally, I have started the group assignment by writing the proposal together with my group mates. basically, my group name is NEMO ( it was originated from the movie 'Finding Nemo') and we have five members altogether. They are Guo Rui aka. Ray (leader), kavitha, lee swan, chin lee and me.
 
I had read through the assignment guideline, and what i know is that each tutorial group is going to create a website under different topic of tourism categories. The theme of the website is " Promotes Tourism- Malaysia Holiday Destination". And as i known, our tutorial had a voting section to choose the topic and the finalist are food and states. actually most of the members had pick up food as topic but unfortunately it has been taken by other tutorial group and hence we have to take the 2nd option which is state. Whereas for our assignment group, we took Penang as the state and we are going to do the website relating to "Visit Penang- Bukit Bendera" which is about promoting Bkt Bendera ( Flag Hill / Penang Hill).

As I busy doing my individual assignment beside the group assignment for digital media 1, I really have no idea to proceed the tasks. so, when it's came to the days we need to do proposal part, we totally having conflicts about it. Luckily, we're able to fix all the problems after discussing with group members and other coursemates. And hence, we succeed to come out with our proposal at the end.

before we start our proposal, we had done several research about Bkt Bendera.
Here are some contents in my group proposal:
Objectives: The main objectives of our website is mostly about promoting Penang since Bkt Bendera is one of the landmark in Penang which attracts numbers of tourists over years.
Demograpics: Since Penang is one of the most visited place by all range of people in Msia, we target all generations as our target audiences.
Sub-topics: After discussing, our members decided to set introduction, how to go, attraction, facilities and accomodation as the five sub topics in our website.
Job assigns: since we have 5 members, we agreed to separate the 5 sub topics to each members in order to save up time. I am in charge of introduction part. We will do all the further research and info required individually based on our sub topics. However, we will still work together in designing and working out the website.

this's just for the proposal part, we still lots of work to follow up in coming days. Hopefully everything will get better throughout times. though we are not majoring in multimedia or design course, we still will try our best in doing the assignments.

we have create a blog of our group assignment and the link is: http://statepenang.blogspot.com/

LAB 2 - Layering

the photoshop tutorial for this week is about layering.
as told by Mdm Lydia, I named all the layers which I failed to do so for the last tutorial.

Continued from the last tutorial which is selection, I proceed my e-wallpaper with layering.

First of all, i start a new paper with A4 size. I input the fom building which i have selected last week as the 1st layer in the new paper and named the layer as fom building.

The next object i put inside the new paper is the red carpet. I adjust its size by using transform control.

↓

I find another new image with a welcome gesture girl and select it with quick selection tool. same as previous, i move it to the new layer and named it as welcome girl.

 In order to obtain an appropriate background, I have used plenty approaches. and at last, I choose to use images like retro light and grass to get better background together. I do some adjustment with the both layers such as lightness and contrast, colour adjusting and so on. In between, I also have done the MMU logo with horizontal type tool to type the words and combine it together with the logo selected.

 ↓

next, I continue using horizontal type tool to type the "FOM OPEN DAY" and all the info required. I did the colour effect on "FOM OPEN DAY" with gradient tool after selecting the pixel by right click on the thumbnails. Same goes for the info words. But instead of make a color gradient on the fonts, i make some shadows effects on the info fonts.

 Before going to the last step, I decide to duplicate the fom building image and make a blending options by setting the original fom building layer a 15% opacity and multiply blend mode. after that, i somehow adjust all the images and layers little by little to obtain a better effect.  

and finally, this is my final product for layering.