Feature
Post

Category
Design Focus

Friday Focus 05/30/08: Quick Descriptions

What’s the lesson for this week? Describe the purpose of your website in one fell swoop and you’ll go a long way. Of course, it helps to have a great design as well.

Designs of the Week

Antiphrasis

Definition: the use of a word in the opposite sense of its proper meaning.

Two things I really like here. First, the colors. Seafoam green to light yellow is the last color combination one would come up with, but it works well. Second, the black and white illustration as top header background. See, top header backgrounds (let’s trademark that, shall we?) are a trend these days, but, again, would you have thought of using such starkness on a soothing gradient? I enjoyed this discovery not because it’s worlds away from the designs we see today, but because the choices used were so unexpected.

dkoo.net

hello,
i’m a new york-based web designer with
a penchant for music and strong opinions.
have a look around, and give me a shout.

The use of SIFR can go a long way. Throw in proper contrast, some texture, and the right amount of whitespace and you’re all set. The inside pages show that the link colors are so startling a deviation from the dominant, monochromatic brown hues that I can’t decide whether I like it or not. But being different is a good thing. Startling the viewer is also a good thing.

The DECK

The ad network
of creative, web and
design culture

So minimal and yet so bold at the same time. It’s clear who designed this website—Coudal Partners. It’s amazing what you can do when you’re armed only with thin, gray lines. As this is an ad network, participating advertisers are featured first and foremost, an immediate demonstration of how The Deck works. This is how ads should be.

Social Media Weekly

DesignCreate a Spectacular Grass Text Effect in Photoshop
Spectacular, indeed, is the right word. The grassy typographic effect is not too easy but not too hard, and you’ll walk away feeling very pleased with yourself after completing this tutorial.

DesignYahoo! Design Stencil Kit
For all your interface design and wireframing needs. File support for OmniGraffle, Adobe Illustrator (PDF, SVG), Adobe Photoshop (PNG), Visio (XML).

Design25 resources for ornaments, fleurons, and “frilly bits”
Cameron Moll provides a very handy list of links where you can download pretty ornaments, which he is quite fond of in his designs. Resources are both free and for a fee.

ProgrammingCSS Cacheer
Shaun Inman releases CSS Cacheer, an improvement to CSS-SSSP. With it, CSS has evolved to a whole new level, with support for variables, constants, nested selectors, bases, and plugins. Requires PHP.

ProgrammingCSS Decorative Gallery
Web Designer Wall shows how you can add pretty decorations and frames to a group of images using a <span> overlay and CSS wizardry. Great for all your photo galleries and portfolios.

ProgrammingFeatured video: quick and easy forms
Video demo showing how you can easily create forms using Google Spreadsheets. It’s definitely a great idea if you want an easy way to gather data, as in surveys and contact forms. Although not completely customizable, the best part is the information submitted is saved in an organized manner inside Google Docs.

Feature
Post

Category
Publishing

Spam Protection Solutions for WordPress and Movable Type

Spam is the bane of blogs, ugly links trying to nest its way into your blog comments section to trick your readers to buy their products, download spyware, or just build links. We don’t want it, none of us do, and luckily there are ways to stop it.

Solutions in the Blog Platform

You can do it manually, which will work perfectly fine to start with. Just moderate every comment, no problem right? Wrong. That will take time, and the more readers and Google juice your blog gets, the more spam will hit you. It is just not humanly possible to manage spam on a larger blog, it will get out of hand really quick.

Enter the anti-spam measures taken by the blogging platforms. In WordPress you can set up a blacklist and stop all comments with more than two links, for instance, which will help out a bit. Similar solutions are available for Movable Type. Problem is, spammers are sometimes very bright, which means that they alter their spam comments to trick you, so you’ll end up with a bunch of spam comments getting by your line of defence.

Enter the Spam Fighting Plugins

The real way to tackle blog spam is using plugins.

AkismetAkismet is something of an industry leader, developed by Automattic and shipped with WordPress. The plugin is free for personal use, but there are problogger licenses. Akismet started as a WordPress plugin, but nowadays it is available for other platforms as well, including Movable Type, various forum software, and more.

DefensioDefensio is a fairly new anti-spam solution similar to Akismet. It is available for both WordPress and Movable Type, as well as other platforms, which is a good thing. The plugin is free for personal use, but commercial adopters will have to pay.

TypePad AntiSpamTypePad AntiSpam is Six Apart’s brand new anti-spam plugin built on the TypePad platform’s spam protection. It’s in beta and totally free at the moment, and available for both Movable Type and WordPress, with more platforms coming soon. The plugin got a very good testimonial from TechCrunch’s Michael Arrington, who puts it in the same level of effectiveness as Akismet, which is a great start. TypePad AntiSpam is a plugin that learns from what you mark as spam, which means that you need to work a bit to get the plugin to be really effective. It will be very interesting to follow this one.

Other options are of course available, mostly for WordPress. Spam Karma 2 used to be a lifesaver for me, until Akismet got really effective, and I’ve had clients being happy with Bad Behaviour. I’d also like to flag for Mollom, an anti-spam plugin for Drupal that is available for WordPress and apparently is looking go the same way as Akismet and TypePad AntiSpam, with wider platform support.

My Weapons of Choice in the Spam War

I used to have a combination of Akismet and Spam Karma 2 on my WordPress blogs, which means most of my sites, and it’s been working really well. However, the last 6 months or so I’ve settled for Akismet, and actually haven’t had the need to utilize any other anti-spam plugin. Defensio is yet to impress me, although I wouldn’t rule it out. I am waiting for more users to report on how it is working for them, should it get a lot of positive press I’ll probably give it a serious go on one of the larger public sites.

Six Apart’s TypePad AntiSpam plugin is the most interesting one, however, and I’ll be using it on an upcoming project to see how it turns out.

How do you battle comment spam on your blog, and how is the war coming along? Share your experiences in the comments.

Feature
Post

Category
Design

The Devlounge Redesign: Sneak Peak #1

It’s been a bit quiet on the Devlounge redesign front for some time now. Juggling a lot of project can do that to a man. However, things are rolling again, so expect a relaunch soon enough. No, I won’t make an estimate yet, those always break anyway, right? Maybe I shouldn’t have said that…

I will, however, give a sneak peak as to what you can expect from Devlounge once the redesign is rolled out. I’m talking about the new categorization of our content.

Brand New Categories

Screenshot from next DevloungeToday’s categories doesn’t really work well with how Devlounge have evolved. I’m sure the plan behind the current layout is both cunning and brilliant, but things change over time, no matter how well you plan them. A good and logical categorization of content for such an editorial site as Devlounge is crucial. I repeat: it’s crucial!

That’s why these will be our new main categories, replacing the old ones.

  • Code focusing on PHP, CSS, XHTML and similar, tutorials and snippets
  • Design on trends, web 2.0, inspiration, critique and praise
  • Opinion being commentary on the web from the staff, will probably delay this one for focusing reasons
  • Publishing blog platforms, forum systems, open source applications as well as paid ones, things you need to publish a website, basically
  • Strategy for launch and relaunch, monetization and SEO, things to help you succeed
  • Webapps is about online tools, necessities, desktop replacements, cool apps, things like that

There might or there might not be room for sub-categories. With tags, I personally think that pinpointing a post’s topic is better left to the tags, the fewer categories you can get away with, the better.

I’d say that the categories Code and Design are the most important ones, the primaries, with Publishing being secondary, and the rest being less frequent on the site. How does that sound to you? Let me know in the comments.

Feature
Post

Category
Design Focus

Friday Focus 05/23/08: Beautiful, Detailed Illustrations

Can’t say there’s a completely obvious unifying factor to each of the design picks this week, but they all have beautiful, detailed illustrations in them. They’re all cheerful too.

Designs of the Week

FlippingBook

The effects on these icons are pretty cliche in some people’s books, what with the saturated hues and glassy reflections, but they’re still nice to look at.

Banjax Web Design

Header image aside, this site is really minimal but does a nice job with the text. The location map at the footer is also a nifty little touch.

Blog développement Web

A splash of color and life at the top, only slightly trickling down as you scroll further. Then it becomes monochromatic grayish brown for the main content. I like all the lines and gradients and other details.

Charmingwall

This is a purely Flash site, and you will adore the organic transitions as you click on every item in the menu. I especially enjoyed how the map (under “Location/Hours”) is formed.

Social Media Weekly

DesignThe Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques
If you’ve been looking for a definitive guide to Photoshop, this is it. Download the entire ebook completely free, but it’s only available until June 13 so hurry!

DesignFont Burner
Font Burner lets you pick from a thousand fonts and use them on your own website. How? Just follow the steps listed there. Yes, it’s also free.

ProgrammingStarry Night: Incredible 3D Background Effect with Parallax
Every since the teaser page for Silverback was launched, and the web design geeks discovered it was using the Parallax Effect, they stopped being in awe for a bit to recreate their own optical illusions using CSS. This one’s one of them. And if you don’t like stars, how about riding horses?

Feature
Post

Category
Code

Rotating Header Images in PHP

Most websites like to use rotating banners to add an extra appeal in their header. To make this work, all we need to do is get all the images from the specified directory, choose a random image, and present it to the browser. First, we need to create some sort of configuration for this:

<?php
$directory = './images/';
$accept = array('gif', 'png', 'jpg');
$deny = array('file1.jpg', 'file2.gif');
?>

Next, in order to scan through the directory, we would need to use scandir(). Using the filters above, we can also restrict the files that are in the directory using array_filter() since the output of scandir() is of type array. The built-in PHP function array_filter() requires an input array, and an optional callback function. A callback function is a function that PHP calls after a certain event. In this case, the event would trigger with every value in the array. We will use the callback option which requires one parameter that will contain the value of the key.

<?php
$files = scandir($directory);
$files = array_filter($files, 'filter_images');

function filter_images($image)
{
    global $accept, $deny;

    if (in_array($image, array_merge($deny, array('.', '..', '.htaccess', 'index.html'))))
    {
        // Remove, because we don't accept those files
        return false;
    }

    $ext = substr(strrchr($image, '.'), 1);

    if (!in_array($ext, $accept))
    {
        // Remove, because its not an accepted extension
        return false;
    }

    // This image passed the tests
    return true;
}
?>

Now we have an array of all of the images we can use for the banner rotator. Because we removed some of the values from the file list, we need to resort the array so that the keys are consecutively ordered from 0 using the function sort(). After this, we will need to generate a random number from the range of the keys using mt_rand(). The reason we are not going to use rand() because mt_rand() produces a “better” random number and is four times faster, according to php.net.

<?php
$files = array_values($files);
$rand = mt_rand(0, count($files)); // mt_rand(min, max);
$image = $directory . $files[$rand];
?>

We have selected our image and all that we have left is to output the image to the browser. We need to set the proper content type header and output the contents of the image using header() and readfile().

<?php
$finfo = finfo_open(FILEINFO_MIME);
$mime = finfo_file($finfo, $image);
finfo_close($finfo);

header('Content-type: ' . $mime);
readfile($image);
?>

At this point, a random image is displayed when viewing this file. All you have to do next is display it on your page using the HTML <img>tag or using CSS. I will go over both methods.

First, using the image tag, you can do the following:

 <img src="banner.php" alt="Banner" />

Next, with CSS, you can do this:

<style type="text\css">
#banner {
    background-image: url(banner.php);
}
</style>
 <div id="banner"></div>

If you want to get more advanced, you can always enhance the filters with REGEX using preg_match(). And, as I said before, for their header to add an extra appeal and other uses. You can wrap a link around the <img> so that whenever someone clicks your header, it redirects them to the homepage. This is a tool most websites use, depending on how it is constructed and looks. I hope you guys have fun with this script!

Download File

Feature
Post

Category
Code

Related Entries in Movable Type

If you’re a good Web 2.0 person, you’ve probably been relentlessly tagging all your entries. You might even have a tag cloud so big it threatens to rain folksonomies. But shouldn’t there be something more useful you can do with your tags? How about linking to related entries? Here’s how we can do it in Movable Type, and without installing any extra plugins.

First, create a new Template Module named “Related” and type this code into the box:

<mt:entryiftagged>
<mt:setvarblock name="curentry"><mt:entryid /></mt:setvarblock>
<mt:setvarblock name="sgtags"><mt:entrytags glue=" OR "><mt:tagname></mt:entrytags></mt:setvarblock>
<mt:setvarblock name="listitems"><mt:entries tags="$sgtags"><mt:setvarblock name="listentry"><mt:entryid /></mt:setvarblock><mt:unless name="listentry" eq="$curentry"><li><a href="<mt:entrypermalink />"><mt:entrytitle /></a></li></mt:unless></mt:entries></mt:setvarblock>
<mt:if name="listitems">
<h3>Related Entries</h3>
<ul>
<mt:var name="listitems">
</ul>
</mt:if>
</mt:entryiftagged>

It’s very important that when you type this in there are no line breaks within any of the <mt:setvarblock></mt:setvarblock> containers. In theory, you should be able to use the strip_linefeeds attribute and not worry about line breaks, but I’ve not had any luck with that. In fact, it’s revealed a very strange bug. Rather than deal with bugs, we’ll just remove the line breaks ourselves.

Now save it and go to your Entry Archive template. Somewhere in there (if you’re using the default templates, right after <$MTInclude module="Entry Detail"$> would be a good choice) add this line:

<$MTInclude module="Related"$>

Republish your blog and you should see a list of related entries on each individual entry page. Let’s take a closer look at our code and see what’s happening.

<mt:entryiftagged>

We don’t want to do any of this if the entry doesn’t have tags.

<mt:setvarblock name="curentry"><mt:entryid /></mt:setvarblock>

We store the ID of the current entry to use later.

<mt:setvarblock name="relatedtags"><mt:entrytags glue=" OR "><mt:tagname></mt:entrytags></mt:setvarblock>

Here, we’re using the <mt:entrytags> container to output a list of tags from the current entry. The glue attribute specifies what text should be between multiple tags. So, if our entry is tagged with cats, pet food, and dogs, we’ll get this:

cats OR pet food OR dogs

And this will be stored in a variable we’ll use on the next line.

<mt:setvarblock name="listitems"><mt:entries tags="$relatedtags"><mt:setvarblock name="listentry"><mt:entryid /></mt:setvarblock><mt:unless name="listentry" eq="$curentry"><li><a href="<mt:entrypermalink />"><mt:entrytitle /></a></li></mt:unless></mt:entries></mt:setvarblock>

We’re using a <mt:entries> container with the tags filter. This will limit the entries returned to only those that have at least one of the tags from the current entry. As we process each entry, we store its ID in a variable. We then use the <mt:unless> conditional tag to compare the ID to the one we stored earlier. This allows us to filter out the current entry from the list we’re creating. If it’s different from the current entry we create a link to that entry and store it in a variable to use in the final output (which is only output if there is anything in that variable):

<mt:if name="listitems">
<h3>Related Entries</h3>
<ul>
<mt:var name="listitems">
</ul>
</mt:if>
</mt:entryiftagged>

Now, this is not necessarily the best way to do related entries. There’s no “scoring” involved to determine which entries are the most related, we just assume they’re related if they have at least one tag in common. And if you’re publishing static files rather than publishing dynamically then old entries won’t have links to new entries unless you republish your entire blog. Still, it’s an easy way to link your entries, and it’s a good example of the complex things you can do with Movable Type variables.

Feature
Post

Category
Design Focus

Friday Focus 05/16/08: Calm and Clear

I don’t know if I am a fan of minimalism because I picked out these websites. But I like to appreciate designs that stand out not because they’re loud and proud, but because they’re calm and clear. Silent waters run deep, they say. I like to think restraint is more powerful than the lack of it, especially in design.

Designs of the Week

Better Interactive

The contrast used on the unlinked text may be less than ideal for the accessibility conscious, but ample emphasis is given to the keywords for visitors who are just skimming through. No images, just a monochromatic color scheme and a minimalist manipulation of type.

Hell Yeah Dude

Some bright colors used here, but this design still leans towards the muted look. But the challenge here was to arrange all the site elements to make it look different from your typical blog layout without drawing too close to the formalities of an online newspaper or magazine.

Design Intellection

There’s something about the lightness and spaciousness of this design that feels delightful. Though I would want a bit more content on the sidebar, I’m glad the designer went with a 2-column layout since blog designers these days are so intent on cramming so much stuff every which way (either to make money for themselves or please their clients and then make money for themselves).

Social Media Weekly

DesignOne Day Poem Pavilion
A dome-shaped structure whose perforations let sunlight through to form poems which vary every hour or so. The combination of science, art, and design in this installation is one of the best things I’ve seen.

Design“Designing is not a profession but an attitude”
37signals points us to an interesting passage from László Moholy-Nagy’s “Vision in Motion” which describes the responsibility of a designer.

DesignDeadly Sins of Web Design
Warning: this is a slightly sucky page that demonstrates all the annoying things you can do to a website. This is more for ignorant clients and friends who keep on insisting you should “spice things up” with music or some animated GIFs.

ProgrammingProcessing.js
Processing, a visualization programming language, has been ported to JavaScript by John Resig. An amazing feat. In spite of all the criticisms thrown at JavaScript all these years, it continues to attract all these neat projects and features.

ProgrammingTimelapse CSS
Matthew Buchanan created a script that stripped a webpage of its CSS one property after the other until it was completely bare. He posted a video showing the process reversed, and the JavaScript is available for download.

Feature
Post

Category
General

Text Treatments: Fire and Type

There are lots of tutorials floating around that show you how to “set your typefaces on fire”, but this quick little tip using Adobe Photoshop is one that is really fast and effective for you to experiment with, and make your blazing impression on any text that suits your fancy. Try this quick text treatment next time you are looking for a speedy, easy way to have your website banner burst into flames…

Steps

Open up a new document in Photoshop. I made mine 8 inches wide by 6 inches high, 72 ppi, Grayscale, and the Background should be White. Make sure your default colors are Black foreground color, white background color (press D on your keyboard to reset this default color scheme). Fill the transparent document you just opened by clicking ALT>Backspace (PC). Next, click on the Text tool in your toolbar, and set the default colors to the opposite scheme, white over black, by pressing the X key on your keyboard. You are going to type something in white now on your black background. Choose a nice, bold, blocky typeface, and set the size to about 100 point. See the example shown:

The next step is to rasterize the type by clicking Layer>Rasterize>Type. After that, rotate the canvas counter clockwise using: Image>Rotate Canvas>90 degrees counter clockwise, then apply the first effect filter for this lesson which is as follows: Filter>Stylize>Wind>Blast from Left. Repeat this step one more time to lengthen the blast a little. See example:

Now you will need to rotate the image 180 degrees: Image>Rotate>180 degrees, so you can blow the wind effect on the other side as well by using: Filter>Stylize>Wind>Blast from Left. When finished, rotate the canvas back to normal by: Image>Rotate>90 degrees counter clockwise. It is time to add some more effects to your type. First, use this: Filter>Stylize>Diffuse>Normal. See example:

Then, apply the next effect as follows: Filter>Blur>Gaussian>Adjust slider to 3. Example:

One more effect and we are nearly finished: Filter>Distort>Ripple>100 percent>Medium. See example:

Now that we are done with the effects, let us type the word over again in black (switch default colors back to black). Position this type layer over the original one that is now distorted and rasterize the type: Layer>Rasterize>Type. After you rasterize this layer, it’s time to click Layer>Flatten Image.

So, you are probably thinking “what happened to flaming type?” Well, here are the final steps to a really hot effect: Click Image>Mode>Indexed Color. Nothing much will happen in that step, however, the next one: Image>Mode>Color Table, and choose Black Body from the drop down menu. Now you should see the colors of fire all around your type, concentrated at the top and bottom. See example:

For your final step in this process, you probably should crop this and convert this file to RGB ready for web use. Again, click Image>Mode>RGB, and save your file, and you’ll have a super fun little text effect to heat up your site! Here’s the cropped final:

Wrapping Up

Obviously there are many techniques for making this type of flaming text treatment; I just thought this was a good “quick and dirty” version for you to try out in a jiffy. You can also do a lot more experimenting with this, such as make the text a different color all together, such as blue or yellow, and add some effects to that like a drop shadow or outer/inner glow. You can experiment with many, many different base fonts as well; I just used a very plain, bold font here called Impact (you should have it). There are many other choices. Photoshop is very flexible, so you have a lot of options open to you!

Feature
Post

Category
Code

Roll Your Own FriendFeed with Movable Type

There’s been a lot of excitement the last few weeks over FriendFeed, the new lifestreaming service that lets you pull together all the different services you publish to into a single feed.

I’ve tried FriendFeed and it works great, but why ask someone else to do something you could do yourself? The combination of Movable Type and the Action Streams plugin make rolling your own lifestream easy.

More →

Feature
Post

Category
Design Focus

Friday Focus 05/09/08: What Do They Have in Common?

Two very different designs but with one common thread. What’s the moral of this week’s Friday Focus?

Designs of the Week

itomizer

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!)

SketchBlog

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

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

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

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

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

Feature
Post

Category
Publishing

Help Me Pick: Vanilla vs. bbPress

I need a forum for an upcoming project, and I need to decide which one. I should’ve done this a long time ago, or at least a last week, but I’m having a hard time making up my mind.

Vanilla vs. bbPressThis 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.

Feature
Post

Category
General

Make A Unique, Multi-Layered Web Banner Using Photoshop

There are many ways to create effective web graphics, so I thought it would be fun this week to create a colorful, unique web site banner using multiple layers in Photoshop. Contrary to popular belief, manipulating layers in Photoshop is fast and easy, and can allow you to be ultra creative in the designs for web banners either for your own site or for a client project. I will create the banner step-by-step using several different photo elements of mine and show you the basics to help you get started experimenting with the power of multiple layers in Photoshop.

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!