Have you been on ActiveRain for a while & wished that you could Jazz up your profile with some reall awesome graphics or picture? Several members contact me regularly in complete frustration from trying to add a really great looking header to their profile.
Have visited a blog & come across a header that resembles one similar to this:
As you can see above, the photo I inserted does not even cover the whole bar & is so distorted & blown up that you really can't tell what it was. So, I thought it was time to share with everyone how to design a really great looking header for your outside blog. Granted, there are several ways to design a really awesome header, but for this exercise we are going to use a single photo.
There are so many different photo software programs you could use to create. The key to making the process smooth & successful is using photo editing software you are familiar with. In the past I have used everything from Pro-Grade Adobe Photoshop to a cheap PC program called Microsoft Picture it 10. In fact, my latest header was designed with a free online software program called Picnik.
How To Create an Awesome Header
The first thing you need to do is chose a photograph to work with. You want to make sure that the photo you are working with is at least 960 pixels wide to start. If not, things will become all distorted or not fill up the entire header box. Here is the original picture I chose to create my header. The original size was entirely too large at like 1620 x 880. So the next thing you will want to do is resize the photo to 960 pixels wide.
After choosing a photo & resizing you will then need to make some cropping adjustments to the photograph. The dimensions for your header need to be 960 pixels wide by 134 pixels high. Most pictures are not going to fit these dimensions exactly. In fact, 99% of the photos you chose are going to need to be cropped to fit properly. So, what you need to do is open the photograph up in any photo editing software & find the cropping utility. Enter the correct dimensions & move around the selected area to crop out the section of the photo you would like to use.
Now that you have the photo cropped, you can either use that photo as is for your header. Or if you want, you can add your logo or text onto the header. Make sure if you are adding text that is a descriptive title & NOT Contact information. All Your Contact info is on the side already. If you place your email address or website URL people will become frustrated when they try to click on the header & it doesn't do anything they are expecting.
The Final Result?
This is how it looks on my ActiveRain Blog
Lastly, you can see it on my Outside Blog as well:
I hope this helps all of you that have been frustrated designing your blog header. For those of you who feel daring, you could using multiple photos like Debe Maxwell has on her blog. But process is much more complicated and advanced.
As always, do not feel overwhelmed by designing a Header! This header was designed in less than 10 minutes time. Also, Do Not Get Caught up on Photo Quality. The photo I used was taken with my iPhone one evening while out on a bike ride through my neighborhood. No fancy equipment, or editing software was used to enhance the photo. I simply took the photo, did the simple steps in Picnik & uploaded.
So, now that you know how to jazz up your ActiveRain & Outside Blog, stop making excuses & get to it!
_______________________________________________________________________________________________________
I am the Co-Founder of 210 Consulting- Social Media Advisors. I have traveled the country as a social media speaker. If you would like more information on any of the topics discussed in this blog, please contact me directly. We specialize in social media training, online consulting, and the creation of your own custom WordPress site.
Feel free to subscribe to my blog to keep up to date with my latest posts of tips & tricks to enhance your experience on ActiveRain. If you would like, you can sign up to receive updates via email directly in your inbox.
Also, let's connect on these great social networks:
Useful Blog Posts:
Twitter Applications- 125 Twitter Tools To Make Twitter Easier To Use
I've found it very helpful if you first make sure the pixels are the right height and width (if possible within your software). That saves a lot of time!!
Thanks Jeremy,
I now have one more thing to do.
Thank you for this post. I have been interested in creating a photo header and did not have a clue as to how to create one!
I like to throw a GIMP into the picture... I use that for the resize. And I also try to make several at one time, so that I can swap them out every once in a while.
Thanks for this advice Jeremy - lots to learn!
Rick
Great tips, Jeremey! Thanks for sharing. I'll try them out on my next blog post.
Jeremy - Thanks for another helpful post on how to improve our blogs.
Jeremy, Thanks for the great tips. I have been wanting to work with the photo on my blog and this will make it easy.
960 x 134 ... those are the two numbers I needed. New header design is on this week's to-do list.
Thanks so much. Once I find that great header photo I will know what to do.
Great Post, the information is greatly appreciated.
Jeremy, you made it seem so simple. Now I can't wait to try Picnik.
Jeremy: nice post and helpful... I love picnik.com, it's a great easy and fast tool for getting images the right size quick. Thanks... RF
Short, specific, detailed - I can work with this! You have inspired my porject for the day, well, maybe the week.
Thanks,
Michael
I'm keeping this one for next weekends project. . thank you for making it look so easy. .
I hate, hate, hate working with photos and my blogs show it. I made a header for my first outside blog and it was OK...but I stopped using it. I need to work on this again.
Banner fans is also a great online tool to do headers buttons etc,its not hard if I can do it. Thanks for the tutorial as now I can send some links to your blog on this.
Thanks for the very detailed information on outside blog headers! I KNOW that this will help quite a few people! I do like the multiple picture ones but just don't have the time or wherewithall to attempt it!
Jeremy - Someone asked about this in a post just last week, and I mentioned Picnik to them but without your wonderful screen shots and step-by-step directions. Since discovering Picnik, I've probably used it 5 times a week... and 5 times a day, occasionally. Awesome tool and so easy! I really need to update my outside blog - It has the original header, when it was a different size altogether, and this is a good reminder. THANK YOU!
Nice job Jeremy. I can remember the days when all our blogs were the same visually!
Hi Jeremy - Thanks for the referral to Picnik. I will need to explore it.
Jer...
Another great tutorial ... I need to update some of my graphics as soon as I get some time!
I've been following all your tutorials Jeremy and I love them. Time has not been on my side though as I have been so busy but I will make this change soon!
Wow Jeremy this is awesome - I've bookmarked for return... Thanks for the great instructions!
I have this on my outside blog but no words over top I have to work on that. Thanks for the tips.
Jeremy,
Now I don't have to be intimidated in using some of the great new OB templates! This is awesome.
Hi Jeremy, Good post. Thanks for sharing.
Best - Sash
Hey Jeremy, thanks for the info, I will bookmark this for a future day.
David
Jeremy, Even though the customization page details size and all, your post is going to be helpful to a many people.. It really helps when you put the instructions into a tutorial post.
I've got to do something with my OB and maybe this will inspire me to do it myself. ;-) Thank you!
Ahh Bill- Those were the days!
Irene- Don't let them intimidate you! If you get stuck, you know how to contact me!
Susie- What are you waiting for? No Cowboy is gonna do it for you! :)
Jeremy, I'm going to go back and add some text to mine. Thanks for the inspiration and tutorial.
Jeremy,
This is the blog I have been waiting for! Thanks so much. I have one on there now I may change but at least it looks normal!
Keep up the good work.................
Good job Jer, no wonder my 961 x 135 headers kept getting errors!! LOL~ :-))
Jeremy,
Thanks for sharing this information. I worked at it the hard way before figuring it out.
Jeremy - Awesome information, now I just have to find a picture to use. P.S. Your I-Phone photo looks great.
Thanks Jeremy for the tips. Now, if I ever want to change my header, I can do so with relative ease...remembering the 960 x 134 is no problem. Oh, yes, and Piknik is a wonderful program to use for adding text to pictures.
I love decorative headers - I quickly uploaded one of a lavender field I took - I didn't even bother to change anything and it came through as this cool blurred version - but these are great tips for when I tweak it to fit my business a bit more.
Jeremy - cool, thanks for ths info. I have been going to ask my wife to make one for me but now I will try it myself.
cool ideas here - thanks for the quick tutorial:)
Great information todoay, as always.
Patricia
Thanks Jeremy, I always have troubles getting this right. I will play with it this afternoon.
Right, Brad, YOU having troubles with anything? LOL
THANK YOU, I've been wondering!
Great stuff, Jeremy. Now, with the backgrounds, we can all make our blogs look better! This was a great help!
Jeremy - you make it look SO easy! Pic from your iphone, really? You've got talent!
Jeremy, thank you for this as I've been stumped on how to do it for my outside blog.
Jeremy:
Great post and thanks for telling us how it is done. Now I have to take the time and do it!!!!
Hi Jeremy. You make it seem so easy.
Lana- It is really easy to do. Mine took less than 10 minutes!
Kim- Yes, the photo was from my iPhone. I couldn't believe how great it turned out!
Ya know, I was just thinking about something. It is a shame for those that are non Rainmakers on the network. They miss out on some of the coolest features of our network! Like having an awesome header on an outside blog. Yes, they can have it on their ActiveRain blog, but unfortunately the public will never get to see it!
With your instructions I was able to create a great banner for my blog. Thanks for your post. Check it out: Ozarks Mortgage Professional
I love picnik.com Thanks again,
Lanora M. Campbell, Senior Loan Officer, Mid Nation Mortgage
Jeremy Thank you sooooo much. I really appreciate this. Now I need to change my Outside Active Rain Blog. Great post.
Thank you thank you thank you!!!!
Just remember, Jeremy... those that aren't RainMakers can just give me a call...
Hey Jeremy:
I followed your instructions and now I have a header. It needs some work but I now know what to do with it. Thank you so much for the advice. This was fun!
Funny to see this post. After reading the other one, I did notice your nice header and thought I might think to update mine a bit...Can't say enough about Picnik!
Jeremy,
Thank you so much for posting this information and as always brilliant!
Best wishes
Sharon
Jeremy -
I finally got the header done and up but am still missing the part about how to get script on top of the header. Details?
Michael
thanks, Jermy. Enjoyed your instructions. Very straight forward. Take care, Art
Thanks so much...my new header looks great and was easy to create!
Cindy Roeschen
Thanks so much...my new header looks great and was easy to create!
Cindy Roeschen
jeremy you mightas well call me out by name. I just haven't had time to spend on getting my header done right. Too busy selling small houses. I'll get send you a picture and can you get the active rain elves to take care of it tonight?
Jeremy- I'm on a road trip now and just took some beautiful pics. This will give me an opportunity to try them on my outside blog. Thanks for the new look and making it easy for us.
Thanks Jeremy. Will be nice to have a photo that is all across the top and not just to the left! So much to learn which is a good thing! Gloria
This answers a question that I've been trying to figure out as I'm starting my outside blog...my header photo. Thanks for the information.
Or....Call Dave Daniels...an Active Rain member at FlyersTo You....and he will do it for you...Voila !
Hi Jeremy,
Thanks for the info. I'm definitely going to look into doing this myself for my blog. Another question: How did you get the links to those other social networks to look like that? Can you tell me, I'd like to do that.
Jeffrey- My buttons at the bottom are all a part of ActiveRain's new auto signature feature. You can read all about it here. The actual buttons came from another website which you will find a link in the comments section of that post.
Perfect, I was wondering how some of these look so great. Now to find the time.
I was fortunate enough to have some help getting mine set up some time ago.
Hi Jeremy -- This is a good reminder that I need to improve mine, and the specs helps a lot, thanks!
Great tip Jeffrey, I will have to look into making one of these. I do need to improve my header on my blog.
Great post and helpful as well -- thanks for making it all sound so easy.
WOOT!
Great information Jeremy. Thanks for the tips!
Hey Jeremy! Good stuff. Thank you for the easy to understand tutorial!
OK, I must do this as I have the most boring header on AR. Thanks, Jeremy!
Timely for sure. I was thinking about this all week.
Thanks for the psot today with the tips.
Patricia Aulson/portsmouth nh homes
Jeremy - thanks for this post. I have bookmarked it because I could not remember the post that Brad had done on this years back. Now I have the information I needed again. Thanks!
Did I miss something? How do I insert the header?
Thanks for the tip. I edited a photo to use & that was easy. But, it doesn't go all the way across the header. It only fills up half the space. What gives? And, I really don't understand how to insert text. Any more pointers that can help me with these details?
Thankyou for the directions! Can you tell me where I insert the header? I have the picture I just don't understand what to do with it now. Thanks!
Great advice Jeremy! I was lucky to have ActiveBrad help me out with my header! I love it how easy it is to upload and to change out when I decide it is time for a new look!
It definitely makes a big difference. If your blog or website doesn't look professional (and capture the reader) then it doesn't represent you all that well.
Great info! Being graphically inclined I figured it out with a little bit of effort a while back. I bookmarked this post for future reference though! Thanks!
--Kim
Jeremy,
I actually have a question for you regarding the header. I've noticed on my blog pages that the header never is completely aligned and there is always a space on the right. In your blog your screenshot looks right but looking at your blog on my computer you have that same issue with the header not extending all the way across. Is this just a matter of screen resolution? Is there a solution?
Thanks in advance.
Gayle - you would add text while you are editing the image in whichever software you used to crop the image. In PhotoShop, you would add a text layer over the photo. Hope that helps.
Keith- Yes, the screen resolution will make a huge difference. On some it may have a little bit of space. However in order to get it to load properly on the network, make sure your image size is 960x134.
Gayle- I am working on a video tutorial of how to design one that should be up shortly.
I like it. It sure looks a lot better than the basic thing I made.
Jeremy,m I remember when I first started AR and trying to do my header. Oh, what a headache. But Jesse Clifton from Fairbanks, Alaska provided me not just one but 4 headers. I was just so amazed someone would help me and actually send me the headers.
When I got my outside blog, I redid my header...myself. What an accomplishment. I use Picnik.com and love it.
I just finished doing a tutorial on this in video format. You can view it here: Creating and Uploading a Custom Header to ActiveRain and Your Outside Blog~ A Video Tutorial.
Jesse--thanks so much for writing this. You've inspired me to ditch my template header and work on this.
Jeremy - I may give this another shot sometime. I used to have a great header that I loved, but it slowed down the load time of my blog tremendously. I found out when I was forced to use a dial-up connection at my in-laws' house.
Jeremy, *MWA* You are a genius...you make it seem so easy! I may just have to tackle this. Thanks for the crystal clear step by step explanation. Much appreciated :)
Jeremy, *MWA* You are a genius...you make it seem so easy! I may just have to tackle this. Thanks for the crystal clear step by step explanation. Much appreciated :)
I'm with Sis--you ARE a genius! And, how long did MY header take?! You know, I got a comment on one of my blogs about this post and VOILA! Here I find you writing yet, another, awesome tutorial!
Have a great weekend...
Jeremy I have followed the instructions on the video but the header won't load to my outside blog.
It keeps saying to try again later...any suggestions?
Hi Jeremy, I keep coming back to read your post. I really need to Jazz mine up!
Jeremy, man this is just what I need. I have been wanting to add a little "life" to my site and you have just given me the motivation to do it. Thanks a bunch!!
I'm changing my header now, been on my to-do list for a couple of days now. Thanks for the tutorial.
Jeremy, i just stopped by because I wanted to update my header and this helped me out. I was familiar with picnik, I made it cleaner and removed web and email contact so no one tries to click it and nothing happen. All the best in 2010.
Thanks Jeremy for writing this blog. I am going to forward it over to members needing help.
Thanks Jeremy. You gave me the dimensions I have been looking for so I can create a great header. Do you have instructions for making a collage for a header?
No Problem Anthony! Glad I could help.
Jim & Linda- I do not have a tutorial on doing it as a collage. That does take a little more work. One of the things I have started doing is creating headers for members. If you would like me to create one for you, let me know.
Here are 2 examples:
Debe Maxwell
Lori Cain
Do you have simple instructions on How to add those cool buttons to each blog as I see them all the time (the twitter, facebook, etc.) and I just doubt that you place each individual photo in each blog? Thanks for the post and the simple instructions! Looking forward to putting them into action! Thanks - Nicky
Do you have simple instructions on How to add those cool buttons to each blog as I see them all the time (the twitter, facebook, etc.) and I just doubt that you place each individual photo in each blog? Thanks for the post and the simple instructions! Looking forward to putting them into action! Thanks - Nicky
Do you have simple instructions on How to add those cool buttons to each blog as I see them all the time (the twitter, facebook, etc.) and I just doubt that you place each individual photo in each blog? Thanks for the post and the simple instructions! Looking forward to putting them into action! Thanks - Nicky
Do you have simple instructions on How to add those cool buttons to each blog as I see them all the time (the twitter, facebook, etc.) and I just doubt that you place each individual photo in each blog? Thanks for the post and the simple instructions! Looking forward to putting them into action! Thanks - Nicky