In this week’s Premium video tutorial, we’ll teach you how to design a home page for a website using Adobe Fireworks CS4. Over the course of the video, you’ll learn numerous tips and tricks to accomplish the final design, including how to work with a grid. Help give back to Nettuts+, and join Plus!
In Depth Video Training
Final Design
Join Tuts Plus
For those unfamiliar, the family of TUTS sites runs a premium membership service called “TUTSPLUS”. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!
- Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
I’ve been looking for a really good tut on this. I haven’t had a chance to read over it yet, but i will make sure to as soon as I get a chance. I hope it’s the tits!
You hope it’s tits? What?! A tits tut? Your werid lol
Hate to be a stickler but I think you mean “you’re” weird… as in you are.
burn. Its plus.
lol ;)
sorry after 5 minutes in I had to turn it off. Please be more prepared before you start recording your tut. I am a paying customer so I get to be critical… : )
I’ll get off of my soap box now. I will certainly come back and try to watch it when I am in a more patient frame of mind.
Don’t be discouraged I may love it later.
poor
Awesome stuff Henry, thanks for the tut and getting me converted to FW!
Fireworks is one of the adobe suite apps that I never use because I’m so used to photoshop and illustrator. Is fireworks starting to gain ground with the web dev community?
Hi Taylor – it’s not starting – it allready going. It’s never going to be as good tool for photo as photoshop, but I think is very powerfool tool for webdesign.
Where I have found Fireworks to be crazy useful, is making E-blast templates. E-blasts need to be coded in tables (which is asinine); you can export your design (if sliced well) into DreamWeaver it codes it into tables for you.
Anthony- really? how would that work? – I’m still debating if using fireworks is worth the try, I’m so use to photoshop that it’s hard for me to believe that fireworks can be perhaps a better tool to design sites.
Fireworks is a great tool for prototyping and exporting a semi-working website for clients to assess, as it allows you to export your design into HTML and CSS, with rollovers, selectable text etc. Although you should never use this export feature for a finished product, using fireworks to export a final product makes baby jesus cry.
I wouldn’t recommend it being the ONLY tool you use to design your site, it does not have a number of the tools that photoshop is able to provide. But is certainly helpful in many ways.
At the same time, I definitely recommend looking into it and seeing how it can be used in your own design process.
Poor plus users. This is pretty weak. Just to judge from the stuff we see as free user.
Best regards from Germany
Hey Ben,
Hier entsthet gerade ein neuer Development- und Designblog auf deutsch:
http://design-creators.net/
Das erste Tut ist ein Fireworks-Design “from null”. Kommt aber erst morgen oder am WE ;D kannst es dir ja mal ansehen.
Mit sowas online zu gehen ist ja wohl ein Witz. Softlaunch in allen Ehren, aber zwei, drei Inhalte dürften es schon sein.
Und über die Zeichenformattierung auf edgespan solltet Ihr auch noch mal drübergucken.
Kein professioneller Start, oder?
Zeichenformatierung? UTF-8, ich sehe keine Zeichen die nicht korrekt dargestellt werden.
Von Professionell ist doch auch nirgendwo die Rede(Bezug DesignCreators), es ist ein Freizeitblog bei dem es darum geht die extrem dürftigen deutschen Resourcen für solche Tuts zu erweitern. Btw: Nettuts ist auch mit 0Tuts gestartet.
Alexander, Is there a version of this site or something similar in english?
Exactly, this is pretty poor, I wouldn’t pay $9 to see this to be honest.
Fireworks is not as widely used as photoshop, great tut for Firework users though
No, it’s not a great tut for Fireworks’ users. It’s really poor close to what Fireworks can do. It’s an awesome software with great tools to design a website. For me, who uses Fireworks since 2003, it’s just a “oh, we have a fireworks tutorial – and it’s poor”.
Off course, I don’t think we can use just one tool to make a website. Photoshop is awesome, and can be used to do great things for websites too. But Fireworks have more interesting tools for web. The ideal, for me, is use both, specially if your project needs great photo treatments.
Ok, sorry for the broken english. I’ll be happy if we could have great Fireworks’ tutorials, because this software is more powerful than people think.
english please
Fireworks isn’t the best tool for designing websites. I find it to be quite limited.
What would you recommend? I have been using Fireworks for visuals since version 2 because of the mix of raster and vector stuff. Photoshop is great for doing graphic stuff and editing photos but i don’t find it accurate enough with co-ordinates when doing visuals (in Fireworks you get handles).
I have been looking for an alternative cause Adobe are just sticking random rubbish in like pages and effects etc. and making it more expensive. As a freelancer I feel that the price of software is quite expensive these days, so I have been looking for alternatives.
DrawIt on OSX 10.6 is looking decent but not really a replacement, what do other people use?
I have been noticing in the past couple design tuts that everyone uses like a crazy amount of guidelines. Whats up with that? Is it really necessary to have your entire screen covered in them? This isn’t solely directed at this tutorial but an overall design question I guess. Judging by the screenshots in this tutorial …
http://psd.tutsplus.com/tutorials/interface-tutorials/create-a-professional-web-2-0-layout/
… it seems that they are just being added to all sides of every element in the page. Seems kinda pointless to me.
Thats the 960 grid system. Can be really usefull at times
http://960.gs/
It might have something to do with this: http://960.gs/
We call that a grid. Elements automaticly snaps to them and provides alignement.
hey man good job but u need to work more on the presentation
keep going, and we hope the next tut will be great
Fireworks is my preferred choice over Photoshop. Sure Photoshop is packed with more features – but FW beats it hand down in terms of quick prototyping and even standard graphics.
I agree with “Sid”. I’m using fireworks for almost all of my design. Great and quick tool.
I totally agree with Sid, Fw is just so much faster and easier to work with. Also the slicing function is superb, copy paste, correct size and all that. I always use Fw for making websites, mostly I get .psd from client and slice it with Fw for dev. Love Fw…
i prefer photoshop + 960grid for designing layouts. but only because i never used fireworks before!
I think this tuts is a bit too basic, why use Fireworks for this if you don’t use the different pages, a master page and some button symbols with rollovers?
I’ll try to make a tut about Fireworks soon, it is really great for creating wire frames, large site designs and interactive PDF files to show your client. Also it is a lot easier to change a design later during the project.
Oh, that would be lovely!
Looks like aw3some..!
thanks
Fireworks is awesome. I use it as my primary tool for designing websites. Using it with dedication since version MX (when macromedia owned it)
I think the textures like plastics and chrome in fireworks is awesome, But I am still not convinced that fireworks is the best to design websites, for me I love designing in illustrator I have more control over custom shapes and am more fluid with laying elements out.
However, I LOVE the div css/html export feature in fireworks. This is really the only way that I was able to begin to understand how divs and css/html worked. I simply layout the framework in fireworks and export as css/html then tweak the html from there, Never has my website design workflow been so intuitive and cross browser error free.
–
Thanks and Regards
Noel for Nopun.com
a graphic design studio
I will stick with Photoshop.
nothing beats FW on web prototyping (or image optimi-ziza-tion BTW) =)
I know Photoshop and Fireworks about equally. Even been using Fireworks since it’s first version. I really want to love Fireworks, but at the end of the day, i always end up coming back to Photoshop. For designing a mockup, there are just too many things it cannot do, or does poorly compared to PS. I end up having to do something in PS and then import it into FW. I do love how FW works with lines, textures, rounded corners, etc. PS could learn a few things there. But overall, PS can do virtually ANY visual effect, even if it’s not easy to do, while FW can do some visual effects easy, but it can’t do ALL effects. And the compatibility between FW and PS is poor. For example, if i import a PSD into FW that has layer effects, I have very little control in editing those layer effects in FW. And the equivalent of Layer Effects in FW is poor when compared to PS.
However, I think I will consider FW for wireframing and quick “interactive” mockups when a client needs to see how things would interact.
Been working with Photoshop many years now. Just sometimes with FW, made a project with over 130 pages. Try to make that in Photoshop. Concept / first creative work then Photoshop is number 1 and will always be. But when it comes for prototyping, more pages then we taking Fireworks CS4, pages, library, ahh like it. Try to rescale a shape in Photoshop, you can not do it, you have to remake it. What the… Come on CS5 must get this stuff from Fireworks.
Hi Henry. Thank you for your tutorial. I think it was pretty good.
I’m mostly a Photoshop guy but I sometimes use Fireworks for quick prototyping / mockups, leaving the final art mockup for Photoshop because I’m more comfortable with its tools.
Anyway, I appreciate watching somebody working in a project with an application that I’m not so familiar with, because I always learn a thing or two, and I did learn a few things from your screencast.
By the way, what software did you use to record your screencast?
so cool desain with framework bro
I’m a Fireworks users as it’s just the first package I got used to. I’ve played with a trail version of Photoshop and found it quite difficult to pickup so returned to what I know best. Is Photoshop really that much better from a web design perspective? Am I going to have to take the plunge?
Well, depends what you are looking forI guess,
FireWorks is alot better for big webprojects, layouts, wireframes and any project where the same objects or items keep getting used/changed.
You can create objects that you can re use over and over and change all of them at one time. Really great.
But for just creating a mochup for 1 page or really visual creative design I guess Photoshop (or Illustrator) is alot better. You just have more controll over layers, filters and effects.
I find myself crating the fist 3 pages in Photoshop and then moving the designs over to Fireworks.
I’m the total opposite Phil and wondering whether to have a go with Fireworks due to what Thaclown was talking about.
never really used fireworks, tried it before but decided to go with photoshop may download the trial and give it a blast.
Does anyone know where I can find more Fireworks tutorials?
I’m a Photoshop user primarily, but have been told that alot of web design agencies use Fireworks for their mock ups. I would like to be able to master it so that I would not be overwhelmed if I got a job with an agency that uses fireworks as their main web site prototyping tool..
cheers
O
Fireworks is the best tool for web development, in my opinion.
First, you can measure everything in pixels which is great for websites, where you need precise control over the elements to create pixel-perfect layouts. I know Photoshop users will work more ‘around’ the dimensions, using only a 960 grid, but assume you need to make a precise widget like a myspace widget or music player already built in some dimensions. Most people tend to capture the screenshot of the widget and use it in Photoshop, but haiving pixel control is more powerfull.
Second, it allows you to work very fast, basically faster than in Photoshop. And the most important thing is that you can make everything nondestructive ( group objects and later apply styles to them )
I would like Fireworks to be used more in development because it is the greatest when it comes to web development, plus you can export nondestructive data to flash directly.
That’s my opinion, anyway cool tut !
For all Photoshop users:
What is the fastest way to measure the distance between two guides?
In Fireworks CS4 you just position the mouse pointer between the guides, press Shift and that’s it….
Uber cool, I didn’t know that.
Can you tell where I can find more tips like this one?
Thank you.
The ruler tool is right up your alley. It is found underneath the eyedropper tool in the menu bar, press Shift-I to swap (or just I if you turned that on). It allows you to measure the distance between two points you drag out. This is powerful when combined with an accurate grid system like 960.
Thnks for this tut! When will the next screencast?
Didn’t watch more than 30-seconds.
If you can’t get the aspect ratio right, then I can’t imagine what else you can’t get right.
Very poor form.
Gutted I was planning to do exactly the same tut (well, same topic anyway). That’ll teach me for procrastinating so much! I will have to come up with some more specific FW tuts for the rest of the community that use it.
Those that stick their head in the sand and think PS is the only app to use are really missing out. There is no 1 super app that does everything you need so using the strengths from both and knowing when to use different apps are what makes a good web designer.
good tutorial, thanks
Hi- Is it me or is the tutorial missing the video feed?
Nice tutorial, but i love photoshop…:)
Henry,
I promised I would be back. I was a little tough on you but after taking some time I did give this a second chance and I am glad I did. Minus some distractions this was a nice tutorial. I don’t use FW but would consider using it if the opportunity arose.
Even though this tutorial was mainly aiming towards beginners, I wanted to show that Fireworks can be easy to use once you give it a try. I never really felt comfortable with PS and I knew I was never happy with it, so I tried FW. Fireworks did everything I needed much faster, so I was happy with it.
All I want to say is give FW a chance for your next project. If you don’t like it you can always go back to PS. I’d love to make another tutorial showing how to use more functions to increase the productivity of a completely designed site. Using “Pages” in FW is something essential to a Web Design Application. Also the “Share To All Pages” is very effective when using the same elements like the sidebar. It can be shared to different pages and you only need to edit those elements in one location.
Like I said, give it a chance. You have nothing to lose.
- Henry
I’ve always been a big fan of PS, but these days more and more people that I’ve worked with have started using Fireworks. So finally I gave FW a change and started to get to know it better. And I gotta say this tut helped me with getting started.
Now I though hope to see more tuts about FW and especially a good tut about the state where you’re ready to take the design out from FW into code. Meaning including what exporting options you have, best choices for image compressions in FW and so on.
very nice design tutorial…
Fireworks is such a powerfull tool for web-lay out designing it consuming 4 time as compensation of photoshop.. thanks for the article.. :)
i can recreate that layout in fireworks so easy…. this is a dumb tutorial… why is a premium one??
I’ve been looking for a really good tut on this. I haven’t had a chance to read over it yet, but i will make sure to as soon as I get a chance. I hope it’s the tits!
Firework is an excellent web design tool. But a website for teaching about web design Firework less.
I have always loved fireworks cos it really rocks. Everything about it is at your fingertips.
This makes me want a premium membership!
I’ve been looking for a really good tut on this.
I wonder If I can design a website using fireworks.. I fireworks really a good tool?
I hope to see more advance stuff in Fireworks , Im not yet convince in converting myself (Photoshop user) using FW in this tutorial.
I’ve been using FW since it was Macromedia 8. I find everything I need to design here with a few exceptions to use Photoshop. I find FW faster and easily convert to html for Dreamweaver. If others only knew the beauty of FW!
I wish I can create like this. But it needs more knowledge in html and css.