First, go to the Blueball Website and get the banner pdf information for your particular design. My example is cubicle wide.
You can see that we need a 982 x 200 pixel jpg image (in RGB/sRGB). You can save at 70-80% to reduce loading time for your pages (the smaller the image, the quicker it loads)
Create a new document in Pixelmator
Select New from the File menu.
Set the width to 982, the height to 200 pixels. The resolution won't matter.
I'm grabbing the Show Effects tool to make a cloud background
You can use a fill/gradient fill on the background for a different look. If you want to grab an image, open it in Pixelmator and then either crop to the exact dimension (or resize, then crop). You can also crop to the 200 pixel dimension and then place the photo either to the left or right (or I suppose you can center it). In general, you want to create your banner, which is a bit beyond what I can teach here—but I'll show you the example.
Here's the Effects browser...
I'm grabbing the cloud tool
I drag the clouds tool onto the image and it fills. I then can change the primary and secondary colors.
Selecting the text tool, I build a headline for my site
You can change font, size, color, and shadowing here.
Select Export, and use a JPEG format
80% will look great.
Save the file where you'll find it again
Go into Sandvox, and show the inspector.
- Select the first tab (Document)
- Select the Appearance tab
- Select Image Fill
Browse to your banner file
- Find the file
- Click Insert
You're almost there...
You can see there's some text still floating above the banner. Select it and hit delete