Easy Camera Icon in Fireworks

A few weeks ago I decided to create a camera icon. Usually I would do that in Illustrator or Photoshop, however as I use Fireworks pretty much most of my time I chose to create the icon using it. The cool thing about Fireworks is that you have the vector features found in Illustrator with bitmaps features found in Photoshop, especially layer style filters. So in this tutorial I will show you how to create a camera icon in Fireworks. I will focus on the lens pretty much, but as you will see, to create a realistic effect it's all about playing with gradients.

Tutorial: Case Study with Html5 + CSS3

Last month I did a talk at the Campus Party, one of the biggest technology events of the world, talking about Fireworks, HTML5 and CSS3. It was very nice, the receptivity of the audience was sensational, and thinking that many of you would also like to see the contents of the workshop, so decided to write a full case study and share here on the blog.

2011 Fireworks

Happy New Year to everyone! 2011 is here and to celebrate that I selected some beautiful fireworks photography from the moment that the new year was born. These photos are from all over the globe, enjoy the view and share your photo as well.

Game Center Layout Style in Fireworks

This tutorial was inspired on the new Apple Game Center design. Besides to teach you guys how to make all the effects we will use the whole work spent on that to create a cool wallpaper. So check out the resolution of your computer and let's get started!

The Abduzeetles Rockband Website in Fireworks

What's up guys, this tutorial is a kind of special for me, since I saw for the first time this site I was amazed with the colors, the shapes and the real life that it appears to be. I'm talking about The Beatles Rockband's website, it's simply wonderful. And thinking on it I decided to redesign it in Fireworks, but now our own site, that we'll call the Abduzeetles Rockband!

Web Site Design Tutorial: Wellknown.as Case

Last month I met some guys that are working on a really nice project that involved an iPhone app. So they invited me to design the web site, called Wellknown.as. I loved the idea and started looking for references and inspiration so I could start the design itself. So in this tutorial I will show you a little bit of how I created it using Fireworks. Of course you can do the same thing in Photoshop, the commands will change a bit but the process is practically the same.

Creating an amazing Palm Pre icon on Fireworks

This last saturday we saw the release of the awesome new phone Palm Pre. A lot of people already bought their gadget, but if you want one, at least a icon one, we made that for you. This tutorial will show you how to create in Fireworks the icon for the Palm Pre frame. Step 1 First of all, create a rounded rectangle with a dark gray gradient. Now we need to edit the path, so ungroup it and edit the points with the "Subselection Tool" tool (A) until you get a great shape. After that, apply a Inner Bevel with the values like the image.

LED Cinema Display in Fireworks

We've been using 2 templates in our Wallpapers of the Week articles: the iPhone and the new Apple Cinema Display 24. The iPhone frame we had already shown you how to create it in Fireworks. Now it's time to make the new Apple's display in only a few steps. Take a look and let me know what you think. STEP 1 Open a new file with the canvas 625 x 625px. Create a rectangle that fit the canvas and fill it with a Radial Gradient with the colors #000 and

Fireworks Quick Tips #1 - How to use QuickMask

One of the best functions we can use in Fireworks is Mask. It's a basic command that can make our life easiser when working with images or when we need to hide some part of an object. In this tutorial we will create a Polaroid photo using amazing and inspirational illustrations from Adhemas. We already talked about him, but if you don't know the work of this Brazilian artist yet, please check out his site after the tutorial! But for now, let's take a look at how this command works.

Awesome Light Effects in Fireworks inspired by the James White's O series

I'm sure that pretty much everyone of you guys loves the art of James White, at least, we here over at abduzeedo do. Then, a few days ago we featured on the Wallpaper of the Week an image created by him entitled The O Series, he has even created a tutorial showing how to create that effect in Photoshop.

Awesome Floral Type in Fireworks and Photoshop in 5 minutes

A few weeks ago we had a very nice Vector Packs giveway from Designious. For that article I did an image using some of the floral vectors to create a floral type. It was similar to the Frilly Bits effect, however for this one we combine the vectors with the font to create a different result. It reminds the work of Si Scott or Gingermonkey. In this tutorial we will use Adobe Fireworks and Adobe Photoshop.

Fireworks 101

Hi guys, this week we have a very nice tutorial done by a guest writer. It cover some basic functionalities and it's very useful for those willing to improve their Fireworks skills. You will learn how to play with paths, combining, subtracting and much more. Also you will end up creating a logo. And, if you want to post a tutorial or a good post, just send us an email with your article. Thanks and enjoy. First let's see what combine path objects are and what can you do with them.

Abduzeedo Job Board banner in Fireworks

A short time ago Fabio wrote a tutorial showing us how to create an image inspired by Andy Gilmore's work. I really liked that technique and decided that it would be cool to do something like that in Fireworks as well. In this tutorial I will show you how to create a nice effect for banners, and we will use this technique for the Abduzeedo Job Board banner. We released the Abduzeedo Job Board a few days ago, and now we will start promoting it.

Fireworks: 7 Steps Colored Lights Header

Last week I've created a small site, and I developed a simple effect to the main image. I can't show you the site right now, because it's still unpublished. Btw, the image was pretty nice and simple to do, so now I will show you how to create in 7 steps this simple image, just using some textures, colors and, of course, color dodge! STEP 1 - FIRST RECTANGLE First of all, open a new document with 1000 x 560px. Create a rectangle with a simple Linear Gradiente from color #000 to #333.

Classy personal portfolio in Fireworks

I'm a huge fan of Photoshop, it's a fantastic tool for pretty mucha anything, however when it comes to web design my favorite tool has to be Fireworks. I've been using Fireworks since I don't know when but I can say that its vector capabilities combined with pixel precision positioning make very easy to design websites. Also I used this design firstly to review a service that gets your design and code it for you. Then I decided that it would be nice to explain a bit of how I designed that site.

Mini-layout inspired on 9rules design

In this tutorial we're going to show you how to create a simple header effect in a few steps, and with some vector textures, try to create a little layout in Fireworks with 9rules.com as our reference. In part 2, we're gonna do the HTML/CSS to show you how this layout reacts to the browser! STEP 1 - HEADER BACKGROUND To start, open a new 600x600px file, background #DBE8C4. After that, make a 600x105px rectangle at the top. Use a linear gradient, colors #669933 to #0B1005.

Grooveshark design style in Fireworks

Last week we've linked the Tinysong site in our Sites of the Week. Beyond being a great app, it has an really well executed design, and I thought it would be a good idea to reproduce the same design and make a fireworks tutorial out of it. For this tutorial we're not gonna apply any great effect or use a unknown tool, but only show you a simple way of making neat effects that will make the difference in a layout.

Amazing Neon Lights on Fireworks

After a few tests to find the right colors and lights, I've created a nice image for this tutorial. I'm gonna show you here a few steps to create neon effects on Fireworks. The process is really easy, and for the cheers of everyone, we're going to use lots of overlays, color dodges and lots of glow! We've got our image at sxc.hu, and it's already separated in the tutorial final archive (neon_files.zip), but if you want to use another one, feel free.

Creating a cool website header in fireworks

We have been posting a series of articles with simply fantastic images from the most famous graphic designers and illustrator from all around the world. Most of them have been pushing the boundaries mixing lighting effects with color overlays, and that have intrigued us. Also, we’ve seen some websites using this style, even our new design has some of that. But in this tutorial we will show you how to create a web site header in Fireworks using elements from graphic design and applying to the web.

Creating the iPhone Frame on Fireworks

Since some people asked for this tutorial, We're going to show you guys how to create the iPhone frame. It isn't as complicated as it appears to be, and I think this is the solution that most comes closer to the original. Notice that we're going to use mostly rectangles and bevels... just follow the steps and good luck! STEP 1 Open a new documet. Make it 800 x 800px with background #000. Create a 280 x 557px Rounded Rectangle. Notice that we're leaving the roundness up to you. Use your instincts! Play with the tools!