Designs of the Week

I like that icons were used to represent the posts. More importantly, that the use of icons wasn’t just an afterthought. They comprise more than half of the “look” of the front page, which means it’s the content of the website that dictates the design. (By the way, they released an icon set for the iPhone with the same black-and-white style!)

I just love how the top navigation links, the welcome blurb, and the feed/bookmark chicklets are being thrashed by the green monster. As you scroll further below it gets less exciting, but what the heck. First impressions last, right? Maybe, but the abundance of artworks is key here. Don’t stop with the blog posts. Give the audience as much as you can. A good design is nothing without great content, so let them consume it!

Social Media Weekly

Programming - CSS Homer Animated
This is the animated demo of how Roman Cortes drew Homer Simpson with CSS. This has been around for a couple of weeks now, so you might have seen it already. If not, make sure you do or you’ll miss one of the best CSS projects ever made.

Progamming - CSS Qualified Selectors
Very, very, useful. I’ve been wishing for this type of CSS selector exactly because of the first example Shaun Inman wrote in this post. He’s asking for feedback, too, so be sure to share your thoughts while you’re there.

Design - Face to Face: An Interview With Nadine Chahine
I rather like this article because it’s rare to find a discussion about foreign type. The challenges of creating beautiful, legible type in a completely different set of characters from the Roman alphabet is just fascinating.

Design - The Untold History of Web 2.0 Fonts Pt. 1
Because we all like to find out what typeface is being used when we come across a famous logo. This list goes a step further and recommends free font alternatives.

This is where you come in, dear reader! I’m asking you, which forum should I choose: Vanilla or bbPress?

I came to the conclusion that it would be one of these two forums after contemplating these criterias:

1. It has to be opensource and free. Lots of good commercial solutions are out, like vBulletin. Not a money issue, more like a principle…
2. I want a PHP forum running MySQL (or similar). This is because this is something I know something about, and most hosts provide decent service.
3. I want the forum to be pretty lightweight. Basically, I’d rather add plugins for special features, than have everything crammed in there at once.
4. The forum needs to be pretty easily customized. So phpBB is out, and so is PunBB. Not that these are necessarily bad forums but phpBB is pretty clunky, and PunBB won’t commit to CSS full-time until the next version.

After much consideration, I went with Vanilla or bbPress. Both are opensource, lightweight, and cool new players. Also, I like the tag support.

So which one?

Pros & Cons: Vanilla

Let’s start with the good:

• Seems to have decent support and a fair amount of extensions.
• Easily integrated with X, including WordPress, which I’ll be doing for a client soon enough.
• Nice “new” forum layout to build from, always a good thing.
• Good reputation online.

Then the bad:

• Nobody I know have styled nor run it, so I only have second-hand opinions.
• Documentation could perhaps be better?
• The nice “new” forum layout could mean that I have to reshape everything whenever I want a more customary approach.
• Not sure about the theming…

Pros & Cons: bbPress

Starting with the good things again:

• Automattic, makers of WordPress, is backing bbPress, which feels safe.
• I have run several bbPress forums for editorial groups and such. Small, but they’re working OK.
• Very fast and lightweight!
• Akismet spam protection, thank you very much!
• Theming to be close to WordPress, which is familiar to me.

And the bad things:

• It’s not in 1.0 yet. Who knows what will happen? Is it really ready for a public site? (Probably.)
• Maybe too lightweight? Everything besides writing forum posts is a plugin, not even support for private forums. That’s not good.
• I’ve had issues with upgrades when using the Swedish language. This is a problem that should be fixed, but it could theoretically be an issue until 1.0.
• The admin interface is poor at best.

Help Me Pick: Vanilla or bbPress?

I’d like to hear what you guys think, since I’ll be spending some time playing with whichever it’ll be, and that means possible tutorials and more for Devlounge. Might even release a theme or two, we’ll see…

Which one and why? And remember, it’s either Vanilla or bbPress, nothing else I’m afraid.

Procedure

First, open your ‘base image.’ In the example below, I used a scenery shot of a field with a hill and lots of green grass and trees, and also a foreground tree overhang for depth. When working with your base image, remember that you are going to be cropping the final image to fit into the constraints of a banner, which will vary depending upon the site you are designing for. In the example I will show you, the final finished banner size will be (in pixels) 600 wide, by 300 high, at 72 ppi. So, with this in mind, mentally select a focal point area in your base image, and after a few adjustments of this base image, and the addition of several graphic elements, we will crop it to the correct size.

For the next step you will simply go to the Layers Palette and drag this background layer down over the New Layer icon (at the bottom of the Layers Palette next to the Trash Can icon), which will duplicate your base image. At the top of the Layers Palette choose Multiply from the little pull down menu bar. This will darken your base image markedly, so be sure you started with an image that wasn’t dark to begin with, something that is a lighter or medium range in darkness and contrast should do fine. Example of the results of this step below:

Next, we want to start adding some graphic elements, so I opened up a photo of the Moon that I captured, and selected it with the circle marquee tool up at the very top left side of the vertical toolbar, and copied and pasted it onto my background image using CTRL+C followed by CTRL+V. At the top of the Layers Palette you will now see the Moon layer. I also clicked the pull down menu at the top of the Layers Palette, and selected Screen, which eliminates any of the black background my moon was sitting upon. It also helps it blend into the cloudy background a little, and remains a bit transparent so the tree branches show through it, giving a bit of ‘false depth’ to the image. Here is an example of this part of the procedure:

For the next step of our image creation here, we need to click on Layer>Merge Visible (this command is close to the bottom of the Layer drop down menu) so that we basically merge all three of the layers you have so far, in order to be able to apply a special effect from our Plug-ins. Once you have performed the Merge Visible command, you will see that there is now just one layer called Background. At this point, call up your Flood plug-in Filter>Flaming Pear>Flood, or anything else you may have available to make the effect of a glassy lake on your base image. Click OK once the settings of Flood are where you like them, and you should have an image that is like the one below:

Okay, we are getting very close to the end of this exercise, but I felt like this picture was still a bit plain, although it is coming along. I decided that it might look nice to plonk another graphic element in the mix, so I opened up a photo of a boat that I took some time ago, and just simply dragged that onto my nice background image. I made a few minor adjustments of the boat, such as Edit>Transform>Scale, to make it smaller, and I also moved it around until it was in a place that looked good to me. Here is a view of this step:

This looks all right, but the boat seems to be floating in space rather than on the lake I just created, so that must be remedied! What is nice about Photoshop, is that it lets you apply effects to each individual layer. In other words, I can add the Flood effect to the boat individually, and make it look like it ‘belongs’ on the water there, blending in. Making sure the boat layer is active or highlighted in the Layers Palette, click on Filter>Flaming Pear>Flood, and try to match up the reflection with the bottom of the boat, so that no space is between the reflection and the bottom of the boat. See the example below:

Once you click OK, the effect will apply to the boat, and will make it look like it belongs in the picture as the example:

We are nearly finished, we just need to crop the image to a more ‘banner-appropriate’ size, and then add some text. So, let us begin by cropping this large image to something more manageable for our project banner. First, click Layer>Merge Visible again, so we get all the layers merged together. Now, grab the Rectangular Marquee tool, the top left tool in your vertical toolbar, and drag it inside your picture taking a chunk of your image that includes the main elements like the Moon and the rowboat, plus some of the water. You will want to then click Image>Crop, and take a look at what your markedly more banner-sized image looks like now. See the image example:

My image turned out to be about 600 pixels wide by 315 pixels high. This size is fine for my Blogger format sites. You may need to experiment with the size for your particular application. Next we will add some text, and then you will be finished with a very nice, creative, and unique banner for your blog or for a web site.

To complete this process, Click on your Text Tool in your vertical Toolbar. I chose a font called Poplar Std. which is a tall, blocky typeface. Type your title in the color you desire, and then apply a drop shadow effect to that type using the effects button located at the bottom of your Layers Palette, second from the left (looks like a black circle with a scripted “f” in it), and choose Drop Shadow. Click OK. The example turned out like this:

Now it is time to click Layer>Flatten Image to merge this new type layer with the rest of your design. Once you flatten the image, be sure to save it as a .jpg, and you are ready to upload it to your site. Here is the example of my final flattened image:

Wrapping Up

This might seem like a rather involved process just to design a web banner, but if you are interested in experimenting and working with layers in Photoshop, and creating something that is unique to your design elements and creativity, this is a very quick, fun little exercise to try out. This tutorial required the use of the Flaming Pear plug-in for Photoshop called Flood. However, you can do just as well without that step, and create any kind of composite layer image you like. The creativity part is literally at your fingertips!

Designs of the Week

Visit the site first. Okay, are you breathless? Bryan Katzel’s portfolio takes the use of scrolling and background images to a whole new level. Everything is on one long page, but when you click on the navigation tabs to visit each section, you get an animated scrolling effect. The uniting element in the page, the 6 colorful rays, move through different “scenes” before reaching the desired destination. It’s almost like a loading screen in Flash-based websites, but instead Bryan uses layered images, which masks the rays to create different shapes using good old HTML, CSS, and JavaScript. An awesome feat.

Perhaps the only problem I have is that the screenshot is not as compelling to look at compared to the experience you will be rewarded with when you’re on the site itself.

Another interactive website, this time by Nokia. It’s for their N-Gage platform, and I have to say, they really know what they’re doing. Because the site is Flash-based, it takes a while to load, but in the meantime visitors can play Block Breaker, with the bar shrinking until the loading completes. That’s compelling right there—you have to concentrate harder on the game as it becomes more difficult, so you stay on the site. When you enter, you get to watch a stop motion video of a snake formation. Then you play Block Breaker again, but this time using humans as the pieces. Finally, there’s another video of the longest snake formation slithering around the city. All very big, amazing “installations” put online.

There’s not much to be said about the literal appearance of Get Out And Play as a website, which might have you wondering why it’s here on Friday Focus, but design is not just about looks. It’s about coming up with a concept and conveying it in a certain way. That said, the website went for a realistic feel. It’s all about translating well-loved games like Snake and Block Breaker to the real world, which, with the help of stop motion animation, makes for a very quirky and casual feel.

Social Media Weekly

Design - The Role of Sketching in the Design Process
Sketching is an almost irreplaceable part of the design process. Or any conceptual process, really. This article explains five important uses for sketching.

Design - 16 awesome Aviary tutorials
Aviary is a very promising design suite running on Adobe Flash. These tutorials show what you can achieve with it, but you can also apply the same concepts on Adobe’s products like Photoshop.

Design - eXtreme Type Terminology
This is the first part of several in-depth lessons on typography. Do check out the rest of them, linked at the end of each article.

Programming - Getting Started with Ruby on Rails
The April 22 edition of A List Apart focuses on development using Ruby on Rails and this is one of those articles. For everyone who is curious just how easy to learn RoR, this article is a must-read.

Programming - 51+ Best of jQuery Tutorials and Examples
I fancy jQuery more than any other JavaScript library because it’s built so intuitively. This article should be a good starting point for everyone who wants to learn it.

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.

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.

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.

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.

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

Design - All 120 Crayon Names, Color Codes and Fun Facts

Design - Celebration Of Vintage and Retro Design

Programming - 7 Incredibly Useful Tools for Evaluating a Web Design

Programming - Build a customizable RSS feed aggregator in PHP

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.php

function 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

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!