5 Black and White Obsession’s Free Blog Website Photoshop Template + Tutorial

Friday, I showed y’all a grand tour of my website all redesigned (and coded by yours truly) and today, as promised, I’m back with a fully customizable Freebie Blog Website Photoshop Template and tutorial!!!  There are two versions available for download Photoshop PSD and Adobe PDF.

I hope you’re ready for this jelly!
Free Blog Website Photoshop Template + Tutorial | www.blackandwhiteobsession.com


You see back in May, I finally came to the conclusion that I wanted to tackle my own blog re-design. Mainly because I wanted it to truly reflect my personality in ways that only I could achieve. For example, I have a huge love of music, mostly rock, so the randomly placed guitar picks were a happy accident. A happy accident as in the directional arrows somehow became the shape I wanted to sprinkle throughout. Somewhere along the way, the rounded triangle tilted to the side just right and bam, it resembled a guitar pick.
Free Blog Website Photoshop Template + Tutorial | www.blackandwhiteobsession.com

Anyway, following through with the crazy decision going into this I knew there was a way I needed to be super organized and have a place to put things together and really ‘visualize’ the entire site. Nothing like designing a piece, saving it, and then putting it all together realizing it doesn’t flow properly, am-I-right?! So that’s why I’m here today, to provide my template to you so that you have a good foundation to build on.

Photoshop Template Overview

If you look in the Layers Window, you will notice the following folders:
Free Blog Website Photoshop Template + Tutorial | www.blackandwhiteobsession.com


Inspiration (red)
This folder can be used to drag and drop inspirational photos/screenshots or some of your existing site elements.
Free Blog Website Photoshop Template + Tutorial | www.blackandwhiteobsession.com

NOTES: Size, Font & Color Palette (red)
This folder is used to keep track of the basics pieces of your website. Sizing is practical when you’re coding your site particularly when verifying the header you just created fits your site dimensions. Font names are an area to track all the fonts you’ve used on your website. The Sample Blog Design fonts (free download locations below) are pre-filled on the notepad in-case you forget to download them right away. Color Palette is essential to track for color consistency.  I’ve actually memorized black, white, and teal since they were used frequently.

Free Blog Website Photoshop Template + Tutorial | www.blackandwhiteobsession.com
Tip: Not sure of the color code? Double Click the front color box. Move to a specific color (mouse turns into ‘eyedropper tool’) and click. The color code will appear in the bottom of the window next to the # sign.

Free Blog Website Photoshop Template + Tutorial | www.blackandwhiteobsession.com

Blog Design Sample Elements (blue)
This folder contains a ‘premade’ theme which serves as a sample to use when putting together your site. It identifies many critical pieces most blog designs incorporate including truncated posts, post footers, and widgets like: Welcome!, Social Media buttons, labels, favorite posts.

Watermark (gray)
It’s some shameless-self promotion within the template, but also has practicality in case you have questions or really mess up your template and need to download another.

Free Blog Website Photoshop Template + Tutorial | www.blackandwhiteobsession.com
Site Layout: 1 Column Right Sidebar (blue)
This folder contains two Layouts (Medium and Light) with one column sidebar on the right hand side. The Layout’s are used as a guide when placing your elements within each section.

Free Blog Website Photoshop Template + Tutorial | www.blackandwhiteobsession.com
Site Layout: 2 Column Right Sidebar (blue)
This folder contains one Layout (Medium) with a two column sidebar on the right hand side. This layout was not used in Blog Design Sample Elements (blue).

Directions/suggestions:
This is how I would tackle the template:
1.       Download the fonts required for this template (below)
2.       Choose a layout (in blue). Go ahead and think outside the box and change the box dimensions/colors to suit your unique site.  Remember to avoid things like white on white (since it’s really just a guide for all of your elements).
3.       Bring in some inspirational photos you’ve already found or surf around and what you like and don’t like.
4.       Choose a color scheme and fonts for your main elements- header, page text, etc. Remember when you change the font and size within the template; you may have to adjust some of the text to fit the page.
5.       Finish things off with your header, sidebar widgets, and other elements and watch everything come together nicely.

Download
Without further adio:
Free Blog Website Photoshop Template + Tutorial | www.blackandwhiteobsession.com
Download: Photoshop (PSD)
Appreciate the download? Like Black and White Obsession on Facebook to help support future downloads.

This template requires the following fonts to appear correctly which are all free and can be downloaded separately: Minimal, League Script, and Centaur.

If you’re not quite Photoshop savvy, or you like to doodle on good ‘ol fashion paper, maybe you’ll find a PDF/printable version more to your liking:
Free Blog Website Photoshop Template + Tutorial | www.blackandwhiteobsession.com
Download: Adobe (PDF)
Appreciate the download? Like Black and White Obsession on Facebook to help support future downloads.

I hope you find this Template and Tutorial helpful. If you find yourself lost or not quite sure how to work through something in Photoshop, please feel free to leave questions below.

SHOW ME YOUR WEBSITE CREATIONS!!
If you found this template and tutorial helpful or better yet you used it, I want to see it! Leave a comment, tweet me @bNwobsession or email me!!
-Want to see more Free Template Downloads? They're cooling off the presses and available here.

-Interested in your own blog design? I'm in the early stages of providing blog designing services. Email me for special pricing with a la carte items such as social media icons, sidebar titles, *installation assistance, etc. If you're ready for a full or even mini blog makeover, let's talk! Take advantage of portfolio building prices!! Check out other designs here.

*Installation assistance on blogger/blogspot only.

-Besides the fonts, all elements within the template were created by me and are copyrighted. If you used any elements, please provide proper link-backs and share the love. 

5 comments:

  1. Awesome job Trisha!! You have really impressed me with your redesign and now this, keep it up!!

    ReplyDelete
  2. You're so kind to share your creativity with everyone!! XO!

    ReplyDelete
  3. hi! this is amazing, I emailed you regarding a customized layout for my blog. hope we can discuss further. I love this layout! :) - chami

    ReplyDelete
    Replies
    1. Thanks Chami, and Welcome to the site! Can't wait to collaborate in the future!

      Delete

Comments make my heart go pitter-patter! Your comment may not appear right away as they are manually accepted.

Pin It button on image hover