Open source madness – Customizing my Twitter page with Gimp

Now that [[Leveraging Drupal: Getting your site done right - Workshop Central|my book is out]] more than one Twitter intoxicated colleague has instructed me as to power twitter-mastership, and that I must replace my tired old Twitter offerings.

I [[http://www.searchforblogging.com/microblogging/how-to-create-a-custom-twitter-background.html|searched around]] and came up with the following procedure, which worked for me on my [[Ubuntu laptop]] like a charm, using all [[https://awebfactory.com.ar/taxonomy/term/9|Open Source]] tools.

Posted on: Last updated on: Written by:

Now that [[Leveraging Drupal: Getting your site done right – Workshop Central|my book is out]] more than one Twitter intoxicated colleague has instructed me as to power twitter-mastership, and that I must replace my tired old Twitter offerings.

I [[http://www.searchforblogging.com/microblogging/how-to-create-a-custom-twitter-background.html|searched around]] and came up with the following procedure, which worked for me on my [[Ubuntu laptop]] like a charm, using all [[https://awebfactory.com.ar/taxonomy/term/9|Open Source]] tools.

  1. Plan what you want to do.
    1. Use the background image used for this site, including header background color and degradé.
    2. On a long narrow strip running down the left hand side (225 pixels wide) put my social website profile photo along with personal blurb.
    3. Produce the uploadable background directly from this Gimp source file so I can easily modify it in the future.
    4. Change  the text, link and other colors for my Twitter page
  2. Assemble all your building blocks
    1. Background image
    2. Photo
    3. Text snippets
    4. Identify hexadecimal values of color scheme.
      For example, I used the gcolor2 ( http://gcolor2.sourceforge.net ) color selector (easily instalable on my Ubuntu laptop) to grab quickly the color used in my header, planning to use it for links color on my Twitter page.
    5. Create any necessary custom patterns for your Gimp installation.
      I copied the back_header.gif file (used as a background image on my blog header with repeat-x) to the ./.gimp-2.4/patterns/ directory right under my home directory, then refreshed the patterns dialog (Dialogs > Patterns) and there it was!
  3. Make the Gimp canvas and paint it
    1. Open Gimp.
    2. Set the foreground and background colors according to your color scheme.
    3. Go to File > New and create a new canvas 1255 x 555 pixels
    4. To add my header layer, I:
      1. Created a new layer 1255 x 150 (the height of my header background tile)
      2. Click on Dialogs > Layers, and clicked on the eye next to my main layer (Background) to make it invisible, renamed my new layer Header, made sure it was visible and selected it all (Select > All)
      3. Clicked on Dialogs > Patterns, and made sure my header pattern was selected.
      4. Clicked on the Bucket fill tool, and in the Tool options dialog selected the Pattern Fill option button, then clicked on the header layer with the bucket cursor: got my header going!
    5. Make a layer 128 x 405 pixels. Select Move Tool.  In the Tool Options dialog click on the Move the active layer option. Move the new layer flush left, just under the header layer.
    6. Pasted my profile pic on as an additional layer, actually and positioned that over the left sidebar layer.
    7. Put some appropriate verbiage underneath with the text tool.
  4. Save it as either a PNG, JPG or GIF file no larger than 800 K.
  5. Login at your Twitter home page. Go to Settings / Design.
  6. Click on the Change background image link.
  7. Browse to your new background image and hit Save changes.