web design

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.

Step 21

In the middle of the layout create another shape with the Rounded Rectangle Tool.

Step 22

Create some shapes with the Rectangle Tool. Over these shapes we’ll add some images later.

Step 23

Add the same layer styles for all these three shapes.

Step 24

Now it’s time to add the images over these white shapes. Also add some text with Horizontal Type Tool on the right side.

Step 25

Create a dashed line between the posts with the Horizontal Type Tool.

Step 26

Create another three shapes and place them under the Post Metadata text.

Step 27

Above the sidebar create a search box using the Rounded Rectangle Tool. In the same time you can see that I’ve placed some text over the navigation bar too.

Step 28

Please add the following layer styles for this search box.

Step 29

Now use the Rounded Rectangle Tool to create another shape. Place this shape over the previous shape. Also, add an icon on the right side.

Step 30

Right above the slide show create another white shape.

Step 31

Add the following layer styles for this shape.

Step 32

Hold down the Command Key and with the Pen tool selected press on the edge of the shape twice. The anchor point will become active and we’ll be able to modify the look of the shape.

Step 33

With the Command key still pressed select the following anchor point.

Step 34

Hold down the Shift key and press once on your Down arrow key from your keyboard. The anchor point will move down and you will have the following result.

Step 35

Use the Ellipse Tool to create a circle.

Step 36

Right-click on the layer and choose Rasterize Layer. With the Rectangular Marquee Tool make a selection like that shown below.

Step 37

Be sure you have the layer with this small circle selected and then press the Delete key. Drag this layer above the background layer in your layer palette. This is my result so far.

Step 38

Now we’ll add two buttons to allow the sites users to change the slide show image. You will need to use the Rounded Rectangle Tool to create the shape and then you can use the Custom Shape Tool to add the arrows.

Step 39

Over the sidebar create some white shapes as shown below.

Step 40

For all these white shapes please add the same layer styles.

Step 41

Add some banners in the sidebar. Also, add some social bookmarking icons on top of the site design. There are numerous free icons available across the web to choose from.

Step 42

Now add some text with the Horizontal Type Tool on the bottom of the sidebar. Also, add minus signs between the text using the Horizontal Type Tool to create dashed horizontal rules.

Step 43

Let’s add other details on the navigation bar. Use the Line Tool to create two small lines. Zoom into this image so you can see better what you’re doing.

Step 44

Select both layers inside your layer palette. To select both layers you need to hold down the Command key when selecting both layers. After you have the lines selected press Command + E to merge the layers into a single one. Select the Eraser Tool and use it to delete the top part and the bottom part of the lines. Please note that you need a soft, round brush with a size of 20 pixels.

Step 45

Change the blending mode for this layer to Soft Light. Duplicate it a few times and place the line between the other text buttons.

Step 46

Now create the text for this Wordpress layout’s logo at a size that looks good to you.

Step 47

Add the following layer styles for this text logo.

Step 48

Right above the “background” layer create a new layer (Command + Shift + Alt + N). With the Brush Tool make a highlight mark there with a soft, round brush as shown.

Step 49

Change the blending mode for this layer to Soft Light.

Conclusion

The design is completed! I hope you enjoyed creating! The final image is below or you can view a full size image here.

Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.

I’ve put together a wallpaper design free for all to download free. It illustrates various environments blended together in inside the 3D text “Actions,” and serves to remind us that it’s time to start Changing our Actions to avoid continued climate and environmental issues our world faces. This download is part of Blog Action Day, which this year is focused on “Climate Change.” Learn more at the jump, and download this wallpaper!

Blog Action Day 2009

This wallpaper design is part of Blog Action Day 2009, a worldwide initiative started by Envato founders Collis and Cyan Ta’eed, now being run by Change.org. Blog Action Day exists to change the conversation on the web for one day by uniting thousands of bloggers around one important issue – this year, Climate Change. It’s not too late to register your blog and participate.

Free Wallpaper from Alex Beltechi

I’ve created an organic wallpaper design for you to download free. It illustrates the text “Changing Actions” by embedding various climate images inside the 3D text. Blending various climate images and related animals inside the word “Actions” shows how we need to start changing our actions now to preserve our environment and avoid continued global climate problems. You can see more of my work in my Behance Portfolio.

Download this Free Wallpaper

Get your downloads now!

• 1024×768
• 1280×800
• 1280×1024
• 1440×900
• 1680×1050
• 1920×1200
• iPhone

Conceptual Development of this Design

Creating this typographic illustration for Blog Action Day has been a very exciting project. The words I use in this illustrations are mere excuses for practice most of the time, so it was a relief to have a well defined topic and to be a part of something so important.

The demand was for a positive and inspiring message, and after some art direction from Sean Hodge, we settled on the words “Changing Actions.” I intended to not only show a rich and diverse natural environment, but also a different kinds of impact that man can have on the world. Instead of destruction and damage, the focus is on preservation and protection.

The way that this concept took form was by placing all the nature elements inside a clean and simple typographic layout. The letters became a haven for several ecosystems, which I blended seamlessly throughout the word “Actions.” After creating the text in Cinema 4D, I scoured the web for nature stock photography and began to slice up the images in place. Throughout the process, I used a pen tablet to modify, recreate, and draw elements in place.

I hope this message finds its way to your desktop, and drives you take action!

Check out a section of detail in this design below (100% zoom).

Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.

We have another Psd Plus tutorial exclusively available to Plus members today. If you want to take your Photoshop, Illustrator, and InDesign integration skills to the next level, then we have an exciting promotional mailer for you. It’s also focused on making a creative print project come to life on a budget. Learn more at the jump!

This Plus Tutorial is Filled with Creative Tips

Working within a limited budget is a discipline that every designer must master – especially in the current economic climate. Knowing how to squeeze every last drop from a tight budget and still produce something eye catching requires some understanding of different printing techniques.

In this tutorial, we’ll forget about expensive four-color printing and limit ourselves to just one spot color – black! Working in black-and-white is more challenging and also imposes limits on the design process – done right, its simplicity and stark contrast will capture and engage the viewer.

As well as rediscovering the beauty of monochrome, you’ll also add a clear, gloss spot UV varnish to selective areas; this will have the effect of highlighting and drawing attention to parts of the design when the printed piece is moved under different light conditions. So, as a perfect example to showcase these techniques, I briefed myself to design an A5, double-sided, self-promotional mailer.

As far a techniques go, you’ll learn how to use an additional Alpha channel to create the spot varnish artwork; then create your own geometric pattern library with Illustrator. Next we’ll show you how to bring everything together with InDesign. Finally, you’ll get to grips with preflighting your artwork with InDesign and Acrobat Professional – ensuring it’s error-free and printer-friendly.

Plus members can Log in and Download! If you’re not a member, you can of course join today! Below is the final image we’ll be creating in this tutorial.

Professional and Detailed Instructions Inside

Plus members can Log in and Download! Otherwise, Join Now! Below are some sample images from this tutorial.

PSD Plus Membership

As you know, we run a premium membership system here called ‘Plus’ that costs $9 a month (or $22 for 3 months!) which gives members access to the Source files for tutorials as well as periodic extra tutorials, like this one! You’ll also get access to Net Plus and Vector Plus, too. If you’re a Plus member, you can log in and download the tutorial. If you’re not a member, you can of course join today!

Also, don’t forget to subscribe to the Psdtuts+ RSS Feed to stay up to date with the latest Photoshop tutorials and articles.