How to Create a Dotted Circle Using Photoshop

April 17, 2011 3 Comments

Step 1. Open up your document and select the color you want your dots to be.

Step 2. Open up your Brush (hit “B” on the keyboard) then open your Brush Palette box (hit “F5″ on the keyboard). Select your disired Brush Tip and Spacing.

Step 3. Open up your Tools Palette (hit “U” on the keyboard). Click on the Paths and Ellipse icons to select them.

Step 4. Create a new layer (hit “Shift + Control + N” on the keyboard) and click and drag a circle on to your canvas using the selected Path + Ellipse Tool (hold down the Shift key to keep it a perfect circle).

Step 5. Go to your Paths (click Window > Paths). Click on the little arrow at the top right corner to bring out more path options and then click Stroke Path. Click OK at the dialog box.”

Filed Under: Easy, Easy Tutorials, Intermediate Tutorials, Photoshop, Photoshop Tutorials, Tutorials

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

January 18, 2011 4 Comments

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!

Filed Under: Frames, Intermediate Tutorials, Links, Photoshop, Photoshop Tutorials, Tutorials, Vintage

Make a Simple Rotating Header in Photoshop

January 13, 2011 10 Comments

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

Let’s get started!  First, I have opened 4 different images (you can use as many as you like).  Then I am going to grab my Crop tool.  I am going to crop all of these to 800px by 350px (do what ever you like, but make sure to crop all of them the exact same).

After I have Cropped all of my images, I made a new document the same size as my cropped images.

Now drag all of your images on to the new document that you have made, and arrange your layers in the order that you would like them to go in the Header (top to bottom)

Once you have done that, you are going to go to your Window > Animation

Now you should have a window appear that looks something like this:

Now, click on the New Frame button (shown below)

Then you are going to Hide your top layer like shown below (click on the eye to hide).

Now it should look something like this (both slides should show a different image).  Then Click on the New Frame button again.

… and hide the next layer down.

…. and repeat the last 2 steps until you are finished with all your layers (don’t hide your last image though).

Now if you push the Play button, you will notice that your slideshow will go REALLY fast, so to make it the speed you want it, click on the Sec. below each slide, and select a time.  I selected 5.0 secs, but you can do whatever suits you :)

Last thing, make sure that the slideshow is set to Forever.

Now, we are going to do a File > Save for Web & Devices…

 Then you are going to select GIF (it won’t work with any other file type).

 Then you can adjust your quality settings, these are the options I chose:

Now you need to upload your file to your Free Photobucket account.   (before you upload, make sure that you click on Customize your upload options (shown at the bottom of the image below).

 Make sure that you select Best possible quality(while staying 1mb or less)  **my account says 2mb because I have a pro account.  (If you skip this, Photobucket might edit the dimensions of your image)

Once you have uploaded your GIF file, copy your Direct Link code

When you go to edit your Header, make sure that you select the From the web option, YOU CANNOT UPLOAD it from your computer…. it will not work.

Click Save, and there you have your new rotating header, it is not quite as slick as a flash header, but it is way easier, and faster!

Filed Under: Blinkie, Blinky, Custom Blog Design Tutorial, Easy Tutorials, Headers, Intermediate Tutorials, Photography, Photoshop, Photoshop Tutorials, Tutorials

DIY Custom Blog Design Part 7: Post Divider

December 13, 2010 Leave a Comment

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!!

Filed Under: DIY, Easy, Easy Tutorials, Intermediate Tutorials, Photoshop Tutorials, Post Dividers, Tutorials
« Older Posts

To the Top