How to create a blog mockup in photoshop, steps 1-10

Many people I meet with about designing a site have an idea in mind of colors they want, or a layout that they like. The problem is that they have a tough time putting it into words, and I have often heard, “I just wish I could show you a mini mockup”. A lot of times, they will come to our first meeting with a sketch on paper, which is wonderful and I appreciate! But, if you are looking for a little more, or want to test some things out yourself,  try photoshop. Photoshop is what I use when I actually create client mockups, but you can use it too to help you get your ideas down. Adobe offers a free 30 day trial of any of its programs, including photoshop. So, if you are considering doing a blog makeover, I recommend downloading the trial and following this tutorial. The tutorial is going to span over multiple days as it takes a lot of time to really build out a mockup for a site. Today, we are going to cover the first 10 steps, which will lead you through creating the base layout and your header.

Step 1: Open a word document. Write down a list of all the pages you want, the sidebars that you need, the links to social media sites, all the details that need to fit on your main page. This is where the layout for your site starts. If you don’t know what you need, you can’t start the design. Don’t worry about what is going to go on these pages, just make sure to thoroughly think through everything you want on the site.

Step 2: Open photoshop. Under file, select new. There are a lot of size you can choose, but for a website or blog mockup, I recommend setting it to 1024×2000. 1024 is going to be the width of your finished product. This width is most commonly chosen because it is the size that most laptops and small screens use. If you make your site bigger than that, people with smaller screens will not see everything. I set the height at 2000 so that I have room to work with. We can crop it smaller later.

Once you have the sizes right, click okay. It will open a blank screen for you to work with.

Step 3: On the left hand side, select the rectangle tool. It is the 18th button down on the left, below the one that looks like an arrow. This is the tool which will allow you to create many different shapes, but for now, we just want the rectangle. When you click on the button, you will notice in the upper bar that you have a variety of options, including shapes and colors. Make sure to select the rectangle. Then, click on the colored box at the far end. It will open up a color spectrum. Pick your favorite color and click okay.
Your bar should look like this at the top of the screen, where the pink is the color that you have chosen to use.

Step 4: Draw rectangles for your header, your navigation area, your content and your sidebar. There are many ways that you can layout your site, but we are going to start with the most common style, which is a header, then a navigation bar, then the content area and a right aligned sidebar, with the footer at the bottom. Remember to leave space between the areas for the background to shine through.  If you do not want the background color to show through between the content area and the sidebar, we can make that adjustment later. For now, just leave space between all areas.
If you notice, in the layers pannel, you will now see 5 different layers. If you want to make changes to a piece in photoshop, you must first select the layer that you want to work on it in the layers panel by clicking on it. Once you have created all of your layers and you like how the spacing looks we can move onto the next step.

Step 5: Creating your header. Your header can include whatever you want, from the name of your site to pictures and designs. We are going to create a very simple header with just one image and the title of the site. To add an image, go to file and select place. This will open a file browser for you to choose your image. Once you select your image, you have to “okay” it. To do so, in the upper navigation bar, click the check mark. It will then actually place the layer there. Depending on which layer you had selected when you placed your image will determine where it places. If the image is hidden behind another layer, simply select it in the layers panel and drag it up the layers, placing it where you want it to be. In this case, you will want it at the very top. Once you drag it, just let go and it will drop into place.

Step 6: Now that the image is above the header, it will be sitting on top of that layer and will block out part of it. Select the image layer in the layers panel and then click on the arrow at the top of the panel on the left. You will see a dotted outline with boxes at the corner of the images. Place your mouse at the bottom corner. Click on the corner and hold down the shift key. Now drag the corner out until the right side of the image covers the entire header. Once it does, let go of your click, then let go of the shift key. You will again have to confirm the changes by clicking the check box in the upper panel.

The image will now be sitting on top of the header, and behind the rest of the layers. But, we want this image to fit within the header itself so we are going to create a clipping mask. The clipping mask will basically make only the part of the image that fits within the box you have planned for the header show. You can move the image inside of the header, and it will show different parts, but it will only be as wide and as tall as the size of the header.

Step 7: Creating the clipping mask: Once you have moved the image on top of the header layer and have made it large enough to cover the width, you need to select the layer in the layer panel. In the layer panel, right click on the image. It will open a menu of options. Select ‘create a clipping mask’.

Once you select it, it will crop the image to fit within the area you had decided for the header. If you do not like what section of the image is showing, you can click on the image in the layer panel and then use your up and down arrow to move it within the header. This will show different parts of the image as you move it around. Feel free to play, or change the image. If you want to change the image, simply select the one you have now and click delete. Then follow the steps above for adding a new image and resizing it to fit in the header. When you have it where you want it, we will move on to creating the title.

Step 8: Adding the title: Right now, the complete mockup is zoomed at only 25% so that you can see the entire design. Since we are going to work with just the header area, we want to zoom it in. To zoom in, select the magnifying glass on the left panel. It is the bottom tool. Then, click on “actual pixels” in the upper navigation. Use the scroll bars on the right and the bottom so that your header is in the view.

Step 9: Adding text to the header. In the left panel, select the “T” icon for text. Then, drag out a text box on top of the header. Once it is the size of the header, let go and you will have a cursor inside of the text box. Type in the title of your blog or what text you want at the top of your page. Once you have typed it out, select the text (or hit ctrl A). In the upper navigation, you can choose the font, the size and the color of the text. This is all personal preference, but remember, you are viewing this at 100% so whatever size it is on here is what size it will look like live. Once you have selected the size, the font and the color, you will need to click the ‘okay’ check mark again (this is done anytime you change a layer, it commits your changes). If you want to move where the text sits on the header, click on the text layer in the layers panel and then click on the arrow tool on the top of the left panel. Then, use your up/down/left/right arrows on the keyboard to move the title where ever you want it to sit.

Step 10: Making the text look cool. One of the ways to make your title stand out is to give it some effects. There are tons of effects, and it would take years to go through every variation. I suggest that you play with them and figure out what you like the best. To do so, while selected on the text layer, click on “fx” at the bottom of the layer panel and click on “blending options…” to open all of the options for your text. Make sure that the preview box is checked and drag the box so that it shows the full text. To work with a style, click on that style, and then test out the settings. Remember, this is all yours! Play and have fun. Try out different textures, gradients, drop shadows, embossing, etc. Once you have it the way you want, click okay. If you want to make changes later on to the effects, all you have to do is double click on the “fx” that will now be next to that layer.

Wrapping up today, make sure to save this document so that you can keep working where you left off. Tomorrow, I will be covering the next 10 steps, which will walk you through 10 more steps to creating a blog layout.

Related posts:

1. How to create a blog mockup in photoshop, steps 11-20
2. How do I create blog categories?
3. How to piss off your web designer in 5 easy steps