How To Create a Beautiful Web Hosting Layout Using Adobe Fireworks

Tue, 07/06/2010 - 22:04 — Isk

Today, in this Adobe Fireworks tutorial we will practice how to create a beautiful looking web hosting business layout. This is very detailed tutorial, so if you have a beginning level knowledge in Adobe Fireworks you can follow the simple techniques used in this tutorial you will have no problem creating a beautiful and professional layout in the future.

Final Preview

Here’s a preview image of what we’ll be creating together, Click the image for full preview.

Step 1 (Create a New Document)

Create new document 1280pixels x 1350pixels 72dpi Canvas color White

Step 2 (The Background)

Select Rectangle tool (Fireworks Shortcut Key U) to draw a rectangle vector for Background Color #EEEEEE

You should have something like this:

Step 3 (Draw a Layout Container)

Repeat (Step 2) to draw layout container but change size to 960px x 1082px Color #FFFFFF (White)

For center the layout container to open Window>>Align, make sure white rectangle selected per screen-shot.

Step 4 (Logo / Title)

Import your own logo file or create new logo for the site I will be using the Bebas font. Select the Text Tool (Fireworks Shortcut Key T) I will be using gradient color #0E0E0E #7D7E7D, weight: bold, size: 35px, I will be using word HostingBuzz.

Step 5 (Navigation Menu)

For the navigation menu select the Text Tool (Fireworks Shortcut Key T) font: Arial, Size: 11px, weight: Regular, kerning: 3, Horizontal Scale: 100%, Align: Left, Color: #333333. Edit existing: double click to editable mode.

Select the rectangle tool 60px x 30px, gradient Linear colors: #F9EEA4 #F1DA34, outline Stroke: 1px Soft, color: #EFD61F, to create a hover / selected effect for links.

Step 6 (Featured Testimonials)

Now we will be creating the featured client testimonials area in top of content. Draw the vector with Rectangle Tool: 920px x 259px, Color: #333333 Positions: X180 Y118.

Next, we will be using a photo from sxc.hu. You can download the photo and edit the size to 920px x 259px then import the photograph in the document file as per screen-shot.

You should have something like this:

Then adjust the Blend Mode: Overlay, Opacity: 100

Select the rectangle tool color: #F3DE4A, and draw a rectangle box under the featured testimonial area width 920px height 87px.

Now we will add fade effect on Yellow rectangle box. Then go to Commands>>Creative>>Fade Image and create a fade effect to right side.

Then add some text on the Yellow box in font: Arial, size: 20px, weight: bold. Type out words for your company or related.

Step 7 (Content Area – Left)

Now let’s create the hosting packages box in content left area. Select the as usual rectangle tool to draw a box width: 450px height : 445px, color: #ECF3FF, outline color: #D5E4FF.

Add text heading “Our Plan” in the box, select the Text Tool (T) font: Georgia, size: 25px and color: #666666.

Select the Rectangle Tool (T) to draw a rectangle box in width 410px height 50px, fill color: #FFFFFF and outline stroke color: #CEE0FF for Hosting Plans Heading.

Then select Text Tool (T) to add text heading in the box, font: Tahoma, size: 14px bold, and text color: #666666.

Below the heading box add some hosting plan text, font: Arial, size: 14px, color: #666666.

Then create the Sign-up button, select the rectangle tool 55px x 24px, fill gradient as Radial colors: #F9EEA4 #F1DA34, outline Stroke: 1px Soft, color: #EFD61F.

Don’t forget to group all your plan row to repat the process for next row, also you can add the alternate box for second row like screen-shot.

Step 8 (Content Area – Right)

On the right side we will be add some text with the bold heading to display Hosting Plan Features. Select the Text Tool (T) by adding bold heading “Features Included In All Plain” with font: Georgia, size: 25px, color: #666666. The rest of the text in this column will be Arial 15px, same heading color.

Then create a bullet for Unordered List for Plan Features, select the Ellipse Tool (U) to draw a 13px x 13 round, (Don’t forget to press and hold Shift key) to create width height exact ratio.

Fill gradient as Radial with colors: #A3CFF3 – #6FB4EC, outline stroke color: #2D92E3 1px soft.

Step 9 (The Bottom Area)

Draw a simple vector with Rectangle Tool for bottom separator: width: 960px height: 59px.

Fill gradient as Linear: #EDEDED #FFFFFF.

It’s time to add news heading and grab news entries from Blog. Select the Text Tool (T) to add heading, font: Georgia, size: 25px, color: #666666, Kerning: 3. The rest of the text in this column will be also Georgia 14px Italic, Kerning: 3 and Leading: 130%.

The bottom (right) blog news section. I will be using a news icon from the Function free icon set. Import the icon file from downloaded location in document file and paste the icon to the left of blog heading.

Now, jump on bottom left column, its time to create section for latest tweet updates, select the Rounded Rectangle to draw a box, 451px x 113px, fill gradient Radial: #F4F4F4 – #EFEFEF.

Then select Rounded Recangle with Subselection Tool (A), then select the Pen Tool (P) and add the three additional points to create text bubble effect.

After adding the points with Pen Tool again select the Subselection Tool (A), but this time pick the middle point from added points and drag a little upper side for create a text bubble effect.

Add the heading with latest tweet text and import the twitter icon from Function download icons location, select the Text Tool (T) to add heading, font: Georgia, size: 25px, color: #666666, Kerning: 3. The rest of the text in this column will be also Georgia 16px Italic, Kerning: 3 and Leading: 130%, color: #666666.