Author: richardrobbins

This tutorial is the second part of a two-part tutorial on creating a Blogger template. The first tutorial covered how to design a template in Adobe Photoshop. This tutorial covers how to implement your new Blogger template.

Open your template design in Photoshop. Hide the header image by clicking on the eye next to the header image layer in the Layers Panel.

You are left with the background image for your blog. Go to File>Save for Web & Devices. Choose JPEG for the file type and Very High for the quality. Click Save to save this image on your computer.

Now you need to save the header image as its own file. Turn the visibility of this layer back on. Make sure the header layer is selected, draw a rectangular marquee around the header image and press Ctrl+C to copy this image. Open a new document in Photoshop and paste the image in the new document. Save this image for web or device just as you saved the background image.

You will need to find a place to host your images online. I use Photobucket.com because it is free to create an account and upload images. After you have created an account with Photobucket.com select Reduce to: 1 megabyte file size and click Choose files.

You can browse to where your background and header images are saved on your computer. Select these files and click Open to upload them to Photobucket. You will now see these images in your Photobucket photo gallery.

Sign In to your Blogger account and select the blog you would like to change. Select the Layout tab and choose Pick New Template. Select the Minima template and click Save Template.

Now click Edit HTML under the Layout tab. We will be changing some HTML code. If you make a mistake during this process just reselect the Minima template to restore the template to this point. It is a good idea to save changes to your template as you go through these steps. Pull up your blog in another browser and refresh it F5 each time you save your template so you can see the changes you make.

Press Ctrl+F on your keyboard to pull up the Find window. Type the word body and press Enter twice. The second “body” in the document should be the body tag which looks like this:

You will find the address for the background image by hovering over the image in Photobucket. Click in the field next to Direct Link and press Ctrl+C to copy the address. You can then paste the code for the address where it goes in the HTML.

Now add the image for the header in the header-wrapper. Your code should look like this.

In the next step you are going to add backgrounds to the text. Toward the top of the HTML code there is a section called /* Variable definitions. Inside this section is where all the fonts and colors in the blog are controlled. Here is an example of the code you will find:

This code tells you that the Page Background Color is being defined here. This variable may also be used to define other items on the page that are the same color. These will all be shown in the code as $bgcolor. The value is a # followed by a color code. We are going to change the fs to zeros.

You can make additional changes to your blog template if you desire by adjusting the colors in the variable section, or adjusting the HTML code further if you know how. You can find the color for a particular color at the bottom of the Photoshop Color Picker Palette.

In addition to the changes covered in this tutorial, for this template I added padding to the sides of the sidebar and main sections and made additional color changes to the text. This is the final template.

If you are new to screen printing, you may not know where to begin when it comes to getting artwork ready for printing. Separating images into colors is an important step. Luckily Photoshop makes this pretty easy. I am going to show you how in just a few easy steps.

Open your picture in Photoshop. Now select the magic wand tool in the tools panel. Use this tool to select all of one color in the image. If you need to select more than one area, hold the shift key down as you click on the picture. You will see “dancing ants” around the selected areas. If you click on the wrong area, simply press Ctrl+Z to undo the last move, or right click and select Subtract From Selection.

I am going to select the red color first. Then I am going to right click and select Layer via Copy. This will create a new layer with just the red color in it.

If you look at the layers panel now you will see two layers. Unclick the eye icon next to Layer 1 to hide the layer. You should be able to see just the red layer left in the image. I am going to change the name of this layer to Red by double clicking on the name and replacing the text.

If everything looks right, click the space where the eye icon was before to make Layer 1 reappear. Follow the steps of selecting a color and Layering via Copy again until all colors are represented in their own layers. Each time you select a new color for layering, you will need to make sure Layer 1 is active. You can tell because that layer will be highlighted in blue in the layers panel. Layer 1 needs to be active because this is where all the colors reside originally. If a different layer is active then when you try to use the magic wand tool to select a color, it will not work correctly because the color you are selecting is not present in the active layer.

The blue layer is a little more complicated than the other layers. First of all, I need to make sure I don’t forget the areas inside the letters of STONY BROOK. I will zoom in when I select these areas to make sure I don’t miss anything. Also, if I use the magic wand to select TM it will probably not look crisp when screen printed. So I am not going to select this when I layer the rest of the blue. Instead I am going to create a new layer and use the text tool to rewrite TM. I am going to select Arial font and sent the type at 10pt. Write TM in black and move the TM to the correct location on this image. I am using a different color than the TM was originally written in so it is easy to see if the font is the right size, etc. It looks like this font is a perfect match.

I am now going to hide all the layers in the layers panel except the blue layer and the TM layer. Right click in the layers panel and select Merge Visible. TM and the blue color are now together in one layer.

I need to create registration marks now so the layers are easy to line up when screen printing. Use a thin font like Arial and write the + sign in black in three corners of the image. Use a font size that is easy to see but not too thick or it will be hard to line up. The registration marks need to be far enough away from the image that they do not interfere with printing, but still close to the picture. Once you print a few logos you will get a feel for how to create and place these marks. In this example I used a 48pt font.

Now select the blue layer. In the file menu go to Image>Adjustments>Levels. The levels options window will pop up. Under Output Levels: there is a black and white bar with two arrows underneath. Click on the white arrow and drag it all the way to the left end of the bar. This will turn the blue layer black.

Do this with each layer until each layer is black. Now you are ready to print. You will want to print each color layer separately in black with the registration marks on each print. Below are picture of how each printout should look. Good luck printing!

Final Tip: In this example it would actually be a good idea to use the entire logo to print the dark blue layer. This is the layer I would print first when screen printing. If you choose to do this, it will prevent the shirt you are printing on from showing through even if the screens are registered slightly off.

Adobe® Photoshop® CS3 Keyboard Shortcuts

The following keyboard shortcuts are the defaults for Adobe Photoshop CS3 for Microsoft Windows XP. For Mac users, substitute the Command key for Ctrl and the Option key for Alt. This list was obtained by going to Edit->Keyboard Shortcuts, and then clicking on the Summarize… button to save the shortcuts in an html file. Adobe automatically generated shortcut summary file includes all available commands, including those that don’t have shortcuts by default. All commands that don’t have have shortcuts have been removed from this list. Adobe also provides a list of the default keyboard shortcuts from the Help menu.

This tutorial goes through the process of creating a Blogger template. Although these steps are catered towards creating a specific theme, the lessons in this tutorial can be used to create a wide variety of templates. Have fun getting creative with your own blog!

Create a new document in Photoshop using these settings. Width 1440px, Height 720px, Resolution 72 pixels/inch. Start with a transparent background.

Creating an appealing background is key to a great looking blog template. For this template we will use 3 layers for the background. First, select the foreground color by double-clicking on the foreground color box. The Color Picker Pane will pop up allowing you select black. Now select the Paint Bucket Tool located in the Tool Panel and fill your new document with black paint.

Create a new layer by clicking on the second icon from the right in the bottom of the layers panel.

We are going to add a gradient to this layer. Right click on the paint bucket tool in the Tool Panel and switch to the Gradient Tool. In the Gradient Tool Bar select Black, White and Linear Gradient.

Zoom out (Ctrl+-) to 50% and maximize your document. To apply the gradient, click below the image and drag upward beyond the top of the image. Hold the Shift key down as you do this to make the gradient straight.

Now make sure the gradient layer is highlighted and change the opacity to 43%. The highlighted layer will be blue in the layers panel. The Opacity slider is in the top right of the layers panel.

Lowering the opacity of the gradient layer will allow the black layer to show through softening the gradient. Your document should now look like this.

Now we are going to take a picture of a football and use this as a background image. I chose an image for my background that has a large file size. By doing this, I will not have to enlarge the picture causing it to pixelate and can instead maintain the original picture quality. This image is 1800px x 1174px.

Open the image as a new document and extract the football from its background. There are many selection tools that can be used for extracting items. In this case, I used the Magnetic Lasso. This tool works well for this example because there is a big contrast between the football and the background in most of the image. You can find this tool in the Tool Panel by right clicking on the lasso tool.

Click around the football until the football is selected. You can tell the football is selected because it will have alternating black and white dashes around the outside.

Right click on the image and choose Select Inverse. The dashes will now be around the white background.

Press Delete. Only your football should remain. At this point you can touch up the edges if necessary with the eraser or paint tools. Now highlight the football by drawing a Rectangular Marquee around it and copying it Ctrl+C.

Create a new layer in your original document and paste the football in it Ctrl+P. If your image is too big or too small you can transform it by pressing Ctrl+T. Position the football in the middle of the document and change the opacity of this layer to 21%. Your image should now look like this. Your background is complete.

To add the smaller images to this template we need to place Guides on our document. Guides are temporary lines you can use to line objects up in Photoshop. Your document will be more visually appealing if objects on the template are exactly lined up. To add guides we should first make sure rulers are visible across the top and down the side of our document. Go to View in the File menu and make sure there is a check next to Rulers. If rulers are present you can click on the ruler and drag a guide to where you need it to go. If you would like to be more precise about placing your guides go to View>New Guide and specify where you would like the guide to be. If you select View>Snap To>Guides, when you place object close to the guides Photoshop will automatically line the object up with the guide for you. For this example I placed guides horizontally at 1.15in, 3.15in, 5.15in, and 7.15in, and vertically at 2.5in and 17.5in.

Now we are going to add four small images down both sides of our template. Depending on the type of blog you are trying to create, you can use images such as family pictures, product images, etc. Since this is a football blog, I will be using football pictures. I found these images online by doing an image search on Google. Google is a good place to find images, but be careful not to use images that are copyrighted unless you have permission.

For this layout I will need eight pictures. Find the images you want to use and open them in Photoshop. Use the Rectangular Marquee Tool to draw a square around the portion of the image you want to use. Hold the Shift key down as you draw your square to make sure your marquee is a square instead of rectangular.

Press Ctrl+C to copy the selected portion of the image. Open a new document in Photoshop and press Ctrl+V to paste the selected image into the new document. You will notice that when you open a new document in Photoshop after copying an image, Photoshop automatically changes the size of the new document to match the size of the copied material so you don’t have to worry about sizing issues.

Go to Images>Image Size. We want to standardize the size of these images. Make sure Constrain Proportions is selected and enter the width as 121 pixels.

Use the rectangular marquee tool again to select the image. Click on your template and press Ctrl+V to paste your image. Photoshop will automatically put this image into a new layer. Position your image up against the guide lines as shown and repeat this process until all eight images have been added to your document.

Hide the guides when you are done using them. Do this by going to View>Clear Guides. Your document should now look like this.

We are going to frame the images on each side of the template with a black border. To do this we will create a black rectangle behind the images. Since we want the images to be visible on top of the new shape, we need to create a new layer below the image layers. In the Layers Panel, click on the large football background image. Add a new layer and select this new layer. Use the rectangular marquee tool to draw a rectangle. Use the arrow keys on your keyboard to center the rectangle around the images. Select the Paint Bucket Tool from the Tool Menu and fill the area in the marquee with black.

Right click on the layer with the black rectangle in the Layers Panel and choose Duplicate Layer. Use the Move Tool to move the new rectangle behind the second set of images.

The last step for creating our template is to find an image to use as the header background. Again find a large image and use the rectangular marquee tool to select a portion of the image. In the Marquee options menu select Fixed Size next to Style and set the size to Width: 700px, Height: 105px.

Copy the selected image and paste it into the template in the middle towards the top. Your template design is now complete.

Continue with the second portion of this tutorial to learn how to use your new template for a Blogspot.com or Blogger.com blog.