Your blog's header is the first thing readers see. It is your front door, your porch. It sets the tone for the rest of the visit. Last week's assignment hopefully had you thinking about what that visit should feel like and what designs best suit your blog's personality.
With those thoughts in mind, it's time to design a header that fits you and your blog. First thing to consider: Do you want it to be a focal point? If you limit your visible posts to only the most recent post, the entire page is more of a living room. A tall header becomes the mantel piece of the room. Or perhaps you'd rather have a small header that doesn't distract much, just an inch or so at the top of the page. It might be more of a screen door that opens easily and invites readers to dig into your content. I prefer a medium height for a header. I also like frequent change, so I want things I can swap out, like a wreath on the front door.
Before designing anything, you first need to determine your width. This depends on your personal preference, but you do need to be certain that your preferred width is easy to maneuver. Monitors vary and you don't want to leave your readers with a scroll-bar at the bottom in order to see from right to left. They won't stick around long. You can get an idea of what your readers see by entering your blog address at Responsive Design. Don't worry about the squished look on the ipads and cell phones; Blogger let's you alter the look on these devices in your dashboard under "Template", at the very top with the "Mobile" setting.
To set your width, go to Template and then Customize. This takes you to Blogger Template Designer. At the top left, click on Adjust Widths. Mine is set at 1260 with sidebar width set at 280. I like a wide, spacious feel. If you want two sidebars, you'll likely want to decrease that considerably so that your posts are wide enough to feature large photos and your great content! Keep the sidebars at a minimum of 150, 200 if you can work it in.
If someone is viewing your blog on a wide monitor, the background will show more. If someone is viewing it on a narrow monitor, the background might not even be visible. I don't want my background to distract at all. I like a clean, bright, and minimalist look. But perhaps you want a warmer feel with lots of background giving a cuddle-up-to-the-fire feeling. We'll work on colors and patterns for the background later; just keep it in mind when determining how much you want showing. Play with your width. Nothing is permanent and you won't mess anything up. Promise.
This is also the perfect place to start with a fresh canvas. While in Blogger Template Designer, go to Templates and choose a fresh start. I prefer Blogger's Simple Template, which I'm using. It is easy to manipulate and keeps things clean.
Now that header!
You can do an internet search for a free (or not free) blogger header template. These will walk you right through the process easy-peasey. You can also create your own and it's not scary. Honest. Whichever method you choose, keep the color scheme in mind. This one is hard for me; my eyes just don't pick up on it all. Your blog will look much nicer if you have consistency in your colors. Design Seeds is a great site for determining a color scheme that works with your header. Your links and sidebars and backgrounds and all mesh nicely if you keep the color scheme in mind. You can find the exact color codes for your blog by uploading a picture (your header) to Pictaculous.
Creating your own
Gimp is a free program, similar to Photoshop, that lets you build some super-cool headers. Layer them up with digital scrapbooking elements and you have a fancy look in no time. Gimp has a learning curve, but there are great tutorials out there on creating blog headers with it. Don't be intimidated.
Picmonkey and Canva are also great free resources for creating your blog header. The hard part is determining the width you like. After that, you just start slapping designs together. Have fun with it! Play with the height. 2-4" are good average heights. Find out what you like best.
Uploading your new header to your blog is a breeze. It used to be a complicated ordeal that involved the dreaded word...Code...but now you just go to your dashboard, click on Layout, and edit the header. At the word "Image", you'll see a spot to upload your newly designed header. You can upload a file from your computer or share the URL of your image. I strongly recommend the URL option. Files get deleted; they disappear when they shouldn't. Your readers will get a little funny box instead of a header if something unexpected happens. Try Photobucket for a safe, free place to store your photos with easy URLs. When uploading your header to blogger, be sure to check the box that says "Instead of title and description".
Here are some great tutorials:
Mummy K offers FABULOUS glimpses of different header options
21 Rosemary Lane shows how to build one and upload it with Picmonkey.
Shabby Blogs offers a tutorial and free design templates and elements.
Mama Whimsy also uses Picmonkey
The Watered Soul shares an intro to Canva and links rather than a tutorial, but it's lovely. Go visit.
Here are some Gimp Tutorials on building your own header:
XOMisse
Blog U
Third Grade in the First State
Beautiful Kayekie - this one specifically shows a great way to implement the new watercolor trend!
Personally, I'm still having trouble deciding on what to do for my header. I want a cheerful and clean design. I think I would like for it to include this picture from last spring, but I can't envision a way to incorporate it into a header.
How about you? Have you completed Assignments #1 and #2? Do you have a good idea about your blog's purpose and an idea about what you'd like your blog to look like? I'd love to hear what you've discovered, so please share in the comments section. Feel free to share your pinterest page of designs as well; I love seeing other people's ideas!
 |
| photo credit: demandaj via photopin cc |
With those thoughts in mind, it's time to design a header that fits you and your blog. First thing to consider: Do you want it to be a focal point? If you limit your visible posts to only the most recent post, the entire page is more of a living room. A tall header becomes the mantel piece of the room. Or perhaps you'd rather have a small header that doesn't distract much, just an inch or so at the top of the page. It might be more of a screen door that opens easily and invites readers to dig into your content. I prefer a medium height for a header. I also like frequent change, so I want things I can swap out, like a wreath on the front door.
 |
| photo credit: Blue Yonder via photopin cc |
To set your width, go to Template and then Customize. This takes you to Blogger Template Designer. At the top left, click on Adjust Widths. Mine is set at 1260 with sidebar width set at 280. I like a wide, spacious feel. If you want two sidebars, you'll likely want to decrease that considerably so that your posts are wide enough to feature large photos and your great content! Keep the sidebars at a minimum of 150, 200 if you can work it in.
If someone is viewing your blog on a wide monitor, the background will show more. If someone is viewing it on a narrow monitor, the background might not even be visible. I don't want my background to distract at all. I like a clean, bright, and minimalist look. But perhaps you want a warmer feel with lots of background giving a cuddle-up-to-the-fire feeling. We'll work on colors and patterns for the background later; just keep it in mind when determining how much you want showing. Play with your width. Nothing is permanent and you won't mess anything up. Promise.
This is also the perfect place to start with a fresh canvas. While in Blogger Template Designer, go to Templates and choose a fresh start. I prefer Blogger's Simple Template, which I'm using. It is easy to manipulate and keeps things clean.
 |
| To link back to this project, feel free to right-click to copy image location and link back to me. |
Now that header!
You can do an internet search for a free (or not free) blogger header template. These will walk you right through the process easy-peasey. You can also create your own and it's not scary. Honest. Whichever method you choose, keep the color scheme in mind. This one is hard for me; my eyes just don't pick up on it all. Your blog will look much nicer if you have consistency in your colors. Design Seeds is a great site for determining a color scheme that works with your header. Your links and sidebars and backgrounds and all mesh nicely if you keep the color scheme in mind. You can find the exact color codes for your blog by uploading a picture (your header) to Pictaculous.
Creating your own
Gimp is a free program, similar to Photoshop, that lets you build some super-cool headers. Layer them up with digital scrapbooking elements and you have a fancy look in no time. Gimp has a learning curve, but there are great tutorials out there on creating blog headers with it. Don't be intimidated.
Uploading your new header to your blog is a breeze. It used to be a complicated ordeal that involved the dreaded word...Code...but now you just go to your dashboard, click on Layout, and edit the header. At the word "Image", you'll see a spot to upload your newly designed header. You can upload a file from your computer or share the URL of your image. I strongly recommend the URL option. Files get deleted; they disappear when they shouldn't. Your readers will get a little funny box instead of a header if something unexpected happens. Try Photobucket for a safe, free place to store your photos with easy URLs. When uploading your header to blogger, be sure to check the box that says "Instead of title and description".
Here are some great tutorials:
Mummy K offers FABULOUS glimpses of different header options
21 Rosemary Lane shows how to build one and upload it with Picmonkey.
Shabby Blogs offers a tutorial and free design templates and elements.
Mama Whimsy also uses Picmonkey
The Watered Soul shares an intro to Canva and links rather than a tutorial, but it's lovely. Go visit.
Here are some Gimp Tutorials on building your own header:
XOMisse
Blog U
Third Grade in the First State
Beautiful Kayekie - this one specifically shows a great way to implement the new watercolor trend!
Personally, I'm still having trouble deciding on what to do for my header. I want a cheerful and clean design. I think I would like for it to include this picture from last spring, but I can't envision a way to incorporate it into a header.
How about you? Have you completed Assignments #1 and #2? Do you have a good idea about your blog's purpose and an idea about what you'd like your blog to look like? I'd love to hear what you've discovered, so please share in the comments section. Feel free to share your pinterest page of designs as well; I love seeing other people's ideas!
- Experiment with the width of your blog
- Consider a new template for a clean, simple design
- Play with designing a new header
- Remember, you can always change it if you don't like it!
- Link up to show what you've been working on over the last couple weeks:
I love the header I have at this time. I am having a hard time deciding if I should change it. That is the most updated family photo. I love the collection of photos that gives bit of who we are -- Americans with a love for China living in England, which is our ministry reaching Chinese students in England. Any thoughts that you might have.
ReplyDeleteBeth, I LOVE your header. I love it even more knowing the meaning behind each picture. If I were to change anything, it woud just be to make the blog title more visible; lettering over photographs is sometimes overlooked as it doesn't draw the eye toward it. But if someone is looking for your title, they'll see it.
DeleteWhat did you use to build the collage for your header? Is it something user-friendly that I can recommend to readers?
Thank you for your comments and encouragement. I will have to think about changing the lettering. I used picmonkey for that. That was the first time I had used picmonkey. I do think it is easy to use. I have since been using it for other things. I am not sure what other assignments you have but I think I need to work on my "about me" section which is in a draft. That might be a bit of a time to drawing the connection to the header. I had not done much ministry on the blog because of the type of work.
ReplyDeleteYou said not to change my header, so I won't, but I want to try that tutorial that shows how to use the watercolor stuff!
ReplyDelete