Technical > Avatar/Graphics Help > Fireworks MX Tutorial: Street Signs

Fireworks MX Tutorial: Street Signs

•Select the rounded rectangle tool.



•Draw a rectangle on the layout table, and give it a color of #009966:





•In the Properties window select a rectangle roundness of 20.





•Also in the properties window click the "+" sign on the to open the effects menu.





•Select Bevel and Emboss and then Outer Bevel. Select these attributes:





•Select the Text tool and for your font select Verdana. I gave my text a font size of 115 pixels. Type out whatever name you want for your street sign. Vertically position it in the middle of the rectangle, and have it closer to the left corner leaving a substantial amount of space to the right of it. You may have to resize your rectangle so that the name you type fits in it. In the top right hand corner type either BLVD, AVE, ST or RD (I made the font size for this 45 px). You can also add other things to the sign of course. For example, you could put NE under the street attribute; even block numbers.


•Draw a small rectangle at the bottom of your sign. Give it a border that is 1px wide and a color of #999999.



Don't worry about the inner color of it quite yet. You should have this so far:





•If the rectangle you drew is not highlighted, select it. Now, zoom in 400%. Select the Distort tool.





•Select the top left corner of the rectangle and bring it in slightly as such:




Perform the same action with the top right corner. This doesn't have to be perfect. It won't even be noticeable when you're done. You can zoom out when you're done.




•Select the small rectangle again if it is not highlighted. In the Fill category on the Properties window select Linear.





•In the window that opens, select choose #FFFFFF for the left box, and #E6E6E6 for the right box. With your mouse click in the middle of the two boxes and an additional box will appear. Make this boxes color #999999.





You should have this:





•Do one of the following. Either hold the shift key and select each image, or drag a box around all of the images so that all of them will be selected. Now, go to Modify on the toolbar and select Group (you can also hold the CTRL key and press the G key to do this).




•Now, select the Rectangle tool and draw a small rectangle almost shaped like a square right beneath the small rectangle on your sign. Make it 3/4 the width of that small rectangle at the bottom of your sign. This will be your pole top.




•With your newly drawn rectangle, select the Linear fill in the Fill category again. Place these four shadow colors in there from left to right:





• #FFFFFF
  
• #999999
  
• #E6E6E6
  
• #999999
  



Try to separate as I have them. The white color needs to be in a little from the left so that it looks like the sun is shining bright upon it (you'll see ).

Draw another rectangle right under the one you just finished drawing. Make its width 3 pixels smaller than the one you just drew. Make the height of this one very long (this is your pole). How long you make it is up to you.

Highlight the smaller one again (the one you drew right before drawing your pole). Go to Edit on the toolbar and select Copy (or press CTRL + C). Select your pole and go to Edit again and select Paste Attributes (or press CTRL + ALT + Shift + V). This will paste all of the attributes of the small rectangle upon the pole so that you don't have to go through those tedious steps of selecting the different colors again (I'm always looking for shortcuts ).

You should have this by now:






1. Highlight your sign and then select the Skew tool.
   
   
   
   
   
   There are three black boxes vertically aligned along the left side of your sign now. With your mouse grab the black square that is in the middle (see figure below) and drag it up slightly to change the angle of your sign.
   
   
   
   
   
   Now do the same for your pole top and your pole. You can do your pole top first and then paste its attributes to your pole. It should now look like this:
   
   
   
   
   
   
2. Highlight your pole top and select the Paint Bucket tool.
   
   
   
   
   With your mouse grab the black squar on the right and make it a straight angle (a straight angle in math is a flat line).
   
   
   
   
   
   
3. Select the Elipse tool:
   
   
   
   
   
   Now draw a circle right below your pole top that is the same width as your pole top. In relation to your pole top, try to make your circle the size as in the image below.
   
   
   
   
   
4. With your circle highlighted, select the Skew tool and angle your circle the same angle that you "angled" everthing else so far. Put it right at the bottom of your pole top (none of the bottom of your pole top should be visibile).
   
   
   
   
   
5. With your circle selected, go to Edit/Clone (or press CTRL + Shift + D). Another circle is now laying on top of the other. Hold the Shift key, and with your UP arrow key move the newer circle straigt up and out of the way of what we're about to do (Holding shift while moving objects causes them to move quicker than if without the shift key pressed).
   
6. Select the circle under your pole top, hold your shift key and select the pole top. It should look like this:
   
   
   
   
   
7. Now that both images are selected, go to Modify on the toolbar, Combine Paths/Punch. You should now have the following:
   
   
   
   
   
   
8. Select the circle you moved out of the way. Hold the Shift key, and with the DOWN arrow key move it down until it's right on top of the pole top (none of the top of the pole top should be visible). Go to Modify/Combine Paths/Union, and you should now have the followig:
   
   
   
   
   
9. Go to Window on the toolbar and select Align. Select all of the images by dragging your mouse around all of them. Then press the Align Horizontal Center button in the align window.
   
   
   
   Move your pole top until it slightly covers the bottom of your sign. Move your pole up until its top is no longer seen (hidden underneath your pole top). As you can see, all your images are now lined up as such:
   
   
   
   
   
10. Select your pole top.
    
    
    
    
    Select Drop Shadow in the effects menu.
    
    
    
    Set the following (the color is #666666):
    
    
    
    Now set perform the same for your pole. Unfortunately, Paste Attributes cannot be used to do this.
    
    
    
    
11. Now it's time to set a background. You can use clouds on a sunny day, a moonlit sky, a brick wall, or anything that suits your fancy. Personally, I like the clouds on a sunny day. If you have a photo you can use that will do. The clouds used in mine were from photos that came with MS Office XP. Go to File/Import and import the image on the layout table. It will cover up your street sign. Send it to the back of the layout table.
    
    
    
    
    
12. To make your image have a more of a 3D look, blur your clouds with a Gaussian Blur. The default setting is 4.1, but I set mine to 1.8.
    
    
    
    
    This concludes the tutorial. Boy! It took me about three hours to do this thing! Geesh!
    
    Here is the finished product.
    
    
    
    Because this took a while to create, I may have missed some things. If something is not clear, IM me and I'll fill you in.
    
    Thank you.
    --
    -LiveDocs for ColdFusion MX
    -Dreamweaver Support Center

Another Example

reply to bluebearMX

Re: Fireworks MX Tutorial: Street Signs

said by thegrinch:

---

Very nice! Thanks..

---

reply to bluebearMX
It was brought to my attention that my sign has an illusion effect. I didn't notice it at first, but it does. Take a look.

That happened as an oversight. To correct this, simply change the angle of the shadow effect when setting the Bevel and Emboss.

Or, you can just leave it as it is, because it does look kind of cool!

reply to bluebearMX
Bluebear;
I gotta give you a big thumbs up!!! Even I could do that project!!

reply to bluebearMX
Great job, bluebear! I'm adding this one to the links up top.

reply to mrham

ERRATA

reply to tiggerstales

Re: Fireworks MX Tutorial: Street Signs

reply to bluebearMX

said by bluebear:

---

It was brought to my attention that my sign has an illusion effect. I didn't notice it at first, but it does. Take a look.

That happened as an oversight. To correct this, simply change the angle of the shadow effect when setting the Bevel and Emboss.

Or, you can just leave it as it is, because it does look kind of cool!

---

ERRATA Continued

reply to bluebearMX

Re: Fireworks MX Tutorial: Street Signs

reply to bluebearMX
I found these street sign suffixes.

ALLEY
ARTERY
AVENUE (AV, AVE)
BLOCK (BLK)
BOULEVARD (BLVD)
BYPASS (BYP)
CIRCLE (CR, CIR)
COURT (CT)
CROSS STREET
CUL-DE-SAC DETOUR
DRIVE (DR)
HEIGHTS
HIGHWAY (HWY)
HILL
JUNCTION
LANE (LN)
LOOP
MALL
MILE (MI) PARKWAY(PKWY)
PASSAGE
PATH
PLACE (PL)
PLAZA
RIDGE
ROAD (RD)
ROADWAY(RDWY)
ROUTE
STREET (ST) TERRACE (TER)
THOROUGHFARE
TRAIL(TR)
VIEW
WALK
WAY
--
-Business before Pleasure
-Isn't it just beautiful?

reply to bluebearMX

BLANK.zip 142 bytes (BLANK)