In this tutorial I will be walking you step by step through the photoshop and design techniques used to created a blog theme inspired by Google Music. For this tutorial all you will need is Photoshop, Agenda-Light, Gill Sans MT Light, and a basic Mono icon pack. It should take you roughly 30 – 45 minutes to complete this tutorial, and only requires basic Photoshop knowledge. Let’s get started!

Step 1 – the pattern

To kick things off you’re going to open up Photoshop and create a new document at 1200px by 1050px. Optionally you can apply your 960 grid layering which I highly recommend. Fill in the background layer with a solid light grey color such as #eeeeee. Now if you notice we are trying to mimic the new Google Music layout, which uses a line pattern very frequently. So before we start with the layout we will create the pattern. To create this pattern just create a layer with a 1px by 1px black square, and repeat the square in a diagnal pattern until you get lines that look like the image given when zoomed in. Once you have created the basic pattern you can save it to your pattern set through edit » define pattern.

Step 2 – the header background

For step 2 we will be creating the shapes and backgrounds for our header. To start off you will want to use the pen tool to create a shape similar to the one shone in the image given. If you have difficulty drawing this shape you can always scroll to the bottom of this article, download the .psd, and use the one I created. Once you have created the shape, fill it in with any color, and then apply a slight gradient in the layer styles. Click here for an example gradient.

Now that you’ve created and filled your shape with a slight grey gradient, you will need to throw our line pattern over it. Simply go back into the layer styles, and find your pattern. I overlayed my pattern on top of the shape with an opacity of 8% for a very subtle effect. When all is said and done you should have something that looks like the image given. This will be the main header area that we will implement our logo, search bar, and navigation into.

Orange bar

You now have the main part of your header background complete, but we still need to add both an orange and black underlying bar for contrasting support. Since the shape you created already has the cutout, just create a layer underneath it and use your rectangle tool to define the area underneath. Fill in this area with a nice bright orange color, I used #ff9625. Make sure you choose this color carefully because we will be using it in other aspects of our layout for consistency. You should have something that looks similar to this.

Black bar

The last step in creating our header’s background elements is to add a black bar which will help to create a more balanced color scheme. The process in doing this is the same as our orange bar, only we will be using a gradient as opposed to a solid color. For the gradient you will want to choose two very similar dark grey colors. I used #202020 and #252525. The reasoning for this is that we want to be working within a very short area here as to not attract to much attention and to keep things compact. I made my black bar 30px tall. When you have completed both your underlying orange and black bars you will have completed the background for your header. You should have something similar to the image given.

Step 3 – the logo, searchbar, and nav

In step 3 you will be creating your logo, slogan, search bar, navigation, and various other links and options in the header area we created in step 2. To start with you will want to create your logo. Notice that we left a conveniently taller area in the grey background for a spot to put a logo. Before you do anything you want to make sure you’ve got enough room to put the title of your site there, if you don’t you will need to go back to step 2 to perform some modifications. You will also want to create a very light glow effect where your logo will be. To do this simply create a new layer, take a soft white brush, and paint within the grey area. Then set the layer style to “soft light”, and set the opacity to around 50%. This will add a little bit more emphasis to your logo and help to brighten it up. For the logo itself you are going to use the same orange color you used in your orange bar, which for me was #ff9625. I also used the font Agenda-Light which is nice and thin san-serif which adds an aspect of cleanliness to our layout. Underneath the logo I added a slogan in a grey color #808080 that I placed along the contour of the word “blogomatic”. The use of the orange logo and grey slogan underneath mimics the effect of the orange and black bar to add a little more consistency and balance to our layout.

Creating the search will be a very easy task. Simply create a layer for the bar and fill in a rectangle of roughly 200px by 22px with solid white. Then go into the layer styles and create a light grey to white gradient, and a 1px stroke with a light distinguishable grey such as #bbbbbb. On a side note I want to mention that it is always a smart practice to organize various aspects of your layout into “groups”. You will notice this is what I did in the layers palette in the associated image.

Layer Styling examples

• Gradient Overlay
• Stroke

Add some text that says search or “Looking for something?” which I think adds a more personal aspect which I prefer. Notice that I am using a different font here than I had used for the logo. I will now be working in “Gill Sans MT Light” which I feel is a more readable typeface suitable for content. Finally finish off your searchbar with an arrow in the right of the box that a user would click to submit the form. To create this arrow you can use your Custom Shape Tool, which has u as a hotkey. Click here to see the custom shape I used to create the arrow. Finally, just put a box around that arrow with borders that are the same color as the borders of the searchbox itself. Once again I used #bbbbbb for this.

The Nav

Alright now it’s time to create our navigation. Now what I’ve chosen to do is pretty different from the way Google Music does their nav, but I feel that this fits the theme of this layout a little bit better. What I’ve done is very simple. To create the boxes you see in the associated image, just create a new layer and use your rectangular marquee tool to create a box at roughly 60px by 20px. Fill in this rectangle with a solid dark grey color, I used #222222 which fits the colors in the black bar underneath it. I then applied the following layer styles.

Layer Styles

• Outer Glow
• Stroke

After applying these layer styles your box should have a faint outer border. Now take that Gill Sans MT Light font and center your text inside the box. Optionally you can apply a 1px by 1px black drop shadow for effect. The only difference between the active state on the home nav box and the rest of the nav boxes is that the active box is at 100% opacity and the others are at 65% opacity. I spaced each nav box 5px apart from each other.

Black bar links

To wrap up step 3 we are going to place some important links that we want to draw extra attention to in the black bar. To add to they’re style and emphasis you will want to add associated icons. If you havn’t already download that mono icon pack that I linked to in the first paragraph of this tutorial, and decide on which icons you want to use for your links. I created links for a newsletter signup, an rss feed, and a user registration. Implementing these are as simple as filling the icons in with white and adding the associated text to them. Just be sure you are careful with your sizing and spacing here.

Step 4 – the left sidebar

Now that we’ve completed our header, we can move onto the body of our layout. Following suite with Google Music I’ve gone with a nice and spacious left sidebar. We’ll primarily be using this area to highlight featured articles, although in interior pages it would likely host any WordPress widgets you’d use. First you will need to create the title part of this sidebar which is a slanted rectangle with the overlayed pattern we used in our header. You will need to create this part using the pen tool. it should be relatively easy to create but if you have any difficulties you can always scroll to the bottom of this tutorial and download the psd. Once you have created the shape, fill it in with a solid light grey color that is darker than the background, I used #d0d0d0. Lastly apply the pattern to the layer, and add your title in a dark grey color such as #222222.

As for the body, I’ve chosen to make a 305px by 240px white rectangle with a top 1px border of #222222. This follows suite with the way Google Music does their titles, although the slanted rectangle they used would not be light grey and textured but rather a dark solid grey. But hey, we arn’t completely copying them!

It’s time to add some content to this featured articles widget. What I choose to do was use the same orange color from the logo and orange bar, #ff9625, and use it for the featured article’s title, at 18pt. Now if you will notice in the Google Music theme, they don’t just use grey and orange as their color scheme, they also have a light blue color. I’ve decided that this color would work perfectly as the background for the post’s meta information. The color I used for this was #91c7c3. The layer styling to achieve the border is the exact same as the layer styling on the navigation boxes, only we use #ffffff as the color on the stroke as opposed to #eeeeee. Therefore I will not repost the images showing this, just scroll up! Finally add your meta text for the date, the author, and the category in plain white text.

For the placeholder text, you should get in the habit of using Lorem Ipsum, which is essentially latin jibberish with the sole purpose of ensuring that whoever looks at your layout isn’t distracted by the textual content of it. Finally add your right aligned “Continue Reading” link after the dummy text with the same blue color we used for the meta info background – #91c7c3.

For the purpose of balancing the height of the sidebar with the height of the content area I choose to duplicate this widget we just created and rename to something else that would be useful on a blog’s homepage, such as “Upcoming Events”. I spaced the two widgets 20px apart from one another. Underneath these two widgets I put two spots for advertising, optionally you could split these into 4 spots by cutting them in half, but that’s your call! Your sidebar should look similar to the associated image when you are done with this step.

Step 5 – the content area

You are now about to create the content area for your blog, which is arguably the most important part of any web layout. This is especially true for blogs, and I wanted to ensure that there is plenty of legroom for content and media. I made my content area 600px wide, with plenty of spacing from the left sidebar. A smart way to create this content area would be to take one of your widgets, and duplicate it, but widen the white body layer and the black top border to fill out the roughly 600px of space. You will notice that I also put the pagination as the title for the content area. Obviously this would only be on the homepage of this layout, and really it’s up to you whether or not you feel it’s appropriate to put this at the top of the page as opposed to the bottom. Oh and don’t forget to horizontally reverse your slanted rectangular shape you put the title/pagination in.

Here is another reason to just copy the widget and widen it for you content area, because the format is the same… just larger. Seeing how we want a consistent format for our blog excerpts, this makes sense. Although one essential difference is the “Continue Reading” button. I felt that I needed to reintroduce the dark grey #222222 color that we used in the black bar and navigation in the body to add balance. So I copied the homepage active nav button, widened it, and made it our “Continue Reading” button. There’s no reason for it to be any different, consistency is key. I also gave the article a very slight #f5f5f5 solid background, with a 1px white border.

Given that this is a blog layout, we want our homepage to show the most recent 4 or 5 articles. So now copy the article format you just created, and repeat it 4 or 5 times. I would suggest repeating simply to ensure that your content area is of a similar height as your left sidebar. For a nice balanced visual effect I also decided to hide the #f5f5f5 background on the even posts. When you have completed your content area, you should have something that looks like the associated image.

Step 6 – the footer

As with the rest of this layout, the footer is relatively simple. Once again we are going with the same consistent theme of orange on top, and dark grey on the bottom. The orange part on top is the same color we’ve been using (#ff9625), and stands at 3px tall. The dark grey part underneath uses the same #222222 color that we’ve used throughout the theme. Then just center in your footer text (#eeeeee for those who are curious) with the copyright and any other links you want.

The final Step is to create the ever so useful scroll to top button. To do this simply create a new layer and use your rounded rectangle tool to create a 30px by 30px shape with a border radius of 10px. Fill in this shape with the same #222222 and make sure the layer is above the orange top border layer. Finally you will want to use the custom shape tool to create the arrows. I used this shape once again, and rotated it to point upwards. Then I duplicated the arrow, centered it inside the tab we created, and filled it with white.

Conclusion

And there you have it, you have successfully themed your Google Music inspired blog layout! I wanted to create this tutorial because I really like what Google is doing with they’re new updated apps themes, and I felt that Google Music really has something special going for it. Granted I didn’t copy the theme verbatim, I did incorporate many of it’s elements in this layout. Though there is one key difference that I left out and that is the Google Music theme uses alot of images from album colors to draw in your attention. But our layout is a blog and doesn’t have album covers all over the place, but maybe you can improvise. As always thank you for following my tutorial, and be sure to check back for more articles!

Download PSD

About the Author