OK, maybe you didn't notice--but I did this [sort of] on purpose! I've been meaning to give a tutorial for how I redesign my blog every month, and I wanted to show you as I was actually designing one...
So here we go! Again, no fancy program needed. It is easier if you have photoshop or illustrator, but you can use MS Paint, PowerPoint, or a billion other programs.
I'll go through this in three parts: [1] The Banner [2] The Background+Buttons [3]The Guts.
Part One: The Banner
Make your file. Size should be 1124 px x 360ish px (height can change, but 1124 px is the max width.) Quick tip on picking your size: Think 'above the fold' - the space on a newspaper that is above the fold on the front page is most likely to be read, and [most importantly] will draw in your readers. So, if your top banner is too big, they won't see your content--just your banner.
Make sure you set your file in RGB [designer-speak for Red Green Blue--this is the color format most monitors are set up to use. Not to be confused with CMYK used in Printers]
Start coloring. Do whatever you want. Make sure to take screen color/light into consideration. Also think about those who are reading it on their smart phones--little bitty type is beautiful but not practical for web. Also, make sure your colors are going to pop on an illuminated screen. Don't put white lettering over 9pt type.
So...I guess what I'm saying is do whatever you want, as long as it isn't ugly.
So now we have our banner. Awesome! Write down your web-color codes (usually can find them if you double click on your color swatch. Keep that post-it close--you'll need it a little bit later.
Save your banner as a Jpeg or PNG file. Since I do a lot of illustrations and type, I typically go for a PNG file. It's called a 'lossless' file, meaning it keeps a lot of the color/line information when it is compressed. Jpeg works better if you are putting in an actual photograph. Otherwise, go for the PNG.
We're ready to upload it onto the blog.
On Blogger, go to the Layout Tab. Looks like this:
Edit the bar that holds the banner (long thing on the top that says One Thing. One Day. Every D...)
Now, on to the background...
Part Two: The Background
Design-wise, this is the part you want to be very careful of. Your background falls behind the area that your readers are...well...reading. You don't want to do anything too distracting, and nothing that will clash too much with your content.
This is why...most of the time...I don't do anything for my background besides a solid white.
This month, I'm sticking with solid white.
But, I do love me some buttons.
If you have Illustrator, it's best to do this with multiple art boards.
Size for these are up to you, but max width is 260 pixels. Again, your content is the most important...so keep that in mind when determining your size.
Want to add more buttons to your blogger? Super easy. Just play around with the Layout tab [add gadget...] until you get something you like.
So, start coloring.
Here's what I made:
Save your file the same way you saved your background, and upload the same way as well.
Right now, this is what we have:
 |
| ooo...yellow from last month. oooo. |
TO THE GUTS!
Part Three: The Guts.
This is the most annoying part. We start playing around with the guts of blogger.
This is the Template Tab. It's the most annoying of all tabs.
Click on Customize.
Changing the font colors is under Advanced. I know. So stupid.
This is where writing down those color numbers comes in handy. Play around with these tabs until you have your color combo right. Fortunately, Blogger puts a nasty red dotted line around everything you are changing.
So, play around with it until you like it.
Again, you can do all of this in MS Paint or 90 other easy/free programs. I use Adobe Illustrator because I know how to use it, and I spent a boat load of money on it a couple years ago.
What do you think of this month's design? I call it Princess Minimalist.
No comments:
Post a Comment