articles on

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. STEP 2 - FIRST TEXTURE What we're gonna do now is start the effect of the texture. We will see 2 rectangles with 2 different textures. Create the first one, a rectangle with color #CC66FF and 800 x 242px. Apply the texture called Swirl with 100% and Transparent. Then let's play with that, set the blend to Soft Dodge and apply the filter Motion Blur with 90º and 100. You must have this image right now. STEP 3 - DUPLICATE In this step, just duplicate the last rectangle we have created and change the texture to Oilslick. Also set the blend mode to Normal. Check the layer we have and the their order. STEP 4 - GROUP, MASK AND COLOR DODGE Now, group the 2 texturized layers. Then select the dark rectangle and Copy (CTRL/Cmd + C). Now select the group and go to Modify > Mask > Paste as Mask. This will create a new layer mask. So just apply the blend Color Dodge in this layer. STEP 5 - CREATE THE LIGHT LINES The irregular light lines are quite simple to create. 1- Create a white ellipse. 2- Apply Feather 30. 3- Apply Linear Gradient with the default Silver. 4- Apply Soft Dodge. That's it! STEP 6 - DISTRIBUTE THE LIGHTS Now you can spread the lights along the purple rectangle. Notice that you can rotate, change the Opacity, stretch, etc. Take a look how it's supposed to look right now. STEP 7 - ELEMENTS OF LAYOUT The main image are ready, now use your imagination and complete the layout. Here we did not focus on that, but you can create your own wireframe and site structure. CONCLUSION With this simple effect you can create some nice images. Play with the colors, hue e saturations and you will see how easy is to modify and create new amazing images. So now, share with us your experiments. Download the PNG file here.

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. So in this tutorial I will show you how to create a single page site for your personal portfolio. Step 1 The first thing to do when designing a website is structuring. You will need to set where the elements of the site will be, the navigation, main content, sidebars, footer, and etc.. There are usability rules that are always nice to follow, as Steve Krug says: "Don't do things that force people to think unnecessarily when they're using your site" Management Consulting News. That's why we follow some standards. In my design the whole site will be in only one page so as you can see in the image below I have 6 areas very well defined: Navigation, Featured content, Main Content, Portfolio, Contact, and Footer. Step 2 (Navigation and Logo) Let's start with the Navigation and logo. In our wireframe we had set a 50px height area for the menu and where the logo will be placed. With the Rectangle Tool (U), create a rectangle with 50px height and 1200px width. Go to the Gradient Tool (G) and apply a vertical gradient on the rectangle. Change the colors to #989898 (bottom) and #e0e0e0(top). Then position the rectangle to 1pixel in Y, there will be a white line between the rectangle and the stage, it will create a very nice 3D effect in our site's menu. Step 3 Place your logo, I used the abduzeedo logo with a very dark gradient for black to a dark gray. After that add a filter clicking on the (+) icon. Selec Drop Shadow. Use 2px for the distante, 100% for the opacity, 0 for the softness, and 315º. Step 4 Let's add the menu links. My personal site will have only 3 links: About, that will be a text about carreer and on the sidebar a list with my last entries on Twitter. Portfolio, where I will show some of my works. And the Contact, where there will be a contact form and a hCard with my contact information. I really like menus with the Link name and a short description right below it. In my menu I used Arial Black 18px, that is a font that pretty much every computer has and we don't use it that much, with the description in a regular Arial 12px. Also I applied on the texts the same shadow I used on the logo. It will give a nice touch. However via CSS it will only be visible on Safari and the new Opera. Both have the Text-shadow property. Step 5 In order to make a clear division in our menu let's create a divider. If you pay attention to nice 3D effects, they are very subtle and it's kind of simple to create. In this case with 2 lines with 1px width and different colors, one light and other dark we can achieve a very nice effect. Step 6 (Feature) Let's do the graphics part of the site. I could use Flash to create an animation or a Javascript effect. The idea here is to show the importance of the creative process when designing a page. Nowadays we can notice that more and more sites are using handwritten elements such as texts and skecthes, also different textures and vintage elements to give a more human feeling to the site. For this design I will use a texture I created in another tutorial I wrote, the "Super Cool Frilly Bits Typography". Just download the PSD and export the background, then place it on the center of our Featured area. You will have to resize it to in order to make it fit with the layout. Also you will have to create a black background behind the texture image. That will make our layout work no matter what the user's screen resolution is. Step 7 Here I used a screenshot from one of the recent projects I worked on and placed it on the stage. Then I just adjusted it to fit to the Featured area using the Mask featured. Step 8 Now let's add the hand-drawn elements. Firstly I chose a nice font from, it's called "Return of RelayScript". Also I used another font, Helvetica Ultra Light, because I think that font gives an elegant and modern feeling to the design. For the other elements some I used the bursh tool and others some vectors from The whole idea of the design is to show the steps of the project with the suggestions and adjustments that are made throughout the process. Step 9 (Main Area) For the About area, where almost all the text of the site will be, I used the Divine Proportion to divide it in 2 columns. I recommend you to read a very nice article from Smashing Magazine called Applying Divine Proportion To Your Web Designs, they explain how and why it works so well. So, my main area was divided in 2 columns, one with 605px and the other with 397pixels, with a padding left and right of 25 pixels in each column. For the texts, the first paragraph of the main content I used Arial Black with 20px size and 140% line-height. And I used the same to create the title of the sidebar. The rest of the text on the main area I used Arial 14px and 140% line-height in Black. However for the sidebar I reduced the font size to 12px and changed the color to gray #666. Also, I created another rectangle and filled it with a gradient. Again, I used the 1px space to create a subtle 3D effect. Step 10 (Portfolio) The portfolio area will basically have thumbnails of works, a title, a little description and a second navigation to choose from Print and Web works. I created a rectangle of 1200 pixels width by 290 pixels height. I used #999 for the color and a texture from the Styles Palette called Diagonal 30px width. Also I applied an Inner Shadow to the rectangle with 0 Distance, 65% Opacity, 4 for Softness, and Black for the color. Step 11 The thumbnails have 200x125 pixels and I added the wet-floor effect. To create this effect is pretty simple, just duplicate the image, go to Modify>Transform>Flip Vertical. After that go to Modify>Mask>Reveal All. Then with the Gradient Tool (G), use a black and white gradient and fill the image with it. Where it's black it will become transparent and the white will appear. The grays will be midtones. Step 12 Here I finished the Portfolio with 4 images. For the title I used Arial Black, 32 pixels and Uppercase. Also I applied a Drop Shadow to it. For the other texts I used the same handwriting typeface that will be saved as image when mounting the HTML. The second navigation used the handwriting font, but I created a circle to show the selected item with the Vector Path Tool. All the images will be shown in a Carrousel list, so the 2 icons of arrows will be the buttons to move the images. Step 13 (Contact us) The last part is the Contact Us. It's just a form with Name, Email, and Message fields with a hCard icon on the sidebar where the user will be able to downlond my contact information. To create the form I used the Rectangle Tool, however if you want to create forms with real elements you can download form elements in PSD from the They have images of all sorts of form elements from all major browsers and platforms. Conclusion In this tutorial I've shown you a bit of my design process and how I come up with some ideas. You can notice that I used some references for different sites such as Smashmagazine, iStockphoto, Steve Krung, and others. It's very important to keep updated with everything that is happening, that will give you lots of very useful resources to design better and more efficient. I created this design to review a service that gets your design and code it for you, you can check it out at However if you want to code, I recommend you check out this video of the John Hicks on the Future of Web Design, it walks through his process of creating a website. It's definitely worth checking out. Click on the image to see the HTML version of this design Download the Fireworks File Click here to download the Fireworks file used for this tutorial

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 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. STEP 2 - EFFECTS To make the stripes effects, let's use 2 overlayed textures. To make the first one, make rectangle bigger than the last one at the top of it (we're using 625x162px) and fill it with the DNA texture, color #666666. After that, apply a Motion Blur with values as shown bellow and blend mode Soft Dodge. After taht, duplicate this layer and all you have to do is change the texture to Grid 4 and blend mode to Overlay. Here we won't mask what's left, let's just create a white rectangle above it all. STEP 3 - BODY GRADIENT Now, make a rectangle with linear gradient for the main background. Use colors #93B956 to #DBE8C4 and leave at Y position 109. Now let's make the a nice horizontal line in the header, 1px and #C2D79A. Take a look at the picture on how the elements should look now. STEP 4 - LAYOUT ELEMENTS Now we don't have any more crazy effects to be done. Let's just use our creativity and add some elements to the layout. Let's use some big phrases, texts, a link list, a footer and of course, a nice icon and a title to make it look good. FINAL RESULT You can see the whole process is really simple... is about trying colors out, effects and try to make a good balance between the elements so we can get a fine and harmonious layout.

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. STEP 1 - NEW DOCUMENT To begin, open a new 600 x 600px document, background #BFD2E5. STEP 2 - RECTANGLE Let's build a white Rounded Rectangle, size 578 x 555px. Make the spacing as shown, a little bigger bellow, so we can place a final element there. Build this rectangle with small rounds, so this can be really soft. Apply a Drop Shadow with values 1 - 50% - 2 - 270º and color #46586A. STEP 3 - BOX #1 In order to make the background of what will become our textfield, we're gonna use 3 overlayed Rounded Rectangles. In all of them, we're gonna apply a lineat gradiente, and notice that they get 2px smaller as we create them. 2px less tall and wide... doing that, we're gonna achieve the illusion we're want. Just follow the instructions bellow. STEP 4 - ALIGN THE RECTANGLES Here you can see how the 3 rectangles are displayed. After making placing them in this order, select all 3, vertical and horizontal align them, to be sure that they will be well centralized. After that, group them. STEP 5 - SHADOW AND REFLEX To finish Box #1, let's apply a little shadow and reflex effect. Both effects will be done using rectangles as well. To make the shadow (1), make a rectangle as shown and apply a Feather 3 and Alpha 55. After that, place this layer under the rectangle group we've done before. To make the reflex, make a rounded rectangle at the base of the rectangle group and apply a linear gradient, colors #E6EEF5 to #FFFFFF. In the #FFF side make a Alpha 0. Done that, apply a Alpha 90 for this whole rectangle. Take a look at the end of this image how the layers are ordered. STEP 6 - BOX #2 For this box, we're gonna do the same process we've done in step 3. Notice the gradients colors and the rectangle sizes. After doing all 3, vertical and horizontal align as well, and group them. Place this new group bellow the reflex we've done in the last step. STEP 7 - SHADOW Here we're gonna create the shadow rectangle we've done before. Copy it and place it as shown, in Box #2 group. STEP 8 - TEXFIELD To build the textfield, we're gonna use 2 rectangles. Both of them will be #FFFFFF. For the first one, make a 1px #D6E4F0 border. Make the second one above it and make a 1px #93AEC7 border and move it 1px up. Look at the image how the rectangles must be displayed. STEP 9 - SEARCH ICON The icon we're about to build will be done with a Doughnut and a Rectangle. Place them next to each other and rotate them a little bit. Select both elements and go to Modify > Combine Paths, Union. Position the figure nex to the textfield and apply a Linear Gradient, colors #99ABBB to #5D768C. Notice that we gotta create an inner shadow in this figure. After that, duplicate this layer, delete the Inner Shadow and use a solid #F3F7FA. Move this lighter layer beneath the other. After that, move it 1px down to make a 3D look. Take a look at the image to see how the icon 2 layers should be. STEP 10 - ELEMENTS Now that we've got everything done, use other elements to compose the layout, such as a logotype, some texts, and a logo at the footer. FINAL RESULT The final result is quite similar to Tinysong's layout, but we could play a little bit applying other colors. I hope you all enjoyed it, and feel free to show your results here.

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, and it's already separated in the tutorial final archive (, but if you want to use another one, feel free. STEP 1 - BACKGROUND To begin, open a 750 x 500px file. We're going to use the "image1.jpg" file, which you may use from the final archive. After importing the image, let's darken it a little bit, and to do that, make a rectangle with Gradiente Radial with the color #000 in both sides, in the middle, make the opacity 40%. After that, apply the Overlay blend in this rectangle. STEP 2 - SET THE BACKGROUND Now let's darken a little bit more to make a better looking contrast when the neons start glowing. Create a shape as shown in the color #000. After that, apply a 88 Feather and blend Overlay. STEP 3 - WOOD SIGN To start creating the wood sign where we read Abudzeedo, pick the file "image2.jpg". Import that image and also make a 375 x 100px rectangle as shown in image 1. Now let's use the rectangle as a mask, and for that, select the wood image, cut it (CTRL + X), select the rectangle and paste it inside (CTRL + SHIFT + V). Done that, let's apply a little shadow in this object with values as shown. STEP 4 - SIGN FRAMES The next step will be to duplicate the layer before the sign. Done that, on the top layer, apply a Inner Bevel (Ruffle type), and apply values as shown in image 1. Apply the Overlay blend in this wood.. After that, duplicate this layer, so we can get a better contrast for this sign. Look at the end who our layer should be. Tip: If you wish to make another type of framing, test the different types of bevel along with other values. STEP 5 - LETTERING In this step, we're going to right Abduzeedo in the sign; Create a #000 text. After that, apply a Overlay blend and a 100% #FFF Glow, as shown in image 1, so we can get the effect we want. STEP 6 - LETTERING LIGHTS In order to increase the lights a little bit, let's create a "light ball" in some points of the wood sign. For that, create 2 ellipses, one #000, the other #FFF. After that, apply a 15 Feather in each one and put one above the other. After that, group these 2 ellipses and apply Color Dodge in this group. You'll see that this will create a light effect. Now you should copy it and apply a few time in different points next to the text. In image 5 we show you where we put ours. STEP 7 - PINK NEON To create the Neon effect, we're gonna need 2 layers everytime, with equal texts overlayed, but if different effect in each other. Create the first text and duplicate this layer. The top layer we'll call Pink 1, and the bottom one Pink 2. Use the values we're showing you and try duplicate the effect. The colors we're using in each layer are:Pink 1: #FFF - Glow #FF33FFPink 2: #F5C4D9 - Glow #FF33FF STEP 7 - YELLOW NEON We'll be doing the same process from step 6. We're gonna have 2 overlayed layers with the same text (Yellow 1 and Yellow 2). Try to use the right colors, blend and values in each Glow. The colors we're using in each layer are:Yellow 1: #FFF - Glow #FFFF00Yellow 2: #FFFF33 - Glow #FFFF33 STEP 8 - BLUE NEON Same as before. The colors we're using in each layer are:Blue 1: #FFF - Glow #00CCFFBlue 2: #FFF - Glow #0099FF Look at the end of the image who the layers order of the neons should be. FINAL RESULT All done, we can play a little bit with the neon colors, other backgrounds, etc. What we're doing here is playing with the tools and trying to reach a result where lights are soft but they contrast the background.Blue 1: #FFF - Glow #00CCFFBlue 2: #FFF - Glow #0099FF Look at the end of the image who the layers order of the neons should be. Attachment Size 2.95 MB

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. REFERENCES For inspiration we selected 5 images from some articles we’ve published here on Abduzeedo. From these images we took the elements we wanted to apply in our design such as neon lights, color overlays, light effects, stars, sparks, and blurs to give the idea of movement. Above you can see the images, in order: 1 - James White, 2 - Paul-Willock, 3 e 4 - Chuck-Anderson, 5 - Tony-Ariawan. STEP 1 First, download this image that we're using. Create a new document with 1200x400 pixel and black background. Then place the image and resize it to fit in the canvas. Use the image below for reference. STEP 2 Lets add a rectangle on top of the image. Fill the rectangle with a gradient, we use the Spectrum that is a default style in Fireworks. After that change the Blend Mode to Overlay. This rectangle will be on top of the other elements we will create, so you can even create another layer move this rectangle to this layer and lock it. STEP 3 Now lets create the elements over the image like if they were lights coming from the sky. To do that create a rectangle of 360 x 95 pixels. Change the Feather to 100% and add a Diagonal Texture with 22% transparency. After that add a gradient to this rectangle as well. Use the Silver style and rotate it 45º. Use the image below for reference. STEP 4 Move the rectangle to the top of the image. Duplicate the layer to make it increase the brightness of the light. After that duplicate one of the rectangles and move it to the right, and reduce its size just a little bit. That will give the idea that another light, less strong is coming from the top. STEP 5 In order to create the stars we will use the Brush Tool (B). For the Stroke Type choose WaterColor>Thin, after that go to Stroke Options and use the values from the image below. Doing that we will create a brush that generate random dots. Then just select white for the color and start painting some stars in the sky. Tip: change the thickness of the brush to create different stars. STEP 6 Now we will add the neon lines. We will use the Vector Path Tool(P) to do that. Just create some free form lines and with the Pen Tool (P) you can adjust the curved segments by just moving the anchor point. Tip: when you create the lines, try to move the mouse quickly, that will create lines with less anchor points and smoother. STEP 7 Here you can add new elements like more stars, lights, and make some adjustments like opacities. Also you can add the logotype to create a really cool header for your website. FINAL RESULT The coolest thing in this tutorial is that you can play with the gradient colors of the rectangle that is on top of the other layers, and that will change all the other elements. You can create very different atmospheres to the image. Again, this was just an exercise to show you how to use the inspiration from graphic design and apply it to the web. Now it’s up to you. Click to view full size

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! After that, let's apply 2 bevels in this rectangle, check the images out to see how it should look like. STEP 2 The next rectangle will be rounded too, as shown, and will be on the top of the last one. Apply Gradiente Bars with the colors we are showing here. After that, follow the steps and apply 2 bevels with the same values we've used. Notice that on this one, we're using Feather 1. STEP 3 Now we must create another rectangle above it all. Let's use the color #FFF and 2 other bevels to make that effect on its sides. STEP 4 Now we need to create the last rectangle that goes on the main structure. It will be the smallest between all, and will be in color #000. Notice that we've set to it a 2px border and that will make some difference ahead. STEP 5 Let's create now the bottom and top parts of our iPhone. Create a rectangle (without rounds) with Radial Gradiente and colors as shown. On the top we've used a 1px line, color #0C1114. STEP 6 Group the elements from step 5 and now let's mask them with the rectangle from step 4. For that, select the group, cut it (CTRL+X), select the black rectangle and paste it holding shift (CTRL+SHIFT+V). STEP 7 The structure is ready, now we just need to create the smaller elements, that are nothing but rectangles and circles as shown. FINAL RESULT Now just in insert the interface we've created in the other tutorial (Creating the iPhone Interface on Fireworks).

Light Painting in Fireworks

Last month we had written an post announcing that we would write 4 tutorials on how to create Light Painting in Photoshop, Fireworks, Pixelmator, and GIMP. The first was the Photoshop, and you can check it out at Create a Glowing Light Painting Effect. Today we will show you how to create the effect in Fireworks. I have to say, I took quite sometime trying to find the right combination of effects and blend modes, however I believe I have found the simplest one, and achieving practically the same result as in Photoshop Step 1 Open a new document, the image I used can be found here. Step 2 Now get an image of The Beatles Abbey Road cd. Step 3 With the Pen Tool(P) lets create paths, you can use white for the stroke color. Tip: Don’t use fill. Step 4 Here lets change the stroke settings, to do that, select all paths and then go to the type of Stroke and select Stroke Options... Use the image below for reference and values. After that click on the Advanced button. Play with the settings to see how they change the strokes, then just group the paths. Step 5 Duplicate the group 3 times so there will be 4 groups. After that apply a Gaussian Blur with 2 radius to the 2 groups on the top. Then select the 4 groups and change the Blend Mode to Overlay. Step 6 The Beatles are shining, now we have to do the crosswalk. Create a rectangle (it will use the same stroke settings we used before). Copy this rectangle several times, after that aling and distribute them like the image below. Then group the rectangles. Step 7 Use the Distort tool to adjust the perspective of the rectangles. Use the photo for reference and try to follow the vanish points. After that add a Gaussian Blur with 1.3 radius and change the Blend Mode to Overlay. Duplicate this group to make it brighter. FINAL RESULT

Creating the IE7 logo effect in Fireworks

Despite the fact I'm not a big Internet Explorer fan, the challenge to recreate the IE7 logo in Fireworks is really worth it. We're going to show you how to create these effects and how to use many new fireworks tools that we haven't used in our tutorial yet. STEP 1 Let's begin creating our letter, here we're using the letter "a". We've choosen the Helvetica font, but you may use any you wish. Color it in #000. Now let's work it in curves, for this, right click on it and go to 'Convert to paths'. It will convert it and leave the layer grouped, ungroup it so we can work the points further ahead. STEP 2 Now duplicate this layer, and apply, for the one on the top, Gradient Bars colored as shown. STEP 3 The layer left beneath it will be our black border. For that, the one on the top needs to be a little bit smaller. Select command Modify > Alter Path > Inset Path. Select Inside e width 5. After that, do as the following image shows, select the points and keep modifying to make it well align and with a good spacing. In the bottom of it, is good to leave it really close to the border to give us the right effect. STEP 4 Now let's apply bevels and shadows in this layer. It's going to be 2 Bevels and 1 Inner Shadow. Insert the values as shown in each one of the filters. STEP 5 A big part of the structure is ready, now let's begin creating the effects. Let's make the top section reflection. For that, simply duplicate the layer that contains the blue "a" and erase the selected points in the figure. After that, adjust the curve and apply a Linear Gradient with both sides #FFF and 0% alpha in one of the sides. STEP 6 Now let's make the light effect that comes fro the bottom. It will be done using 3 ellipses. Apply the colors as shown and notice that we're using a Feather and a filter. Then group the 3 elements. STEP 7 Let's apply a mask in this group. Select the blue "a" and copy it (CTRL+C), then go to Modify > Mask > Paste as Mask. Duplicate this layer and apply the overlay filter on both layers with a 60% alpha on the top one. STEP 8 Now we need to create the yellow arches. Let's use ellipses to make it. Create 2 ellipses as shown. To make it in the correct shape and size, use the "Q" tool in Distort option to make it easy. After creating these 2 ellipses go to Modify > Combine Paths > Punch. The final arch will be #F8A30A. Make some adjustments in the bottom tip to make it look like it goes behind the letter. STEP 9 In this shape, we apply a Inner Glow with values 2 50% 6 0. After that, let's create a new form with the pen tool. Leave it underneath the arch with the linear gradient with both colors #F8A30A and a side with 0% alpha as shown. STEP 10 Let's create the arch's shadow. Duplicate the yellow arch, make it smaller and make it #000000. Apply a Radial Gradient and make the colors really soft using the alpha values. Now we're gonna apply a mask in this shadow. Copy the blue "a" (CTRL+C) and repeat the last process, select the shadow and go to Modify > Mask > Paste as Mask. FINAL RESULT Your effect must have come to look like this! We can also make some additions and play with the colors.

Tutorial: Obama's Background in CSS - Part 2

In this tutorial we're going to show how you may use the background we've created in the Obama's Background 1st part. But we're not only gonna show you how to put it inside a site body, but also how to create and structure the site main regions like the menu, main content, support column and footer. Our objective is not only to assemble the whole site, but also show some CSS basic concepts and Fireworks intregration with Web. STEP 1 The first thing we must do is to export our images. Since we're creating only the basic structure, we're only gonna need two images: background and logo. STEP 2 Now let's create the html file. The structure will have 4 regions: #header, #main, #sidebar and #footer. Notice that we're gonna insert the #main and #sidebar inside a #content, this way we're gonna have a greater possibility to modify things in the future. <body><div id="total"> <div id="header"> <a href="#"> <img src="logo_obama.jpg" alt="Home Obama"/> </a> </div> <div id="menu">MENU </div> <div id="content"> <div id="main">HERE IS THE MAIN CONTENT </div> <div id="sidebar">SIDEBAR </div> <div> <div id="footer">FOOTER </div></div></body> STEP 3 Now let's create the CSS. You may use the text/CSS editor of your choice. We're using here CSSEdit, and we're going to open Live Preview. With that, we'll be able to view in real time the things we are modifying. Notice that the structure is really simple. We're inserting a body #total with "margin: 0 auto" and all the other elements inside it. body { margin: 0; color: #999; font-weight: bold; font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; font-size: 2em; background: #01245c url(bg_obama.jpg) no-repeat center top; } // AQUI ESTÁ NOSSO BG! // Repare também que usamos a cor #01245C. #total { width: 960px; margin: 0 auto; } #header { height: 160px; } #header img{ border: 0; } #menu { height: 60px; background: #FFF; text-align: center; line-height: 60px; } #main { float: left; width: 650px; background: #f0f0f0; height: 400px; text-align: center; padding-top: 100px; } #sidebar { float: right; width: 310px; background: #dadada; height: 400px; text-align: center; padding-top: 100px; } #footer { height: 150px; text-align: center; padding-top: 50px; clear: both; color: #15539c; } STEP 4 Check the final result... really simple, huh? You only have to structure well the code and practice!

Tutorial: Creating the iPhone Interface on Fireworks

You certainly want one, or already have one of these. It's an awesome device, but Iphone's interface is also something that gives a lot of pleasure on using it. Thinking about, we're going to show you how to do the interface on Fireworks. I've tried to make a real detailed tutorial, on how to do do that glossy look and maybe some other time I'll show you guys how to create the iPhone per say... so let's talk about business! STEP 1 To start, download these 2 images that will serve as our base.Iphone pictureColored background image Create a new 800 x 800px document with a black background, and import these 2 images. STEP 2 Now put the layer with the fishes image behind the iPhone and reduce the image, try to fix it until it looks like the image below. Hint: let's use the telephone image with the central part cutted as a layer above all others, this way we're havinh more freedom to work with shapes behind it! STEP 3 Let's creat a 255 x 380px rectangle, it will mask the background image. Now select the image, cut and paste inside the rectangle (CTRL+SHIFT+V). Now position it to stay inside the display limits and from behind it. STEP 4 In order to create the interface, we're gonna use mainly rectangle and apply some gradients and opacities. The process is quite simples, and there should be numerous ways to create these effects. Let's begin creating a 255 x 20px rectangle on the top, make it #000 and opacity 55%. Copy this rectangle, move 20px below and insert a 76px height. Then, create a lower 1px line, make it #000 and opacity 50%. STEP 5 Now let's create a little 3D effect. Create a 255 x 38px white rectangle and position it at the top of the last created rectangle as shown. Now apply a linear gradient that goes from #FFF to #FFF and use the transparencies in the gradient itself as we show in the details (notice that we've create an extra point of opacity to make the feather effect only at the bottom part). STEP 6 We already have the top ready, now copy the last two created rectangles to the bottom part. Create another #000 line with a 50% opacity above them, the same way we did before. STEP 7 Let's create the "slide to unlock" button. Create a 215 x 39px button without filling and 1px #CCC border, make its round 50. Duplicate the rectangle and cut the bottom part of the white gradient. Select the rectangle and the gradient, go to Modify > Combine Paths > Punch. STEP 8 After that, duplicate once more the rectangle and move it 1px above, apply a linear gradient that goes from #000 to #000, with opacity 24 at the bottom part (of the gradient). Make the whole rectangle a 80% opacity. STEP 9 For the button, create a 53 x 35px button and make its round 43. Apply a linear gradient as shown. Now put a arrow inside it, using the Arrow tool, and make it like the shape we're using. Apply a #979797 to it and a Inner Shadow with the values 0, 30% and 2. STEP 10 Now let's begin inserting texts. Here we're using Helvetica, but if you don't have it, you may use Arial without problems. The Hour text is #FFF and size 50. Duplicate the text layer and for the one beneath, apply #000 and move it 1px up. This effect looks better than the Inner Shadow, because it mantains the font's natural appereance. For the date text we're using #CCC and size 13. For the "slide to unlock" we're going to use #FFF and opacity 25%, size 20. FINAL RESULT To finish, apply the icons and the name of your provider at the top, above the 20px high rectangle. All the icons we also create using only rectangles and lines, play a little bit wih it! The PNG file has all that has been done.

Tutorial: Obama's Background on Fireworks - Part 1

Reaching the end of the electoral race to know who's running for the democrates, Barack Obama shows that one of this main concerns was the design of campaign pieces. All material released, even his website shows us that. And now, we won't teach Obama a way to beat Hillary, but we'll be giving you some tips to rebuilt on Fireworks the background image of his site. The orginal image is this one. So, let's begin building this image and check how some of this effects are done on Fireworks. (Remember, this is only part 1... soon, we'll teach you how to do the full CSS of it.) STEP 1 Let's begin opening a new 1280 x 1024px document. Set #01245C as the background color. Let's use guide lines to delimit the content central area. Make all of them 160px away from the borders (left, right and top), making a 960px central area. STEP 2 Create a 960 x 850px rectangle (it must go to the page bottom). Apply a Linear Gradient from #FFFFFF to #01245C. STEP 3 Now let's begin building the glowing background. Select the Pen tool (P) and start drawing a shape as shown. Use a Radial Gradiente from #FFFFFF to #85CFF2 and 65% of opacity for this last color. After that, apply a 100% Feather and the texture Swish (20% of it). After that, we apply a Color Dodge and make all this shape with a 60% alpha. STEP 4 To apply to this glowing background the color we want, we need to create 2 extra shapes. For the first one, simply copy the one we made now and modify a little bit its points making a smaller shape to create different effects everywhere. For this one, let's make Swish texture only 2% and switch from Color Dodge to Overlay. STEP 5 For the third glowing shape, we're going to create it one more time, a little bit smaller than the last one. Apply the color #FFFFFF, Feather 100%, Texture 0%, Color Dodge and the opacity 40%. STEP 6 Now, let's create the shadow. It will also goint to be an irregular shape. Make the shape as shown, use the color #01245C and a 22% Feather. STEP 7 Take a look on how to order the layers and the effect done until now. STEP 8 Now, let's create the top right area. To make that blend effect let's use another command on Fireworks. Before doing that, create a line as shown and go to Commands > Creative > Twist and Fade. Play a little bit the values and find the best result. Here, we're using the values shown. STEP 9 Now copy this result a few times, make a very low opacity, about 8% and position it as shown. Apply some texts and other elements, here we're using a few stars. Throw all that bneath all layers, that way the lines will get a brighter glow due the Color Dodge from the other shapes. STEP 10 For the logo area we're going to create another shape to make it look that there's a different light glowing beneath that. Use the color #FFFFFF and apply a 40% Feather. Besides that, we're also using a few extra elements, like some circles with alpha next to 5%. STEP 11 Now only the central area is empty. We've created a shape like is shown. Apply a Linear Gradient from #FFFFFF to #336994. Then, use the rectangle beneath as a mask. Cut the created shape and paste it inside the rectangle (CTRL+SHIFT+V selecting the rectangle). FINAL RESULT Now place a few elements above it all to make a customized background. Final result in full size. The PNG file is avaiable HERE to download. Author: Fabiano Meneghetti | If you want to write an article and have it published here send it via email to abduzeedo[at]

Tutorial: Newspond menu on Fireworks - Part 2

This is the second part of the web design tutorial on how to create a website using Fireworks then CSS and XHTML. A few days ago we published the first part of the tutorial when we designed the page, now in this part we will show you how to go from that image to the webpage, using a CSS and HTML. STEP 1 First, let's study the layout and set some parameters, like which will be the main regions, so we can structure the html. STEP 2 To create the html, open you favorite text editor (notepad, dreamweaver, textmate, etc). Here I've used Smultron. What we have to do is now to create the areas following the regions we've set before: HEADER <div id="header"> <div class="wrapp"><img src="images/logo.jpg"/></div></div> CONTENT Here we're using 2 div's for central content because we're using shadows on both sides. <div id="content"> <div id="main"> </div></div> MENU <div id="content"> <div id="main"> <div id="menu"><!-- *** Main menu *** --> <ul class="nav_left"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Works</a></li> <li><a href="#" class="last">Contact</a></li> </ul><!-- *** Links right side *** --> <ul class="nav_right"> <li><a href="#">Login</a></li> </ul> </div> </div></div> SUPPORT BENEATH THE MENU <div id="content"> <div id="main"> <div id="menu"> <!-- *** Main menu *** --> <ul class="nav_left"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Works</a></li> <li><a href="#" class="last">Contact</a></li> </ul> <!-- *** Links right side *** --> <ul class="nav_right"> <li><a href="#">Login</a></li> </ul> </div><div id="sub_nav"> <span class="tip">Zee is a small studio located in Brazil.</span> <span class="links"><a href="#">Register</a> | <a href="#">Request Password</a></span> </div> </div></div> FULL CODE <body><div id="header"> <div class="wrapp"><img src="images/logo.jpg"/></div></div><div id="content"> <div id="main"> <div id="menu"> <!-- *** Main menu *** --> <ul class="nav_left"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Works</a></li> <li><a href="#" class="last">Contact</a></li> </ul> <!-- *** Links right side *** --> <ul class="nav_right"> <li><a href="#">Login</a></li> </ul> </div> <div id="sub_nav"> <span class="tip">Zee is a small studio located in Brazil.</span> <span class="links"><a href="#">Register</a> | <a href="#">Request Password</a></span> </div> <!-- *** Round corners for the content *** --> <div class="center1"> <div class="center2"> <!-- *** Round corners each item *** --> <div class="item1"> <div class="item2"> <div class="content-item"> <h1>Donec porttitor ligula eu dolor</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor.</p> </div> </div> </div> <!-- *** Round corners each item *** --> <div class="item1"> <div class="item2"> <div class="content-item"> <h1>Donec porttitor ligula eu dolor</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor.</p> </div> </div> </div> </div> </div> </div></div><div id="footer"></div></body> Save this file as menu.html. STEP 3 Now that we have the code ready, let's open the .png file and export the images that we're going to use in our CSS. To do that, we're gonna use the Slice tool, and we will create all the necessary slices with this tool, like we see in the images below: STEP 4 Save all your images in an images folder, right on the root where the file menu.html is. STEP 5 With all this images and the code ready, let's start our CSS. I've used CSSEdit to make this, but you may use your editor of choice. To begin, paste the following code inside the "HEAD" on menu.html: <link rel="stylesheet" type="text/css" href="style.css"/> STEP 6 We're also using here a file to reset all the tag configurations, what will make the manipulation of objects inside the layout much easier. Download the file "reset.css" (is attached at the end of this tutorial) and drop it on the root with the menu.html file. Open a new css document and save it asstyle.css. In the top of the document, import the reset.css with the following code: @import url("reset.css"); STEP 7 Now we beggin creating the style for our main ID's. Remember how I've told you before that we're going to apply shadows on the sides of #content and #main. body { font-family: Arial, Helvetica, Geneva, sans-serif; color: #000; background: #595D67; }#header { height: 100px; background: url(images/bg_header.jpg) left top repeat-x; position: relative;}#content { width: 844px; position: relative; margin: 0 auto; background: url(images/bg_shadow_left.jpg) left top repeat-y #434752;}#main { background: url(images/bg_shadow_right.jpg) right top repeat-y ; padding-bottom: 30px;}#menu { height: 30px; background: url(images/bg_menu.jpg) left top repeat-x; margin: 0 7px;}.wrapp { width: 844px; position: relative; margin: 0 auto;}#footer { height: 100px; background: url(images/bg_footer.jpg) left top repeat-x; position: relative;} Notice that the #content width is 844px, because it's the 700px for the body and another 7px of shadow for each side. It's important to know that we're going to centralize the main content. We're using 3 attributes to place it on the browser center:width, position e margin. Look: #content { width: 844px; position: relative; margin: 0 auto; background: url(images/bg_shadow_left.jpg) left top repeat-y #434752;} STEP 8 Now, the menu. Take another look on the code we've used to do it. Inside the "ul" is where we're placing all the links. Notice that we've used a class="nav_right" on the second "ul", because we're going to position it on the right side of the menu, that's what we've used here for our Login link. <div id="menu"> <!-- *** Main menu *** --> <ul class="nav_left"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Works</a></li> <li><a href="#" class="last">Contact</a></li> </ul> <!-- *** Links on right side *** --> <ul class="nav_right"> <li><a href="#">Login</a></li> </ul> </div> Now let's position our "ul"s and place the images that go on the menu extremes: #menu ul.nav_left { padding-left: 30px; height: 30px; background: url(images/bg_leftMenu.jpg) left top no-repeat; /** left image **/}#menu ul.nav_right{ position: absolute; /** position the menu on the right side **/ right: 7px; top: 0; padding-right: 30px; height: 30px; background: url(images/bg_rightMenu.jpg) right top no-repeat; /** right image **/} We're almost done. Let's a style for our link and check how they will look: #menu ul li { float: left; /** precisamos deste float para funcionar no IE **/ background: url(images/divider_menu.jpg) left top no-repeat;}#menu ul li a.last { /** add a image to the last element **/ background: url(images/divider_menu.jpg) right top no-repeat;}#menu ul li a{ display: block; float: left; height: 30px; padding: 0 18px; text-decoration: none; color: #FFF; font: .96em/28px "Lucida Grande", Lucida, Verdana, sans-serif;}#menu ul li a:hover { background: url(images/bg_menu_active.jpg) left top repeat-x;} STEP 9 Here we can see how the style will look for the text and support links beneath the menu. This is when we apply the shadow beneath it. #sub_nav { height: 50px; background: url(images/bg_shadow_subNav.jpg) left top no-repeat; margin: 0 7px; line-height: 50px; position: relative; font-size: .8em; color: #CCC;}#sub_nav span.tip { left: 30px; position: absolute;}#sub_nav span.links { right: 30px; position: absolute; color: #F90; }#sub_nav span.links a{ text-decoration: none; color: #F90;}#sub_nav span.links a:hover { text-decoration: underline;} STEP 10 Now you must build the bottom text boxes so we can finish the layout. We're not getting into details because this step is not our inside our objetive for this tutorial, mas we're going to talk further about round corners e text boxes in another article. But if you download the final files and analise it, you're see that the whole process is really simple. FINAL RESULT To see how your layout should be looking like right now, totally tabless and cross-browser, click here to check the final result. AnexoTamanho zeepond.zip17.77 KB menu_slices.png193.09 KB Author: Fabiano Meneghetti | If you want to write an article and have it published here send it via email to abduzeedo[at]

Tutorial: Newspond menu on Fireworks - Part 1

Today we begin a new series of tutorials, about layouts developing for web, from design creation to CSS coding. These tutorials will come in 2 parts: 1 - Layout; 2 - CSS. But our difference is that we're going to unveal and develop the tutorials about existing websites. Probably our steps won't be the same used to built these sites, but the idea is to simply show you guys how to get really close to the original layout. To begin the series, our first post is about the Newspond menu. The colors and effects are smooth and really modern. And it was the little details in the design that called our attention and made us decide to use it as our first tutorial We're going to use Fireworks to develop all the design, the steps are simple, but it's the adjustments and gradients that will make the difference in the final result. STEP 1 To begin, open a new document with dimensios 1000x660. Pick #595D67 for background color. STEP 2 Make a 1010x100 rectangle, and apply a gradient that goes from #3F444D to #000000. Position it at X=-5 and Y=0 (This X position will help our next step). STEP 3 Apply Filter > Inner Shadow, and pick this values as in the image: 0, 90%, 5. STEP 4 Now, let's make the menu. Create a 830x30 rectangle, centralize it on the stage and position it at Y=100. Apply the linear gradient using the colors as in the image. STEP 5 Bow let's creat the content area background. Create a rectangle and apply a linear gradient that goes from #434752 to #000000. Move the gradient as shown. This will do to make the shadow bellow the menu. STEP 6 Move the rectangle layer to under all the others and apply Filter > Drop Shadow, with the values: 0, 90%, 7. STEP 7 Write some texts in the menu to use as links. Here we use 4, but you may use as many as you want. After that, draw a #9EA8B2 line at the top of the rectangle. This will make the menu pop out. STEP 8 Now, let's creat the background of active links. Create a rectangle and apply a linear gradient that goes from #000000 to #434752. Position the gradient as shown. You can see in the detail that we've created a #555C68 line above the rectangle. STEP 9 Now, we're gonna create the lines that will separete each menu link. We are also going to align the links within the menu. Follow the steps bellow creating the lines (notice that besides the colors, you most group the lines and apply a 40% opacity), then creating the guide lines leaving a 30px space from the border, adjust the spacing e for last create an extra link right aligned to the menu. STEP 10 Create the small border gradients. Create a 20x30 rectangle. Apply a linear gradiente in the horizontal position with the colors and opacity shown (notice the Feather=2). After that, copy it to the other side and apply a modify > trasnform > flip horizontal. STEP 11 We're almost done. Let's make the menu pop out a little bit more, by creating a stronger shadow beneath it. To do that, i've created an #000000 ellipse with Feather = 33. Move this ellipse layer towards the bottom, just above the rectangle that will be the content body. STEP 12 Now all we gotta do is create some content in the central body. You may display the content however you wish. We've used some text blocks in order to get a little bit close to the original site. Besises that, put your logo at the top. You may create a #BCC9D9 ellipse with Feather = 75 and put it beneath the logo to make it shine. FINAL RESULT You can download the sample file HERE (196kb). Hope you all liked it. Author: Fabiano Meneghetti | If you want to write an article and have it published here send it via email to abduzeedo[at]

Apple Air Banner in Fireworks

I’ve always been a huge Apple fanboy, I love the attention to the details and the importance Steve Jobs and his team have given to the design above all. With the new Macbook Air is not different. It’s just incredibly thin and very beautiful. Well I’ve started to save money because I will have to get one of those. Another thing that caught my attention was the banner they had placed in the Apple’s front-page, I really liked the simplicity with gradients and the new typeface, Myriad Light I think. Because of that I will show you how to create that effect in a easy and quick way using Fireworks. Step 1 New document, I used 800x600px and set the background to black. Step 2 Get the Apple’s logo from a typeface or you can get it on this link After that open it in Fireworks and keep it vector. Copy it and paste it in your document. Step 3 Place the logo like the vector below and choose Gradient>Radial for the fill type. And for the colors a dark grey and a light grey. Using the Gradient Tool click between the leaf and the apple, hold the button and drag it to place and create the gradient. Use the image below for reference. Step 4 Make sure that the logo is selected and go to Modify>Alter Path>Expand Stroke. Use 3px for the width, rounded corners, and rounded caps. After that go to Modify>Combine Paths>Split. We will have 4 objects, select the 2 smaller ones go to Modify>Combine Paths>Join, rename the layer to “front”. Then select the other two and repeat the Join command. Rename the layer to “back”. Tip: the join command will allow us to apply a gradient for the objects. Step 5 Select the “back” layer and apply a gradient. This time Linear and for the colors use 4 levels: black, white, white, and black like the image below. Step 6 Using the Rectangle Tool (u), create a rectangle like the image below. After that change the fill type to Gradient>Linear. For the colors use black for the start and end, but change the opacity for the start point to 0. That will create a shadow. Step 7 Add some texts with a light font, I’m using Helvetica Neue Ultra Light. Conclusion I have to say, my favorite tool is Fireworks. I work with web design basically and it’s the most versatile tool for that. It has amazing vector tools that allow me to create and edit shapes like in Illustrator or the extinct Freehand, but at the same time I can play with bitmaps and tons of other great features.