How to create a blog mockup in photoshop, steps 11-20

Yesterday, I covered the first 10 steps in creating a blog mockup in photoshop, today I will be wrapping it up with steps 11-20. When we left off, we were had just finished the header and were ready to move on. If you didn’t do yesterday’s steps, do so now and then come back. If you are ready to move forward, let’s move onto the next steps.

Step 11: Open the document you saved yesterday. Starting today, your design should have a completed header and space for the navigation, the content, the sidebar and the footer, just waiting for design. The next piece that we are going to work on is determining the colors that we want for the rest of the parts of the site. Remember, this is just a basic design to help you to get an idea of your site, so feel free to have fun and try out a few things. To work with a layer, you must select it in the layer panel first.

Step 12: Changing colors to the pieces. When you created this document, the background was automatically created in white. If you want another color, you simply need to create a new rectangle the entire size of the mockup. Once it has been created, make sure to drag it behind all other layers. Then, double click on the layer to open the color panel and change it to whatever color you would like the background to be.  You will do this same step (double clicking on the layer to open the color panel) for each of the piece that you want to change. For mine, I want the background to be the color of the edges of my header, because I plan on using gradients and effects so that it blends into the background and looks like melted gold. I want the content areas to blend into the background as they reach the bottom and want the navigation and footer areas to look like gold bars. While I could walk you through how I created this look, I’d be giving away all my secrets…and well, that’s just not happening . I will leave you with a couple tips though:

• When you pick colors, choose colors that work well together and are easy on the eyes.
• Try, try and try again. Testing tons of colors and how they look together is the only way to really learn what you want and looks well together
• There is no right or wrong. Love lime green and tangerine orange? Who says they can’t work together!

After I made my tweaks, the colors now look like this:

Step 13: Adding social media buttons: I like working on the sidebar before I work on any other area as it has the most graphics and so it can be overwhelming at first. To start, I recommend looking for some social media icons that you love. You will need (at a minimum): an rss button, an envelope, a twitter button, and a facebook button. When I am looking for great images, I use Smashing Magazine. Their freebies collection has tons of great images that you can work with and the downloads are always safe. When you pick your social media icons, make sure that they fit with the theme you are creating. You will be adding text next to the images, so they can just be a symbol. Once you have selected them, download and save the images. For this design, I am sticking with the metallic look and have chosen symbols that fit with that look. To place the social media icons, make sure you have selected your sidebar in the layers panel. This will make sure that they are placed above this. Then, click on the arrow at the very top of the left bar. This will make it easier to work with the pieces, and must be selected to move them later. When you are ready, go up to ‘file’ and select ‘place’, just like you did with the header image. But, this time, just click the check mark to okay the image, do not re-size anything yet. Place all 4 images on the page and approve them all. They should be too large, it is okay. Once they are all on the page, they should have placed one on top of the other. If they didn’t, and you need to align them, click on the top one in the layers panel, hold down shift, and click on the bottom one in the layers panel. This will select them all. Then in the top navigation, use the alignment tools. Now that you have them all aligned, we are going to size them as a group. If you haven’t yet, select all of them in the layers panel by clicking on the top one, holding shift and clicking on the bottom one. Now, make sure that the arrow tool (top on the left bar) is selected and you will see the dotted line around them with squares at the corners. Click on the bottom right corner, hold down shift, and then drag to make them smaller. Once you have them the size that you want, click the check to approve that size, and then move them over to the top of the sidebar. Once there, unselect the rss button from the layer pannels. Drag the remaining three down. Then, unselect the email button and drag the remaining two down. Finally, unselect the facebook button and drag it below the twitter button. You will have something that looks like this:

Step 14: Adding text to the sidebar. The sidebar needs to have text, not only to explain what these buttons are but you may want categories, archives, or other buttons. Because this is just a simple mockup to show a designer, things like categories and archives don’t need to be fully detailed. We are going to add text to the social buttons and then placeholder text f or the rest of the items that you want on the sidebar. First, it will help if you zoom into 100% and focus on just the sidebar. Click on the magnifying glass on the left side and then in the top panel, click ‘actual pixels. Use the scroll bars to center the sidebar in your window. To add text next to a social button, make sure you click on the button you want to be working with in the layers panel. This will make sure that the text is in the right order. Then, click on the “T” in the left panel to select text and draw a text box next to your symbol. It will create a dotted box for you to add text into. Before you start typing, make sure to change the font size and color in the top navigation. It will still be set to the same size you had in your header. I suggest leaving the font type the same, to create a unique look. If while you are typing, you see the box and the cursor moving, but no text, make sure that the text layer placed above your sidebar. If it did not, select the text layer in the layers panel and drag it above the sidebar layer. If you need to get back into the text box to edit it, make sure that the “T” is selected on the left panel, and that you have selected the text layer in the layers panel and then simply click on one of the letters. It will show the edit box. Repeat the steps for creating a text box next to each of the symbols and adding text. Make sure you click the check box each time to approve the text and then move the box to align with the symbol. Also, make sure to keep the font size and type consistent for all symbols. Once you have added the text for the symbols, add a large text box below the bottom symbol. In this box, add the names of anything else that you want to go on the sidebar (remember, this should all be in the word document you created yesterday). Your finished sidebar should look something like this:

Step 15: Navigation bar: Your navigation bar is where the pages for your blog will go. These are the pages that we wrote down yesterday. For your navigation bar, I recommend using a text that is easy to read and will match the content area. A couple good fonts to consider are Arial, Century Gothic, Georgia and Myriad Pro. I am going to be working with Century Gothic for the content on this site. To add the navigation text, select the navigation bar in the layer panel so that it will place the text layer above this. Then, click on “T” on the left side and drag out a text box the same size as the navigation bar (zooming to 100% and focusing on the nav bar will be helpful for this step). Select the font type, color and size in the upper panel. Type the names of your pages, just adding one space between each name. Then, select all the text (the same way you would in any document, by dragging over all of it) and click the center alignment in the upper panel. Now, click between each page title and add 2 more spaces. This will give you a total of 3 spaces between each page. Adjust the size of your font to look right on the navigation bar. In some case, you may decide to make the navigation bar smaller or larger. In this case, my navigation bar needed to be made smaller. To do this, I simply click on the navigation bar in the layers panel, click on the top arrow on the left panel and dragged the top of the nav bar down until it was the size I wanted and then clicked the check box to approve it. My site now looks like this:

Step 16: Fixing spacing. If you notice, because I made the navigation bar smaller, there is a lot more space between the header and where the navigation bar starts than there was before. I want the spacing fixed. So, I select all layers in the layer panel except for the background and the header. This will allow me to move everything as a group. To do this, click on each layer you want while holding the ctrl key. This allows you to just pick the ones you want, instead of the group. Then, simply use the up arrow on your keyboard to push it up to where you want it to be. If you just want to move certain pieces up, you can just select those pieces and move them. Once you have the spacing right, we can move onto adding the styling for the blog posts themselves.

Step 17: The blog posts. This is the largest amount of content on your site – this is where all the text will be and where you will entertain and share with your readers.We are going to use one large text box to create just one blog post so that you can choose colors and determine formatting. Then, open a browser. We are going to generate some Lorem Ipsum, or placeholder text, for you to work with. I recommend selecting 3 paragraphs. Once you click generate, select and copy all three paragraphs. Now, go back to photoshop. Create a text box the same width and height as your content area. Select the font color, size (recommend 14 pt) and make sure it is the same font type as you used in the navigation. Type in a title for the blog post, the date for the blog post, categories and tags. Then, paste the 3 paragraphs of lorem ipsum that we copied. Click the check box to approve it.
If you notice, the text looks very crowded to the sides of the box and there is no separation in sizes or fonts. Also, the spacing is very small and it is difficult to read. The next step will guide you through fixing all of this

Step 18: Formatting the text. To work with the text again, select the text layer in the layers panel and then click anywhere in the text box. First, drag the left edge of the bounding box in so that the text comes off the left side of the content area, then do the same for the right. We want space on either side of the text. Then we will move on to the text. We are going to start by working with the blog title. Select just the blog title and increase the size of the font to match the same size you used in the navigation bar. Then, click on the A| in the panel just to the left of the layers panel. This is the advanced text editing, and where you can make it bold, underlined, etc. I suggest making it bold and underlining it. Then, decide what color you want. I suggest something different – something that stands out. Then, test out spacing between the lines, moving the blog title away from the rest of the content. I recommend making the blog date, categories and tags smaller and placing a different colored bar behind them to make them standout. I have also increased the line spacing between the content (another trick you can ask a designer about) so that the reading is easier. Once I have worked with the formating, the post now looks like this:

Step 19:The little extras. What makes a good design a great design is the little extras that are involved. For example, having something happen in the navigation bar to show you which page you are on. Having a special look to your comments section rather than just white and black. Using fun images on the sidebar or at the bottom of every post that makes people remember you. All of these things can be added to differentiate you from the rest of the pack. Using the tools that I have taught in this tutorial, add some of  your own special tweaks and make it something that makes you proud. Can’t figure out how to do them? Write notes where you want things to be and save that for the designer.

Step 20: Send this to your graphic designer and at your first meeting, walk through your thought process. The goal will be to just provide them with a clearer understanding of what you are looking for.

Want to see what mine ended up looking like? Check out my added touches…

Click on the image to see the full size version

Related posts:

1. How to create a blog mockup in photoshop, steps 1-10
2. How do I create blog categories?
3. How to start a blog