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.
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
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.
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
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.
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 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.
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!
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.
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.
Abduzeedo by http://abduzeedo.com is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. Permissions beyond the scope of this license may be available at http://creativecommons.org/about/licenses/.
