In this tutorial, we’ll make a creative blog layout using mostly simple shapes, a few brush techniques, some images, and a dose of Photoshop ingenuity. Creating web design layouts is easier than you may think. You can learn to build attractive designs rapidly. Creating this design will take less than two hours and you’ll learn some professional tips along the way. Let’s get started!

Final Image Preview

Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below. The final image is below or you can view a full size image here.

Tutorial Details

• Program: Adobe Photoshop CS4
• Difficulty: Intermediate
• Estimated Completion Time: 1.5 hours

Resources

To complete this tutorial you need to download the 960 Grid System. Now let’s begin.

Step 1

Open the “960_grid_12_col.psd” template in Photoshop. It will look like the image shown below. The Grid System is useful because it allows you to align the layout quickly.

Step 2

Select the background layer and press Command + J. This is the shortcut to duplicate a layer. Using shortcuts will speed up your design process. For this new layer we’ll add a nice gradient color. Now go to Layer > Layer Style > Gradient Overlay and use the following settings.

Step 3

Now hide the Grid because to see the design better. Keep your grid visible because you can align the shape better. Select the Rounded Rectangle Tool, and create a shape on top of the layout.

Step 4

For this navigation bar add the following layer styles.

Step 5

Using the same tool (Rounded Rectangle Tool) create another shape and fill it with the color: #001424.

Step 6

Add the following layer style for this shape.

Step 7

Create another shape with the Rounded Rectangle Tool using white for the color.

Step 8

Also for this shape add some simple layer styles and change the Fill value to 10%.

Below is the result so far.

Step 9

Over this last shape place an image. I’ve use some images from some tutorials I’ve made for Grafpedia, which serve as good image examples for this design. You should use your own images though of course.

Step 10

Now you need to load the selection for this image. To load the selection, select the layer in your layer palette and then go to Select > Load selection. You will see a selection around the image like in the following image.

Step 11

Create a new layer on top of all layers by using this shortcut: Command + Shift + Alt + N. Select the Brush Tool, and choose a smooth round brush. Over the new layer draw a horizontal line. Hold down the Shift key when you make the drawing. In this way the drawing will be perfect horizontally.

Step 12

Press Command + D to deselect. Now use the Rounded Rectangle Tool to create another shape with the color #4b6e82.

Step 13

For both shapes add the following layer styles.

Step 14

Grab the Ellipse Tool and create a shape right under the sidebar shape.

Step 15

Go to Filter > Blur > Gaussian Blur and use the following settings. Photoshop will ask you if you want to Rasterize the shape, go ahead and press OK.

Step 16

As you can see from the previous step, we’ve created a shadow there. Now let’s accentuate this shadow by adding some lights. Select the Line tool, and set the weight of the line to 1 pixel and then create a vertical line as shown.

Step 17

Right-click on the layer and choose Rasterize layer.

Step 18

Select the Eraser Tool, and choose a smooth, round brush at around 100px. Use it to Delete the top part and the bottom part of the line.

Step 19

With the same technique create another line on top of the sidebar.

Step 20

Right under this white line create another one that is black.

Continue Learning…

TheCorporation is a sleek and professional theme for business sites. Grab your visitor’s attention immediately with the prominent and flashy jQuery slider, and let them know who you are via the simple page-based homepage design. I have received countless requests for such a “non-niche” and  ”businessy” design over the last few months, so I hope that this helps to satisfy the needs of those members. For more info be sure to check out the Live Demo as well as the Features Page.

The Corporation Features

Powered by ePanel, TheCorporation comes with all of the great features you have become accustomed to here at EelegantThemes. Change  color schemes, post layouts, manage your navigation, optimize your blog for SEO and more with the click of a button.

1. Optional Blog-style Structure – TheCorporation is a completely page-based design, but that doesn’t mean you have to use it that way.  You can switch to “Blogstyle” mode at any time, which converts the page-based homepage into a post-based blog. Furthermore, you can choose to populate the Featured Slider with posts instead of pages. Even though this theme was made with a specific audience in mind, there is nothing stopping bloggers who just like the design from using it.

2. Six  Unique Color Schemes – TheCorporation comes with 2 styles, each with 3 color schemes, for a total of six different variations to choose from. The standard skin comes in three colors, including Blue, Green and Purple.

For those looking for a something a bit more understated, the theme also comes with a “refined” skin. This skin include 3 colors, including Red, Blue and Silver.

Click here to Download

There are many like it, but this one is mine.

I have a “blank” WordPress theme for myself, because I make a lot of WordPress themes. Starting from Kubrick, or any other pre-made theme, would be absurd. There is to much stuff there that would to be stripped out or fought against to be useful. So, I have my own. It’s been in a folder called BLANK-theme on my computer for a while, so I’m going to call it BLANK. And now I’m making it available for you. Read on to find out the scoop on it and you can decide if it would be of any use to you.

What is BLANK?

It is a WordPress theme with all the functionality of a typical WordPress theme but almost none of the styling. The idea is that when starting a new theme, it is far easier to use this as a base then a theme that is already finished and styled.

What are some of it’s “features”?

• Things are as semantically marked up as can be for a starter theme.
• It’s XHTML 1.0 STRICT and validates. Maybe it will go HTML5 soon. We’re at that point where there isn’t a whole ton of advantages to going to HTML5 yet, but there aren’t many downsides either and it’s definitely the future.
• The sidebar is widget-ready.
• Page titles are optimized for best SEO and readability/usability.
• Functions.php file does a number of things: Sets up RSS <link>’s in the head automatically, loads jQuery, removes the weird header links like rsd_link, wlw manifest, and generator info that I’ve never once needed, and registers the sidebar widget area.
• Has some starter CSS ready to go, more about that below.

Uses includes for some key things, like under-title meta data and forward/back navigation, that are very common places for redundant code in themes.

About the CSS

As you can see from the screenshot above, the CSS is pretty baron, but not entirely! Here are some things the CSS is set up for:

• Uses a basic star-selector reset.
• Includes a .group selector for the new clearfix
• Has basic toolbox and WordPress-standard CSS classes, including .screen-reader-text for hiding things.
• Standard typography-related sectors are there but generally without any attributes.
• CSS for threaded comments is in there, but light on actual styling.
• Both screen and print styles included in single stylesheet. Print styles optimized for generic nice printing.

Demo and Download

If you want to take a peak at it live, you can view it in our Theme Playground. You can also download it from there, or directly right here.