From designing the individual icons to converting them for @font-face embedding, and even licensing them for distribution, we shall be using only free software and online services. How about that? You will not need to rely on any of the esoteric knowledge required to make successful alphanumeric typefaces; just an eye for designing things that may appear very, very small.

Ultimately, you should go away with a process for making design elements that extends far beyond the manufacture of simple icons.

Before we continue, something should be said about what exactly we are trying to achieve by using icons in our designs in the first place, and what makes one icon more successful than the next. Theory before application. In order to do this, we must consider the icon’s role as part of semiology.

What makes a good icon?

Semiology, in the broadest sense, is the study of sign systems, how we contribute to their formation and maintenance, and the impact they have on our understanding of the world within and without us.

Whenever you consider a part of your design work from the perspective of what it signifies — what it is saying to your audience or what concepts it is recalling for them — you are considering your design as a semiotician. Although semiology, like linguistics, does cover language, there are many more things on a website that “say” something without words, such as colors, typefaces and the shapes that we call icons. One should be wary that what these things say has a strong cultural dimension. In China, the color red can signify good fortune whereas, in many Western countries, it is used to denote danger.

(Based on an image by ell brown)

The term “icon” has a special meaning in the field of semiology. An icon is an artifact that signifies something by resembling it. Take, for instance, a map pin icon. As a shape that resembles a “real” map pin, it is able to signify it. In turn, the real map pin brings to mind all sorts of meaningful concepts. Among these are abstract concepts such as location as well as less abstract concepts, like the map to which the pin might belong.

Some so-called icons are not truly iconic. The ubiquitous RSS icon, with its dot and two concentric circle segments, no more resembles syndication than the words “Really Simple Syndication” resemble it. The configuration of shapes that constitute the RSS icon signify RSS by convention alone; we have agreed that this is what they are for. An RSS icon is more properly called an RSS symbol.

By now, I hope we have established that successful web icons should meet one or both of the following two criteria:

1. A strong resemblance to a real thing, for example a print icon that resembles an actual printer
2. Establishment and, therefore, familiarity as a recognizable symbol within the sign system

Icon fonts gaining popularity

Icons have long been considered a good way to enhance UI designs because they provide a visual shorthand that assists the comprehension of an otherwise purely textual message. Sheets of icon images are circulated throughout the web design community like contraband, each set promising to make your design shinier, more enticing and more clickable than the last.

Compared with images, the idea of using embedded fonts for icons is a relatively new idea. However, it is one that is gaining considerable traction due to the many inherent advantages over the image (or background-image) method. I wrote about some of these advantages on my tiny blog back in early September. Chris Coyier obviously had a similar idea, introducing the idea to a (much, much) larger audience weeks later. Drawing on the two posts and others, I’ve compiled this comprehensive list of features:

1. They are easily resized without degradation (because they are essentially vectors)
2. Recoloring the icon is as trivial as recoloring text. For example, color: orange for an RSS icon
3. Many icons are grouped into one file, necessitating just one http request
4. As Chris points out, they are shapes that have transparent “knockouts” which work in browsers as early as IE6 (unlike alpha PNGs)
5. For icons that should appear adjacent to text, alignment and wrapping are non-issues (because they are text)
6. You can apply CSS3 effects via text-shadow and background-clip:text that respect the shape of the glyph
7. Unlike with SVG, cross-browser support is easy to achieve

Problems

In Chris’s words, using fonts for icons is a good idea, I’m telling you. Nonetheless, the status quo regarding icon font usage is not ideal. Firstly, most of the quality fonts available, called things like Pictos, Fico, Klepto, Cheetos, Ponyo and Sailor Moon (I may have got some of these wrong), are paid-for fonts. In practice this means there are really two problems:

1. You might have to part with money
2. Whether you have to part with money or not, you’ll have to accept somebody else’s filthy design work

Aside from automated crawler programs, I’m assuming that it is mostly web designers who will be reading this article. I’m a designer myself and I don’t think I’m alone in resenting the idea of having to compromise my own design by relying on someone else’s handiwork. Naturally, I’m even less enamored with the thought of paying for the privilege. I know what icons I want to use and I know precisely how I want to tailor them to my overall design. I want that control.

After some searching, I was eventually introduced to the possibilities of Inkscape‘s SVG Font Editor. With a little practice using Inkscape and the help of an online converter to transform my SVG font into a TTF, I was able to make “Heydings”. This font is now included in Simurai’s list (as linked to by Coyier’s article). I’m not trying to sell you my font (it’s free anyway) but I think it makes for a pretty good proof of concept:

Making icon glyphs with Inkscape

Setting up Inkscape

Let’s get started by downloading and installing Inkscape. You should also use my icon font starter template, located in the resources folder of this GitHub repository (more on this GitHub project later). Once you’ve opened this file in your new Inkscape installation you should set up your workspace by opening the following windows from the main menu:

• OBJECT → FILL AND STROKE
• OBJECT → ALIGN AND DISTRIBUTE
• TEXT → SVG FONT EDITOR

In the SVG Font Editor pane, click on “Font 1” under “Font”. Your workspace should now look something like this screenshot:

It’s worth pointing out that the baseline guide is not below the lower boundary of the canvas by mistake: For reasons best known to somebody else, your icons should very slightly overhang the bottom of the canvas if you wish them to share the same baseline as adjacent typefaces. I’ve tested this with Georgia, Arial and a number of web fonts.

Making your first glyph

To define the glyph, click on the Glyphs tab in the SVG Font Editor pane, then click the Add Glyph button in the lower portion of the pane. It’s not immediately clear on first inspection, but if you click on your glyph (“Glyph 1”) a field will appear which allows you to enter the character to which you’d like to assign your icon. We shall be making a simple star shape first of all, so I recommend you enter the character “s”, “S” or “*”:

Now that we’ve defined the glyph’s corresponding character, we need to make the glyph itself. Since we are just making a star this time, we should select Inkscape’s helpful Stars and Polygons tool from the left toolbar and draw a star in the canvas. You will notice that this tool comes with options that allow you to change the appearance of the star. In my example, I’ve chosen 5 corners, a spoke ratio of 0.5 and a rounded value of 0.1.

Center the star horizontally using the Align and Distribute panel (which may be hidden below the SVG Font Editor) and drag the shape downwards to meet the baseline. With the grid turned off, the canvas should look something like this:

Glyphs in our icon font are just shapes; shapes with no colors, layers or gradients. So, to make our star a legitimate candidate for our font, we must convert it from an object into a path-based shape. To do this, select the star and choose PATH → OBJECT TO PATH from the main menu. Now, with the star selected, we can go to our SVG Font Editor, highlight the applicable “s” glyph and hit the Get curves from selection button:

When you enter “s” in the Sample Text field, your star should now appear as a preview, like so:

Making more complex icons

You’ve now made your first scalable SVG font glyph. By using options from the Fill and Stroke pane, editing path nodes and combining objects and strokes you will be able to make much more ambitious icon designs. I don’t want to go into a full Inkscape tutorial because we have a lot more to cover, but following these simple rules will stand you in good stead:

1. Stick to using black strokes and fills, if only to remind you that the icons are just shapes, not complex vector graphics. Coloring the icon is possible in the final product using CSS.
2. All objects and strokes (lines) must be converted to paths using either PATH → OBJECT TO PATH or PATH → STROKE TO PATH
3. Multiple objects and/or strokes used to make up one icon glyph should be combined together using PATH → COMBINE (or, in some circumstances, PATH → UNION)
4. To cut shapes out of shapes (like using a cookie cutter) place the shape that will create the “knockout” over the main shape, select both and choose PATH → DIFFERENCE. White areas on black that look like “knockouts” will not suffice, as you will discover when you hit Get curves from selection See rule 1.

Preparing your font for embedding

Imagine that you have gone on to create a number of useful icons for your font by repeating the glyph spawning method that I have just described and saved the file as myicons.svg. Now, you’ll want to prepare this icon library for use in web pages.

Converting the SVG to TTF

The first measure you should take is to convert the SVG font into a more familiar and versatile format. TTF is the pre-eminent format for local installation as well as distribution. It also provides a good base for reconversion to meet @font-face requirements. Online services that allow you to convert fonts between formats include http://onlinefontconverter.com/, http://www.fontconverter.org/ and http://www.font2web.com/. My personal favorite, however, is http://www.freefontconverter.com/ because I don’t get queued and I’ve never known it to return any glitches.

I won’t patronize you by explaining how to use this resource. The successive file upload field, select element and gigantic Convert button speak for themselves, really.

Editing the font’s meta info

Now that you have the TTF in your hand, I recommend you edit the generated meta data. Renaming, attributing and describing the font to your satisfaction makes it ready for installation, embedding and distribution. It’s also a way to show that the font is your own work. Readers running Windows have the option of using the deceptively grand sounding Microsoft Font Properties Editor or the free-for-x-days Typograf. For Apple and Linux users, I implore those better informed than I am to help out in the comments.

The clunky but serviceable Font Properties Editor

Important note: Although the Microsoft Font Properties Editor allows you to add author, description and license information, it doesn’t seem to let you edit basic data such as the font name and postscript name. These fields are disabled. If you’re using this particular piece of software, you’ll need to locate and edit the prohibited values in the SVG code prior to TTF conversion. Open the original SVG in your favorite text editor (I use Notepad++) and edit the following:

Font Name: Found in tag, font-family attribute

Postscript Name: Found in tag, id attribute

Description: You ought to add a description (author, license etc.) in the tag. Please note that this is not equivalent to the TTF description text and will not be preserved through conversion; you’ll have to add the TTF description separately.

Making the font embeddable

Once you’ve installed the TTF on your local system and previewed it a little to make sure nothing has gone awry, it’s time to run it through Font Squirrel’s @font-face generator. To make the outputted code as efficient and effective as possible there are a few options worth noting in the generator’s expert mode:

Subsetting: The subsetting option allows you to include only the characters which you’ve delegated, reducing file size.

Remove kerning: Your icons will almost always appear in isolation, so kerning (added information regarding the proximity of characters to one another) is not necessary. This will, purportedly, reduce file size as well.

WebOnly™: If you’re evangelical about people using your font as intended ‐ and not reverting to making images out of the glyphs in Photoshonk ‐ you can select this option. It may also better suit your licensing plan. I’ll cover licensing now.

Distributing your font

If you are interested in releasing your font, it is considered good practice to give it a license. Many font websites will not carry your font without one. Since we used free, open source software to make the icons, it is fitting that we should distribute them as such.

There are many licensing options available and investigating them is sometimes perplexing. The GNU General Public License is perfectly acceptable, but you may want to consider the SIL Open Font License. The main advantage with this license is the provision of a reserved font name: Other designers are permitted to modify your font, so long as they name it differently. In practice, this means that crimes against icon design cannot be carried out “in your name”.

In the case of either license, you should include a version in a text file, as well as inserting the copyright notice and a link to the full license URL in the font’s meta. Visit the respective licensing pages (linked above) for more specific instructions.

The end of CSS spriting

Why stop at making generic icons using SVG fonts? With the ability to make icons comes the ability to make more site-specific shapes, branding elements and decorations. Like CSS sprites, all of these visual elements can be kept in one file, reducing server calls to a singular http request. Unlike CSS sprites, the elements are both resizeable and not dependent on positional coordinates (background-position values) to display correctly. This makes them eminently better suited to responsive design.

Let’s pretend I chose to use an SVG font to cover some basic design elements in my vaguely steampunk-like blog. A simple HTML table rendering of the component designs would look something like this:

One of the best things about this approach is the versatility. For instance, the second cog shape from the left could be used as both a tiny bullet point design and a giant, abstracted background decoration. Coloring is as easy as using color:maroon, but there’s no need to adhere to flat colors; a multitude of CSS3 effects can be employed to add texture and tactility. For a little inspiration to get you started, examine this excellent gallery of CSS3-enhanced webfonts.

A quick note about screen readers

One problem with using fonts to display visual elements in this way is the impact on screen reader output. A visitor to the site who reads visually will see cogs, arrows and the like, but a screen reader will insist on reading out the characters that designate these designs. For uses of SVG font elements that are decorative, I recommend heeding Coyier’s suggestion: Assign the vectors to the Supplementary Private Use Area of Unicode. Such characters should not be read out by readers.

A collaborative icon webfont

As my JavaScript mentor, Rupert, pointed out to me the other day, using SVG fonts to create icon sets offers an interesting opportunity for collaboration. You see, SVG code ‐ which is a form of XML ‐ is highly standardized and easily human-readable. It is exactly the sort of source code suited to development using a “social coding” service like GitHub.

The idea resonated with me for its semiotic implications: If the apprehensibility of an icon is determined by consensus, then surely consensus should also play a role in its formation. By collaborating over our icon “sign system”, only the most archetypal icon designs should emerge. We should be able to create icon vocabularies that truly belong to the communities for whom they should mean something.

I have created a public GitHub repository to help foster this idea. Called Community Icon Font, the repository’s code base is not complex: A close inspection of the preceding Inkscape tutorial and a quick read of the project page should give you everything you need to get involved. If you are new to GitHub, try looking at their help pages or asking your neighborhood techie (that’s what I do).

Written for Web Designer Depot by Heydon Pickering. Heydon likes coding tags for people who like writing words. Twitter: @heydonworks

Never Ending WordPress Business Bundle – only $14!

What constitutes a strong password? Well, that depends on who you ask. However, traditional factors that contribute to a password’s strength include it’s length, complexity, and unpredictability. To ensure password strength, many sites require user passwords to be alphanumeric in addition to being a certain length.

In this tutorial, we’ll construct a form that gives the user live feedback as to whether their password has sufficiently met the complexity requirements we will establish.

Before we begin, let’s get take a sneak peak at what our final product will look like (click for a demo):

Please note: The purpose of this tutorial is to show how a simple script can be written using javascript and jQuery to enforce password complexity requirements. You’ll be able to add additional requirements to the script if needed; however, note that form validation (server- and client-side), form submission, and other topics are not covered in this example.

Step 1: Starter HTML

First we want to get our basic HTML starter code. We’ll use the following:

<!DOCTYPE html>
<html>
<head>
	<title>Password Verification</title>
</head>
<body>
	<div id="container">
		<-- Form HTML Here -->
	</div>
</body>
</html>

Step 2: Form HTML

Now let’s add the markup that will be used for our form. We will wrap our form elements in list items for better structure and organization.

<h1>Password Verification</h1>
<form>
	<ul>
		<li>
			<label for="username">Username:</label>
			<span><input id="username" name="username" type="text" /></span>
		</li>
		<li>
			<label for="pswd">Password:</label>
			<span><input id="pswd" type="password" name="pswd" /></span>
		</li>
		<li>
			<button type="submit">Register</button>
		</li>
	</ul>
</form>

Here’s an explanation of the code we used:

• span elements – these will be used for visual styling of our input elements (as you’ll see later on in the CSS)
• type="password" – this is an HTML5 attribute for form elements. In supported browsers, the characters in this field will be replaced by black dots thus hiding the actual password on-screen.

Here’s what we’ve got so far:

Step 3: Password information box HTML

Now let’s add the HTML that will inform the user which complexity requirements are being met. This box will be hidden by default and only appear when the “password” field is in focus.

<div id="pswd_info">
	<h4>Password must meet the following requirements:</h4>
	<ul>
		<li id="letter" class="invalid">At least <strong>one letter</strong></li>
		<li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
		<li id="number" class="invalid">At least <strong>one number</strong></li>
		<li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
	</ul>
</div>

Each list item is given a specific ID attribute. These IDs will be used to target each complexity requirement and show the user if the requirement has been met or not. Also, each element will be styled as “valid” if the user’s password has met the requirement or invalid if they haven’t met it (if the input field is blank, none of the requirements have been met; hence the default class of “invalid”).

Here’s what we have so far:

Step 4: Create background style

We are going to give our page elements some basic styling. Here’s an overview of what we’ll do in our CSS:

• Add a background color – I used #EDF1F4
• Add a background image with texture (created in Photoshop)
• Setup our font stack – We’ll use a nice sans-serif font stack
• Remove/modify some browser defaults

body {
	background:#edf1f4 url(bg.jpg);
	font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;
	font-size:16px;
	color:#444;
}
ul, li {
	margin:0;
	padding:0;
	list-style-type:none;
}

Step 5: Create background style

Now we will style our main container and center it in the page. We’ll also applying some styles to our H1 tag.

#container {
	width:400px;
	padding:0px;
	background:#fefefe;
	margin:0 auto;
	border:1px solid #c4cddb;
	border-top-color:#d3dbde;
	border-bottom-color:#bfc9dc;
	box-shadow:0 1px 1px #ccc;
	border-radius:5px;
	position:relative;
}
h1 {
	margin:0;
	padding:10px 0;
	font-size:24px;
	text-align:center;
	background:#eff4f7;
	border-bottom:1px solid #dde0e7;
	box-shadow:0 -1px 0 #fff inset;
	border-radius:5px 5px 0 0; /* otherwise we get some uncut corners with container div */
	text-shadow:1px 1px 0 #fff;
}

It’s important to note that we have to give our H1 tag a border radius on its top two corners. If we don’t, the H1′s background color will overlap the rounded corners of it’s parent element (#container) and it will look like this:

Adding border-radius to the H1 element assures our top corners will remain rounded. Here’s what we have so far:

Step 6: CSS styles for the form

Now let’s style our various form elements starting with the list elements inside the form:

form ul li {
	margin:10px 20px;

}
form ul li:last-child {
	text-align:center;
	margin:20px 0 25px 0;

We used the :last-child selector to select the last item in the list (button) and give it some extra spacing. (Note this selector is not supported in some legacy browsers). Next, let’s style our input elements:

input {
	padding:10px 10px;
	border:1px solid #d5d9da;
	border-radius:5px;
	box-shadow: 0 0 5px #e8e9eb inset;
	width:328px; /* 400 (#container) - 40 (li margins) -  10 (span paddings) - 20 (input paddings) - 2 (input borders) */
	font-size:1em;
	outline:0; /* remove webkit focus styles */
}
input:focus {
	border:1px solid #b9d4e9;
	border-top-color:#b6d5ea;
	border-bottom-color:#b8d4ea;
	box-shadow:0 0 5px #b9d4e9;

Notice that we calculated our input element’s width by taking the #container width (400px) and subtracting the margins, paddings, and borders applied to the input’s parent elements. We also used the outline property to remove the default WebKit focus styles. Lastly let’s apply some styles to our other form elements:

label {
	color:#555;
}
#container span {
	background:#f6f6f6;
	padding:3px 5px;
	display:block;
	border-radius:5px;
	margin-top:5px;
}

Now we have something that looks like this:

Step 7: Button Styles

Now we are going to style our button element. We’ll use some CSS3 styles so users with newer browsers get a better experience. If you’re looking for a great resource when creating background gradients in CSS3, check out Ultimate CSS Gradient Generator.

button {
	background: #57a9eb; /* Old browsers */
	background: -moz-linear-gradient(top, #57a9eb 0%, #3a76c4 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#57a9eb), color-stop(100%,#3a76c4)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* IE10+ */
	background: linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a9eb', endColorstr='#3a76c4',GradientType=0 ); /* IE6-9 */
	border:1px solid #326fa9;
	border-top-color:#3e80b1;
	border-bottom-color:#1e549d;
	color:#fff;
	text-shadow:0 1px 0 #1e3c5e;
	font-size:.875em;
	padding:8px 15px;
	width:150px;
	border-radius:20px;
	box-shadow:0 1px 0 #bbb, 0 1px 0 #9cccf3 inset;
}
button:active {
	background: #3a76c4; /* Old browsers */
	background: -moz-linear-gradient(top, #3a76c4 0%, #57a9eb 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a76c4), color-stop(100%,#57a9eb)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* IE10+ */
	background: linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a76c4', endColorstr='#57a9eb',GradientType=0 ); /* IE6-9 */
	box-shadow:none;
	text-shadow:0 -1px 0 #1e3c5e;
}

Step 8: Password Information Box

Now we are going to style the box that informs users if they are meeting the password requirements. First, we will style the containing element (#pswd_info).

#pswd_info {
	position:absolute;
	bottom:-75px;
	bottom: -115px\9; /* IE Specific */
	right:55px;
	width:250px;
	padding:15px;
	background:#fefefe;
	font-size:.875em;
	border-radius:5px;
	box-shadow:0 1px 3px #ccc;
	border:1px solid #ddd;
}

Now let’s add some style to the H4 element:

#pswd_info h4 {
	margin:0 0 10px 0;
	padding:0;
	font-weight:normal;
}

Lastly, we are going to use the CSS ::before selector to add an “up-pointing triangle”. This is a geometric character which can be inserted using it’s corresponding UNICODE entity. Normally in HTML you would use the character’s HTML entity (▲). However, because we are adding it in CSS, we must use the UNICODE value (25B2) preceded by a backslash.

#pswd_info::before {
	content: "\25B2";
	position:absolute;
	top:-12px;
	left:45%;
	font-size:14px;
	line-height:14px;
	color:#ddd;
	text-shadow:none;
	display:block;
}

Now we have this:

Step 9: Valid and invalid states

Let’s add some styles to our requirements. If the requirement has been met, we’ll give it a class of “valid”. If it hasn’t been met, it will get a class of “invalid” (default class). As for the icons, I am using two 16×16 pixel icons from the Silk Icon Set.

.invalid {
	background:url(../images/invalid.png) no-repeat 0 50%;
	padding-left:22px;
	line-height:24px;
	color:#ec3f41;
}
.valid {
	background:url(../images/valid.png) no-repeat 0 50%;
	padding-left:22px;
	line-height:24px;
	color:#3a7d34;
}

Because we haven’t included the JavaScript functionality that will dynamically change the “valid” and “invalid” classes, all requirements will appear as invalid (we’ll change this later). Here’s what we have so far:

Hide the Box

Now that we have everything styled exactly how we want it, we’re going to hide the password information box. We’ll toggle it’s visibility to the user using JavaScript. So let’s add the following rule:

#pswd_info {
	display:none;
}

Step 10: Grasping the scope

Here is what we want to accomplish with our script:

• When the password field is selected (:focus), show it
• Every time the user types a new character in the password field, check and see if that character fulfills one of the following password complexity rules:
  • At least one letter
  • At least one capital letter
  • At least one number
  • At least eight characters in length
• If it does, mark that rule as “valid”
• If it doesn’t, mark that rule as “invalid”
• When the password field is not selected (‘:blur’), hide it

Step 11: Getting jQuery setup

First, we need to add jQuery to our page. We’ll use the hosted version. We also want to link to our “script.js” file, which is where we will write the code needed for our password verification test. So, add the following to your <head> tag:

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="script.js"></script>

In our “script.js” file, we’ll start with some basic jQuery starter code for our script:

$(document).ready(function() {

	//code here

});

Step 12: Setting up the event triggers

Essentially we have three events we will be listening for:

1. “Keyup” on the password input field
   (triggers whenever the user pushes a key on the keyboard)
2. “Focus” on the password input field
   (triggers whenever the password field is selected by the user)
3. “Blur” on the password input field
   (triggers whenever the password field is unselected)

As you can see, all the events we are listening for are on the password input field. In this example, we will select all input fields where the type is equal to password. jQuery also allows us to “chain” these events together, rather than typing out each one. So, for example, rather than typing this:

$('input[type=password]').keyup(function() {
	// keyup event code here
});
$('input[type=password]').focus(function() {
	// focus code here
});
$('input[type=password]').blur(function() {
	// blur code here
});

We can chain all the events together and type the following:

$('input[type=password]').keyup(function() {
	// keyup code here
}).focus(function() {
	// focus code here
}).blur(function() {
	// blur code here
});

So, with that knowledge, let’s create our code that will show or hide our password information box depending on whether the password input field is selected by the user or not:

$('input[type=password]').keyup(function() {
	// keyup code here
}).focus(function() {
	$('#pswd_info').show();
}).blur(function() {
	$('#pswd_info').hide();
});

You will now notice that by clicking in the password input field, the password information box will be visible. Likewise, by clicking outside the password input field, the password information box will be hidden.

Step 13: Checking the complexity rules

All we need to do now is have the script check the value in the password field every time a new character is entered (using the ‘keyup’ event). So, inside the $('input[type=password]').keyup function we’ll add the following code:

// set password variable
var pswd = $(this).val();

This sets up a variable named ‘pswd’ that stores the current password field value every time there is a keyup event. We will use this value in checking each of our complexity rules.

Validating the length

Now, inside the same keyup function, let’s add the following:

//validate the length
if ( pswd.length < 8 ) {
	$('#length').removeClass('valid').addClass('invalid');
} else {
	$('#length').removeClass('invalid').addClass('valid');
}

This checks to see if the length of the current password value is smaller than 8 characters. If it is, it’s get an ‘invalid’ class. If it’s bigger than 8 characters, it gets a ‘valid’ class.

Validating with regular expressions

As you saw above, we simply have an if/else statement that tests to see if the complexity requirement has been met. If the complexity requirement is met, we give it’s ID in the password box a class of “valid”. If it is not met, it gets a class of “invalid”.

The rest of our requirements will require we use regular expressions to test the complexity rules. So, let’s add the following:

//validate letter
if ( pswd.match(/[A-z]/) ) {
	$('#letter').removeClass('invalid').addClass('valid');
} else {
	$('#letter').removeClass('valid').addClass('invalid');
}

//validate capital letter
if ( pswd.match(/[A-Z]/) ) {
	$('#capital').removeClass('invalid').addClass('valid');
} else {
	$('#capital').removeClass('valid').addClass('invalid');
}

//validate number
if ( pswd.match(/\d/) ) {
	$('#number').removeClass('invalid').addClass('valid');
} else {
	$('#number').removeClass('valid').addClass('invalid');
}

Here is an explanation of the three if/else statements we used:

[A-z]

This expressions checks to make sure at least one letter of A through Z (uppercase) or a through z (lowercase) has been entered

[A-Z]

This expressions checks to make sure at least one uppercase letter has been entered

\d

This will check for any digits 0 through 9

Step 14: Test it out

That’s all there is to it! You can add more to this if you want. You could add more complexity rules, you could add a submission method, or you could add whatever else you deem necessary.

Jim Nielsen considers himself a web designer at heart, though he often dabbles in other areas such as print and identity design. He loves acquiring new knowledge from the ever-expanding disciplines of the web. You can follow his latest happenings at his website www.jim-nielsen.com

Never Ending WordPress Business Bundle – only $14!

I honestly think this is one of the most interesting and creative eras for advertisement; some ads are really memorable and funny.

So, inspired by that I decided to make a tutorial on how make a retro poster for a web designer.

After reading the tutorial, you can download the Illustrator source file at the end of the post for reference.

I hope you guys like it and please be sure to share your results and questions with us in the comments….

Here’s a full preview of the poster that we will be creating:

Step 1

Let’s start by opening Adobe Illustrator. Create a 21 x 27 cm (8,27 x 10,73 inches) canvas in CMYK mode with 300 dpi resolution.

When designing a poster/flyer, I like to place some guides on the edges. You can make then visible by pressing command + R / Ctrl + R. Just grab them and place. I used a 1 cm distance on each border.

So, first you should download this texture we’re going to use on the background, you can get it at CG Textures. Place it on the canvas vertically and then hide it for now. We’ll activate it later.

Step 2

The next thing you should do is to download the Flyboy BB font; you can get it here. This will be used for the main title. Using the text tool (T), write “The WebDesigner” in a dark yellow color. The CMYK values can be viewed in the second image bellow.

Make an individual text box for the word “The” and use a blue color on the fill. The CMYK values can be viewed in the second screenshot bellow.

Step 3

Let’s start by creating a rectangular shape with spiked ends that will be used as background to the secondary text. You can create it using either the rectangle tool (M) or the pen tool (M).

Using the selection tool (V) + alt you can copy the original shape. Then go to Transform > Reflect, and choose to reflect on the vertical Axis.

In order to unite the shapes, place both as shown below, then go to the pathfinder panel, and choose the option called Unite.

Here’s another font you should download, Bazar Medium; get it here. So, here I just insert the text “The Hero of the Worldwide Web”.

Using the pen tool (P) I made these little shapes to stylize the text a bit. You can copy and reflect these, so they are symmetrical.

Step 4

I always liked those rounded rectangles used as a sort of ad plate. So, using the rounded rectangle tool, create the basic shape and then using the direct selection tool (A), adjust each point until it looks like the shape below.

Let’s add a linear blue to white gradient. Go to the gradient panel to set the colors as below. Using the gradient tool (G), you can adjust the amount and direction of the gradient.

Halftone is a really stylish effect that can bring that old fashion aesthetic to your layout. Go to Effect > Pixelate > Halftone. Set maximum radius to 10 pixels and make sure all the channels are at 0. This will make the gradient monochromatic.

Using the text tool (T) write the headline “Webdesigner Depot proudly presents” using the Bazar Medium font.

Step 5

Next, let’s draw a retro ribbon shape, use the pen tool (P) and add the previous blue color. It may look a bit like tooth paste, but let’s add some folded edges on it next.

Draw the folded border using the pen tool (P). Duplicate, reflect, and place it on the top.

Add some little stylized lines on each side. This may take some time, but if you duplicate and simply adjust each using the direct selection tool (A) it will be quicker.

Copy and paste it twice, and then let’s add some characteristics like “Strong,” “Smart,” and “Fast.” Again, use the Bazar Medium font.

Step 6

Let’s make a simple arabesque using the pen tool (P), you can also try to do it using the brush tool (B). Then just duplicate and place it below.

Use the line segment tool (\) to create these lines, then duplicate them like this. Use an italic font to write the following text; I used Gotham Bold Italic on this sample. Using the text tool (T), fill each line with one part of the sentence.

Step 7

Those old promotional splashes can be really funny, let’s draw one. First use the crystallize tool, set the parameters of the tool by just clicking once on it’s icon; you can see them below. Now what you do is create a circle using the ellipse tool (L) and then use the crystallize tool above it. Just make sure you made the circle on the right scale.

Lets add the previous linear blue gradient. Use the gradient tool (G) to place it in the right direction.

Let’s use the halftone effect again. This time let’s use a maximum radius of 16 pixels.

Copy this splash and change its fill to the previous red color. Send it to front.

Use the text tool (T) to write “HIRE NOW” using Bazar Medium. Duplicate the text, pick a black fill and send it to back.

Step 8

This is the last font you will need to download, this one is called Headline. As the name says, it’s really useful for headlines. Get it here. Let’s write “Hey buddy, I have an idea.” This will be our character’s quote.

I also added a few slashes below it, just to make a bit more dynamic.

Step 9

I wanted to draw a light bulb to make things a bit more obvious. So first use the ellipse tool (L). Then make the light effects using the pen tool (P).

Let’s not forget to add the base of the light bulb. Drawing is about abstraction so don’t worry if it’s a bit abstract. Distance will tell what it looks like.

Don’t forget to draw the core and a few lines outside the circle. Make it a bit messy, so it look likes an error on the printing for a more vintage feeling.

Step 10

Our character is the hardest part of this tutorial, but follow my instructions and everything will be a piece of cake. I wanted to make a character similar to those men on the 50s ads, with an “ice cream” hair.

Let’s begin with the eyes. First draw an ellipse using the ellipse tool (L). Draw another ellipse in the border of it, then go to the pathfinder panel and choose the option called Minus Front.

We’re going to use only the pen tool (P) from now on. It’s easy, you will see. So, draw this eye shape, then duplicate and resize it using the the selection tool (V).

Now draw a really simple round nose. The mouth, as you can see, is basically two lines.

Let’s add some wrinkles around the mouth. Add a line in the mouth to represent the teeth.

Add a few lines in each side to shape the tongue and a wrinkle in the middle.

I call this kind of chin by “butt chin,” I think I don’t have to explain why, do I? Just kidding guys. Draw his cheeks using the pen tool (P).

I decided to make a head without the body, so you just draw these lines representing the neck.

The ear is quite simple, just add a small detail to represent the cartilage.

Back to the mouth, make a shape over the tongue using a red fill, then use the blending mode called Multiply. Also take out one of his teeth to add some humor.

While drawing him, I though that a redhead guy would be cool, but he needs a special haircut.

But, first let’s take care of the eyebrows. Just draw the first one, copy, reflect, and place it on the other side.

Let’s add some cool side burns on each side, the left one is thinner, don’t forget it.

The old fashioned “Ice Cream” hair, some may dislike, but it fits perfectly here. Draw it in two parts, like it was combed.

Using the ellipse tool (L) I added some tiny circles on each eye.

You may say the hair is too flat, so let’s add some white highlights to represent reflections.

Draw all around his face, watch for making some holes on parts like the eyes and mouth. Add a yellow to white gradient (the same yellow used all over the tutorial). Adjust the direction using the gradient tool (G). Then go again to Effect > Pixelate > Halftone. Set the maximum radius to 8 pixels.

Step 11

First of all, you got to use the Multiply blending mode on each of the previous elements. Then use the rectangle tool (M) to create this beige radial gradient over the illustration. Then go to the blending modes and choose the one called Multiply.

Another paper texture to download, get it here. Place it over the previous gradient, then use the Multiply blending mode.

And here’s the last texture, get it here. Go to the transparency panel, set the opacity to 70% and choose the blending mode called Color Burn.

Now you can show the background texture from the beginning and it’s done.

The Result

Well guys, I hope you had fun designing it, go on and experiment more often with type, also research about 50′s design, you may find some really interesting samples. You can download the illustrator file here.

Marcos Torres is a Brazilian freelance illustrator/art director and also a contributor for Abduzeedo as a tutorial designer. You can get in touch with more of his work by accessing his Website or by following him on Twitter.

Have you followed this tutorial? Share your results and experience below…

Never Ending WordPress Business Bundle – only $14!

It’s one of the hardest tools to master in Illustrator, but if you want to achieve a 3-D look in your illustrations, you have to really understand how to use this tool properly.

We’re going to create a Super Mario-style mushroom in order to better understand how to use this tool using a real life example.

When you get to the end of the tutorial, please share your results with us. And do let us know if you ran into any trouble along the way.

Step 1

Let’s open Adobe Illustrator and create a canvas that is 25 × 11 cm (9.84 × 4.33 inches), in RGB, and at 300 DPI.

Let’s start on the left side of the canvas.

Make the rulers visible (Command/Control + R), and then draw one down the y axis.

Using the Ellipse tool (the shortcut is the letter L), draw a circle (hold down Shift to make the circle perfect).

Using the Pen tool (P), make this mushroom head shape. Don’t forget to include a straight line on the right, because we’re going to be reflecting this side later for the rest of the illustration.

Again using the Pen tool (P), draw the following contour (which will be one of the white dots) on the mushroom head, staying in perspective.

Create the face of the mushroom with the Pen tool (P), again to allow it to be reflected.

Finally, using the Ellipse tool (L), draw an ellipse, and adjust it with the Direct Selection tool (A).

Step 2

Using the Selection tool (L), select everything except the perfect circle. Hold them, and press Shift, and then drag across, which will duplicate the elements.

Right-click on these elements to open the context menu. Go to Transform → Reflect.

Choose the vertical axis.

Now, select everything, and go to the Pathfinder panel. Select “Unite.”

Now that our lines are done, let’s color them in.

Step 3

Before we can start with the Mesh tool, we have to choose the main colors of the mushroom, set them as fills, and disable all strokes.

I chose four colors…

Beige for the face (R:233 G:201 B:126)…

Red for the head (R:196 G:1 B:1)…

White for the dots (R:255 G:255 B:255)…

And black for the eyes (R:0 G:0 B:0)…

Ok, everything’s set. Time for the Mesh tool.

Step 4

Like me, you’ve probably used the Mesh tool only a few times, if ever. Mastering a tool is hard if you don’t know the basics, so let’s try a simple exercise before proceeding. First, create a perfect beige circle using the Ellipse tool (L) + Shift.

Use the Mesh tool (U) to create the grid below. The tool creates two axes at a time, so you might have problems plotting them on the shape the first time you try it. Practice on simple shapes like this circle, and always try to make the grid symmetrical. A good trick is to start with one point in the center.

Use the Lasso tool (Q) to select the points you want. This is the same selection tool that you know from Photoshop, so you’re probably already comfortable with it. Select the points in the upper-left portion of the ball.

Now go to the Color panel, and select the color you want. Don’t worry if the color is too harsh right now; you’re just testing it. You can adjust every color point by selecting it with the Eyedropper tool (I). (A good trick is to use the Eyedropper tool on colors that are already on the ball. The results are easier to control this way.)

Repeat the same process on the opposite side, with a lighter color this time.

If you didn’t achieve the result below, keep practicing. It’ll get easier. After a couple of tries, you’ll understand the dynamics of it.

Step 5

Before starting on the mushroom, lock the other elements so that you don’t accidentally select them with the Lasso tool (Q). But lock one element at a time (face, then head, then eyes, etc.).

Let’s begin with the face. Make a net using the Mesh tool (U). Try to make it symmetrical.

Use the Lasso tool (Q) to select the points at the botton. Use the Color panel to choose a darker color (something like brown), and adjust the gradient using the Eyedropper tool (I).

Do the same thing at the top of the head, using a darker color this time to make it look like a shadow.

Step 6

Use the Mesh tool (U) on just one of the eyes. We’ll duplicate it later to save time.

Make a symmetrical grid. Choose the points in the center using the Lasso tool (Q), and adjust the amount of gradient using the Eyedropper tool (I), selecting each point individually.

Add some white for light in the eye. Take your time adjusting it.

Duplicate the eye, reflect it, and position it across from the left eye.

Step 7

Use the Mesh tool (U) on the head. Making this grid will be a bit tougher because it’s bigger, but it doesn’t have to get too complex.

Use the Lasso tool (Q) to add some white to the top of the head. Adjust the gradients using the Eyedropper tool (I).

The black gradient at the bottom is unusual and so might be a bit hard to get. But practice the selection and adjust it as you go along. It’s easy, trust me.

Step 8

I decided not to use the Mesh tool on the circles, because they are fairly simple shapes and have way less light to be managed. Instead, I used the Gradient tool (G) to get a white-to-gray radial gradient, and I just adjusted its direction and amount.

I repeated the process with the circles on the side. Just be careful with the gradient’s direction.

Step 9

For a final touch, I added a simple ellipse to the bottom using the Ellipse tool (L). Then, using the Gradients panel, I applied this fading black gradient and adjusted its amount and shape. Quite simple, and better than a Gaussian blur to achieve the same effect.

Our mushroom is finally done!

The Result

Well, I hope you had a great time following this tutorial and learning more about the Mesh tool.

Download the Illustrator file

Exclusively written for WDD by Marcos Torres. He is a Brazilian freelance illustrator and art director, and a contributor to Abduzeedo as a tutorial designer. You can see more of his work on his website or by following him on Twitter.

Please share your results with us. Did you run into any trouble?

Never Ending WordPress Business Bundle – only $14!

Today, we’ll learn how to create a simple but effective anaglyph illustration.

Before we begin, I suggest you buy a pair of 3-D glasses or read this guide on how to create your own.

We’ve included the Photoshop and Illustrator files at the bottom of this post; download them to explore more.

If you follow this tutorial to create your own anaglyph, please share your results and experience with us in the comments.

Step 1

First, open Adobe Illustrator and create an A4 canvas (21 × 29.7 cm or 8.27 × 11.69 inches).

Step 2

Create two circles using the Ellipse tool (the shortcut is L). Draw an elliptical shape on the bottom and a perfect circle above it (holding Shift + L will make it proportional).

Step 3

Use the Pen tool (P) to create the fuse. To get square shapes using the Pen tool, hold Option/Alt and click on the point on the curve that you want to turn into a vertex.

Step 4

To create the flame, just repeat the same procedure. Practice drawing round and square shapes with the Pen tool; with time, it will get easier.

Step 5

Now let’s add some color to our little bomb. Select the circle and bottom of the fuse using the Selection tool (V), and go to the Gradient panel. Let’s create a radial gradient that fades from white to black, using a perfect white (C:0, M:0, Y:0, K:0) and perfect black (C:0, M:0, Y:0, K:100).

Using the Gradient tool (G), position the gradients as shown below. And add a 10-point black stroke to both, which should give you something like this:

Step 6

Let’s add some plain color to the fuse. Select it and choose a dark yellow (C:36, M:46, Y:100, K:10), with no strokes.

Step 7

Select the flame shape using the Selection tool (V). And in the Gradient panel, set a classic flame gradient, using some yellow (C:5, M:0, Y:90, K:0), orange (C:0, M:90, Y:85, K:0) and brown (C:15, M:100, Y:90, K:79).

Don’t forget: unless it’s a radial gradient, it will not look as soft as we want. Using the Gradient tool (G), place it as in the screenshot below:

Step 8

Remember the first ellipse we did in the beginning? Select it, and choose a total black fill.

Now got to Effect → Blur → Gaussian Blur, and set a radius of 40 pixels.

You should get this shadowing:

Step 9

Now let’s create some reflections. Using the Pen tool (P), draw this shape with a white fill:

Open the Gradient panel, and create a white gradient with a transparency. Just set the opacity of one of the colors to 0% to get this effect:

Open the Transparency panel, and set the opacity of the two shapes to 50%.

Our bomb is done. Now let’s create the anaglyph effect.

Step 10

Open Adobe Photoshop and create a 550 × 550-pixel canvas, with a 72 DPI.

Step 11

Copy the bomb from Illustrator (Command/Control + C), and paste it in Photoshop (Command/Control + V). Pasting it as a Smart Object is better because you will be able to scale it without it looking pixelated.

Step 12

Create a simple gray-to-black gradient background using the Gradient tool (G).

Step 13

By clicking on the bomb layer using the Selection tool (V), you can select only the shape of the bomb, which is quite useful when you need to work with only this space.

Step 14

Let’s create a new layer (Command/Control + Shift + N). With the bomb selected, go to the Color panel and choose a blood red (R:255, G:0, B:0). Using the Paintbucket tool (G: it’s in the same place as the Gradient tool — just hold your mouse over it), fill the entire selected area.

Step 15

Go to the Layers panel, and duplicate the original bomb layer by pressing Command/Control + J. Then, group this new layer with the red shape layer, and call the group “Red.”

Step 16

Select the red shape layer. In the Blending Modes panel, choose the one called “Screen.” You should get this result:

Step 17

Let’s repeat the same procedure of creating a new layer, filling it with color, duplicating the bomb layer, creating a group (“Blue”) and blending the color layer with the bomb layer. This time, though, use a light blue (R:0, G:240, B:255).

Step 18

Pay attention to these next steps, or else you might not achieve the 3-D effect. First, select the group “Red,” and open the Blending Modes panel. Select the one called “Multiply.” Repeat this procedure with the “Blue” group. Your image should have gotten a bit darker.

Step 19

Using the Selection tool (V) move the “Red” group gently to the left and the “Blue” group to the right; not too much, just a bit so that they are out of the center. This will create a depth effect, so put on your 3-D glasses to see if it works.

Step 20

Let’s try some depth effects. Group all of the layers (Command/Control + G), and name it bomb_1. Duplicate the group, and call the second one bomb_2.

Using the Free Transform tool (Command/Control + T), resize bomb_2 and flip it horizontally (right-click while using the Free Transform tool). Place this group behind the first one. You should get this, the final result:

The result

I hope you had a great time following this tutorial and that you learned a bit about how to create anaglyph images. There are a lot of other ways to achieve this effect; this is just a introduction. Keeping working hard, and please share your results with us.

Written by Marcos Torres. He is a Brazilian illustrator and art director who works for a marketing agency and for Abduzeedo as a tutorial designer. You can see more of his work by accessing his website or by following him on Twitter.

So, what were your results from following this tutorial?

Never Ending WordPress Business Bundle – only $14!

The biggest recent trend in CSS button design seems to be eliminating images, especially background images, from buttons. But there are plenty of other things designers are doing with buttons, some that do include images.

Below we’ve collected more than twenty tutorials, examples, and tools for creating CSS buttons, most of which use CSS3.

Included are buttons to suit virtually every design style. We’ve tried to focus on newer techniques here, leaving out the long-standing techniques (like the sliding door method for creating rounded corners) that most designers are already familiar with.

If you have other tutorials or examples you’d like to share, please do so in the comments!

Tutorials and articles

Rediscovering the button element

A really helpful article discussing the button element in CSS, which is often overlooked by designers. It’s a bit older, but still has tons of useful information on creating more stylish buttons with CSS.

Beautiful CSS buttons with icon set

Here’s another article that talks about how to create buttons with icons, though using span classes rather than the button element.

Build kick-ass practical CSS3 buttons

This video tutorial from Nettuts+ shows how to create practical CSS3 buttons that even include what appears to be a Twitter bird icon image, but is in fact created entirely with CSS3.

Beautiful Photoshop-like buttons with CSS3

While the buttons here aren’t particularly forward-thinking in terms of look, what is amazing is that they were created entirely using CSS3, without using an images, and were only based on buttons created in Photoshop.

Better button and navigation interactions

This is a great, simple tutorial from Darren Hoyt on creating better behaviors for your buttons that encourage visitors to interact with your site.

Super awesome buttons with CSS3 and RGBA

This tutorial from Zurb covers using CSS3 and alpha-blending using RGBA to create scalable buttons with only a single PNG image.

Building beautiful buttons with CSS gradients

A tutorial for building a button using CSS gradients similar to those used by Mozilla for Firefox Personas.

How to design a sexy button using CSS

This tutorial shows how to create a big, vibrant button without using images.

Realistic looking CSS3 buttons

These are simple buttons, created entirely with CSS3, including some pseudo-elements.

Pretty CSS3 buttons

This tutorial shows how to create a simple, slightly glossy-style button that’s scalable and can be created in any color without images.

CSS3 buttons without any images

A simple tutorial for creating dynamic buttons that use only CSS3 and no images. There are four states for each button, including disabled, hovered, and clicked states.

5 different tutorials of dynamic CSS round corners link buttons

This is a collection of five different tutorials for creating CSS buttons with rounded corners. Two include the use of images, but the other three don’t.

Create a CSS3 button that degrades nicely

Until all browsers properly support CSS3, we’re going to run into issues when using it to create things like buttons. This tutorial shows how to create great CSS3 buttons that also look fine in older browsers, like IE6 and 7.

Apple’s navigation bar using only CSS

This tutorial shows how to recreate the button-style navigation menu on Apple’s website. It works best in Safari 3+, but still looks fine in other browsers.

Create a CSS3 call to action button

This tutorial shows how to create a call to action button entirely with CSS that includes different default and hover states.

Sexy buttons with CSS3

This simple tutorial shows how to create nicely-styled buttons with unique hover and active states. The buttons can be scaled and their color can be changed easily.

Glossy buttons without images using only CSS3

Looking at these buttons, it’s hard to believe they’re made without images unless you look very closely. The code is complicated, but the end result looks great, complete with hover effect.

CSS3 buttons with icons

This tutorial shows how to create CSS3 buttons with gradients that also include icon images and are cross-browser compatible.

Roll your own Google buttons

This tutorial shows how to make scalable Google-style buttons with colored borders. The end results are minimalist and clean.

Examples and tools

10 awesome CSS3 buttons to use on your website

Here’s a collection of ten buttons you can use on your website. They’re all pretty basic but are created using just CSS3 with no images.

CSS3 gradient buttons

This is a huge collection of CSS3 buttons from Web Designer Wall. Included are a variety of shapes, sizes, and colors, all with gradients. One of the best parts about them, though, is how gracefully these buttons degrade in browsers that don’t have full CSS3 support.

Button maker

CSS-Tricks offers this free CSS3 button creator. Just define the background colors for each state of the button, the size, and the text attributes, and it will create the CSS code for you.

Radioactive buttons

These buttons use CSS animations in Safari to create a pulsing, glowing effect. In other browsers that support CSS3, they’re still perfectly functional and look just fine.

Written exclusively for WDD by Cameron Chapman.

Know other techniques for creating awesome CSS buttons that weren’t mentioned here? Or have a favorite example? Please share them in the comments!

Never Ending WordPress Business Bundle – only $14!

It’s got a 3-D feel, but it’s done using only gradients. So, stick with us; we’re going to use and see some really nice easy tips for creating this little monster. The tutorial is intended for beginners.

We’ve included the Illustrator file at the bottom of this post, so you can download it to learn more from it.

If you followed this tutorial to create your own little monster, please share your results and experience with us in the comments.

Step 1

First of all, open Illustrator and make a 40 × 40 cm canvas. Now, using the Rectangle tool (the shortcut is M), create a square that fits over the canvas.

Using the Gradient tool (G), create the following radial brown gradient. You can set it exactly by opening the Gradient panel and using the colors below. Copy the RGB values to get them exact.

Place the gradient at the top of the square using the Gradient tool (G), just like the picture below. Then, create another rectangle at the bottom of the canvas using the Rectangle tool (M). Copy the same gradient using the Eyedropper tool (I), then place it at the bottom again using the Gradient tool (G).

Step 2

Using the Ellipse tool (L), draw this oval. Rotate it using the Selection tool (V), and then adjust it a bit using the pencil tool (N).

Let’s add a nice gradient to it. Go to the Gradient panel, and set the colors to what is shown below.

Adjust the range of the gradient using the Gradient tool (G). Now create another circle using the Ellipse tool (L); it will be one of the eyes.

Open the Gradient panel, and create this radial orange gradient. Use the screenshots below to match the colors.

Duplicate it using the Selection tool (V), and drop the layer to the back.

Repeat the process of making the oval, and then just copy the gradient using the Eyedropper tool (I).

Using the Ellipse tool (L), create this ellipse that looks like a fly wing; you can adjust it using the Pencil tool (N). Open the Gradient panel and create this radial gray gradient, using the screenshots below to match the colors.

Select the wing, and then open the Transparency panel and choose the blending mode called “Multiply.”

Now, duplicate the wing using the Selection tool (V) + Alt, and distribute it along the body.

Step 3

Now let’s create a mohawk. Using the Pen tool (P), draw this spiky shape and place it behind the first eye.

Using the Gradient tool (G), create this purple-pink radial gradient, open the Gradient panel, and set the color as seen below.

Again using the Pen tool (P), create triangles along the hair. And using the Eyedropper tool (I), copy the same gradient, being careful with its range.

Step 4

Let’s work on the other parts of the body now. Using the Pen tool (P), draw the shape below, which will be the neck of the creature. Add some gradient using the Gradient tool (G), and then open the Gradient panel to set the color as seen below.

Repeat the same procedure of drawing the shape with the Pen tool, but this time use the Pencil tool (N), which will make drawing the fingers a little easier. Then just copy the same gradient for the neck, body and head using the Eyedropper tool (I).

Duplicate the arm using the Selection tool (V) + Alt, and then reflect and resize it on the other side.

Repeat the process for the legs. Don’t forget: our little monster has three legs!

Step 5

Draw the rounded shape below using the Pen tool (P). Then add an orange radial gradient using the Gradient tool (G). Set the colors according to the screenshots below.

Doing the rest of the chest is really about drawing a round shape using the Pen tool (P), duplicating it with the Selection tool (V) + Alt, and then adjusting them with the Direct Selection tool (A). This will take some time.

Step 6

Using the Ellipse tool (L), draw a circle on the first eyeball. Then, using the Eyedropper tool (I), copy the radial gradient from the hair, and place it as seen below.

Copy the circle using the Selection tool (V) + Alt, and select a radial gradient, going from white to transparent, to lay over top.

Using the Ellipse tool (L), draw a little circle, and add a black radial gradient to it.

Using the Ellipse tool (L), draw a little white circle, and place it as seen below. Now, repeat the same process, but smaller this time.

Copy this pupil, and resize it on the other side.

Step 7

Shading the monster isn’t so easy. If you are a beginner, you’ll need some skill with the Pen tool (P). Basically, you have to draw the shape, add a gray gradient and then set the blending mode to “Multiply.”

For the feet, we’re going to use a smoother shadow. First, draw circles using the Ellipse tool (L), and then go to Effect → Blur → Gaussian Blur, and set the radius to 25 pixels.

The result

Download Illustrator file

Marcos Torres is a Brazilian illustrator and art director who works for a marketing agency and for Abduzeedo as a tutorial designer. You can see more of his work on his website and get in touch with him on Twitter.

If you followed this tutorial to create your own little monster, please share your results and experience with us!

Never Ending WordPress Business Bundle – only $14!

Lomography is characterized by its inherent low-fi quality. Lomographic images often have strange light effects (caused by extra light leaking into the camera body and exposing the film in the original Lomo cameras), ultra-satured colors, blurring, vignetting, and other imperfections generally avoided in traditional photography.

The other main feature of real lomography is the spontaneous, spur-of-the-moment style of images produced.

These “imperfections” are what give lomography its unique look and style. As already mentioned, apps like Hipstamatic for the iPhone and Vignette for Android make it easy to achieve these effects without special equipment. For purists, the original cameras are less expensive than a traditional SLR, but getting film developed can be a challenge (if you don’t do it yourself) now that digital is the norm.

A Brief History of Lomography

The original lomography cameras were created by Russian state-owned LOMO (or Leningrad Optical & Mechanical Union) in St. Petersburg. They produced the first Russian camera in 1930. The LOMO LC-A Compact Automat camera was first produced in 1984, and became the centerpiece of the company’s activities.

Another company often considered to have a similar aesthetic is Holga, which is a common 120mm toy camera made in China. It produces the same kind of low-fidelity images that Lomo cameras are famous for, and sometimes the term lomo is used interchangeably to refer to either type of camera.

The term Lomography is a trademark of Lomographische AG, an Austrian company that caters to the global lomographic photography community. They are the exclusive distributors of the Lomo LC-A cameras outside of the Soviet Union. They also sell various accessories related to lomography, and publish a magazine about the subject.

Tutorials and Actions

If you don’t have a Lomo camera or one of the smartphone apps, there are easy Photoshop tutorials you can follow to create the same effects, as well as a handful of actions for even faster lomo processing.

Tutorial: How to Make Digital Photos Look Like Lomo Photography

This is a complex and in-depth tutorial from Digital Photography School, though it’s also easy to follow. The results are stunning.

Tutorial: Lomography

This simple tutorial shows how to create stunning lomography-style images in six easy steps.

Tutorial: Cross-Processed Lomo Effect – Photoshop Tutorial

This tutorial from Abduzeedo breaks down the lomography effect process in eight easy steps.

Tutorial: Lomography

Photoshop Box offers this great lomography effect tutorial with eight steps, resulting in a slightly washed-out final image.

Tutorial: Photoshop Lomo: A Beginner’s Guide

This tutorial from .net Magazine is very in-depth and gives a complete eighteen-step process for creating beautiful lomo effects.

Tutorial: Photoshop Tutorial: Getting that Great X-PRO Lomo Look

TutorialBlog offers this great lomo tutorial that includes plenty of keyboard shortcuts.

Action: 10 Photoshop Lomo Actions to Funky-Cool Your Photos

This set of ten Photoshop actions from ABDPBT Tech creates a variety of lomography-style effects quickly and easily. Actions are great for batch-processing a bunch of photos.

Action: Lomography Photoshop Action

This Photoshop action creates a number of adjustment layers that you can then tweak for each individual photo to get the best results.

Action: Free Stuff: Lomography Photoshop Action

This action, from The Blue Fishbowl, creates a simple lomo effect for CS2.

Action: Free Lomography Photoshop Action Pack

This action package is from PhotographyBB, and creates a number of adjustment layers including a vignette layer, sharpness layer, and curves layer, among others.

Examples

Fake Lomography

Image Credit: Joseph Ou

Lomography

Image Credit: Lukas Haider

Lomography

Image Credit: Cecilia Temperli

Lomography Diana F+ 35mmBack

Image Credit: Sasha, Harmony, Alex

Lomography

Image Credit: Lukas Haider

Lomography

Image Credit: Lukas Haider

Lomography

Image Credit: Ralf-Juergen

Lomography

Image Credit: Stuart

LOMOGRAPHY: Cadeau

Image Credit: Marc-Andre Martin

Lomography

Image Credit: Fabio Luiz C. de Mattos

Lomography – Amsterdam

Image Credit: Vinicius Fadul

Lomography Collaboration (Malaysia & United States)

Image Credit: en. shahdi

Lomography

Image Credit: Hannahgopa

FishEye 3

Image Credit: Alex Grechman

South Beach

Image Credit: Phillip Pessar

Spectra Vision!

Image Credit: Cameron Russell

Stalagtites from another Dimension

Image Credit: Cameron Russell

Palm Door

Image Credit: Cameron Russell

Lomo Dahlia

Image Credit: Tony Alter

Lomo

Image Credit: Niek Beck

Sky Corner

Image Credit: Cameron Russell

Rail

Image Credit: Fadhirul Fitri Jamsari

img160

Image Credit: Fadhirul Fitri Jamsari

Lomo Church of Christ in Three Oaks, Michigan

Image Credit: Kevin Dooley

Playing with Lomoapp

Image Credit: Thobias Vemmenby

P1290256

Image Credit: Elfie McGlip

P1270605

Image Credit: Elfie McGlip

Untitled

Image Credit: Audrey Stanton

photo.jpg

Image Credit: Pravin Premkumar

Bled

Image Credit: Juanma

Tchau Guara

Image Credit: Nadja Bium

MKE Lakefront

Image Credit: Jessica F.

We’re Trying to Reach the Sky

Image Credit: Thanakrit Gu

Bogenschussbahn und Wikingerlager

Image Credit: Christian Walther

Untitled

Image Credit: Marcos Mora

Nilgiris

Image Credit: Alosh Bennett

P1070161a

Image Credit: Andy Orin

image5

Image Credit: Elfie McGlip

Always on the Run

Image Credit: Carlos Varela

Cow Munching

Image Credit: allielovestea

Sun Lomo

Image Credit: Paul Carroll

Untitled

Image Credit: BIAU Guillaume

Science Infuse

Image Credit: BIAU Guillaume

Rainbow

Image Credit: BIAU Guillaume

Untitled

Image Credit: BIAU Guillaume

Death Valley Bottom

Image Credit: Paul Joseph

47590036

Image Credit: dimhap

47590011

Image Credit: dimhap

47590034

Image Credit: dimhap

photo.jpg

Image Credit: Pravin Premkumar

Written exclusively for WDD by Cameron Chapman.

Have your own take on the lomography movement? Or tips and tutorials you’d like to share? Let us know in the comments!

Never Ending WordPress Business Bundle – only $14!

Then, we’re going to use Adobe Photoshop to create a 1980′s style movie poster for our fictitious film titled “The Designer’s Mansion.”

This tutorial is aimed for designers with a fair understanding of Photoshop.

If you follow this tutorial, please feel free to post a link to your final product in the comments area below. We’d love to see it!

Let’s get started!

Here are 10 inspirational posters from 1980-89.

1980: The Blues Brothers

A really lovely and inspirational ’80s poster that uses a limited color scheme and simple shapes to create a poster with a twist.

1981: Chariots Of Fire

This poster is brought to life by the purposefully worn and noisy photograph, and it’s finished off with classic typography. Who said posters had to be complex?

1982: A Little Sex

Modern typography was clearly an inspiration in the ’80s! A really simple poster that works tremendously well.

1983: Scarface

This minimal hand-painted piece makes use of color but leaves plenty of white space. Other than the title, the typefaces are simple.

1984: The Terminator

This two-toned vector-style poster catches your attention. The half-tone patterns in the background draw the eye.

1985: Day of the Dead

This clever poster advertises three “Dead” films: Night of the Living Dead, Dawn of the Dead and Day of the Dead. A great poster overall, with superb colors.

1986: Under the Cherry Moon

The effect of this nearly grayscale poster is achieved with simple shapes, patterns and typography.

1987: Empire of the Sun

This poster overlays the vivd color of the sun on a black and white photograph, creating an arresting effect.

1988: The Last Temptation of Christ

A lovely illustrative poster with a modern feel. It could easily be mistaken for a new movie rather than one from 1988!

1989: The Abyss

Minimalism was just as big back in the ’80s! In this poster, two silhouettes are visible against a black background. The movie title is in blue, reinforcing the limited color scheme.

The Tutorial

Now that we’ve been inspired by the ’80s, let’s make our own design!

I will be using several resources in this tutorial, including stock vectors and textures. These files are either my own or were taken from the Internet.

Step 1

Grab a piece of paper and a pencil or pen. As with any design, sketching a concept first will be useful, to get a rough idea of the basic layout and shapes we want to use. Nothing is worse than opening a blank Photoshop document and having absolutely no idea where to start!

For the layout and shapes of my sketch I was inspired by the posters for The Blues Brothers, Under The Cherry Moon and The Last Temptation Of Christ. My typography was inspired by the one for A Little Sex.

Step 2

Open Photoshop and create a new document. Because I’m only designing for screen, I’ll use an A4 document, set to RGB at 72 DPI. If your work will be printed, you’ll need a much higher resolution-at least 300 DPI. You’ll also need to set up bleeds and margins. Set your background color to a light beige or creme, something like #EFEBE0.

Select the Rectangular Marquee tool, then hold “Shift” and make a small square selection.

Show the document rulers by going to View → Rulers. Drag out a guide from one of the rulers, and snap it to the edge of your newly selected marquee. Repeat this process on each side of the canvas.

This is where our border will be. Drag out several more guides and place them where needed. Use your eye to measure approximately where they should go according to your original sketch.

By referring to the above guides carefully, you should be able to spot our poster’s basic layout and structure.

Step 3

We’re now going to fill in the areas that we created with guides so that we can remove the distracting lines altogether. With the Rectangular Marquee tool, select an area of the design, as seen in the screenshot below.

Hold the “Shift” key and select another area, ensuring that it joins the area you have already created. This will merge your two selections into one.

Go to Layer → New Layer to create another layer. Fill in your selection with a dark blue; I used #00445D. Name your layers appropriately, otherwise they’ll be a nightmare to find later.

Fill in the other shape on your canvas using the same technique. This time I used a much lighter blue (#66D6FF). Go to View → Clear Guides to remove the guides, which we no longer need.

Step 4

Now we’re going to cut an area out of our lighter-blue shape and move it. Minor manipulations such as this will make the poster more visually interesting. Select the Elliptical Marquee tool, hold “Shift” to keep the circle in proportion, and drag out a selection. Reposition it over the top left of your shape.

Select the light-blue background, then cut and paste your shape. Use your cursor keys to nudge the shape a few pixels down and to the right of its normal position. You should end up with something like this:

Change the color of the new shape. When you pasted the shape, a new layer was automatically created. Position this new layer beneath the light-blue background layer.

Try this in one or two other areas as well.

Step 5

Now we’re going to add other shapes to jazz up our design. Select the Polygon Shape tool, and in the toolbar set it to have three sides. Drag out a selection and hit “Shift” to position it correctly.

Change the color of the triangle to white, set the blending mode to “Overlay,” and lower the opacity to around 20%. You should end up with something like this:

Repeat these steps, but this time make a circle. Experiment with different blending modes and opacity levels.

Step 6

Let’s add some thin lines to our geometric shapes. Select the Line tool, and choose white as your foreground color. Hold “Shift” to keep your line straight, dragging out a line as seen below:

Repeat this process, drawing a horizontal line rather than a vertical one.

Select your two lines in the Layers palette, then right-click and select “Rasterize Layers.” Merge the two lines by going to Layers → Merge Layers. Use the Rectangular Marquee tool to chop off any lines extending over the main shape. Change the layer’s blending mode to “Overlay,” and lower the opacity to 40%.

Repeat this process, but put a line on the light-blue background rather than the dark-blue background.

Step 7

Let’s add some texture and noise to our work. First, we’ll add noise to our design using a built-in Photoshop filter. Select your background layer, and go to Filter → Noise → Add Noise. Add one pixel of noise and click “OK.”

Repeat this step with all of the other shapes in your document apart from the one pixel lines.

Go to File → Place, and insert one of your light grunge textures. I used the sixth one. Resize and position your texture so that it fits over the two blue shapes.

While your texture layer is selected, go to Layer → Rasterize, and then Image → Adjustments → Desaturate. This turns your texture to black and white. Change your texture’s blending mode to Soft Light, and lower the opacity to 70%.

Select both of your main blue shapes and the manipulated corners by clicking on their thumbnails while holding Shift + Command. Right-click and choose “Select Inverse.” Select the texture layer, and then hit “Delete.” This removes any unwanted overlapping texture on the background or border.

To place one of your paper textures in the document’s canvas, go to File → Place. Resize your texture to cover the whole canvas. I used the “Folded Basic” texture. Place the textures layer above the main background of your image and beneath everything else. Change the blending mode to “Overlay.”

Step 8

It’s time to add typography to our poster. I’m going to use Helvetica Neue as my main typeface. We’ll start with the type at the bottom of our poster, including the names of the producers and actors. You can use fake names from this very handy list: 10,000 Random Names Database. I used Helvetica Neue Light for my typeface, set to 14 pixels. Smaller words like “and,” “Starring” and “Written by” are all set to 8 pixels.

Now add a film tagline or slogan. I’m going to use this great quote by Brian Reed: “Everything is designed, few things are designed well.” I used Helvetica Neue Regular for this line, filled with a dark blue at 18 pixels.

The last bit of typography to add is the movie title The Designer’s Mansion, positioned in our dark-blue box. I used Helvetica Neue Regular, set to 55 pixels.

Now we’re going to add drop-shadows to all of our text: a white shadow to the names at the bottom of the poster and the film slogan at the top, and a black drop-shadow to the title.

Select your slogan type layer, right-click and select “Blending Options.” Click the “Drop Shadow” tab, and use the settings in the screenshot below to create a one-pixel drop-shadow. Repeat this step using the same settings for the names.

Finally, apply a drop-shadow to the title of your film, this time with a black stroke. The text is larger, so feel free to increase some of the levels, such as the distance. See my settings below:

Step 9

Now for a bit of pen work. We’re going to create a minimalist keyboard and mouse, based on the old Macintosh keyboard and mouse, with wires running off to the right side of our poster.

First, we need to create our main keyboard shape. Select the Rounded Rectangle Shape tool, with a corner radius of 5 pixels. You can change this setting in the toolbar. Drag out your shape, and fill it with a dark blue. I used #002E39.

Using the Pencil Tool, draw a shape like the one below. Make sure to draw it on a new layer!

Duplicate the layer several times, and using the cursor keys spread them apart at an equal distance. Select all of the layers, and go to Layer → Merge Layers to put them into one layer.

Duplicate your newly merged layer several times, and using the cursor keys nudge them down the page, spreading them evenly.

Merge your new layers once again, and then select the Rectangular Marquee tool. Make a selection over the four keys selected below.

Hit “Delete,” and then use the Pencil tool to extend the top line of the last key on the left.

Merge the two layers that make up our keyboard illustration by selecting them and choosing Layer → Merge Layers. Go to Filter → Noise → Add Noise to add 3% of noise.

Grab the Rounded Rectangle Shape tool, and draw a shape like the one below:

Hold “Command” and click on the layers thumbnail in the layers panel to make a selection. On a new layer, choose Edit → Stroke. Apply a 3-pixel stroke using a color from the background of your design. Delete the original shape layer.

Using the Rectangular Marquee tool, select the overlapping stroked line.

Hit “Delete” to remove unnecessary areas of stroke. Add a 1-pixel drop-shadow to your keyboard and wire, like we did with the type earlier.

Step 10

Repeat the previous steps, but illustrate a mouse.

Step 11

Add your finishing touches, whether they’re more textures or some patterns. I used grunge brushes to erase several corners of the solid shapes.

Here is my result…

The Outcome:

Written exclusively for WDD by Callum Chapman, a designer and illustration trading as Circlebox Creative. He also runs The Inspiration Blog and Picmix Store

If you followed this tutorial, please feel free to link to your final product in the comments area below. We’d love to see it!

Never Ending WordPress Business Bundle – only $14!

When it comes to wooden texture in design, though, whether in a print product, a web or mobile user interface element, or general layout, it is always used to enhance visual appeal.

In this article, we will look at five common elements in UI design that use wood textures to do just this.

In addition to discussing these elements and admiring some rather sexy user interface designs that I collected from Dribbble, we will also be learning how to reproduce some of these effects by following mini-tutorials right here in this article.

These five common elements in the UI design are:

1. Fabric and stitching,
2. Paper and shadows,
3. Engraved typography and patterns,
4. Sleek and modern elements,
5. Three-dimensional effects.

1. Fabric and Stitching

Fabric and stitching are elements that tend to fit in perfectly with the wooden texture because both are natural, organic products. (Admittedly, cotton is weaved, cut and dyed, and a lot of the wood in this showcase has been cut, sanded down and treated—but you get what I mean!) Look at the few examples below that combine fabric and stitching elements with wooden textures.

Examples

This very light design uses a basic “stitch” (just a dashed stroke link) to make the circle emblem and banner appear as though it has been sewn to the low-opacity and tinted wood-textured background. That little touch works so well for such a simple design.

The stitching in this design is a lot more realistic, combining a full-opacity wood-textured background with engraved elements, drop-shadows and real fabric textures. This stitch has a drop-shadow (0 pixels in size and 1 pixel at a 90° distance), allowing the stitch to stand out and match the detail in the rest of the design.

The digitally produced wooden texture makes this design look modern, with its faint gradients and engraved elements that produce a slightly three-dimensional and more realistic appearance. A repeating pattern is used to produce a lovely leather effect for the badge in the top-left corner, which has been stitched using the exact same technique as the one mentioned above (with the 1-pixel drop-shadow).

Mini-Tutorials

Creating a Simple Dashed Line (Illustrator)

In this mini-tutorial, we will use Illustrator (Ai) to create a simple dash-stroked line to form a circle, as in the first example of this section. Open up Illustrator and select the Ellipse tool. While holding the Shift key to keep your shape in proportion, drag out a circle, as below.

From the Stroke panel (Window → Stroke) apply a 2-point weight stroke with a Miter Limit of 4. Check the “Dashed Line” option, and insert 12 points into your first dash field.

You’ll notice that the line on the right side of our shape is actually two 12-point dashes put together. To fix this, let’s give our stroke a bit more of a pattern. Change the dash to 3 points and the gap to 12 points, and then double the dash to 6 points and keep the final gap 12 points. You should end up with a stroked line similar to the one below (results will vary depending on the size of your circle).

Duplicate your shape by first selecting it, then choose Edit → Copy (Command + C) and finally Edit → Paste in Place (Command + F). With the new shape still selected, hold the Alt + Shift keys simultaneously and reduce the size of the shape. Holding these two keys at the same time will keep the shape in proportion and decrease or increase the size from the center point, eliminating the need to realign.

Select the larger of the two circles. Remove the stroke, and change the fill color to a brown (or any other color for that matter). Now, select the smaller of the two circles, and change the stroke color to a lighter brown.

With the smaller of the two circles still selected, duplicate it by copying and pasting in place. Once duplicated, position it beneath your original shape (Command + [), and nudge the shape down one by hitting the down arrow on your keyboard once; then change the stroke color to white.

Reduce the opacity of your white stroke circle to 50% and the opacity of your brown stroke circle to 75%.

Creating a Realistic Stitch (Photoshop)

In this mini-tutorial, we’ll use a real fabric texture and some of Photoshop’s built-in effects to produce a realistic stitch. Open a new Photoshop document, and insert a fabric texture of your choice. Crop the image so that it sits on a white background.

Select the Rectangular Marquee tool, and drag out a selection on the inside of your fabric texture’s shape. Create a new layer and rename it “Stitch.” Go to Edit → Stroke and apply a 1-pixel black stroke to your shape.

Select the Rectangular Marquee tool again and position it over your stroke. It doesn’t matter where you start. With a position chosen, hit the Delete key. Make sure that you remove content from the stroke’s layer and not the fabric’s layer.

Repeat the process for the rest of the stroked line, as seen below.

There’s a high chance that the stitches won’t be symmetrical; but that’s a good thing, because stitches rarely are!

You should end up with something that looks like this:

Right-click on your stroked layer and select “Blending Options” to open up the Layer Styles window. Select the Color Overlay tab, and select a light gray (I used #F1F1F1).

Now select the Drop Shadow tab. Apply a black drop shadow with an angle of 90°, a distance of 1 pixel and a size of 0 pixels. Lower the opacity of the shadow to somewhere between 20 and 60%.

Select the fabric layer, and open up the Layer Styles window. Apply a default Drop Shadow with a distance of 0 pixels, and a Gradient Overlay going from white to black to white. Change the Blending mode of your Gradient Overlay to “Multiply” with an opacity of 15%. Once applied and viewed at 100%, you should end up with something similar to this:

Play around with the colors of your fabric by using the hue and color-balance settings. Here is my result:

2. Paper and Shadows

Paper and shadows are becoming increasingly popular as design styles, but are especially popular in texture-heavy designs, such as ones with wood. The collection of work that follows shows paper and shadows being used in different ways to present small chunks of information or, in some cases, the website’s main content.

Examples

This screenshot, in case you hadn’t noticed, comes from a small section of the design we saw at the end of the “Fabric and Stitching” section above. Continuing the theme of digitally produced texture, a simple white shape with a warped custom shadow is used to make the paper look like it is curling.

A really nice combination of wooden and crumpled paper textures. The paper in this UI is used to present a snippet of information needed for a recipe, with some lovely silhouette-style icons that allow the user to view, bookmark and share the full recipe.

This design is texture-heavy, combining wood, paper and tape textures to produce an appealing user interface. The photographed wood and tape, combined with the digitally produced paper textures and shadows, work well together.

This is one of my favorite UI samples in the post. Purely digital (including the wooden texture), the design uses drop and inner shadows to create a beautiful search field. The design also makes use of the stitches and fabric element. Overall, a very user-friendly interface that looks great!

This design seems to be inspired by traditional airmail envelopes with the repeating pattern around the paper. The paper has been (digitally) stapled to the wooden background, making the user interface appear like a pin and notice board rather than a flat web page.

The beige-cream image and navigation background has a fine drop shadow that makes it appear like paper, especially with the stamped badge and the faded sepia-style photographs that look like they have been printed. This fits in wonderfully with the wood-textured background and overall feel of the interface.

Mini-Tutorials

Creating a Simple Digital Paper Effect (Photoshop)

In this mini-tutorial, we will use a wood texture and basic Photoshop tools to create a digital paper effect. Start off with creating a new document with a texture or repeating pattern.

Select the Rectangular Shape tool, and insert a shape similar to the one below, placing it right at the very top of the canvas.

Duplicate the shape, and go to Edit → Free Transform (or press Command + T). Reduce the size of the shape while holding the Alt + Shift keys to keep the shape in proportion, and then decrease the size towards the center.

Drag the top anchor point above the top of the canvas so that it overlaps the top of the original shape.

Change the color of your new shape to a very light beige (almost white). I used #FFFBF8.

Duplicate your original shape, and change the color to pure black (#000000).

Increase the size of the shape so that it is a couple of pixels larger than the original shape. Create a guide—you can drag a guide out of the ruler (View → Show Rulers, if it’s not displayed)—about 10 to 20 pixels beneath your black shape. Go to Edit → Transform → Warp.

Drag the bottom-left anchor point down towards your guide, and then repeat the step with the bottom-right anchor.

Press Enter to confirm your shape transformation. Right-click on the Shapes Layer tool, and select the “Rasterize Layer” option.

Reposition the black shape layer beneath the other two shapes but above the wood layer. Go to Filter → Blur → Gaussian Blur, and blur the black shape by 10 pixels. Then click “OK.”

Lower the opacity of the black shape to 50%. Open up the Layer Styles window for your original white shape, and click on the Stroke tab. Apply a 1-pixel stroke to the shape using the gradient fill type, going from black to white with a 90° angle.

With that done, we have our digital paper-on-wood effect! This is a great technique to use for websites.

3. Engraved Typography and Patterns

Engraved typography and patterns is a fairly common technique in advanced web design, and it is becoming ever more popular in everyday design. Below are several examples that use this style well in wood-textured interfaces.

Examples

This Instagram application user interface has a grungy wood-textured background and washed-out semi-transparent images to produce a worn vintage look. The typography has several different styles, allowing the lettering to stand out and giving the wooden background an engraved feel.

Overall, this is a really clean wooden user interface, with a large and equally great collection of various styles and techniques. One used repeatedly (and very well) is the engraved effect on the typography and patterns—exemplified in the floral patterns at the top of the screenshot.

Metal signage is hung on the wood-textured header here to serve as the main navigation. To give the signs a more realistic engraved effect, the designer gave the typography inner and drop shadows.

Wood textures are primarily used in this design for the navigation bar (the log, in this case). The engraved typography makes the title appear as though some of the stone has been etched away to show the wooden texture.

Another example of engraved typography on signs, in this case wood-textured signs instead of metal.

This wooden UI employs sleek and modern elements, making it hard to choose whether to put it in this or the next category. The “Buy” button and the shopping bag icon have a very detailed engraved effect, making them wonderfully clickable!

Mini-Tutorials

How to Engrave a Pattern Into Wood (Photoshop)

In this mini-tutorial, we’ll be creating an etched or engraved wood effect in Photoshop. Open up a new document and insert a wood texture.

Insert one of your own patterns, or use stock vector image.

Once you’ve positioned the vector correctly, right-click on the layer and select “Rasterize Layer.” Right-click on it once more and select the Gradient Overlay tab. Apply a gradient using two colors selected from the wooden background, as seen below.

Select the Drop Shadow tab, and apply a white shadow with a normal Blending mode. Change the angle of the shadow to 90°, and the distance and size to 1 pixel. You can keep the other settings at their default.

Select the Inner Shadow tab to apply a shadow to the inside of your pattern. This will allow us to create the engraved effect. Drop the opacity of the shadow to 20%, and change the angle to 90°. Change the distance and size of the shadow to 3 pixels each, and keep all the other settings at default.

Click “OK,” and then lower the opacity of your pattern layer to 80% to allow some of the background texture to shine through in all of its glory. You should end up with this result:

4. Sleek and Modern Elements

Despite wooden textures often being linked to vintage and retro design, if pulled off correctly, they can also be used to complement modern and sleek elements, as you can see from the examples below.

Examples

Here’s another screenshot of an interface that we saw in the previous category, showing off another completely different styled element. The slider and scroll bars in this design have sleek white-silver and green gradients for a user-friendly interface.

As well as the fabric and stitches and engraved typography techniques, this design has some modern elements, such as 2-pixel gray-white strokes and the minimalist icons, which make for an attractive and usable iPad-like interface.

Another of my favorite interfaces. It combines fabric and wood-textured images with sleek gradients, 2-pixel strokes, simple icons and gorgeous typography to many create points of interest for the user.

A highly detailed interface that merges wooden textures, three-dimensional effects, glows and gloss highlights to produce a result that’ll stun its users. One-pixel lines are used to reinforce the 3-D effect.

Glows, shadows and strokes are used to bring this vivid wooden interface to life. The modern icons, though, are the key.

This lovely little interface makes use of the world’s natural products and sleek futuristic elements to produce a UI that is attractive and easy to understand. Noise is added to the modern elements, allowing it to fit in with the wood-textured header.

This keypad gives us a wooden texture based on an existing modern element: the default iPhone UIKit. The keypad works in the exact same way as the default keypad and so won’t confuse users.

Mini-Tutorials

In this mini-tutorial, we’ll create a wooden UI slider using a selection of Photoshop’s layer effects. Create a new document, and insert a wooden texture or pattern.

Select the Rounded Rectangle tool, and drag out a long narrow shape, similar to the one below. My tool’s corner radius is set to 15 pixels.

Right-click on the Shapes layer and select “Blending Options.” Select the Gradient Overlay tab, and add a gradient color selected from the background, and then a slightly darker color. Then click “OK.”

Now, select the Inner Shadow tab, and apply a black shadow with an opacity of 30% and an angle of 120°. Drop the distance to 1 pixel, and drop everything else to 0. This will create a shadow inside our shape, making it look like it was carved from the wooden background.

Select the Drop Shadow tab, and apply a white shadow with a normal Blending mode. Change the angle to 90°, and the distance and size to 1 pixel. Leave everything else at 0 pixels. This will give our shape a highlight along the bottom, making it look more three-dimensional and realistic.

Zoom into your carved line and select the Ellipse tool. While holding the Shift key to keep the shape round, drag out a circle and position it over the slider bar.

Open up the “Layer Styles” window for your new circle shape. Click on the Gradient Overlay tab, and apply a gradient going from a light-medium to light gray. Give it a 90° angle.

Select the Drop Shadow tab and apply a shadow to your shape. Change the distance to 0 pixels and the size to 10 pixels.

Zoom out to view your slider at 100%. Here is the result:

5. Three-Dimensional Effects

There are no restrictions on three-dimensional design, and it is incredibly effective with wooden textures. This combination is commonly used to produce “shelves,” as seen in the iPhone and iPad interfaces—particularly Apple’s iBook application.

Examples

These shelves are highly realistic, and the shadows (such as the one on the inner shelf in the top-right corner) come from a large selection of custom jobs (not built-in Photoshop filters).

The effects in this design are fairly similar to those in the previous one. This time, the effects bring a cleaner and more modern look, whereas the previous one was meant to look more realistic and “used.”

These iPhone shelves present similar techniques. This time, the result is both modern and realistic, perfectly balancing textured photographs with digital effects.

This 3-D button is incredible! With its combination of wooden textures, the design’s delicate details come into high focus. If a button like this was in front of you, there’s no way you’d be able to resist giving it a push!

A simple yet effective 3-D effect has been applied to this navigation bar, making the buttons appear as if they are filing drawers. S a cleverly designed element to get the user involved in the interface.

Written exclusively for WDD by Callum Chapman, a designer and illustration trading as Circlebox Creative. He also runs The Inspiration Blog and Picmix Store

Share your wooden UI designs and illustrations with us, as well as any articles or tutorials that might help your fellow readers.

Never Ending WordPress Business Bundle – only $14!