Tuesday, December 4, 2007

Redesign Your Blog #2: Design the Photos/Graphics

OK! So, after dreaming, you've found your potential pictures... you've picked out a background or two that you like... and you're ready to get into action with the design.

If you're already settled on the design you want to run with, GREAT! If you still have two or three general ideas, that's OK too. If this is your first time, you may really want to select one design scheme and go with that full force. Don't overwhelm yourself by trying too many options.


After looking at a variety of blogs, you've likely settled on a general "look" that's appealing to you. The first thing that people see when they come to your blog is your header. It's simple to change your header... here's the basics on how-to change your header. And here is an excellent, excellent, excellent video tutorial of how to change your header (just click on the square that says "customize your blogger header")! The more time consuming part is actually designing the thing. So, here we go...

[PLEASE NOTE: BEFORE YOU DO ANYTHING, SAVE YOUR TEMPLATE HTML IN A WORD DOC! This is to protect you from yourself. And to protect me from your frustration if something goes awry. Go into your "template" tab... click on "Edit HTML", and then click the little box to the top right of the template that says "Expand HTML widgets". Now, click on the html text, hit ctrl-A to select all, then copy and paste the entire html code into a word document. Do it. Do it now. Don't come crying to me if you skip this step. This step will absolve you (and me) from any and all mistakes you may make along the way, and it allows you to toy around with your html without stress! :) Another EVEN BETTER option would be to create (through your dashboard) a second blog, on which to practice all of your html magic. That way, if you mess it up, who cares? If you nail it, then you'll know it before the whole world sees it! If you want to "live with" a look for a few days or so to make sure you like it, you CAN! And no one EVER HAS TO KNOW! (You can make it a private blog!) Just title it "YOUR BLOG NAME TRIAL" or some such thing. And then practice your html skills to your heart's content-- all without risking a thing on your real blog!]


You need to find out color codes for all the colors you want to use in your design. While it may sound difficult, it's really easy to do. Go into photoshop or corel and use the eyedropper tool to find colors that you REALLY like, that are prominent or featured in your header. Another way to browse colors is by name, using this online color thesaurus. You can just type in a color name, and it will give you various options, listing their 6-digit hex/color code to the side-- VERY handy! Remember, you are looking for colors to use for your background colors, font colors, bullets on the sidebar, link colors, etc., so browse with a purpose!

Click on various colors that you're interested in until you find the perfect one... then double click on it and a box should either pop up, or the color box in the color selector will change, and there will be a place that tells you what the color code is. It will be a six-digit code (can be numbers, letters, or both). Write down the colors you like. For example, "DARK BROWN FOR HEADER BACKGROUND: ******, BLUE FOR DATES: ******, TURQUOISE FOR LINKS: ******". Hold onto that page-- you're going to need it for what comes next.


---Perhaps you like a plain, solid colored header with simple lettering. No problem... use the color codes for the colors that you chose, and go into your template layout and click "edit html" and scroll down your template to the line that is like what I show below, and plug in the color code (e.g., I'll use #4c3920 for the lovely brown color I have behind my header) like this:

#header-wrapper {
background: #4c3920

Play around with your font color in the same way. Look at the code and find this section:

<Variable name="pageHeaderColor" description="Blog Title Color" type="color" default="#ffffee" value="#000000">

And then play around with the colors until they suit your fancy.

---Perhaps, though, you would like to have your entire header be a photo. So you need to determine the size that your header needs to be, and then create a new photoshop or corel canvas with those pixel dimensions. You're probably going to need to crop and/or resize your picture to fit the right size. Do that. And then click on the text tool to put in your blog title and any other words you want on your header. Play with the colors and fonts and size of your blog title, and then complete your image by saving it as a .jpg or .gif creation.

--- Or, perhaps you want your header to look something like mine-- a photo or graphic design with some color and text thrown into the mix. You're going to need to play around with your design in photoshop or corel. If you need tutorials on how to use those programs, you can find them online... just do a google search. Toy with the colors... move the photo graphic around, play with borders and strokes around the edges to make it look more professional, and then add your text at the end. When I was contemplating this most recent design, I did two test headers... here's the one that didn't make the cut:
For this one, I found the right size, paint-bucketed in the background blue color, copied and pasted the robin's egg nest picture (with the border that I had already added in and saved to the original) into the graphic, moved it over to the right, did a text tool for the title, did a different text box for the description below it (with a contrasting font), and finally, added the brown border around the edges. You could use the same basic steps to create your own custom header.

If you're wanting to create your own graphics, a tutorial like this may give you the information you need to get going in designing your own flowers or similar designs.

Play around with your header design until you do something you LOVE. Once you do that, save it. Eventually, even if you've started out with several design schemes, you'll find yourself leaning towards one particular design. Make your decision, and save your work in as high a resolution/quality as you can. I'll tell ya how to use it next time (or you can scroll up and watch that easy video tutorial I mentioned!).


The next thing will be changing your background "skin" or color. If you want to do a different background color, that's easy... go into the html and at the very top of the "Variable Definitions" section of your html, you'll find a line that starts with "Variable name"... and ends in "Main Background Color". You'll want to go to the next line of html and that's where you can change the colors in your background. Again, you can just play around with various colors until you are satisfied with how it looks.

I've already mentioned "squidfinger" as a GREAT place to get unique background "skins"... HERE'S a great list of background design websites that you may like to browse for more options. You can also do a google search for "free blog backgrounds" and find other options as well. You'll need to download whatever background you want to use (sometimes that will be a .zip file and you'll need to un-zip it in order to access the actual design).

Once you've found one or two background designs that you think you might like to use, open them up in your photo viewing program, and put it right beside your header... this way, you can make sure the colors "gel" and fit together nicely. Make sure you're not creating an orange and green plaidish nightmare that will horrify any blog reader that comes your way (Of course, we would never do that... but I'm just saying, ya know, just in case...). Once you have found your dream background skin, save it! In the next post, I'll tell you how to use it!


You'll want to go ahead and color-coordinate any other graphics on your website as well. For example, some people use photoshop-created graphics for their titles on each sidebar widget. (I'm not that fancy, but some people are.) As for me, the "fancy" thing I do is to use custom-designed bullets for each list item on my sidebar. To do that, I created a blank canvas that was the right size for a bullet/arrow point, and then I used the background skin design and "cut out" the bullet arrow that I wanted to use, toying with the size and length until I got what I wanted.

Think if you might want any such graphics, and go ahead and create them now.

At the end of each post I write, I have a cute little "Jess" to sign off the post. One reason I have this is because it's graphically pleasing and makes me happy. :) But a more important reason that I have it is to break up the blog page... so that it is evident when each post stops and starts. Particularly if you have a very text-rich blog (not many pictures), having an automatic signature at the bottom of each post gives a good "signal" to blog browsers to look for the next post title.

Here's how I create a blog signature graphic:
I select the canvas size that I want (mine's 100 x 70), and then paint-bucket in whatever the background for my text is going to be (which, for me is always white, because I prefer simple dark lettering on a white background). For you, though, you may have a royal blue background with white lettering. You'll want your signature to blend into the background, so use the paint bucket tool to make the background for your signature the royal blue. (If you wanted it to be a different color, you could do that, adding fancy borders and graphics and all kinds of stuff, really.) Then use the text box to create the signature "look" you're going for. I've seen some people that have very large and scrolly signatures, some that have graphics that intertwine with their name for a signature, and many (like me) who just have a basic, small signature at the end of each post. Do yours however you like (remembering to use color-coordinated colors that you chose at the onset of this post), and then save it. I'll show you how to insert it into your html so that it shows up at the end of every post in my next post in this series.

OK, I may have confused some of you more than helping you-- but I hope that for most of you, this helps give you some direction in the actual designing of your blog redesign. Now that you have the information, get to it-- go do your designing, and in a few days or so, I'll come back and give the low-down on how to get all of these fancy designs into your html code and get them up and running!

Overwhelmed? Just start small. Do a new header. All the rest can come with time... but if you really want a new look, a new header is where you'll want to start. Don't worry- I didn't do all of these things for my first blog redesign either--- I've just added a little bit at a time! You can do the same thing.

Any questions? Ask away! Just remember the basic "rules of the game":
(1) I only really know about Blogger. And even my knowledge in that is limited.
(2) I am NOT an expert. But I will help you how and if I can.

CLICK HERE to read the final post in the "Redesign Your Blog" series.


Post a Comment

Related Posts Plugin for WordPress, Blogger...