Guides are those thin blue lines

As the name suggest, the Guides tool act as our guide – in terms of element positioning, layout arrangement and element sizing.

Guides on Guides

Starting up

During your design process, you can use unlimited number of guides (I suppose) to help you through. From the workspace, click and hold your pointer on the horizontal or vertical ruler on the left/top part of Fireworks. Then, drag it onto your working canvas. Now you have one guide. Yay!

Spaces in between

I normally use Guides to plan the width of my layout/elements; and the padding and margin between those elements. To do this, drag several Guides onto the canvas, and position them accordingly. To see the width/gap between each Guide, hover your mouse pointer on that area, and hold down the Shift key. Fireworks will show you the width and the height. Cool! Try to keep the Shift key down, and move your mouse pointer around.

Drag and display

You don’t want to keep on guessing the width/gap of certain part when you drag Guides onto your canvas. To avoid this, you can actually hold down Shift key while dragging your Guides horizontally or vertically. It will show you the width or height between those Guides, real-time.

Small pixel move

It was quite frustrating when you only want to move the line 1px to the left, but it is too small that it will move more than 1px further. I suffered that before – until one day I accidentally found out that there is a workaround. Double-click the Guides; a dialog box will appear with current location of the guide, based on the ruler. Vertical guide refers to the top ruler; horizontal line refers to the left ruler. Common sense, isn’t it? Now you just have to modify this current location value – either subtract 1px, or add 1px or any value.

Lock onto position

Since those Guides will be on top of your canvas, you might accidentally move it when you’re working, which is quite annoying. By locking the guides, this will not going to happen as I will not be able to moved. Great tip if you planned to build your custom grid system in Fireworks! Keyboard shortcuts: Cmd + Alt + ; (Mac) and Ctrl + Alt + ; (Win)

Hide/show the clutter

Sometimes when you had too much Guides on your canvas, it is going to be very messy – to a point where you cannot look at your design anymore! Not a problem. With Cmd + ; (Mac) or Ctrl + ; (Win), all the lines will be hidden from your view. The same shortcut will bring them back to live.. er, I mean, back onto the canvas. In fact, if you closed your Fireworks, to go out and get a life for a moment or two, the same guides will be preserved in your file (unlike Grid).

Those Guides will also be preserved if you send your source file to other people on different platform.

End of story

Personally, this Guide tool has been helping me a lot during my design phase in Fireworks – to be more precise with my layout arrangement and position, which going to help a lot through the coding phase, especially the CSS. The value for width, padding and margin has already being defined in Firework – just port them in to the CSS code.

Time saving in both design and coding phase. Awesome!

Here is a short tips for everyone.

Sometimes we want to align or place our text  freely, without having to limit our self to vertical and horizontal view only. Maybe we want to create some so called typography art – which requires us to place text in, let say, a circle, or any free form shapes, created using pen tools.

Actually in Adobe Fireworks, you can easily attach texts onto any shape or path created using pen tools.

Here it is

First, create your shape, and prepare the text.

Then, select both – the shape and the text -  simultaneously. From the menu, choose Text and Attach to Path. Easy, right?

Here is what you’ll get. If you want to modify the shape, you still can do it, using the Subselection Tool.

If you think this is something fun to play with, go get a life, you can try using pen tools to create you own shape, then attach the text onto it. The attached text is still editable – the size, color, fonts and so on.

Have fun!

Last few days, Smashing Magazine compiled few tutorials and download focusing on Adobe Fireworks and it is cool that one of my Fireworks tutorial is featured there as well.

That article is a great source for Fireworks user and also a great eye-opener for those who haven’t heard any single thing about this piece of great software.

FYI, Fireworks was one of Macromedia products, along with Flash and Dreamweaver, untill Adobe acquired Macromedia few years back.  Since then, I have been wondering whether Adobe will shut Firewoks development off since they already have that widely known Photoshop. I am not much of a Photoshop fan so this concerns me a lot.

If you want to get a clear differences between Fireworks and other softwares such as Photoshop and Illustrator, I recommend you to read through the comments in that article. Lots of people are sharing their experiences and opinions there.

My personal favorites :

by Vincent

I have been using Fireworks for about 1.5 years now and I find it more efficient than Photoshop when it comes to Web UI works.

I never took Fireworks seriously until about 2 years ago, when I went to an interview for UI Designer position, the hiring manager told me that she couldn’t hire me becase I didn’t know Fireworks. Imagine my shock! A manager decided not to hire me because of the software I chose to use, not because my design capability, critical thinking, attention to detail and team player quality.

Anyways, I turned my outrage into positive energy and picked up a copy of Fireworks and digged right in.

Now, I just can’t go back to Photoshop anymore for Web UI work. Fireworks is so much easier to use for creating UI. I don’t need to stop to create my design. I simply create it.

Highly recommended!

and by Andrew

Thanks for the post. As a big Fireworks fan, it’s nice to see it getting some publicity.

Fireworks has been my weapon of choice for a few years now, quickly, here’s why:

Photoshop was designed for… (get ready for this) Photos! Thus the name. For people editing and manipulating photos, nothing works better.

Illustrator was designed for… (you guessed it) Illustrating! For illustrating or working on vector graphics, I wouldn’t use anything else. It is really good.

When it comes to web graphics though, PS is too powerful and has too many unnecessary options. Illustrator isn’t optimal—graphics for the web, unless you’re using flash or SVG are always going to be displayed as bitmap images, Illustrator is designed for vector work. This fundamentally doesn’t mesh well.

Fireworks, on the other hand, allows you to use any mixture of vector and bitmap objects but it always displays them in pixels (like you’d see them on the web). You have complete control over sizing and positioning of things (illustrator when exporting will size your image to fit the paths in it, this gives undesired results often). Fireworks has web-appropriate filters, effects, and styles. Then, maybe, most importantly Fireworks gives you the most control over how images are optimized and exported.

Bottom line: Fireworks is completely designed for web graphic, PS and Illustrator are not.

There are some times where you couldn’t find the best font/typeface to complement your work. Or maybe you don’t really like one or two of the letters from the whole set. Then, why don’t you modify them to suit your liking? Here is a simple method to do that in Adobe Fireworks.

Step 1 : Setting up the resolution

Set your canvas to a higher resolution image (default is 72px). Why? Because you will need to work in a very detail zoom mode later. Go to Modify > Canvas > Image size ; and set resolution to 300 Pixels/Inch

Step 2 : Preparing the font

Type something with the text tool. Right click the text, and choose Convert to Paths

Next, right click again, choose Ungroup.

You will get something like this.

Step 3 : Start being creative!

Here is where you need to zoom in and open your eyes wider. Choose the letter(s) you want to modify, and start working using the Subselection Tool.

Good luck!

Notes

The disadvantage is,  your text will not be recognized as ‘text’ anymore. So how? Apply this method only on letters you want to modify. Not the whole word. Spice things up with good color combination and using great fonts. Anything.Then you might want to create your own font, with a proper software of course.

This time, I am going to show you how to create a grungy-looking RSS feed icon, especially for websites with dark background. As the title says, this is a Adobe Fireworks tutorial. Yes, you can do the same thing Photoshop but don’t ask me.

First of all, find yourself a good looking RSS feed icon. Maybe you can start here. Then you are going to need few textures. You can use anything you like, but for this tutorial, I am going to use two files from loveicon007 texture collection; downloaded here.

Ok, to start off, draw a rounded rectangle with the exact size of you RSS feed icon, also the exact degree of roundness on each corners

Then, from the texture pack downloaded earlier, open loveicon-12.png into the same file, to be use as the background texture of the icon. Place it underneath the rounded rectangle. Select the rounded rectangle > right click > convert path to marquee.

Make sure the layer of the texture is active, then hit Ctrl+X (or Cut). Then paste it back onto the canvas and delete the other portion of the texture

Next, bring the RSS feed icon onto the rounded rectangle (play with the layers). While still selecting the feed icon, choose Multiply as the blend mode from the properties pane at the bottom

Now, open loveicon-8.png from the texture pack downloaded earlier. Using the magic wand tool, select certain area of the texture and cut it out (ctrl+x). You can either choose the one you cut or the one that was left out. Your choice.

To change the color of the remaining texture, click the + button next to filter > adjust color > color fill. Change the color to black.

Put it onto the RSS feed icon we finished earlier. Move the texture or the icon around to get the best position you like.

Now change the canvas color to black. You’re done!

Notes

• No download available.
• Say you have a white background for your website. You can change the color of the texture to white. But it will not look as good as black.
• You can also apply this to fonts, but to apply texture as the background require more steps. But to achieve something like my Fakerdemit logo is just the same like this tutorial.

I hope no more comments comparing Fireworks and Photoshop like in my previous Fireworks tutorials, because both are two different software with capabilities of their own. Peace!

This time in Fireworks tutorial, I will teach you how to create a colourful glowing light trail. This is rather a simple tutorial that can be performed in only 6 basic steps. So get ready to create something like this:

First, create a dark blank canvas in any size of your choice. It is not necessarily black. For a better result, you can use a dark background image as well. But in this tutorial, I will use a blank black canvas.

Second, draw above shape using the Pen Tool and play around with the points using Subselection Tool(A) to get a smooth curve on the outline.

Draw a few of them with various orientation and curves. While in this process, you may want to put a bright color for the outline and transparent [#FFFFFF] for the fill color to make easier for you to work on a dark background.

When you are done with your shape, remove the outline color and fill the shape with any bright color. I am using #FFFF00 for this first shape of mine.

Now, we want to work with the glow. From the Properties pane at the bottom, click the + button next to Filters > choose Shadow and Glow > choose Glow. From the Glow setting, set the value as shown in the following screenshot.

The values are not fixed – you can play around with it until you like what you see And yeah, it is better to choose the same color of the glow with the color of the shape itself.

Optionally, you can alter the coordination of the shape using the Distort tool. This will make your shape are coming from the very back towards the screen – yeah right . But hey, you can try out.

As you create more and more shapes, combine them all – play around with the layers position. If you look at the green shape, I used the distortion method – making it thicker at one end and thinner on the other. Yes, you can manually do that, but thats another alternative.

Finally as you can see in the final outcome, I added few small circles around the shapes to enhanced the area.

Good luck!

Update: Here is the source file of the final result.

Fireworks layered PNG.

First of all, select the Star shape from the Tool toolbar. Modify the default Star shape to make it more like a starburst shape. Increase the amount of points from 5 to, let say, 24 in this example. Then, adjust the Radius also, until you are happy.

Set the size of the starburst to 130px x 130px in the properties pane. Choose the color scheme for your starburst. I am using blue here. Use the linear gradient fill and fill the shape with light blue and darker one, as you like it to be.

Then, duplicate the shape and reduce it size to 123px x 123px. Align it at the center and on top of the original shape.To make it clearer, change the gradient fill of the second shape by choosing white as the first color. Also, reduce the opacity to 51, as shown in the picture below.

Next, duplicate that second shape and put it exactly on top of its original shape.

Now, create a big ellipse shape on top of those star shapes. Ignore the color because.. it doesn’t matter. This is going to be the ’shiny’ part of your starburst. Align it so it covers half size of the starburst underneath it.

Select the top most starburst shape and the ellipse together. Use the Shift key to do so. From the menu: Modify> Combine Paths> Intersect. Thenadjust the opacity of that shape.

You will get that shape on the left (see below). You are done actually, but you can play around some more to get a better shiny look. Use the subselection tool to modify the shiny shape.

And you are done!

For this one, I decided to give out a small gift to all Fireworks users out there. This is a small collection of shiny shapes that I created last night. Only a few of them because I have no more idea on what shape to include.

Everyone is creating PSD source files, Fireworks user always find it hard to get useful stuff from the search engine. Now onwards, I am going to change that. HAHA. Google, index my page higher please.

Changing the colors

Dont worry about the colors. This is a layered PNG files – meaning you can break them into their layers and change the colors as u like. All of them are customizable How to do that?

Simple. Each shape is grouped into their own group. In case you dont know; to break them into layers, just right click on any of the shape and choose Ungroup. From there, change the color and gradients and stuff. You can use it over and over again for different colors.

Download

You can download the layered PNG file here.

Download the RAR file. Its only 364 KB. Get it now! GIve me feedbacks or anything. Request any additional shape if you like Have fun!

This tutorial will show you how to create a realistic photo effect using Adobe Fireworks. Yeah I know most people use Photoshop, but still there are people who are using this software. So, lets proceed. By the way, you can use the old Fireworks MX or Fireworks 8 for the tutorial because the tools are available on those version as well. This technique can also being applied with any graphic software as well, maybe some differences in terms etc.

What we are going to achieve?

As shown above, we are going to get a nice looking realistic photo effect with better shadow underneath it. Thats all

So, whats the steps?

First of all, create a basic shape of your photo whether its vertical or horizontal or wtv.

Copy the same shape/layer and put it underneath the first one. Change the color to black (#000000) and move it a few pixels to the right and a few pixels to the bottom. This black shape is going to be the shadow.

By using the Pen tool, insert/create several points around the black shape. Remember to use the Subselection Tool (keyboard shortcut: A) to free the shape first, if not you are unable to add any point on that particular shape.

Move the black shape around until you come out with a good position of your shadow. Select the Black shape – from the Properties box, choose Edge> Feather. Set the Feather value to any value around 10 to 15.

Then again in the Properties box, set the Opacity of the Black shape to any value around 65 to 70, as shown in the picture

So we are done with the shadow. Next, duplicate the white shape again and put it on top of it.From the Properties box, choose the Gradient style as Linear. Then from the color selector, select black color (#000000) for both side. Click the opacity selector and put the second color’s opacity to zero. Lower the opacity of the first color to any value as well so it is not too dark. Play around with the opacity value.

When you are done with that, move that top shape a few pixels to the right and to the bottom, as shown in the following picture. See,now you have a white ‘outline’ the top and on the left side of the previous shape. This actually triggers a 3d effect for the realistic photo.

But, theres no photo yet. Choose any photo and put it between the previous ‘linear gradient’ shape and the white shape. The arrangement of the layers will be Linear gradient shape > PHOTO > white shape > shadow

For that, we are done. But you can add a lighting effect on the bottom rigth corner of the photo for a more realistic effect.

Using the same method as the linear gradient shape just now, create another one with a white (#ffffff) color in it and place it on the bottom right corner of the photo.

So, we are done!

And hope you get it. Sorry if the explanation is not clear enough. This is my first graphical tutorial

Microsoft has launched a series of courses for its Windows XP Professional. Among the hottest today are 70-271 and 70-272 exams attracting more and more professionals. Many of the users are sharing their own experiences and helping others to take difficult exams Windows Server 70-298. Such information can be obtained from their blogs. Some even have their websites hosted by leading web hosting companies. Companies like hostmonster are providing marketing services as well keeping in mind the technique of link exchange that is common among many bloggers.