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.

 
Post is included in group: WordPress Blog
Post is included in group: e-PRO Internet Technology
Post is included in group: Photoshop Elements for Real Estate

7 Comments on Making Room Outside the Box: Add Padding with Image Transparency

NOV
11
2008
419,937 Points 81 Featured Posts Localism Sponsor Outside Blog Hit Router

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.

5:38am • #1
313,795 Points 22 Featured Posts Localism Sponsor Outside Blog Hit Router

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.

6:22am • #2
NOV
13
2008
Localism Sponsor

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  

6:15pm • #3
NOV
14
2008
313,795 Points 22 Featured Posts Localism Sponsor Outside Blog Hit Router

Barb .. You'd probably want to do that with Flash Animation  (It may be more work than you want to do.  :-)  )  More here

5:28am • #4
MAR
15
3 Featured Posts Localism Sponsor

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!

9:33am • #5
313,795 Points 22 Featured Posts Localism Sponsor Outside Blog Hit Router

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.

 

10:03am • #7

This blog does not allow anonymous comments

 
Cj-600 Rainmaker_large

Cheryl Johnson

Highland Park, CA

More about me…

Cheryl Johnson, Bob Taylor Properties, Inc., Los Angeles, CA

Address: 5526 N. Figueroa Street, Los Angeles, CA, 90042

Office Phone: (323) 257-1080

Email Me


Caution: CAT BLOG AHEAD

Including random thoughts on life, art, business, stuff, and occasionally Real Estate.

What is a CAT BLOG?

According to Seth Godin: "Cat blogs are for, by, and about the person blogging. A cat blog is about your cat and your dating travails and your boss and whatever else you feel like sharing in your public diary."

Well, I am the boss, my dating years are behind me, but I do love my cats.

Enjoy!



We’re Bloodhounds. We teach our clients to demand better service from real estate professionals.




Links

Archives

RSS 2.0 Feed for this blog

Find CA real estate agents and Highland Park real estate on ActiveRain.