Make Cute Vintage Frames for Pictures on your Sidebar, using Photoshop!

I love this technique, because it is so cute, and sooo easy :)   First off, I picked up a FREE vintage frame Clip Art from The Graphics Fairy.  Her site is FABULOUS!

Make a Simple Rotating Header in Photoshop

In this tutorial, I am going to show you how to make a header like this one:  **it is the same concept as making a Blinky

It is great for Photography blog designs and just if you want to add a little something different, but it is MUCH easier than doing a flash header.  NOTE: You can only save this as a GIF file, so your quality will not be as high as a JPEG or PNG, so if you need something really high quality, this is not the best tutorial for you :)

Make Your Logo into a Photoshop Brush for an Easy Watermark!

I love using brushes as a watermark, it is much easier that layering another file, and sizing it, then changing the opacity and all that.  If you have a logo, I would recommend this!  I do it for all my clients that purchase a logo.

So first thing you need to do, is make your logo into a simple black and white image (jpeg, png, whatever).  I size mine at 2500px wide, by whatever tall (that is largest you can make a brush).

Once you have your image made, open it in Photoshop, it should look something like this:

Make a Cute Blog Monday! One Super Cute Blog

I know, technically it is Tuesday, I am 18 Minutes late....  I meant to get it done on Monday :p

This is brand new, but I think I am going to steer away from Weeks, for the time being anyway, every Monday (or almost every monday), I am going to make a cute blog, and show you how I did it!

This weeks blog is "One Super Cute Blog" Click Here to see it live.

• Free Blogger Blog
• Free Account on Colour Lovers
• Cute Illustration
• Picnik (no registration or sign up required)
• Free Account on Fonts.com Web Fonts 

How to Get a Cute Non-Web Font for your Blog.

Part 1: Get Set up

Making a Custom Header using Picnik. SO EASY and FREE!

Step #1: Making the Header
I found this really cool website called Picnik it is so easy to use, and the best part is that it is FREE and NO registration required!!  I will show you how I made this header, so that you can make one that is 100% Custom for you!

First, head over to Picnik, and click on Get Started!

EASY! How to Create a Seamless Custom Blog Background at COLOURlovers.com

I am going to show you how to make a Custom Seamless pattern to use for a background at Colourlovers.com   I love this website!  Below is the Pattern that I colored, and that I am going to use for my example. 

So first, you need to set up a Free account.

Using MAMP to design and test Wordpress Themes without having to use a Hosting Service.

I wanted to start out WordPress week with a tutorial on how to set up a local server on your computer so that you can test out WordPress without having to spend any $$$ (I am sooo cheap :) on hosting, before you know if you like it or not. 

Not only is MAMP fantastic for not spending money to test out WordPress, it is awesome if you are a designer and you want to work on designs without having make a "UNDER CONSTRUCTION" page or if you want to just test some things out.

DIY Custom Blog Design Part 7: Post Divider

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

In this portion of the tutorials, I will show you how to make and add a post divider to your blog.  First you need to determine what size you need to make your post divider.  To do that, go to your Edit HTML page and scroll down to your #main-wrapper and you will see your width there.

My width was 540px, so I went ahead and made my post divider 540x75px.  I made the post divider the same way that I did my header in the header tutorial.

To install your post divider, you need to upload it to photobucket and grab your direct link code.  Then head over to your Edit HTML page and find this section:  .post {

First, add these lines:
  background: url(Your Direct Link Code Here);
  background-repeat: no-repeat;
  background-position: bottom left;

Second, delete this line:
  border-bottom:1px dotted $bordercolor;

Third, change your padding-bottom to suit your post divider, I changed mine to 4em, but if you have a taller post divider, go with a larger number.  You may just have to play with it a bit.

Your final code should look something similar to this:

Thats it!!

The Easy Way to Make a Seamless Pattern in Adobe Illustrator and Install it in Blogger.

I used to make all of my blog backgrounds about 1600px X 1000px, which is all good....  but I hated it when I would look at my designs on my dad's 30in monitor and I would see all that nasty white space on the sides of my beautiful designs.

Hopefully with this simple tutorial, I can get you hooked on seamless patterns as backgrounds.  Not only are they simple to make, and oh so lovely, the go on forever and ever, no nasty white space.  Oh, and don't let me forget, they are smaller in file size, therefore, they will show up quicker when you are loading your page.

So on to the tutorial!  This is going to be the first of 2 tutorials, and this one is the UBER EASY way to do it.  We are going to take a dingbat font (this is "Davys" that I found at fontsquirrel.com) and make that into our seamless pattern.

DIY Custom Blog Design Part 6: Custom Signature

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

I have made my Custom Signature in Adobe Illustrator (Here is a Tutorial if you are interested), but if you don't have Illustrator, or you are just more of a Photoshop kinda girl (or guy).  That is fine too!  If you don't have either, you can use the free Paint.net, or My Live Signature.

I made my signature 175px Wide by 100px Tall, but remember this is custom :)  So once you have your signature made, upload it to your Photobucket account (Start at Part 1 if you need help there).

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:

DIY Custom Blog Design Part 4: Header

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

In this part of the tutorial, we will make a simple header and I will show you how to install it properly.

I am making my header in Photoshop CS5.  If you don't have Photoshop, you can use Paint.net it is similar to Photoshop, and 100% FREE!

DIY Custom Blog Design Part 3: 3 Column Template

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

In this part, I will show you how to make a 3 column template for your Custom Blog Design.

DIY Custom Blog Design Part 2: Background

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

I have picked this paper from Amanda's Kit to use for my background:

So what I need to do first is open my paper up and size it down to 72dpi and somewhere between 1200 and 1800px (I totally just grabbed that number, just remember that this is custom, so size it where you want it :)

How to Replace the Expandable Post "Read More" (Jump Link) Text with an Image Button

I wanted to kick of DIY Week with this tutorial because I had so many requests for it :)  If you don't know what or how to use expandable posts, click here for my first tutorial on Expandable Posts.

So, lets get right into it....

Check your "Expand Widget Templates"

and find (command F) this line of code:

<b:if cond='data:post.hasJumpLink'>

Now select the above code, all the way down to </b:if>  (shown below, it may vary slightly)

 and replace it with the code below (if you cannot find the code shown above, add the below code after <data:post.body/>)

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align='left'><img border="0" src="Your Button URL Here"/></p></a>
</div>
</b:if >

You can change where your button is aligned by replacing "left" with "center" or "right"

And Voila!  You have it!

Meta Tags

I wanted to start SEO week out with some basics, so the first thing on the agenda is Meta Tags.  It is a really easy thing to add to your blog or website, but it is super important.

What is a Meta Tag?
Meta tags are html tags that are used to describe your site or blog to search engine.  The most common and important tags are the title tag, description tag, keyword tags, revisit-after tag, and the robots tag.

Why are Meta Tags important?
Meta tags are important because they convey to google, yahoo, bing, etc. what your site is all about.  When you search for something, the search engine is searching for keywords found on different sites.  When you get a list of search results, your meta tags help determine what comes up.  The first example shown is my other blog (I have already used meta tags in it).

This second example is what this blog looks like when you don't have Meta Tags (I only put meta tags up last night, so they don't show up yet):

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).