Custom Plugin Header Image Label

Back in December of 2011, Matt and friends added the ability for WordPress plugins to have really pretty header images. For BuddyPress, I went through a few design iterations before settling on the header image pictured at the bottom of this post. I wanted it to be minimalistic and unique, so I took an hour to extend the label area with the buddies at the end. Below is the basic approach to make that happen:

  • Take a screen shot of the header image without the extended icon area.
  • Open that screen shot in Photoshop or your favorite image editor.
  • Make a new layer.
  • Fill the new layer with a black close to whatever the primary color of the label is. (#181818)
  • Hide that layer, select the background layer.
  • Magic wand the label.
  • Extend the selection to the size you want it to be (Usually 50px or so.)
  • Switch to your all black layer.
  • Right click; Select inverse; Delete.
  • Tweak the opacity of your black layer to match as closely as possible. Take your time with this; even if it’s the slightest bit off, it’s pretty noticeable.

Say Something Nice

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s