Tutorial Art Design: Links

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!

Next, I opened it up in Photoshop and re-sized it to fit in my sidebar.

I did it at 300px wide, but you may want to do it at a different size depending on how large your sidebar is.

Now, double-click on your "Background" layer, and click OK.

Then, grab your Magic Wand Tool.

With your Magic Wand Tool, simply click on the center of your frame, to select the white inside the frame. Then hit the delete key on your keyboard to delete the center of the frame (now it should be transparent inside your frame).

Then, open the image of your choice.

Drag it onto your frame file, and size it down so that it completely covers the transparent area on your frame.

Now Drag your image layer so that it is below your frame layer, like so...

Now it should look something like this, feel free to add text like I have, or not :)

Then, do a File > Save for Web.

I saved mine as a PNG, but you could also save it as a JPEG if you like.

That's it!

It's Photoshop Week!

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

Part 1: Get Set up

First thing you will want to do, is to sign up for a free webfonts.fonts.com account.

Once you have an account, you need to go to your "Project" tab, and where it says "Current Project", select "Create Project"

Now you need to add the Project Details, make sure you click "Add" next to your Publish Domain, then Click "Save Project"

Next Click on "Choose fonts".

Here, you can browse through the different kind of fonts available. **Quick Tip: If you click on "Show free", you won't have to scroll through all the ones that say "Upgrade"

Once you have found one(or more) that you like, Click on "Add to Project".

Now we are going to "Work on style sheet". We have to add a "Selector", the Selector that you need to add will be different, depending on the Template that you are using, so I have listed below what Selector to add for the different templates.

Minima: .post h3

Simple: h3.post-title

Picture Window: h3.post-title

Awesome Inc: h3.post-title a

Watermark: h3.post-title

Ethereal: h3.post-title a

Travel: h3.post-title a

**In this sample, I am using the "Awesome Inc." Template, so I am going to use the h3.post-title a

After you type it in, click "Add selector". Then you need to click on the pink drop-down menu, and select the font that you want (if you only picked one, then it will be the only one that has shown up)

Once you have selected your font, you need to click on "Save changes and update style sheet".

Now, go to your "Publish" tab, and Click on the tab that says "Option 2: Advanced (JavaScript)". It should like this: **if you only picked one font, than there will only be one font-family listed

Now Copy the Text in the First box and go to your Edit HTML page on you blog, and paste it directly after you <head> **it is right close to the top

Go to your Template Designer.

and click on Advanced, and Add CSS. (for the Minima Template, you can add the code here, or in you Edit HTML page)

Now we need to tell the template which fonts you want where, so below I have a list of different fonts that you can change. In my tutorial, I am going to change the Post Title, and the Sidebar/Gadget Title. So for my example, I need to copy the 2 lines below that work for the Awesome Inc.

Minima Template:

Post Title: .post h3 { FONT FAMILY HERE }