Creating A Custom WordPress Header Logo With Photoshop And After Effects

by Harlan Yee on October 21st, 2010

I’m currently building a website that is part of the Niche Site Duel project I’m working on and wanted to share how I created the header graphic that appears at the top of my WordPress template. Everyone knows that graphic designers use Photoshop and Illustrator for this purpose. I use those programs as well but I’m excited to demonstrate how I incorporate compositions from Adobe After Effects into my still graphics. This is all possible because you can save a frame out of After Effects as a Photoshop file and retain all the layers you used in After Effects.

Header-tutorial-9

For those who don’t know After Effects, I compare it to Photoshop except that After Effects has the ability to create sophisticated animations with graphics and video. They both have common concepts and features. In fact, a lot of times, I’ll take a Photoshop tutorial that I find online and create it in After Effects. That way, I can animate it for commercials, videos, etc. The reason I like to use After Effects for stills is that there are so many cool effects I can create easily with the plug-ins that I have. I know that plug-ins aren’t necessarily the answer to good design but in this example, it helped me achieve the look I was going after.

Creating A Custom Header Graphic

On my Wedding Slideshow Ideas website, the header graphic needs to be 900 x 150.

Header-tutorial-1

So I create a New Composition in After Effects with the dimensions of 900 x 150 at square pixel aspect ratio. The duration doesn’t matter but I have 10 seconds because for this graphic, I’ll need to grab a still image somewhere in the middle of the 10 seconds. I’ll explain.

Step 1

Header-tutorial-2

In After Effects, create a new Solid Layer. Hit CTRL-Y [Mac: CMD-Y], color doesn’t matter. Hit OK.

Step 2

Header-tutorial-3

To that layer, I added a particle generator called Particular from Red Giant Software and selected Sphere for the emitter and particle type.

Step 3

Header-tutorial-4

Position the emitter at the left side of the comp window. Drag the timeline indicator to about 3-4 seconds. This is the reason why we need about 10 seconds for the composition duration. Particular needs time to generate it’s particles.

Step 4

Header-tutorial-5

At this point, I adjust birth rate, color, random sizing, gravity and transparency to my liking. I then drag the timeline to the point where the particles are in the positions I want. The emitter is constantly spewing out particles so every point in time is different. It’s great for getting an organic look with these dots.

Step 5

Header-tutorial-6

Before saving off a Photoshop file, make sure you are in Full resolution. I need my particles on a transparent background so click the background Transparency box and make sure you have a checkboard pattern behind the dots.

Step 6

Header-tutorial-7

Now click on Composition > Save Frame As > Photoshop Layers and save to a location on your hard drive. (Note: I had to adjust the size of my banner so the new size is 900×95)

Step 7

Header-tutorial-10

Open the newly saved file in Photoshop. Delete or turn off the eyeball on any layers you don’t need.

Step 8

Header-tutorial-11

Because this graphic is a bit hard to see on the checkered background, I created a new layer underneath all the other layers and filled it with a contrasting solid color like red.

Step 9

Header-tutorial-12

I added text and positioned a photo on my header graphic.

Step 10

Header-tutorial-13

I like the way it looks and I’m ready to save the graphic. I need the graphic to have a transparent background on my site so I delete or turn off the eyeball on the red solid colored layer.

Step 11

Header-tutorial-8

Now go to File > Save For Web & Devices. In the Type drop down menu, select PNG-24. PNG files are optimized for the web and can retain transparency. Name and save the file.

Step 12

Log into your WordPress admin panel, upload your image and follow your template protocol for inserting the new header graphic. My template has a nice gradient design to the background which is why I created my header graphic with a transparent background to allow the original gray background to show through.

Header-tutorial-9

That’s it! I actually use After Effects quite a bit for creating still graphics that I think would be too time consuming to do in Photoshop alone. Using cameras and 3D layers in After Effects, I can maneuver around my graphics easily and get the right compostion fast. The lighting effects are also very useful.

Additional Effects

When I needed a 3D logo, I used the Zaxwerks 3D Invigorator plug-in to create the following 3D text with transparent background.

RenderQWireframe

Just FYI, for those interested, there is a Photoshop version of 3D Invigorator but it’s not necessary if you already have it for After Effects. Also, there is a learning curve with Invigorator but is much easier to learn than a dedicated 3D program… but you’re going to need to know how to use After Effects first.  Hope this tutorial helps open the possibilities of using both Photoshop and After Effects for creating still graphics.

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS