How to Create a Wine Design Blog Layout in Photoshop

On 28 Aug, 2012 By With 6 Comments

Working with different Client can get your creativity challenged, as I work more with with them I gain a lot of experience and different methods in terms of layout and design. Last week one of my client asked me to design a Wine Design Blog Website that has several features included, I did some research first here and there and sent the mock up to the Client. Overall they were happy, and it’s a good business.

Since I always share the things that I learned from various design projects, the tutorial for today will be a Wine Blog Layout in Photoshop. This one is really simple and easy to make, the main focus here is the look and feel of the site for their products.

You can download the PSD at the bottom of this tutorial!

Below is our Final Product

sanjaykhemlani11 How to Create a Wine Design Blog Layout in Photoshop

Before we start, there are couple of things we need to download;

Let’s Begin!

1 canvas How to Create a Wine Design Blog Layout in Photoshop

 

Open your Photoshop and set the width to 980px & height 1000px, fill in the layer with #281a10.

2 layer mask1 How to Create a Wine Design Blog Layout in Photoshop

Drag the wood texture that we download from the top of this tutorial, and click on layer mask.

3 bg11 How to Create a Wine Design Blog Layout in Photoshop

Select the Gradient Tool (G) and drag it in the direction of the arrows, make sure that the bottom wood is not visible

4 header bg1 How to Create a Wine Design Blog Layout in Photoshop

Grab your Marquee Tool (M) and select the top area, fill it with #000000 and Opacity 23%.

5 header line1 How to Create a Wine Design Blog Layout in Photoshop

Next is Single Row Marquee Tool (M) and create a line just below the header layer we just created, use brush to fill it with #000000 Opacity 51%.

6 header complete1 How to Create a Wine Design Blog Layout in Photoshop

We now have this on our header.

7 logo text1 How to Create a Wine Design Blog Layout in Photoshop

For the logo we use Lucida Fax Regular 29pt #ffffff.

8 logo text dropshadow1 How to Create a Wine Design Blog Layout in Photoshop

For the logo text drop shadow, set the foreground color to #000000 and the rest are defaults.

9 logo text desc1 How to Create a Wine Design Blog Layout in Photoshop

We also added a description, Font was Georgia Italic 14pt.

10 logo text desc dropshadow1 How to Create a Wine Design Blog Layout in Photoshop

Description drop shadow, foreground is #000000 distance and size is 1px.

11 logo vectors1 How to Create a Wine Design Blog Layout in Photoshop

Now we added those vectors, just do a Wand Tool (W) to delete the white background and resize them to right size for the logo.

12 logo shadow1 How to Create a Wine Design Blog Layout in Photoshop

Next is select Elliptical Marquee Tool (M) and draw a circle like shape at the bottom, and fill it with #000000. Go to Filter > Blur > Gaussian Blur and set it to 2.8%

13 logo complete1 How to Create a Wine Design Blog Layout in Photoshop

Here is the complete set of our logo

14 header complete1 How to Create a Wine Design Blog Layout in Photoshop

We also added a navigation text on the right, pretty straight forward so I didn’t have to explain it. Font used was Arial Bold 15pt.

15 slide bg1 How to Create a Wine Design Blog Layout in Photoshop

Next is create a new layer (CTRL + N) and select your Marquee Tool (M), fill it with #dfdede

16 slide inner bogy1 How to Create a Wine Design Blog Layout in Photoshop

Create a new layer and select the inside of the first layer, fill it with #ffffff. Give a 5px margin for the inner layer

17 clipping mask1 How to Create a Wine Design Blog Layout in Photoshop

Drag the wine wallpaper on top of the inner slide layer and right click > select create clipping mask.

18 content post1 How to Create a Wine Design Blog Layout in Photoshop

Now for the content post on the mid bottom part, grab Marquee Tool (M) and set the Fill to 13% (Under Opacity)

19 content post stroke1 How to Create a Wine Design Blog Layout in Photoshop

For stroke, foreground color is #FFFFFF and size is 1px

20 content post complete1 How to Create a Wine Design Blog Layout in Photoshop

Next is I just grab some grape images and set the size for it, text used was; for the title Georgia 20pt Italic and for the content Arial Regular 12pt.

21 content full1 How to Create a Wine Design Blog Layout in Photoshop

After were done with the first one, we can duplicate it and do the rest of for the page. It’s recommended that you group your layers, for this one we create a group (CTRL+G) called content-post.

22 sidebar bg1 How to Create a Wine Design Blog Layout in Photoshop

For the sidebar, we will do the same for content background. Create a new layer (CTRL + SHIFT+N) and Marquee Tool (M), fill it with #ffffff. Now copy the layer style of the content layer by right click > Copy Layer Style and right click > Paste Layer Style on the sidebar layer.

23 sidebar tweets icon1 How to Create a Wine Design Blog Layout in Photoshop

We added a couple of text and icon, for the title we use Georgia Italic 20pt and for the tweets Arial Regular 12pt. We also placed our twitter bird icon from iconarchive.

24 sidebar tweets1 How to Create a Wine Design Blog Layout in Photoshop

Next is to duplicate the tweets and line them up. Make sure you group them in a folder so your layer palette are clean.

25 footer bg1 How to Create a Wine Design Blog Layout in Photoshop

For the footer, create a new layer (CTRL+SHIFT+N) and grab Marquee Tool (M) fill it with #1F140C.

26 sidebar line1 How to Create a Wine Design Blog Layout in Photoshop

Just like in the header section, we will also add a line on top of our footer. Select Single Row Marquee Tool (M) and use a brush to fill it, foreground color is #000000

27 footer text1 How to Create a Wine Design Blog Layout in Photoshop

For the logo text, we used the same font Lucida Fax 20pt #FFFFFF

28 footer social1 How to Create a Wine Design Blog Layout in Photoshop

For the social media icons we selected a few of the popular ones and line them up.

sanjaykhemlani11 How to Create a Wine Design Blog Layout in Photoshop

And we are done!

I hope you’ll learn something here as I did working on a different niche, it’s amazing how things differ in terms of design according to different niche, business.

If there’s something I left out, or you want to make this better just hit me up on the comments below.

6 Responses to “How to Create a Wine Design Blog Layout in Photoshop”