überEllis.com

During an illustration of a design, I've often found myself battling with the legibility of text over busy or textured backgrounds. This has influenced my choice of stock photography over better design more times than I care to admit. Over the years, I've gathered some tricks that get the job out there, but these rarely satisfied the perfectionist in me. White or light text frequently generates the contrast required and a simple drop shadow strenghtens the edges from one side, but there's a better solution that only came to me while playing with my phone's wallpapers; Outlines!

For text to retain it's legibility, the only real requirement is for the reader to recognize the shapes. White outlines, for example, keeps the black text alive, in the shadowy areas of the background. No longer do I need to clone out that cloud, my blue-outlined type will get the message across.

Adjusting the width of the stroke on an object in FreeHand, does not retain the authenticity of the original shape, however. It takes up some space of the background, and ditto on the shape itself, especially if the line is relatively thick.

So how does one achieve outlined bliss? Here's how:

1. Clone the object that requires more contrasting joy (Edit > Clone).
2. Change the colour of the new shape to the colour you require the outline to be.
3. Click on the "Inset Path" button on the Xtra Operations Toolbar (Window > Toolbars > Xtra Operations) or select the tool directly from the menu (Xtras > Path Operations > Inset Path..)
   
4. Inserting a negative value into the Inset Path dialogue will enlarge your shape instead of the expected inset.
5. Once you have decided on a suitable width for your outline, click Ok, and move your selected shape behind your original shape (Modify > Arrange > Move Backward) or Send to back if you're certain there's nothing behind the shape currently (Modify > Arrange > Send to Back)

Remember to stand back as your text blows your socks off ;)

When I started on Content Management Systems (CMS) almost 5 years ago, images always posed the largest problems, especially regarding user-friendly interfaces. Nothing enriches content like a good pic or two, however, so here's a quick guide on how you can get images into your Drupal site.

Like any good CMS should, Drupal has several ways of getting there, each with it's own pro's and cons, depending on your needs.

An overview of how to use the image module comes with the module itself, so I'll not discuss them here. Instead, I'd like to give a detailed overview of the most effective way around this sticky situation, using only Drupal core.

Your Drupal site will need to allow file attachments to nodes for this method. If you have the correct permissions, your blog entry should have an "Attachments" section at the bottom of the blog entry form (Home » create content » blog entry).

Step 1: Upload your image
Click on the "Browse" button next to the "Attach new file" field in the form. A dialogue box should appear, allowing you to browse your local hard-drive. Select the image file you want to use in your post, and click "Ok".

The path to your image file gets filled into the "Attach new file" field automatically.

Click "Attach" to upload the file.

Step 2: Include the image in your post
Once the file has uploaded, the "Attachments" area will have a table of attachments, listing the file names,full paths to the attachments on the server and file-sizes with options to Delete and list the attachments. For images in a post, uncheck the "list" option next to your image.

You will need to know some rudimentary HTML for the next part. In the area of your post you want your image to appear, type the following (with the quotes):

<img src="{URL}" alt="{DESCRIPTION}" />

Where {URL}= the full path listed in your "Attachments" section, and where {DESCRIPTION} = a brief description on what your image is about.

Use the "Preview" button often, to see if it's working and how the image will affect your layout.