Visit Source.

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.

Visit Source.

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.

Visit Source.

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.

Visit Source.

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.

Visit Source.

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.

Visit Source.

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.

Visit Source.

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.

Visit Source.

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.

Visit Source.

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.

Visit Source.

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.

For more inspiration see:

• Advertising Design Showcase
• 33 Inspirational Illustrations
• Design Inspiration: Watercolors
• Design Inspiration: Nike

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.

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 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:

• 25 Amazing Flash Portfolio Sites
• 25 Examples of Mega Menus in Web Design
• 40 Textured Websites for Design Inspiration

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.

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:

• Design an Online Template Shop Layout Using Photoshop
• Design a Blue Corporate Website in Photoshop
• Design a Clean Portfolio Site in Photoshop
• How to Design a One-Page Portfolio in Photoshop
• Design a Stylish Blue Blog Theme in Photoshop
• Design an E-Commerce Website in Photoshop
• Design a Website for a Non-Profit Organization in Photoshop

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.

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.

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.

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?

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.

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.

For more on typography see:

• Typography Inspiration Showcase
• Top 30 Sources of Typography Inspiration
• Typography Toolbox
• 50+ Fonts for Big, Bold Headlines

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.

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.

Uptown

Cowbra

Typeface

Shy Child

Mary and Andy

Push the Bottle

Cafe Click

Iron Duck

Threesome

Pain

White Crimson

Sushi

Wine Kingdom

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

Twins

DJ Loop

Oil

Shelter

Shift Creative

Look

Killed

Swing Studios

Unpugged

Mr. Cutts

Peace Rebels

Shirt Pepper

Bar Code

For more logo inspiration please see:

• Top 10 Sources of Logo Design Inspiration
• Logo Design Toolbox: 60+ Resources for Logo Design
• Showcase of Logos with Folds
• 35 Green, Leafy Logos

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.

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.

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:

• Design a Blue Corporate Website in Photoshop
• Design a Clean Portfolio Site in Photoshop
• How to Design a One-Page Portfolio in Photoshop
• Design a Stylish Blue Blog Theme in Photoshop
• Design an E-Commerce Website in Photoshop
• Design a Website for a Non-Profit Organization in Photoshop

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.

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.

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?

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.

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.

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:

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?

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.

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.

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

• Robert Murray
• Emily Smith
• Kim
• Laura B
• Brooke Rochon

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.

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.