My new Twitter background image, created with my photos and - of course - Fireworks

New Twitter Home page image

A couple years ago I created my first Twitter home page background image using Fireworks as my design tool. The goal was to use the background image as a branding tool by supplying a mini-bio on the Twitter page, in what looked like a little content pod. The background of the background image  was one of my photos from up north, faded into the web page background color. And it was fine at the time.

Some time ago, though,  Twitter revamped its site, generally making more content available to people visiting their own home page or the page of people they are following. Which is good, I guess. But this also meant that less of the background image was visible. In fact, on my 15 inch Macbook Pro, the actual Twitter content was overlapping my old mini bio. Not good visually, or for branding.

So, knowing I had to do something, I decided to create an entirely new background page using more of my photos – a collage effect – that would be more interesting, and would still be appealing on larger/higher resolution monitors.

And of course, I planned to do the majority of the work in Fireworks. :-)

However, I didn’t start in Fireworks. My workflow for this little project was Bridge > Photoshop > Fireworks. Here’s why:

Adobe Bridge

My Bridge view after slecting images for the collage

Selecting images in Adobe Bridge

I hands-down love this application and it always astounds me that so few people use it.

Fireworks enthusiasts may complain that FW doesn’t get much love or recognition, but Bridge is seemingly even less understood.

Adobe Bridge gives me all the tools I need to sort and rank my images. Once I have a group of photos selected, I can perform a variety of batch operations on those selected images by going to the Tools menu and picking the software I want to work with. Now I didn’t want to be importing or placing upwards of 15 images manually, so I used the  Photo Merge utility in Photoshop to first add all the images to a single document.

Adobe Photoshop

Images were brought into a single PSD file using Photo Merge, then roughly laid out in Photoshop

Rough Photoshop layout for new twitter background

While in PS I did some rearranging of the images so I could customize the canvas size to a more suitable dimension. The last step I made in PS was to reduce the overall image size from about 4000 pixels wide to about 1600 pixels. Saved the file as a PSD and then booted up Fireworks.

Adobe Fireworks

Ahh back home again. :-) FW is where all the creativity happens for me. Being able to work easily at the pixel-level is important for screen design and for a Twitter background image it’s critical. In Fireworks I experimented with image sizes, locations and rotation. I also quickly added an old photo border feel and drop shadow for some depth to the images. All the photos were in one main layer in Fireworks (when a PSD file is opened in Fireworks, all PS layers not in a Layer group are added as unique objects to a single Fireworks layer). So I could quickly add common effects by simply clicking on the layer and then choosing my effects from the Live Filters menu in the Properties panel. The Stroke effect found in the Photoshop Live Effects menu is something I use all the time and oddly enough, adding a stroke to a bitmap is not something that Fireworks does natively. Go figure.

Once I had my images arranged the way I liked, I created a new layer for my mini-bio. I locked the photo layer to avoid accidentally selecting or adding objects to the wrong layer. I added in a rectangle, quickly rounding the corners in the Properties panel. The height and width of this rectangle were very important for several reasons:

  • I didn’t want the pod rectangle to overlap the main Twitter content area
  • I wanted all the bio information to be visible in “top fold” of the page, because Twitter page background images do not scroll with page content
  • I wanted to match the pod’s vertical position with the top margin of the content area
  • I wanted a little breathing room between the pod and the content area
  • I had to make sure my mini-bio would fit in the allotted space

I knew I would be tweaking the design multiple times before I got things right, so Fireworks ability to keep everything editable all the time was key as well.

Next step was to add my bio information and a photo. The previous Twitter page just used my photo in a rectangular format. This time I used the Vector Path tool to draw a more organic/random shape, and then applied the shape as a mask. I kept the font choices simple and the copy as brief as possible, styling the text in certain areas to highlight certain information like my name, web site, blog etc . . . While I could have created and styled the text in a single text block, I chose multiple text blocks (three) for more flexibility.

I knew I’d be moving this pod around while tweaking the design, so I converted the pod, text and photo to a graphic symbol for easy management. I chose a symbol rather than grouping because I figured I’d need to experiment with the pod size. I just find it a bit easier to do that using a symbol. That’s just how I roll . . .

After some experimentation (uploading the jpeg version to Twitter umpteen times) I decided that the bio pod (hey, I like that term) needed to be separate from the imagery. So I extended the canvas on the left and shifted the pod over to fill the empty canvas area. Thanks to all the testing, my final background image dimensions ended up being 1926 pixels by 1000 pixels. ant the pod fits perfectly on my wide screen Macbook.

One final touch was to add some bird silhouettes to the pod to keep that Twitter theme going. So, I did a screen grab of one of the stock Twitter wallpaper themes and used Fireworks to convert a couple of the birds to vector objects. As vectors, the birds were very easy to scale and manipulate.

During this design process I was also testing out optimization settings. Fireworks has a very handy feature called selective jpeg that allows you to isolate and optimize areas in a design at a higher quality level. One of the options in this feature is to preserve text quality. So any real text (not text converted to paths) is automatically optimized at a preferred quality setting, while the rest of the design is optimized at a lower quality setting. Very handy feature!

Long story short, my new Twitter background image is online and I think it looks pretty cool.

Why Fireworks and not Photoshop?

Some of you might be wondering this and it’s a fair question. I don’t think there’s anything I did in this design that could not have been done in Photoshop. So why did I switch applications?

Number one was speed. I work fast in Fireworks, partly because I use it all the time and partly because there are some time saving features that speed up what I’m doing. For example:

  • Optimize in the workspace – I can optimize right in the main workspace and preview those decisions right away. No jumping to Save for Web and Devices for this guy.
  • Vector tools – Creating a rounded rectangle is easy-peasy in FW and editing that rectangle is ridiculously quick, thanks to the Properties panel. I just generally find working with vectors faster and easier in Fireworks.
  • Symbols or grouped objects – very helpful for reusing graphics but also for just moving stuff around the canvas.
  • 9-slice scaling for vectors -  Once you create those rounded rectangles, you don’t want them to distort if you need to scale the shape. The 9-slice scaling tool makes it easy to transform vectors without distorting corners.
  • File size – on export, my Fireworks jpeg file is about 376 KB. The exact same design, saved as a PSD file and the optimized via Save for Web using the exact same compression settings is 685 KB. That, if nothing else, is case closed IMO.

And if you’re thinking. “Hey, why don’t you write a real tutorial on this project?”  I’m already ahead of you. I’ll be working up a step by step tutorial for CommunityMX, within the next couple weeks. Stay tuned!

Jim's home on the Web is proudly powered by WordPress and the Theme Adventure by Eric Schwarz
Entries (RSS) and Comments (RSS).

Jim's home on the Web

My thoughts and musings about photography, teaching and technology