Blogger Backgrounds in Photoshop

[ Close ]You are using Internet Explorer 6. Please upgrade your browser to increase safety and your browsing experience. Choose one of the following links to download a modern browser: Firefox Safari Opera Internet Explorer
Friday, 01 May 2009 Contact UsSIStv HomeHomeUsing The ClassroomFAQHow To EnrollTeachersStudentsWelcome!Join The GroupBlogger1. Intro & Set up.2. Templates2a Template Issues3. Blogger: Backgrounds4. Adding the backround5. Making a banner6. Uploading the banner7. Fancy Titles8. The magic buttonNEW: Note From Wilna9. The pixelstick10. Fonts and Colors11. Adding social networks.12. Adding MUSIC.TypepadIntroductionDownloadsSetupDesign TabPhoto AlbumsTypelistsPostingHTMLBannersCustom PreMadeSidebar pt1Sidebar pt2PagesNavigation BarBackgroundsFaviconWordpressDownloadsSetupSettingsHTMLBannersCustom PreMadePostingWordpress: Widgets
Bling Out Your Blog 2.0

with Wilna Furstenberg and Kayla Aimee Terrell

3. Blogger : Making a background in Photoshop




What we are doing today:

Making and Adding Background papers to our Blog.

As this is a very new field for a lot of you, it's the only thing on today's agenda. It will be super cool if you watch the video more than once. And even create the background paper with me. For those of you who don't want o create your own background papers, At the end of the section there is a link where you can find some to download and install in your html code. I made them with love for you!



Files to download:
These are layered templates for PHOTOSHOP elements for the blog template we did yesterday. You can download a free trial for Photoshop elements HERE.


Photoshop Template for the 3 column blog (it will only work for the New 3 column template I provided yesterday)
Photoshop Template for the 2 column blog (it will only work for the New 2 column template I provided yesterday)
If this file takes long to download try this ZIP file: http://wilna.typepad.com/blogclass/2column_background_template1.psd
How to download these PSD files: Right click and select "save link as". You will be prompted to specify a location to save the file to. This is what the file will look like when it's in photoshop:
























screenshot: photoshop file.
If you did not download my templates that I provided yesterday, but you still want to add a background image, I suggest you read the following article that helped me when I started to look into adding a background image. In fact, even if you did download my templates, take some time and read the article. It will help you a great deal: Adding a blog BACKGROUND ARTICLE.

Other CUTE free TEMPLATES:
http://freetemplates.blogspot.com/

http://www.bloggerblogtemplates.com/2008/01/two-column-blogger-templates.html

http://www.bloggerblogtemplates.com/2008/01/three-column-blogger-templates.html

http://lenatoewsdesigns.blogspot.com/

The video:Making the background papers in photoshop.

Password blogger09. Please watch the video. I will explain it all again in screenshots later in the post. What I discuss in this video is how to make a page in photoshop for your blog background AS WELL AS how to upload it in the html code.




Digital elements used in this video: Lynn Grievenson (paper) Katie Pertiet (paint brushes)

FREE Backgrounds available for download HERE: http://wfbackgrounds.blogspot.com/

How to use the psd template:




1. Open the template and drag the color paper you want in to it. I used Lynn Grievenson (paper).































2. Drag the layer of the paper (layer 5 in this case) so that it is above Layer 1 copy 3 in the layers bar. Position your mouse between the layers and hold down ALT or OPTION key while you click with your mouse. This will merge the layers.




3. Now you will see the green paper forming the sides of the background papers. This technique is called masking.




4. Next you can add other elements like painting with your pencil tool (i show you the whole process in the video) or drag digi elements into your file to make it just as you want. I used trees in this case.




5.what I did here was to merge all the elements I added. the reason for that is I want to make the whole more opaque. This is a great technique to use when you design blog elements but doesn't want it to scream at your readers. If you LOVE bright colors, skip this step! What you do is hold down the shift key and click all the layers you want to merge. Right click and select "merge down."





6. Now adjust the opacity for your image until you are satisfied.


7. Flatten the image



8. And VIOLA! When you click "save as" remember to make sure you select "jpeg". There you have a custom background!

If you have any questions, leave me a comment. Also link me in the comments to your new blingy blog so that I can leave YOU a comment. Again, the only condition for me to help you would be that you watched the video and followed the instructions carefully!

Show us your blog:
Visit Bling Out Your Blog 2.0 Students

Comments (24) 24 Thursday, 30 April 2009 21:33 Angela Christenson
cancel my last rant.....I figured it out. Now I just have to make something that I like. I may have something designed before the end of the weekend.
Reply 23 Thursday, 30 April 2009 20:58 Angela Christenson
I just spent a couple hours making my new background...only to put it on my blog and find that it is a small square...Where did I go wrong? Also when I click on properties on the templete that I'm using it looks different than yours so are you highlighting the http:// (spot) ? Because that is what I did. Then I clicked on preview and my new templete only sits in the center. http://photography4me.blogspot.com

Angela
Reply 22 Thursday, 30 April 2009 19:16 Courtney Kimbrough
I still can't see the sides. Will you check it and see what you can see? www.kimbrough5.blogspot.com

Thanks!
Comments (1) 21 Thursday, 30 April 2009 14:00 Peggy Kushman
I have a trial of PSE but that doesn't me I know just how to use it. I opened the 3 column template but my screen doesn't look anything like yours. I'm not at all interested in creating my own paper right now...it's too frustrating!!!!!!!!!! I can't operate PSE because I don't know how you got to the page you are showing on the video.
Very frustrated
(feel like packing it in)
Comments (1) 20 Thursday, 30 April 2009 13:32 Courtney Kimbrough
I've followed the instructions, and it works... but when I view my page, I can't see the side background paper hardly at all. Could this be because my monitor is too small, and is cutting them off, or have I done something wrong?

Btw, I am using the 3 column template.

Thanks for your help.
Comments (1) 19 Thursday, 30 April 2009 12:46 Claudia Gibson
Ok, I am not getting some of this lesson. I opened the template in PSE just fine. The next step is to drag the layer of paper over the template. Where do I find the layer of paper? I see it on the video but how do I get those to show up in Photoshop? I saved the Lyyn Grievenson papers on my computer, but don't see them in Elements. I'm not very experienced with PSE so maybe that is my problem. Help.....
Comments (1) 18 Thursday, 30 April 2009 12:07 Carol Pantling
I am totally lost - how long will the classes be accessible as I need to take some time over the next week to work on this - can i save the class to my PC somehow?

I really want to do this but having a few senior moments!!!!
Comments (1) 17 Wednesday, 29 April 2009 16:03 Sheri Twing
Wilna, I do have a question though. In the example you used, there are two columns in the template that are transparent. After you uploaded it as your background, they appeared in white. When that is uploaded as the background, is the background color in blog settings filling in those transparent columns? If so, then I'm assuming that could be changed by changing the background color in the blog settings, correct?
Comments (1) 16 Wednesday, 29 April 2009 16:00 Sheri Twing
Wow! Wilna, I'm amazed at how easy you make this for us! Just wanted to say thank you. I'm loving this class!
Reply 15 Wednesday, 29 April 2009 12:49 AJ Jones
Do we have to use photoshop to do this? I would rather not :(
Comments (1) 14 Wednesday, 29 April 2009 11:54 Jennifer Carpenter
Sorry, I've just logged in to see this class and I'm not finding the link for the video. Please help!

thank you!
Comments (1) 13 Wednesday, 29 April 2009 04:55 katie squires
THANK_YOU for the free backgrounds, you are always so generous in your classes creating stuff for us :) Thank-you!!
Reply 12 Tuesday, 28 April 2009 22:20 Sarah Cochran
The video was very easy to follow, however as I mentioned in another comment about the templates, I don't have PS Elements so I created a photo collage in Picasa and uploaded it to a post and then proceeded to do the same thing as you. When I got to the step where you copy/past the jpg code to the section of the HTML that reads "body background image, etc" mine does not say background-image, it only says
body {
background:$bgcolor:
I've played around with it a little bit trying to figure it out but I always end up with a plain white blog with that same photo collage as a post. What am I doing wrong?
Comments (1) 11 Tuesday, 28 April 2009 20:39 Jody Ferlaak
Hi Wilna. =)
What size file do you save your background image as? I'm wondering if it matters what width and height your create your jpeg image as in order to fit well as a blog background.
I'd love to try to create my own. Yours are always wonderful!
Thanks in advance!
Comments (1) 10 Tuesday, 28 April 2009 20:21 Sylvia Spates
Hi Wilna,

I think I'm the only one stuck in the ice age because I don't have a Word program! So I wanted to know do you have the 3 column template in a zip or PSD format?

thanx so much
Comments (1) 9 Tuesday, 28 April 2009 20:06 Wilna
I am done working for today!
If you have problems with the HTML template...please email me: wilna71@yahoo with your blogger username and password.. you can change it again after wards. I will help you!
See you in class tomorrow!
Wilna
Reply 8 Tuesday, 28 April 2009 19:45 Janet Boyd
Hi Wilna

When I click on the files that you have to download the 2 column or 3 column template, I get a blank screen that says "untitled". Bear in mind I am almost blog illiterate, and so maybe I am just doing something really stupid, but it is driving me crazy. I manged to move my widgets to the bottom, and that's as far as I can go. Please help!
Comments (1) 7 Tuesday, 28 April 2009 19:22 student
Having trouble downloading the 2 column template. I left a post on yesterday's but just did it so I don't know whether you'll see it.

Missy
Comments (1) 6 Tuesday, 28 April 2009 18:59 student
Wilna,

The zip file worked like a charm.....

smiles back at you!

SHona
Reply 5 Tuesday, 28 April 2009 17:46 student
Wilna,

Is the two column template much bigger than the 3 colun template. I downloaded the three column template easy enough---however the two colun template just sits there saying it loading, and loading, and loading and never downloads. I have tried several time.

Thanks

Shona
Comments (1) 4 Tuesday, 28 April 2009 17:27 Lexi Bridges
And by the way, I am really learning alot, which is great because I just started my blog this past saturday and know NOTHING about blogging! :) Maybe I'll link it before "class" is over :)
Reply 3 Tuesday, 28 April 2009 17:25 Lexi Bridges
the free backgrounds you have provided...are they for a 2 column or 3 column?? THANKS!!
Comments (1) 2 Tuesday, 28 April 2009 15:02 Helen McCain
I can't wait to do this, my whole goal was to create my own blog elements.
but I can't even upload the 2 column or 3 column template to my practice blog. I mean, it really doesn't look that difficult, but I've even cut and pasted your html code and it still won't work.

This is extremely frustrating. I feel like there is no point in me trying lesson 2 if I can't get 1 to work.
Reply 1 Tuesday, 28 April 2009 13:59 student
I'm very excited about creating my own background..now I just have to think of what I want. This is what mine looks like now. http://photography4me.blogspot.com
Reply
Add your comment
Comment:
PostPreview
yvComment v.1.20.0This classroom is provided by Scrap In Style TV, LLC