Subscribe
Tutorial search

Fireworks Ning Tutorials


Sort by:
Adobe Fireworks CS6 iPhone Wireframe Templates and Library Objects
Adobe Fireworks CS6 iPhone Wireframe Templates and Library Objects
This article looks at some of the tools available to Fireworks users seeking to design a prototype for an iPhone eLearning class or course.
Difficulty:
Website Background - Background Design, Ideas and Inspiration
Website Background - Background Design, Ideas and Inspiration
In this tutorial you will learn how to design a website's background using Adobe Fireworks. A website's background is usually a simple color or image fill, however as your design experience increases the need to know proper background design techniques increases. Designing suitable backgrounds to compliment the layout design is also valuable as it can add dimensions to your overall design impact.
Difficulty:
Fireworks Tips
Fireworks Tips
Fireworks is a fantastic graphic design software for designing both websites and web graphics. The latest version released by Adobe Fireworks is just what you need if you are starting out in web design or need to save time on delivering your web.
Difficulty:
Text Path Effect
Text Path Effect
In this tutorial you are going to learn how to write text along a path using Fireworks. Aligning text along a path makes your images & graphics interesting. This is also an important effect in logo design.
Difficulty:
Text Kerning Hack in Adobe Fireworks
Text Kerning Hack in Adobe Fireworks
Learn how to use the text kerning tracking option in adobe fireworks to increase the kerning for your words or phrases
Difficulty:
Shiny reflective gel buttons video tutorial in Adobe Fireworks CS3 or CS4
Shiny reflective gel buttons video tutorial in Adobe Fireworks CS3 or CS4
Fireworks CS3 video tutorial on designing or making shiny reflective gelatin buttons for your development projects
Difficulty:
Smartwebby Fireworks CS4 Guide - Extract Image Effect
Smartwebby Fireworks CS4 Guide - Extract Image Effect
While using pictures in designing we often don't require certain parts of a picture to be seen, or else, just need a particular part of a picture. For this we can use the Feather effect of Fireworks. Basically feather removes the otherwise jagged finish to an edited image by giving it a fading in pixel radius. This cool effect makes your pictures stand out and look really professional. There are three different methods to feather your image.
Difficulty:
Animated Stickman - Tweening Animation in Adobe Fireworks
Animated Stickman - Tweening Animation in Adobe Fireworks
Our tutorial today is going to cover the rest of Adobe Fireworksí useful tools and commands for making animation even easier and more impressive looking! Weíre going to use symbols and tweening, a method of animation that became popular in Adobe Flash. Weíll also take a look at onion skinning and distributing to frames, all techniques that are useful for animation in Fireworks.
Difficulty:
Fireworks Website Templates
Fireworks Website Templates
The first step to designing a website is to design a template in Fireworks CS4.
Difficulty:
Remove Background/Cut Out Image in Fireworks/Photoshop
Remove Background/Cut Out Image in Fireworks/Photoshop
This guide was written for Adobe Fireworks but works similarily in Abode Photoshop. Many times, when designing a website/poster/leaflet, you will have to cut out a certain part of an image and put it on a new background. This can be accomplished numerous ways using programs such as Fireworks and Photoshop but it can often be time consuming and the end result is not always that clean looking. Our example image we will be cutting out Our example image we will be cutting out Continue reading to find how we at ITM Design cut out images and remove backgrounds, itís fast, simple and really effective! If youíre reading this then youíve most likely already tried numerous methods of removing a background from an image. Using a rubber tool is painful and it always looks messy, and the lasso tool always makes the edges look pixelated. With an image like the one above, the background has many varying colours and as such itís too complicated for the magic wand tool. So what else can we try? The pen tool! It probably wasnít developed with background removal in mind but itís incredibly powerful. It allows you to draw an outline around the shape you want to cut out and does it smoothly and quickly. As we are going to draw vector points around the shape itís also very easy to adjust at the end and is simple to correct should we make a mistake. Weíre going to use the above image of a car which we got for free at sxc.hu. So letís give it a goÖ 1. Loading the image and changing size Changing the image size Changing the image size Load the image of the car into your image editing package, weíre using Fireworks but Photoshop will work similarily. The image is currently over 3000 x 2000 pixels so letís reduce it down to a more manageable size. Click Modify > Canvas > Image Size. With the constrain proportions box checked, change the width to 1000px and the height will adjust accordingly. 2. Preparing the image to cut it out Now itís more manageable but still big enough for what we want to do with it, letís prepare the image to make the next steps easier. As you can see the background is quite dark which might make the cutting out a little difficult because we canít see all of the outline of the car clearly - especially the tire and smoke at the back! So, letís turn up the brightness. Click the image and then in the filters box click the + symbol. Then Adjust Colour > Brightness/Contrast. Either drag the brightness scale all the way to the right or set it to 100 and click ok. Preparing the image Preparing the image We can now see a much better detail of the car. Take a look at the back wheel and the smoke, did you notice there was a mud flap there before you turned the brightness up? 3. Drawing an outline around the image Now we have a better view of the outline of the car we can start to cut it out. Keep the brightness high for now because we can change that back when weíve finished cutting. Example of vector points Example of vector points When the pen tool is selected you can click on the canvas to place a vector point. This is a point at where a vector path changes direction. In between two vector points will be a vector path which is what will make up the outline of our car. So to use the pen tool, click once to place a vector point and click again to place another, when you have placed two, Fireworks will draw a line between the two. We will also need to draw curved lines, to do this, click once to place a vector point but when placing the other, click and hold the left mouse button and drag in the opposite direction of the curve to make the vector path curve, when happy, release the left mouse button. If this is youíre first time using the pen tool it sounds a little complicated but it only takes 5 minutes to learn and 10 to master. Itís extremely powerful and we highly recommend you practice with it because itís great for drawing custom graphics too! Letís start by placing a vector point on the right of the carís spoiler/wing. Click once in the corner and then click again in the corner of the left hand side. You should now have a vector path going across the top of the spoiler/wing. First vector path First vector path Now letís continue drawing the outline anti-clockwise. So next we have the rounded point of the spoiler/wing and this means we are going to have to draw a curved vector path. If youíve still got the pen tool selected, Fireworks will know we want to continue from the last vector point we placed. If you havenít got the pen tool selected, then we need to select the last vector we placed. Do this by selecting the subselection tool (white arrow) and clicking the vector point we want to continue from, then click the pen tool to carry on. This is a small area so letís zoom in to it by holding CTRL and pressing + on the keyboard. Fireworks handily zooms in to whatever is selected. Place a third vector point where the end of the curve on the carís spoiler/wing ends and continues vertically. Donít release the mouse just yet though. We want the vector path between vector 2 and 3 (the one we just placed) to curve, so drag your mouse away from the curve. Making the curve between point 2 and 3 Making the curve between point 2 and 3 You should now have a curve that matches the curve of the spoiler/wing. If you havenít, notice the curve adjusterís in the example above. These protrude from each vector point with a curve. Drag these with the mouse to adjust your curve. Now we are ready to place the 4th vector point. However, Fireworks thinks we want to continue the curve but we want the vector path between points 3 and 4 to be straight. To stop the curve from carrying on, click the 3rd vector with the pen tool. This will stop the continuing curve but keep the one between points 2 and 3. We can now place vector 4 where the vertical line between the top of curved point and the bottom end. Placing the 4th vector point Placing the 4th vector point Using these techniques and with a bit of practice, we can draw the outline within just a few minutes! At any time you make a mistake just press CTRL + Z on the keyboard to undo your last change. Also, when you have a vector point selected (either by selecting it with the subselection tool or it being selected because you just to placed it), you can move it a pixel at a time with the arrow keys on your keyboard to make fine adjustments. 4. Using our outline to cut out the shape Our complete outline around the car Our complete outline around the car With our vector outline of the car we can now cut the background out, but how? Right click anywhere on the vector outline and click Convert Path to MarqueeÖ We have the choice of marquee options here but letís choose anti-alias for the best quality as we want our line as crip as possible. Click OK and you will see your vector path turn into a marquee - itís what is drawn when using the lasoo and magic wand tools - ours is just more acurate and smoother! If we press delete at this point, the car will vanish and we will be left with the background. So: Right click inside the marquee > Hover over Modify Marquee > Click Select Inverse This will now select everything around our outline of the car. Press delete on your keyboard and the background has gone and the car has a perfect outline! 5. Finishing Off Our selected picture is now perfectly cut out so whatís left? Well, you might want to make a few minor adjustments to any bits of background you missed. In our example there is a gap between the roof of the car and the spoiler which can be cut out in exactly the same way, except this time donít select the inverse of the marquee. Also, remember to change the brightness back to how it originally was. You can then have fun with your image by adding it to a new background. Take a look at ours! Our completed image with a new background Our completed image with a new background
Difficulty:
Scanning in Fireworks - Using a Scanner with Adobe Fireworks
Scanning in Fireworks - Using a Scanner with Adobe Fireworks
Scanning in Fireworks - Using a Scanner with Adobe Fireworks
Difficulty:
Animated Gifs
Animated Gifs
Learn: Opening animated gif files, Viewing individual frames, Adjusting frame timing, Optimising and exporting.
Difficulty:
Using Type
Using Type
Learn: Using type in fireworks, Setting up text blocks, Adjusting and refining characters.
Difficulty:
lufurticous guide
lufurticous guide
the lufurticous digital artwork. Learn how I created the image combining 5 unique artworks into 1 impressive design. It also discusses some fireworks techniques and more
Difficulty:
Using Onion Skinning In A Fireworks Animation
Using Onion Skinning In A Fireworks Animation
This video tuorial shows how to onion skin multiple frames in an animtion in fireworks.
Difficulty:
Search Term(s) (1): ning