Best of the Web - June 2009

With another month in the books comes the roundup of the best content on the net for June. The tutorials featured this month explain basic and advanced techniques for Photo-Manipulation, as well as two types of digital painting tutorials - that each have very different
results.

There were also some very interesting and informative articles featured this month, for example who knew that Twitter could make you a better designer? Read along and find out how. Finally, we have a set of freebies that will keep you busy downloading all day!

Tutorial Wrap

(FREE!) Download Picks

Article Wrap



June 30, 2009 | Filed Under Html, Photoshop, Print Design, Web Design, Web Trends | Comments Off 

How to Mold Paint Splatter to a Face in Photoshop - Screencast

“In this tutorial, we’ll learn how to take splattered paint Photoshop brushes and apply them to the contours of a model’s face. This is a relatively simple technique, which yields excellent artistic results. Let’s get to it!” Justin Van Genderen

Here is a link to the written version of the tutorial How to Mold Paint Splatter to a Face in Photoshop and the video version is below.



June 29, 2009 | Filed Under Html, Photoshop, Print Design, Web Design, Web Trends | Comments Off 

How to Create a Fantasy Atmosphere Style Car Ad

The initial concept was the creation of an ‘atmosphere’ - a background for the car. Using images and some painting techniques over that images I made a fantasy scene. This tutorial will explain some of those techniques and how various Photoshop tools work. Let’s get started!

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 or view a larger version here.

Resources Used

Stock Images:

Brushes:

Step 1

Usually before I start to do a manipulation, I go through an initial process: sketches, looking for references, images, stocks, inspiration…I recommend that you do two things before you start to do the manipulation itself:

These steps, are extremely important, principally the sketch. Try to define the sources of illumination in the sketch, you will need it.
About the references, I searched specifically for car ads, and I found the website of 6B Estúdio. I found some awesome references that served as inspiration for this illustration.

Step 2

Now I start a quest for stocks that fit with the initial idea that I had. I started searching for the platform where the car will rest. I started searching on stock.xchng for some cliff edges, but didn’t find anything that was flat enough or with a compatible perspective.

I started looking on Flickr, and found some really good images and made a preliminary collage. One thing: make sure the owner of the image allow the use of the photo. I continue to find each image individually and just put them together. The sketch help so much on this step…

Step 3

Now we’ll start to collage our images together. As the name suggests, it’s about cutting and pasting each stock into our work. Each kind of image is a different type of render after cutting. Mainly, I use the Pen Tool, but I’ll show some others too.

Pen Tool

I think that is the best cutting tool, because it uses paths, so the final result becomes more anti-aliased and more smooth. The Pen Tool can be used to render any non-organic material, I mean: we can render cars, motorcycles, clothes… But the Pen Tool doesn’t work well for organic images like peoples, animals, landscapes, trees (these are really difficult to get good results with the pen tool).

You can access the Pen Tool (P) in the Tools Menu. Also, enable the Path option, so when you trace with the Pen Tool, you will not create a Shape layer.

The last resource that I like to turn on is the Rubber Band. To enable it, you click on the arrow after the Custom Shape Tool icon, then a box will be opened.

When you’re rendering with the Pen Tool, you need to trace a little inside the original stroke of the image. This avoids the leftover bits from the background of the image.

After tracing, you just need to click with the right button and select the Make Selection option.

Tip: if you pressing Shift after you closed your trace, you may then create more selections.

Eraser Tool

The Eraser Tool (E) is very useful to render irregular surfaces or blurred images. Also there are a lot of specific brushes to render grass, hair, and some others. These brushes can be downloaded on the resources list at the beginning of the tutorial. They save work and your work will look more realistic and professional.

The Eraser Tool combined with a Graphic Tablet can be very useful, because the pressure sensor of the tablet will make for more precise traces. Let review how this works.

I used a background with a different color, this way I didn’t leave leftovers on the image. I don’t care about the cut quality because I can correct it later.

Tip: you can expand your workspace by pressing the Tab key. This will hide anything and you’ll only see the image workspace. To make them appear again you just need to press Tab again. Also, if the brush tip disappears, make sure Caps Lock isn’t turned on.

Other Methods

There are a lot of another methods to render images, like masks, plugins, selections by color and the Magic Wand Tool too! This tool, I bet you already tried to use, but maybe you are unhappy with the final result. This tool would be the perfect solution to rendering, but the final quality of the cut-out render is too bad. See the result of a render with the Magic Wand Tool below.

Observe that it left white parts and it is really serrated. One solution for this is the Defringe Tool. It is found by going to Layer > Matting > Defringe. It will fix the white issues on the image a little. But I really recommend that you don’t use these methods for objects that stay too close. I mean, you can use the Magic Wand Tool to render minor images that stay far away in the illustration, but not for large images and especially not those that are the focal point.

Further Resources

For more information on Selection Methods visit the Psdtuts+ tutorial A Comprehensive Introduction to Photoshop Selection Techniques.

Step 4

After you found all stock images you will need to do a collage, cut-out every image using your preferred method and put them together. This step shows how important the initial sketch is, because you can lose yourself when you’re doing the collage. Don’t worry about realism for now. Just put them together, on some areas I need to use the Clone Tool (S) to fill it. See the screenshot below.

Step 5

Using the Clone Tool is quite easy. I don’t cover the details of how to use it here, so I recommend you read this clone stamp tutorial. The collage steps don’t need to be perfect, you really don’t need perfect realism at this stage.

Tip: keep every image on a separate layer. It’s really recommended because sometimes you will need to edit one thing separate of the others and if you keep everything on the same layer you will had some problems.

The process was quite simple, I just clone some parts of the original image in another layer, and use the Pen and the Eraser tools to cut and make the continuity of the image. See the original images (I deleted some parts to fill better with the cloned layer).

Below is my semi-finalized image, I just put the images in their respective places and cut/cloned some areas.

Step 6

Each photograph was taken under different circumstances, places, lighting, and times. In other words, it’s very hard (maybe impossible) to find different images with the same exact characteristics. That was one of the hardest things on this job, because the two images that I found of the ocean had so many differences.

To give the same tone to both, I used some adjustment tools. I think it will be easier and will create a better effect if I edit the right image.
I think it’s very unnecessary to show a lot of values that don’t necessarily apply to other images. So, I’ll show some of the tools I used and I’ll leave to you the task of making the images match as closely as possible.
There’s no secret to it, you just need to observe and experiment with the different tools. I’ll show some tools, their functions, and use:

Levels

Access Levels via Command + L or Image > Adjustments > Levels. This tool controls shadows, midtones and highlights individually. Take a look at the diagram below.

This diagram shows three tones: all images had darker or highlighted areas and some of of them are mid tones. In our case, the first image is too saturated, in other words: the image has few midtones and many shadows and highlights.

The predominance of extreme tones causes an impact. But the second image is completely desaturated, all the image are in the same lightness and midtones. The shadows and desaturated image aren’t too far as the highlights ones.

If you don’t have much experience with manipulations, then I think it will be hard to see these details, but as the time pass unconsciously you will start to see that better. So don’t be hurried and calm down, they are abilities that come with time. See some functions of these tools below.

Color Balance

We saw how edition the lightness of images works. We can control if the image will be more dark or clear, but how do we adjust the image’s colors?
There is a specific tool for it, it’s Color Balance. This tool allow us to change the balance to darker, mids and brighter colors. Let review the functions of these tools.

Gradient Map

One of my favorite tools. The Gradient Map gives a gradient for certain tones. It’s hard to explain how it work, I made a diagram to try to explain it. This tool can make some really nice effects if you play with the Blending Modes. I hope you understood how these very useful tools works.

Step 7

After I did the background collage, I started to find some stock images for the sky. Normally I try find some images on sxc.hu or on DeviantART, but this time the size of the final work was very large, so I looked for images in CGTextures. This site has high-resolution images. There are many great stocks on the site.

Again, I just did some collage here, and didn’t worry about the differences between the images. I just took care to create a visual logic between the images. I create clouds that seemed more distant and the others were made to appear closer. The tools I used were basically the Clone Tool and the Eraser Tool with brushes set to Hardness of 0. After I made the collage, all I needed was to apply the tips of the sixth step to standardize the lighting, shadows, contrast, etc. The final manipulation of the clouds is shown below.

Step 8

One of my references was this old job (please don’t laugh, he he). I took the floating island idea from this work, but after I put the island on the manipulation, I had the impression that something was missing.

So I had the idea of making the island emerge from the water. For this I painted water dripping with a tablet. The island was made separately from the rest, and for Psd Plus members you can review how this was made closely in the included PSD files. The final manipulation of the island is shown below.

Step 9

I used three images for the island. I used a stock of two mountains as the base and an image from another island for the top of the island.
I made a preliminary collage, just rendering and pasting the images defining the composition of the island.

The base of the island was made using only one of the mountains. It seemed very empty to me, so I used both mountains to mount the base of the floating island. The idea from the temple that was designed after I had placed the island in the original image and the island looked too empty for me. My idea would be to maintain the island as it has always been there, floating on the ocean.

Step 10

My preliminary island looks like the image below.

Step 11

Now we’ll work on the lighting. I had in mind that it came from a point on the horizon of the image. So the back of the island will be the lighter side. If you look for some references, you will see that in images where illuminated source come from behind, the borders look more illuminated then the rest of image.

On the image below, the red arrow represents the original illumination of the top of the island. The blue ones shows the original illumination of the base of the island. The orange part shows the desired illumination.

To make the illumination I usually create Layers normally set to the Screen or Color Dodge Blending Modes and paint using brushes with a light color. I just use the Burn/Dodge Tools to do a quick correction. But don’t worry, use whatever tool you want, it’s just a correction. We’ll improve it later…

Step 12

Having finalized the island, I placed it in the manipulation, but thought it lacked something. I had the idea that the island could have simply emerged from the ocean, something more impressive. Water is one of the easiest elements to paint, at least in my opinion. I made a small guide to explain how I painted the water.

References

They always help in the case of paintings: details and texture can be observed in reference images. You can find references in any site, a simple search for images on the web will bring you many images to review, but remember, you cannot use them in the picture, just observe them, respect other peoples works.

Brushes and Settings

To the water, I generally use a Hard Brush (with Hardness at 100%). You can decrease this value if you need. Keep the opacity low (around 20% in light areas and dark areas at 5%).

Painting

Painting water is not difficult, however, is easy and even pleasurable, but we must maintain a logic when painting. In this case, as the island had already emerged from the ocean the water was dripping back to the sea.

Note the track that water makes to fall into the sea. In places with greater volumes of water I formed waterfalls, where there is little volume of water. It flows only to fall. The arrows in red show the track made by the island. The water follows the opposite, attracted by gravity.

Note when the water falls in the sea it forms waves and will be expanding, lose strength, and go away. See the painting without many details and the water is only a variation between shades of white with more or less opacity.

In this diagram, you can see (again) the track of water. In relation to the volume of water there is a greater volume at the beginning of the waterfall and when it fall in some area, there is shock and water is thrown about.

In regards to the lighting, instead of using shadows (I showed the image shadows, but for better viewing) in the areas of lighting, the opacity can be increased, contrary to the darker areas, where the opacity must be less . In the figure of the previous step you can see this with better clarity.

Step 13

After finish painting the water, I decided on some details. This is another element that is easy to paint, and follows almost the same logic of the water. I just fixed some details such as lighting, cracks and some patches in the images, my images (semi) final was that shown below.

Step 14

You must have noticed (or maybe not) that I didn’t mentioned the stock of the car. It is because it is a special case. As I said, the initial idea was the creation an atmosphere for the car. That car used is a 3D render, in my opinion it’s easier to work with 3D images in some cases.

The first difficulty was the perspective of the car, which was in a very bad angle. This hindered my search for stocks, then instead of looking for something to adapt to the car, I had to make the car fit the background.
Notice how the car’s angle is completely different from the image.

Step 15

Using the Perspective Tool (Edit > Transform > Perspective) you can adjust the angle and perspective of the image. Another tool I used was the Warp Tool (Edit > Transform> Warp), but we must be more careful with Warp because it may distort the image too much. I leave a picture as reference for the perspective. I recommend that you use guide lines to help.

Step 16

Okay, placing the car at the right perspective was relatively easy. Now the problems…the first one is the shadow. Indeed, it is not a problem but a matter of finding good references. Analyzing the reference images is one of the first steps, after all, we don’t record all the details in our minds.

You can search for reference images by using Google, Flickr, deviantART and even sites of paid stocks, or the free ones. But you should never use the reference images. Respecting the work of others is the first step to being respected. But finally, search some images for the shadow of the car, you can use any source you find, I used Google Images.

I see on the references that the shadow of the cars is almost straight, square or a rectangle a little unfocused. When the shadow is more straight, I like to work with Shapes. I do the initial form of the shadow using the Pen Tool, and I blur and delete what is necessary.

Another good tip is to make multiple layers with different opacities alternating the Blending Mode of each layer.

Step 17

But finally, do not go on deleting everything. We need to keep the logic in place. The parts with higher incidence of light are those that have less shadows. The thought here is that the main point of light comes from the horizon.

I made an example showing the main points of illumination of the finished image to use as reference for the shadow. In the diagram + is the intensity of illumination and - represents the intensity of shade.


Step 18

In the example above notice that there are two main points of illumination. The circle in red and the other in blue.

The main light comes from the red circle, and reaches the car and the platform where the car is. The blue one reaches only part of the ocean and the coast on the right side. There are still some points with a third source of lighting - very low. This is the case of a space in the clouds, in the rear of the car and all other places are painted in pink.

There is also a part where the shadows are prominent. You may notice how the car is a visible part and relatively light. The car is the main focus. This is a concept that always applies to every type of work, but in ads a special care must be taken because the emphasis should be on the product. Sometimes you exaggerated a composition, leaving the main product to the side, then the final result is not good.

I do not like the color of the car. This was the first of a series of changes that I do on the car. To change the color of the car, I only duplicated the layer of the car and and use the Hue/Saturation adjustment. To select it go to Image > Adjustments Hue/Saturation (Command + U). As its name suggests, this tool changes the Hue/Saturation of the image.

Additionally, you can change the lighting (Lightness). It is almost like a merge of the Color Balance Tool and the Levels Tool, but it is so much simpler. The Color Balance can also be used, but I particularly think it is easier to use the Hue/Saturation. Anyway, let’s see how it works below.

Step 19

In this case, I just changed the values of Hue. The concept that I had is that the lighting would be predominantly orange, giving a volcanic feel in the image. But the red car was breaking this uniformity. So I decided to leave the car with a tone closer to the orange lighting.

Step 20

Now let’s fix the lighting of the car. Based on the diagram of level of lighting, I’ll provide a guide to create the lighting of the car. Note that the original lighting of the picture is completely different from the lighting required.

Step 21

To do this I used light brushes with Hardness set to 0, and four main colors: white (#FFFFFF), black (#000000) and two variations of orange (#E6BC72), and brown (#5B3B13).

Using a low opacity, I did the most lightening of the car on the front. And the back was made darker. I put that layer in a Clipping Mask, so it will only occupy the limits of transparency of the image. That is, all effects will only reach the car. Note in the picture, the front looks pretty desaturated, but I’ll fix that later.

Now I did a series of adjustments in the car.

A. Painting the Brake

The brake of the original image was in a gray almost without emphasis, therefore, decided to paint it in red. The process is very easy. With a brush in red (#ff0000), I began to paint the area of the brake in another layer. Then I put a layer on Soft Light after the regular opaque one, then delete the parts that remain.

B. Adjustments in the Wheels and Lighting

I decided to give a greater emphasis on the wheels, therefore I used the Burn Tool (O) in the area of the wheels on the Layer that was setting the color of the car.

The Burn Tool is an interesting and useful tool, though I do not use it much. It edits specifically one of three tones in a simple and easy way through brushes. Like most of the tools in Photoshop, you can select which tone will be modified (shadows, midtones and light tones). The Burn Tool darkens each desired tone in the layer you’re working with.

Now I decided to correct the lighting of the car (so the car seems more saturated than before). A tip on the Burn Tool and Dodge Tool is to change in tone extremes (Shadows/Highlights) generates a more impressive effect. The Midtones soften the impact between the extremes of tone, remove the image results in alleviating much more impressive. But beware, you can’t exaggerate, also you cannot do this with very realistic work, for example.
Using the Burn Tool, alternating between editing the Highlights and Shadows came to the result shown below.

C. Reflections of Car

Some surfaces reflect the environment around them. I advise you to look for references, because when this reflection happens there is often a distortion as well. The references helps in the creation of any reflective object: water, metal, glass, mirrors, while taking into account how each object reflects. It is impossible for a wood floor, for example to reflect the same as a mirror.

To create the reflection, I used parts of the backgrounded, cropped them, always keeping them in the separated layers, and putting them into the Clipping Mask of the Car Layer. Also, I distorted these images using the Warp Tool (Edit > Transform > Warp) and Eraser Tool to delete some areas. Note that the reflection will occur mainly in places near the ground and to a lesser intensity on the roof, windows, lamps, and other…

The image shows the pieces of the copied file (each piece is on separate Layers). The next step is to define what Blending Mode to put the Layers. I had better results with the Blending Modes of Lighten and Screen with an opacity at 70% or less. There is no a basic rule for Blending Modes which is better, but I recommend you experiment until you find a good combination.

D. Chroming

I am particularly a fan of chromed details. I decided to chrome some areas of the car, only the details. To do this, use the Pen Tool to create shapes in the places you want the chrome. I chose the color #D9D9D9 to draw the shapes with.

Having made this shape with the Pen Tool, I duplicated the layer and change the Blending Mode. I put the first one in Saturation and the another on Overlay.

Now you ask, why? Simple, one layer will clear the saturation of the original image, and keep the same lighting, but will leave that area completely without color. The other layer simply adds luster to the chrome. With a few minor adjustments, we have finalized our car.

Step 22

Relax, this huge tutorial is coming to the end. After making the whole composition, I look at all the locations of the images to add detail. I really think that everything is in the details.

If you take a picture of a house, it’s not just a house, many years of events, might be a reform, or anything that has left marks in that house, and those are the details that make the difference in photo manipulations. After searching some places of the image, I found this part shown below.

Step 23

I decided to paint over the image to add improvements. When painting, I often use small brushes with the Hardness set between 60% and 100%, with low opacity, and use just using black and white.

It is difficult to explain the process of how to painting. In fact, I don’t know for sure how I do it. The only thing I take into account is the position of the main lighting. I tried to make it a more detailed and interesting mountain by playing with the brushes, and came to the result shown.

Step 24

This step is more a reference to details that you can add to its manipulation then a guide in itself. But at a certain point, references and good sources of inspiration are almost as important as tutorials and guides.

As part of the island, I made a few cracks and the effect of wet areas on the island. To make the cracks is relatively easy. I used a dark color with high opacity and other high-clear with low opacity. After making the cracks using the dark, you must clear one of the edges, using as reference the lighting of the main image. For the wet, I painted the water with a low opacity brush with white color, and just highlighted the borders.

Step 25

Finally, after cutting and pasting the images, adjusting levels, colors, creating effects, shadows, and all of the previous steps, we arrive at the step that will impact the work the most. This part is the most important of all because it changes the overall look of the work. To see the difference, review the before and after images below. Let’s go ahead and go through the steps that move us from the left image over to the right result.

A. Focus

Our initial focus is on the car, I think you are tired of knowing that, but I do not think we talk about our secondary focus, which is the Island.
After all, it is what makes the image so fanciful and incredible. To create the focus generally dim less important parts and try to lighten the most important. Usually the layer of focus is more or less like this.

You may have noticed, both the areas of the island and the car are in evidence (white), the other areas are darker. This layer was in Soft Light with a low opacity. It may not seem like much, but the subtle effects are what make the difference.

B. Lighting

The lighting is nothing more than to create something that fits with the initial concept. Always try to keep in mind the points of light. As explained in Step 17, this diagram was in my head, I knew where they came from each source of illumination.

Creating lighting is not difficult, it just requires a little attention.
I usually work with Color Dodge and Linear Dodge to create the lighting, but also use other Blending Modes.

A Long time ago, just when I started using Photoshop, I read a tutorial that basically explains lighting of signatures for forums. I do not know if you had contact with this type of work, but by that line that I stated. And this tutorial was a very valuable tip that I never stopped using it.

I just paint a layer background with black, and put it to Color Dodge, or Linear Dodge, and use a light color, which gives a very nice effect as shown below.

You can see that the places where it is painted in orange are places of strong lighting. The effect generated by the Color Dodge is below.

C. Final Effects

The final effects basically transform the image. At this stage I adjust lighting, color, brightness and other things, not individually as before, but now the whole image will be edited. I recommend you play with all the tools in Photoshop adjustments, changing the Blending Mode, creating and experimenting with new ways and effects.

The following is a guide and not a rule. Play with the colors of the gradients, using filters. Experiment and see the result you will understand what is behind this effect. There are theories that point, everything can be done, without exaggeration. I got these result with some Blank and White Gradient Maps set to Multiply. The final image is below.

Conclusion

I really hope you liked and learn from this tutorial. I focused myself to explain the tools, not just putting values and more values, so can understand the methods used in this tutorial. You can see a final version with a larger resolution here.

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



June 29, 2009 | Filed Under Html, Photoshop, Print Design, Web Design, Web Trends | Comments Off 

Floral Scribble Photoshop Brushes - Psd Plus Pack

This is a new pack of Photoshop brushes available exclusively from Psdtuts+ for Psd Plus Members. We have a new set of Floral Scribble Brushes for you. They are great for adding an artistic and chaotic touch to your next project. This set of high quality brushes is available for Psd Plus members to download today!

New Exclusive High Resolution Photoshop Brushes

This new CS4 Photoshop Brushes Pack is created by Sean Hodge and is available for Psd Plus members today. This is a set of 18 Brushes, which are all high resolution at around 2500 pixels by 2500 pixels. This set of Scribbly Ink Floral Brushes were designed in Illustrator, but have an organic feel, and some have a bit of a Rorschach inkblot test feel to them. If you put these brushes to use, feel free to leave a link to the work in the comments below. Enjoy!

Note: Along with the brushes, EPS files of each design are included, and for those of you with Illustrator CS4 I’ve included the AI source file as well, in case you want to experiment with the Scribble settings, or export the designs at different resolutions. These brushes are made for large scale high-resolution work. You may want to create a set at a lower resolution for use in your own collection. Big thanks to Alvaro for reviewing these brushes and for the tips!

Members can Log in and Download! Otherwise, Join Now! A preview of the brushes are below.

See the Brushes in Action Below

Members can Log in and Download! Otherwise, Join Now!

Psd Plus Membership

As you know, we run a premium membership system here called Psdtuts+ Plus that costs $9 a month (or $22 for 3 months!) which gives members access to the PSD files for tutorials as well as periodic extra tutorials, like this one! If you’re a member you can log in and download the tutorial. If you’re not a member, you can of course join today!

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



June 28, 2009 | Filed Under Html, Photoshop, Print Design, Web Design, Web Trends | Comments Off 

Interview with the Founder of Envato, Collis Ta’eed

Collis Ta’eed founded a little company called Envato back in 2006, and three years later it has flourished into a corporation with 18 extremely successful subsidiaries that employ writers and designers from all over the world. Its diversity ranges from tutorial blogs covering almost every topic in the design world, to successful marketplaces that provide you with all the design materials you will ever need.

With the entrepreneurial genius of Collis and assistance from his talented staff, they have turned Envato into a giant in the world of design that acquires at least 11 million hits a month across it’s network of sites. Now pose those burning questions you have always wanted to ask Collis today!

Pose Your Questions in the Comments

In the near future, I will be interviewing Collis. We want to make it as informative to our readers as possible, this is why we want you (the reader) to post a question for Collis in the comments below.

For those of you not familiar with Collis, he started Psdtuts+ and the Tuts+ network, has a tremendous amount of blogging, design, web design, and business building knowledge. He is the CEO of Envato. So this will be a great interview!

About the Coming Interview

Since our last interview with our editor Sean was so successful, we figured that the next step should be to interview the creator of Envato Collis Ta’eed. The procedure will be exactly the same as the previous interview only the questions will now be directed towards Collis now.

Feel free to ask any type of questions ranging from the business end of the company, to design, or anything large or small that you would like to know about Collis. It’s time to pick his brain a bit!

We want this interview to be successful, so we once again need your help. Post your questions in the comments. I’ll then go through and pick out some questions that will make this interview interesting as well as informative.

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



June 28, 2009 | Filed Under Html, Photoshop, Print Design, Web Design, Web Trends | Comments Off 

Interview with Vlad Gerasimov

I’m sure some of you might have heard his name, seen his awesome wallpapers, or are already using one of them. Psdtuts+ is pleased to bring you an interview with this digital artist, Vlad Gerasimov, who is from Irkutsk, Russia. He runs Vladstudio which specializes in creating wallpapers for computers and mobile devices.

In this interview, Vlad shares with us his humble beginnings as a designer and how he got started with creating wallpapers as full-time self-employment. He also shares his ideas, inspirations, and future plans. Vlad has a unique style of illustration, with simple lines and shapes. His work has great themes, which promises to win the hearts of viewers and make them happy! So let’s move on to have a digital chat with him!

1. Hello Vlad, how are you today? What are you working on at this moment?

Hi! I’m very well as always, thanks! :-) Right now, I am having my morning coffee and finishing my new wallpaper, “The Traveling Tree.” The artwork itself is completed, and I’m busy saving JPG files for all possible formats (for 2,3 monitors, mobile phones, etc).

Vlad Gerasimov

2. Tell us about your background, where are you from? How is a typical day for you?

I was born and have always lived in Irkutsk, Russia. It is located near lake Baikal, the deepest lake in the world by the way. I received economical education, but never spent a minute working as an economist! I also play piano and guitar, and dreamed to become a rock star.

My typical day may seem not so interesting. I spend most of day at home, sitting with my MacBook Pro (because I am a home-based worker). I reply to e-mails of my website visitors and clients, maintain and improve my website, and of course, I always draw something in Photoshop.

The Running Horse

3. How did you get started in graphics and the digital art field? Please describe the evolution of your work, from your first project to the present day. Do you freelance full-time?

My father and older brother are programmers, so I had access to very early computers since my birth in 1981. But I did not use computers for design until my brother needed designing help in 1999 - he needed custom "skins" to replace standard Windows controls (such as buttons, scrollbar, etc). So I learned Photoshop a bit and started making interfaces (skins, icons, other graphics for software). Over time, I also learned HTML and PHP, then started making web sites.

I worked as a designer in a small company for some time, then I decided to try working for myself, and started my own website - Vladstudio. It was only a designer portfolio at first. While working for various clients, I played with Photoshop and created artworks, just for fun. The idea to publish these artworks as wallpapers was very lucky for me - over time, my wallpaper were more and more popular. So a year ago, I decided to stop working as a freelance designer, and try to make my living only with wallpapers. So far, it works!

Pawn takes Queen

4. How do you mainly produce your art? Can you give us an insight into your creative process? Do you sketch your works out by hand first?

I actually have many tutorials that show typical workflow. Yes, I start with pencil sketch of a wallpaper most of the time. Then I scan it, open it in Photoshop, create basic shapes with vector tools. Then I add shadows and highlights with large, soft brushes, then add all the little details.

Tarsier

5. I love how you design the beautiful wallpapers. They have great themes, lovely colors, they are detailed and proportionate. How did you develop this simple yet appealing style?

Hmm, I think it was not intentional, this style developed itself. :-) Maybe part of the reason is that I spent a lot of time making icons, and therefore my art inherited some of icon design principles - clear lines and details, pseudo-3D, etc. Other reason is that I like to draw things that skip your brain and go straight to your heart. This style of drawing helps me to achieve that.

They Stole The Moon

6. When did you launch your website and what is the most important thing that you accomplished with it? Why did you choose to distribute your artwork as wallpapers?

Hmm, I will need to check with my archives, I don’t remember! :-) My first website was art.softshape.com (not online now) and was a subdomain of my brother’s website, www.softshape.com. My current website, vladstudio.com, is very important to me - because it is actually my only source of income now!

I distributed my artworks as wallpapers because I wanted people to use my art, not only look at it, then close and forget. Wallpaper design has some limitations (should be dark and not too busy), but I am OK with that. I also believe that the huge part of my success is many extra features. Right now, my website visitors can:

Dolphins

7. Most of your works has animal or nature themes. How does nature influence your creativity? What are your main sources of inspiration, any particular artist(s) or website(s)?

Yes, many of my recent works look like they are designed for children (many adults like them too though). There are too many artists that inspire me. Often, I stumble upon another artist on the Internet that draws so much better that me! That challenges me, and I try to constantly improve. As for particular websites, I find a lot of good art at deviantart.com, and I always check out russian photo site, photosight.ru. General inspiration-related sites, such as smashingmagazine.com, are good too.

Learning To Fly

8. Of all the work you’ve created, can you name a couple of them that you have a special love for or connection to?

Every artwork is as a child, you know ;-). I think the most special for me are:

Planet Earth - Inversed

9. Aside from your design work you also seem to enjoy writing Photoshop tutorials, can you share with us your favorite Photoshop trick or technique?

I would be careful picking a trick just for the sake of a trick. The worst you can do in Photoshop is to design something that says "Look how I can do it!"

Always use tools and tricks that help you tell the story, not only because they’re cool. Sorry, that was necessary to say :-) and replying to your question, I think my favorite small trick is fast hair,
because I invented it myself, without any advice.

Fast hair

10. Since your artworks and illustrations mostly have vector style, why not choose to design them in Illustrator instead of Photoshop, or maybe start them with Illustrator and polish them up in Photoshop?

For several reasons. First, I’m too lazy to learn Illustrator. :-) Then, pure vector drawing is not for me too - I use vectors for basic shapes, but most of work is done later done with pixel tools. And for this purpose, the vector tools of Photoshop are quite enough.

Rainbows - making of

11. Do you have any specific plans for the future direction of your artwork?

I really hope to keep making art until I am very old and have lots of grandsons. Also, I find myself more and more interested in illustrating for children. For example, I just finished a set of 12 artworks for a Czech toy manufacturer. When I improve enough, I plan to start working on illustrations for "Little Prince" (maybe in 2-4 years I hope!). And of course all my artworks will be published on my website as wallpapers for your desktop. :-)

Typographic Rain

12. Thanks for the interview Vlad. Would you like to give any tips or advise to aspiring digital artists?

Sure! My tips:

Love Knows No Boundaries

Where to find Vlad on the Web:

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



June 26, 2009 | Filed Under Html, Photoshop, Print Design, Web Design, Web Trends | Comments Off 

53 Crazy-good Digital Photography Tutorials

Though Photoshop has grown over time to become a many-armed beast of a program, it was first created with the modest aim of helping users to modify and improve their digital photography. In this post we return to Photoshop’s roots with a wonderful collection of digital photography and photo editing tutorials.

1. Make your photo impressive

2. Creating Dreamy Photos

3. Coloring a black and white image

4. Post processing: Digital to fake Black & White Film

5. Changing Hair Color in Photos

6. Nesting Smart Objects for Multi-Mask Effects in Photoshop

7. Image Retouching: Advanced Skin Softening

8. Creating a Sunset Effect in Photoshop Tutorial

9. Change Hair Color Photoshop Tutorial

10. Antiquing Digital Images in Photoshop

11. Repairing Old Photos

12. Basic Model Retouching

13. Photo Makeover

14. Black And White Conversions In Photoshop CS3

15. Bringing Out Shadow And Highlight Detail In An Image

16. HDR-Style Results Using Layers in Photoshop

17. How to Convert an Image to a Duotone in Photoshop

18. How to Create Professional HDR Images

19. Using the HDR Feature in Photoshop CS2/CS3

20. How to Make Digital Photos Look like Lomo Photography

21. Create Digital Makeup

22. How to Fix a Botched Tourist Photo in Photoshop

23. Understanding Filters in Photoshop Elements

24. How to Batch Resize in Photoshop

25. Cropping Photos Without Changing The Aspect Ratio

26. Infrared Photo Effect in Photoshop

27. Exposure blending tutorial

28. How to Use Photoshop’s Lens Blur Tool for Tilt-Shift Fakery

29. Vignette 2.0

30. Difference Between ‘Resizing’ and ‘Resampling’ An Image In Photoshop

31. Selecting & Extracting Hair - Masking Tutorial

32. Smart Scaling with Content-Aware Scale in Photoshop CS4

33. How Image Resolution Affects Print Quality

34. Gradient Mapping effect in Adobe Photoshop

35. Morning Glow Photoshop Tutorial

36. Using Masks to Improve Landscape Images

37. 5 Steps to Bolder Colors

38. Enhance Your Image with Selective Color Adjustments

39. Black and White Is the Key to Better Color

40. Sharpen Those Photos: Unsharp Mask

41. Non-Destructive Dodge And Burn

42. Turn a daylight photo into a night shot

43. Editing with Photoshop Levels

44. Smart Dodge and Burn in Photoshop Elements

45. Sharpening with the Unshap Mask

46. Cropping Photos To Specific Frame Sizes

47. How To Straighten Crooked Photos

48. Getting a Grip on the Vanishing Point Filter

49. How to Stitch Photos in Photoshop

50. Awesome Photo-Realistic Coloring Techniques

51. Matching Colors Of Objects Between Photos

52. A Quick and Effective Way to Enhance Contrast in Photoshop

53. Working With Shadows In Photoshop - Advanced Shadow Techniques



June 25, 2009 | Filed Under Html, Photoshop, Print Design, Web Design, Web Trends | Comments Off 

Who Should Win $3,500? Vote Now!

During our very awesome Graphic Design Week we offered a $3,500 USD prize to the person who could create the best and most original collection of Envato marketplace files. Literally thousands of entries poured in, and now we have chosen the top 10. Cast your vote to determine who will win an incredible $3,500 to spend on the ultimate graphic design setup!

All This Could Be Theirs…

Prizes

… But You Ultimately Choose!

So, who gets your vote?

Finalist 1: Life In The City

“A collection about cities, modern buildings, industrial sounds, videos of a town in motion, or a building in color, you will find it here, brought and made by some of the greatest authors in their fields, enjoy!”


by ahmednaguib

Finalist 2: The Eco-Friendly Collection - Web and Print

“The Eco-Friendly Collection (Web and Print) is a compilation of items across the Envato Marketplaces that relate to going green and being environmentally friendly. Templates can be used as a base for websites and printed material that promote recycling, preserving nature, and anything that has to do with being eco-friendly. Sounds and flash animations can be used to accompany work created on the web.”


by idrawdesigns

Finalist 3: Admin, the Ultimate Collection

“A collection of files to help create the ultimate Flash/Flex content management system.”


by Gr0in

Finalist 4: Must-have to Create a Masterpiece

“Some sounds, graphics, and stock footage to give a masterpiece the perfect feeling.”


by Leas

Finalist 5: The Final Frontier

“Space. It is colorful. It is infinite. These are the voyages of the starship Envato. It’s continuing mission…”


by circuitbomb

Finalist 6: The Colors Of The Rainbow

“This collection has the most colorful resources you’ll ever find. Here you can find icons, vectors, website templates and business cards full of joy and fun, just like a rainbow!”


by drarock

Finalist 7: So Cute it Hurts

“All the cutest resources from Graphic River, and a couple from FlashDen are the cherry on the cake.”


by drarock

Finalist 8: Web Designer’s Toolkit

“This library showcases the best & most useful products in regards to general web design. From Flash to Photoshop to fully coded templates, these represent the best that the Envato Marketplace has to offer. In short, these products should be on every web designer’s shopping list!”


by epicera

Finalist 9: Urbanism

“The Urbanism collection contains the best urban inspired themes, web elements, and design templates.”


by Arezoo

Finalist 10: Rokband Pack

“Rock band objects, textures, graphics, product mock displays, and more.”


by iLLeT

Each one of these finalists will win a single use license to every file in their collection!

But who will win US$3,500 for their ultimate creative set-up? That’s up to you! So pick your favorite and vote for it below!

Please note that only one vote per user will be registered. Voting will close at 12 midday, Australian Eastern Standard time on Monday the 6th of July. The winner will be announced the following day, and then all finalists and winners will be contacted via email to receive their prizes!

So stay tuned to find out who wins Envato’s biggest competition ever!



June 25, 2009 | Filed Under Html, Photoshop, Print Design, Web Design, Web Trends | Comments Off 

How To Create a Post Apocalyptic Photo Manipulation

In this tutorial, I’ll show you how to create a post apocalyptic manipulation using adjustment layers, vector masks, and some special effects. Let’s get started!

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 or a larger version here.

Preparation

In this tutorial, we’ll create the final image using mostly pictures I took. Many of which are shown below. They are available to Psd Plus members. None Plus members will need to search for compatible images to follow this tutorial. I also used an image of a gas mask, some crack brushes, curvy brushes, mist brushes and a grunge texture. You will also need an image of a person sitting down for Step 8.

Step 1 - Blending the Background

Create a new document. Open the pictures with the bottom part of the background and drag them into the new document. As you can see, I used the right picture twice to make the manipulation wider.

Now we have to blend all the parts nicely together. Start with the picture on the right. Add a vector mask to the layer. You can find the button Add Vector Mask in the palette Layers (If you don’t see the palette just click F7 on your keyboard and it will show up).

Open the Brush Tool (B). Pick a soft, round brush, then choose solid black color and lower the Opacity on about 25%. Start painting over the parts of the image which should be hidden. Do the same also with the middle and right part of the background.

Using a vector mask instead of the eraser tool (which is so popular among Photoshop users) is better because you can very simple reverse all steps you did. You just choose white for the color and paint over the areas which you want to see again. With the eraser tool there is no way to recover. The right part of the background is very bright. Fix it by adding an adjustment layer with Levels and set it as shown.

Right click on the adjustment layer and choose the option Create Clipping Mask. Thanks to clipping mask, the adjustment layer effects only one layer under itself. After this step, your image should look like that shown below.

Step 2 - Blending the Sky

It’s time to add sky. Open the proper sky photos and drag them into the manipulation. Blend them in the same way as you did with the bottom part, by adding in a vector mask to each layer, then with a black brush paint over the parts which should be hidden.

Be very careful with blending because if you don’t do it accurately the whole manipulation will never look realistic.

Step 3 - Coloring The Background

In this step, we’ll desaturate the picture and add a decent cyan tinge. Click on the top of the layers and add an adjustment layer Hue/Saturation. Lower the Opacity to -100. Then add an adjustment layer of Color Balance and set it as shown.

The sky seems a little boring. To make it more dramatic, add an adjustment layer of Brightness/Contrast and turn up the contrast a little. You can not use a clipping mask because the sky is made of two layers. But you can reach the same effect if you fill a vector mask of adjustment layer Brightness/Contrast with black, then you paint over the sky with a soft, white brush. The vector mask should look like the one below.

After this step your manipulation should look like the image below.

Step 4 - Fixing Perspective

In this step, we’ll fix the perspective of the manipulation. Grab the Marque Tool (M) and select the whole manipulation. Now go to Edit > Copy Merged (Command + Shift + C). Paste (Command + V) the merged image.

Click on this newly created layer and add apply Filter > Distort > Spherize…set the value Amount to 20%, then press OK.

Step 5 - Adding Nuclear Power Station

Open the picture of the nuclear station, then select the station area out of it using your preferred method. You don’t have to care about the smoke much, but be very careful with selecting the cooling towers. After you’re satisfied with selecting, grab the Move Tool (V) and drag the station into the manipulation.

Add the vector mask to the layer with the station, then using a soft brush paint over the areas you want to have hidden. You can change the opacity and size of the brush as often as you need, as the result will look more realistic.

Just a little notice: it is better to use a lower opacity and paint over the layer more often. Thanks to it, there will be no hard edges and blending will look very realistic.

Step 6 - Adding the Power Station

Now we’re going to add the power station. It would be hell to select all the parts with the Lasso Tool or something similar to that. Instead I will show you a little trick.

Open the picture of the plant. Duplicate the layer. Now go to Image > Adjustments > Threshold. Set the Threshold Level to value 162. After this you should have something similar to the image below.

Grab the Magic Wand Tool (W). Make sure that you have unchecked all options as shown.

Now simply click on a black area and it will create the mask. Hide the layer with a threshold effect. Click on the layer with the station and drag it into the manipulation. Easy, isn’t it?

Since the plant is in the background, it should be little lighter. To do that I lowered the opacity a little. You can do the same or increase the brightness, or something else you usually use.

There are some unwanted wires toward the right part of the picture. Grab the Eraser Tool (E) and simply erase them.

Step 7 - Adding the Car

Open the image of the car and separate it from the background. You can use any method you are comfortable with. I usually use the Lasso Tool, but there is no rule. After you’re done, drag the car into the manipulation. If you look carefully at the bottom part of the car, there is some mess to clean up.

Add a new layer above the layer with the car. Grab the Brush Tool (B), then choose a soft, round brush with a low Opacity. Pick some color similar to the shadow color under the car, then paint carefully over the mess. Now add an adjustment layer of Brightness/Contrast, set value of brightness to -20, and set the value of Contrast to -15.

Step 8 - Adding a Person

Search for a picture with a sitting person to use. I used one I had on file. Then separate it from the background and drag it into the manipulation. You don’t have the similar picture as I did so you may have to do some minor edits a little different than I will show you, but the overall process should be similar.

As you can see, the woman is too saturated, with bright highlights and too much contrast. To fix that, add an adjustment layer of Hue/Saturation above the layer, then set Saturation on -65. Now create a clipping mask from the layer.

There is too much highlights and contrast is also high because the photo was taken with internal light. This type of light is very hard and does not fit the global lighting of this manipulation. Add a new adjustment layer of Levels and set it as shown.

Now click on the vector mask of the adjustment layer and fill it with solid black color.

Grab the Brush Tool (B). Choose a small, soft, round brush. Lower the Opacity to 20%. Choose a white color and paint carefully over the highlights you want to have darker, as shown below.

It would be better to have the trousers a little bit darker. Add adjustment layer Levels and set the Input Levels on: 0, 0,57, and 255. Fill the vector mask with black and paint with white over the trousers.

The whole picture of person should be darker. Add a layer mask of Brightness/Contrast and set the Brightness to -25 and Contrast to -15.

Step 9 - Gas Mask

Download the photo of a gas mask here. Separate it carefully from the background and drag it into the manipulation. Go to Edit > Transform > Warp and change the grid to fit better on the face. The result should look similar to the image below.

In the original stock photo the light source comes from the top, but it does not fit to this manipulation. To fix that, add an adjustment layer of Levels above the layer with the gas mask, then set the values as: 0, 0,38, and 255. Create a clipping mask. Fill the vector mask with black and then paint with a white brush over the areas which should be darker.

Now we are going to add more cyan colors. Add an adjustment layer of Color Balance and set similar to that shown below.

The final step in the gas mask adjustment is to lower the opacity. Add an adjustment layer of Hue/Saturation and set the Saturation on -40. Also, create a clipping mask from it.

Step 10 - Adding the Flower

Open the picture of the flower. Separate it from the background and drag it into the manipulation. As you can see, the flower doesn’t have a nice yellow color like the final image. To improve that add adjustment the layer Color Balance and set it as shown.

Increase the contrast a little (add an adjustment layer of Brightness/Contrast and increase the value of contrast) and lower the saturation (with an adjustment layer of Hue/Saturation). Don’t forget to create clipping masks from all the adjustment layers you’ve just added!

According to me, it would be nice to separate the flower from the background a little more by adding an outer glow. Right-click on the layer with the flower and choose Blending Options. Now check Outer Glow and set it as shown.

After you’re finished you should have something like the following image.

Step 11 - Painting the Steam

Don’t worry, you won’t have to paint anything difficult here, just one nice curve. If you have some big problem with doing that you can download some curvy brushes (for example here and use them). This is just a quick step. The results should look like the image shown below.

Alright! The basic part of this manipulation is done! We’ve placed all the main elements. Now we’ll work on some details and especially lighting. But before that, let me show you how your layers should look so far.

Step 12 - Adding Global Lighting

In this step, we are going to change the global lighting to create a more dramatic atmosphere and catch the viewer’s attention.

Click on the layer with the background and fixed perspective. Duplicate the layer. Now go to Filter > Render > Lighting Effects, and set it as shown.

Add an adjustment layer of Levels. Set it on these values: 0, 3,74, and 255, then press OK. Create a clipping mask and fill the vector mask of the adjustment layer with black. Grab the Brush Tool (B), choose a white color, lower the opacity of the brush, then paint over the areas of horizon in areas where you feel should be lighter.

Step 13 - Destroying The Nuclear Station

According to me the nuclear station should be a little more destroyed and dirtier. At first we will fix the cleanness issue.

Install the dirt brush. If you don’t know how, you can look at this tutorial. Create a new layer and paint dirt over one of the towers. Now go to Edit > Transform > Warp, and adapt the dirt to the shape of the tower.

Erase unwanted parts and lower the opacity. Do the same with the second tower. Now install the crack brushes. I used these. Create a new layer and paint some nice cracks.

Step 14 - Fix the Lighting On The Nuclear Station

Since we added quite strong light in the middle of manipulation, we have to fix the lighting on the station.

Add an adjustment layer of Levels above the layers with the nuclear station. Set the Input Levels to: 0; 1,25; and 255. Fill the vector mask with black and choose a nice soft, round brush with low opacity. Now paint over the areas which should be lighter. If you are not sure, look at the picture below for reference.

Step 15 - Adding the Mist

In this step, we’ll add a pretty mist to the background. Download some mist brushes (I used these) and install them. Now add a new layer above the layers which are in the background (the layers with power and nuclear station, not the layers with car and person). Grab the Brush Tool (B), choose a white color, lower the opacity of brush, then paint the mist.

If mist does not look natural, then try lowering the opacity more, or change the blending mode to Screen.

Step 16 - Adding the Lens Flare

As you can see in the previous picture, light on the horizon isn’t still the same as in the final image. We will fix it with adding a lens flare.

Create a new layer above the layer with the mist. Fill it with a solid black color. Go to Filter > Render > Lens Flare, then choose the type of flare you wish. I used Lens Type 105 mm Prime. Press OK. Now change the blending mode of the layer to Screen, or Lighten, and then lower the Opacity to about 40%.

Step 17 - Shadows Under the Person

In this step, we will add shadows under the person and on the front of the car. Remember that shadows are very important and if you look carefully around you, you’ll realize that everything has some shadows. Keep this in mind when creating any of your manipulations!

Create a new layer under the layer with the person. Now Command-click on the thumbnail of the layer with the person. It activates the mask of the person.

Fill the selection with a solid black color and deselect it. Grab the Move Tool (V) and move the shadow down.

Now go to Filter > Blur > Gaussian Blur…and set Radius so it will nicely blur the edges of the shadow; I set it on 4 px. Lower the Opacity to 70%. Grab the Eraser Tool (E), then erase every parts of the shadow except the shadow under the leg.

Now do the same procedure as before, but lower the Opacity even more to about 40%. Very well, the shadows under the leg are done! Now we have to add shadows under the person’s back. The process is still same, except you move the shadows to the left and not down. After this step, your manipulation should look similar to the image below.

Step 18 - Shadows In Front Of The Car And Person

There have to be shadows in front of the car and person because of the light source and background. We will fix it very easily though! Add a new layer under the layers with the car and person. Grab the Brush Tool (B), then choose a big, soft, round brush. Pick a black color and lower the Opacity to about 30%. Now just pain in front of the car and person. Easy isn’t it?

Step 19 - Adding the Highlights

In this step we will add some highlights to increase the contrast and make the whole scene a little more dramatic.

Add an adjustment layer of Levels on the top of all your layers. Set the Input Levels to these values: 0; 2,30; and 208. Press OK. Now fill the vector mask of the adjustment layer with a solid black color. Grab the Brush Tool (B), choose a white color and lower the Opacity to 25%. Paint over the areas which should be highlighted. If you’re not sure, then look at the image below for reference.

Step 20 - Shadows Once Again

Now we’ll add some more shadows. Add an adjustment layer of Levels again and set the Input Levels to: 17; 0,60; and 255. Fill the vector mask with black and with a white brush paint over the areas where you think there should be more shadows.

Step 21 - Final Adjustments

During this and next step we will create the atmosphere which you can see in the final image. Add an adjustment layer of Color Balance on the top of your layers, then set the Color Levels as: -3; +4; and +15.

Now we’ll add a pretty vignette around the edges. Add an adjustment layer of Levels, then set the Input Levels as: 0; 0,50; and 255. Now fill the vector mask with black and then paint with a soft, white brush around the edges.

Open some grunge texture (I used this one) and drag it into the manipulation. Change the blending mode to Overlay and lower the Opacity to 25%. Texture adds some more contrast to the picture.

I changed the Color Balance once more and lowered the opacity, but it depends on your personal taste. Below you can see final two adjustments.

Conclusion

Well, that’s all. I hope that this tutorial was useful for you and you’ve learned some new techniques, or you’ve found inspiration for your own photo manipulations!

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



June 24, 2009 | Filed Under Html, Photoshop, Print Design, Web Design, Web Trends | Comments Off 

Making Sense of the Warp Tool - It’s All About the Lines

Every now and then a project comes along that challenges me to use one of Photoshop’s tools more than ever. This particular image was part of a series of ads I was working on with photographer Richard Radstone for a clothing line based in Colombia, South America.

Each of the ads featured a surreal representation of a different region of Colombia and was created by compositing various stock images and photos Richard shot for the job. The challenge with this one was to wrap an accordion around the palm tree like a giant snake.

Introduction

As we started to work on the image we quickly realized that accordions just don’t do what we wanted and so we had to shoot it piece by piece and then warp, morph and tweak each piece into position to create the illusion. This was challenging enough, but after we had accomplished this the client then said “Oh, did we tell you it has to be red? And there needs to be a diamond pattern on the side?” Oh Boy!

It was while adding the diamond pattern that the Warp Tool really started to make sense to me and so transitions us into the tutorial. What we’re going to do is pick the image up from the part where we have the accordion sections in place with the red coloring applied to the sides. Then we’ll go step by step through adding the diamond pattern to the side of the top wrap. By the end you should have a pretty good understanding of how the Warp Tool works and will be a Warping Master as well.

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.

Step 1

To begin open the file “Tree-Accordion_Part1.psd located in the “source” files for Psd Plus members. As you can see, this image has a few layers in place already, such as the background, palm tree and the five accordion rings with the top section needing to have the diamond pattern added.

The Layer Groups used here help to keep all the layers organized and easy to find. Some very complex composite images can have over a hundred layers so it’s important to keep them organized. A side benefit to using the Layer Groups is that if we use the Normal Blending Mode, then any Adjustment Layers we create within that Layer Group will only affect the Layers inside the Layer Group, something we’ll use as a last step to adjust the lighting of the tree and accordion so it fits better into the background.

Step 2

Open the file “Diamond_Pattern.psd,” located in the “source” files for Psd Plus members. Copy the Layer named “Diamond Pattern” to the first file we opened.

Step 3

Position this Layer at the top of the Layers in the Layers Palette. Then make another copy of the Layer by clicking on it’s Thumbnail in the Layers Palette and dragging it down to the icon at the bottom of the Palette that looks like a page with its corner folded over, as shown below. This will make a copy of the Layer that will be named “DiamondPattern copy.”

Step 4

Now drag this Layer in the Layers Palette to the position that is just above the Layer named “End Accordion.” We’re just about ready to start warping the pattern on the accordion section at the top of the tree. To make sure you have the right layer chosen click the Eyeball icon on and off for the “End Accordion” Layer. You should see the accordion piece at the top of the tree and can turn it on and off.

Use the Move Tool to roughly position the Layer named “Diamond Pattern copy” over the accordion piece at the top of the tree.

Since we shouldn’t need all eight diamonds for the side of this section let’s simplify things a bit by deleting four of the diamonds from the copy of the Layer we just made. Do this by choosing the Marquee Tool (M), then click-drag over the first four diamonds, and hit the Delete key to get rid of the extras.

Step 5

Now the fun begins. Make sure you have the “Diamond Pattern copy” Layer chosen in the Layers Palette, then bring up the Warp Tool by going to Photoshop’s menu and choosing Edit > Transform > Warp. That should give you something that looks like the image below.

The grid of lines and dots you see imposed over the diamond pattern are the control lines and handles for this tool. These lines and handles are what we’ll be using to manipulate the diamonds into place on the accordion. At each corner there is a control point as well as a control handle that is somewhat similar to the control handles used by the Path Tool.

Then each of the other lines and points represent the places where we can grab the image to push or pull it into place. Pretty easy, eh?

Before we jump in though, there are a few things to keep in mind. The grid formed by these lines and points determine how the layer we’re working with will be warped. In many ways, the Warp Tool is all about the lines here. If we want the pattern to look correct, then we’ll have to pay careful attention to how these lines and points are placed.

So in the case of warping our diamond pattern, this means making sure the lines on the ends of the grid stay fairly straight and that the lines on the inside follow the plane of the accordion, while staying fairly straight to each other as well.

Step 6

The first thing we need to do is get the diamonds closer to the right position on the accordion. In this case, it’s really helpful to know that we can easily switch from the Warp Tool to the Free Transform Tool on the fly just by holding down the Control Key (on the Mac) and clicking anywhere in the image. This brings up a submenu that shows the various options for the Transform Tool. Simply choosing Free Transform here allows us to then drag the diamonds roughly into place without worrying about any unwanted warping happening along the way.

Once we’ve dragged the pattern and given it a little rotation so the left edge roughly follows the left edge of the accordion bellows we should have something that looks similar to the image below.

Step 7

Once again Control-click to bring up the submenu and choose Warp. That should give you the result shown below.

By doing this without applying any of the steps yet, we keep the placement of the control grid aligned with our diamond pattern in such a way that makes it easier to work with. Note that the lines follow our pattern and now all we need to do is make the lines follow the surface of the accordion we’re placing this on. If we had applied any of the transform steps before this, the lines would line up straight to the borders of the image, not the layer we’re working with.

Step 8

Starting with the corners for the left side, position each corner’s Control Point along the left edge of the accordion bellows. Pay attention to the Handles that come off each corner. These Handles affect two things: the Bend of the line and the placement of the two lines in between the outer edges. You want to be sure the left edge is straight, not bent and that the two lines in between the corners are evenly placed.

Step 9

Now go to the right edge of the Diamond Pattern and do the same thing there. Again pay attention to the Handles and the placement of the lines in between. Just dragging the points to the corners of the accordion will give you something like this (you do need to guess a little about just where the far corner of the accordion lies).

Step 10

See how the Handles at the corner of the Diamond Pattern hang out and make the pattern look bent and distorted? Dragging each one so that it points straight at the other corner will straighten that out.

Note that we have not yet worked on the long sides, this part is just about getting the corners placed correctly.

Step 11

Now we’ll work on those long sides. First grab the top line somewhere around the middle and drag it up so it roughly follows the top curve of the accordion’s side, as shown.

Step 12

Repeat this for the top line that runs down the middle pattern and pull it roughly into position on the accordion. Keep in mind that this line should follow along the curve of the top line. Since it controls the placement of the upper-middle part of our pattern, it’s relationship to the top line is very important to keeping our pattern looking correct.

Step 13

Now take the lower-middle line and move that up into place. Again keep in mind its relationship to the other lines controlling the warp. As you adjust this line you may need to also nudge the line we just moved as well, as shown.

Step 14

The next line we’ll move is the line along the bottom. This should follow the bottom line of the accordion’s side. As you do so you’ll need to move the other lines as well to keep everything looking straight. With a bit of tweaking and nudging you should see something like this.

Note: I want to take a moment here to remind you that the secret to getting this work right is all about paying attention to the lines
for the Warp Tool. If all the longer horizontal Control Lines follow the same curve and keep the right relationship to each other, also the shorter vertical Control Lines stay straight and pretty much parallel to each other, then the diamond pattern should look correct.

Step 15

If necessary shift the positioning of the lines and the diamonds to get the diamonds to lie just right on the accordion. Moving the short lines closer to each other will make the diamonds look more squeezed and moving them farther apart will stretch them out more. You want to make it look like the diamonds are the same size keeping in mind the changing perspective of the accordion as it wraps around the tree.

Here is an example of what it looks like when the diamonds are not positioned correctly.

When you’re satisfied with the positioning of the pattern hit Enter to apply the transformation. Since we just finished a complex move with the Transform Tool, it’s probably a good idea to save the file right now. I like to save versions as I go along so I can go back if necessary. To do this use Photoshop’s Save As command and change the name to something like: “Tree-Accordion Part2.”

Step 16

Now that we have the diamonds positioned on the accordion, we’ll need to let some of the accordion show through so it looks like it’s really a part of the accordion and not just sitting on top of it. To do that we’ll add a Layer Mask to the layer we just warped. Next use the Brush Tool to carefully paint black in the Layer Mask where we want the accordion to show through.

Add the Layer Mask by clicking on the Add Layer Mask Button at the bottom of the Layers Palette, as shown below.

Step 17

We want the dark ribs on the side of the accordion to show through so we’ll paint black in the Layer Mask along those areas. One trick that can make it easier to see where you need to apply the black paint is to lower the opacity of the diamond pattern to something like 70%, just enough to let you see through the diamonds.

Since the ribs are straight lines, we can get Photoshop to do most of the work of painting the lines for us. To do this first choose a Brush that’s about 5 pixels wide, this should match the width of the ribs pretty closely. Then with the Brushes Palette open, make sure the button for Other Dynamics is turned off. This turns off the Pressure Sensitivity for the Brush.

Now all we need to do is click on one end of a rib, then while holding down the Shift Key click on the other end of the rib. Photoshop will automatically draw a straight line from the first click to the next one. Be sure to let go of the Shift Key in between ribs and work your way across the side of the accordion. Change the size of the Brush if necessary as you work, just make sure to keep Other Dynamics turned off.

After the ribs are done, you may need to paint out any areas where the diamonds extend past the side of the accordion. When you’re done painting set the Opacity of the layer back to 100% and it should now look like the following image.

Step 18

We’re almost there now. For the accordion this is looking pretty good, but we could add a little sense of lighting to the diamonds to really make it look like it’s in the environment.

To do this, add a Curve Adjustment Layer and then Clip that Layer to the “Diamond Pattern copy” Layer we just worked on. To Clip this Adjustment Layer to the Diamond Pattern, first be sure you have the “Diamond Pattern copy” selected in the Layers Palette, and then go to the Photoshop Menu and choose Layer > New Adjustment Layer > Curves. Also, make sure the Use Previous Layer to Create Clipping Mask option is checked.

Step 19

Since the Diamond Pattern is white, we can darken it down a bit by opening the Curves Window, clicking on the White Point in the Curve Window and then pulling it down a little bit as shown.

Step 20

Now choose a large, soft Brush - something around 120 pixels. Set the Foreground Color to Black and make a diagonal stroke in the Layer Mask for the Curves Layer we just made. This will hide the effect of the Curve making the ends of the pattern darker than the middle creating the illusion that it is catching the light in the scene. It should look like the image below.

Step 21

Zooming out to look at the whole image we should now see all the bands of the accordion have the diamond pattern applied.

All that needs to be done now to finish off our image is to selectively darken the tree and the accordion so it looks more like something being backlit by the sunset. To do that we’ll add another Curves Adjustment Layer to the top of the Layer Group named “Accord-Wrapping.”

Again you can do this by going to the Menu in Photoshop and choosing Layer > New Adjustment Layer > Curves. Since the Blending Mode for the Layer Group was set to Normal, we don’t need to worry about the Adjustment Layer affecting the rest of the image.

With the Curves Dialogue open, grab a spot on the Curve and drag it down as shown.

Step 22

Don’t worry that the whole tree and accordion look too dark. Just like we did with the Adjustment Layer that darkened the pattern we just placed on the accordion, we’ll selectively brush this darkening out to keep it mostly off the accordion. Doing this will also help give the image a little more sense of lighting, which is critical to making everything look just right.

Here is a shot that shows the Layer Mask and the image at the same time so you can see how the Mask I painted looks. The green shows the areas where I painted black in the Layer Mask to hide the effect of the Adjustment Layer. This is a great time to experiment with your own sense of lighting so go ahead and paint away!

Conclusion

When you’re all done you should have something very similar to the final image shown below.

So with this exercise we’ve worked with Photoshop’s Free Transform Tool to rough the diamonds into place, switched to the Warp Tool and used that to twist the diamonds so they fit just right, (remember it’s all about the lines), and then we’ve used a couple of Curves Adjustment Layers to
add a sense of lighting to our elements bringing them all together in the
scene. Looking at the position of the sun, I’d say it’s not a bad day’s work.

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



June 23, 2009 | Filed Under Html, Photoshop, Print Design, Web Design, Web Trends | Comments Off 

Next Page →