Have you ever worked on a custom banner for a WordPress blog, and no matter how you tweak the padding and margin settings in the stylesheet, it just won't position properly? Or it positions properly in Internet Explorer, but not in Firefox, or vice-versa.
Here's helpful trick: Add the padding with a transparent image. And Better yet: Just make that transparency part of the banner image.
Here's how, in Photoshop:
Open your original banner image. To view the image size, click Image -> Image Size, and make note of the Width and Height Pixel Dimensions. After you note the dimensions, click cancel.
s
Next, create a new, blank image with a transparent background: File -> New Making sure to check the selection box for Transparent. Change the Width and Height dimensions to numbers slightly larger than those of your original banner image.
Click back in the original image, to make it the active window. Click Select -> All
Click the Move Tool
Drag the original image into the new blank file. Position it so the amount of padding you want shows around all the sides of the image.
Save for Web in .PNG format to preserve the transparency. Upload to the blog.
Presto! Instant padding! Works in all browsers. :-)
NOTE:
This little procedure doesn't really apply to creating banners in general.
It's a fix to one very specific little problem: When you have text above or below the banner (usually navigation links) and the text keeps ending up too close to the banner, and no matter how you tweak the margin and padding settings, the text just simply refuses to position itself properly.
I usually just create a header in Picnik, and resize or crop it to the specified dimensions, but I'm going to bookmark this for the next time I take on that task. Very clear.
This little procedure doesn't really apply to creating banners in general.
It's a fix to one very specific little problem: When you have text above or below the banner (usually navigation links) and the text keeps ending up too close to the banner, and no matter how you tweak the margin and padding settings, the text just simply refuses to position itself properly.
Cheryl,
This is a concise explanation for a problem that I just may have on our point2 web site. Before I go there however, since their edit gods hate me, will try this on another placement for a banner. Now if someone could just show me how to make our car "Brand" move / change sizes) in that banner I would be in edit heaven. One thing at a time; so thanks much Cheryl.
Barb & Sal
Barb .. You'd probably want to do that with Flash Animation (It may be more work than you want to do. :-) ) More here
Can anyone link me a tutorial on HOW to create a banner on Picnik? I am playing with it, but can't quite figure out where to even start. I have almost no experience in photo editing, and I'm getting frustrated :) Thanks!
Tim,
Try this in Picknik:
Upload a photo.
Under Edit, Crop and Resize it as needed. Banners usually are anywhere from 700 to 975 pixels wide, usually 100 or 200 pixels in height.
Under Create, click Text, and add your title text. (I just did this one in Picknik:)
Click Save & Share -> Save.
That said, Photoshop Elements is not a huge amount of money ($84.99 on Amazon and you could probably find it for less elsewhere), it is not that difficult to learn the basics, and it will give you a lot more options than a tool like Picknik.