Creating a cool website header in fireworksListThumbs
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.
39 Comments
I really like this effect, the matrix style person is really cool too.
Wow! I can't wait to try this out! great articles and tutorials!
Like it! Nice colors! Thanks for sharing.
Amazing!
Can't wait to try that out for my blog. It needs a new header.
I'm a Fireworks guy myself, so I'm always happy to see not everyone is creating Photoshop tutorials. ;) Great work!
Awsome! Its a very nice tut!
Long life to Fireworks! :D
It looks hard, but it is actually a little easy :) Thanks!
cool, i liked...
Oh Snap!
It reminds me of the Audioslave video Cochise, http://www.youtube.com/watch?v=PXdSOxEnwWM
Sorry i couldnt find any lower resolution!
Really enjoyed this tutorial. Thank you
simple yet only a creative mind could come up with the idea.
very nice effect
is there an advantage to using fireworks over photoshop?
@Anonymous: I always use Fireworks to do my layouts. It's easier and faster to do a lot of things, especially for web design. Take a look at this article of Jason Santa Maria. He explains preety well why Fireworks is the tool for web designers!
Pretty cool
The only step that lacked proper explanation was creating the vector neon things.
I'm still kinda confused :S
I learned something new about Fireworks, which is my tool of choice.
In step 6 you mentioned both Vector Path and Pen Tools. I used the Pen Tool. What were your tool settings in Step 6? Thanks.
aguante photoshop, fireworks apesta !
very hott mayne
Excelente tutorial!! Muito bom mesmo. Mas porque voces nao fazem uma versao deste site em portugues?
Clear Quick simple solutions Rule !
This is really good, I just love it. I shall try it soon. :)
I may be the king of basic around here, but I couldn't even resize the image to fit the 1200 x 400 canvas without it getting all blurry.
beru good man.
com a explicação fica mto mais fácil
abraço
God bless you.
Brasil.
I'm a Fireworks guy myself, so I'm always happy to see not everyone is creating Photoshop tutorials. ;) Great work!
I have CS2 and I am having trouble following your tutorial...I am self taught and really don't know the ends and out but on steps 2 and 3 when you are creating a rectangle which are you using The rectangle tool or the rectangle marquee tool and last the settings you have in step three I can't find them..any help would be appreciated
This is some very talented work! A very creative flare for the unique! I am more basic, this brings everything to a new light.
Thank You very nice topic
great tutorial! thanks a lot!
Anyway to get a tut for photoshop? Didn't really read through it. So I guess I might try to do it on PS later. Cool tut.
Nice Tutorial,
maybe a bit late, but in step 6 how do you fade those lines to black (transparant)? I'm using Fireworks on Windows.
In step 2, why not use "Fuzzy Light"?
It gives a more proffesional result.
Nice work ,great collection. Thanks for the share.
I really like this effect, the matrix style person is really cool too. muhabbet
[b]Tuto excelente !!
Muito show ![/b]
thanks for the tutorial!! I've worked with Fireworks for several years and I preferred because is easy and quick.
Amazing Dude.
In step 3, you have created a box with diagnol effect, which is in top right corner. And in next step it shows that in colouful effect, this step wansn't explained there.
And same in the step 6, the effects on vector paths are also not defined.
I'm really very useful to follow a long-time see this as a blog here Thank you for your valuable information.
I'm really very useful to follow a long-time see this as a blog here Thank you for your valuable information.
Post new comment