miss.angieshen.com

[The SEO Rapper]

[Quick Tour of Dreamweaver]

[Setting up your Website Files]

1. In your Shared Drive, create a folder called “Tutorial Site”.
2. In that folder create another folder called “Images”.
3. Start Dreamweaver.
4. Set up a new site by going to Site -> New Site
5. Enter your site name, browse to the folder “Tutorial Site” for the root folder, and browse to the “Images” folder for the images folder.

[Inserting Text & Images]

1. Use Dreamweaver in “Design” mode. (Click “Design” where it says “code” & “split” & “design”)
   • Type some text on the page and insert a picture.
   • You can insert a picture by going to “Insert -> Image” or by finding the file in the files panel and dragging & dropping
2. Change the title from “Untitled Document” to “Text & Images”. This will change the header in the web browser as well.
   • The title is located at the top of the main window, underneath the quick buttons.
3. Save the file in the “Tutorial Site” folder called “Text.html”

[Layout Paragraphs & Images Layout]

1. Create a new blank html file by going to “New -> File“
2. Copy the Lorem Ipsum text from www.angieshen.com/lorem.html
3. Paste it on your html file.
4. Insert an image
5. Select the image then  Under the “Align” drop down in the properties panel choose “Left” in order to align the image to the left of the paragraph text.
6. Change the title bar title to “Paragraphs & Image Layout”
7. Save the file in the “Tutorial Site” folder called “paragraph.html”

[Linking to files and websites]

1. At the top of paragraph.html type the text “Go to Text & Images”.
2. Highlight this text and link it to text.html by dragging the circle beside the “link” box to the file you would like to link to.
   
   
3. Highlight any word in the paragraph and in the link box in the properties panel type the full url of your favorite website. Eg. “http://www.pantherathletics.ca”
4. Save the file and preview it in a web browser. File -> Preview in Browser
5. Test the links.
6. Go back to “text.html”
7. Add “Go to Paragraph Layout” to the top of the page and link it to “paragraph.html”.
8. Link the image on “text.html” to another one of your favourite websites.

[Creating Tables]

1. Create a table at the bottom of “text.html” by going to “Insert -> Table“
2. Create a table, with 5 rows and 3 columns.
3. Merge two of the cells together, highlight two cells, then right click on the selection and find the merge cells option.
4. Split a cell into 3 columns, right click on a cell and find the split cell dialog.
5. Resize the table so that it fills up most of the screen. Select the table by clicking on a cell border. Grab the black box in the bottom right of the table, click and drag until the table is bigger.
6. Change some of the cell’s colours by selecting a cell and changing the Bg option on the properties bar
7. Change the table’s border colour by selecting the table and changing Brdr color on the properties bar.
8. Change the table border’s thickness by changing the number in Border from 0 to 2 or 3.
9. Center the table by changing the alignment on the properties bar.
10. Insert some text into one of the cells.
11. Change the vertical alignment of this cell to top.
12. Change the horizontal alignment of this cell to centre
    .
13. Drag an image from the files panel into one of the cells.
14. Link the image to the “paragraph.html” file.

[Today's Task]

Must haves:

1. Create a mini website with 3 pages about you or about anything you want.
2. Each page is one html file.
3. Have the same menu on every page that allows you to link back and forth between pages.
4. Use a main table for the layout of the menu and content.
5. Each page must have a header title, at least one image, and some text (doesn’t need to be alot).

If your interested in getting even more creative…some of these begin to introduce you to Actionscript and programming using flash. Try them out to start to see what the possibilities are.

Using a microphone to control movie clips
http://www.kirupa.com/developer/actionscript/microphone.htm

Creatign a shine effect
http://www.kirupa.com/developer/mx2004/shine.htm

Creating a Mousetrail
http://www.kirupa.com/developer/mx/mousetrailer.htm

Follow the Mouse
http://www.kirupa.com/developer/flash5/follow.htm

Creating a Shiny Orb
http://www.kirupa.com/developer/mx2004/shinyorbs.htm

Creating Masks
http://www.kirupa.com/developer/mx2004/masks.htm

Liquify an Image
http://www.kirupa.com/developer/mx2004/liquify.htm

Task: Design a personal logo for yourself using imagery to replace certain letters in your name. Your logo should represent how you want to be known.

Must Haves:

1. Your name or nickname.
2. At least one letter that has been replaced or manipulated into imagery.

HAND IN:
1. Post your logo to your blog.
2. Answer this:

a) How does your logo represent you?

b) What feeling do you want people to get when they see your logo?

[Examples]

There are a few decisions to make while designing your logo.

[Purposeful with Colours]

Be careful with the number of colours that you choose. There is no rule but keep i mind that the more colours you choose the more expensive it will be to print. Most effective logo’s out there generally stick to 1-2 main colours. Unless you see companies purposely choose to use “rainbow” colours. It is easier to remember logos that have a specific colour associated with it.

RED - energy, war, danger, strength, power, determination as well as passion, desire, and love.

ORANGE - joy, sunshine, and the tropics. Orange represents enthusiasm, fascination, happiness, creativity, determination, attraction, success, encouragement, and stimulation.

YELLOW -  joy, happiness, intellect, and energy.

GREEN -  growth, harmony, freshness, fertility, and safety.

BLUE -  trust, loyalty, wisdom, confidence, intelligence, faith, truth, and heaven.

PURPLE -  power, nobility, luxury, ambition, wisdom, dignity, independence, creativity, mystery, and magic.

BLACK - power, elegance, formality, death, evil, and mystery.

**Must haves:
About page 
Personal Polaroid
Background Faked
Personal Profile

[How to hand in your blog]

Click comment to the left. Leave me a msg providing me with
1. Name
2. Blog Web address
3. Class #

[Personal Profile Questions]

1. Answer on an “About” PAGE

a) Name: Angie “miss ang” Shen
b) Known for: Running around in the sand.
c) Interests: Beach volleyball, Yoga, Ultimate Frisbee…
d) Favourite music, shops, shows…
e) How do you have fun?
f) What are you doing when you feel good about
yourself? How so?
g) Who do you enjoy spending time with? Why?
h) Is freedom important to you? What do you do feels freeing?
i) Picture yourself at your happiest…why so happy?
j) With a million dollars i would…

In order to really create the illusion of the polaroid sitting on your blog wall, set the background color of your canvas to match the color of the wall. Check out the following examples.

In example “b” I used the [eyedrop tool] to get a sample of the wall colour, and filled the background colour the same colour. As you can see the illusion of the floating polaroid is pretty good. However…

Details make a difference!

If you look closely in example “c”, I actually copy the texture of the wall not just the colour…making everything seem even more seamless. Sometimes when you are working with photoshop, you may intentionaly be making things abstract. But in the case that you are trying to make things look realistic every little detail that goes “un-noticed” is what makes the difference.

People FEEL quality.

a) Original Color	b) Eyedropped Color
c) Copied the Texture	d) Cut off kills illusion

[How To]

1. Have your blog visible on the screen with the about page visible.
2. Take a screenshot of your monitor by pressing [Print Screen] on your keyboard.
3. In photoshop open a new canvas. [File -> New]
4. Paste your screenshot on this canvas [Edit -> Paste] or press Ctrl V
5. Use the [eyedropper tool] to sample the color you will use for the background of your polaroid.
6. Open your polaroid PSD file and fill the background layer with this colour.
7. Save the polaroid as a JPG.

“What is a polaroid?”

A Polaroid is an instant camera with self developing film. When people refer to a “polaroid” they are referring to the picture taken with this instant camera.

Task: For the “About” section of your personal blog, you will create a “polaroid” of yourself cropped from a picture taken in class.

**Must haves: Be square, have name, show face, sun is at top left, background color matches theme.

POLAROID TUTORIAL

Grab a picture of yourself.
 
PREPARE THE CANVAS & THE PICTURE

1. Open the picture in photoshop.
2. Using the [Crop Tool] – Crop in the shape of a square an interesting portion of the picture.
3. (hold shift down to make square)
    
4. Resize this picture to be 150px by 150px, 72dpi
5. [Image -> Image Size] or [Right Click the Title Bar of your image -> Image Size]
6. Create a seperate canvas by going to [File -> New] set this canvas to 250px by 250px, 72dpi
7. Choose a background color for this canvas and fill it using the [fill tool]
    
8. Make sure both your picture and your canvas is visible in your window.
9. Move your picture on to the canvas by selecting your whole picture [ctrl - a], then using the [Move Tool] and dragging it over to the canvas. (Name this layer “Picture”)
    
    

CREATE THE “POLAROID” LOOK

Create a new layer and move it under the elephant picture.

1. Create a new layer and move it under the elephant picture.
2. Use the [Marquee Tool] and draw a white rectangle larger than the elephant picture so that it leaves a white border. To give it the real “poloaroid” look leave a larger border at the bottom than on the other sides. (Name this layer “Polaroid”)
    
3. Fill the rectangle on the “polaroid” layer white.
4. Choose a font and type your name on the larger white border at the bottom of the polaroid. (Name this layer “Name”)
    

CREATE THE REAL “3D” EFFECT (DROP SHADOW)

1. Use the [magic wand] and select the white polaroid.
2. Create a new layer and move it under the “polaroid” layer. Name this layer “shadow”
    
3. Select the new layer and feather this selection by going to [select -> feather -> enter # pixels]
4. Fill the selection on the “shadow” layer with black using the [fill tool].
5. Use the [move tool] and move the shadow so that it is as if the sun was coming from the top left.

TILT THE POLAROID – MAKE IT LOOK THROWN ON THE PAGE

1. Link the layers “picture, name, polaroid, & shadow” together by clicking the links.
2. Use the [Transform Tool] (ctrl-t) to tilt the picture as you wish.

Now, save the file as a JPG to be uploaded to your “About” page or as a PSD for later use.
 

Nice! You’re DONE!

For today’s class task I’d like to challenge you to figure out a solution to the following problems on your own.

*Hints* (though there are many ways)
You will probably select an area, copy and paste an area, flip horizontal maybe flip vertical, rotate. Then to clean up you may even use an [eraser] with a soft edge, or the
[smudge tool] or [blur tool]…

To Flip - Edit > Transform > Flip Horizontal/Flip Vertical/Rotate
To Smudge – Click Here

Task: Two clients have approached you with the following problems. Help solve both and post before and after shots on your blog.  Then answer the question “How did you do it?” for each.

[Problem #1]

Please help me! I am cat sitting my friend’s cat for a year while she is teaching english in Japan. The cat
got into a fight with the
neighbourhood raccoon and lost an eye, but now my friend misses her cat and wants a recent picture of him. Will you please give her cat an eye so I can send it to her? She can’t find out! She’ll lose it!

[Problem #2]

Hello! I am so proud of my daughter she met the prince and was in the paper. I would like to frame this article about her but i’ve ripped it by accident. Could you please restore it for me so I could print it
to frame?

What’s a blog?

A blog is a website that is usually contains regular entries in reverse-chronological order. Like a diary,
commentary, or events.

Task: Create your own blog using WordPress. Include an “About” page and use this blog as your portfolio to display your work throughout the semester.

**Must haves: About page, Personal Polaroid, Personal Profile, hand in this task by leaving a comment to this post indicating your blog web address. (click “comments” to the left)

SIGN UP FOR A BLOG

• Use your ”yourname@limestone.on.ca” email address to sign up for a blog at http://www.wordpress.com
• When you choose a domain name note that your domain is the name that you will use to access your blog on the internet. “http://yourBlogName.wordpress.com”
• Go check your “yourname@limestone.on.ca” email on first class for a confirmation email from WordPress and click the link to activate your blog.

CHOOSE A THEME

1. Go to [Design -> Themes]
2. Scroll down you will see 5 pages of themes you can choose from.
3. Choose one you like and click “Activate Theme” on the top right corner to activate it.

EDIT YOUR “ABOUT” PAGE

There are two sides to your blog. The public view side, and the admin side. The admin side is where you can add/edit your posts etc. The view side is where the
public gets to see what you’re sharing with the world.

1. Sign in to the admin side by going to “http://yourBlogName.wordpress.com/admin”
2. Go to [manage -> page]
3. Click “About” and edit the contents.

ADD YOUR POLAROID
*Skip this step and come back to it if you haven’t created it yet.

1. Click the 1st icon beside the words “Add media” to add an image.
2. Click “Choose files to upload” and choose your polaroid JPEG.
3. Choose “full size” then click “insert to post”.

TYPE YOUR PERSONAL PROFILE

1. In the editor answer the following questions for your Personal Profile in the about section. (use full sentances)

a) Name: Angie “miss ang” Shen
b) Known for: Running around in the sand.
c) Interests: Beach volleyball, Yoga, Ultimate Frisbee…
d) Favourite music, shops, shows…
e) How do you have fun?
f) What are you doing when you feel good about
yourself? How so?
g) Who do you enjoy spending time with? Why?
h) Is freedom important to you? What do you do feels freeing?
i) Picture yourself at your happiest…why so happy?
j) With a million dollars i would…

2. Click Publish.

Congrats! Your own blog!

*To edit your page find your page under ”Manage”
in the main menu and click the title of the page/post you’d like to edit.

Hey Hey :)

Last year I quit my design job of 7 years to become a teacher. I taught grade 10 media arts at a school in Toronto. The great thing about working as a designer is that you can work freelance, which I am still doing. Freelance means that I work for myself and can work from anywhere I want in the world and set my own hours. One year after university I went to California to train for beach volleyball, I brought my laptop and did my work on the beach for clients in Toronto.

I am hoping that I can give you a hand this semester by showing you some real world perspectives of the work you’ve been doing in Mr. Russell’s class.

This blog will be where I will be assigning you mini tasks throughout the semester. When you are finished a task you will also come back to this blog and leave me a comment to let me know your task is complete and ready for checking.

You will also have your own blogs setup where you will display the work that you have been doing and will do. This blog will act as your online portfolio.

I’m looking forward to seeing you fill it.

Miss Shen :)

p.s. Check out this site, go to the ‘portfolio’ section.
Click the images, then rollover them to see the before
and fter of photo retouching.

http://www.iwanexstudio.com/