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

About author

I'm from Brazil, co-founder of Zee with Fabio. Nowadays I like to play with Fireworks, Photoshop and improve my skills in CSS. If you wanna request some posts, please feel free to contact me.

Sponsored Links: