DesignM.ag

30 Web Designs with Amazing Attention to Detail

Steven Snell — Tue, 10 Nov 2009 22:28:19 +0000

Creating a truly beautiful website that stands out from all of the other good web designs out there requires an attention to detail. Sometimes the subtle design details that you may not even notice right away will have a major influence that will help to complete the design. In this post we’ll take a look at 30 sites that show great attention to detail, with an explanation for each.

Design Bombs

Not only does Design Bombs showcase beautiful website designs, its own design is quite impressive. Throughout the site there is detail in a number of different places. In the screenshot below you will see excellent use of drop shadows, slightly different shades of gray, and borders that give a beveled appearance.

Shopify

Shopify makes use of linear gradients in the gray areas of the design and a radial gradient in the green area. There is also a subtle reflection below the five screenshots. These details are not overwhelming, but they make the design much more polished.

Odosketch

Odosketch uses a slightly textured background that gives some added character to the design. The ribbons are also design with attention to detail, which gives them an attractive 3D look.

Tender Support

Tender Support is a beautiful site that uses spacing and alignment very effectively. There is no excess in the design, and each element is precisely placed with a perfect amount of whitespace.

West Coast Poppin

West Coast Poppin uses subtle gradients and borders very well on the navigation menu. Just above the menu you’ll also see a light splatter effect that isn’t overpowering. The sides of the navigation menu also have a 3D element that is designed with great detail to give it a spectatular look. Additionally, the textured background is another design detail, as opposed to using a flat, solid color.

Envato

Envato’s recent re-design uses transparency, subtle gradients, dropshadows and borders to give it a super sleek look. If you want to examine design details for your own learning purposes, take a close look at any of the Envato sites.

PSDTUTS

PSDTUTS is also from Envato, and it also uses gradients and one-pixel borders to create a beautiful, detailed design.

Service Plus Inns & Suites

Service Plus Inns & Suites makes use of texture to give its design some added appeal. The dropshadows from the pictures also help to complete the look without drawing a lot of attention.

Texture Lovers

Using multiple different textures in one design can be a real challenge to do well, but Texture Lovers pulls it off. Great care was used to make the textures work together.

Causecast

Causecast makes use of gradients, lighting effects and transparency to create an attractive design.

GoBible

GoBible uses a nice gradient in the background, which is subtle but effective. Dropshadows are used on the buttons, photos, and on a 3D element that controls the slider. There is also some reflection used on images lower on the page.

Carreras Con Futuro

The most prominent element of the design of Carreras Con Futuro is the background, which features a hand-drawn style and splatter effects. However, there is also a light texture applied to the background at the top of the page. The texture is probably not noticed as much as the hand-drawn elements and the splatter effects, but it helps to complete the look.

Sower of Seeds

Sower of Seeds uses drop shadows to give a 3D look to the navigation menu. There’s also a slight texture to the header area that works very well. The light gray diagonal stripes are used throughout the design to set it off from the solid white background that is used in some areas.

Tutorial9

Tutorial9 uses slight gradients, drop shadows and borders to really complete its look. Every area of the blog theme seems to have been given plenty of attention and consideration.

Web Design Ledger

Web Design Ledger has a beautiful design with effective typography and an attractive color scheme, but the background image includes some cool details. The wood background includes some items that appear to have been doodled or scratched into the wood.

Function

Function uses a subtle grunge effect on the background of the content area, and also on the borders that are used to separate columns. Rather than using solid one-pixel borders, they use borders that have a hand-drawn feel.

Atebits

Atebits has a rather simple layout, but it looks very appealing because of the textures, drop shadows, and borders. It’s an example of how effective attention to detail can make something with a basic layout look very professional and attractive.

nYq Design Group

nYq Design uses a lot of texture. The dark brick background is very prominent, but the use of texture on the navigation menu and the featured work area work well with the overall design. The links in the navigation menu also use a hand-drawn font, which is a subtle but effective change from Arial of Georgia.

Pulse

Pulse uses a gradient and transparency to create a impressive look. The headline or tagline also uses a slight drop shadow that looks great on top of that background. Both links on the homepage to the pricing and signup use a blue color that helps it to stand out.

Ugmonk

Ugmonk recently re-designed their site. The left and right sides of the header use a border and drop shadow to give it a bit of a 3D look. The background pattern is another design detail that gives it different look as opposed to a solid background color.

Nine Fashion

Nine Fashion uses gradients and borders very sublty in the header to help create the stylish look of the site.

Hello Themes

Hello Themes has a very colorful design and uses a combination of different shades and gradients. Borders help to give the navigation menu a beveled look. Buttons on the site also use gradients, borders and drop shadows to demonstrate the attention to detail.

The Sak

The Sak uses textures and a background image/pattern along with hand-drawn fonts that complete the look. The header particularly has a lot of detail with different texture and fonts. A drop shadow is used for the torn paper look.

Jarad Johnson

A lot of portfolio sites have dark backgrounds, but Jarad Johnson’s is unique. Subtle light effects are used with the pattern to create a stunning dark background.

From the Couch

From the Couch demonstrates attention to detail in the 3D elements of the design. The 3D ribbons and borders in the sidebar navigation are done very precisely. The rounded corners, borders and color scheme also help to complete a very polished look.

Mark Forrester

Mark Forrester’s borders and 3D elements show a great deal of attention to detail in the content area, although the header illustration is obviously the most prominent aspect of the design.

The Swish Life

The layout of the Swish Life is beautifully spaced out and aligned. The content is well-organized, accessible and not crammed in to small areas. This is an excellent example of how even a content-heavy site can make use of whitespace.

Ecosimply

Ecosimply’s blog design uses borders and drop shadows effectively. The tabbed navigation uses a gradient and a slight change on hover.

What Katie Does

What Katie Does uses a rather subtle repeating texture on the background of the site. The texture is not overpowering but it has a big impact on the look of the site.

The Photo Argus

The Photo Argus makes nice use of transparency to the big background photo. A simple, but attractive, color scheme is used by the site.

For more design inspiration please see:

Looking to Hire a Designer or Developer?

Post a free job listing to the DesignM.ag job board for freelance, part-time or full-time positions. Your listing will be seen by thousands of talented designers and developers. - Post a job for free.

Design an Attractive One-Page Portfolio Using Photoshop

Steven Snell — Mon, 09 Nov 2009 21:12:06 +0000

Today we will be designing a one-page portfolio in Photoshop. We’ll go through the process step-by-step and you can download the PSD file from Folio Focus if you would like to use it. The portfolio will include some brief biographical information, some sample work, brief description of services, your latest tweets, links to social profiles, and a call to action.

The Final Result:

Here is a look at what we will be creating (click the image to see it in full size)

Create the New File

To get started, open a new file in Photoshop (File – New) that is 1600 pixels wide and 2000 pixels high.

Step 1: The Background

Set the foreground color to #362914 and use the paint bucket tool to fill the background layer with this color.

To create the texture we’re going to use two images from the Heavy Coffee Stains texture pack by Callum Chapman and distributed by Tutorial9. There are 7 textures in the pack, so check them out and see which ones you like. I am using the two that are shown below.

Copy the first texture and paste it in to your Photoshop file. Double click on the layer in the layers palette to open the layer style options. Change the blend mode to “overlay” and the opacity to 70%.

Here is how it should look.

Then paste in the second texture on top of the first and also change the blend mode to “overlay” and the opacity to 70%.

We’re going to use a gradient on the sides of the image so that it will fade to a solid color. That way when the page is coded it will flow into the background color rather than ending abruptly. With the foreground color still set at #362914 , select the gradient tool and the linear gradient. Choose the gradient that fades from the foreground color to transparency.

Add a new layer (Layer – New) above the background color and the textures. Click and hold the mouse about 25 pixels from the left edge of the canvas and drag it to the right about 300 pixels, then release the mouse. This will give you a solid color on the left side of the canvas.

Add a new layer and repeat this process on the right side of the canvas.

Now, use the rectangular marquee tool to select everything below the 500 pixel mark. Add a new layer and set the foreground color to #201b0e. Use the paint bucket tool to fill the selection.

Change the foreground color to #594522, a lighter brown, and select the pencil tool and a one-pixel square brush tip. Use the pencil tool to add a one pixel border. You can hold the shift key to get a straight line. (The image below is shown at 600% to see the border).

Find the layer with the solid dark brown color in the layers palette and double click it. Select “drop shadow” and set it to 50% opacity, -90 degrees, and a size and distance of 5 pixels. This will give it a subtle shadow that will rest over the bottom of the textured area.

Next, use the rectangular marquee tool to select everything below the 1300 pixel mark and add a new layer. Set the foreground color to #2d2413 and use the paint bucket tool to fill the selection with this color.

Again, add a new layer and use the rectangular marquee tool to select everything below the 1885 pixel mark. Set the foreground color back to #201b0e and use the paint bucket tool to fill the selection.

Next, use the pencil tool to add two one-pixel borders (2 different colors, one pixel each) to the top of the footer area. The darker color is #16130a and the lighter color is #594522. This is how it looks at 600%.

Then we will use the same two colors to add a two-pixel border at the top of that lighter brown area.

The image below shows where we just added borders.

That completes the background.

Step 2: The Header

Set a vertical guide (View – New Guide) at 320 pixels to show the left edge of the layout (we will be using a 960 pixel width for the layout, but the canvas is 1600 pixels wide to show the texture beyond the layout width). We will be using the font Nevis, so if you don’t already have it you can download it now.

I’m using 30 pt Nevis in #cfcdb4 for the title of the site. The top of the text is 35 pixels from the top of the canvas.

Set the foreground color to #cfcdb4 and the background color to #bab79d. Double click on the new text layer in the layers palette and select “gradient overlay.” Select the gradient that flows from the foreground color to the background color and check “reverse” so the darker color is at the bottom of the text.

Then select “drop shadow” and set it at 75% opacity, 120 degrees (with the “use global light” box unchecked), distance and size at 3 pixels.

That will give you a title/logo that looks like this.

Next, we will add a line of text just below the title. I’m using 18 pt italic Georgia in #af9671, with a drop shadow set at 75% opacity, 120 degrees, and 2 pixels for distance and size.

The navigation menu will be lined up to the right edge, also 35 pixels from the top of the canvas. Since it is a one-page portfolio, these links will lead to lower areas of the same page.

For the text I am using 18 pt Arial in #af9671.

Step 3: The Top Content Area

Below the header we will include some space for biographical info and a call to action that will encourage visitors to send an email about a design project. We will be dividing the area into two columns of equal width (460 pixels) with 40 pixels of spacing between the two columns.

If you like to use guides to help layout the text you can set vertical guides at 320, 780, 820, and 1280 pixels, and a horizontal guide at 140 pixels.

Add headers for each section using 18 pt Arial in #ea9f3e.

Next, add some text to the columns in 14 pt Georgia, #cfcdb4. I have the line spacing set to 20 pixels.

We’ll be using a free icon from the portfolio icon set that IconShock designed for the Vandelay Design Blog. We are using is the “hire me” icon. Download it and re-size it to 200 px by 200 px. Copy it and paste it in to your canvas. Use the free transform (Edit – Free Transform) to line it up.

Then add some more text to the right of the icon with an email address.

Step 4: The Portfolio Area

Now we will be moving on to the section of the page that will include work samples. We will be using three columns and three rows of thumbnail images, of course you could add more rows once the site is coded. The idea here is to use a JavaScript lightbox effect that would show a larger version of each image when clicked.

You can clear any guides that are still in use (View – Clear Guides) because we will be using three columns here instead of two.

To start with, add a heading in 18 pt Arial, #ea9f3e. The top of the text should be 30 pixels below the border.

To help with layout of the thumbnails, set vertical guides at 320, 620, 650, 950, 980, and 1280 pixels. And set horizontal guides at 575, 740, 810, 975, 1045, and 1210 pixels.

Each thumbnail is going to be placed in a box in this grid. Each box is 300 px by 165 px. Our thumbnails will be 290 px by 155 px with 4 pixels of padding and then a one-pixel border. That will fill up the 300 x 165 space.

I think the easiest way to get the border applied to each box is to create a new file and then paste it in to each space. So create a new file that is 300 pixels wide and 165 pixels high. Fill it with #201b0e. Use the pencil tool to give it a one-pixel border on each side in #3c3218. Here is a look at the corner of that canvas at 600%.

Now, select the whole canvas (Select – All) of the new file, copy it (Edit – Copy), and go back to our layout. The grid of guides will allow you to easily paste this file in the precise places. Use the rectangular marquee tool to select the first box.

Then paste (Edit – Paste) the file and it will be positioned in the right place. Repeat this process by selecting each box and pasting in the file with the border. After you have done so for all nine boxes, with the guides cleared it should look like this.

Next, you will need to gather 9 screenshots from your portfolio. Re-size and crop them so they are each 290 pixels by 155 pixels. For this tutorial I am using screenshots from other Photoshop layout tutorials that have been published here.

Once again using the guides. select the first box using the rectangular marquee tool and paste in your first screenshot. It will line it up in the center if your thumbnail is 290 by 155 and the selected box is 300 x 165.

Repeat this process for each of the boxes.

Below each thumbnail, add a title, description and date for the project. I am using 14 pt Georgia. The title is #af9671 bold, and the description and date are #cfcdb4 normal.

That completes the portfolio area.

Step 5: The Bottom Content Area

Below the work samples we will be using three columns of text, including a listing of services, display of recent tweets, and relevant contact information.

These columns will line up with the thumbnails above, so we can use the same guides. Here we will be using another icon from the portfolio icon set (the palette),the Twitter icon from Function’s free icon set, and the mail icon from the blogging icon set here at DesignM.ag.

Resize each icon to 40 pixels by 40 pixels. The top of the text should line up at 1350 pixels and the icons will extend above and below the text a little bit. Use 18 pt Arial in #ea9f3e for the headers.

Add some text to the left column. It should include a listing and brief description of the services that are offered. I’m using 14 pt Georgia, #cfcdb4 for the text with #af9671 bold for the sub headers (the services).

In the center column we’ll add some text to represent recent tweets.

In the right column add some text with an email address, and then some links to social profiles. I’m using the Twitter, Delicious, and Flickr icons from the Function free icon set. I’ve set the leading of those three lines to 48 pixels and re-sized the icons to 32 x 32.

Below the “Services” column we will add a “return to top” link.

Step 6: The Footer

The last step is to add a copyright to the footer. I’m using 14 pt Georgia in #cfcdb4.

The End Result:

Here is a look at what we just designed (click the image to see it in full size).

If you’d like to get the PSD file used for this tutorial, it can be downloaded from Folio Focus for free. You can use it for personal or commercial purposes, but it cannot be re-distributed.

For more Photoshop layout tutorials see:

Looking to Hire a Designer or Developer?

Freebie: Tea-Stained Paper Texture Set

Callum Chapman — Thu, 05 Nov 2009 23:59:59 +0000

Today we’re releasing a set of 14 tea-stained paper textures. The textures can be used for personal or commercial projects. You can download the entire set in a zip file or you can get them individually from the Flickr set. Five of the images are shown below, and you can view the others on Flickr.

Download the entire set (12.6 MB zip file)

About the Author:

Callum Chapman is a freelance graphic designer & illustrator based in Cambridge (UK) trading under the name Circlebox Creative. He also runs a design blog offering articles, tutorials and high-res textures at Circlebox Blog.

Looking to Hire a Designer or Developer?

Showcase of Big, Bold Typography

Steven Snell — Wed, 04 Nov 2009 22:35:15 +0000

Big, bold typography can be very powerful for conveying a message or just for achieving a desired look. In this post we’ll showcase more than 25 items that feature big, bold typography. To see more work from a particular artist/designer, click on the images and they will lead to portfolios on Behance, deviantART and similar sites.

For more on typography see:

Looking to Hire a Designer or Developer?

50 Clever, Creative Logos

Steven Snell — Wed, 04 Nov 2009 01:37:33 +0000

If you’ve browsed through any logo design galleries, you’ve probably noticed some that take a very creative approach. In this post we’ll feature 50 clever logos for your design inspiration.

Uptown

Cowbra

Typeface

Shy Child

Mary and Andy

Strategical Office Solutions

Natuur 2000

Shocked

Broken Goggles

Steers Restaurant

American Culinary Foundation

Egg

Eco-Cities

Families

Fenz-it

Plated

Rentzilla

Miskeeto

Doghouse Brewing Company

Exitive

Forkwire

Mind Over Math

Catalyst Construction

Umbrellar

Modani

Wiesinger Music

Playground

Elephant Talk

African Film Club

For more logo inspiration please see:

Looking to Hire a Designer or Developer?

Design an Online Template Shop Layout Using Photoshop

Steven Snell — Mon, 02 Nov 2009 21:55:00 +0000

Today we will be designing a homepage layout for a premium template or theme seller. The design uses a dark color scheme and some texture. Here is a preview of the final result (click the image to see it in full size). At the end of the tutorial you will be able to download the original PSD file used to create the tutorial if you would like it for your own purposes.

Setting Up the File:

Create a new file in Photoshop that is 1600 pixels wide and 950 pixels high.

Step 1: The Background:

Set the foreground color to #545454 and use the paint bucket tool to fill the background layer with this gray color.

Next, change the foreground color to #5f120a and add a new layer (Layer – New). Set a horizontal guide (View – New Guide) at 65 pixels and use the rectangular marquee tool to select everything above this guide. Then use the paint bucket tool to fill the selected area with the foreground color.

Double click on the new layer in the layers palette to bring up the layer styles options. Check the box for drop shadow and set it to 50% opacity and and angle of 90 degrees. Leave the distance and size at 5 and uncheck the box for “Use Global Light.”

Set the foreground color to #9c2f23 and add a new layer. Select the pencil tool and choose a square brush with a diameter of 1 pixel. Use the pencil tool to add a one-pixel border to the bottom of the header area. The image below is shown at 600% for better visibility.

Add a new layer and set a horizontal guide at 465 pixels. Use the rectangular marquee tool to select everything above that guide. Set the foreground color to #333333 and the background color to #000000. Select the gradient tool and make sure the radial gradient is active and using the gradient that fades from the foreground color to the background color.

Start the radial gradient by click in the middle of the canvas horizontally and about 100 pixels above the top of the canvas. Hold shift to keep a straight line and drag the mouse below the guide, to about the 600 pixel mark.

That should give you a result that looks like this.

Next, we’re going to add some texture on top of that gradient by using an image from Design Shard’s grunge texture pack. The specific image can be found in the Flickr set from Design Shard. Here is a look at the image.

Save the image or copy it in to Photoshop. Desaturate it by going to Image – Adjustments – Desaturate. I’ve cropped the texture to be 1600 pixels wide and 465 pixels high so it will exactly fit in the area of the gradient. Copy the desaturated image and paste it in above the gradient layer. Double click on the texture layer in the layers palette and set the blend mode to Soft Light at 100%.

Now move the gradient and texture layers behind the header and header border layers.

This completes the background that we will be using for the design.

Step 2: The Header

For the title/logo we’re going to use the ChunkFive font, which can be downloaded for free. Set a vertical guide at 320 pixels to help line up the left edge of the text. I’m using 30pt ChunkFive in #dfd9d9.

Set the background color to #dfd9d9 and the foreground color to #bebcbc, a slightly darker shade. Double click on the text layer in the layers palette and select “gradient overlay.” Choose the gradient that fades from the foreground color to the background color. Then click on “drop shadow” and set it to 50% opacity with distance and size at 3. Set the angle to 120 degrees and make sure the box is unchecked for “Use Global Light.”

Next, we’ll add a navigation menu to the right side of the header using 14pt Arial in #dfd9d9. Set a vertical guide at 1280 pixels to align the right edge of the text.

Step Three: The Featured Area

On top of the gradient and the texture we will be displaying some screenshots of templates on the right side of the screen, and some text and two buttons on the left side. To start with we are going to need three screenshots, so I am just using images from other Photoshop layout tutorials that I have published here on DesignM.ag. Of course, you can use images from any of your own sites or templates here.

Once you have the images that you will be using, resize them all to a width of 400 pixels. We’re going to use guides to help us line up the screenshots, so set vertical guides at 700, 790, and 880 pixels, and horizontal guides at 115, 190, and 265 pixels.

Copy the first screenshot that you want to sit in the back and paste it in to your canvas. Then use the free transform (Edit – Free Transform) to align it as shown in the image below.

Then, paste in your second screenshot and line it up with the guides as shown.

Then, do the same with the third screenshot, which will sit in front of the other two.

Add a drop shadow to each of the screenshot layers by double clicking on the layer in the layers palette and selecting “drop shadow.” Set the opacity at 50% and the angle at -120 degrees (”Use Global Light” should be checked). Set the distance and size to 3 pixels.

Add a new layer and set the foreground color to #545454. Select the area below the 465 pixel mark and fill it by using the paint bucket tool. This will hide the bottom portions of the screenshots under our content area.

Next, we’re going to simply add some text to the left of the screenshots, just below the logo. I am using 14pt italic Georgia in #dfd9d9, and the paragraph is centered.

We’re going to add two buttons below the text. The first button will promote the sale of individual templates and the second button will promote a club membership that gives access to all of the templates.

To mark off the area for the buttons I’m going to set vertical guides at 350 pixels and 640 pixels, and horizontal guides at 285, 345, 375, and 435 pixels. Set the foreground color to #6f1910 and the background color to #9c2f23, and select the rounded rectangle tool. Set the radius to 10 pixels. Use the guides to draw two buttons with the rounded rectangle tool.

Double click on the layer of the first shape in the layers palette and click on “gradient overlay.” Choose the gradient that fades from the foreground color to the background color and have the darker shade on the bottom. Then, click on “stroke” and set it to one pixel outside and #b34235 as the color. Repeat this to give the second button the same gradient overlay and stroke.

Now we’re going to add some text on top of the buttons. I’m using 18pt Arial in #230a0b for the first line of text and 14pt Arial in #dfd9d9 for the second line of text. Double click on the text layers in the layers palette and set a drop shadow of 75% opacity, 120 degree angle (”Use Global Light” not selected) and a distance and size of one.

To add a little bit of texture to the buttons I am going to use the splatter brushes from Bittbox. If you don’t already have those brushes you can download them for free. Before you do anything with the brushes, make sure you add a new layer over the buttons, but below the text, so you can experiment and get rid of the layer if you don’t like how it turns out. Select the area over one of the buttons, choose a color very similar to that of the buttons (I used #6f1910), and choose one of the splatter brushes. Resize the master diameter of the brush to make it small (I used between 400 – 600 pixels) and apply some splatter effects using the brushes. Try using a few different brushes to see what you like.

Then duplicate the layer (Layer – Duplicate) and use the free transform (Edit – Free Transform) to move it in place over the second button.

Step Four: The Horizontal Band

Add a new layer and set the foreground color to #5f120a. Use the rectangular marquee tool to select an area that is 40 pixels high and the entire width of the canvas, directly below the dark textured area. Use the paint bucket tool to fill it with color. Double click on the layer in the layers palette and give it a drop shadow with 50% opacity, 120 degrees (”Use Global Light” not checked), and a distance and size of 2 pixels.

Use the pencil tool to give this horizontal band a one-pixel top border of #9c2f23 and a one-pixel bottom border of #7c7b7b.

We’ll add some text for a promotional deal in this area using 18pt italic Georgia in #dfd9d9. The words “Limited Time Special:” is in #e57b70 and also in bold. “See the details” is also in #e57b70.

Here is a look at what we have so far.

Step 5: The Content Area

Our content area is going to have 3 columns. The left and center columns will be used to list features of the templates, along with icons, and the right column will contain some “About Us” information. We’re going to use guides to control the layout of the columns and to help us line up the icons properly. Clear any guides (View – Clear Guides) that are currently being used and set new vertical guides at 320, 368, 620, 650, 698, 950 and 980 pixels. And set horizontal guides at 550, 580, 628, 660, 708, 740, 788, 820, and 868 pixels. We’ll use these guides in a minute to line up the icons and the text.

First, here are the icons that we will be using. From the Function free icon set we’re using the computer icon, the folder icon, and the mail icon. From the Flavour Extended icon set from Smashing Magazine and Oliver Twardowski we are using the check icon, the clock icon, the security icon, and the tablet icon. From the Portfolio icon set from Vandelay Design and IconShock we will be using the palette icon. Download the icon packs and open the icons that we will be using. All of the icons from the Function pack and from the Flavour Extended pack are 48 x 48 pixels, so you can leave them at this size. Re-size the palette icon to be 48 x 48 pixels.

Let’s start by entering the text that will go at the top of the list of features. I’m using 18pt bold Arial in #5f120a. The left edge of the text should line up with the vertical guide at 320 pixels and it should sit above the horizontal guide at 550 pixels.

Now we can start adding the icons. Copy the check icon and use the rectangular marquee tool to select the area between the vertical guides at 320 pixels and 368 pixels, and between the horizontal guides at 580 pixels and 628 pixels. This will give us a selected area of 48 pixels by 48 pixels, the same size as the icon, so the icon will go right in place when we paste it.

With the area still selected, paste in the icon.

Then you can repeat this process of selecting the area and pasting in the icon for the other seven 48 x 48 spots.

Next, we’ll add the text to go next to the icons. Next to the check icon, enter a text box and use 14pt Arial in #dfd9d9. We’re highlighting part of the text by using #230a0b and bold.

Then repeat the process by adding text next to each icon (click the image below to see in full size).

In the right column enter a text box with a header in 18pt bold Arial, #5f120a. The rest of the text is 14pt Arial, #dfd9d9.

Step: The Footer

Add a new layer and set the foreground color to #424141. Use the rectangular marquee tool to select the bottom area of the canvas and use the paint bucket tool to fill the selection. Change the foreground color to #7c7b7b and use the pencil tool to add a one-pixel border above the footer.

Then add some text in the footer in 14pt Arial in #dfd9d9.

That’s the end of our design, and here is the final result.

You can download the original PSD here. (4.7 MB zip file)

For more Photoshop layout tutorials see:

Looking to Hire a Designer or Developer?

Blogging Icon Set from IconShock

Steven Snell — Thu, 29 Oct 2009 23:06:12 +0000

IconShock has designed another set of high-quality icons specifically for DesignM.ag readers. This set includes 5 icons that may be useful for your next blog theme design. They can be used for personal or commercial projects, no attribution is necessary.

The set includes two sizes of PNG files (512px and 256px) as well as the source files (Illustrator).

Download the icons (1.3 MB zip file)

Also, please see the e-commerce icon set that IconShock did for us last month.

Looking to Hire a Designer or Developer?

The A-Z List of Free Grungy & Dirty Fonts for Commercial Design

Callum Chapman — Wed, 28 Oct 2009 21:24:27 +0000

With Halloween coming up now is a great time to add a few grungy and dirty based typefaces to your font collection. Here we have a large A-Z list of some of the best free grungy and dirty fonts to use in your designs from the ever-popular dafont.com!

A is for Ambulance Shotgun

B is for Broken Ghost

C is for CGF Offroad

D is for Decade

E is for Extraction BRK

F is for Fail

G is for Grunge Zinda Bad

H is for H2D2 Alvita

I is for Impacted

J is for Johnny Homicide

K is for Kreepy Krawly

L is for Lights Out BRK

M is for Mono Madness

N is for Nobby

O is for Overwork

P is for Pahuenga Cass

Q is for Quincy

R is for Rubbermaid

S is for Stoned Wash 6

T is for Tiza

U is for Uptown

V is for Viper Nora

W is for WC Appendum

X is for Xenophone

Y is for Younger Than Me

Z is for Zombilaria

About the Author:

Looking to Hire a Designer or Developer?

Win 500 Die-Cut Business Cards from UPrinting

Steven Snell — Tue, 27 Oct 2009 23:04:58 +0000

UPrinting has offered to give 500 die cut business cards to five readers of the DesignM.ag! If you’re interested in having a unique business card that helps you to stand out to potential clients, this is a great opportunity.

If you’re not familiar with UPrinting, they have been a printing leader for over 25 years and they offer a very wide variety of services, including business cards, brochures, calendars, menus, posters, postcards, envelopes, and more. UPrinting also has a blog that may interest you. They publish articles relevant to graphic designers and the printing industry.

UPrinting offers convenient ordering for business cards. Their site includes a pricing calculator that allows you to choose the size, stock, color, and quantity so you can see the price before even getting started. Shipping costs can also be calculated.

Giveaway Details:

Five readers will win 500 business cards each, plus free ground shipping courtesy of UPrinting. Free shipping is only provided to winners in the U.S. Those outside the U.S. are welcome to enter the contest but would have to pay for shipping and applicable taxes.

To enter the contest, please leave a comment on this post stating that you would like to enter, or tell us how you would use the business cards if you win. On Friday, October 30th I will select five random winners and this post will be updated at that time. The winners will be contacted by email (be sure to leave a valid email address with your comment).

Good luck!

UPrinting is also sponsoring an identical giveaway at Vandelay Design, so feel fee to leave a comment on this post to double your chances. You may enter once at each site.

UPDATE: The contest is now over. Thanks to everyone who participated! Here are the winners (you will be contacted by email shortly):

Looking to Hire a Designer or Developer?

Design Blue Corporate Website in Photoshop

Steven Snell — Mon, 26 Oct 2009 20:58:16 +0000

Today we will be working through the process of designing a corporate website in Photoshop step-by-step. For this example we’ll be creating a site for a marketing company, but just about any other type of service business could use this design as well. At the end of the tutorial you will be able to download the PSD file used in the tutorial.

A Preview of the Final Result

Here is what we will be designing.

Preparing the File

Create a new file (File – New) that is 1400 pixels wide and 900 pixels high.

Step 1: The Background

Set the foreground color to #efefef and use the paint bucket tool to fill the background layer with this light gray color.

Add a new layer (Layer – New) and set a horizontal guide (View – New guide) at 50 pixels. Use the rectangular marquee tool to select everything above the guide.

Set the foreground color to #184e84 and use the paint bucket tool to fill the selected area.

Add a new layer and set a new horizontal guide at 398 pixels. Use the rectangular marquee tool to select everything between the two guides and change the foreground color to #d1e6f9. Then use the paint bucket tool to fill the selected are with the light blue.

Add a new layer and select the pencil tool with a square, one-pixel brush tip.

Set the foreground color to #002c5f, a shade of blue that is just a little bit darker than the header. Using the pencil tool, add a one-pixel border below the header. I like to increase the view to about 600% to do this. Start by clicking at one end of the border, then move to the other end and hold shift while click again (that will make a straight line between your first click and your second.

Change the foreground color to #bfd5e9. Now add a one-pixel border to the bottom of the light blue area. (The image below is shown at 600%).

Our background should now look like this.

Step 2: The Header

We will be using a simple header that includes a logo/title at the left and a navigation menu at the right.

For the logo of the site I will be using the font New Cicle. Set a vertical guide at 220 pixels (this will set the left edge of the content area) and use 30 pt New Cicle gordita in #efefef.

Set the foreground color to #efefef and the background color to #ffffff. Double click on the text layer in the layers palette to bring up the layer style options. Click on “gradient overlay” and select the gradient that fades from the foreground color to the background color.

Then select “drop shadow” and change the settings to 55% opacity with a distance and size of 1 pixel.

The logo should now look like this.

We will now be adding four links to create a navigation menu at the right side of the header. Set a new vertical guide (View – New Guide) at 1180 pixels to set the right edge of the layout. The end of our last link will be lining up with this edge. I’m using 14 pt Arial text in #efefef for the links.

Here is how it looks at this point.

And that completes our header.

Step 3: The Slider Area

Our homepage design is going to include an area that can be used with a jQuery slider. For the purposes of this tutorial the slider will include information about four different services that our offered by the company.

Set vertical guides at 220 pixels, 470 pixels and 1180 pixels. Set horizontal guides at 75 pixels and 378 pixels. The navigation that will allow visitors to select the service that they are interested in will sit to the left of the slider. The area that we are blocking off is 303 pixels in height, which will allow for a vertical navigation menu that includes four links that are are 75 pixels in height and one-pixel borders between the links.

Add a new layer and set the foreground color to #e0e0e0. Use the rectangular marquee tool to select the area to the left for the navigation menu, and fill it by using the paint bucket tool.

Add a new layer and change the foreground color to #d7d6d4. Select the top 75 pixels in the navigation menu and fill it with #d7d6d4 by using the paint bucket tool. This will be the active link on the slider, so we’ll give it a slightly darker background color.

Add a new layer and change the foreground color to #bdbdbd. Use the pencil tool to give a border to the navigation menu, and create horizontal lines every 75 pixels that will serve as the borders of the links.

Add text to make the links. I am using 14 pt Arial with #184e84 for the active link and #191919 for the other links.

Add a new layer and use the rectangular marquee tool to select the area for the slider.

Set the foreground color to #98cbfe and the background color to #1e61a4. Select the gradient tool and choose the radial gradient and choose the gradient that fades from the foreground color to the background color.

With the gradient tool active and the slider area selected, click at the top left corner of the selected area, hold down the mouse and drag to the bottom right corner and release the mouse.

And this is how it should look.

Add a new layer and use the pencil tool to add borders to the blue part of the slider area. #2a6ebb for the bottom and the right, and #68ace5 for the top and left.

Add a text box and enter a headline for the service that you are offering. I am using 24 pt italic Georgia in #efefef and applying a drop shadow with 55% opacity, and size and distance of 1.

Then add another text box with some additional copy. I’m using 14 pt Arial in #052648 for this text and centering it.

Now, below this text we will be using three columns so you can set vertical guides to control the edges of the columns. The vertical guides can be set at 500, 700, 725, 925, 950, and 1150 pixels. A horizontal guide can be set at 245 pixels

We’ll be using icons from the Function free icon set (LINK), so you can download that set if you don’t already have it. In this section of the design we will be using three icons: the pie chart, the magnifying glass, and the wrench. Open each of those icons and re-size them to 30 pixels by 30 pixels.

Paste the pie chart icon into the left column at the top. Then paste the magnifying glass in the middle column and the wrench in the right column.

Using 14 pt Georgia in #efefef, add text next to each icon. Set a drop shadow with 55% opacity and a distance and size of 1.

Next, add additional text to each column using 14 pt Arial, #052648. Use the guides to line up the text boxes.

Here is what we have at this point.

Step 4: The Content Area

Below the slider area we will be adding three columns of text. You can clear any guides that you are currently using (View – Clear Guides). Set new vertical guides at 220, 520, 550, 850, 880 and 1180 pixels, and a horizontal guide at 418 pixels (that is 40 pixels below the bottom of the slider).

In the content area we will be using three more icons from the Function icon set: the news icon, the mail icon, and the Twitter icon. Open each icon and increase the view to about 600%. Crop the icons so any of the extra height above and below the icon is removed.

Now, resize all three icons so that they have a height of 30 pixels. Paste the icons in each column – news on the left, mail in the center, and Twitter on the right.

Then add headers to each column with 18 pt Georgia, #184e84 in all caps.

In the left column we will add some filler text for a sample news item in 14 pt Arial, #191919 with a link in #184e84.

In the center column we’ll add some filler text, a company address and phone number, and a link to the contact page.

In the right column we’ll add filler text for 3 recent tweets.

Below the recent tweets we’ll add a “follow us” button that will link to the company’s Twitter profile. Add a new layer and use the rectangular marquee tool to select and area for the button. Use the paint bucket tool to fill it with #184e84 and use the pencil tool to give it a one-pixel border in #002c5f.

Add text to the button in 14 pt Arial, #efefef.

Step 5: The Footer

The last part of the design that needs to be completed is the footer.

Add a new layer and set the foreground color to #184e84. Leave 40 pixels of space below the end of the text and use the rectangular marquee tool to select the area for the footer. Then use the paint bucket tool to fill the selection.

Next, use the pencil tool to add a one-pixel border in #002c5f to the top of the footer. The image below is shown at 600%.

Using 14 pt Arial in #efefef add a copyright and links to the footer, and we’re done. Here is a look at what we have just designed.

You can download the PSD file here (702 KB zip file).

For more Photoshop layout tutorials see:

Looking to Hire a Designer or Developer?