Feature
Post

Category
General

Beautify Your Images with Affordable Photoshop Plug-in Filters

A while back, I discovered some fantastic plug-in filters you can buy to spiff up your web images that work wonderfully with Photoshop and Paint Shop Pro. I thought it would be fun to give a quick blow-by-blow on some of these filters just to give you an idea of what to expect from some of these great little additions to your graphic design software. Priced from as low as $15 per individual filter, or $49 for certain bundles containing four or so different filters, you simply can’t go wrong with these creative accessories.

Testing Plugins from Flaming Pear Software

This amazing software company has a fantastic group of plug-in filters available for purchase on their site, and each one is available to you for a 30 day free trial download! I highly recommend all the plug-ins this company offers. I have chosen five of their different effect filters to discuss in this article, and I hope you will go and check them out and grab your trial downloads…you won’t regret it!

Super Blade Pro - $30

This plug-in filter is an absolute “must” for web designers who are looking for some fresh ideas to create unique, attractive web buttons. Once you install Super Blade Pro, it is a breeze to create a basic web button, then apply the filters by clicking Filter>Flaming Pear>Super Blade Pro. Once the filter quickly launches, you are shown hundreds of different variations, colors, textures and styles that you can apply to your plain ole button. I was floored by the beauty and uniqueness of each of the random styles you can sift through and choose from just by clicking a pair of dice. If you don’t happen to find anything that suits your fancy from their myriad of preset designs, you can tweak and torque the many settings and create your own variations from there. The simplicity of this plug-in will amaze you, and the results speak for themselves. Here is an example of what Super Blade Pro looks like once you choose it from your Filter menu in Photoshop:

I was extremely impressed with Super Blade Pro for its fantastic design choices and also for its ease of use. This effect filter gets a rousing standing ovation from me.

Flood – $20 (or $50 when purchased in the Photography Pack, bundled with Aetherize, Melancholytron, and Mr. Contrast)

I have to say this effect is probably the most fun to use of all the Flaming Pear filters. It is exciting to see the results when you open a photo of say, a sunset, for instance, then apply the Flood filter to create your own beautiful “digital water scene” that suddenly appears before your eyes. Add a few of your other extracted elements and you end up with a stunning, creative digital illustration that will amaze you and everyone who sees it. The settings for the Flood waters you immerse your image in vary from waviness to complexity; and wave height to brilliance. It is just a stupendous effect that I personally never tire of. Take a look at the example below to see what I mean:

Once you adjust the settings to get the effect level you desire, and save your base image you’ve just ‘flooded,’ add some of your other graphic elements, such as I have done in the next example below, and enjoy the tranquility of your beautiful creation.

Whatever your desire in a water scene, whether you want to create a glassy pond or a raging hurricane, you can create all things watery with this versatile filter. Flood gets a very lengthy standing ovation from me.

Aetherize – $20 (or $50 when purchased in the Photography Pack, bundled with Aetherize, Melancholytron, and Mr. Contrast)

Aetherize is as its name suggests, an ethereal treatment for any image you choose. This filter is pretty versatile, and allows you to take mundane snow scene and turn it into a wintery wonderland, or a fairytale setting that looks amazing. A snow scene is what I used to illustrate Aetherize, but you can use anything at all. There are tons of well thought-out presets in this filter set for you to try, or you can make your own variation by tweaking to your heart’s content. For an example, I opened an image I captured of some trees with snow falling on them. You can see my results below:

After I opened my snow scene image, I clicked Filter>Flaming Pear>Aetherize, and started experimenting with the different presets. I settled upon the one above that has some interesting and ‘dreamy’ looking colorizations to it. I then did a little tweaking and adding of other elements, and ended up with the dreamy scene below:

I also performed another little trick with this image; I combined filtration by applying the Flood filter to this after the Aetherize filter, to make an even more fantasy-looking composite image. This filter is really spectacular for sending any of your photos into an ethereal or dreamy direction, and gets a very enthusiastic round of applause from me!

Melancholytron – $20 (or $50 when purchased in the Photography Pack, bundled with Aetherize, Flood, and Mr. Contrast)

For my last filter review today, I’ve decided to talk about Melancholytron. This filter isn’t a really heavy-duty effect module like some of the others mentioned above, but it is a lovely addition for those who want to give a bit of an ‘old timesy’ look to a photo by blurring out photo edges and adding a sepia vignette to it. This effect works just splendidly on images that are already heading toward sepia tone, or even on b/w images as well. For this example I am using a photo that I ‘borrowed’ with permission from a friend of mine, Aussi photographer Michael Rowley, who captured a wonderful photo of a pair of glasses on an open book. I felt that this image would really be terrific with the addition of the Melancholoytron filter. See the example:

Melancholytron has many different presets you can choose from, and similarly to the other filters discussed here, also allows you to tweak as much or as little as you like using the settings sliders. For Michael’s lovely photo, I decided on a round vignette with a dark sepia tone to it, which enhances the tinting in the lenses, while gently blurring out the edges of the picture. Below is the finished photo after I also adjusted the levels slightly using Image>Adjustment>Levels. I felt this image just ‘come alive’ after applying the filter. Melancholytron gets an extremely heartfelt round of applause from me.


Photo: Michael Rowley, http://www.keepsakesphotography.com.au

Wrapping Up

With so many plug-in effect filters out there, it was really difficult to pick out just a few to review and discuss, and I barely just scratched the surface here by covering only one of the many plug-in software developers. However, I do plan to acquire more effect filter plug-ins in the near future, and I will certainly share some input with you on those as I work my way through them! It is absolutely amazing how many terrific creative tools are available, and just a few clicks and a free trial download away from you at anytime.

Feature
Post

Category
Publishing

10 Common Mistakes In Redesign

I’ve never been shy of throwing stones in glass houses, hoping that they should bounce away and not make it all come down on me. It’s more fun that way. With the Devlounge redesign around the corner (the theme’s core is more or less done – yes, there’ll be more previews before launch), and after that a similar treatment for The Blog Herald, talking common mistakes in redesign seems like a good idea.

Now, this is by no means a complete list or anything, every site and design has its own needs and do’s and dont’s. See as something to think about before redesigning.

  1. Launching before the new design is cross-browser tested. Seriously, sometimes you’ll stumble onto a redesign by a what you thought was a serious website, and it breaks in Safari, isn’t tested in IE7, or whatever.
  2. Launching without giving your readers a heads up. You should definitely inform your readership that a new design is coming, or have a really good explanation ready when you’ve launched. Chock-launching can work, but in today’s very open and transparent web I think you really should let people know that they might see another design next time they pop by.
  3. Removing all key recognition elements in one swipe. Don’t just null out your previous visual identity, make sure there are some elements left, updated perhaps but recognizable, so that your readers can tell that they’re visiting the correct site.
  4. Making everything harder to find. Let’s face it, you might want to move around elements in your design and that’s fine. Just don’t change everything at once, or if you do, make sure that everything is in the second most obvious place (the first being your old design’s locations of course).
  5. Jumping onto the popular style bandwagon. It’s easy to get caught up in the flavor of the day, being rounded corners or pastels. By all means, take the parts you like into your designs, but remember what you’re redesigning, maybe the style doesn’t fit at all, or maybe it just doesn’t benefit the site. If you really want to do the design of the day, then by all means do, but consider carefully where you use it.
  6. Launching too early. I know, I know, it’s very easy to launch early and say “I’ll fix the rest later”. Well, if you’re gonna do a beta launch, be sure you don’t pull a Google and stay in beta forever. Make sure you’ve got a list of features and additions ready, and plan them, so that your premature launch won’t come back and haunt you. Ideally, your design is done when you’ll launch, or at least appear done, then you can add to it and make it look like tasty bonuses!
  7. Redesigning too often. A new design, again? You should commit to your designs, give them time to exist. Maybe they turn out to be “bad” for your site, then fine, go ahead and fine-tune, but watch out for getting caught in the redesign loop.
  8. Removing features without an explanation. Some features and functions should never disappear of course, like the search box on most sites, but some might not seem necessary anymore. Well, that might be true for you, but you should make sure that it goes for your readership as well. I like to ask the readers, or at least post about why something was removed, with alternate (better) functionality for them to use instead. That way, they’ll complain if I’ve been stupid and ignorant in my feature-slashing, and the site benefits.
  9. Too drastic monetizing changes. This is a tricky one. On the one hand, you need to make money on your site, but on the other you don’t want to make the ads too obtrusive. Every change in advertising on your site, be it contextual text links, image ads, or whatever, should be made with caution. This is one point where the chock treatment will not work.
  10. Pushing too much new stuff. This goes for design in general of course, but adding too many things to a page makes it cluttered and that’s ugly. Since a lot of redesigns are pushed because of the urge to add new functionality, nifty new stuff you have to push out there, this is a common mistake. Don’t clutter it, prioritize, and be wary of what you remove to make room for the new things.

Want to add to the list? Post in the comments.

Feature
Post

Category
Design Focus

Friday Focus: 04/25/08

Designs of the Week

The Things We Make
I find it difficult to read the text, I find it a bit too trendy with the wood background, bold colours, and big fonts, but there is something about the overall implementation of the design that I like.

Mooty Web Design
This one is easy to praise with its beautiful colour scheme, strong graphic style, and clean content area. I am very impressed with the overall energy of this design and would feel comfortable giving a company with a site like this, my business.

Noe Design Studio
The smoke effect at the top is beautiful, and flows well into the rest of the site. There could be more contrast and sharpness in some areas, but overall, I think they have made another great design for their studio.

Social Media Weekly

DesignAll 120 Crayon Names, Color Codes and Fun Facts

DesignCelebration Of Vintage and Retro Design

Programming7 Incredibly Useful Tools for Evaluating a Web Design

ProgrammingBuild a customizable RSS feed aggregator in PHP

Feature
Post

Category
Code

Multiple Languages on any Page Dynamically

Have you ever thought of adding multiple languages to your website or have done so using methods such as creating separate directories for a completely new website with only that one language? The PHP language can make this easy for your site.

To begin, you will need atleast 4 files: index.php, index.html, lang.php, lang_english.php, and any other language file you want in the format of lang_[language].php.

This will work by creating variables within your html files. Such variable would look like {VARIABLE}. We would then replace them with the variables in the language files. An example of how a user would use this would be: Bob goes to your website and the default language is English. He then wants to change the language to Spanish, so he will click on a link in the menu bar. The page refreshes with the new language selection visible.

First we create an html file (index.html) in the default language:

<html>

    <head>

        <title>Language Test</title>

    </head>

    <body>

        <p>Hello World</p>

    </body>

</html>

Then we convert the text into variables and add the links to the different languages:

<html>

    <head>

        <title>{TITLE}</title>

    </head>

    <body>

        <div id=”menu”>

            <a href=”index.php?lang=english”>English</a>

            <a href=”index.php?lang=spanish”>Spanish</a>

        </div>

        <p>{INTRO}</p>

    </body>

</html>

Simple enough, right? Now for a language file. To make things easier, we will use an associative array of strings:

<?php

// lang_english.php

$lang = array(

    'TITLE' => 'Language Test',

    'INTRO' => 'Hello World',

);

?>
<?php

// lang_spanish.php

$lang = array(

    'TITLE' => 'Prueba de Lenguage',

    'INTRO' => 'Hola, Mundo',

);

?>

A note I have to make about variable naming: The variables do not have to be in all uppercase, though it is common practice. You have the freedom to name them anything you want and however way you want to.

The language converter will also act like a pseudo-template engine in which it loads the html, converts some data, then displays it. This is why we created the index.html file above. Now, to load, we can simply use file_get_contents to access the data within the html. We would also have to include a language file based on the user input and then convert using another function called strtr.

<?php

// lang.phpfunction get_lang($file)

{

    // The default lang

    $user_lang = 'english';

// Lets see if the user clicked on a language

    if (isset($_GET['lang']) && !empty($_GET['lang']))

    {

        $user_lang = $_GET['lang'];

    }

// Include a language file

    include 'lang_' . basename($user_lang) . '.php';

// Get the data from the HTML

    $html = file_get_contents($file);

// Create an empty array for the language variables

    $vars = array();

// Scroll through each variable

    foreach($lang as $key => $value)

    {

        // Turn 'THIS' to '{THIS}'

        $vars['{' . $key . '}'] = $value;

    }

// Finally convert the strings

    $html = strtr($html, $vars);

// Return the data

    return $html;

}

?>

The comments within the function should be enough. Now going on, we need to use this within index.php:

<?php

// index.php// Get the function

include 'lang.php';

// Convert and display

get_lang('index.html');

?>

This pretty much sums it up on how to create a page with multiple languages. All you need to do is add language files (lang_[language_name].php). You may also order the structure of your site by keeping the language files in its own folder like /languages/ and put the html files into a directory like /html/. You must also adjust the paths in the function and everywhere else to suit a new structure you put in. Also, so that the user wont have to click on the Spanish conversion link every time, you may also make it work via cookie, or via a database if the user has an account on your site.

Source Files

Feature
Post

Category
General

How to Use Adobe Illustrator to Create a Unique Distressed Text Effect

I was just surfing around the net the other day, and I started thinking about the myriad of varied text treatments I was seeing on different banner graphics. I decided that it is more interesting to design your own textured background for text rather than try to find an actual typeface on one of those free font download sites such as Fontgarden.com or Stomp.com, etc. I bring up these “free” font download sites because if you are going to use such a typeface from one of these sites, you usually have to pay for it in the long run if you want to use it on anything that is of a commercial nature, such as your website! It is always a good idea to check into the ramifications of downloading anything that is deemed as “free” anyway, regarding the legal copyright and usage of such elements. So, to get around any usage issues that could arise from finding a distressed typeface on the Net, and incorporating it into your web design, I decided to share this quick and easy Adobe Illustrator tutorial with you.

Step one of this process was to find a typeface on the Net that sported a similar treatment to the “distressed” look I wanted. Although I wanted something a bit more radical as far as the “distressing” part was concerned, I did come across this text treatment on the website of boxer Joe Calzaghe:

You get the idea of “distressed” or “beat up” text from Joe’s name on this banner graphic. While I liked this, and found it unique, I thought it might be interesting to push the envelope a bit, and come up with a considerably more distressed or “textured” look than this, while still making the text legible and eye-catching.

Taking the Steps

Open Adobe Illustrator (I used CS2), and then File>Open an image that has a lot of contrast and would make a good textured background to use as a base for your distressed text. For this, I cropped a section out of a larger photo of ocean and beach to the dimensions of approximately 8 inches wide and 2.5 inches high, and resolution of 150 ppi:

I felt that this photo had a lot of gritty little details that will translate to an interesting, highly textured base for my text treatment.

In Illustrator, select the image with the Selection tool (V) and then Object>Live Trace>Tracing Options. You want to see Tracing Options so you can modify some of the settings, and preview the results before you convert the image. In the dialog, enable the Preview option. The other Presets should be left at their default. This trace you are about to do, will output in black and white, which will be best to work with for this particular effect we want. You will also want to change the Threshold value, which controls the amount of black or white that appears in the image. We want as much detail as we can get, so I suggest using a value of around 75 or 80. But, don’t take my word for it, mess about with this yourself, the values can be adjusted right there in front of your eyes since you have the Preview button checked. Adjust the black and white image to have plenty of small details, and when you are happy with the Threshold value, go ahead and click the Trace button.

Next, in order to use this tracing, we need to convert it to paths. So, while the tracing is still selected, pick Object>Expand. In the dialog that comes up, click OK. For this project we want to work with the black areas only. Choose the Magic Wand tool (Y), select the white areas, and then press the Delete key (Mac) or the Backspace key (PC).

Now we will be placing some text over a portion of your new texture background and thus be able to get an idea of what the distressed text will look like. To accomplish this, click down below your texture somewhere else on the artboard, and choose the Type tool (T) and type something. I used “DIGITAL” for my example. I used a large font size, something like 60 or 72 pt, and chose the plain Arial Black, a font that’s free to use. I also switched my type color to blue in order to view this part of the operation more easily. Once you’ve typed your text, move this text onto the texture background and move it around until it is in a place where you feel the most texture will be applied.

Let’s have a look at what the text will look like once applied to our text by creating a clipping mask that uses the letters as a mask. Click Command+A (Mac) or Ctrl+A (PC) to select both the text and the texture, and choose Object>Clipping Mask>Make. Once you click again outside of your texture area, you’ll see the text revealed on its own, with the texture showing through it. In case you may not like how it looks at first, undo the clipping mask and move the text around to another area of the texture background and repeat this procedure again. Another option is to scale the texture background up or down or rotate it, distort it anyway you want that will help you achieve the texture on the text that looks how you want it. Here is what my text looked like:

For my purposes, this turned out exactly how I wanted it, a little distressed, but still clear and easy to distinguish the letters.

At this point, we want to delete some of the excess texture background, which we don’t need to keep, as it just is not needed, and makes the file size larger. First, we undo the clipping mask by clicking Edit>Undo Make Clipping Mask. Open the Layers palette and expand the layer by clicking on the arrow next to the Layer 1 thumbnail. Click on the texture Group layer to highlight it in the palette. Option+click (Mac) or Alt+click (PC) the Create New Layer icon, and name this layer “Square” in the Layer Option dialog, then click OK. This positions the new layer between the text and the texture.

Make sure the new layer called “Square” is highlighted or activated, and select the Rectangle tool (M) and draw a rectangle over the text and texture you want to keep. I suggest keeping the rectangle as close to the text as possible without clipping any of it. Click Command+A (Mac) or Control+A (PC) to select all. Open the Pathfinder palette (Window>Pathfinder) and click the Crop icon. See example:

What happens next, is a Live Paint Group, which is indicated by a grey rectangle around the artwork might appear after you click crop. If this occurs, just use your Selection tool and double click in an empty area of the artboard to disable it. Now you can safely reapply the clipping mask on your newly cropped artwork. Click Command+A (Mac) or Control+A (PC) to select your text and the texture, and then click Object>Clipping Mask>Make. Now you have a very unique piece of text that has a sort of ‘worn out’ or distressed appearance in your arsenal of special effect elements!

At this point you should File>Export and Save As a .jpg or other format file for use in your web designs. This can be opened in Photoshop now, and subjected to some more special effects if you so desire.

Wrapping Up

Although this is a simple enough procedure, it has a few specific steps, and may not be suitable for everyone wanting a text effect solution. This is offered as just one of the many options available to designers in search of interesting text treatments, and it also provides a nice opportunity for those not as comfortable using Adobe Illustrator to advance their creative skills in that program a bit!

Feature
Post

Category
Code

Anatomy of a Movable Type Template

In my last post, I talked about the different types of templates and what they’re used for. Now that we have a feel for what our templates do, let’s take a closer look at one and see what’s going on inside. More →

Feature
Post

Category
Design Focus

Friday Focus: 04/18/08

Designs of the Week

Clean designs are my favourite, and I think that todays list are especially nice. The last in the list, Omnitech is very “AJAX” heavy, which I am not a fan of, but both its dark and light incarnation are fairly beautiful to look at.

When creating a “simple” looking design, typography, element placements, and colours are even more important than in a design that has much more in the way of graphics, images and content types to work with.

David Sutoyo

OmniTi

Poccuo

Omnitech

Social Media Weekly

DesignEmersian
No, there is no specific post I want you to see, but instead the whole site. Written by Paul Scrivens, the site takes a hard look at design without being too snobby. I highly recommend reading it, as it is very interesting and honest.

DesignHow to Blog Design Style Guide
A great list of inspiration when planning a blog design with some tips, tricks and information included. They start from the header and work their way down. Very nice list, though it only helps to remind me of my own incompetence as a designer.

ProgrammingWhat Makes a Great Developer?
Developers, be they web, server, mainframe, or desktop are a different breed, with an interesting way of looking at things. I Love Jack Daniels breaks down the personality of a great developer.

ProgrammingNo CSS Reset
Jonathan Snook doesn’t use no stinkin’ CSS reset code when developing sites, and he talks about why in a recent post.

Programming3 SEO Tools Worth Your Time
Stop paying an arm and a leg for horrible SEO, and learn to do it yourself. Some great starting applications that will help you with the basics of SEO on your site or blog.

Feature
Post

Category
Code

Typos Killing Your Code?

One of the most frustrating things that programmers have to deal with is typos. If you forget something regarding syntax or accidentally misspell a variable name, your program can start doing weird and wonderful things or spitting out errors that are less than helpful.

A friend of mine Jonathan Snook recently wrote about this on his blog.

Here’s the code that wasn’t working for him:

Can you see the issue with it? It took me a while to figure it out, and I tried not to read ahead, and once I realized what the issue was, I couldn’t stop seeing it. Unfortunately, if this was part of a many thousand line file, you might never be able to find the error in forrest of code.

if this was part of a many thousand line file, you might never be able to find the error in forrest of code

If you’re more observant than I you’ll notice that the second A is missing in javascript. Without a proper MIME type, browsers don’t process the script leaving you with…nothing. Imagine my amazement when none of my functions worked, with no error messages, no nothing.

I have often forgot to throw in closing quotations in items, or a semi-colon in my PHP that has lead to errors on the screen that were less than helpful. This is always the issue when creating vast amounts of code. Your attention to detail has to be at one hundred percent, or you will find yourself pulling out your hair.

Of course you can build in error reporting that can help with this issue, and there are extensions for Firefox that might help in debugging, but I definitely recommend that developers use an application that does syntax highlighting for their code, as it will sometimes make errors apparent by a line being the “wrong” colour. I currently use Crimson Editor on my Windows box, and Smultron on my Mac. Both applications are free, lightweight and powerful.

Better still though, according to Jonathan and others, are applications that help with completing your code.

The two most popular suggestions seem to be E – TextEditor for Windows and TextMate for Mac. Neither are free applications, but both seem to be considered valuable by a myriad of people.

What are your favourite light-weight, advanced text editor applications, and please, no Dreamweaver.

Feature
Post

Category
Code

An Introduction to Movable Type Templates

If you’ve installed Movable Type recently, there’s a fair chance you looked at the templates and were immediately overwhelmed. Don’t feel bad, you’re not the only one. By default, MT ships with no less than 56 different templates — all to publish a blog with a single style. You might find yourself asking…

What are MT templates for, anyway?

The templates in Movable Type format the output of your blog. When you write a blog entry and click Publish, MT figures out — based on the date, category, etc. — which of your template files to use in generating new pages on your blog. It reads each template, plugs in the data from your entry, then outputs the new file as part of your blog.

The list of template types in MT.As you poke around in the templates, you’ll find some of them refer to other templates, while still others don’t seem to be used at all. And while this can make MT confusing, it also makes it very powerful. All those templates make customizing your blog much easier.

To understand MT templates, you need to understand the different types and what we use them for. MT templates are all about context. The context of a template determines what MT tags you can use within that template. It’s also possible to establish your own context within a template to customize the output. For example, the <mt:entrytitle> tag only makes sense in the context of an <mt:entries>. The individual entry archive establishes that context automatically. But, if you wanted to put a “Featured Entry” in your sidebar, you would need to create an <mt:entries> context within the sidebar.

We’ll get deeper into this in future posts. For now, just keep in mind that context is important for tags, and templates help to establish that context.

Let’s take a look at the different types of templates:

Index Templates

List of templates in MT.Index templates don’t have a context by default. Instead, you create context within them through the use of container tags. This is a very powerful feature, because it allows you to publish your entries as anything. Index templates are used to produce RSS and Atom feeds for syndicating your blog. You could use one to produce a CSV file that you could import into Excel. Any kind of text file can be generated by index templates — they don’t even need any MT tags in them. You can use them to maintain your CSS and JavaScript files, if you want.

Archive Templates

Archive type options in MT.

Archive templates are used to publish entries and pages, either individually or grouped together based on category, date, or author. How an archive template gets published depends on its type (assigned when you create the template) and the archive mappings associated with it.

Archive Template Types

There are three different types of archive templates. The type of template determines what context the template has when it’s published:

  • Entry – Entry templates are for individual blog entries. They have an <mt:entries> context, which is filtered down to a single entry. You can use tags like <mt:entrytitle>, <mt:entrybody>, and others. Typically, this is the template you’ll use to publish an entry and its comments.
  • Entry Listing – Entry listing templates are for a group of entries. These are your category archives, date-based archives, or author-based archives. They filter the entries to publish based on the archive mapping (more on that in a bit). These templates create a context for tags like <mt:archivelink> and <mt:archivetitle>, as well as more specific tags based on what kind of archive it is.
  • Page – Templates for individual pages. These tend to be very similar to Entry templates, since Pages are just entries that exist outside the flow of the blog.

Before you can publish an archive template, it needs an archive mapping. The mapping tells MT where to publish the files and, in the case of entry listings, what type of archive to publish. An archive template can have multiple mappings. This can be used to publish the same templates in different locations. With entry listings, this allows you to use the same template to publish all your archives — categories, date-based, and authors.

The archive mapping drop-down options in MT.

Template Modules

Template modules are snippets of template code that are called from other templates. If you are familiar with PHP or SSI, think of it as an include. In fact, that’s exactly how you use it:

<mt:include name="Header">

Template modules do not get published on their own, only when they’re included in another template. You use them for pieces of code you want to reuse. They make it easy to have the same header and footer across all your pages, for example. Anytime you find yourself using the same code in multiple templates, it’s a good idea to evaluate whether you should pull that code out and put it into a module.

System Templates

System templates are used for pages that MT has to generate based on an action taken by a reader, such as posting a comment or searching your blog posts. These have their own contexts, and they have a few quirks because of how they’re generated. We’ll explore system templates more in an upcoming post.

Widget set interface.Widgets

Widgets are just template modules, but by declaring them as widgets we can use them in Widget Sets. Widget Sets give us an easy drag and drop interface for customizing our sidebars, footers, and more.

Backup Templates

Sidebar that displays includes and tag information.Backup templates are copies of templates that have been replaced by MT. This can happen if you use the Style Catcher to change the look of your blog, or if you use “Refresh Templates” to restore your templates to the defaults.

I recommend taking a look at the different templates to get an idea of how they’re structured. We’ll go deeper into this in future posts, but for now just try to get a sense of how the different templates are connected. You can do this by opening the templates and looking at the information to the right of the template. This will tell you what template modules and widgets are included in the template, and what MT tags are used. The tags link to the MT documentation, which can be useful for learning what the tags do.

Have a question about MT templates? Let me know in the comments.

Feature
Post

Category
Webapps

Upload And Manage Your Images Online For Free

Doing all that reviewing of online image editing software really got me thinking about what else can we do with all those neat images once we’ve done massive editing and reworking of them? So, I decided to look into some of the many online photo storage sites, several of which I already belong to, and write a quick review of some of my personal favorites!

Redbubble

Redbubble is an astonishingly complete site for uploading and organizing your images, and it has a whole lot more to offer than most of the others, that’s why I’ve decided to review the “very best” right off the bat instead of saving it for last!

This site is a relative newcomer to the Net, only being around for about a year. Even so, it is such a powerful site and community, that it earned itself a honorable mention from the much coveted Webby Awards! It deserves the recognition, believe me. At this site, you can pretty much upload your entire catalog or repertoire of large images for free, and that’s only the beginning!

What’s great and amazing about Redbubble is that it is a veritable “United Nations” of photographers, fine artists and writers. Everyone there has the ability to create their own personal page or “gallery” full of their work, whether it is art or prose, you have a place to do your thing for absolutely free. What else is fantastic about the “Bubble” is that you have the opportunity to actually sell your work, seriously! You can choose several different format options for your art and sell it as prints, greeting cards, or posters, whatever you want! Heck, you can even design and sell T-shirts of your art work. How cool is that?

Both the management and members at Redbubble host tons of interesting groups that you can join and participate in within the site. Lots of fun contests are running most of the time, and you can even be honored by having a piece of your artwork ‘exhibited’ on their front page. Lots to do all the time… you can never, ever get bored on the Bubble!

Another wonderful aspect of the Bubble, and perhaps my favorite of all, is the ability to meet people across the globe from Australia to America, England to Dubai, or Portugal to Canada, it doesn’t matter about the time differences, people will just gravitate toward each other, and have an opportunity to network with other like-minded artists and creative people. You can also comment and critique others’ works, and have your own work critiqued by your peers and friends. It’s just a wonderful place to go and find others like you, and have a great time talking to many diverse peoples all over this big Bubble we call Earth. I absolutely can’t say enough about this site, it’s really a ‘home away from home’ inside my computer! This online cybercafé, art gallery and community gets the absolute most rousing, foot stomping, Bic-flicking standing ovation from me ever!

Flickr

Flickr is a neat little photo and image storage site that allows you to login to it using your Yahoo email address since it’s a Yahoo company. What I like about Flickr is that it allows you to connect a little photo slideshow to your blog at Blogspot.com should you have one of those blogs like I do. It is a nice little place to do some very limited photo editing, and it has a nice drag and drop feature to allow you some batch processing say you want to resize a bunch of images from your ‘photo album’ on Flickr. One issue I have with Flickr is that it only allows you to upload 100 MB worth of your images per month, that is if you don’t have a premium account that costs about $25 bucks per year. This is probably okay with most people, but I’m one of those folks with tons and tons of huge images, so this site isn’t probably as flexible as I need it to be for my own needs, but it is a nice site and worth a look! Flickr gets a big round of applause from me for its ease of use and uploading, and for its little slideshow feature!

York Photo

York Photo is a wonderful site for all things image-related. What I like about York is it reminds me of an old style photo lab in that it allows you to upload you images and then order prints of them quick as a flash. Their offers and deals are unbeatable if you want to upload tons of your hi-res images and then have copies sent to you for very cheap or free, that’s right, York gives you so many freebies just for signing up. I am on my second round of “25 free prints”, which is fantastic in my view! This site also lets you have some flexibility in creating gifts out of your photos like mugs and mouse pads, T-shirts and greeting cards, and their prices are competitive. But wait! They even offer free shipping on lots of your orders, so they’ve definitely got my attention. This site gives you unlimited upload and storage capability, and the best part of all: Their printing is superior. I received some free copies of some of my uploaded images the other day, and the prints were just spotless and brilliant. They aren’t too bad with turnaround time either, and if they should falter and take a bit too much time getting your prints to you due to their high order volume, they e-mail you, and reward you by adding more freebies to your account. Everyone would be well served to sign up at York, it is well worth going there to check it out! York gets a rousing ovation from me for their great service!

Snapfish

Snapfish is a very nice photo storage program that is owned and run by Hewlett-Packard (HP), so you can bet that the quality is there, and is something worth looking into. This site offers you cheap prints for around 0.9 cents each, which is nice, and also gives you a sign up bonus of 20 free prints. When you login to Snapfish you’ll notice the GUI is very similar to York Photo, and they also use the same FTP, so it’s six of one and half a dozen of the other, but nice and easy just the same. Snapfish has also been around for quite a number of years, as has York, and I believe you’ll enjoy using both of them. You can never have too many photo upload sites bookmarked on your computer! Snapfish gets a very warm round of applause for their nice upload site.

Final Thoughts on Image Upload Sites

I must say I am very impressed with the quality, upload speed and ease of use of all four of the sites I have reviewed in this article, and I am confident there is something for everyone on any of these sites. Another plus for having your images uploaded to any one of the sites I’ve reviewed above is that you can copy and paste the link from your photo directly into your blog or websites, and then viewers can see your photo without it physically being located where your sites or blogs are. Very convenient! Whatever your needs are with regard to digital image processing, from storing large amounts of high-resolution images to printing copies of your photos, and even networking with a bunch of fantastic, like-minded, artistic individuals like yourself, it is definitely worth a few minutes of your time to go and visit these sites and have a look around!

Feature
Post

Category
Design

A Great Example Of Integrated Tweets

You know Twitter, that lovely microblogging service that Gapingvoid just left because he didn’t do much more than, well twittered? The same service that Robert Scoble heralds, and Jason Calacanis is aiming to dominate? Yes, that Twitter, the same Twitter that I’m on, and sharing space with the British government.

Since Twitter is addictive, lots of bloggers have decided to start importing Twitter content into their blogs. It’s nothing new, with several plugins available, the most popular one might be Alex King’s Twitter Tools, but I don’t know for sure. Either way, it’s a sure way to make your blog totally uninteresting, ugly, and boring. Think about it, who wants to read your tweets in a bullet list, hours after they happened? Chances are, most people don’t want to read them at all, especially when you’re offering a discussion with some friends, interesting only to those involved, but nevertheless cluttering your blog in a most hideous manner. Don’t take that last link to seriously by the way, Jeremy came to his senses

Still, your tweets are content, and maybe you want to attract the people who actually do care about what you have to say on Twitter to your account. Then integrate it smoothly, like Twisted Intellect, the most beautiful example of displaying tweets on a site to date:

Pretty Twitter integration

Pretty huh? I’m sure there are several others who’s doing this right as well, but I was actually quite blown away by this today. I’m a fan of serifs though, especially classy work with italics, so the site pretty much appeals to me.

The Rules of Twitter on Your Blog

Follow these rules when integrating Twitter on your blog or site, and you’ll be fine.

  • Don’t treat tweets as regular content! Put them someplace to the side, by themselves. Posts are content, tweets are, well, tweets.
  • Don’t give your tweets too much space! Think about it, does they really add that much to your blog to begin with? Shouldn’t you push your real content with that space instead?
  • Don’t show too many tweets! Really, how interesting are they after a while? Better to show just a handful, than to push out a RSS feed from your Twitter account containing 10 tweets, where 7 are from days past.
  • Don’t integrate Twitter unless you use it! What’s the point of displaying your tweets if they are not up to date? I’ll tell you right now, there is none.

Ready to follow that? OK, then please, please, please ask yourself yet again if your tweets actually add value to your blog. Maybe a link to your account is good enough? Chances are, for most of us, it is.

Have you seen other great integrations of Twitter content on sites and blogs? What’s your take on all this? Tell us in the comments, I know I’m dying to know.

Feature
Post

Category
Design Focus

Friday Focus: 04/11/08

Designs of the Week

I had a harder time picking designs this week, and it isn’t because there weren’t any good ones, but none of them suited the style that I wanted to convey this week. I am on the hunt for simple designs, like the Club Joomla design I feature here today, that while simple, are actually complex when you really look closely and dissect how they were designed and coded. If you have any designs that you think fit the bill and you haven’t seen them featured here before, please let me know in the comments below.

Chris Garrett Media
Chris is someone I know fairly well, and I have pretty much always been a fan of both his design and development work. His latest company website is a little too modern for my liking and the contrast isn’t as strong as it maybe should be, but there are some effects, and object placements on this design that I really enjoy. I would have been even more impressed if he took a page from the 9rules folks and did something similar to what was done on 3by9, where the colours transition as I am not really a fan of the default colours he chose.

Michael Potts Photography
A very dark layout with good contrast and a good colour selection. I like almost everything about this design but I don’t feel like it sells his service well enough, despite the beautiful image front and center showing off the amazing things that can be captured by an expert in wildlife photography.

Club Joomla
I love the simplicity, and style of this design. Everything is silky smooth, and very easy to read. I am impressed with how many small graphical elements are needed to make a beautiful but simple looking design. Designers have to have really good attention to detail to get a design looking so great.

Digg Weekly

I am starting to think that the Digg Weekly should be changed, and I want to know your thoughts on this. There are so many better social media sites for programming and design that we could be taking from especially since the Digg community doesn’t give these two important sections much attention. Do you have a favourite design or programming related social media site? What is it? And should I change this section to Social Media Weekly? Let me know in the comments below.