Syber Tutorials

jQuery Animations: A 7-Step Program

A dash of animation can spruce up a dull interface. In this tutorial, you’ll learn how to do it the right way with jQuery.

image
image

A Word From the Author

Animation: a concept which often evokes divisive reactions from people. Some swear by its usefulness, whilst others rage at its overuse. Nevertheless, animations, when used right, often spruce up a user interface, and make it feel much more snappy and clean. In this tutorial, we are going to start with a little jQuery basics, then learn how to create our first animation, and then on to building the effect and finally crafting something that will be of actual real world use.

Interested? Let’s start right away! Please do note that as this is geared towards the beginner, I might harp a little too much on some parts. Bear with me. In case you are curious, check out the first part of the demo for the simple effect we’ll be building today.

Step 1. jQuery Basics

jQuery is a JavaScript library which intends to make it easier for you, a developer, to construct better, feature rich, interactive web sites and user interfaces with as few lines of code as possible.

A typical line of code looks like so:

$(DOM Element).something();

Let’s take a look at each part:

  • $ – Shorthand for the jquery object. Use jquery in case you are using another framework in the same page, as in: jquery(DOM Element).something();
  • (DOM Element) – The element you want to do something with. This is one of jQuery’s ace in the hole. You can use CSS selectors to obtain an element. Any declaration which works in a CSS document can be utilized here. IDs, classes, pseudo classes, anything.
  • something() – The thing you want to do to the obtained element. This can be anything from hiding an element to making an AJAX call to an event handler.

Here, we are going to just stick with animation and effects related functionality.

Step 2. Using the Baked-in Effects

jQuery provides a ton of built in methods you can use right out of the box. These include methods for showing/hiding elements with a number of variations including sliding the element and fading the element in and out. You also get to use a number of toggle methods which toggle the visibility of the element in question.

Before we take a look at each of these methods, here is the general format for calling each method:

$("#element").effect([speed, callback]);

Following the general jQuery paradigm, we initially target the required element using CSS selectors. Next, we just call any of the built in methods.

While, most of the methods can be called passing no parameters, often you’d want to customize it’s functionality. Each methods takes at least the speed and callback parameters.

speed denotes the duration, in seconds, of the animation. You can pass in strings including slow, normal or fast or you can be more precise and set the time in milliseconds.

callback is a function which gets executed once the animations completes. You can use it to do anything, make an AJAX call silently in the background, update another part of the user interface and so on. Your imagination is the limit.

Here is a list of the functions bundled with jQuery:

  • show/hide – Methods to show or hide an element. Takes speed and a callback as parameters.
  • toggle – Method which manipulates the display of the element depending on the current state of the element i.e. if it is hidden, it is displayed and vice versa. Uses the show or hide methods.
  • slideDown/slideUp – Self explanatory. Varies the height of the element to create a sliding animation to reveal or hide an element.
  • slideToggle – Same as the toggle method except that it use the slideDown/slideUp methods to reveal or hide elements.
  • fadeIn/fadeOut – Varies the opacity of the element in question to create a fade effect.
  • fadeTo – Alters the opacity of the element to match the passed in value. Obviously, it takes an additional opacity parameter where 0 is completely transparent and 1 is completely opaque.

As an additional feature, the toggle method mentioned above has an alternative implementation where it takes an expression as a parameter to decide whether to display or hide an element.

For example, if you want to toggle only list elements which have a effect class, your code would look like:

      $("li").toggle( $(this).hasClass("effect") );

To put it simply, the toggle functions checks the expression passed to it and if it is true, it is toggled. Else, it is left alone. The expression we’ve passed here checks whether the element has a specific class.

Step 3. Building a Custom Animation

Often, the built in methods don’t quite fit your needs in which case you’d definitely want to build your own custom effects. jQuery lets you do that too. Quite easily, actually.

To make a custom animation effect, you make use of the animate method. Let me show you.

$("#somelement").animate({property: value}, [speed, callback] );

The animate method is just like any other method in that it is invoked the same way. We acquire an element and then pass some parameters to it. The parameters is where this method differs from the pre built effects.

The speed and callback parameters serve the same function as in the previous methods. The object property which holds a number of key/value pairs is what it makes this method unique. You pass in each property you want animated along with the final value. For example, suppose you want to animate an element to 90% of its current width, you’d have to do something like:

$("#somelement").animate({width: "90%"}, 350, function(){alert ("The animation has finished running.");});

The above snippet will animate the element to 90% of its width and then alert the user denoting that it has finished.

Note that you aren’t limited to dimensions. You can animate a wide array of properties including opacity, margins, padding’s, borders, font sizes. The method is also pretty flexible when it comes to units. Pixels, ems, percentages all work. So something as convoluted as the below will work. It just won’t look cohesive.

$("#somelement").animate({width: "90%"fontSize: "14em",height: "183px",opacity: 0.8,marginTop: "2cm",marginLeft: "0.3in",borderBottom: "30mm",}, 350, function(){alert ("The animation has finished running.");});

When defining a property which consists of more than one word, make a note to define it in camel case. This is in sharp contrast to the usual CSS syntax so make a special note here. It’s borderTop, not border-top.

Note: jQuery allows only properties taking numerical values to be animated. This means utilizing only the core, all color related properties are out. Fret not though. With some help from jQuery UI, we’ll be animating colors in no time.

Step 4. Tweaking the Effect

If you take a look at the simple effect in the demo, you might have noticed it is a little broken. Hovering on and off the element repeatedly leads to a long queue which inturn leads to the animation repeating itself.

The simplest way to avoid this issue is by using the stop method immediately before beginning the animation. This effectively clears the queue and the animation can proceed as usual. For example, this would be your normal code.

$("#someelement")  .hover(function() {    $(this).animate({ top: 20 }, 'fast');  }, function() {    $(this).animate({ top: 0 }, 'fast');  });

Using stop to avoid animation buildups, your new code would look like:

$("#someelement")  .hover(function() {    $(this).stop().animate({ top: 20 }, 'fast');  }, function() {    $(this).stop().animate({ top: 0 }, 'fast');  });

Pretty easy, no? But this method does have a small issue. Fast interactions won’t lead to buildups but instead to incomplete animations. If you want to completely get rid of this issue, you’ll have to turn to a plugin like hoverFlow.

Step 5. Adding a Bit More Realism – Easing

If you’d like to add a little more realism, you’d need more control over the rate at which the animation progresses. This is where easing comes in. Easing essentially controls the acceleration and deceleration of the animation over time.

The default easing method is swing which is built into jQuery. Robert Penner’s easing plugin lets you use a number of easing effects. Check out the easing section in the demo to take a look at each easing effect.

There is only caveat when it comes to using a custom easing effect: you can only use it with custom animation effects i.e. with the animate method. Once you have the easing plugin included, making use of a custom easing method is as simple as passing it along as a parameter like so:

$("#somelement").animate({width: "90%"height: "183px",}, 550, "easeInElastic");

Do check out the easing section of the demo to see each method in action. While some of the easing effects may not be suitable for all situations, your animations will certainly look a lot more appealing with the appropriate use of certain easing methods.

Step 6. Kicking it up a Notch – jQuery UI

Upgrading to jQuery UI nets us a number of much needed features. You, in fact, don’t need the entire library to make use of the additional features. You just need the core effects file to obtain the functionality. Not the UI core, just the effects core file which weighs in at a relatively miniscule 10 kilobytes.

The important features which the jQuery UI effects library brings to the table are support for animating colors, easing and class transitions.

If you remember, I mentioned previously that with the core jQuery library, you are limited to only animating properties which take numbers. You are rid of this limitation with jQ UI. You can now easily animate an element’s background color, its border color and so on. Also, instead of creating a separate function for these extended features, this merely extends the base animate function. This means that if you have the core library included in your file, you can use the ordinary animate method to do all the dirty work for you.

For example, if you’d want to animate an element’s border color on hover, your code would look like so:

$(".block").hover(function() {    $(this).animate({ borderColor: "black" }, 1000);},function() {    $(this).animate({ borderColor: "red" }, 500);});

Class transitions are responsible for animating between classes. With the base library, if you removed and then added a class which changed the appearance of an element, it’d happen instantenously. When you have the UI library on board, you get the option of passing in additional parameters to take care of the speed of the animation, the easing method and a callback. As with the previous feature, this functionality is built on top of the existing jQuery API which eases the transition process.

The final feature which jQuery brings to the table is integrated easing equations. Previously you had to make use of an additional plugin to take care of this but now it comes bundled so you need not worry about it anymore.

Step 7. Building our First Real World Effect

All the above examples were meant to be just demos of the functionality in question. Wouldn’t it be nice to actually build something of real world use? That is exactly what we are going to do today. It’s not really something radically new or groundbreaking but this demo will let you put what we’ve learnt today to use in a real world scenario.

Imagine this: You want to display an image and when a user mouse overs it, you display 2 sections inside the image. One shows a heading and the other shows a tiny description of the image. I’m sure you’ll find literally a gazillion plugins which do the same but today we are going to build it from scratch. I promise you it’s not as hard as it sounds. In fact, it’s actually pretty easy and can be very quickly built. Let’s get started.

The HTML

First, we need a solid base of markup to build on.

<!DOCTYPE html><html lang="en-GB"><head><title>Beginning Animations with jQuery - by Siddharth for NetTuts</title><link type="text/css" href="css/style.css" rel="stylesheet" /><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jqueryui.js"></script><script type="text/javascript" src="js/mojo.js"></script></head><body><div id="container"><h1>Beginning Animations with jQuery</h1><div>by Siddharth for the lovely folks at Net Tuts</div><p>A simple real world usage of the animation effects followed by demos for the article's text demonstrating a fix for animation build up and the different easing methods available.</p> <div class="bblock"><h2>A Simple Real World Effect</h2><p>When the method is changed, it goes to zero height using the standard jQuery easing and then expands using the specified easing method.</p><div class="item"><div class="title">ThemeForest</div><img src="images/tf.jpg" alt="Image" /><div class="desc">The only place you need for site templates and themes </div></div><div class="item last"><div class="title">CodeCanyon</div><img src="images/cc.jpg" alt="Image" /><div class="desc">The premier destination for scripts and code snippets</div></div></div><!-- Rest of the code for the demo --></div></body></html>

For this effect, we’ll first need to decide on a structure for each item. Each item is wrapped by a div with a class of item. Inside the div there are 3 elements: the image itself and 2 div elements holding the title and description.

The other parts are rather mundane and self explanatory. We begin by including the jQuery library, the jQuery UI library and our file which holds our custom JS code. Do note that I only needed the effects core part of jQuery UI so I downloaded only that. If you’d like more effects built in, you’ll need a custom build. You can download a customized build here.

Here is how our page looks with this phase complete.

The CSS

.item {        position: relative;        margin: 20px 60px 40px 0;        overflow: hidden;}.item .title, .item .desc {        background: #000;        color: #fff;        position: absolute;        display: block;        width: 638px;        opacity: 0.4;}.item .title {        top: 0;        font-size: 16px;        padding: 12px 10px 25px 0;        text-align: right;}.item .desc {        bottom: 0;        font-size: 12px;        padding: 5px 0 15px 10px;}

A few things you need to make a note of here. Each item element has its position property set to relative so that elements inside it can be positioned easily. Also, its overflow property is set to hidden so we can hide the title and description outside when they aren’t needed.

The title and description have their position property set to absolute so that they can be positioned precisely within the item element. The title has a top value of 0 so its at the top and the description has its bottom value set to 0 so its right at the bottom.

Other than that, the CSS is pretty boilerplate and concerns itself mainly with typography, a little positioning and styling. Nothing too radical.

Here is how our page looks with this phase complete.

The jQuery-Enabled JavaScript Magic

$(document).ready(function(){        // Code for other parts of the demo        $(".item").children("div.title").animate({top: -60}, 300);        $(".item").children("div.desc").animate({bottom: -40}, 300);$(".item").hover(                function()                {                        $(this).children("div.title").stop().animate({top: 0}, 700, "easeOutBounce");                        $(this).children("div.desc").stop().animate({bottom: 0}, 700, "easeOutBounce");                },                function(){                        $(this).children("div.title").stop().animate({top: -60}, 500);                        $(this).children("div.desc").stop().animate({bottom: -40}, 400);                }                );$(".title, .desc").hover(                function()                {                        $(this).stop().animate({backgroundColor: "#444"}, 700, "easeOutSine");                },                function(){                        $(this).stop().animate({backgroundColor: "#000"}, 700);                }                );});

It may look a little imposing but it’s not. Let me explain each part.

The logic of this effect is pretty simple. Since the elements are placed absolutely, we initially place the elements out of the viewport. When the image is hovered over, we just need to move it back to its original position i.e. at the top and bottom of the image.

First, we move the title and description out of view. We do this with JavaScript instead of with CSS for a very specific reason. Even if JS is disabled, it degrades pretty gracefully. The title and description are still overlaid over the image and it looks just like the hover state. If we were to instead use CSS for hiding the title and description and if JS is disabled, they’d be completely hidden and thus useless. I chose to use JS for the dirty work in the interest of progressive enhancement.

We initially bind the our custom code to the hover function of each item element. This lets use make this handler pretty generic and reusable. Adding this functionality to others is as simple as giving it a item class. The first function is for the hover event and the second is for the unhover event.

Within the scope of the function, this refers to the element which triggered the event. We use the animate method to modify the appropriate values. We also use a bit of easing to make it a little more catchy. On mouseout or unhover, we just change the values back to their defaults.

As a little extra, when the containers for the title and description are hovered over, they slowly morph colors, thanks to jQuery UI.

And we are actually done. Didn’t take that much time, did it? Not bad for a tiny script which is even more tiny considering how many lines were allocated solely for the curly braces.

Conclusion

image
image

And there you have it. How to create animations with jQuery along with a real world example of putting what you’ve learned to good use. Hopefully, you’ve found this tutorial interesting, and useful. Feel free to reuse this code elsewhere in your projects and chime in here if you are running into difficulties.

Questions? Nice things to say? Criticisms? Hit the comments section and leave me a comment. Happy coding!

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Write a PLUS tutorial

 

35 Stunning Digital Photo Manipulation Artworks

 

Pictodeck Icon Set: Over 700 Free Pictograms for Keynote

 

Drupal Coda Clips

January 6th, 2010 | No Comments | Posted in Uncategorized

One of the coolest features of Coda is the ability to save code snippets and keep them organized. Coda is our primary editor for almost every work (other than JAVA).

There have been many Coda Clips out there (like this WordPress one) but not a lot for Drupal. Been working on Drupal for a long time we decided to put up a quick set of snippets for you Drupallers.

Installation: Simply extract the .zip file and double-click the .clips file to load the list in Coda. Enjoy!

Create a Vivid Themed Illustration Using Simple Hand-Drawn Elements – Part II

Drawn elements are certainly something that can enhance an illustration. Even if you’re not very good at drawing, you can still create a quality piece. All you need is a good idea and some Photoshop skills. And if you don’t believe me, you will definitely change your mind after reading this Part II of his two part tutorial series. So let’s take a look inside!

Final Image Preview

Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.

Part II Tutorial Details

  • Program: Photoshop CS3
  • Difficulty: Advanced
  • Estimated Completion Time: 4-5 hours

Introduction and Preparation

It’s a themed illustration about “No Beauty,” this hides an idea that no beauty lasts forever. Suddenly all that’s great and beautiful falls apart. All the happiness is gone with the colorful pieces. The final outcome has its own mood, even thou it’s colorful, it’s still kinda frightening.

And as I said this is kinda simple but you may be wondering why this tutorial is labeled as advanced level. Well everything is fine as long as you have some base to work on. Here we have absolutely nothing, we will create this piece from scratch. So what’s hard, is all the illustration depth, shading and colorization. Beside that, there are some things you just need to feel.

Ok, now let’s take a look what we’re going to use here:

  • Splatter, from 123rf.com
  • Broken Blush, from sxc.hu
  • Scratchy texture, from sxc.hu
  • Splashes 1,2,3, from istockphoto.com
  • Handmade Brushes 1,2, from brushesdownload.com
  • Ink Brushes (optionaly), brushesdownload.com
  • Paint Strokes 1,2, brushesdownload.com
  • Self-Drawn Elements on Paper

Step 1

Just to remind you of what we created in the Tutorial Part I, the first image below shows our final outcome. Remember that you need to work now below all adjustment layers (which affect the whole illustration) and also below the overall room shading that we added.

OK, so pay attention to the second image below. I drew something like that in the first tutorial part, this is the sketch of how I pictured the splashes. And I decided not to cover the whole face with splashes.

 

Step 2

I found three nice splashes (1,2,3) from istockphoto, which you can view in the first image below.

There are few ways to do the extraction, and because the background is white it’s quite an easy task. You can do this using Color Range, however we don’t need the full splashes here, and a more accurate job need the Pen Tool. Look at the third splash below and the green rectangle. It’s a good part to fit our face.

Let’s zoom into this part and use the Pen Tool to cut it out. Using this technique is reasonably fast (and the color range technique sometimes leaves a little bit of the background color, which we don’t want). So check the last image below (the black one) and you can see it’s very precise. I compared the background with a black color and yes, it’s full red, no white edges.

 

Step 3

Now as I said we just need a little bit of this splash, so make it fit into the face and use a soft eraser or a layer mask to get rid of the square edge of the splash (first image below). Then apply Image > Adjustments > Selective Color and brighten all the tones in this dark red splash. To do this we need to use Reds, Yellows, Neutrals, and Blacks (second image below). Now this looks over saturated, so let’s take the saturation down (third image below). Then it’s good to give a little more brightness (forth image).

 

Step 4

I’ll show you now what to do in points:

  1. This is the result we reached so far.
  2. Create a new layer above the splash, with Blending Mode set to Color. Grab a soft brush and paint with a brownish color to make the shade more suitable to skin shadows.
  3. Compare image 1 to 3, and see how the shade changed its color. It’s starting to look like it’s really a skin splash!
  4. Merge all the layers connected with the splash into one. And use the Burn Tool (range: Midtones) to make the splash darker, like the bottom face color.

 

Step 5

Now duplicate the face layer and place it above the splash. Flip it horizontally to make the dark skin cover our splash (first image below). Go to Layer > Layer Mask > Hide All (second image below). Then use a soft, black brush and paint on the layer mask while having the “splash” selection activated (third image below).

This may look a little confusing. Let’s review what this does? Well, basically we’re revealing the skin from the copied face. And we’re doing this on the splash to make it look more skin textured. It’s a tiny difference, but believe me, if you zoom in, you will see the difference. The splash will look like real skin.

 

Step 6

OK, let’s bring up another splash. Again use the Pen Tool to make a precise cut out. Now turn it in the right direction (first image below). Then use a hard eraser (or layer mask with a hard, black brush) to make a perfect match to the skin (second image below). Then soft-erase the squared top part of the splash.

 

Step 7

As when we were applying the previous splash, use Image > Adjustments > Selective Color and adjust the same colors. Play around with the values starting from Reds, Yellow, Neutrals, and Blacks. Try to make the splash color brighter (first image below). Then turn down the saturation (third image below) and finally give a touch of brightness (forth image below).

 

Step 8

  1. Use the Burn Tool to match the colors of the bottom face skin and our splash.
  2. As previously, duplicate the “face” layer and place it to cover the splash with skin.
  3. Go to Layer > Layer Mask > Hide All (this fully masks the duplicated “face” layer).
  4. Add the skinny touch painting on the layer mask with a soft, white brush.
  5. Make some final touch-ups. I used the Patch Tool to get rid of unwanted light and burned some parts more with the Burn Tool.

 

Step 9

OK, when it comes to adding lighter splashes, the job is much easier.

  1. Make a good match with the skin shape.
  2. Use Selective Color the same way as previously to get the over saturated look (and it’s great with selective color, as it also makes the shade softer).
  3. Next use Hue/Saturation and turn the Saturation halfway down (don’t overdo) to match the splash color with skin color.
  4. If it still isn’t enough, go (as previously) to Brightness/Contrast and enhance the Brightness, while lowering the Contrast just a touch, and we should be fine.

Note: The lights may sometimes come a bit sharp and bright, so you can always get rid of them using the Patch Tool or just by erasing some parts of the splash.

 

Step 10

As you see now, the shadow below the face will be a little bit different because we changed the shape. Find the same color as you used previously, while painting the shadow. Grab a very soft brush and add more shadow where objects are getting closer to the ground (as you see in the fist and second images below).

 

Step 11

Now to add more skin-splash touches, we need to use another image of paint. It’s a good to have it in the same color, then the adjustment values will not change much. So bring up this Splatter image to Photoshop and start extracting using the Pen Tool.

As you see in the first image below, you do not have to cut out the whole piece, just the bottom part. And also the extraction needs to give you a nice rounded stain without dark shadows.

Everything is shown in the images below. You just need to repeat what you did previously with the splashes, but yeh, with each new splash you must search new adjustment values (as they are not the same). So the values will be quite similar, but not exactly the same.

 

Step 12

Grab the Brush Tool with soft settings (Flow at 2% and Hardness set to 0%). Create a new layer below these skin parts, and use a dark color (that fits to the surface) to add a tiny shadow. I used the color: #2f1d0e.

Then look at second image below and create two new layers above the skin parts. We will make a small touch up to one of them. As shown in the image – change these layer Blending Options: one to Overlay and the second to Multiply. Then using the same soft brush, change your color as shown in the second image below and paint in the indicated spots to make this skin look more realistic.

 

Step 13

It’s the right time to add some hand-drawn pieces. My drawing skills are pretty lame and I’m aware of that, but since I have some basics I was able to create several very simple elements that look good enough for this purpose. And with good Photoshop skills you can turn your simple drawings into something really cool.

So take a piece of paper, a pencil and use your imagination to create some nice shapes (or you can use mine as well). Now shoot a photo of each one (it’s good to have natural daylight while taking a picture). Then open each one and if they are too dark, use Layer > Adjustments > Brightness/Contrast and then Layer > Adjustments > Levels to get a nice contrast between the edges and the background. Next use the Pen Tool to extract. While extracting, work on a big canvas (don’t resize the photos).

 

Step 14

As you see my drawn element is quite big and that’s a good thing. Now you can use Command + T and click Warp in the top menu bar. Work on bending this shape to get various results. Obviously the warping will get our element a little blurry, but after we resize it down it will not be noticeable (second image below).

Next I wanted to add some depth to this piece by making it less plane. To do this you need the Burn Tool and Dodge Tool. In the third image below, the green arrows indicate the lower spots (that need to get painted using the Burn Tool set to Midtones) and the red arrows indicate the upper spots (that need to get painted with the Dodge Tool set to Highlights).

And after adding depth, you may color this element using Hue/Saturation.

 

Step 15

In the first image below I used the same element as previously and I bent it using the Warp Tool to get many different shapes. I also made them in different colors and turned each shape to different sizes (for depth). They were placed before and after the face.

Now comes the time to add some shading to make these elements fit. You need to remember a few things:

  • When you’re manually adding shadows, use the softest brush (set to 0% Hardness with even 1-2% Flow! Only Opacity stays always at 100%).
  • Shadows in reality always look a little bit different than in an illustration, but we should simulate the shadow to make it unnoticeable.
  • When I add shadows I always sample colors from the surface (and turn them a bit darker than the sampled color, and that makes the shadow fit nicely even if it isn’t quite real). The reason to do this is because every object’s shadow has a touch of color from the ground that it occupies (for some good pointers on making shadows you can read the Super Malleable Lines tutorial, see step 5).

 

Step 16

OK, we can start adding some more drawn elements. So in the first image below, the orange arrows indicate spots that I actually wanted to burn with the Burn Tool (set to Midtones), and the green ones indicate spots that needed some more light (use the Dodge Tool set to Highlights). As you can see, the proper use of simple tools can make your elements really shape up.

So in the images below you basically need to cut out the top part of this element and replace it with the same copied one (but with a different angle). Meanwhile add a Hue/Saturation adjustment to this element and colorize it to taste. If you just slowly study the images below you’ll notice that I made several rotations with the same elements, I duplicated them and did some cutouts (to make them fit better).

 

Step 17

OK, now again repeat the previous step by adding another element. Then using the same tools (Burn/Dodge) make the element shape up (second image below). Next in the third image below (when colorizing) you can use a few layer adjustments to make it look better. In this case I went for Hue/Saturation and Curves to give a nice yellowish green tone.

 

Step 18

Continue adding various shaped elements. Treat them the same way as previously. Add various tones, rotate them and place them in different spots. Don’t forget to use Command + T then check the Warp Tool in the top menu bar, this really helps make the same shapes look way different.

Note: Remember, when you Warp a raster element, like our hand-drawn shapes you need to do it on a big size piece and then resize the element down. It will help you achieve the high quality all the way to the end. Otherwise it will just get blurry and not quite suitable.

Step 19

Now to make sure everything has its own place in this illustration you need to take care for shadows. Each element placed in this room space needs some shading attention (unless it’s very tiny or too small). So if you have no light specified light source, add shadows somewhere below the object.

To do the shading part you need a very soft brush with a dark color, as mentioned before. The best way is to sample the color from the floor and make it way darker. Then start adding soft shadows under the elements. Remember if objects are closer to the ground – the shadows begins to get harder and more visible. Also don’t paint with the brush (holding left-click), make just single separated clicks. This will help you get a soft and barely visible shadow.

 

Step 20

I believe here is a nice relaxing moment of the tutorial. Now using the paint strokes brushes (1 and 2) create some cool shaped pieces. Do this with colors sampled from the illustration. It’s always a good way to help yourself with an Eyedropper, this helps you fluently move in the right color tones. And yeh, if you have a good eye – you can pick some colors by your own taste, it’s good to experiment!

Note: Remember that not every paint stroke needs to look the same when it was saved as a brush. You can help yourself with a soft eraser to make the shape look good to you.

 

Step 21

You should find a window shape in the stroke brushes. Use a dark brown color and place the brush. If you want to place it on the wall, then you’ll need to contort it into perspective using Command + T > Distort (first image below). Then, with Pen Tool, create a Shape Layer below this brush and fill it with white (the reason why it’s not fully white is because in Tutorial Part I we added some overall shading to the whole illustration, and it seems like the brushing is covering some part of the window) – second image below.

Now look at the third image below, turn the “shape” layer into a selection and paint on a new layer using a dull blue color (#689aac). Then, using the Pen Tool, create two parallel lines. Stroke both paths with simulate pressure, and give them blue and white colors (forth image below). Merge them and make around 20 duplicates, then spread them inside the window to give it a nice texture.

And finally you can cover the window with some more brushes as previously (fifth image below).

 

Step 22

Again using paint stroke brushes, paint the ceiling to fill the illustration even more. I need to use these brushes with barely visible gray/white tones to fit the surface. OK, so grab the Brush Tool, choose the desired paint stroke brush shape, set your flow to around 10%, and add some various brushes on anew layer.

 

Step 23

When I was creating this piece I found nice handmade brushes that will be really useful here (1 and 2). Append them to Photoshop brushes and using different colors and sizes, spread them all over the illustration. This should look like a chaotic throw.

 

Step 24

When you’re done with the handmade brushes go back again to our paint stroke brushes, use white for the color and apply one big brush on a new layer (first image below). Then call the selection of this brush by Command-clicking on the layer thumbnail, and go to Select > Modify > Contract, use the value of 2 (second image below). Next, bend it with Command + T and select Warp in the top menu (third image below). Now resize it down (use Command + T) and place it in the space.

You can repeat this step many times with different colors. It’s good to add these effects as they give an impression of drawn elements.

 

Step 25

As this illustration is named “No Beauty” you can think of some elements connected with the beauty. I found two free pictures of blush, that are a little bit out of focus. But anyway, we will resize this blush down, so the blur won’t be seen.

OK, grab the Pen Tool and cut out several crushed parts of this blush, paste it on some white documents and touch them up a little. Use the Burn Tool (Midtones) and burn them as show in the second image below. Then simply make them fit our illustration.

Note: if you decided to put some parts of the blush near the ground, then you need to treat the floor with some shadow!

 

Step 26

To make this illustration even more wrecked, I’ll show you how to create a leaking hole in the wall. There are six screenshots below, so I will describe them in order:

  1. Grab the Pen Tool (set it in the options to Shape Layer) and draw a nice curvy hole shape on the wall, and make it black. Name this layer “Hole.”
  2. Turn off the “Hole” layer, go to the Layers Palette, Command-click on this layer’s thumbnail (the selection should appear). Now hit Command + Shift + C (Copy Merged) and then Command + V (Paste). Now name this layer “Wall Part.” Move the copied “Wall Part” in front of the hole (you can also bend it using the Warp Tool). And make the “Hole” layer visible.
  3. Duplicate the “Wall Part” layer three to four times, move those duplicates below the original layer and use the keyboard arrows to change their spots to top left (one after another) to create a fake 3d effect. Merge these duplicates and use the Burn Tool (set to Midtones) to give it more depth.
  4. Now do same thing to the “Hole” layer. But this time make only one duplicate (colorize it to brown for example to see the difference) and move this copy to top left using the keyboard arrows. This should look now exactly like the forth image below.
  5. Then bring up the selection of the “Hole” layer (Command-click on the layer’s thumbnail), next hold Command + Alt and click on the “Hole copy” layer (to remove the selection of this copied layer). You should get a tiny selection in the bottom edge. Create a new layer above the “Hole” layer and fill it with a dark brown color. Use the Burn Tool (set to Midtones) and Dodge Tool (set to Midtones) to make this edge stand out more.
  6. Copy the skin splashes that we made in the beginning (you can also resize down after copying) and place them dripping from our hole. Use the Burn Tool (set to Midtones) to make it fit the splash top parts to the black hole’s background. Then add some shadow under these drips (same way as you’ve created shadow in the previous steps).

 

Step 27

Take a look at:

  1. First Image Below: As a final touch-up, add a Layer Adjustment of Black and White in the Layers Palette (on the top of all layers), change it’s Opacity the way you like (around 30-50%) and set the Blending Mode to Soft Light.
  2. Second Image Below: Hit Command + Shift + A (to select the whole canvas), Command + Shift + C (to Copy the whole canvas), Command + V (Paste on the top of all layers), and then apply Command + Shift + U (to Desaturate).
  3. Third Image Below: Change the Opacity of this layer to 40%, set the Blending Mode to Soft Light, then go to Layer > Adjustment > Shadows/Highlights and enhance the Amount of Highlights. This brings an HDR touch.
  4. Forth Image Below: Finally again hit Command + Shift + A (to Select the whole canvas), Command + Shift + C (to Copy the whole canvas), Command + V (Paste on the top of all layers), change the Blending Mode to Overlay and go to Filter > Other > Highpass, and set the value to 1.

     

    Conclusion

    So here we are folks. I hope you can successfully apply these effects to your own pieces now. May the detail be with you!

     

    Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.

     

A Bullet-Proof Content Viewer

 

In this tutorial, we’re going to look at how we can easily create an attractive and space-saving content viewer which even works with JavaScript disabled. We’ll build a solid core of semantic HTML, styled with some basic CSS and we’ll then use jQuery to add further enhancements in the form of transition animations.

The following screenshot shows what we’ll end up with by the end of the tutorial:

image
image

Getting Started

First, let’s create the underlying HTML page for our content viewer; in a new file in your text editor create the following page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>        <head>                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">                <title>Bullet-proof Content Viewer</title>        <link rel="stylesheet" type="text/css" href="contentviewer.css">        </head>        <body>        <div id="viewer">                <ul id="nav">                <li class="thumb1"><a href="#panel1" title="Panel 1">Panel 1</a></li>                                <li class="thumb2"><a href="#panel2" title="Panel 2">Panel 2</a></li>                                <li class="thumb3"><a href="#panel3" title="Panel 3">Panel 3</a></li>                                <li class="thumb4"><a href="#panel4" title="Panel 4">Panel 4</a></li>                                <li class="thumb5"><a href="#panel5" title="Panel 5">Panel 5</a></li>                        </ul>                        <div id="panels">                                <div id="slider">                        <div id="panel1">                        <img src="img/image1.jpg" alt="Image 1">                                                <p>Supernova 1994D, visible as the bright spot at the lower left, occurred in the outskirts of the disk galaxy NGC 4526.</p>                        </div>                                        <div id="panel2">                        <img src="img/image2.jpg" alt="Image 2">                                                <p>Radiation from hot stars off the top of the picture illuminates and erodes this giant, gaseous pillar.</p>                                        </div>                                        <div id="panel3">                                <img src="img/image3.jpg" alt="Image 3">                                                <p>V838 Mon is located about 20,000 light-years away from Earth at the outer edge of the Milky Way.</p>                                        </div>                                        <div id="panel4">                                <img src="img/image4.jpg" alt="Image 4">                                                <p>The Sombrero Galaxy is an unbarred spiral galaxy in the constellation Virgo approximately 30 million lights years away.</p>                                        </div>                                <div id="panel5">                                <img src="img/image5.jpg" alt="Image 5">                                                <p>This region of active current star formation is part of a diffuse emission nebula about 6,500 light-years away.</p>                                        </div>                                </div>                         </div>                </div>                <script type="text/javascript" src="jquery-1.3.2.min.js"></script>                <script type="text/javascript">                </script>        </body></html>

Save this as contentviewer.html. We’ll start off with some clean and semantic HTML, using no more elements than is strictly necessary. We have an outer container for the viewer in its entirety, which contains a navigation structure for selecting which content panel to view and a second container for the content panels themselves.

Within the content panel container, we have another container used to enclose all of the content panels (this is needed to display the content panels correctly) and the content panels themselves. Each panel contains an image and a span describing the image.

The main images are added to the document as proper HTML images using the <img> element – this is because they are content and should be visible to assistive technologies or users with both scripting and CSS disabled or otherwise not available. The navigation structure will also contain images, but as these are not classed as content they do not need to be visible in all situations and can therefore be added using CSS, hence the additional class names on the <li> elements.

Right now the page should appear like this:

 

It doesn’t look great, but the document flows correctly and the elements are all clearly visible and usable.

Making it work with CSS

We can now use CSS to transform the content viewer into a functioning interface that doesn’t look terrible. W already linked to the style sheet in the head of our page so let’s create it now; in a new file in your text editor add the following selectors and rules:

#viewer { width:700px; margin:auto; }#nav { width:200px; float:left; margin:0; padding:0; list-style-type:none; }#nav li { width:200px; height:100px; padding:0; }#nav li a { display:block; width:100%; height:100%; text-indent:-9999px; overflow:hidden; background:url(img/thumbs.png) no-repeat 0 0; }#nav li a:hover, #nav li a.on { background-position:-200px 0; }#nav li.thumb2 a { background-position:0 -100px; }#nav li.thumb2 a:hover, #nav li.thumb2 a.on { background-position:-200px -100px; }#nav li.thumb3 a { background-position:0 -200px; }#nav li.thumb3 a:hover, #nav li.thumb3 a.on { background-position:-200px -200px; }#nav li.thumb4 a { background-position:0 -300px; }#nav li.thumb4 a:hover, #nav li.thumb4 a.on { background-position:-200px -300px; }#nav li.thumb5 a { background-position:0 -400px; }#nav li.thumb5 a:hover, #nav li.thumb5 a.on { background-position:-200px -400px; }#panels { width:500px; height:500px; overflow:hidden; position:relative; float:left; }

Save this as contentviewer.css in the same directory as the HTML page. I’ve kept the design minimal so that we can focus on what makes it work; the navigation and viewing panel are floated next to each other and the individual list items are given their background images and hover states. We’ve also added on states as well. This part of the CSS is purely for layout/presentation and does not affect functionality.

What’s important is how the containers and content images are arranged. The outer container (#panels) is given a fixed size that matches the height and width of a single content image and has its overflow property set to hidden to ensure that only a single image is displayed at any one time. This is the only really required CSS for the content viewer to work to a basic degree. If you look at the page now, you’ll see that you can click any of the thumbnails and the corresponding full-sized image will be displayed in the viewing panel:

 

This is great because it remains functional and accessible without relying on JavaScript. We’ll move on to use jQuery to add some smooth transitional effects in just a moment, but first we should add a few more styles that are required for the animations, and to display the paragraphs correctly. Add the following code to the bottom of contentviewer.css:

#slider { width:2500px; height:500px; }#slider div { float:left; position:relative; }#slider p { position:absolute; bottom:0; left:0; color:#fff; font:16px "Trebuchet MS"; margin:0; width:90%; height:45px; padding:5px 5% 10px; background-color:#000; }

The inner container (#slider) is given a fixed height equal to a single content image, but a width equal to all of the images. Then the individual containers holding the images and paragraphs are floated to the left to make them stack up horizontally. Finally, the paragraphs are styled and positioned as well so that they overlay each image:

 

Floating the individual content panels to the left and setting the size of the slider is not strictly necessary, without these the images will just stack up vertically. This would mean that any animations we added would have to move the content panels vertically as well, but we’ll be animating them horizontally.

One point I should make here is that the code so far does not work in Opera; for some reason, Opera cannot use the anchors on the page to show the different content panels when one of the navigation items is clicked. This is a big fail and seems to be a problem in more than one version of Opera. There is a fix apparently and anyone that uses Opera as their main browser will have hopefully implemented this fix already. It isn’t a problem when the JavaScript has been added though.

Adding the jQuery Effects

As the page now works on its own, we can add the JavaScript that will turn this from a functional page into an attractive interface. We left an empty <script> element at the bottom of our page, let’s fill it up now; start with the following code:

(function($){        //code here...        })(jQuery);

What we’re doing here with this first bit of code is ensuring that the $ character will always refer to the jQuery object; if this code is to be used on a page with another JS library which also uses the $ character we can be sure that within our code $ will always refer to jQuery. We’re creating an alias for jQuery that matches the $ character by passing the jQuery object into a self-executing anonymous function. This is a tip I picked up from Cody Lindley’s excellent jQuery Enlightenment book.

Within our self-executing anonymous function add the rest of the code:

//object containing margin settingsvar margins = {        panel1: 0,        panel2: -500,        panel3: -1000,        panel4: -1500,        panel5: -2000}//handle nav click$("#nav a").click(function(e){        //stop browser default        e.preventDefault();        //remove on states for all nav links        $("#nav a").removeClass("on");        //add on state to selected nav link        $(this).addClass("on");        //set margin of slider to move        $("#slider").animate({                marginLeft: margins[$(this).attr("href").split("#")[1]]        });});

First of all we define a simple object that is used to hold the margin positions of each of the different panels; to show the first panel, the left margin of the #slider container should be at 0, to show the second panel it should be at -500px, and so on and so forth. Using an object like this is an easy way to store the values for each panel.

Next we add a click-handler for the navigation items; we want to show the panels using a nice animation so we have to prevent the browser from following the anchor. We do this using the event object (e) which we pass into our click-handler. The event object has the preventDefault() method built into it, so we call this on the event object and it stops the browser from executing its default action.

We use this part of the script to set the on class for the currently selected navigation item; this is the only part of the script that relies purely on JavaScript to function and simply removes the on class from any of the items on which it already exists, then adds back to the item that was clicked. There may be a way of doing this purely with CSS using the :active pseudo class, but as it is purely for a visual aid I don’t think it matters as much if this aspect doesn’t work with scripting disabled.

We now need to show the correct panel by animating the #slider container. Remember, we do this by setting the margin-left style property of the slider. In order to get the correct value for the marginLeft depending on whichever navigation link is clicked we just get the href attribute using the $(this) reference (which will point to whichever link was clicked) and perform a standard JavaScript split based on the # symbol.

We’re doing this the most semantic way – by using information we already have available, in this case the href attribute. We could add id attributes to each of the navigation links, but then we’re adding unnecessary extra information purely for our script which really we should avoid doing. Using the href makes sense but we can’t use # at the start of our object keys (panel1, panel2, etc) so we need to get rid of this character from the value that is returned.

Save the page and view it in your browser; you should find now that when one of the navigation items is clicked, the corresponding panel will slide smoothly into view. There’s just one more thing we need to do – the descriptive paragraphs don’t need to be visible all of the time (as long as JavaScript is enabled) so we can set these so that they are initially hidden from view and are shown when the content image is moused-over. We can add this behaviour easily using just a little bit more script; directly after the click-handler add the following code:

//hide descriptive text$("#slider p").hide();

By hiding the paragraphs with JavaScript we ensure that the content is only hidden if scripting is enabled. This means that the content remains accessible even if JavaScript is disabled on the client. Next we just need to show the text when the main image is hovered over, to do that we can use jQuery’s hover() method; after the code we just added continue with the following:

//show descriptive text on mouseover (hide on mouseout)$("#slider img").hover(        function() {                $(this).next().slideDown();        }, function() {                $(this).next().slideUp();});

All we do is use the slideDown() and slideUp() methods within the hover() method to show and hide the paragraphs when appropriate.

Summary

This now brings us to the end of this tutorial; we’ve seen how we should build our interfaces so that they work even when JavaScript is disabled, and that, instead of relying on JavaScript for functionality, we’re just relying on it to add attractive effects. We also saw that when we want to show content using JavaScript, such as the descriptive paragraphs, we first hide it using JavaScript so that it is only hidden when scripting is enabled which ensures the content is accessible even without scripting.

Your thoughts?

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Write a PLUS tutorial

 

Massive Collection of Over 1,000 Floral Photoshop Brushes

Floral and Ornate patterns are very popular in the design world, their vintage yet elegant and modern feel makes them perfect to use for so many different projects.

To make your life easier, we’ve collected over 60 brush sets, in total including over 1,000 single brushes! What are you favorites sets? We’d love to know!

 

Flower Petals by Brush This (12 Brushes)

image

 

Floral Brushes by SummerAIR (9 Brushes)

 

 

Floral Brushes 2 by Yana Stock (20 Brushes)

 

 

Floral Brushes by Hawksmont (9 Brushes)

 

 

Flower Brushes by Xnienke (5 Brushes)

 

 

Flower Brushes by Danny Hinde (12 Brushes)

 

 

Ultra Leaf Brushes by Snap 2 Objects (32 Brushes)

 

 

Garden Plants by Photoshop Free Brushes (12 Brushes)

 

 

Abstract Flowers by Web Designer Lab (10 Brushes)

 

 

Floral Deco Brushes 2 by Ro-Stock (20 Brushes)

 

 

Flower Brushes by Cozy Comfy Couch (8 Brushes)

 

 

Only Lonel by Desperate Deceit (87 Brushes)

 

 

Artistic Floral by Hottiee (6 Brushes)

 

 

In Bloom by Sleep Walker Fish (19 Brushes)

 

 

Floral Brushes by Miss Fairy Taled (2 Brushes)

 

 

Floral Brushes by Soul DJ (12 Brushes)

 

 

Brushes Pack 1 by Atenaispd (15 Brushes)

 

 

Grunge and Smooth Floral Brushes by Keep Waiting (67 Brushes)

 

 

Floral Swirl Brushes by Aka Joe (20 Brushes)

 

 

Floral Ornaments by Lileya (16 Brushes)

 

 

Floral Photoshop Brushes by Lileya (5 Brushes)

 

 

Floral Brushes Pack 1 by Elena Sham (14 Brushes)

 

 

Floral Brushes by Murderdoll (10 Brushes)

 

 

Floral Brushes by Solenero (9 Brushes)

 

 

Suddenly Spring by Gvalkyie (10 Brushes)

 

 

Sleepless by Sleepwalker Fish (20 Brushes)

 

 

Trad Oriental Flower Brushes by Photoshop Addict (10 Brushes)

 

 

Floral Brushes by GM Para (5 Brushes)

 

 

Floral Deco Brushes by Ro Stock (19 Brushes)

 

 

Floral Swirls by Szuia (12 Brushes)

 

 

Fantasy Floral Brushes 1 by Graphic Identity (4 Brushes)

 

 

Fantasy Floral Brushes 2 by Graphic Identity (3 Brushes)

 

 

Fantasy Floral Brushes 3 by Graphic Identity (3 Brushes)

 

 

Fantasy Floral Brushes 4 by Graphic Identity (3 Brushes)

 

 

Fantasy Floral Brushes 5 by Graphic Identity (3 Brushes)

 

 

Flower Brushes by Redhead Stock (29 Brushes)

 

 

Flower Brush Set 1 by Gvalkyrie (20 Brushes)

 

 

Flower Frames by Generosa (5 Brushes)

 

 

Flower Sketches Brushes by Redhead Stock (36 Brushes)

 

 

Flower Brushes by Man Upstairs (15 Brushes)

 

 

Hand-Drawn Ornaments by Bianca Yvonne (7 Brushes)

 

 

February Swirls by Pixels & Ice Cream (11 Brushes)

 

 

Hand Drawn Floral Patterns by Room122 (8 Brushes)

 

 

Vintage Floral Illustration by Streetcar Circus (14 Brushes)

 

 

Flowers First by Pixels & Ice Cream (5 Brushes)

 

 

Leaves and Foliage by Obsidian Dawn (36 Brushes)

 

 

Paisley Brush by Obsidian Dawn (37 Brushes)

 

 

Flowers and Petals by Diego Botello (22 Brushes)

 

 

Flower Prints by Lonely Lass (5 Brushes)

 

 

Messy Flora by Angelina Resource (20 Brushes)

 

 

Jakandara by Lady Oscar (17 Brushes)

 

 

Flowers Mega Pack by Hawks Mont (28 Brushes)

 

 

Barbarja Floral 01 by Barbarja (15 Brushes)

 

 

Nature Brushes by Confused Stock (10 Brushes)

 

 

Floral Deco by Petticoat Row (72 Brushes)

 

 

Curly Floral by Aramisdream (3 Brushes)

 

 

Swirls and Flowers by Coby17 (15 Brushes)

 

 

Vector Flowers by Yasny Chan (19 Brushes)

 

 

Floral Brush 2 by Barbarja (13 Brushes)

 

 

Fantasy Floral by Graphic Identity (4 Brushes)

 

 

Floral Brushes by Rawox (11 Brushes)

 

 

Florals Brush by Melemel (27 Brushes)

 

What’s In A Price: The Guidelines For Pricing Web Designs

 

8 Design Utilities

 

First of all… Happy New Year. Our full-time job had kept us too busy till date, but we’ve decided to get back to our speed here too!

To start off, here are a few utilities that will sure come in handy for your designs this year 🙂

1. 960 Grid GUI PSD

This PSD can be used as a template to design over, switching the various grids, rulers and browser overlays on and off as required.

 

2. Android GUI PSD

The Android GUI Starter Kit comes with several button elements as well as different interface options for Android GUI.

 

Create a Vivid Themed Illustration Using Simple Hand-Drawn Elements – Part I

 

Drawn elements are certainly something that can enhance an illustration. Even if you’re not very good at drawing, you can still create a quality piece. All you need is a good idea and some Photoshop skills. And if you don’t believe me, you will definitely change your mind after reading this tutorial. So let’s take a look inside!

Final Image Preview

Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.

 

Part I – Tutorial Details

  • Program: Photoshop CS3
  • Difficulty: Intermediate – Advanced
  • Estimated Completion Time: 2 hours

Introduction and Preparation

It’s a themed illustration about “No Beauty,” this hides an idea that no beauty lasts forever. Suddenly all that’s great and beautiful falls apart. All the happiness is gone with the colorful pieces. The final outcome has its own mood, even thou it’s colorful, it’s still kinda frightening.

And as I said this is kinda simple but you may be wondering why this tutorial is labeled as advanced level. Well everything is fine as long as you have some base to work on. Here we have absolutely nothing, we will create this piece from scratch. So what’s hard, is all the illustration depth, shading and colorization. Beside that, there are some things you just need to feel.

Ok, now let’s take a look what we’re going to use:

 

Step 1

I always try to work on a big canvas, but for the tutorial purposes I will go use a document that is 815 px by 1050 px. Just to save you some money from buying large pictures. Anyway, drag the paper texture to our document, duplicate it twice and to each copy hit Command + T (Free Transform) and then select Distort. Refer to the second image below and look how to transform these two paper copies, they need to create a perspective as shown.

Now in the same image – two green frames show you where to cut the main paper to get a good connection. Finally, grab the Patch Tool and get rid of the bad looking textures (third image below).

 

Step 2

Next use Command + U and lower the Saturation of this background paper texture a bit. If the texture still needs some work (first image below), then use the Patch Tool or Clone Stamp Tool to cover some imperfections.

Then, let’s say that the paper background is some kind of a room, so I thought these walls need some more contrast. To make the texture look better, use the Burn Tool (Range – Midtones), and burn in the connection lines to make it look more like a room.

 

Step 3

Now, while you still have the Burn Tool selected, make the diameter very small and paint in the top and bottom edges (first image below – where the arrows indicate). This should help to keep the walls, floor and ceiling separated.

OK, look at the second image below. From my experience I knew I’d give this image more contrast in the final product so for now I kinda lowered the overall contrast giving the feeling that all these walls are very light. To do this use levels as shown in the second image below.

 

Step 4

I assume you have merged all your wall layers together for easier work. If you didn’t, let’s do it now. Then duplicate (Command + J) the “walls” layer and change its Opacity to Overlay. Now go to Filter > Other > High Pass and add the value of 1 or 2. You should immediately get the result shown in the first picture below.

Now hit Command + Shift + A to select the whole canvas, then Command + Shift + C (Copy merged), and Command + V (Paste). Turn the previous “walls” layer off. Leave only the white background layer visible and the new merged layer.

Create a new layer above all, change its Opacity to Multiply, grab the Eyedropper Tool and sample some dark brown color. Then use the Brush Tool with 0% Hardness and around 3% Flow, and then paint as shown in the second picture below to create some irregular shading. Notice how the floor and ceiling is being created by doing this.

 

Step 5

Select the merged layer (the one with the whole canvas) and use the Rectangular Marquee Tool to select the top part of the image, then hold Command and drag this part down. This will help us repair the perspective, because in the beginning we made it pretty much random (if you can imagine this, the diagonal wall lines should cross in the center of the image). Next, look at the second image below and use the Patch Tool to get rid of the straight line indicated by the arrows (which is a result of repairing perspective).

 

Step 6

Let’s open the scratchy texture (link in introduction) and hit Command + Shift + U to Desaturate it. Then you can add Levels (Command + L) and enhance the whites, just to make these tiny scratch lines more visible. Take a look at the second image below, what we need to do is place this texture in the floor spot.

There is also alternative way to do this step by stretching the texture (as you see in the third image below) to get the right perspective (using Command + T > Distort), but well, as not everyone has the correct eye to make this right, we can stick to the position in the second image below.

 

Step 7

As you have positioned this texture, go to Layer > Layer Mask > Hide All. This will make the texture totally invisible. So then grab the Brush Tool, make your brush setting very soft (Flow at around 4% and Hardness at 0%). Then use white for the color and paint on the layer mask of the texture.

The first image below shows the full mask view, and it’s shown where I painted to reveal the texture. Now look at the second image below, and notice how nicely this texture blends with the white background.

 

Step 8

Use the same technique from the previous step to create the ceiling surface. Now open the face picture. Now grab the Eraser Tool set to 100% Hardness and 100% Flow, and get rid of the surrounding skin flowers. An accurate cut out is not necessary, as we will work the face shape in the following steps. For now we also need to resize down this face to make it more suitable to the illustration (third image below). Everything needs its own place in a quality piece, let your own eye be the judge of proportions.

 

Step 9

Now let’s shape up this face. Grab the Pen Tool and draw a curvy path around the whole face. Pay attention to make lots of cavity shapes (absolutely no squares). After you’re done, turn the path into a selection and hit Command + Shift + I to inverse the selection (first image below), then hit Delete. Now you should get something similar to the second image below.

When you work on an illustration like this you need to do a lot of work and planning. In the third image below I wanted to show you how I pictured in my head – what the next steps might look like. I sketched the face falling apart, and basically I wanted to do this by smudging the skin, but ultimately this turned out as splashes.

 

Step 10

I made some further corrections to the face, as I didn’t like the face center (first image below). So if you want you can use the Pen Tool to cut more of the face. Pay attention to her nose, the holes are looking kinda weird (like the right one is barely noticeable). To correct this use the Burn Tool (with Range set to Midtones) and a small diameter. Burn the right nose hole (second image below). Be careful, the Burn Tool can affect the nose skin also, so that’s why we need a small diameter to make it with precision.

If you still have the Burn Tool selected, make your diameter bigger and paint where the green arrows indicate (third image below). I wanted to enhance some shadows and also the bottom of the face. Soon we will drop some shadow below this face, and to make everything work properly it’s good to add shade to the bottom part of this skin.

 

Step 11

The face seems kinda pale so let’s warm it up a little. Select the “face” layer, hold Alt and go to the Layers Palette, and pick Gradient Map (check option Use Previous Layer To Create Clipping Mask). Look at the first image below and use similar colors as mine. Select the Gradient Map layer, change its Blending Mode to Soft Light and lower its Opacity to around 20-30% (not to overload the face with color). Then using Alt again, add another Adjustment Layer, which is Curves and adjust it just a little bit to get the similar look as in the third image below.

 

Step 12

OK, now make sure you no longer need to change anything in the color of the face and then select these two adjustment layers (Curves and Gradient Map) and also our “face” layer. Then hit Command + E to merge them. Next use Command + J to duplicate the “face” layer, drag the copy below original one and move it a little to the top left (first image below).

You can achieve even more variety and less plane results if you rotate this face (second image below). Then grab the Lasso Tool and make a selection around the indicated part above the nose, hit Command + Shift + I to inverse the selection (third image below) and use delete to get rid of all the unwanted parts.

 

Step 13

And what is this all about? This face looked very flat to me. To avoid that look it’s good to add some depth. As you can see, the first image below is the view that we get after deleting all the unwanted parts from the previous step, and the face cut is barely visible.

We’re going to use the Burn Tool (with Range set to Midtones) to add the skin depth by giving some shade to the duplicated “face” layer lying below the original one (second image below).

 

Step 14

I hope I clear up to this step, because if you didn’t understand the previous one, this will be kinda confusing. You may want to review if needed. Now we need to repeat Step 13 to personally chosen parts of the skin. So use the Burn Tool (Midtones) to paint in cavity spots as in the previous step. Then use the Dodge Tool (Midtones) in convex spots (first image below, spots indicated by green arrows).

You can do this to each skin edge, but remember, this may not look good applied everywhere. Also notice that I did those cuts with different angles (on purpose) to get some irregular depth.

 

Step 15

This may be difficult to understand as well, but don’t get terrified, the explanation is straight-forward. Look at the first image below. The selection that you see is nothing else than all these cuts merged together in one layer (the ones we did in previous step). And it looks so weird because there are some skin remains under our original face.

So I hold down Command and left-clicked on the merged “skin” layer’s thumbnail to get this selection. So now that you have this selection, create a new layer just below the “face” layer, but above the merged “skin” layer. Now change its Blending Mode to Multiply and pick a dark pink or dark brown color color (like #653737). Grab the Brush Tool, with the settings as usual (Flow at 3% and Hardness at 0%). Then do the same thing as previously, darken the cavity spots again.

Use the same process for convex spots, create a new layer above the previous one, change its Blending Mode to Overlay. Now use the same brush settings (but with a very light, brownish color, almost white) to paint in the convex spots.

This step may not be necessary for you, but I always pay extra attention to details and well, it’s important to make this look quality. And I did this because the burn tool and dodge tool don’t always do the best job and sometimes you just need to correct it manually.

 

Step 16

OK, if you’re done with the face cuts, I believe you can merge all the “face” layers including: “skin,” “shading,” “lights,” and “face.” Then make a new layer below the “face” layer.

Go to the Layers Palette, recall the selection of face (Command-click on the layer’s thumbnail). Grab the Paint Bucket Tool, pick a dark color with a little red or brown tone (something like #5b5555). Fill this selection with it (on the new layer) – see the first image below.

Then deselect, and use Command + T to make face shadow (second image below). Lower the Opacity of the “shadow” layer to around 20-40%.

Next you can use the same color and a very soft brush to paint on a new layer in the shadow spot. Do this to correct shadow imperfections (third image below).

 

Step 17

Now, I took a fresh look at the image and decided to remove a small part of the face because it bothered me. So you can do the same using the Pen Tool (first image below). And you see, it’s good to have the “face” layer merged, now you can work easily. It’s even better when you have a backup of each part.

In the second image below I used the Dodge Tool on her eyes and eye shadows (first with Midtones, then a little bit of Highlights). When you take a fresh look, many new things can be noticed. Remember to work dynamically!

 

Step 18

In these final steps we will do some overall adjustments. Go to the top of the Layers Palette and create a new Adjustment Layer there of Black and White. Change its Blending Mode to Soft Light and adjust the Opacity to make it work for you fine.

The adjustment layer should automatically have its own layer mask. So now click on the layer mask and use a soft black brush to paint on the parts that you don’t want to get affected the Black and White adjustment layer (I picked mostly the darkest illustration spots).

 

Step 19

Now, add some more adjustment layers in the top of the Layers Palette. First go for Curves and make the tones of the whole illustration look similar (like everything came from one picture). Then make some more adjustments using Color Balance, and basically it’s the same idea. Fill it with your personal settings.

 

Step 20

Next we’re going to add some room shading (first image below), create a new layer above all to do this, and use the Brush Tool with very soft settings (as usual). Pick a dark purple color (like #1a0a18) depending on how your illustration is colored – mine looks kinda cold purple to me.

Now create another new layer above all, hit D on the keyboard to set the colors to default. Grab the Gradient Tool, set it to Radial (from white to black) and fill the whole canvas (second image below).

Finally set this layer’s Blending Mode to Overlay and turn the Opacity down to 15%. You can look at the third image below, the spot indicated with green circles shows where we added a little bit of focus by doing this.

 

Step 21

OK, now this is not necessary (as we will do this in the final product) but to successfully end this part, I hit Command + A (select whole canvas), then Command+ Shift + C (copy merged), then Command + V (paste), and added Filter > High Pass of value 1. Then I turned the Blending Mode of this merged layer to Overlay. This way we get a nice sharpened outcome.

 

Conclusion

It’s great what you can achieve from scratch, having just two textures and a woman’s face. The outcome is complete for now. To get the piece done, first we needed the place and main motive – character. So here it is. Now that you have the overall look, we can start planning what kind of effects we want to fill this illustration with, to make it fully complete. And for this we will take care in Part 2. Check it out soon!

Thanks for reading the tutorial. You can view the final image below.