DIY Custom Blog Design Part 5: Sidebar Titles

This is Part 5 of a series of tutorials, if you need to start at the beginning, click here.

 In this part of the tutorial, we will make sidebar titles and I will show you how to install them.

You are going to first make the Sidebar title the same way that you did the Header.  If you need to see that Tutorial, CLICK HERE.  The only thing that you need to do differently, is to make the size of your sidebar titles, with the same width as your sidebar. You can find the width in your Edit HTML page here:

Tutorial: How to make a custom designed background that can change colors easily.

I don't know if any of you run into this with your clients, but occasionally I will get a client that wants the flexibility to change the color of their background, but they don't want the background to be a plain color.  I thought that I would share my little trick to make this work.  I hope you can use it in your designs :)

Step #1:  Make or use a background or a seamless pattern for your background.  The key is that you need to take your background and make it white, with a transparent background.  I made this simple dot pattern in Adobe Illustrator (it works the same in Photoshop if you choose to use that). 

FREEBIE: Swirly Frames - Free for Commercial Use

I really wanted to kick off this new blog with a Super Cute Freebie!  This pack includes 2 Swirly frames that are perfect for Headers, buttons, photo frames, digital scrapbooking, and more!!  The zipped file includes PNG files, and an editable EPS Vector file.  They are free for commercial and personal use.  Files are NOT to be sold as is.  They MAY be used to create items to be sold, but may NOT be sold by itself in it's original form.  I do very much appreciate a link back and/or credit, but it is not required.  I hope you enjoy, please leave a comment if you like the download, THANKS!!

DOWNLOAD

Which File Types for Web Design???

Because I have learned most everything that I know about web design on a trial and error basis.... I started out with mainly print design, it took me a while to start understanding web file types and what they are for. So here goes my opinion (like I said, I am self taught, so don't take this as the "Design Standard"):

GIF vs. PNG

GIF and PNG files are for web, and ONLY web! Now, at first my confusion with the files was, what is the difference between a gif and a png.... They have some similarities. They both allow you to save with a transparent background. What I have found to be the greatest difference between the 2 is the quality, and size. If you are going for high quality, I use PNG, but if you need a smaller file size, go with GIF. So if I am saving a Header or Button that needs to look really nice, and and have a good clean transparent background, I would go for the PNG, but if I was using some thing very large, like a background, I would go for the GIF (that way, it will load quicker for your viewers).

JPEG

JPEG is really pretty simple..... photos.

**If you have other insights, please comment! I love learning and I know that there is a lot more to file types that is worth mentioning.