BlogmyQuery – BMQ

Security has become a foremost concern on the Web in the past few years. Hackers have always been around, but with the increase in computer literacy and the ease of access to virtually any data, the problem has increased exponentially. It is now rare for a new website to not get comment spam within days of its release, even if it is not promoted at all.

This increase in naughty behavior, however, has spurred developers to write better code, and framework vendors have implemented many functions to help coders in their battle against the dark side.

Because data validation and sanitization is a big part of both security safeguards and normal user-input processing, by securing our code we will be not only protecting our behinds, but offering a better, more solid user experience.

While a large part of this article is specific to WordPress, a sizeable chunk is about general practices that anyone can use. Even the WordPress-centric sections contain useful logic, so reading them may well be worth it even if you use a different framework.

URL-Based Exploits

With URL-based exploits, hackers try to find weak spots on your website by making requests that would normally return an error but for some reason are completed.

http://mysite.com/trying/to/exploit/%2F/config

The above hypothetical URL is essentially a stab in the dark by a hacker. But if the request is met, even though the URL is clearly not meant to go anywhere, the hacker might be able to make use of it.

Using .htaccess as a Firewall

One of the best methods I’ve found against this kind of threat is an .htaccess firewall. It basically consists of rules that automatically block requests based on strings in the URL.

For example, there is no good reason for an opening bracket ([) to be in a URL. If a request is made using a URL that contains a bracket, then either the user has mistyped something or someone is looking for a security hole. Either way, generating a “403 Forbiddenâ€� page is good practice in this case.

RedirectMatch 403 \[

Paste the line above in your .htaccess file to block any request that contains an opening bracket.

To guard against more than just brackets, you will need a more complex ruleset. Luckily, our awesome editor Jeff Starr has gone out of his way to create a great .htaccess ruleset. The latest iteration is called 5G Firewall and is freely available from Perishable Press for your copy-and-pasting pleasure.

The firewall is modular, so you can delete lines from it without breaking the functionality. If something goes wrong when you’re using it, you can usually track down the problem by deleting lines until it starts working again. Once you’ve found the offending line, you can delete it and paste back the rest.

Protecting Directories

On many servers, it is possible to view the contents of a directory simply by typing it in the URL bar.

http://myblog.com/wp-content/uploads/2011/08/

Visiting this typical URL for a WordPress blog will list the contents of that directory, showing all of the uploads from August 2011. You might want this, but you can also disable or fine tune it using the good ol’ .htaccess file.

Options -Indexes

Popping the above line into your .htaccess file will disable directory listings; so, users will get a “403 Forbiddenâ€� message if they try to view a directory. While many people seem to be aware of this, far fewer know of the other options besides allowing or disallowing access. You can control which file types are listed using the IndexIgnore directive. Take these three examples:

IndexIgnore *
IndexIgnore *.php
indexIgnore *.jpg *.gif *.png

If directory listing is enabled, then the directory will be displayed in the first example, but no files will be listed because all will be ignored. The second example will list all files except ones with a .php extension. The third example will omit the three image types specified.

Note that some hosts (such as MediaTemple) disable directory browsing by default, so you won’t need to modify the .htaccess file. To verify this, just type a directory location in the URL bar and see what happens.

Additional Server-Level Protection

So far, the measures we have taken have nothing to do with our website’s actual code. However secure your code is, you will still need to implement something like what we did above. We don’t have time to look at all tips and tricks for .htaccess, but you can do quite a few other things:

• Password-protect directories,
• Use smart redirects,
• Deny access based on IP or an IP range,
• Force downloading of files,
• Disable hotlinking,
• The list goes on.

Look at the “Further Reading� section at the end of this article, and become good friends with your .htaccess file. It might seem daunting and confusing at first, but solid knowledge of how to use it will go a long way.

Protecting Against Malicious Users

The second type of problem that can arise is when someone performs an action that they are not supposed to do. This doesn’t necessarily mean that they intended to harm the website, but it could happen.

If users are listed somewhere in the admin part of your website, chances are that a link is displayed to delete each user. The link could point to the script in the following location:

http://mysite.com/admin/scripts/delete_user.php?user_id=5

This link is relatively obscure; that is, a normal user doesn’t have a good chance of stumbling on it. But if directory listings are enabled, then someone naughty could go to http://mysite.com/admin/scripts/, see that you have a delete_user.php file there, and make various requests to try to delete a user.

If the script does not check permission or intent, then anyone who visits the link above could delete user 5.

Authority and Intent

Whenever a user initiates an action, we need to take two things into consideration. Does the user have authority to perform the action (i.e. do they have permission)? If the user does have authority, do they also intend to complete the action (i.e. do they mean to do what they’re doing)?

WordPress has functions to help you make sure that both conditions are met before an action in the script is triggered. We will look at these in detail shortly. If you are building your website from scratch, then you will need to make sure that each user has associated permissions and that you know which action can be performed under which condition.

For example, you would probably want only administrators to be able to delete content from the website. Every time a user tries to delete content, you would need to make sure that they are actually an administrator — this is the “authorityâ€� part.

Intent is best described with an example. Let’s assume you can use the following link to delete a comment:

http://mysite.com/admin/scripts/delete_comment.php?comment_id=5

The script itself will check that the user is currently logged in and is an administrator, so it takes care of the authority check. Could someone still wreak havoc? Sure they could! A sneaky hacker could put a link on their own website pointing to the same location:

<a href="http://mysite.com/admin/scripts/delete_comment.php?comment_id=5">Super-Happy Times Here!</a>

Because everyone likes super-happy times, many users would click the link. In 99% of cases, nothing would happen, because those visitors would not be administrators of mysite.com. But if a logged-in administrator of mysite.com did click on the link, then the action would execute, even though the link was actually clicked from vilehackerperson.com.

You might think that the odds of this happening are astronomical. In a way you’d be right, but remember that a hacker can do this extremely easily and can automate it. Millions of people get spam email saying that Bill Gates will take away the Internet unless they pay $1,000. Most recipients don’t see the email or throw it out or mark it as spam or what have you, but perhaps 1 out of every 2 million people is lured in. A thousand bucks for basically doing nothing is not bad at all. And a hacker probably wouldn’t put the link on their own website; all they would need to do is hack a big website and embed the link there without anyone noticing.

Checking For Authority In WordPress

WordPress has a permissions system built in referred to as “Roles and Permissions.� Capabilities are the basis of the whole system; roles are just a way to group a set of capabilities together.

If a user has the delete_posts capability, then they have the authority to delete posts. If a user has the edit_posts capability, then they can edit their posts. Quite a few capabilities are available, and you can even create your own.

Roles are basically groups of capabilities. A user with the role of “contributorâ€� has three capabilities: read, delete_posts and edit_posts. These give the user the authority to read posts and to edit or delete their own posts. These capabilities could be granted individually to any user, but grouping them into frequently used bundles is much easier and more practical.

With that in mind, let’s look at how to use WordPress functions to ensure that a user has the authority to complete an action that they initiate.

if(current_user_can("delete_users")) {
    wp_delete_user(5);
}
else {
    die("You naughty, naughty person. Of course, you could just be logged out…");
}

Here, we’ve made sure that the user has the delete_users capability before they are able to complete the action. Don’t make premature assumptions when protecting your scripts; in many cases, especially those of authority, the intent is not malicious.

The current_user_can() function takes one argument, which can be a role or a permission. We could let “editorsâ€� (who don’t normally have the delete_users capability) delete users in the following way:

if(current_user_can("editor")) {
    wp_delete_user(5);
}
else {
    die("You must be an editor to delete a user");
}

Be careful with the method above because the roles are not inclusive. This function doesn’t require the user to be at least an editor; it requires them to be exactly an editor (if that makes sense). Because of this, I find it preferable to use capabilities, especially if I have modified the default permissions extensively.

Two other similar functions enable you to examine the capabilities of users other than the currently logged-in one.

if(user_can(5, "manage_links")) {
    echo "User 5 is allowed to manage links";
}
else {
    echo "Sadness! User 5 may not manage links";
}
if(author_can(1879, "update_themes")) {
    echo "The author of post #1879 is allowed to update themes";
}
else {
    echo "Oh noes, our friend, the author of post #1879 may not update themes";
}

The user_can() function checks whether a given user has the given capability (or role). The first argument is the user’s ID or a user object; the second argument is the name of the capability or role that we want to check for.

The author_can() function checks whether the author of a given post has the given capability (or role). The first parameter should be a post ID or a post object; the second is the capability or role that we are examining.

Checking For Intent In WordPress

Intent is a bit more difficult to check. In the good ol’ days, a check of $_SERVER['HTTP_REFERER'] was the way to go. This stored the page that the user came from. If the domain name was their own, then the user was probably OK… unless, of course, someone had gotten into their files and inserted a link that deleted the user’s database if they clicked on it as an administrator.

A newer more secure method was implemented in WordPress 2.03 — quite some time ago — called nonces. Nonce stands for “number used onceâ€� and is used frequently in cryptography to secure communications. It is a number that is generated before an action is initialized, then attached to the action’s call, and then checked before the action completes.

In WordPress, you would generally use nonces in one of two places: forms and normal links. Let’s look first at how to generate a nonce in a form.

Nonces in Forms

<form id="myform" method="post" action="myawesomescript.php">
    <h2>Enter an awesome word here</h2>
    <input type='text' name='word'>
    <?php wp_nonce_field( 'awesome_name_nonce') ?>
</form>

This will generate a hidden input field containing your generated nonce, which will be sent along with all of the form’s other data. The wp_nonce_field function takes four parameters:

1. The first parameter is optional, but recommended because it gives the nonce a unique identifier.
2. The second parameter is the name of the field. This is also optional and defaults to _wpnonce.
3. The third parameter is boolean. If set to true, it will also send the referrer for validation.
4. The fourth parameter is also a boolean and controls whether the field is echoed right then and there.

The resulting hidden field would look something like this:

<input type="hidden" id="_wpnonce" name="_wpnonce" value="d6d71w4664">

Setting all of this up won’t make a huge difference if it isn’t used when the form is actually processed. We need to check for the presence and the value of the nonce before allowing any actions to be performed. Here is one way to do that:

if (!wp_verify_nonce($_POST['_wpnonce'],'awesome_name_nonce') ) {
   die('Oops, your nonce didn't verify. So there.');
}
else {
   awesome_word_inserter($_POST["word"]);
}

Here, we’ve used the wp_verify_nonce() function to make sure that our nonce is correct. This function takes two parameters: the first is the value of the nonce field, and the second is the name of the action that we defined (this was the first parameter for the wp_nonce_field() function). If the nonce is verified, then the function will return true; otherwise, it will return false.

Nonces in Links

In some cases, you will want a link, instead of a form, to perform an action. This would typically look like our previous examples:

http://mysite.com/admin/scripts/deletethatthing.php?thing_id=231

To generate a nonce for a link, we can use the following method:

$base_url = "http://mysite.com/admin/scripts/deletethatthing.php?thing_id=231";
$nonce_url = wp_nonce_url( $base_url, "thingdeleter_nonce");
echo "<a href='".$nonce_url."'>Delete that thing</a>";

The resulting link would be something like this:

http://mysite.com/admin/scripts/deletethatthing.php?thing_id=231&_wpnonce=d6f77f1364

When we actually go to the script, we can check the nonce using the same method as before:

if (!wp_verify_nonce($_GET['_wpnonce'],'thingdeleter_nonce') ) {
   die('Oops, your nonce didn't verify. So there.');
}
else {
   delete_that_thing($_GET["thing_id"]);
}

Checking Authority And Intent At The Same Time

We need to look at both aspects at once; although, now that we’ve looked at all of the components, it won’t exactly be rocket science! Let’s take a simple link that lets the user delete a comment. We would have this on the page that lists comments:

$nonce_url = wp_nonce_url("http://mysite.com/scripts/delete_comment.php?comment_id=1451", "delete_comment_nonce");
echo "<a href='".$nonce_url."'>dispose of this comment</a>";

And here is the script itself:

if (wp_verify_nonce($_GET['_wpnonce'],'delete_comment_nonce') AND current_user_can("edit_comment")) {
   die('Oops, your nonce didn't verify, or you are not permission-endowed enough.');
}
else {
   wp_delete_comment($_GET["comment_id"]);
}

Data Security

Our work might seem to be done, but if you’ve been developing for a while, then you know it never is. An additional layer of security needs to be added to stop insecure data (or erroneous data) from entering our database. Adding this additional layer is called data sanitization.

A quick clarification: data sanitization refers to the process of cleaning up our data to make sure that nothing suspicious gets sent to the database. Validation refers to all of the checks we perform on data to make sure they are the types of data we need; it is typically done to ensure that the user has entered a valid email address, a well-formed URL, etc. The two terms are sometimes used interchangeably, and other methods may be similar, but they are quite different things. For our purposes, sanitization is a bit more important, because it has more to do with security.

The main thing we are trying to protect against is SQL injection. SQL injection is a technique used by hackers to exploit a database’s weaknesses. Take the following example:

// A hacker goes to your search field and searches for elephant' - note the apostrophe at the end. In the script, the following SQL is run:
SELECT ID, post_title FROM wp_posts WHERE post_title LIKE '%elephant'%'

In the example above, the user’s search for elephant' has resulted in unclosed quotes in your script. While the hacker might not be able to do much with this, an error message would be generated, indicating to them that at the very least you are not sanitizing your data.

In some cases, the SQL itself could be harmful or could give the hacker much more information than you’d like. Take the example of an administrator being able to enter a user’s log-in name in a form and getting back the user’s email address.

SELECT user_email FROM wp_users WHERE user_login = 'danielp'

If the hacker manages to perform an SQL injection attack, they could type ' OR 1=1 ' in the form, which would result in the following query:

SELECT user_email FROM wp_users WHERE user_login = '' OR 1=1 ''

This would return all email addresses in the database, because we would be retrieving all addresses for which the user’s log-in name is an empty string, or 1=1, which is always true.

There are two ways to protect against this kind of problem — implementing both is good practice. In round one, we validate the data. If an email address needs to be entered, we can filter out user data that does not conform to the format of email addresses. We simply make sure that the format is right, otherwise we redirect the user, stating that the address is invalid. If the data passes round one, we move to round two, where we remove all characters that could mess up the query. This usually entails escaping quotes so that they can be used only as actual quotes in the SQL query.

When working without a framework, you would typically use addslashes() or something similar, but WordPress offers its own solution…

Data Sanitization In WordPress

When communicating with the database in WordPress, the preferred method is to use the $wpdb class. You can read all about this in “WordPress Essentials: Interacting With the WordPress Database.â€� The class offers a number of methods to alleviate your SQL injection worries.

Before jumping in, let’s look at some examples to get a basic understanding of how the class works.

// Perform any query
$wpdb->query("DELETE FROM wp_users WHERE user_id = 5");
// Get one column of data
$posts = $wpdb->get_col("SELECT post_title FROM wp_posts WHERE post_status = 'publish' ORDER BY comment_count DESC LIMIT 0,10");
// Get a row of data
$post = $wpdb->get_row("SELECT * FROM wp_posts WHERE ID = 1453");
// Get multiple rows and columns
$posts = $wpdb->get_results("SELECT ID, post_title, post_date FROM wp_posts WHERE post_type = 'publish' ORDER BY post_date DESC LIMIT 0, 12 ");
// Get a single value
$author_id = $wpdb->get_var("SELECT post_author FROM wp_posts WHERE ID = 2563");
// Insert a record
$wpdb->insert("wp_postmeta", array("post_id" => 2323,  "meta_key" => "favorite_count", "meta_value" => 224 ), array("%d", "%s", "%d"));
// Update a record
$wpdb->update("wp_postmeta", array("meta_value" => 225), array("meta_key" => "favorite_count", "post_id" => 2323), array("%d"), array("%s", "%d"));

The insert() and update() methods are helper methods, and they’re great because, apart from modularizing your database interactions a bit, they also take care of sanitization for you. If you want to use the general query() method, though, you will need to take care of it on your own.

The easier way is just to use the escape() method:

$data = $wpdb->escape($_POST[about_me]);
$wpdb->query("UPDATE wp_usermeta SET meta_value = '$data' WHERE meta_key = 'description' AND user_id = 154  ");

A slightly harder but better way to go about this is to use the prepare() method. An example from the WordPress Codex illustrates this perfectly:

$metakey	= "Harriet's Adages";
$metavalue	= "WordPress' database interface is like Sunday Morning: Easy.";
$wpdb->query( $wpdb->prepare(
	"
		INSERT INTO $wpdb->postmeta
		( post_id, meta_key, meta_value )
		VALUES ( %d, %s, %s )
	",
        10,
	$metakey,
	$metavalue
) );

Further Protection Using Sanitization

Sanitization is a fairly big topic and requires quite some time to master. For now, you’ll be busy mostly determining which characters to allow and which to disallow, and then finding ways to parse out the latter. Some common needs are to parse HTML out of addresses, filter numbers out of strings, validate email addresses and so on, but you will need to implement your own solutions for more complex needs. See the “Further Reading� section for more on this topic.

Final Thoughts

The measures needed to secure a website cannot be discussed in a single book, let alone a poor article. There are many methods and topics we did not look at, such as advanced password encryption, salts and so on. But hopefully, by implementing what we’ve discussed, your website will be much safer. Hackers usually go for the weakest link, so if your website is not insanely popular and is fairly secure, you should be OK.

While I have a lot of experience in this field, I am far from being a security expert. If you know of any other or better methods, do share them in the comments. There is always something new to learn about website security.

General Reading

• 5G Firewall, Perishable Press
• Security tips for .htaccess
• “SQL Injection,â€� Wikipedia
• “SQL Injection Attacks by Example,â€� Steve Friedl
• “MySQL: SQL Injection Prevention,â€� Tizag
• “filter_var,â€� PHP.net
• “Sanitize and Validate Data with PHP Filters,â€� Nettuts+

WordPress-Specific Reading

• “Roles and Capabilities,â€� WordPress Codex
• “Ultimate Guide to Roles and Capabilities,â€� Gary Cao
• “WordPress 2.0.3: Nonces,â€� Mark Jaquith
• “Improving Security in WordPress Plugins Using Nonces,â€� Vladimir Prelovac
• “WordPress Nonces,â€� WordPress Codex
• “Class Reference/wpdb,â€� WordPress Codex
• “Data Validation,â€� WordPress Codex

(al)

© Daniel Pataki for Smashing Magazine, 2011.

Back in the day you used to be able to view source on a web page to see the markup used to create it. These days, on many sites, a large portion of the markup is not visible when you view source because it is inserted by JavaScript functions.

That isn't necessarily a problem provided that you use progressive enhancement and unobtrusive JavaScript. If you follow those principles, content and basic functionality will still be there when scripting is unavailable. Many of us understand that. But one thing I’ve noticed is that some developers forget to consider semantics or accessibility in the markup they use JavaScript to insert.

Read full post

Posted in (X)HTML, Accessibility, JavaScript.

Copyright © Roger Johansson

The country selector. It’s there when you create an account for a new Web service, check out of an e-commerce store or sign up for a conference. The normal design? A drop-down list with all of the available countries.

However, when conducting a large session of user testing on check-out usability (which we wrote about here on Smashing Magazine back in April 2011), we consistently found usability issues with the massive country selector drop-downs. Jakob Nielsen reported similar issues as far back as 2000 and 2007 when testing drop-downs with a large number of options, such as state and country lists.

So, this past summer we set out to redesign the country selector. This article focuses on the four design iterations we went through before arriving at the solution (free jQuery plugin included).

First, let’s take a closer look at the usability problems of traditional drop-down country selectors.

The Usability Issues

Drop-downs cause usability issues when used for country and state selectors for several reasons. Here are six:

1. Lack of overview
   Seeing more than 20 uncategorized options can be bewildering, and country drop-downs often offer hundreds of options (according to ISO 3166, there are 249 countries).
2. Unclear sorting
   When shown a massive list, the first thing users do is figure out the sorting logic. But because country drop-downs often include the three to five most popular options at the top, the sorting logic is unclear at first glance.
3. Scrolling Issues
   Multiple problems are related to scrolling large drop-downs. If your mouse cursor is outside of the drop-down, you will most likely scroll down the entire page, hiding the drop-down options from the screen. In other browsers, however, the drop-down will actually scroll as long as it has focus, likely leaving you with erroneous data.
4. Inconsistent UI
   The UI of drop-downs differs from browser to browser and OS to OS. The drop-down will not only look different, but will also work differently. For example, on a Mac, Safari forces you to hover on two arrows to scroll up and down, whereas Firefox provides a traditional scrollbar. Now grab your smartphone, and suddenly the UI has dramatically changed again.
5. Lack of context
   Mobile devices have very limited screen real estate, which means you have less page context when scrolling, and actually finding the option you’re looking for takes longer.
6. Breaking the flow
   Nearly all users — even those who otherwise tab through forms — will use the mouse when interacting with a drop-down, thus slowing their progress.

It All Adds Up

These usability issues are all minor interruptions that don’t occur every single time someone interacts with a drop-down country selector. But they all add up, and together with other minor usability issues on your website, they will degrade the overall user experience — ultimately leading to abandonments.

With this in mind, we set out to redesign the standard drop-down country selector. Below are the four design iterations we went through.

Iteration 1: Typing Vs. Scrolling

The easiest way to get rid of the hundreds of options and the issues related to scrolling is to simply replace the drop-down with a text field — letting the user type their country. This works only if the user knows what to type, because there would be no recognition effect (this would never work for shipping options because the user would have to guess the names of the options). But a country selector is a good candidate for a text field because it is fair to assume that every user knows the country they reside in.

Okay, so we’ve got a text field. While good for usability, it’s bad for the courier who has to deliver a product. The drop-down offered a limited number of options, whereas the text field offers infinite (the user can type whatever they want). In order to restrict the input to values (i.e. countries) that our back-end system can handle, the text field needs to auto-complete and accept a restricted set of options. This will enable us to 100% accurately map the text-field input to the countries that our back-end system (and courier) recognize.

Today, most Web users are familiar with auto-complete functionality. Google has used it for its search field since 2008 (and as an experimental feature since 2004).

Iteration 2: Typos And Sequencing

By replacing the drop-down with an auto-complete text field, we’ve introduced a new problem. While the user can be expected to know the name of their own country, they can’t be expected to know what our back end calls it. If the user lives in the US and makes an omission, such as “nited states,� or decides to type only part of the name, such as “America� (instead of “United States of America�), then no correct results would appear:

Apple’s country auto-complete field requires you to spell the name 100% correctly and in the right sequence.

This is because a typical auto-complete field will be looking for values that are not only spelled correctly, but typed in the right sequence.

Numerous Web services — and especially e-commerce stores — are geographically restricted, and international users are well aware of this. Even big websites such as Amazon, Hulu and Spotify have serious geographical limitations on some or all of their services. While someone from the US will probably expect their country to be supported, an international user who cannot find their country might abandon your website before detecting their typo.

In short, the country selector has to account for omissions and sequencing. We achieve this by simply enabling loose partial matching:

Iteration 3: When The Netherlands Isn’t Called “The Netherlands�

We’ve now taken care of typos and sequencing, but there’s yet another problem. Some country names have multiple widely accepted spellings; for example, the Netherlands is sometimes referred to as Holland. Geographically, they are the same, but the average person would say that they vacationed in “Holland,� whereas the Dutch themselves would typically spell it “Nederland.�

When we require the user to type a country name, we must consider all common spellings. This includes synonyms, local spellings, common abbreviations and country codes. A typical auto-complete (and drop-down as well) would fail when charged with all of these spellings, such as mapping USA to United States, or Schweiz, Suisse, Svizzera and Svizra to Switzerland, or DE to Germany.

From a usability point of view, this is unacceptable because these are common spellings, and people will often type them into auto-complete fields.

In our redesigned country selector, we’ve added the possibility to map multiple words to a given value:

Iteration 4: When “United States� Is More Common Than “United Arab Emirates�

Typing “United� into the auto-complete country selector on Apple’s website gives you the following list:

This list is simply sorted alphabetically. But because we don’t have to scroll through a long list anymore, there’s little reason to sort the list alphabetically. A more natural sorting order would be by popularity. Apple might want to prioritize United States, followed by United Kingdom and United Arab Emirates. Whereas a British newspaper may want to put United Kingdom first.

To accommodate for this, all values (countries) could be given a weight. By default, all would be equal, and then each website could then apply their own weighting for their most popular countries:

Solution: The Redesigned Country Selector

The solution is a redesigned country selector that addresses the issues of drop-down country selectors. It handles typos, various spelling sequences, synonyms and prioritized options.

The technically correct term for this would be something like an “auto-complete text field with loose partial matching, synonyms and weighted results.â€� That’s a bit long, so I’ve simply dubbed it the “Redesigned Country Selectorâ€� — you can try the demo here.

For those of you who own or work on a website with a country selector, I’ve decided to open-source the code. It is a simple jQuery plugin for the progressive enhancement of drop-down menus (i.e. your current country drop-down), turning them into advanced auto-complete fields in modern browsers. It comes with instructions and an FAQ.

(al)

© Christian Holst for Smashing Magazine, 2011.

Nature is a popular subject amongst the Photoshop community, and subsequently is featured in a lot of photo manipulation work. Nature is really the perfect subject for photo manipulations as it’s so visually engaging. Think of the four elements, or a beautiful landscape, or a fierce animal. All these things are products of nature, and all of them are visually engaging.

When done right, integrating nature into your Photoshop work can produce some truly fantastic works. That’s why today we’ve compiled a range of incredible photo manipulations based around the theme of nature to inspire you. Each of these works is beautiful in it’s own right, but try to notice recurring patterns amongst them. Most of them have vibrant colors, great lighting and a keen sense of detail. It’s also worth noting how often various elements of nature can combine to produce wonderful results (for example the fusion of fire and water).

Example of Photo Manipulations Featuring Nature:

Our Kingdom
A very striking photo manipulation that makes great use of light effects. The central lion and horses actually take on the appearance of a light painting, and their eerie glow gives them an aura-like feel. The gold on black color palette works beautifully, and helps the detail lighting and smoke effects really pop. The swirling whirlpool in the center of the piece draws the eye, and provides a huge amount of depth, giving the impression of an endless abyss.

Out of Frame Nature
A bold and vibrant photo manipulation, this composition uses an out of frame technique to make it more unique. Water has been manipulated to pour out of a central hanging frame, whilst a mix of various photographs/landscapes are combined to create a scenic environment.

Ice Queen
This photo manipulation really makes you feel the chill! Using a limited blue/white color palette and some great icy effects the final piece is really engaging. The glowing central figure is what draws our eye, as most of the lighting in the piece is centered around her. The surrounding environment has been constructed by blending multiple winter landscapes to create a fantasy background. Ice textures have been applied over the entire composition to give an added layer of detail and distress.

Animal Textured Typography
A really creative concept, using various animal textures and surfaces to construct unique animal typography. Each letter has been hand designed, with some cool 3D effects, great lighting and huge varieties in surface. Extra visual elements have been included to really capture the character and life of each animal (for example trunks, tongues and tails).

Illuminati
Illuminati is a striking photo manipulation featuring a neon-lit owl. A lot of work has gone into this composition, as you can tell from the beautiful details of the background texture to the subtle nature of the lighting. The generally grayscale color palette gives extra emphasis to the colored, glowing lights weaving around the owl, as well as the creature’s piercing eyes. The owl itself has been given a hand-drawn effect, using a variety of Photoshop brushes and filters.

Ascendii Nature
A busy, yet effective photo manipulation, combining various places and scenes into a single cohesive piece. There’s some great blending happening in this piece, such as the tree branches enveloping the earth and the addition of leaves/plants over the doorway. Overall this composition is fun and fantasy filled!

Volcano
This photo manipulation is a relatively simple concept, but is executed beautifully. The base of the volcano is blending perfectly into the man’s hair, and the artist has even made the lava flick out like a stray strand of hair to complete the look. The attention to detail is great, as light from the burning lava is cast down onto the man’s head. The contrast between the vibrancy of the volcano and the washed out man’s face also creates a nice level of contrast.

“Tree House”
One of my absolute favorite nature themed photo manipulations. The artist has constructed an artificial floating landscape from various stock photos, and then seamlessly blended them together. He carefully extracted several tree routes to give an overgrown effect, and finished off the piece by applying a subtle paper texture – giving a final fantasy storybook feel.

Rapture
Rapture is a fairly famous photo manipulation, and it’s not hard to see why! The details and colors of this piece are simply astonishing. The artist has photo manipulated the tree branches to break off and float up into the sky, defying the laws of gravity. Combined with the light source coming from the top of the composition we imagine some alien presence pulling the man and branches upwards. Further focus on the man is given by the glow of the background landscape and sharper highlights on his torso.

Jellyfish Typography
Beautifully lit typography comprised entirely of jellyfish! The artist has photo manipulated dozens of jellyfish to construct lettering, and then applied additional lighting and coloring to bring out the natural glow of the deep sea creatures. A cool example of how nature carries with it a lot of natural beauty.

Sing
An awesome photo manipulation that constructs a woman entirely from flower petals. I love how the petals range in size from fairly large in the foreground, to absolutely tiny in some of the facial details. The end result feels light and airy, and the soft pastel colors make this very easy on the eyes. You can see that a lot of work has gone into shading and shaping the petals to create realistic depth and surface. Further detail is provided by some colorful sketchy lines in the background.

Kreativa Studio Lettering
Kreativa Studio have come up with a unique typographic photo manipulation featuring several elements of nature. They’ve done really well to capture the varying densities, textures and lighting of nature’s elements. The water feels deep, blue and gaseous, whilst the greenery feels lush and healthy. I like how the letter seems to contain an entire world, including cloudy sky, sun and even ships! This piece is elevated by the attention to detail, such as the thin stream of water gushing out of a crack in the side of the lettering. The lighting is also effective, as the light from the underwater scene illuminates the surface which the letter rests on.

Mother Nature
Mother Nature is a beautiful natural composition with plenty of great details. The woman’s hair has been blended with glowing strands of grass, and further grass has been applied for accessories such as her bracelets. The rich green color palette gives an overbearing natural feel to the piece.

Unleashed
Unleashed is a dark and vibrant photo manipulation. The floating tiger heads really capture the ferocity of the animal, and the lighting/lightening effects swooping up with them add to their energy. Interestingly the tigers have been places in an incongruous space setting. However, despite the unusual setting the composition is really beautiful, using a beautiful rich purple color palette with stunning blue highlights.

Tidal Wave
Taking note from The Day After Tomorrow this is a photo manipulation of epic proportions! Photoshop has been used to show the true destructive force of nature as a monster wave washes through a huge bridge. The artist has skillfully combined two images of vastly different dimensions to construct a fantasy scenario. Most impressive is how cohesive the lighting is, making the outcome truly believable. I also like the attention to detail shown in the extra splashes of water as the wave hits the bridge.

Zen
Zen is a magical photo manipulation that truly distorts the laws of physics. The floating rocky landscape feels very dreamlike, which is accentuated by the subtle fog cast over the scene. The colors have been blended well to give everything a slight pink/purple hue, and the varying sizes of floating rock help establish a lot of depth/perspective.

Isla
I’ve seen this photo manipulation concept attempted a few times, but this is surely one of the more successful outcomes. Plenty of details are introduced to make the underwater hippo more believable. Take a look at the subtle bubbles coming from his mouth, the clouds of sand where he’s moved his feet and the lighting cast upon him from the water.

Beach Disaster
Another cool natural disaster scene that’s been constructed entirely in Photoshop. This composition features a tidal wave, which has been blended well with the surrounding beach scene. It’s also inspiring to check out the photo-manipulated sand castle, whereby an actual castle has been manipulated to look like it’s constructed from sand. The running children and splashes from the young boy add an extra dimension of energy and panic to the scene.

Heaven
The title of this photo-manipulation is really fitting, as this composition instantly suggests freedom and peace. The true color and vivacity of nature is captured in the bright, vibrant flowers that weave around the woman. The implication is that the woman is truly at one with nature, as it flows around and through her. The piece is accentuated by the pastel, abstract background and subtle clouds overlapping the dancer.

Wall
Wall is a stunning photo manipulation used for an Advanced Photoshop tutorial. The composition combines several wooden crates, each which is covered with it’s own natural landscape. The detail in this piece is immense, including detailed windows with light flooding out of them, openings emitting bubbles, and paint splattering outwards. The design has a lot of depth, in part due to it’s intense shadows and highlights. The eye is drawn naturally down the design to the chair at the base. A great example of using shapes, size and perspective!

Mother Nature
A really impressive manipulation, that you actually have to look at closer to fully appreciate. The overall composition is vibrant and attractive. However, the real mastery lies in the central figure, which has been artfully constructed using many branch/root stocks. The way that the artist has blended, warped and adjusted these branches into a realistic wooden figure is really inspiring.

Fire Flower
This burning flower is a wonderful example of combining several elements of nature. The two concepts of flower and fire would not usually be associated with one another, yet once combined they create a piece that is both elegant and intense/ominous. The plain background really lets you focus on the intense flames and lighting coming from them. I love the subtle use of sparks/light speks on the petals.

Element
Element is a beautiful typography illustration that has a very natural feel to it. The artist has manipulated branches to construct elegant lettering. They have then shaded/lit the lettering expertly, and introduced further elements such as the leaves, grass, sculpture and bird. This is a good example of how photo manipulation can really capture the texture and essence of an entity. You can almost reach out and grab the branches, and they don’t appear the least bit fake.

Keep on Fire
Keep on Fire is one of those photo manipulations that puts you right in the middle of the action. From the falling statue figure to the fierce flames we really feel the intensity of the scene. The juxtaposition of fire and water is a great visual combination, seamlessly integrating both natural elements into a cohesive piece. The lighting in the piece is superb, as the amber flames cast out a subtle glow on the surrounding rocks and figures.

Nature
Another bright and vibrant piece combining multiple elements of nature. This design has manipulated flowing waterfalls, cloud formations and trees to combine to a fantasy sky landscape. The background is unrealistically bright and colorful, yet helps enhance the fantasy setting. Elements are well blended together, retaining the sharpness and movement of the flowing water rather than over-blurring or masking it.

Contemplation
Contemplation is a very detailed photo manipulation and integrates several natural elements. The entire central structure is set against a scenic backdrop, whilst the buddha sits amidst a dazzling variety of flowers, scrubs and falling leaves. The design uses a very naturalistic, autumnal color palette, ranging from deep yellows/oranges to rich greens.

Wildlife Poster
This photo manipulation is for a fictional wildlife TV show. The central zebra has been masked off using various splatter brush sets in Photoshop to create a grungy, abstract edge for the animal. The backdrop is a glowing African landscape, enhanced by details such as the subtle zebra stripes overlaid, as well as a build up of light effects to draw your focus towards the center of the design.

The Choice
One of my all time favorite photo manipulations concerning nature. The message created is clear – a choice between a lush natural landscape or one destroyed by the actions of man. The piece is visually striking, with great contrast between the verdant greens of the right half, and the orange flames and barren gray landscape on the left. The two halves have been blended really well, with details such as the overlap of leaves, or the light cast by the flames showing how the two halves leak into one another.

Extraordinary Island
Another photo manipulation that distorts reality. The artist has created a hugely detailed natural island, which is all but submerged in a tumultuous sea. The perspective and angle of the sea is clearly impossible, yet works really well as part of a fantasy landscape. Further depth is added by the birds flocking towards the island, which through their larger size help establish perspective (especially when compared to the animals on land).

One With Nature
One With Nature is exactly what the title suggests – an epic photo manipulation that truly integrates man with nature. Almost every part of the model has been worked into the natural setting in some way, from his afro hair (constructed from a hedge), to his central core, entwined around the earth. The details and lighting on this piece are really engaging, and the floating leaves help to establish depth and movement. The sharp glowing edges on the man give more definition and impact.

Collegium
Collegium is a bright and vibrant photo manipulation that uses the earth as the central focus. The artist has constructed various landmasses stemming out from the water, which are clearly of unrealistic proportions. However, the final result is really fun and friendly, and has plenty of depth. I love how the fantasy world moves from a tropical paradise at the top, to a desolate frozen land at the bottom. Interestingly the rays of light from the upper left logo are continued out to light the entire piece.

Act
A hugely creative concept that really captures the essence of nature. The idea of holding nature in your hands helps to make it palpable and comprehensible. I love the 3D effect given to the water in the bottom hand, which is especially impressive if you notice all the floating debris and detail in the water. The pouring water coming from the top hand is artfully done, and creates a really natural transition between the two nature scenes.

Striking Nature Scene
A deceptively detailed photo manipulation. The man’s torso has been constructed by many layers of weaving tree branches, which blend down seamlessly into a root formation. The muted colors of the piece ensure that you focus on the central figure, and the weaving tree routes help guide your eye this way.

Nature’s Defiance
This piece creates a great juxtaposition between the man-made and the natural. Ultimately it is nature who wins in this scenario, as the huge tree overwhelms the urban surroundings. The composition effectively positions nature as superior to man in several ways. Aside from the obvious size of the tree, it is clearly more colorful than the duller surroundings (thus it draws the eye more). Additionally the swirling light effect around the trunk of the tree gives the structure a magical element which sets it apart from the boring surroundings.

Earthcology
This bright, verdant composition uses a pink butterfly to form part of this planet’s structure. Everything from the lighting the color palette has been amplified to make this piece stand out, and it’s really effective. The detail in the butterfly is immense, including a series of complex patterns that appear to have been superimposed over the wings. The various bushes and trees constructing the planet have been blending and warped to form a realistic planet structure, which is surrounded by a bright glow, helping it stand out even more against the dark blue background.

(rb)

Creating a grid is typically one of the very first things you do when starting a design comp. After all, it provides the basic structure on which the rest of your design will lie. In this article, we’ll provide two different methods for efficiently establishing a grid. These methods enable you to quickly and smartly form a grid so that you can spend more time designing.

Method 1

The first method uses GuideGuide by Cameron McEfee to set up vertical columns. This Photoshop plugin is said to be in beta, but from my experience with it everything works perfectly well, and there is even talk of the release of GuideGuide 2, which will include more features. Instructions on installing it can be found on the GuideGuide page. There is also a video tutorial on using it that was put together by Russell Brown at Adobe.

Set Up Your Grid in 5 Seconds

1. Determine the margins, number of columns and gutter widths. Then click “Create Guides.�
2. If the canvas for your design comp is wide, do the quick math so that the margin lengths allow for the grid to be constrained to your 960 pixels. For example, if the canvas is 1200 pixels wide, then the left and right margins would be 120 pixels each.

An example of 12 columns with 20-pixel gutters and margins set to 120 pixels.

You can also set a baseline grid this way, but you’d end up with a lot of guides. A better option might be the method featured on a Method & Craft video by Mike Precious…

Method & Craft’s Extensible Baseline Grid

Here is a brief summary of the steps for setting up an extensible baseline grid.

1. Establish the grid’s baseline value, then create your pattern template. The baseline grid is determined by the leading (or line height) of the body text. For example, if the main body copy of your design is set in 13-point Helvetica, with the leading at 18 points, then you would set up an 18-pixel baseline grid.
2. Create a Photoshop file that is the height of your baseline grid, fill the bottom pixel, and leave the remaining pixels transparent. In this case, the dimensions of your canvas would be 1-pixel wide and 18-pixels tall.
3. “Select All,â€� and then save this as a new pattern. You can do this by going to Edit → Define Pattern…
   
4. Go to Adjustment Layer → Pattern, and select your newly created grid pattern.
   
5. Adjust the opacity as desired.

An example of method 1 with the columns and baseline grid together.

Advantages

• You get an optional baseline grid, which you can use independent of the vertical column grid. A baseline grid can create visual clutter when laid over top a design comp. With this method, it can just be toggled on when needed.
• If you prefer to use guides for your grid, this is the better solution.
• You can hide and show the grid through an easy shortcut.

Drawbacks

• Using vertical guides to mark other elements in the document can be difficult because you might confuse them with the grid.
• Compared to method 2, your options for the grid are not as specific or comprehensive (such as setting the height of the horizontal module).
• Grid lines are determined mathematically and won’t necessarily align with the pixel grid. This means that your guides could in some cases fall unevenly and end up being positioned down the middle of the actual pixels.
• This method requires two separate processes to create a vertical and baseline grid, compared to just the one method coming up.

Method 2

Modular Grid Pattern is an all-in-one grid solution. The tool creates a vertical columnar grid and a baseline grid all as one pattern. There are two ways to go about using Modular Grid Pattern:

Application Panel
In addition to Photoshop, this also works with Fireworks, GIMP and Microsoft Expression Design. Please note that you must have the latest software (Adobe CS5 or the equivalent of one of the other applications) and an Internet connection for this panel to work. That being said, if you have already created a pattern and saved it in your library, then you would be able to access it without needing anything else.

Web app
This works in Chrome, Firefox, Safari and Opera. The Web app enables you to create a grid pattern and download it straight from the browser in all formats.

Whichever way you choose, just pick a module width, gutter width and baseline number, and Modular Grid Pattern does the rest. You can also specify a height for the horizontal module.

Advantages

• This is a fast way to get it all; an all-in-one layer.
• You have the option to download a Photoshop pattern file, PNG or transparency mask.
• You can label the patterns and put them in a folder so that you can come back to the grid with virtually no set-up required at all.
• Frees your guide to be used for other purposes.
• You can specify a height for the vertical module to establish an overall vertical rhythm.
• The grid can be overlaid with varying degrees of opacity, so you can make it less distracting as you are designing.
• Supports applications other than Photoshop.

Drawbacks

• If your canvas is wide, then making the grid a pattern will make it extend across the entire page, which could be annoying and make it harder to see the boundaries of the content. This can be fixed in a couple of ways:
  1. Apply a layer mask to constrain the grid to just the main content area.
  2. Draw a rectangle the size of the main content area (for example, 960 × 1200 pixels), and apply the grid as a layer style, with the fill set to 0% in this case.
• This method forces you to choose a baseline grid, preventing you from just creating vertical columnar modules.
• It requires you to manually hide and show the grid layer, without the benefit of a keyboard shortcut.

Concluding Thoughts

We hope these methods will increase your efficiency and precision in establishing a grid. In the end, the way you set up the grid will depend on your workflow. Evaluate your needs, then choose the method best suited to them. Either method requires minimal set-up but can save much time and frustration.

Additional Resources

If neither method interests you, quite a few templates out there would also do the job. I recommend checking out Mindy Wagner’s layout template and Robbie Manson’s 960-pixel grid templates. Also, The Grid System links to a number of quality resources and tools.

(al)

© Steve Schoeffel for Smashing Magazine, 2011.