Fireworks Tutorial: Cutting guide map make beautiful web page

There's always someone out there showing off their PS (Photoshop) technology, it seems to be a plane to do with PS, the results of a lot of web designers to do with PS floor plan and then cut the map, and then do the site, today I would like to say with fireworks can make good web design, as long as you have the heart!

First look at the final effect chart:

Here's how to start:

1. Layout

Let's start by making the size of our web page.

Height: There is not a fixed value, because each person's browser toolbar is different, I have seen the browser toolbar is a plug-in account for half the screen, so the height does not have an exact value.

Width:

1, under the IE6.0, the width of the display resolution minus 21, such as 1024 of the width-21 to become 1003. But it's worth noting that IE6.0 (or lower) will have a scroll box on the right, no matter how high your page is.

2, under the Firefox, the width of the percentage of discrimination minus 19. Like 1024 width-19 to 1005.

3, under the Opear, the width of the division rate of differentiation and reduction of 23. Like 1024 width-23 to 1001.

Note: Firefox or opear does not display the right scroll bar when content is less than the browser height.

So if the resolution is 1024, your page should be set to 1000 safe.

If the 800 resolution is generally set to 770.

These need to understand and remember, otherwise it is likely to do not meet the requirements of the browser, but generally we are back to set a slightly smaller, should be for some browsers add plug-ins or other things width will change so 800 of the resolution generally set about 760, 1024 of the set of 990 or so.

I use guides and rulers to sort out the approximate range, note that my division, exactly 770, and 1000 of the place, should be for me to do the site is 1024 resolution, but given that there are still possible 800 resolution users, so I back to the main content and menu are placed within 770, 770-1000 places to put some auxiliary things, this habit especially in the design of some portals to consider the following, after all, improve the user experience is also the problem we have to consider.

2. Start work

We continue to explain, now we draw the contents of the upper menu section, actually very simple pull, is to draw a box, a circle, and then mix, plus the gradient on it, the following figure set

3. We're going to draw something that looks like a badge.

In fact, is also very simple, the idea is similar to the award of a certificate on the same mark, will make the site a little more vivid, hehe.

We select polygons, as shown in figure:

Set the following, continue to map, we should pay attention to the layer order, drag to the lower level is good

Well, to note that this layer we have fixed after the usual will not move, so to lock, or the mouse to sway it is easy to move the map, attention to the layer where a little bit more a small lock, convenient bar, this he will not disturb us completely!

Okay, let's move on, but everything else is the same.

Let's take a look at the details.

My favorite is firewroks super texture, in PS some texture to do their own really good trouble ah!

My favorite diagonal, uh.

Look at the gradient on the left side of the page, actually pull out a rectangle, and then add a linear gradient, and then add a diagonal texture, slightly adjust the transparency, it is so simple, the effect is very good, hehe

The next small place, is the product information background box, in fact, is also very simple

is a rectangle, then the outer frame is red, the rectangle plus an inner glow, light gray, so it becomes

The next place is the upper right corner. You can see a grid-like shading

is actually a rectangle, plus a mask, a gradient, OK, now look is not vivid a lot, hehe

OK, look at the picture.

On such a website's graphic design envelope is done, hey, how about fireworks convenient not!

OK, today is here, and then enjoy our work, it is good!