Photoshop and Banner Creation Part 2 (And a Contest for You at the End! Woohoo!)

WE HAVE A WINNER!  My Sponsor handed over the job to me and Random.org, so I ran the magic number and the winner is ...

Doesn't that chocolate cake look good? 

Don't you just want a piece?

All right already!

 

We had 26 readers who commented for a chance to win Photoshop CS4, and I am happy to say that 16 is the Winner! 

So, who is 16?  Well, I counted 12 times to make sure I got it right.  And, the #16 is:

Catherine B.!  

Congratulations Catherine B.!  You've won Photoshop CS4.  

Email me at [email protected] to claim your prize. Be sure to provide your shipping address! 

Thank you to all who entered.  The odds were pretty good.  Keep tuning in for more great contests!

Have you created some banners in Photoshop yet?  Have you had a bite of that cake?  Talk about needing a chocolate fix - that slice up there will do it for sure. 

Getting back to reality - There is so much you can do to be creative in designing banners or sidebar items for your blog.  Personally, I think creating banners is fun.  All you need is Photoshop - hint hint.  And, now that I know how to rotate those image banners every time the page is refreshed, I want to share the knowledge with you. 

Since I am sharing the Love in this post, I thought I would share a little of Peter Max in the process. 

Yesterday's post taught you how to create a 160x600 banner in Photoshop, but don't feel limited by yesterday's lesson - the information is there for you to create banners of any size to suit your website or blog.  So, let's say you've created several banners of the same size and you want them to rotate on your site when the page is refreshed.  You know that this will keep things interesting and new and will bring energy to your site.  if you're like me, I wasn't going to be happy until I figured out how to do this with my TypePad blog. 

I realize something about myself - that even if I had a Wordpress blog, I guarantee there would be something that I would need to learn to do or I wouldn't be satisfied with it.  So, I'm stickin' with TypePad.  Not only have I been able to create a nice blog for myself, but the knowledge base and customer support have been excellent.

I only recently decided to learn how to use Advanced Templates within TypePad  so that I could customize my blog.   I did not like the way it looked and wanted to add a professional look and feel to it.  I also wanted it to reflect my personality.  The only way I could do this was to learn some web design and understand the fundamentals of CSS and html on my own.  And, if any of you have been here a while, you know why - because we're broke!  Big Bear has been busy looking for a job since his layoff and, well, I don't have thousands of dollars to spend on a blog redesign, so I had to figure it out myself or forget it.  Even that wasn't enough for me, though.  I wanted that stinkin' random image thing in my sidebar.  I'm persistent. 

Well, thanks to that persistence, I learned how to accomplish this within a TypePad blog, and the good news is that you can add this script to your blog too.  If you don't have a TypePad blog, you may have to contact your blog's customer support if you don't know where or how to add the java script to your sidebar, but here, I will explain how to do this within TypePad, and then you can figure out how to use the script within your blog if you use Wordpress or Blogger or some other blog platform.

Let's get started.  Here are some banners that I have created in Photoshop:

Despite how it looks, each banner is 160x600.  After you have created your banners in Photoshop, you will want to save them to a folder on your computer where you can easily find them.

Now, open up your TypePad account (if you have one) and click on your "Control Panel" tab.  If you use another blog platform, you will need to go to the area of your blog where you can upload images that will be used for placement within your blog.

Once you are in your Control Panel, click on the "Files" tab.  In TypePad, this is where your folders and images are kept that are used within your blog. 

Click on "Browse" to upload your banner images, one at a time, to your File Manager.

 

Click on the image or images that you uploaded into your File Manager (one at a time) to get their url (web address).  I like to have multiple tabs open in my browser rather than multiple browser windows.  In this case, I opened up each image that I had uploaded into a tab of its own in my browser making it easy to copy the url when I need it to put into the random image generator script.

In another tab, open up your TypePad account and click on "TypeLists."

You will want to "Create a new TypeList"
  
    1. List Type: Notes
    2. List Name: (Give it a name that will identify what the TypeList is).

When you give your TypeList a name, if you put the following code ( <!--YourTypeListName--> ) before and after the name, it will not be visible on your blog.  In other words, your banner image will show up, but the name of the list itself will not be in text above the banner image on your blog.  Hope that makes sense.  So, if you don't want the name of the TypeList that your image banners are in to show up (and I didn't), then write the List Name like this:

<!--TYPELISTNAMEGOESHERE-->

Otherwise, just type in the name of your TypeList and forget the dashes and symbols before and after.  By putting the symbols as you see here (in red) before and after the name you give your TypeList, the name will not show up on the page with your image.  Don't you just love sneaky little tips like this?

Now that you have created a new TypeList "Notes"  List, you want to place the script for the random image generator into the box.  (Note: Leave the box "Label"  blank.

Here is the script that you will put in your TypeList 'Notes' box:

<!-- BEGIN CODE FOR RANDOM SIDEBAR BANNER -->
<div align="center">
<SCRIPT LANGUAGE="Javascript"><!--

// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
//
// Modified for use in CSB and Trellix by Samantha Conway
// MUST change gEMDIR to GEMDIR before using code!!!
// ***********************************************

function image() {
};

image = new image();
number = 0;

// imageArray
image[number++] = "<img src='http://yourblog.typepad.com/IMAGE1.jpg' border='0'>"
image[number++] = "<img src='http://yourblog.typepad.com/IMAGE2.jpg' border='0'>"
image[number++] = "<img src='http://yourblog.typepad.com/IMAGE3.jpg' border='0'>"
image[number++] = "<img src='http://yourblog.typepad.com/IMAGE4.jpg' border='0'>"
// keep adding items here...

increment = Math.floor(Math.random() * number);

document.write(image[increment]);

//--></SCRIPT>
</div>
<!-- END CODE FOR RANDOM SIDEBAR BANNER -->

Everything that you see above in GREEN is part of the script and needs to be in the box.  The only change you will make to this script is the url (web address) of each of your images that you want to rotate.  And, remember, we opened up your images in individual tabs in your browser so that you know the address of each image and can copy and paste it fast and easy.

Put the url for each image (image 1, image 2, image 3, image 4, etc...) into the script.  These are the images that will rotate on your blog.  So, if I put this TypeList in my left (alpha) sidebar, the images, each of which are 160x600 in my case, will rotate every time the page is refreshed.

Now that you've created a TypeList with this script and you've added the url's of the images you want to rotate on your blog to the script ...  Now what?

Click "Save"  then click on the tab that reads "Publish"

As you can see here, all of my Templates in TypePad are Advanced Templates.  It wasn't always like that.  I had the basic templates for a long time and yes, they are a lot easier to use, however, you are limited in the customizations you can make within a basic template.  If you want to really get down to the nitty-gritty of customizing your TypePad blog, you'll want to be in Advanced Templates.  For me, I just had to swallow my insecurities and believe in myself enough that I could learn how to design a blog that was uniquely my own within Advanced Templates.  It was scary at first, but I did it, and I am happy with the way Raisin Toast looks and functions - at least for now. 

When I find new things that I want to add to my site, like wanting my image banners in the sidebar to rotate when the page is refreshed, I have to learn how to do it myself.  And when I learn it - I'm going to share it with you, so you, too, can add some cool features to your blog!

Now, see that Template Tag that the red arrow is pointing to?  Copy that Template Tag.

Open up your blog's template, beginning with the Main Index Template, and place that code exactly where you want your images to show up in your sidebar.  In my case, my images pop up on the Homepage in the left (alpha) sidebar. 

That's it!  It really isn't as difficult as it looks.  You'll get the hang of it. 

However, because I love you all for dropping by and taking the time to visit my little corner of the web, I have a surprise for you just so that you can start creating some really great banners for your site or for advertising, or both! 

How would you like your own copy of Adobe Photoshop CS4?  I thought so.  Just answer this question in the comments:

What drives you to be creative? 

Now, here's the deal, because I am starting this contest at 2am (I had a rough day yesterday - sorry for the late Monday, now Tuesday, post), I am going to end this contest at 12pm (Noon) EST on Wednesday.  This is a sponsored contest and the sponsor has indicated to me that he wants to choose the winner from his basket of tricks which is fine with me.  The winner will be announced on Wednesday evening around 9pm EST. 

So, tell your friends, tell your family, call up your buddies, call up your kids, and tell them to stop on over to Raisin Toast  to learn how to create cool banners for your sidebar and to enter this great contest to win Photoshop CS4! 

One Entry Per Person please.

Contest entries will be closed at 12pm (Noon) EST on Wednesday, February 25th.

Winner will be announced at approximately 9pm EST Wednesday evening.

Good Luck!  Yippee! DeeDooDah