Blog Photoshop Tutorial

Programs Needed


Tutorial

  1. Open Photoshop.
  2. Go to File > Open and open the image.
  3. Go to Image > Mode > RGB Color.
  4. Choose one of the Templates to use as your blog template.
  5. In Photoshop, go to Image > Resize > Image Size, then UNCHECK the box at the bottom which says "constrain proportions". Type the height and width of the template in the boxes at the top. Make sure that it says Pixels to the right of your height and width.
    Resized image
  6. Right click the template and choose Copy.
  7. In Photoshop, go to Layers > New > Layer. Click OK.
  8. Go to Edit > Paste.
    Blog template
  9. Select the Magic Wand Tool Magic Wand Tool.
  10. Click on the bright green area of the blog, then go to Edit > Delete to get rid of it.
    Background with text area
  11. Go to Selections > Deselect.
  12. In the Layer Palette, you should see Opacity: 100%. Click in the box that says "100%" and type in "70". If you don't like the final result, change the opacity to a higher or lower number until you get an effect you like.
    Background with transparent text area
  13. Select the Magic Wand Tool Magic Wand Tool and click on the light area inside the black border (where your text goes). If there is more than one text area, hold down the Shift key while selecting each area.
  14. Select the Flood Fill Tool Flood Fill Tool and choose a new colour for inside the box. In the Tool Options Palette, UNCHECK the box beside Contiguous. Click inside a white box to fill it in.
  15. Go to Layers > Flatten Image.
  16. Go to Select > Deselect.
  17. Go to File > Save As and save your image.
  18. Upload your blog to the internet. Check out the Uploading Tutorial for help.
  19. Get the code that matches the template you used. Replace URLHERE with your blog's URL.

Blog Example

Smashie smashie!
Smashie smashie!
Smashie smashie!
Smashie smashie!
Smashie smashie!
Smashie smashie!
Smashie smashie!
Smashie smashie!
Smashie smashie!
Smashie smashie!
Smashie smashie!
Smashie smashie!
Smashie smashie!
Smashie smashie!
Smashie smashie!
Smashie smashie!
Smashie smashie!
Smashie smashie!
Smashie smashie!
Smashie smashie!

Blog Example Code

<style type="text/css">
#container { color: black; text-align: left; width: 400px; height: 250px; background-image: url("https://spiders.coolcherrycream.com/images/tutorials/blog/psp-5.gif"); }
#content1 { left: 213px; top: 9px; overflow: auto; }
#box1, #content1 { width: 178px; height: 232px; position: absolute; }
#content1 table { padding: 4px; }
</style>
<div id="container">
<div id="box1"><div id="content1"><table><tr><td>
Smashie smashie!<br>Smashie smashie!<br>Smashie smashie!<br>Smashie smashie!<br>
Smashie smashie!<br>Smashie smashie!<br>Smashie smashie!<br>Smashie smashie!<br>
Smashie smashie!<br>Smashie smashie!<br>Smashie smashie!<br>Smashie smashie!<br>
Smashie smashie!<br>Smashie smashie!<br>Smashie smashie!<br>Smashie smashie!<br>
Smashie smashie!<br>Smashie smashie!<br>Smashie smashie!<br>Smashie smashie!<br>
</td></tr></table></div></div>
</div>