Jody has written up all the gory details from our river trip a few weeks ago. He’s got some awesome pictures, too, so why don’t you pay the ol’ gimp a visit and see what’s shakin’?

In the first installment of our series on search engine optimization we introduced the search engine, and discussed what it is they do that makes us feel so warm and gooey inside. We established a maxim that clearly spells out what makes search engines so appealing to internet users. To recap, our maxim is:

Search engines are powerful and useful if and only if they consistently return results that have content relevant to what people are looking for when they enter particular search terms.

If we want to optimize our websites to be included in relevant search results, it would appear that our mission is to figure out how search engines filter their search results, and then tailor our content and designs to cater to these criteria. The history of search engines, however, is littered with the bodies of those who were slain in the arms race between relevant search results and irrelevant websites. Today we will take a brief tour through the history of search engines, to clear the air over which optimization techniques we may find effective, and which ones will cast our website into the depths of Hades like so much horse malarkey.

A brief history of search engines

Way back in the early 90’s or so, there were websites. Pretty soon there were a lot of websites, and people needed a way to wade through them. A few primordial search engines crawled out of the muck, and at first they did a pretty decent job in helping people find what they were looking for. These early search engines relied heavily on HTML <meta> tags, which were intended to explain what sort of content one could expect to find if they visited a particular website.

Ideally, your <meta> tags would accurately explain the content on the webpage that they were included on. They could have said anything, really, from "kings quest walkthru" to "pranks to play on your roommate" to "pictures of kittens". So long as people who built websites played by these rules, people who searched websites would find what they wanted.

The golden years of search engines didn’t last very long, as "webpage makers" (you could hardly call them web designers) quickly found ways to exploit the weaknesses in these early search tools. All it takes to ruin a perfectly good infrastructure is a group of people with sufficient motivation to do so, and one came along soon enough.

Pr0n0graphy sites started popping up in all the nooks and crannies of the internet, with their <meta> tags filled to the brim with words and descriptions. Mind you, these <meta> tags were not confined to words that would curl linoleum. Oh no. As time went on, the <meta> tags on pr0n0graphy sites co-opted every search engine keyword known to mankind, such that a search on any term (from "monster trucks" to "compaq 8086" to "pictures of kittens") returned nothing but page after page of irrelevant smutland.

It got worse. Search engines tried to smarten up by increasing their sophistication or enforcing coherence between <meta> tags and page content, but the search engine exploiters got smarter in turn. They twisted their websites so that search engines would actually see completely different content than internet users. Techniques like invisible text, commented-out text, or black text on a black background all but ruined the ability to search the web.

Search Wars: A New Hope

It was a dark time for the internet until a beacon of hope lit up on the west coast. Along came Google, which sliced through the smut and revolutionized the way search results were returned. Suddenly, everything was relevant again. Well, not everything, I suppose, seeing as how that was the problem beforehand…

Suddenly, everything that was relevant was relevant again! Google burst onto the scene in the late 90’s and today it is by far the most widely used search engine, chosen by nearly half of the browsing community as the search engine of choice.

With those numbers, it makes sense that Google is typically the target of obsession with search engine optimization practices. It begs the question that if Google is so darned great, and if people love Google so darned much, how do we get ourselves way up high in Google’s search results?

"If only we knew Google’s search criteria," you may say, "we could once-and-for-all write our website to be a Google knockout." Of course, it’s not that simple. Take a moment to consider this. If we knew absolutely how Google selected its search results, and if we could optimize our websites to specifically cater to Google, then there would be absolutely no reason for us to cater to Google. Huh? Why is that? Why this paradox?

Remember our mantra: Search engines are powerful and useful if and only if they consistently return results that have content relevant to what people are looking for when they enter particular search terms. If we trick Google into returning our unnaturally relevant site that has irrelevant content, and people performing searches find it irrelevant, Google has lost its power. If Google continues to be exploited by our irrelevant website (as well as by the irrelevant websites of others), there would no longer be a reason for people to continue using Google.

Ultimately, the market would demand that a more relevant search engine take Google’s place at the top of the pile. Google is aware that its greatest strength is also its greatest vulnerability, which is why it takes such great pains to avoid being subjected to the exploits of unethical search optimizers.

Does that mean that all is hopeless when it comes to developing any sort of strategy for search engine optimization? Heck no. It just means that we need to be a lot kinder and use a bit more creativity in how we approach the issue. There is promise in ethical search engine optimization. If we code our website to naturally weigh and serve up our relevant content, our site in turn will be relevant and will be included in Google’s search results. This is the One True Path of search engine optimization, and this is the one that I choose to follow.

In our next essay, however, we will discuss the inverse approach. We will examine the various search engine exploits used by unethical search engine optimizers, the snake oil salesmen of this modern day. We will learn how to identify poor search engine practices which may appear effective in the short-term, but run a terribly high risk of getting your site banned from major search engines.

Feel free to join us again next week. Have yourself a happy Halloween, and please remember to vote if your country is holding elections.

Throughout my life as a professional web designer, I have tried to avoid getting sucked into the dank, dark hole that is "search engine optimization." I have stood steadfast in my belief that web design techniques that embrace web standards and accessibility guidelines will ultimately find their way to the top of the pile because, well, nice guys should get what they deserve. In that, I haven’t given too much thought to optimizing client sites for search engines, and I have rather tended my focus on web standards and accessibility.

However, my professional life has often found itself trudging through the woods at night, running from dangerous things like kingfishers and were-marmots and the occasional bear holding a shark. I have found myself faced with clients who do not have the same beliefs as I do on the subject of search optimization, and I often have a lot of explaining to do if their standards-compliant redesign doesn’t instantly pop to the top of all relevant search results.

Our Challenge: Be Kind, Be Effective

Sometimes it appears that web standards, accessibility strategies and well-weighted content do not offer sufficient ammunition to bring down the search engine exploitations of competitors. As a designer you know that you’re doing the right thing for your client by following standards, but as a client you know that you need to see results for your web investment to be worthwhile. Must our competition force us into doing evil things?

Participating in ethical search engine optimization should not hamstring us in the face of unethical practices. Rather, it should let us take wing and rise above the bickering, exploitative hordes of yore. Could this ever be the reality, where ethical search practices are rewarded and evils are punished? Can we, web designers and clients alike, make it so?

What is this thing called search?

To bring some insight to these thoughts, let us first illustrate what a search engine actually is, and what makes them so valuable to us. The web is a huge space, a hugely huge attic, and there is clearly too much junk sitting around to just peck around at random.

If someone is looking for something, they often turn to a search engine (like Google, Yahoo, etc.) to find it. If the search engine is able to return websites that offer what the person is looking for, then the person will be pleased with the results and will click through to a relevant website.

If the search engine returns unexpected results, however, the person will likely try a number of other things. He can refine his search by using fewer, more or different words, he can take a chance and click through to a site that doesn’t appear relevant, he can try another search engine, or he can give up and sob uncontrollably.

Why do I love thee uncontrollably?

If we take these two scenarios, the successful and the unsuccessful search attempt, it becomes obvious that the primary strength of any search engine is its ability to return relevant results. When people search for something online, they typically want to find it. Period.

If the content on your website delivers what people want when they search on a particular term, then your website is relevant and should be ranked highly. However, if your website does not have what people are looking for in regards to their search, your website is irrelevant and should be ranked lower.

With that, we can safely establish the following maxim for search engines:

Search engines are powerful and useful if and only if they consistently return results that have content relevant to what people are looking for when they enter particular search terms.

Pause and reflect on this notion. Even though it seems obvious when laid bare like so, the issue becomes more convoluted as we move forward.

From our maxim, we can infer the million-dollar search engine optimization question: “How do search engines decide which pages are relevant in relation to particular search terms, and which pages are not relevant?”

The answer is a tough one, and if I told you, I’d have to kill you. However, in our next installment we will reflect on the colorful history of search engines, in an attempt to figure out how modern engines filter their search results. For those who starve for something more meaty and technical, all I ask is your patience. There is still a lot of ground to cover, and the answers are coming.

Many months ago, Shannon requested that I draft up a tutorial on the image effects seen here on Brainside Out: Wounded Knee Edition. Most of the work here is the result of graceful accidents, so it was rather difficult for me to systematize any of my processes. Now that I’ve had a bit more time to experiment with it, I’ve found my actions predictable enough that I can rig up a little tutorial for ya’ll. Without further ado, I present to you Wounded Knee: A Distressed Photoshop Tutorial.

The raw inspiration for my photographic post-processing came from Jake Ingman’s lomo effect, originally published years ago on Redscreen.net. Redscreen has since gone defunct, but we can only hope that some day Jake will revive it. That boy does some amazing things with his camera.

Really, I have documented two processes, here: the first tells how to achieve some rich, colorful depth in a photograph (a modified lomo effect), and the second tells how to distress and texturize an image to your heart’s content.

The (modified, no longer quite so) Lomo Effect

1. First, get a good photograph. The better your source, the better your results. For our purposes, we will be using a photograph of the Three Sisters and Broken Top.

2. Open up Photoshop. From here, you have two choices. If you’ve never gotten your hands very grubby in Photoshop, you might want to opt for the easy way. If you’ve knocked around in the program a bit and feel pretty comfortable with it, try the hard way.

The Easy Way: Adjust the brightness and contrast for your photograph so it looks super rich. We’re talkin’ ridiculously rich, here. Typically, +15 brightness and +25 contrast is a good start, but your needs will differ depending on your photograph. Use good judgement. I trust you.

The Hard Way: If you want, you can achieve a similar effect by adjusting the levels on your photograph. This requires more time and finesse, but lets you get much more vivid results than by adjusting brightness and contrast alone.

Open the levels panel, and adjust the master RGB slider until you are satisfied with the richness. Then, adjust each color channel individually to achieve the tone you’re looking for. I’ve been experimenting heavily with “yellowing” my photographs, by pulling the middle blue slider to the right, and the middle red and green sliders to the left. With experimentation you’ll eventually find the look you want.

3. Now for the lomo effect. Choose the Rectangular Marquee Tool, and note the “Feather” field in the options window. Set the Feather value to approximately 1/6 the value of the longest edge of your photograph. For example, if you’re working with an 800 x 600 photo, you would want to set Feather to about 130 pixels.

4. With the Rectangular Marquee tool, select the entire image. You will need to do this by hand (no CTRL+A, for you shortcutters) or the feathering will not work.

5. Select the inverse of your feathered selection (either Shift+CTRL+I or Select>Inverse… Mac users, you know the drill… instead of CTRL, use that Apple sucka).

6. Create a new layer. Press ‘D’ to switch your foreground and background colors to black and white. Make sure you’re working on your new blank layer, and with your feathered, inversed selection still selected, hit ALT+Backspace to fill in the space. You can also use the Paint Bucket tool… I’m open minded.

7. Deselect everything and duplicate the layer (dragging it to the “New Layer” button in the Layers window is the easiest way). The edges of your photograph should be nice and dark, now. Change the blending mode on one of the black layers to “Overlay” and the other one to “Multiply”. I really like how that looks. I especially like how it looks with the multiplied layer on top of the stack, and the overlayed layer right underneath. Again, your own experimentation will yield fruitful results.

8. Create a new layer. Select the gradient tool (it might be hiding under the Paint Bucket tool). Hit ‘X’ to swap your foreground and background colors. In the options bar, select “Radial Gradient” and make sure that you have ‘Foreground to Transparent’ set as your gradient type. Ultimately, you should have a white gradient that gives way to transparency.

9. Click in the middle of your photograph and drag a straight line to the furthest edge of the canvas. This will throw down a round white gradient right on top of everything.

10. Change the blending mode for your new white layer to “Overlay”, and bring the opacity down to 40 percent or so. Again, set it to whatever looks best for your photograph. In our example, I have set the opacity on the gradient layer to 60 percent.

Looks pretty nice, eh? That’s all it takes.

Extra Credit

If you want, you can further tweak the colors in exciting ways. Select the layer with your original photograph, and open the Hue/Saturation tool (CTRL+U).You remember all that richness we did coming out of the chute? Well, lately I’ve been in more of a mood for the washed out look, so I like to yank that richness out in a fancy little way.

First, bring the photograph’s saturation up, way up, to 40 or so. Hit OK. Open the Hue/Saturation tool again, and this time pull the saturation way down, right around 50. Trust me, it makes a difference in the depth of color if you pull the saturation up before pulling it down. At least I think it does. Many times, I’ll drag the saturation up, hit OK, drag it down, hit OK, and keep repeating that process five or ten times to get the colors just the way I want them. Maybe it’s just a psychological problem of mine. Anyways, take a look.

We’ve done everything now but the wounded paper texture. You can bail now, or trudge forth and do some texturization.

The Wounded Paper Effect

1. Here is a dirty little secret: My favorite source for textures is in the meat world. All the images that I’ve distressed for Brainside Out use real life, honest to gosh textures. I will take a sheet of paper, crumple it up, unfold it, crease it, drive over it with my car, leave it out in a rainstorm, do pretty much whatever sadistic things my brutal self desires. I will typically trash a sheet of paper, give it a chance to dry out, and then scan it into my computer with a lousy scanner.

Anyways. If you don’t have a scanner, or if you don’t have enough cruelty to do some good distressin’ by hand, you can use a sample of my own devising.

2. Open your distressing texture in Photoshop. Select the whole thing, and paste it into a new layer on the image that you want to distress (let’s say, the image that we were just working on).

3. If the size of your texture is off (and often times if it came raw from the scanner, it will be far too large), use the Free Transform tool (CTRL+T) and shrink the layer down to a more appropriate size. Remember that when resizing, you can always constrain proportions by holding Shift as you drag the corners.

4. If you pasted and resized your texture properly, you now have a huge sheet of paper that completely obscures your image. Let’s fix that. First, if your texture layer isn’t on the very top of your layer stack, move it there. Change the blending mode to “Multiply” so you can see the rest of your image shine through your texture.

5. Now comes the fun artistic part. Adjust the brightness and contrast sliders for your texture layer until you are satisfied with the impact of the texture. If you find that the texture layer washes out the photograph too much, feel free to pull down its opacity. Also experiment with other blending options. I’ve had a lot of success in using a single “Multiply” layer to achieve the bulk of my texturizing, and duplicating that layer as a barely opaque “Overlay” to emphasize the highlights.

6. That’s it. Wasn’t too painful, eh?

If your curiosity has been piqued, a number of people far more skilled than I have written tomes on techniques similar to this, often referred to as the “Wicked, Worn Look”. In all actuality, this look was really popular back in June and I’m way behind the curve in documenting it… but hey, we’re going for an aged, timeless look here, right? We’re not just following trends. Heck no.

Why, I’d venture to say that we here at Brainside Out are, like, all anti-trend and such. But we’re not anti-trend in a trendy kinda way. Because if the trends manage to co-opt the anti-trends, then they’re not the anti-trends anymore, are they?

Cameron Moll: That Wicked Worn Look

Jason Santa Maria: Aged Aesthetic

Blake M. Scarbrough: The Awesome Antiquated Look

Ryan Sims: Weathering: Subtle. Restrained.

Greg Storey: Academics of Worn

I’m off to Hood River. Write your own captions if you wish.