Photoshop and Banner Creation
I don't know about you, but I get all excited and happy when I learn something new. Especially when it is something that I have been trying to figure out how to do for well over a week. I'm sure you want to know what it is that I've learned how to do that has given me so much thrill today? Random images. Hey, it doesn't take much to make me happy, and thanks to Brianna over at TypePad, I'm as happy as if I had a slice of chocolate cake with chocolate fudge icing right about now.
If anybody reading this has a blog or a website, you know that keeping things fresh is important to keeping your audience. But, as a TypePad blogger, we don't have the luxury of "plug-ins" like you have over at Wordpress. However, we have a lot of other things that make TypePad great and easy to use once you get the hang of it. I love TypePad, and know that it has just as many full featured abilities as Wordpress - you just have to pick it apart a bit and learn a few tricks to figure it out.
You can find many of these tricks over at TypePad Hacks. I think I've just about hacked that site apart trying to figure out how to do things in Advanced Templates. Fortunately for me, though, I've had fun doing it. One thing I could not find was a script for creating random images so that every time you refresh the page, a different image pops up. Until today.
Thanks to Brianna at TypePad, she has worked with me over the past several days trying to find a script that works to generate random images. She found it. I put the script into my TypePad TypeList 'Notes' and wah-lah I've got me a random image generator in my sidebar. Pretty cool.
The reason I am telling you this is because I am going to make this post about creating your own personal banners for your site, since in order to have random images in your sidebar where you place your banners you need to first know how to make the banners. It'll be fun! You'll see! I'll begin by showing you how I create a sidebar banner (which can also be a way to create your own advertising banners as well) and this will be Part 1 of my tutorial. Part 2 will be tomorrow, and I'll show you how to upload images into TypePad and create a random image generator for your sidebar. Sound like fun? I hope so. Let's get started ...
Open Photoshop. The first thing you want to do is click on 'File' and then 'New' thereby creating a new file within Photoshop.
Give it a Title like "Banner160x600" or something like that. You can give it any title name you want. I, however, like to put the Banner dimensions in the title so that it is easy to locate in my folders on my computer. In the Dimensions make sure you give it the Width and Height that your finished banner will be.
Click "OK" and you will have a new file open within Photoshop that is the dimensions you specified.
Next, open up the image or images you want to use in creating your new banner.
Once you've opened up your image or images, you will want to adjust their dimensions to suit your banner. In my case, the Width is more important than the Height as I will be using several images in the creation of my banner. Also, I will need to click on the box that reads "Constrain Proportions" so that my image does not become distorted. (Unless you want it that way, in that case have at it ).
Click on the 'Move Tool' in the top of the Photoshop Toolbar.
Next, hold down your mouse button with the Move Tool over the image you want to move. Then, while continuing to hold down your mouse button, move the image to your banner where you want it to go. In other words, just drag and drop it. Repeat the last few steps until you have designed your banner with your image or images.
As you can see, I decided to use 2 images for my banner. I also decided not to change the Width or Height of their original size, but rather, just move them to the 160x600 Banner and move them around until they were placed where I wanted them to be.
Next step, click on the 'Rectangle Tool.' We're going to use this as a background for some text. You don't have to do this step if you don't want to. I like it, though, in the creation of my banners. You'll see why in a minute.
I placed the rectangle shape at the top of my banner, clicked on the color box that indicates the color of the rectangle at the top of the Photoshop toolbar, and then the 'Pick a solid color' box opened. From here, I decided to choose a color for my rectangle that is within my images. That's easy, if you move your cursor over your banner image, you will see that it has turned into an eyedropper where you can choose a color from within your image. I clicked on a part of the tractor that was in shadow and the red color came up. I like it. I think I'll use it.
Now you can adjust the Opacity of the rectangle to be as strong or as transparent as you want. I adjusted mine to be 50%.
Click on the 'Text Tool' and we'll write something clever in the banner where I placed my transparent rectangle.
Now that I have my Text box blocked out where my transparent rectangle is located, I will want to go to the top of the Photoshop toolbar and choose a Font and a Font size before I just start typing something clever. At least I hope it will be clever. It may be boring. I haven't figured out what to write yet, so while I'm thinking about this and deciding what font to use, I'll go pour myself some sweet iced tea. I'm thirsty.
Okay, I'm back with my tea. Aaaahhh, refreshing. gulp. Hold on, I have to prop up my feet on the ottoman and get comfortable again. Now, let's see. What to write? hmmm. I'm thinkin. Patience.
There you go. That works for me. Done with my banner. Now all I have to do is save it as a .jpg and I've created another banner to add to my set of 160x600 banners that I am going to use in my random image generator for my sidebar.
So, get started on creating some banners for your site, and then tomorrow, we'll learn how to create a random image generator for TypePad. If you don't have a TypePad blog, don't fret. This code can be used to create random images on any site.
