Last week, you were asked to vote on what you thought was the best web design tool. Close to 280 of you shared your opinion on what the best web design tool is.

In this article, you’ll find the five web design tools that garnered the most votes.

5. Fireworks

Adobe Fireworks is a commercial raster and vector graphics editor hybrid from Adobe that’s available for the Mac and Windows operating systems. Designed specifically for web designers (unlike Photoshop), Fireworks brings you a plethora of tools and options that make full web layout prototyping a breeze.

Among its notable features are: “slices” for slicing and dicing a design mockup into HTML/CSS for rapidly creating prototypes (though you should avoid using auto-generated source code for the end-build), the ability to package an entire site design as a PDF with clickable components for interactive and impressive site prototypes, and optimization tools for making your web graphics as lightweight as possible.

4. Dreamweaver

Adobe Dreamweaver is a commercial application for web development that’s available for the Mac and Windows operating systems. Its featured-packed suite of tools and options include: syntax highlighting and very smart Code Hinting, a built-in FTP client, project management and workflow options that make team work effortless, and Live View – which shows you a preview of your source code. Dreamweaver tightly integrates with other popular Adobe products such as Photoshop, allowing you to share Smart Objects for quick and easy updating and editing of graphics components.

3. Panic Coda

Panic Coda is a shareware web development application for the Mac OS X operating system. It seeks to reduce the amount of applications (such as an FTP client, CSS editor, a version control system, etc.) you need to develop websites and to improve your team’s workflow. Coda’s one-window web development philosophy uses a tabbed interface for text editing, file transfers, SVN, CSS, and even “Books” which embeds web books that are searchable (it comes with The Web Programmer’s Desk Reference but you can add your own).

It’s simple and intuitive interface allowed Coda to garner the Apple Design Awards Best Mac OS X User Experience in 2007.

2. Photoshop

Adobe Photoshop is a very popular commercial graphics editor available for the Mac and Windows operating system. Created for professional photographers and designers, it is the ideal application for manipulating images and creating web graphics. Photoshop has all the necessary tools and options you need such as: Filters – which automatically adds effects to your image or a selected section of your image, extensibility and automation with Brushes, Actions and Scripting, and workflow enhancement features like Layer Comps and the Revert option.

1. Firebug

Firebug is a free, open source in-browser web development tool for the Firefox web browser. It’s many features include: on-the-fly HTML and CSS editing for tweaking or debugging, a Console for logging, analyzing and debugging JavaScript, and an intuitive Document Object Model (DOM) inspection tool to help you quickly see how the elements of a web page relates to one another.

Firebug’s popularity is so immense it’s one of the few Firefox extensions that have its own extensions (like YSlow and FirePHP)!

Although an experienced Web Design Company or a professional designer can build a website purely by hand coding HTML in a standard text editing software, using a professional web design tool or software is highly recommended.

Some of the features that make Dreamweaver the leading web design software are discussed below:

Graphical Interface for designing websites

Like other popular Web design software, Dreamweaver provides an easy to use Graphical user interface to help build different pages of a website. With Dreamweaver, a web designer can design a website by dragging and dropping objects as opposed to having to code it from scratch. Dreamweaver offers a WISYWIG method for web design. WYSIWIG refers to ‘What you see is what you get’. It is a common terminology in software design used commonly to describe software in which content displayed during editing appears almost identical to the final output. This makes the web design process easier and more efficient as you are able to view the end result while editing the web-page.

Can be used by Web Designers as well as non-technical users

Dreamweaver has many built in features that make it relatively easy to design a professional corporate or personal website. It is popular with both, professional web designers as well as non technical users with limited web design and development experience. It makes it possible to design a website without having to code any part of it. This has also made Dreamweaver popular among non technical users. Although use of advanced features will require some web design skills and experience, basic features can be utilised simply with the help of self-thought tutorials easily available with the software and available on the internet.

Design as well as Code view

The latest version of the software, Dreamweaver CS series has been regularly voted as the best web design tool for coding and design professionals. One of the main reasons behind Dreamweaver’s original rise to popularity as a professional web page designing tool, was its introduction of the split view workspace showing both editable layout as well as code view on top of the other. This allowed experienced web designers and developers to be able to edit the code directly in code view while being able to see the design in real-time in the design view.

Database Capabilities

Gone are the days when experienced web developers preferred to build websites purely by coding it by hand. Innovative web design software such as Dreamweaver is equally effective for designing static HTML websites as well for designing dynamic database driven websites. Dreamweaver works equally well for designing database driven websites.

Support for CSS, JavaScript and XML

Advance support for handling JavaScript, Ajax and Xml is another reason behind the success of recent versions of Dreamweaver. Ajax is a popular new technology that is used widely in development of modern websites. It combines JavaScript, CSS and XML to update website content without requiring a new page or reloading of the page. The new Dreamweaver CS series includes built in support for handling new web design approaches including Ajax. This has proved for experienced web developers and designers who are able to utilise the latest technologies in designing websites.

Dreamweaver includes professional support for handling CSS Styles. The built-in CSS Panel makes it easy for a web designer to create and edit style sheets.

Group Working

Dreamweaver also offers Group working capabilities. This can prove particularly useful for a Web Design Company or a Team of web designers. It allows a designer to ‘Lock’ a page to prevent other team members from overwriting or editing the same part of the web page. The notes feature of Dreamweaver on the other hand allows web designers to keep a note of their changes.

Built in FTP

Dreamweaver has built-in FTP software that allows web designers to manage the completed files on server with ease. Traditionally a Web Design Company or a web developer would use different software tools for designing a website and for updating files on the server. Dreamweaver makes this easier by combining FTP capabilities into its design software.

Summary

Dreamweaver is one of the most popular Web authoring tools used by Web Design Companies and Web Developers. A Web Design Company can not only save time by designing a website faster but also produce better quality of designs. It can allow a Web Design Company to keep better control over projects thereby allowing them to work on multiple web design projects simultaneously. Dreamweaver can also prove useful for businesses that wish to manage their web design and development in-house within their own company. It can be beneficial for both; experienced developers as well as non technical users who wish to design websites themselves.

Web design is one of those areas that, when done right, you just know it. The finished site looks refined and well done—it pops! There are a number of ways that you can achieve this by polishing off your design in Photoshop. Here we look at some of the ways to do just that.

1 [LAY OUT THE FUNDAMENTALS]

Before you go about making your website pop, you must first have your fundamentals in place. By this stage you should have done the research, laid out your website appropriately, and done most of the basic design work—but you haven’t applied the polish. In the following example, we’re going to look at some techniques used for a chocolate delivery website; however, these same techniques can be applied to any website.

2 [CHECK ALIGNMENT AND SPACING]

Alignment and spacing in website design creates order, organizes the page, and groups parts of the website for easy navigation. In the screenshot above you can see the guidelines in place ensuring everything is aligned (the grid is from www.960.gs). Notice how the logo and all of the text is left aligned? Also take note of the even spacing around the boxes and text. Use guides in Photoshop to ensure all of your elements are aligned. To add a guide to your document, drag it from one of your rulers (press Command-R [PC: Ctrl-R] to turn rulers on).

3 [APPLY ANTI-ALIASING TO TEXT]

Something that’s often overlooked when designing for the Web is anti-aliasing text. For those who don’t know, anti-aliasing is the technique of minimizing distortion artifacts. There are a few ways to minimize this distortion in your text but the best way is to make use of the anti-aliasing options in your Options Bar (or Character panel). You can choose between None, Sharp, Crisp, Strong, and Smooth. Experiment to see what works best, as different fonts and sizes will yield different results; however, the Sharp setting usually prevails in most cases.

4 [ADD A 1-PIXEL STROKE]

Something that really makes a difference in making a website pop is the use of a 1-pixel stroke inside borders and lines. Take a look at the zoomed-in screenshot above—see the inner purple line that runs alongside the inside of the box on the right? These stroked borders really add that extra crispness to the design as it provides extra contrast to the surrounding elements and gives the design more depth. You can add two strokes by selecting the object, choosing Edit>Stroke, and applying the 1-pixel stroke to the Inside. With your selection still in place, go back to Edit>Stroke and apply your second stroke to the Outside.

5 [ADD SUBTLE GRADIENT EFFECTS]

Gradients are popping up everywhere in Web design and for a reason—they add depth and real aesthetics to the design. Unlike print design where gradients seem flat, onscreen they make a design come alive. Notice the slight dark to light purple gradient in the screenshot above? Also take note of the slight transparency. These effects give the design a new dimension, making the image come off the screen, so to speak. Use Gradient Overlay in the Layer Style dialog to create these nice subtle (emphasis on subtle) effects.

6 [ADD SUBTLE DROP SHADOWS]

Use subtle drop shadows in conjunction with the gradients and stroked borders. Once again, these shadows add a new depth and dimension to your design as it makes the different elements on the page play against each other and pop out at you. Notice in the screenshot above that the logo, text, and boxes all have subtle drop shadows applied to them, which break them away from the other elements. You can use the Drop Shadow layer style to achieve these effects—but make sure you use them in moderation.

7 [HIERARCHY & CALL TO ACTION]

When someone first visits your website, what is the first thing they’re going to do? Is there a clear hierarchy of what to read or do first? What is the purpose of the site? These are all questions that you should have considered at the start of the project; however, now is a good time to go back and reflect on these decisions. Can you adjust the colors, size, or position to achieve better results? Notice in the screenshot below that the call to action on the UKE website is the “Pick a Basket” button, which is placed conveniently after the main opening slogan.

8 [COLOR CORRECTION & SHARPENING]

In Web design, photos, icons, and images are usually quite prominent, so you should ensure that they’re of the highest quality. Check the color balance, sharpness, and contrast of each image and make certain that it balances with the rest of the page and other images. A good way to do this is to make use of Levels, Unsharp Mask, and Curves in Photoshop. A quick search at www.layersmagazine.com will yield results on how to do this—these functions go beyond the scope of this tutorial.

Less Is More

In Web design, the old saying goes, “less is more.” After completing your website design, have a break and come back to it. Then ask yourself these questions to see how you can further improve your site:

1. Is there anything that I can remove, fix, replace, move, change or edit?
2. Does one element take up too much space or draw too much attention?
3. Are there too many colors?
4. Is the site balanced?
5. Is there consistency?
6. Can I make use of more white space?

When you set out to design your next website, you can also ask yourself these questions:

1. Do I have the basic fundamentals in place?
2. Can I improve my alignment or spacing?
3. Have I used the appropriate anti-aliasing?
4. Can I sharpen my images or text with strokes or borders?
5. Can I give more depth to the page by using gradients or drop shadows?
6. Is there a clear hierarchy with a call to action?
7. Are all of the images color corrected, balanced, and sharpened?
8. And last of all, ask yourself—does the website pop?

Before

After

PNG Compression

For testing purpose, I used an un-compressed image with transparency. I used Photoshop to export the image to PNG-24 with transparency and the resulting file size is about 352 kb. Then I used the same image and exported it to PNG-32 with Fireworks. The file size is about 332 kb. Visually, they both look the same (at least to me). In term of file size, the image exported with Fireworks is about 20 kb less.

GIF Compression

Next I exported the image to GIF 256 colors, adaptive, with no dither. The results are: Fireworks = 88kb, Photoshop = 92kb. That is 4 kb less. Also, they don’t look the same. I prefer the image exported with Fireworks because it has more image details.

JPG Compression

Now, I’m going to try the JPG compression with a different image. I exported the image with Photoshop to 60% quality JPG and the file size is 80 kb. Then I exported the same image with Fireworks to 80% quality JPG and the result is 72 kb. Both exported images look pretty much the same, but Fireworks beats Photoshop by 8 kb in this case.

Please note: Fireworks and Photoshop have different compression technology. 80% compression rate in Fireworks is relevant to Photoshop 60% compression rate.

What Is The Big Deal?

You’re probably thinking: what is the big deal? It is only a few kilobytes… Well, don’t under estimate the little difference in kilobytes, it can make a big difference on your bandwidth and load time. Lets use the background image on WebDesignerWall as an example. If I export the background with Fireworks, I can reduce its file size by 20 kb. I get about 16,000 visits per day on average. 20 kb x 16, 000 = 320, 000 kb. Yes, that is 320 megabytes per day! I’m only talking about the background image here. Could you imagine how much bandwidth I can save if I compress all the graphics on the site with Fireworks? Most importantly, I can make my site load faster and that is a big deal!

First lets see what we are creating.

I am assuming you know how to install patterns in photoshop. Also the PSD is available to download at the end of the post.

Here are the resources you need to download.

Techie Patterns for Photoshop

Vector Twitter Icon

Twitter Font

We are creating a 128x 128 icon. If you want the icon to resizeable it is a good idea to create the icon in Illustrator. For the purpose of this tutorial we are going to stick to Photoshop

Step 1:

Open up a new document in Photoshop 128×128, transparent background.

Step 2:

Select rounded rectangle tool from the shape menu.

Step 3:

Draw a rectangle shape as shown on the picture. Use ruler if you need to.

Step 4:

Now use the Path selection Tool ( Keyboard Shortcut “A”) to select the shape. Right click on mouse to get the drop down menu. You should see “Make Section” option. When you select/click that option the rectangle shape now should be turned into selection.

Step 5:

Now the exciting part. We are going to fill up the rectangle selection. The color selection completely depends on you. You can choose different colors to match your preferences and your websites color scheme. Here is foreground #63d2f4 and background #10b8ec

Select the Gradient tool. Fill up the rectangle with gradient. Hold the Shift key if you want the gradient to be straight.

We are going to use Pattern Overlay from Layer Style. You can access it by Double clicking on the layer or Going to Layer>Layer Style> Pattern Overlay on Photoshop menu. Below is Pattern I choose. The used pattern link is mentioned above , but you can choose any kind of patterns you want.

Keep the opacity to low so the background is not too dark. Here is my result. It is zoomed 200%

Step 6

Now we are going chose Pico (T1) Font Black Al, with white font color and center the font or arrange the way you want. You have a simple twitter icon already! You can stop here if you want. Here is the result:

Lets make a different version. Choose the font color to #2cb7e2 . This is makes the “t” it almost same color as background.

Apply the following Stroke and Inner shadow from Layer Style.

Stroke: Give the “t” white outline. 4px

Inner Shadow: for the inset effect.

Here is the result:

So there, you have it. A simple yet nice looking twitter icon. I also created one with bird instead of the text. For the bird style just paste the vector bird and change the color and style as you like.

Experiment with the layer styles and come up with your own unique style.

You can download the PSD from following links:

Twitter Icon PSD

Adobe Illustrator is a vector graphics application, so it doesn’t matter what size the icon is created at. We can simply select all the objects and scale them up to the size of King Kong, or likewise scale them down to the desired size. Unlike Photoshop, all our lines and shapes will keep their crisp lines and colours because they’re made of mathematical calculations rather than good old pixels.

Open up Illustrator and create a new document. Click and hold the mouse over the Rectangle tool to select the Rounded Rectangle option hiding underneath. Draw your shape on the artboard while holding Shift, use the arrow cursor keys to adjust the roundness of the corners while dragging.

Another difference between Illustrator and Photoshop is the options sat at the bottom of the main tool palette. In Photoshop, I’m sure you’re familiar with the foreground and background swatches – In Illustrator this is replaced with the fill colour and stroke colour. Click the stroke option and clear off any defaults, then bring the fill into focus. Over in the Gradient Panel, add an orange fill that varies from dark to light vertically across the shape.

With the shape selected, go Object > Path > Offset Path. Enter -1mm in the options. Grab the corner of the new shape and rotate to 180 degrees so the gradients flow in opposite directions.

Grab the circle tool and draw a shape elsewhere on the artboard. Clear out any fill, and add a thick 16pt black stroke.

With the Direct Selection Tool (White Arrow), select only the left and bottom points of the circle. Hit delete on the keyboard to trim the circle down to a quarter.

Copy (CMD+C) the quarter circle and paste in front (CMD+F). Scale it down while holding the shift key to keep everything tight.

Adjust the stroke weight to match the 16pt of the original.

Press CMD+R to show the rulers, then drag a couple of guides out in alignment with the quarter circles. Using the intersection as a source, draw a small circle to finish off the traditional RSS shape.

Our two quarter circles are currently set as stroked paths, but we can quickly convert them to complete shapes by heading to Object > Expand, then selecting just the Stroke option.

With the three objects selected, add a grey-white gradient fill running vertically, and a 1pt light grey stroke.

Press CMD-G to Group the objects together, then scale and position them into place in the overall orange container.

Select the inner rectangle from the orange box, Copy (CMD-C) and Paste in Front (CMD-F). Fill it with white. One tip to remember is unlike Photoshop, Illustrator can hold multiple items in just one layer, each stackable on top of each other.

Draw a large, flat oval over the entire graphic. Pay close attention to how the bottom curve overlaps the white rectangle. With the oval and rectangle selection, click the Intersect Shape Area option in the Pathfinder palette.

Reduce the Opacity of this new shape down to around 15%, giving a sleek shine to the icon.

Finish off the graphic with a couple of specular hightlights in the form of circles. Use 15% opacity again to maintain a subtle appearance.

Final Image Preview

Create a new document (Ctrl+N) in Adobe Photoshop with the size 1920px by 1200px (RGB color mode) at a resolution of 72 pixels/inch. Select then the Paint Bucket Tool (G) to fill the new background layer with #EBF4F3 color.

Then choose the Rectangle Tool (U) to draw a rectangle, like the next one:

Set Fill to 0% for this layer in Layers panel:

Select Add a layer style from bottom part of the Layers panel and click to Gradient Overlay:

Click in the color bar to open the Gradient Editor and set the color stops as shown. Click OK to close the Gradient Editor dialog box.

We’ve got the next floor:

Find a stock photo with a model represented on it, I used this photo from deviantart. I would like to thank the author of this photo:

Remove the background using your favorite tools like Pen Tool (P), Magic Wand Tool (W), Magnetic Lasso (L) or even a simple Filter>Extract. Make a copy of this layer (Ctrl+J), click the visibility button on this copy, we’ll need this layer later:

Click on the bottom part of the Layers’ panel on the next icon Create new fill or adjustment layer and select Levels to make some color corrections

Raise the contrast of the picture:

Put the mouse cursor between the layers and hold on the Alt button while clicking on the left button. The top layer will be transformed into a mask:

Next we’ll add another adjustment layer. Click on the bottom part of the Layers’ panel on the Create new fill or adjustment layer and select Hue/Saturation:

Reduce the color saturation:

Transform it into a mask too. Click on this layer on the Layers’ panel, select the mask and using a brush from the Brush Tool (B) of black color paint the opened zones (skin) on the girl’s body:

Add another adjustment layer. Click on the bottom part of the Layers’ panel on the Create new fill or adjustment layer and select Curves:

Set the options for raising the contrast. Paint the body’s zones in the mask too and a little on the girl’s clothes, only on those places with a high contrast.

This is the result we should get:

Make the girl’s reflection on the floor. Let’s activate the copy of the girl’s layer and turn it around, applying Free Transform (Ctrl+T). Choose the Eraser Tool (E) to erase the same places demonstrated below:

Then select a Soft Round brush of black color with the Opacity of 20% and represent a shadow on a new layer:

The brush’s settings:

Create a new layer, representing here the shadow around the girl. Choose the same options applied before for the Soft Round brush, but enlarge the brush’s size, using the button ].

Create a new layer select a Soft Round brush and insert here a spot of the color #6DCFF6. Opacity – 20%.

Create a new file with the size 500px by 500px (RGB color mode) at a resolution of 72 pixels/inch. Select the Soft Round brush of black color and set the next shown options for it:

Let’s put a brushstroke, like the next one:

Then choose Filter>Pixelate>Color halftone and set the next demonstrated settings:

It’s the result we’ll get on this stage:

Select this layer and place it on a new layer on our basic document, changing the Blending Mode to Darker Color and set Fill to 40%.

Although the web is a great place to look for quick inspiration for a project, nothing can beat going on a long walk in nature.
The summer brings us sunny days, fields full of crops and plenty of insects and wildlife, whereas the winter brings us rain, icy roads and snow.

When Christmas comes around we often find people looking at plastic tree decorations saying “snowflakes don’t look like that!”. That, of course, is where they are all wrong.

With a decent camera and zoom or macro lens, things we wouldn’t normally pay too much attention to become a complete world in themselves, making them a magnificent source of inspiration for artists and designers all over the world.

Below we have collected some incredible close-up/macro shots of snowflakes to really get the arty-side of you in full flow this Christmas season.

Compiled exclusively for WDD by Callum Chapman, a freelance designer from Cambridge, UK. He is the creative mind behind Circlebox Creative and Circlebox Blog, and can often be found writing for design related blogs.

What did you think of these photos? Please share your opinion below…