Life's easy with Medialoot.

Unlimited access for only $14/mo.

How to Design a Clean Website Template From Scratch in Adobe Fireworks

How to Design a Clean Website Template From Scratch in Adobe Fireworks

Welcome to the first instalment of this 2 part tutorial in which we will be creating a clean, crisp website homepage design from scratch using Adobe Fireworks, and then coding it with HTML5 and CSS3 in part 2 next week.

In this tutorial, a basic understanding of the Adobe Creative Suite will be required, for example familiarity with Photoshop or Illustrator will be ideal, but if you already have Fireworks experience then that will be a huge bonus for you.

What You’ll Need

Some of the elements used in this design are premium resources from our design collection. Premium members can download these now in preparation:

If you are not a MediaLoot member, then don’t fear because alternatives can be used, try Icon Finder for some 32px icons and check out these Apple Products on WeGraphics.

The fonts used in this tutorial are Pacifico and Helvetica Neue (Any sans-serif font such as Arial will do on a PC)

The End Result

Let’s get started by taking a peak and the end result that we will be working towards.

design and code web site in fireworks
Click for a full size preview.

The Document

Start by launching Fireworks and creating a new document.

design and code web site in fireworks

We will be using the 960.gs grid system for our design, it’s a good idea to use a grid when you are designing, even if you don’t stick to it religiously. A grid will help you produce designs that are easier for your visitors to follow and digest the layout.

Download the package from 960.gs and install the Fireworks extension, you can then access functions from the Commands menu to create a 12 column grid (no need to have template files lying around).

design and code web site in fireworks

The Header

Use the Rectangle Tool to draw a shape along the top of the document.

Important Note: Use the Properties window in the screenshot for guidance with dimensions and position of objects. If you are unsure just enter the W, H, X, and Y information exactly as it appears on the screenshot.

design and code web site in fireworks

Give the rectangle a Linear Gradient Fill and a Drop Shadow from the Live Filters section of the Properties window.


design and code web site in fireworks

Next select the Text Tool and click onto the canvas near the left side of the first column to create a new text box. Enter the title of your project (in this case I chose “Dreamweb” but it’s up to you).

design and code web site in fireworks

Create another text box just below and aligned to the right hand side of the first.

design and code web site in fireworks

Select both objects and right click them to bring up a contextual menu, you should see Convert to Symbol as an option, click this.

design and code web site in fireworks

Use the Rounded Rectangle Tool to draw our first button in the main menu, make sure you have the Auto Shape Properties window open (can be selected from the Window menu).

design and code web site in fireworks

Apply a Gradient Fill, Stroke, Drop Shadow and Inner Shadow to give the impression of this button being pressed in.

design and code web site in fireworks

Add some text, aligned to the center of the button, and enter the text ‘Home’.

design and code web site in fireworks

Duplicate the first button (copy and paste or hold ALT and drag) and nudge it 10px to the right of the first button. Apply some new styles to make this button appear inactive.

design and code web site in fireworks

We will be using this button multiple times in the menu, so convert it to a Symbol. Symbols allow you have a “master” version of items or sections in a design that are used multiple times, so if you were to edit this button now, all other instances of it will immediately reflect the changes (which can be a huge time-saver).

design and code web site in fireworks

Duplicate the button twice and place each one 10px from each other, towards the right.

design and code web site in fireworks

Create 3 text fields, one for each button and center align them. You will also want to make these a slightly darker color than the Home link.

design and code web site in fireworks

The header of your document should now look something like this..

design and code web site in fireworks

The Feature Area

Start off again with the Rectangle Tool and draw a shape covering the feature area. Set a Radial Gradient emanating from the bottom left of the rectangle. And also select the ‘Hatch 2’ preset texture (25%) with Transparent ticked.

design and code web site in fireworks

Move over the right hand side of the feature area now and create a text box filled with about 10 words (use lipsum.com to generate some dummy text)

design and code web site in fireworks

Create another text box just below, and again fill it with a few sentences of your text or dummy text.

design and code web site in fireworks

Draw a Rounded Rectangle with the corner radius set as high as it will go (which should be 31 if you are following the exact dimensions show in screenshots). This is the outer border of our 3D style button.

design and code web site in fireworks

Draw another new rounded rectangle on top of the first one, this will be the depth/3D element of our button

design and code web site in fireworks

Duplicate the last rounded rectangle and nudge it up by 4px, then set a gradient fill and drop shadow.

design and code web site in fireworks

Place some text in the centre of the button, this will be your main call to action on the page.

design and code web site in fireworks

This section of the feature area should now look like this..

design and code web site in fireworks

For this bit we will be using a stock resource for the computer display, as mentioned at the start of the tutorial, MediaLoot premium members can download the Sleek Vector Displays set to use (note: The EPS will open in Fireworks as a vector).

design and code web site in fireworks

Place the image that you want to use for the feature area into your document, above the screen layer of the computer display, and below the gloss layer. Then select the the screen layer and copy it, select your image and go to Modify > Mask > Paste as Mask from the main menu. This should create a clipping mask around your image using the screen layer.

This step will inevitably vary if you are using an alternative resource, but the paste as mask technique should still work, although you may have to draw your own rectangle to use as a mask

design and code web site in fireworks

Next up we are going to create a diagonal banner over the top left corner of the display. Start by drawing two small rectangles.

design and code web site in fireworks

Use the Pen Tool to draw a banner shape, by drawing the small rectangles first we have a starting point to use, start from the bottom left corner of the small rectangle on the left, and go to the top right corner of the small rectangle on the top, you can then go about 50px to the left (hold shift for straight lines), and diagonally left and down, then straight back to the first point to complete.

design and code web site in fireworks

Create a text box and type in ‘NEW’, you can rotate the text box to match the banner by going to Modify > Transform > Numeric Transformation in the main menu and selecting Rotate, 45 degrees.

design and code web site in fireworks

The feature area is now complete, you should have something that looks like this..

design and code web site in fireworks

Featured Services

Draw a text area and enter one of 3 featured services you offer, I choose ‘Web Design’ for the example.

design and code web site in fireworks

Place a few sentences of text or dummy text below the header.

design and code web site in fireworks

Use the Line tool to draw a straight line, the same height as the text box but with a 3px wide stroke.

design and code web site in fireworks

Drop icon number 84 from the WAPP Web App Icons 2 set into your document and place it next to the header text (non-MediaLoot members, use a site such as Icon Finder for an alternative 32px icon).

design and code web site in fireworks

Draw a Rounded Rectangle.

design and code web site in fireworks

We will be using this button multiple times though out the document too, so convert it to a symbol.

design and code web site in fireworks

Place some ‘Find Out More’ text above the button.

design and code web site in fireworks

Select all six object we just created and duplicate them twice, position as show in the screenshot (remember, the dimensions and position are in the Properties window in all screenshots).

design and code web site in fireworks

Update the headings, icons and text to match the services you offer. For the icons I have used icon number 1 and number 78 from the WAPP icon sets.

design and code web site in fireworks

We will now draw a shadow divider below this content using a gradient, make sure you use a Contour gradient so that it fades at the sides as well as towards the bottom. I’ve zoomed into the gradient 300% in the screenshot so that you can see how the gradient direction line is placed.

design and code web site in fireworks

After doing that your document should look like this..

design and code web site in fireworks

About & Testimonials

Start off as we did with the last section by creating some header text.

design and code web site in fireworks

Draw a rectangle below the header.

design and code web site in fireworks

Use the pen tool to draw a shape similar to the one in the screenshot, it should be about 134px wide and 12px high, and it needs to dip in middle of the bottom line, don’t worry about the blur, it will do that when you set the Edge to Feather and the strength value to 16.

design and code web site in fireworks

Use the same Paste as Mask technique discussed earlier to clip your about us image to the dimensions of the first rectangle we drew in this area.

design and code web site in fireworks

Place some paragraph text next to the image.

design and code web site in fireworks

And another paragraph below the image to give the illusion of text wrap around the image.

design and code web site in fireworks

Duplicate the first header text and nudge it over to the right hand side of the document, update the text to ‘Testimonials’.

design and code web site in fireworks

Draw a Rounded Rectangle.

design and code web site in fireworks

And another Rounded Rectangle above it slightly shorter.

design and code web site in fireworks

Now use the Smart Polygon Tool to draw a shape, set the points and sides to 3 to make a triangle.

design and code web site in fireworks

Align the triangle to the center of the Rounded Rectangle and use the Path window to perform a Union Paths boolean operation.

design and code web site in fireworks

You should end up with a speech bubble type shape.

design and code web site in fireworks

Place some testimonial text into the speech bubble shape.

design and code web site in fireworks

And a name in the section of the first Rounded Rectangle still visible.

design and code web site in fireworks

That’s the top section done! just the footer to go now, and your design should be looking something like this..

design and code web site in fireworks

The Footer

Start by drawing a Rectangle that fills the rest of the document.

design and code web site in fireworks

And add another header for ‘Twitter Updates’.

design and code web site in fireworks

Place some example tweets into the area.

design and code web site in fireworks

Grab the Button 1 symbol and place it below the tweets.

design and code web site in fireworks

Put some ‘Read More’ text on the button.

design and code web site in fireworks

Duplicate the header text and first line of paragraph text and align it horizontally with the fifth column on the grid, vertically it should be in the same position as the first header and text box.

design and code web site in fireworks

Draw a Rounded Rectangle for the text input field.

design and code web site in fireworks

Add some placeholder text (ie. ‘Email address’).

design and code web site in fireworks

Create a Rounded Rectangle and set the top left, and bottom left corners to 0, so that it is only rounded on the right hand side. You will need release the values link by clicking the small lock icon.

design and code web site in fireworks

Add some ‘Sign Up’ text

design and code web site in fireworks

Duplicate the header text and update it to ‘Social’

design and code web site in fireworks

Place some social media icons from this Free Social Media And Blogging Icon Set into the document and lay them out as illustrated in the screenshot.

design and code web site in fireworks

Duplicate the header text again for the ‘Feedback’ section.

design and code web site in fireworks

Duplicate the field from the newsletter section 3 times for the feedback form, you will need to increase the height of the last field as it is the message field, use the Auto Shape Properties window or the handle on the shape to do this.

design and code web site in fireworks

Copy the Button 1 symbol and add some ‘Send Message’ text, the same as the other buttons in the footer.

design and code web site in fireworks

Add some copyright text to the bottom left corner of the footer.

design and code web site in fireworks

And finally, duplicate the Logo symbol from the top of your document and place in the bottom right corner of the footer.

design and code web site in fireworks

Conclusion

Congratulations, you have just designed a whole home page concept in Fireworks!

design and code web site in fireworks
Click for a full size preview.

Let us know your thoughts on this tutorial, we hope you enjoyed it and may have learned some new techniques. Thanks for reading and don’t forget to check back next week for part 2 when we will be coding this up into HTML5 and CSS3.


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Comments

  • Reply »
    Peter Richardson

    Peter Richardson

    Not had time to have a detailed look yet. But I will, it ‘looks’ very cool :)

    Jun 9, 2011 at 11:55 am
  • Reply »
    Nick

    Nick

    Nice tutorial - and I didn’t realise 960gs had a Fireworks extension! Little things like using that extension that save lots of time :)

    Jun 9, 2011 at 12:50 pm
  • Reply »
    manoj

    manoj

    a good tutorial….......to learn….....

    Jun 15, 2011 at 3:29 am
  • Reply »
    María Lc

    María Lc

    Great tutorial!

    Jun 15, 2011 at 2:34 pm
  • Reply »
    Michael

    Michael

    excellent tutorial! about time someone done a layout design in Fireworks not everyone uses Photoshop for it!

    Jun 15, 2011 at 7:02 pm
  • Reply »
    Monirul Islam

    Monirul Islam

    excellent tutorial. please keep on posting

    Jun 16, 2011 at 3:19 am
  • Reply »
    Barry La Vette

    Barry La Vette

    Excellent tute!

    Jun 24, 2011 at 5:42 pm
  • Reply »
    Rey Linares

    Rey Linares

    BEST TUTORIAL EVER!!! Keep up the work.

    Jul 1, 2011 at 11:37 pm
  • Reply »
    daniel

    daniel

    so good…nice tutorial…...
    congratulations

    Jul 3, 2011 at 2:18 am
  • Reply »
    IceBoxDesigns

    IceBoxDesigns

    Love it, thanks for taking the time for sharing!
    very detailed i hope you do another one soon :)

    Aug 12, 2011 at 7:53 pm
  • Reply »
    Silvia

    Silvia

    Thank you for this FIREWORKS tutorial! Especially for the technique of the hand made shadow layer!

    Dec 28, 2011 at 11:45 am
  • Reply »
    Mohammad

    Mohammad

    Excellent tutorial very clean design

    Jul 27, 2012 at 1:04 am
  • Reply »
    Mohammad Nasir Rahimi

    Mohammad Nasir Rahimi

    Thaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanks.

    Oct 10, 2012 at 3:44 am
  • Reply »
    JD

    JD

    Great tutorial, I would be interested to see a more updated version with fireworks CS6

    Nov 4, 2012 at 1:46 pm
  • Reply »
    Paul Cranknee

    Paul Cranknee

    Great Tutorial. Many thanks.

    Dec 1, 2012 at 11:36 am
  • Reply »
    Jack

    Jack

    Hi..
    This tutorial was amazingly detailed. I learned more by creating the website via your tutorial than I did in my Graphic Design and Photoshop classes put together. Thank you so much! A very annoying cloud has been lifted off of the intimidating monster that is Photoshop.
                                    Thanks again!

    Jan 14, 2013 at 4:51 am
  • Reply »
    Ratna kumari

    Ratna kumari

    I want to know how to design the templates. How/ give suggestions and clarifications

    Jan 22, 2013 at 5:11 am
  • Reply »
    john

    john

    ya nice , it is very useful to me

    Feb 14, 2013 at 7:07 am
  • Reply »
    tukei

    tukei

    an amaziiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiing effort

    Apr 29, 2013 at 1:27 pm
  • Reply »
    Linc

    Linc

    Amazing tutorial…. after this i have a much deeper understanding on adobe fireworks.. Thanks… Please post more

    May 18, 2013 at 3:15 pm
  • Reply »
    Duh

    Duh

    Uh this works fine with CS 6 not much difference, I just did it.

    Jun 9, 2013 at 11:40 pm
  • Reply »
    Matt

    Matt

    One of the best tutorials i’ve seen. I would happily pay for this but thanks for releasing it for free. I’m mid way through the tutorial and differently leaning a few things. Didn’t know you could use shadow. Thank you for taking your time to upload every tiny detail. Certainly helps!

    Aug 18, 2013 at 3:34 pm
  • Reply »
    M.A. Vinoth Kumar

    M.A. Vinoth Kumar

    Your tutorial is awesome. Clean and detailed explanation with images. “Best teacher” :-)

    Sep 23, 2013 at 5:24 am
  • Reply »
    Maria

    Maria

    What a great tutorial! I’ve learnt a lot! You have been doing wonderful work here. Thank you!

    Apr 16, 2014 at 7:58 am
    • Reply »
      Jenn Coyle

      Jenn Coyle

      You’re welcome, Maria. We’re glad the tutorial was helpful!

      Apr 16, 2014 at 9:35 am
  • Reply »
    AK

    AK

    Nice tutorial, I love it, I am coming back for more reference.because this tutorial will help me to upgrade my website design experience.
    thanks once more

    Jul 24, 2014 at 10:28 am
  • Reply »
    Peter parker

    Peter parker

    Designing a website using adobe framework is little bit difficult to maintain even if you are not familiar with adobe fireworks. Here you share a point to pint steps for designing a best website which are very useful in future.

    Dec 18, 2014 at 2:53 am

Leave a comment

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

Attribution for free resources must be provided in conjunction any time the freebie is used, on the same page where the resource appears on your design. Or, you can purchase a premium version of the free resource.

See all