How to make a blogger template with photoshop

Updated April 17, 2017

Blogger provides a set number of default templates with which to build your blog. However, you can personalise your blog by modifying the pre-existing templates with your own header, sidebar images and footers. This graphics template is created in Photoshop and then uploaded into your Blogger template.

Open a new document in Photoshop with the following Blogger blog dimensions: 1440 pixels wide, 720 pixels high and the resolution of 72 pixels per inch. In "Background Contents," select "Transparent." This will create a three-column Blogger template.

Create a background for the entire Blogger template. Double-click on the "Foreground Color" box in Photoshop. In the "Color Picker" dialogue box, choose your background colour. Then select the "Paint Bucket" tool in the "Tool Panel" and fill your document with the colour.

Add sidebar guidelines to your template for the sidebar images. Sidebar images are going to be 121 pixels wide. To make it easier to line up the images, you can add temporary guidelines. Click on "View" in the "File" menu and check "Rulers" to show ruled lines. Click on "View" again and "New Guide" to choose the orientation and position. Place horizontal guides at 1.15 inches and 5.15 inches for two rectangular images. Place vertical guides at 2.5 inches and 17.5 inches.

Add images to each side of the template. Select images based on the theme of the blog. Find the images you want to use and open them in Photoshop. Use the "Rectangular Marquee" tool to draw a square or rectangle around the portion of the image you want to use. Hold the "Shift" key if you want a square. Copy the image portion, open a new document in Photoshop, and paste the image into it.

Change the image size. Click on "Images" and "Image Size" to open the dialogue box, select "Constrain Proportions" and enter the width as 121 pixels. Change the height to 121 pixels for a square or 200 pixels for a rectangle. Click "OK."

Insert the modified sidebar images into your template. Select the image, click on the template and press "Ctrl" + "V" to paste the image. Photoshop creates a new layer for the image. Position your image within the guidelines. Adjust the guidelines as needed until the images line up. Repeat until all images have been inserted into the template. Click "View" and "Clear Guides" to get rid of the guidelines.

Add a sidebar background colour to make your sidebars stand out from the rest of the blog. In the "Layers" panel, click on the background layer. Add a new layer and select it. Use the "Rectangular Marquee" tool to draw a large rectangle encompassing all the left-hand sidebar images. Center the rectangle around the images. Click on the "Paint Bucket" tool in the "Tool" menu and colour the rectangle whatever colour you want. Right-click on the rectangle layer and choose "Duplicate Layer." Position the rectangle behind the images with the "Move" tool. Your sidebars are now done.

Insert a modified header image into your template. The header pixel dimensions are 700 pixels wide and 105 pixels high. Use the "Rectangular Marquee" tool to select a portion of the image you want to show and click on "Fixed Size" to set the size. Copy and paste the image into the template into the header position of your template. Now your template is finished.


Don't forget to save your work often.


Do not use copyrighted images for your sidebars or header.

Things You'll Need

  • Adobe Photoshop
  • Images for blog sidebars
  • Image for blog header
Cite this Article A tool to create a citation to reference this article Cite this Article

About the Author

Meg North has written professionally since 2008 as an online copywriter for the Sturbridge Yankee Workshop. She also published a short story in "The Maine Scholar." North has a Bachelor of Arts in media writing from the University of Southern Maine.