Fireworks CS3 Cow_Pattern _ Paste_inside_Text or Graphics


Written on February 19, 2009 – 6:46 pm | by awei

How to Paste Pattern inside Text or Graphics
For Text

  1. Type COW in Fireworks CS3 Canvas.  Apply Stroke color (black, brown? your choice)
  2. Get a picture of cow’s pattern.  Resize and Drag the photo to cover the text
  3. Select photo> Ctrl + C to cut the photo
  4. Select text > go to Edit menu – Paste inside the Text
  5. Then you get your text in COW pattern.

For Cow’s Photo in Shape

  1. Draw a Star > Right click on Star and click on Convert to Path
  2. Go to modify menu> UNGROUP the star path
  3. Now, get a photo of a cow > copy & paste into Fireworks file>move the star photo to cover cow’s face
  4. Select photo, CTRL + C to cut the photo
  5. Select the STAR, Edit menu – Paste inside.
  6. Da la! Now you have your Super Star – Cow.

Create Simple Web 2.0 Logo


Written on February 19, 2009 – 6:24 pm | by awei

See this link and learn from the example.  Have fun and you will love the result.

Fireworks CS3 Instruction – How to Create Reflection Text


Written on February 19, 2009 – 6:15 pm | by awei

Resource from Web 2.o Entrepreneur

Reflection effect

Looks good enough to you? Now let’s get started!

Step 1 : Write the text

Obviously you need *something* to apply the reflection effect to. So open up your Fireworks application and write some texts on the canvas (using the Text tool). It doesn’t matter what fonts or colour you wanna use, just get some texts on the canvas quickly.

Reflection effect using Fireworks - Step 1

Step 2 : Duplicate the text

We’re going to use the duplicated text as the reflection later. So if you’re wondering how to duplicate the text, here’s how: Copy and paste. Just select the text (use the Pointer tool) and then press CTRL+C (to copy) and CTRL+V (to paste). This will paste the very same text on top of the original text, so it’ll look as if nothing happened.

Reflection effect using Fireworks - Step 2

Step 3 : Flip the duplicated text vertically

This shouldn’t be painful. Just go to the toolbar menu and find Modify -> Transform -> Flip vertical.

Reflection effect using Fireworks - Step 3

By now you should see the original text behind the flipped duplicated one. It’ll look something like this:
Flipped duplicated text

Step 4 : Move the flipped text below the original text

Push the *downwards* arrow button on your keyboard until the flipped text is placed just below the original text.

Push downwards arrow Reflection effect using Fireworks - Step 4

Alright…. the reflection is now in place. What you need to do next is have the bottom part faded so that it looks more realistic… let’s proceed.

Final Step : Fade out the bottom part of the duplicated (and flipped) text

To do this is easy. There’s a build-in Fireworks command that can do the fade out for you. Simply go to the toolbar menu and click on Commands -> Creative -> Fade Image. A new dialog box will pop-up giving you options of where you want the image to be faded out; either top, bottom, sides, etc. We want to fade out the bottom part, so use some common sense and choose the right option Laughing

Reflection effect using Fireworks - Step 5A Reflection effect using Fireworks - Step 5B

By doing that, the reflection is now faded out. If you find the reflection to be revealing too much, just drag the controller pane up a bit and adjust until you’re satisfied.

Create reflection effect in Fireworks - Step 5C

Done! Wasn’t that hard was it? Having this steps mastered adds you another graphic design skill that you can apply in many things (logos, menus, buttons, etc). Now go repeat everything again with different fonts and colours, add some gradients or anything so that you can remember the steps like the back of your hand. Cool

Reflection effect using Fireworks - Final

Tags:

Instruction of Fireworks cs3 – convert text to path


Written on February 19, 2009 – 12:49 pm | by awei


click to see the instruction

2_13_Photoshop Project for your Portfoliio Site


Written on February 13, 2009 – 12:16 pm | by awei

Project guidelines:Make a Collage of your favorite singer/movie star/runway show/or your own choice

1.  First, you make a root folder for your personal site-name the site – Portfolio
2.  Create 2 sub folders under Portfolio:  html and assets folder
3.  Go to google/Flickr.com for 3-5 images and save them under assets folder.
4.  Use Photoshop to open them up one by one.  Drag them onto the background image into layers.
5.  Use Mask layer to create a merging photo.  If you prefer to use quick selection magic wand to select them before you drag them to the background image, that’s fine with me.
5.  You can change the opacity of the images.  You can also use Image menu or Filter effect to spice up the images.
6.  Save the final result as collage.psd and collage.jpg file.

Web Class Week 3_ 2/6/09 Class agenda


Written on February 5, 2009 – 6:52 pm | by awei

Dear class,

Last class, we learn the Interface of Dreamweaver program, define the site, locate the root folder, insert logo, create folders to host your html files for our Tea online store.  Todday, we are going to learn new technique, work on assignment for lesson 3, and have a quiz for what we learn through the week.

P7 Agenda:
1.  Dramweaver CS3 Chapter 2 & 3 (Interface + DW Basics)  
2.  Review (slide show for Chapter 3)
3.Assignment for chapter 3
4.  Quiz (if we have time)

p1 Agenda:
1.  Give out DW practice back
2.  Continue on DW Interface + Concepts for chapter 3(site map, relative v.s. absolute link, view buttons)
3.  Review for chapter 3 (ppt slide show)
4.  Assignment for Chapter 3
5.  Quiz (if have time)

 

 

 

Hello world!


Written on February 5, 2009 – 6:33 pm | by awei

Welcome to Mrs. Wei’s Basic Web Design class blog.