This infographic displays the progression of graphic design tools, on a timeline covering the last 27 years. Starting with MacPaint in 1984, passing by now obsolete applications such as Macromedia Freehand, xRes, and Adobe Pagemaker and ending up with some of the new kids on the block including Pixelmator, ArtRage and iDraw for the iPad.

It is a great, visual way to see how long some of these applications have been in development, especially in relation to their competitors and milestones on the timeline. You might even have a little shock when you realize which tool is the longest running on the timeline.

Click for full size

Resources are a designers best friend. They help you save time in your daily workflow and provide inspiration for projects, there are a huge plethora of resources on the web for designers, from pixel perfect Photoshop web elements to super cute icons and grungy high resolution textures and brushes.

Here at MediaLoot, there’s nothing we love more than a well made, super-useful design resource. Whether it’s for artists, graphic designers or the web, and we like to think that we provide our fair share of those resources for our lovely members too!

This roundup is designed to be a collection of some of the most popular resources and hidden gems that the web has to offer for designers, all organized in a way that makes it easy to find what exactly you’re looking for!

Love grunge brushes and textures? Ever wanted to make your own Photoshop brush, or just have something in your collection that’s unique to you? Then you’re in luck because it’s surprisingly easy, especially in Photoshop CS5 to build a collection of unique grunge brushes. Follow this tutorial to learn the techniques you need, and in no time you’ll be creating your own personal brushes.

Start off by opening your source image in Photoshop, this could either be a grunge texture you found online (just make sure you’re allowed to use it for your intended purpose first) or a photo you have taken yourself, it’s surprisingly easy to find grunge textures wherever you go, so if it’s something you’re interested in, don’t be afraid to take your camera out with you and snap some photos.

For this example I will share an image I got by doing exactly that, you can download the image here

Step 1: Sample an Area of Your Image

Using the Marque Tool (M) make a selection on the image, choose a part of the image which is sharp, has a lot of detail and you think would make a good grunge brush. Don’t worry too much about how well you cut it, just make sure you get all of the main areas you want in there, and over shoot it a bit so that you get a bit of excess to play with too.

Step 2: Dissect the Area From the Image

Copy the marquee selection (CTRL/CMD + C) and open a new document (CTRL/CMD + N), by default Photoshop should use the dimensions of the clipboard for the new document, these dimensions will do just fine so hit OK

Paste (CTRL/CMD + V) the selection into your new document.

Step 3: De-Saturate the Sample

In the Adjustments window (Window > Adjustments) select Hue/Saturation. Drag the Saturation slider down to -100.

Or if you are using an older version of Photoshop and the Adjustments window isn’t available simply press CTRL/CMD + SHIFT + U to de-saturate the image.

Step 4: Tweak the Levels

In the Adjustments window (Window > Adjustments) select Levels. Or if you are using an older version of Photoshop and the Adjustments window isn’t available simply press CTRL/CMD + L to get the standard Levels dialog.

Adjust the dark and light points on the histogram to about 45, 1.00, and 170. Or until the lightest areas of the image become pure white and the dark areas are more defined.

Step 5: Refine the Sample Area

Next, find any large solid areas that you know you definitely don’t want in the final brush and highlight them with the Marquee (M) or Magic Wand (W) tools. Hit delete/backspace to eliminate the highlighted areas.

Step 6: Dodge the Edges

Now we need to refine the edges of the brush as they will be far too jagged and sudden as they are, rather than using the Eraser as you might expect though, select the Dodge (O) tool, and choose Highlights for the range and set the exposure to 50%.

Work your way around the edges (highlighted in the screenshot below) with the Dodge tool, gently removing the lighter areas of the image (Highlights). Where as the Eraser tool would remove everything in it’s path, the Dodge tool will cleverly increase the brightness of light, mid-range or dark areas where you use it (in this case light).

The more you apply the Dodge tool on the same area, the more it will erase because the once mid-tones and even shadows will eventually become the new highlights in that area.

Apply the same Dodge technique all around the edges of the sample area.

Step 7: Even Out the Dark/Light Balance

Reduce the exposure of the Dodge tool and level out any areas that are too dark, or vise versa use the Burn tool to darken any areas that are too light. In this case I only used the Dodge tool a little in the middle of the sample area.

Step 8: Erase Non-Essential Areas

Our brush is almost ready now, we just need to delete any stray odds and ends which don’t add anything to the brush, use the Eraser (E) tool to simply remove these bits that you don’t want from the sample area. The bits you delete should be scattered around the edges usually, disconnected from the main brush area.

Step 9: Define as Brush Preset

The final step is to go to the Edit menu and Define as Brush Preset. It will ask you to give your brush a name, then hit OK and you’re done.

Conclusion

Here is an example of the brush in use, using 1 instance of the brush only, on an otherwise un-processed grunge texture from the Dark Grunge & Stone Textures set. I hope you enjoyed reading this tutorial and if you followed it to the end, then please, put the brush to better use than I just did!

Thanks for reading!

Despite sometimes feeling like the un-loved, adopted child to the Adobe Creative Suite family, Fireworks remains for a lot of professional web and user interface designers to be the most useful, productive tool in their arsenal, however due to the vast popularity of a certain other graphics application in the creative suite, it doesn’t gain anywhere near the recognition it deserves for what it does best.

It may be true that 99.5% of people think MediaLoot subscriptions are awesome, but there are still .5% who would rather buy things that don’t bill them every month. And we’re aiming for 100% satisfaction here =D

Introducing Yearly Credit Bundles
For the first time in history, you can now buy a bundle of credits instead of purchasing a subscription. Credit bundles start cheap—at $69 for 60 downloads ($1.15 per credit) we’re talking iStockPhoto prices before they went mainstream. You can get icon sets, UI kits, and even complete website designs for less than $1.15 each with no recurring charges. Try finding that anywhere else.

But just like iStockPhoto, these prices will go up as the plans become popular, so we recommend buying soon. Like right now.

Get a Yearly Credit Bundle Now →

I’m sure at some point we have all seen something, maybe a shot on Dribbble, or a photograph on a billboard, and thought “Wow, I want to do something like that”, but for whatever reason, a lot of the time, that gut instinct we have to teach ourselves a new creative skill is never acted upon.

For example, a designer might read a captivating novel, and all of a sudden become full of inspiration and have aspirations of writing something of their own that could be that awesome. Or maybe you have your have your own personal aspirations of creating something to sell and make your millions, but for some reason, it never works out, usually due to either not knowing where to start or feeling like you would never have the time, or that it is out of your league.

In this article, I will drawn on some of my own and other’s experiences with learning new skills, and hopefully help you feel a little more positive about broadening your own skill set. I’m sure I don’t need to convince anyone of why learning new skills is cool, but suffice to say, at the very least it’s something to add to your resume and give yourself a feeling a self accomplishment (which is always a good feeling to have).

1. Establish Existing Skills

If you already know what new skill you’d like to learn then that will give you a huge head start, but if you aren’t sure what you’d like to do yet then quite often, the best place to start is to do some brainstorming, and assess what it is you already do well, identify your current strengths.

So, for example if you are currently a graphic designer, you may have some of these skills under your belt:

• Typography
• Color theory
• Layout
• Design software
• Understanding of the print industry
• Communication skills
• Photography
• Attention to detail

If you can’t think of much for yourself, then consult your resumé, as that is where you probably place yourself in the most favorable light.

With a list of existing skills in mind, you can gain some perspective, and can then cross reference that list against other lists that share similar aspects. This will help you to gauge how steep the learning curve of certain skills might be for you.

2. Decide What to Learn

On paper or in your head, consider what are the things you’d really like to get into. I personally come from a very web-based design background, with a little early experience of graphic and product design. A few of the things I wanted to start doing when I got out of university other than my main area of web design, were icon design, HTML/CSS and user interface design.

My personal list of skills at the time would have included:

• Typography
• Layout
• Design software
• Web usability
• Attention to detail/pixels

Straight away, already knowing design software was an obvious advantage to icon and user interface design. Web usability was at least a little background knowledge for HTML/CSS, and attention to detail/pixels is ideal for icon design. So almost instantly, taking on these tasks seemed a lot less daunting, and instead of feeling like I’d need to learn something completely new from scratch, I felt like I had an advantage over a lot of people.

Usually, creative professionals find that the things they want to do, tie in to their main area of expertise somehow, or are complimentary to their main interest. Consider what you want to do and compare the “requirements” against the skills you already have.

3. Do It For Fun

The most important thing is to try to never lose sight of why you’ve decided to do what you’re doing. If possible, when you are executing your plan, you should see each step as an enjoyable task that you look forward to doing. It shouldn’t interfere with your work and family life, or stress you out.

If it’s more fun you’ll get better at it much quicker, and want to practice it more. I like to compare this theory to video games, because I think that nine times out of ten, the games that we are the best at are also the games that we enjoy playing the most. It’s simple really, the more you enjoy and play a game the more awesome at it you become. Not including games that are just generally easy.

The same theory can be applied to most things in life.

4. Achievable Goals

Managing stress is a difficult thing to do, but the main cause of stress is getting overwhelmed by your tasks. If you set impossible deadlines and expect too much, too quickly, you will be setting yourself up to fail. Focus on smaller tasks first, and take it one step at a time.

This is especially important because when you teach yourself, you are in control of your learning. For example, imagine if you enrolled on a course to learn architecture and your tutor gave you your first task, to design the Golden Gate Bridge, or Sydney Opera House from scratch? Okay, that analogy is a little exaggerated, but you get the idea, it would never happen, and if it did, you would be instantly overwhelmed, and probably drop out that day. Unless you’re an incredibly ambitious individual.

Of course, this doesn’t mean you shouldn’t have high aspirations, but if your end goal is to create something incredible, or become amongst the best in your field, then you need to set intermediate goals on the way. Remember the grander picture, but don’t just jump straight in, take small steps towards achieving your goal.

I have a friend who wanted to start developing software, but he had never touched a line of programming code in his life, he did have have a basic grasp of HTML & CSS but not much else that was transferable to software coding. And after countlessly reigniting his passion for becoming a developer, and subsequently giving up, he decided to take intermediate steps to his goal.

The problem was that he was always jumping head-first into the text editor each time, with a few online tutorials and just “giving it a shot”, so instead he began working on his HTML/CSS skills first, and started to integrate Javascript and PHP into his skillset, his “intermediate goal” was to create a web application first, which after many online tutorials, he actually managed, very successfully. It was basic stuff at first, but he loved every second of it, and progressively improved until he was capable of making complex, rich online applications.

He has recently started learning Objective-C programming language now, and is finding it much easier than he did previously, although PHP and Obj-C are very different languages, he understands the principles more, and appreciates that the learning curve is high and he needs to move up it gradually.

5. Do it now

Now is a good a time as any to start! There will always be reasons to put things off for a bit, but if you do take it easy, go step by step and enjoy it then there isn’t any reason why it should perceived as something that you’re too busy to do.

Try to see your decision to learn something new as an excellent chance to de-stress yourself, and take your mind off work at the end of the day, or whenever you get free time. Start by finding a relevant book or set of online tutorials and work your way through them, one stage at a time. I personally enjoy reading through tutorials as you always have something at the end to show for your time and effort.

Don’t be afraid to get practical either, if you’re reading a book or tutorial and think “Okay cool, I could do that” then go do it! prove it to yourself.

To Sum Up

Just take it easy, break it down into stages and start as soon a possible, with a bit of self determination and motivation you will find it a breeze and enjoyable to expand on your skill set. Don’t forget to reward yourself when you hit a goal and keep yourself motivated!

Your Thoughts?

Let us know if you have any tips for learning a new creative skill? or maybe you’re already currently trying to learn something new? or if you want to learn a new skill, but don’t know where to start and seem to always hit dead ends?

Thanks for reading, and we really hope that you feel inspired to do a bit of home-schooling!

Try something new for your social media links with these beautiful vector stamps, each one has been handcrafted to represent 24 of the most popular social networks out there at the moment.

.

Last week on MediaLoot we posted a tutorial on designing a clean homepage template using Adobe Fireworks, the result was a sleek web page concept that we’re now going to imagine that we have shown to our client, and they have just given us the go ahead to start coding it up into HTML and CSS!

Premium Members Get Source Files

Premium members can download the source files for this tutorial here.

Alright, without any further ado, let’s get started on this thing! To refresh your memory here is the design we created last week.

When it comes to coding up designs, there is a lot of personal preference, everybody has their own way of doing things, some people like to jump right in and juggle writing HTML, CSS and exporting images from the layout as needed all at the same time (this is a surprisingly common method actually), but some people break it down into stages, for example: export images, write HTML and then style with CSS, but personally I don’t think that we always know which images we will need to extract from the design until we have broken down the layout into a HTML structure. so my preferred workflow goes something like:

• Plan structure and write HTML code
• Export images from the layout
• Style the HTML with CSS

So, with that in mind, let’s begin by writing our HTML.

Preparation

Start by creating a new folder and index.html and styles.css files. Then also create a new folder called images.

Doctype and Structure

Open up the index.html file in a text editor, my preferred editor for code is MacRabbit Espresso (Mac only), for Windows try Notepad++ or Dreamweaver if needs be.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Dreamweb</title>
		<link rel="stylesheet" href="styles.css" type="text/css">
		<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
		<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
	</body>
</html>

Begin by inserting the basic HTML skeleton, we are using HTML5 for this project so the DOCTYPE declaration is a very simple one, just “html”. You will also notice that we have set the title of the page, included our stylesheet (styles.css), included the google web font that we used in the design last week (Pacifico) and also included the html5shiv javascript snippet that will allow older browsers such as IE to understand HTML5.

Header

<header>
	<div class="wrapper">
		<h1 class="logo"><a href="index.html">Dreamweb</a></h1>
		<ul>
			<li class="active"><a href="index.html">Home</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">Blog</a></li>
		</ul>
	</div><!--.wrapper-->
</header>

Define the header tag, and then place a wrapper inside inside it so that the header can be 100% wide, but the content will be wrapped to a set width (960px), add the logo as a H1 and create an unordered list (UL) for the main menu.

Main Feature

<section class="home_feature">
	<div class="wrapper">
		<article class="main_display">
			<img src="images/display_image_1.jpg" alt="Client Work" title="Client Work" />
			<div class="display_gloss"></div>
			<article class="banner_new"><p>New</p></article>
		</article>
		<article class="feature_text">
			<h2>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</h2>
			<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere maecenas faucibus mollis interdum. Velit aliquet. Maecenas faucibus mollis posuere velit aliquet interdum.</p>
			<a href="#">Click me to find out more</a>
		</article>
	</div><!--.wrapper-->
</section>

Use the same wrapper technique from the header for the main feature, we are using a <section> to contain the two <article>s in this part of layout. The feature text is quite straight forward, we have an H2, some paragraph text and a link. The main_display article will be our computer screen, and then we are layering on top of that:

• the image that will be on the screen
• followed by the gloss from the screen
• and finally the banner in the corner than reads “NEW”.

Featured Services

<ul class="featured_services">
	<li class="service_1">
		<Web Design&rt;
		<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere maecenas faucibus mollis interdum.</p>
		<a href="#" class="button_1">Find Out More</a>
	</li>
	<li class="service_2">
		<Development&rt;
		<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere maecenas faucibus mollis interdum.</p>
		<a href="#" class="button_1">Find Out More</a>
	</li>
	<li class="service_3">
		<Optimization&rt;
		<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere maecenas faucibus mollis interdum.</p>
		<a href="#" class="button_1">Find Out More</a>
	</li>
</ul>

The featured services section of the layout is a very basic unordered list, we have put a different class on each list item so that it can be targeted and styled appropriately. This section doesn’t need the wrapper div because there is no defined background, we can just set the <ul&rt; to 960px wide in the CSS.

About Us and Testimonials

<div class="wrapper">
			<article class="about_us_blurb">
				<About Us&rt;
				<img src="images/about_us.png" />
				<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Penatibus et magnis dis parturient montes, nascetur ridiculu.</p>
				<p>Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</article>
				
			<article class="testimonials">
				<Testimonials&rt;
				<div class="testimonial_wrapper">
					<p class="testimonial_quote">
						Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. </p>
					<p class="testimonial_name">John Doe, Company</p>
				</div>		
			</article>
		</div><!--.wrapper-->

Here we have created 2 articles for the about us blurb and testimonials, for the testimonials we have a wrapper containing both the quote and name.

Footer

	<footer>
		<div class="wrapper">
	
<!--Twitter Widget-->

			<div class="column">
				<article class="widget_twitter">
					<h4>Twitter Updates</h4>
					<ul>
						<li><strong>@MediaLoot</strong> Curabitur blandit tempus porttitor estibulum venenatis ultricies.</li>
						<li><strong>@MediaLoot</strong> Curabitur blandit tempus porttitor estibulum venenatis ultricies.</li>
						<li><strong>@MediaLoot</strong> Curabitur blandit tempus porttitor estibulum venenatis ultricies.</li>
					</ul>
					<a href="#" class="button_1">Read More</a>
				</article>
			</div>
			
<!--Newsletter Widget-->

			<div class="column">
				<article class="widget_newsletter">
					<h4>Newsletter</h4>
					<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat.</p>
					<form>
						<input type="text" value="Email Address">
						<input type="submit" value="Sign Up">
					</form>
				</article>
				
<!--Social Widget-->
				
				<article class="widget_social">
					<h4>Social</h4>
					<ul>
						<li class="facebook"><a href="#">FaceBook</a></li>
						<li class="twitter"><a href="#">Twitter</a></li>
						<li class="tumblr"><a href="#">Tumblr</a></li>
						<li class="behance"><a href="#">Behance</a></li>
						<li class="linkedin"><a href="#">Linked In</a></li>
					</ul>
				</article>
			</div>
			
<!--Feedback Widget-->
			
			<div class="column">
				<article class="widget_feedback">
					<h4>Feedback</h4>
					<form>
						<input type="text" value="Full Name" name="name">
						<input type="text" value="Email Address" name="email">
						<textarea name="message">Your message</textarea>
						<input type="submit" value="Send Message" class="button_1">
					</form>
				</article>
			</div>
		
<!--Copyright Notice-->

			<p class="copyright_notice">Copyright 2011 © <strong>Brand Name</strong>. All Rights Reserved.</p>
			<div class="logo"><p>Dreamweb</p></div>
			
		</div><!--.wrapper-->
	</footer><!--End Footer-->

This is quite a big one, but the actual code itself is very straight forward, each widget in the footer area has a class that begins ‘widget_’ and we have 3 <div>s with a ‘column’ class, the newsletter and social widgets are contained within the same column (as they were in the design).

Images

Let’s prepare the images we need, in total we need 17 images.

Open up the original Fireworks design file if you haven’t already and we can begin extracting the images we need. The basic method for extracting images is to select the object/s that you need, copy them and then create a new document using the clipboard dimensions (the same size as whatever you copied) and paste the objects into the new document.

1. logo.png

So open up the original Fireworks document if you haven’t already and select the Logo symbol. hit CTRL+C to copy it, CTRL+N to create a new document, and CTRL+V to paste the logo again. Set the background of the document to transparent and in the Optimize window select PNG32 as the exporting option. Go to File > Export and select Images Only and Current Page. Choose the images folder we created as the export destination.

2. hatch_pattern.png

Zoom in as far as possible on the design and use the Crop tool in Fireworks to select a 3x3px area of the pattern (as shown in the image below). Export using the same methods as used previously.

3. feature_display.png

Again follow the same method, for the display you will need to select all of the objects that make up the display excluding the banner and gloss layers.

4. display_image_1.jpg

You may need to crop the display image down if you used a clipping mask as Fireworks will use the original image’s dimensions rather than the just the clipped area that we need.

5. display_gloss.png

In the design this was set to 50% Soft Light, no web browsers support blending modes like Soft Light though to this date so it will treat it as Normal, this means we need to compensate and lower the Opacity to 20%.

6. btn_main_feature.png

Copy the button from the original design and paste it into a new document, now make the canvas 3x taller than the button, and duplicate the button one below the other so that they each occupy exactly 1/3 of the image. This is out sprite for the main button, including hover and pressed states, so the second one down is the hover state and the bottom one is pressed state.

On the hover state, nudge the top layer down 3px. On the pressed state, nudge the top layer down 1px and make the gradient slightly darker to appear pressed in.

7. service_1.png

Copy and paste the icon for your first service into a new 32x32px document.

8. service_2.png

Copy and paste the icon for your second service into a new 32x32px document.

9. service_3.png

Copy and paste the icon for yourthird service into a new 32x32px document.

10. hr_shadow.png

Same method as previously used, be sure to set the background to transparent.

11. about_us.png

Again, same method used, but we have also copied the shadow and border for this image as not all browser support advanced shadows like we created in the design.

12. social_facebook.png

13. social_facebook.png

14. social_twitter.png

15. social_tumblr.png

16. social_behance.png

17. social_linkedin.png

The CSS

First things first, open up style.css and let’s use a basic CSS reset so that all browsers, new and old are working on the same playing field.

/* CSS Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
ul{ list-style:none; list-style-position:outside;}
a {  outline: none;}

/* Tell old browsers how to handle HTML5 elements */
header, footer, aside, nav, article {display: block;}

Now we will do the essential styles, these are the body, headings, paragraph, link and wrapper styles. These tend to stay the same for most web projects and are usually the first things defined in a stylesheet.

/* Essentials */

body {
	background: #F9FCFC;
	color: #666666;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
}

p {
	line-height: 150%;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Pacifico, "Helveitca Neue", Helvetica, Arial, sans-serif;
	font-weight: lighter; /*counteract strong browser anti-aliasing*/
}

a:link, a:visited {
	color: #168FAD;
	text-decoration: none;
}

.wrapper {
	width: 960px;
	margin: 0 auto;
}

For the header we only really need to set the height and background, thanks to CSS3 we no longer need to use images for gradient backgrounds, we can just set the start and end points and type of gradient, even IE6 supports basic gradients with filters.

/* Header */
header {
	height: 110px;
}

header {
	/* Fallback Color */
	background: #F4F8F9;
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#FFFFFF, #E9F2F3);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E9F2F3));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#FFFFFF, #E9F2F3); 
	/* IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E9F2F3');
}

Here we are targeting the <a> link inside the <h1> with a class of ‘logo’. Note that as well as bringing in the logo.png file, we are hiding the text from visibility by setting the text-indent to -5000px. The reason for adding text and then hiding it is two-fold, it helps with your Search Engine Optimization and also boosts accessibility.

/* Logo */

h1.logo a {
	display: block;
	width: 221px;
	height: 65px;
	background: url('images/logo.png') no-repeat;
	float: left;
	margin: 20px 0 0 10px;
	text-indent: -5000px;
}

Time to style the main navigation, we use some new CSS3 properties in this section including border-radius and box-shadow, these are both pretty much safe to use now for non-essential visual elements, in modern browsers, the vendor prefixes (i.e.. -moz-) allow you target particular browsers, -moz- for Mozzila (Firefox), -webkit- for WebKit (Safari and Chrome), but when the HTML5 and CSS3 specs are complete, vendor prefixes will not be required anymore, so for good measure include the non-prefixed version too, and put it at the end of the list so that it is applied last.

/* Main Navigation */

header ul {
	float: right;
	margin: 35px 0;
}

header li {
	float: left;
	display: inline-block;
	width: 90px;
	height: 36px;
	margin: 0 10px 0 0;
}

header li a {
	color: #2C6069;
	display: block;
	width: 90px;
	height: 36px;
	text-align: center;
	font-weight: bold;
	line-height: 36px;
	border: 1px solid #CDE0E4;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	-moz-box-shadow: 0 1px 0 #FFFFFF; -webkit-box-shadow: 0 1px 0 #FFFFFF; box-shadow: 0 1px 0 #FFFFFF;
}

header li a {
	/* Fallback Color */
	background: #E8F4F6;
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#FFFFFF, #DFF0F3);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#DFF0F3));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#FFFFFF, #DFF0F3); 
	/* IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DFF0F3');
}

header li a:hover {
	/* Fallback Color */
	background: #FFFFFF;
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#FFFFFF, #E8F4F6);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E8F4F6));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#FFFFFF, #E8F4F6); 
	/* IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E8F4F6');
}

header li.active a {
	color: #5E8D94;
	-moz-box-shadow: inset 0 2px 3px #436E7D; -webkit-box-shadow:inset 0 2px 3px #436E7D; box-shadow: inset 0 2px 3px #436E7D;
}

header li.active a {
	/* Fallback Color */
	background: #DFF0F3;
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#DFF0F3, #FFFFFF);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DFF0F3), to(#FFFFFF));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#DFF0F3, #FFFFFF); 
	/* IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DFF0F3', endColorstr='#FFFFFF');
}

Here is the style used for the main feature, we layer up the computer screen, image on the screen, gloss from the screen and banner separately using ‘position: relative’ and ‘position:absolute’ properties.

/* Main Feature */

section.home_feature {
	height: 480px;
	background: #CDE0E4 url('images/hatch_pattern.png') repeat;
	-moz-box-shadow: inset 0 5px 9px #66888E; -webkit-box-shadow: inset 0 5px 9px #66888E; box-shadow: inset 0 5px 9px #66888E;
}

article.main_display {
	display: block;
	float: left;
	position: relative;
	width: 450px;
	height: 397px;
	margin: 70px 0;
	background: url('images/feature_display.png') no-repeat;
}

article.main_display img {
	position: absolute;
	top: 23px;
	left: 19px;
}

article.banner_new {
	position: absolute;
	left: -6px;
	top: -6px;
	background: url('images/feature_banner.png') no-repeat;
	width: 103px;
	height: 103px;
}

article.banner_new p {
	text-indent: -5000px;
}

article.main_display .display_gloss {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 269px;
	height: 283px;
	background: url('images/display_gloss.png') no-repeat;
}

article.feature_text {
	float: right;
	width: 450px;
	margin: 60px 10px 0 0;
}

article.feature_text h2 {
	font-size: 44px;
	color: #2C5F66;
	line-height: 120%;
	margin: 0 0 20px 0;
	text-shadow: 0 1px 0 #F1F7F8;
}

article.feature_text p {
	color: #5E8C92;
	text-shadow: 0 1px 0 #F1F7F8;
}

article.feature_text a {
	display: block;
	width: 310px;
	height: 62px;
	color: #FFFFFF;
	background: url('images/btn_main_feature.png') no-repeat;
	margin: 20px 0 0 0;
	text-align: center;
	line-height: 54px;
	font-family: Pacifico, "Helveitca Neue", Helvetica, Arial, sans-serif;
	font-weight: lighter; /*counteract strong browser anti-aliasing*/
	font-size: 22px;
	text-shadow: 0 -1px 0 #38474A;
}

article.feature_text a:hover {
	background-position: 0 -63px;
	line-height: 57px;
}

article.feature_text a:active {
	color: #EFEFEF;
	background-position: 0 -126px;
	line-height: 58px;
}

The featured services features the first instance of our generic button class ‘button_1’ that we will use multiple times though out the rest of the design.

/* Featured Services */

ul.featured_services {
	clear: both;
	height: 240px;
	width: 960px;
	margin: 0 auto;
	background: url('images/hr_shadow.png') no-repeat bottom;
}

ul.featured_services li {
	width: 300px;
	margin: 0 10px;
	float: left;
}

ul.featured_services h3 {
	font-size: 25px;
	color: #168FAD;
	text-indent: 40px;
}

ul.featured_services li.service_1 h3 {
	background: url('images/icn_service_1.png') no-repeat; background-position: 0 10px;
}

ul.featured_services li.service_2 h3 {
	background: url('images/icn_service_2.png') no-repeat; background-position: 0 10px;
}

ul.featured_services li.service_3 h3{
	background: url('images/icn_service_3.png') no-repeat; background-position: 0 10px;
}

ul.featured_services p {
	border-left: 3px solid #CDE0E4;
	margin: 10px 0 10px 15px;
	padding: 0 0 0 25px;
}

.button_1 {
	display: block;
	width: 133px;
	height: 28px;
	-moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
	text-align: center;
	line-height: 28px;
	border: 1px solid #ADC0C4;
	color: #5E8C92;
	font-weight: bold;
	font-size: 12px;
	cursor: pointer;
}

.button_1 {
	/* Fallback Color */
	background: #DFF0F3;
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#FFFFFF, #EFEFEF);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EFEFEF));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#FFFFFF, #EFEFEF); 
	/* IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EFEFEF');
}

.button_1:hover {
	background: #FFFFFF;
}

.button_1:active {
	background: #EFEFEF;
}

Styles for the About Us blurb

/* About Us Blurb */

article.about_us_blurb {
	clear: both;
	float: left;
	width: 620px;
	margin: 20px 10px;
}

article.about_us_blurb img {
	float: left;
	margin: 0 10px 0 0;
}

article.about_us_blurb h3 {
	font-size: 25px;
	color: #168FAD;
	margin: 10px 0;
}

article.about_us_blurb p {
	margin: 5px 20px 30px 10px;
}

article.testimonials {
	float: right;
	width: 300px;
	margin: 20px 10px;
}

Styles for the testimonials

/* Testimonials */

.testimonial_wrapper {
	background: #E7F4F6;
	border: 1px solid #CDE0E4;
	width: 298px;
	height: 150px;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}

article.testimonials h3 {
	font-size: 25px;
	color: #168FAD;
	margin: 10px 0;
}

p.testimonial_quote {
	text-align: center;
	background: #FFFFFF;
	color: #5E8C92;
	font-style: italic;
	height: 55px;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	padding: 30px 20px;
}

p.testimonial_name {
	line-height: 36px;
	font-weight: bold;
	text-align: center;
	color: #5E8C92;
}

The footer and it’s widgets

/* Footer */

footer {
	clear: both;
	height: 400px;
	background: #CDE0E4 url('images/hatch_pattern.png') repeat;
	color: #5E8C92;
}

footer h4 {
	font-size: 25px;
	color: #2C5F66;
	margin: 0 0 10px 0;
	clear: both;
}

footer .column {
	float: left;
	display: inline_block;
	width: 300px;
	margin: 20px 10px;
}

/* Widgets */

article.widget_twitter li {
	margin: 20px 0;
}

article.widget_social li {
	float: left;
	display: inline_block;
}

footer input[type=text], footer textarea {
	width: 200px;
	height: 20px;
	border: none;
	color: #FFFFFF;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	padding: 5px 10px;
	margin: 10px 0;
	text-shadow: 0 1px 0 #0F2326;
}

footer input[type=text]:focus, footer textarea:focus {
	outline: none;
}

footer textarea {
	height: 53px;
}

footer input[type=text], footer textarea {
	/* Fallback Color */
	background: #46737B;
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#2C5F67, #5C858C);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2C5F67), to(#5C858C));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#2C5F67, #5C858C); 
	/* IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2C5F67', endColorstr='#5C858C');
}

article.widget_newsletter input[type=text] {
	width: 130px;
	-moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;
	float: left;
}

article.widget_newsletter input[type=submit] {
	margin: 10px 0 0 0;
	float: left;
	display: block;
	border: 1px solid #4E7A81;
	width: 70px;
	height: 30px;
	-moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;
	text-align: center;
	line-height: 28px;
	border: 1px solid #ADC0C4;
	color: #5E8C92;
	font-weight: bold;
	font-size: 12px;
	cursor: pointer;
}

article.widget_newsletter input[type=submit] {
	/* Fallback Color */
	background: #DFF0F3;
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#FFFFFF, #EFEFEF);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EFEFEF));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#FFFFFF, #EFEFEF); 
	/* IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EFEFEF');
}

article.widget_newsletter input[type=submit]:hover {
	background: #FFFFFF;
}

article.widget_newsletter input[type=submit]:active {
	background: #EFEFEF;
}

For the social links we use one master style for the dimensions and position etc. plus an individual style for each icon setting a different background image.

/* Social Links */

article.widget_social ul li a {
	display: block;
	width: 32px;
	height: 32px;
	text-indent: -5000px;
	margin: 0 10px 0 0 ;
}

article.widget_social ul li.facebook a {
	background: url('images/social_facebook.png') no-repeat;
}

article.widget_social ul li.twitter a {
	background: url('images/social_twitter.png') no-repeat;
}

article.widget_social ul li.tumblr a {
	background: url('images/social_tumblr.png') no-repeat;
}

article.widget_social ul li.behance a {
	background: url('images/social_behance.png') no-repeat;
}

article.widget_social ul li.linkedin a {
	background: url('images/social_linkedin.png') no-repeat;
}

footer .button_1 {
	color: #5E8C92;
}

And finally, the style for the very bottom section of the footer. The logo style is almost identical to the logo used in the header.

/* Copyright/Logo */

footer p.copyright_notice {
	clear: both;
	padding: 20px 0 0 0;
}

footer .logo {
	float: right;
	width: 221px;
	height: 65px;
	background: url('images/logo.png') no-repeat;
	margin: -40px 10px 0 0;
	text-indent: -5000px;
}

Conclusion

And there you have it! we have successfully designed and coded a full homepage template. As always, I hope you have enjoyed reading these tutorials and perhaps gained a different perspective or even learned some new techniques. Thanks for reading!

And don’t forget that Premium members can download the source files from this tutorial.

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:

• WAPP Web App Icons 1
• WAPP Web App Icons 2
• Sleek Vector Displays

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.

Click for a full size preview.

The Document

Start by launching Fireworks and creating a new document.

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).

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.

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

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).

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

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

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).

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

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

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.

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).

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

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.

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

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.

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)

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

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.

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

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

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

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

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).

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

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

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.

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.

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

Featured Services

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

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

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

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).

Draw a Rounded Rectangle.

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

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

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).

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.

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.

After doing that your document should look like this..

About & Testimonials

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

Draw a rectangle below the header.

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.

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.

Place some paragraph text next to the image.

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

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

Draw a Rounded Rectangle.

And another Rounded Rectangle above it slightly shorter.

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

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

You should end up with a speech bubble type shape.

Place some testimonial text into the speech bubble shape.

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

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

The Footer

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

And add another header for ‘Twitter Updates’.

Place some example tweets into the area.

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

Put some ‘Read More’ text on the button.

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.

Draw a Rounded Rectangle for the text input field.

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

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.

Add some ‘Sign Up’ text

Duplicate the header text and update it to ‘Social’

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.

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

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.

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

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

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

Conclusion

Congratulations, you have just designed a whole home page concept 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.

In this tutorial we will use Adobe Fireworks to create a sharp, pixel perfect login box, using basic Fireworks techniques that can be applied to most User Interface (UI) elements for the web or in desktop and mobile apps.

Final Result

Let’s begin by having a look at the final product we will be creating in this tutorial.

Step 1

The first step is to set up the document. Start by launching Fireworks and opening a new document (ctrl/cmd+n). Set the width of the document to 500px and the height to 350px.

Step 2

Grab the Rectangle Tool and draw a new rectangle that fills the whole document, this will be our background layer, you can align it to the edges of the canvas, or for ease just make it a few pixels larger.

Set the color of this rectangle to #C3D6D5.

Next go to the Live Filters section of the Properties window and click the New Filter button, select Noise > Add Noise.. And set the Amount to 2.

Step 3

Select the Rounded Rectangle tool and draw a new rectangle in the center of the canvas, use the Auto Shape Properties window to set the dimensions of the shape to W: 320 H: 210. Set the radius of all corners to 10px.

Tip: Avoid using the Properties window on auto shapes like the rounded rectangle as it can distort the shape and leave you with disproportionate corners, always use Auto Shape Properties.

Step 4

Apply a gradient fill to the new rounded rectangle we have just drawn.

• Set the fill of the rectangle to Gradient >Linear.
• Set the first color stop to #99C6C6
• Set the second color stop to #7DA6A6
• Drag the second stop towards the left (at about the 20% position)

Step 4

This step is a big one, involving lot’s of live filters to give our shape some depth,

Start with the Add Noise live filter, Amount: 2.

Apply an Inner Shadow filter:

• distance: 1
• color: #ffffff
• opacity: 29%
• softness: 0
• angle: 270

Then we will apply a Photoshop Live Effects for the stroke, select the Stroke and set the Size to 1, and Fill Color to #617373.

Tip: Using Photoshop Live Effects to apply a stroke let’s you control the order in which the outline of an object is applied in relation to other effects (unlike the native stroke function), in this example we want to apply the stroke after the inner glow, not before.

Photoshop Live Filters are only available if you have Adobe Photoshop installed on your system, but if you don’t have them, then just use the standard Fireworks stroke and omit the inner shadow.

Finally, add another Drop Shadow filter:

• Distance: 3
• Color: #000000
• Opacity: 35%
• Softness: 8
• Angle: 270

We’ll be using a similar set of effects to this later for the button so click the Add New button (just the right of the filters section) to save this style to the Document Library. Make sure Fill and Stroke styles are selected and Effect.

Step 5

Draw another rounded rectangle and in the auto shape properties window unlink the corner radius values using the padlock icon and set the top row of values to 0 and the bottom row to 7.

In the Properties window, locate the Texture field below the fill options, click on drop down menu and select Hatch 2 from the list of preset textures, set the opacity to 5% and select the Transparent option.

Step 6

Time to add some more effects, go the filters section of the properties window and apply the following effects:

Inner Shadow:

• Distance: 1
• Color: #ffffff
• Opacity: 29%
• Softness: 0
• Angle: 270

Photoshop Live Effects:

• Effect: Stroke
• Color: #617373
• Size: 1

Inner Shadow:

• Distance: 3
• Color: #93AEAE
• Opacity: 36%
• Softness: 6
• Angle: 270

Drop Shadow:

• Distance: 1
• Color: #ffffff
• Opacity: 50%
• Softness: 0
• Angle: 270

Drop Shadow:

• Distance: 1
• Color: #ffffff
• Opacity: 25%
• Softness: 0
• Angle: 90

You should end up with something like this:

Step 7

Use the Text Tool (T) and create a new text area above the existing layers, type “Login to Your Account” and apply these text values in the properties window:

• Font: Arial (or Helvetica)
• Style: Bold
• Size: 14
• Color: #ffffff
• Align: center

And apply a drop shadow filter:

• Distance: 1
• Color: #000000
• Opacity: 35%
• Softness: 0
• Angle: 270

Align your text as shown in the image above.

Step 8

Draw a new rounded rectangle and set the values to W: 270 H:35 and Corner Radius: 7. Place it as shown in the image below and apply an inner shadow filter:

• Distance: 2
• Color: #000000
• Opacity: 50%
• Softness: 4
• Angle: 270

Use the Pointer Tool (V, 0) and click and drag the rounded rectangle, holding down the Alt key will make a copy of the original shape.

Place the duplicated rounded rectangle below the first one as shown below.

Step 9

Create a new text field above the top rectangle, and type in “Email Address”, then apply these values in the properties window:

• Font: Arial (or Helvetica)
• Style: Regular
• Size: 14
• Color: #666666
• Align: Left

Duplicate the layer and nudge it down to the field below, for the password field copy this bullet point character to your clipboard (  •  ) and paste it 8 times into the text field.

Step 10

Duplicate one of the text layers and nudge it down towards the bottom left hand side of the window, reduce the font size down to 12 and enter “Remember Me?”.

Step 11

Draw a small rounded rectangle, the values in the Auto Shape Properties window should be:

• W: 12
• H: 12
• Corner Radius: 2

This is our checkbox, place it just to the left of the ‘Remember Me’ text.

Now draw two rectangles making a backwards ‘L’ shape. The tall shape should be W: 3px by H: 11px. The bottom shape should be W: 6px by H: 3px.

Select both shapes (Shift+click) and use the Scale Tool (Q) to rotate the two shapes 45 degrees clockwise.

This shape forms our tick icon for the check box. And your document should be looking something like the image below now.

Step 12

Draw another rounded rectangle for the button, set the auto shape properties to W:100 H:30, Corner Radius: 17.5.

Step 13

Open up the Style window (Window > Styles) and click on the style we created earlier, this will apply the gradient fill and all the effects that we put on the first shape we created.

These effects aren’t quite right for a button though, the gradient for a start could do with being more evenly spread not focused at the top. So in the gradient fill options drag the second stop all the way over to the right.

That shadow is a bit too much for a button too, so we can disable that altogether by clicking on the tick icon in the filters list.

To save a variation of the style just click the Add New button again, enter a new name, and hit OK.

Step 14

For the text on the button we can use the same text that is used on the window title, so Alt+drag the ‘Login to Your Account’ text down to the button and place it on top.

Change the text to say “Login”

Conclusion

And that’s it, you’ve just used Fireworks to create a pixel perfect, pretty little login box, the techniques covered in this tutorial were carefully picked to be applicable to almost all UI elements, so you shouldn’t have any problem creating a wide range of buttons, sliders, scrollers and form elements in the same style.

Thanks for reading!

End Result