Today we’re going to take a look at an essential piece of any serious web designer’s skill-set: wireframes.

You’ll learn why wireframes are so important, how to use them correctly, and the differences between wireframes and mockups/prototypes.

By the end of this article you should be persuaded to use wireframes in your next web design projects, and understand the benefits of doing so.

Let’s get started!

What are Wireframes?

Wireframes are black and white layouts that web designers use to outline the specific site features, size and page elements placement, navigation, and conversion areas of a web site.

In layman’s terms, we can say that a wireframe is more or less like a blueprint of the site which enables you to view the structured placement of components without any design treatments.

Today, the majority of web designers are using wireframes in their designs in differing ways. Wireframing plays an important role in the website design process, especially if the project is more complex. Web design freelancers usually find wireframes to be very useful, especially when communicating with their clients as they enable them to view their ideas more easily.

Not all wireframes have to be super neat! Just get your layouts down on paper. (Image source: schhen – Deviantart)

Importance of Wireframes in Web Design

Any web design process relies heavily on Wireframing.

Creating a more complex web site requires wireframes to help in clarifying the exact requirements of each page type of the site. Wireframes form an important part of a designer’s documentation to provide visual conceptualization to the client that can never be captured in a text-only document.

The following are some of the most important reasons why web designers need to use wireframes:

Wireframes show the web site architecture visually

A site map is more theoretical, especially a larger one, compared to wireframes.

Using wireframes instead of site maps is seen as the best way to start the real concrete visual process of a web design project.

With wireframes, the web designer is able to turn the abstract flow chart into something more tangible and real without distractions.

Wireframes enable the clarification of web site elements

Many clients find it hard to understand what designers mean when they say “light boxes”, ”product filtering”, ”Google map integration”, ”news feeds”, ”dynamic slide show”, among other features. Wireframes allows you to communicate clearly with your client, showing him/her where these site features will be on the specific pages, how they will function, and their usefulness to the site. This will enable the client to focus on other useful elements of the project.

Wireframes identify ease of updates

Wireframes are considered to be very useful to clients who may want to purchase a content-managed site. They normally enable the client to find out how well their sites will handle content growth. For instance, if right now you have only 20 products being offered but you want to offer over 100 in the next six months, you will require your website to have the ability to accommodate such growth without leading to some deformities in the site design and usability.

Wireframes save time on the project process

Wireframing plays a big role when it comes to saving time in the web design process. With wireframes, the designer’s designs are well-calculated and the team knows exactly what they are building. As a result, creating site content becomes much clearer and easier.

Additionally, the designer avoids hacks in the later stages of the process.

Experience shows wireframes work

Since designing and creating a web site is a complex process, Wireframing is one of the most important parts of the web design that should not be overlooked.

Wireframes are very cost-effective as they enable you to save a lot of time that might have been lost as a result of revising a high-fidelity comp; they are easily revised or discarded. Wireframes serve to give your page layouts a wonderful starting point, as well as a concrete foundation.

This search engine web site wireframe shows a more traditional approach to wireframing. (Image credit: Blazeeboy – Deviantart)

The differences between Wireframes, Prototypes, and Mockups

Although wireframes, prototypes, and mockups are totally different things, they are often used interchangeably. The reason why many people think that they are one thing is that there sometimes exists some overlap between them. They basically serve a slightly different purpose when it comes to the web site design process.

What are wireframes?

Wireframes refer to the fundamental illustrations of the components and the structure of a web page; this basically defines the first stage in the web design process.

What are mockups?

Mockups basically define the visual design components of the web site; they closely resemble the actually final web site design. They generally include all the page elements such as the graphics, and typography, among others. Simply put, mockups are image files.

What are prototypes?

Prototypes are generally semi-functional page layouts of the comp/mockup that provides a higher fidelity foretaste of the actual website being created. This phase follows the programming business logic of the web site. They are usually used to enable the clients to click around and get an idea of how the site will work in the end.

So what order are these used in?

In web design, the wireframes come first, followed by either the prototypes or mockup models; what actually follows after wireframes will wholly depend on the type of website the designer is working on.

This wireframe shows how all wireframes don’t need to look identical. As long as the elements on the page are clear then the wireframe is effective! (Image source: Llendowyn – Deviantart)

Creating Wireframes

Before creating a wireframe, you should find out what elements your client wants to include on the web page. Such information is usually obtained during the project interview. The most common elements that are normally included on a web page are the navigation, banner, blog feature, as well as a news section.

After determining the web page elements, sketch the potential layouts of the site. It is highly recommended to try a variety of placements for each element. Come up with the best and optimal decision on what will effectively present the information in a user-friendly way, as well as being aesthetically pleasing.

Scan the sketched layouts into the computer. Even though this step is optional and can be left out, it actually provides you with a great idea from which to start.

Choose and open the best graphic design program that interests you. A majority of web designers use Adobe Illustrator or Photoshop, although any other drawing programs are sufficient to place and label the shapes.

It is good to keep saving the file with explanatory names every few minutes to limit the chances of loss should something happen to the folder while you are working on the wireframe.

Draw boxes equivalent to the size as well as the shape of the boxes in your sketch; in the majority of programs, web designers use the rectangle tool for this step.

Let each box have its own solid fill color. It is recommended that you use monochromatic or neutral colors to ensure that the wireframe is simple with some lighter and darker values to help in illustrating the layout. Move each box to its proposed place in the layout. Before moving the box, remember to select the arrow tool; this will help you avoid drawing a different box over the already existing one.

Label each box the name of the layout’s section that it represents. Ensure that each label has the size in pixels. You may want to add a small description of the section’s function within the label.

Finally, save the wireframe in a format that will enable you to share it with the client. The most commonly used formats are the JPEG or PDF format.

Create Wireframes Easier Using These Web Tools

Web wireframe tools are meant to help the web site designer with the wireframe construction process. The most common web wireframe tools include the following:

Axure

Axure is one the most excellent web wireframe tools and is frequently used by industry professionals such as web designers. It works well on both Windows and Mac operating systems. This tool enables you to create the user interface for an online app. It also allows you to collaboratively create web site designs with other team members. It uses a drag-and-drop interface; this simply means that you only need to select the element you want to use and move it to the correct location. Other useful features of this program include the capability to generate the HTML prototypes from your site wireframe design. Additionally, this tool helps you to save the site documentation in a Microsoft Word document. Although this software program has a free trial download, you will be required to buy its full version for more functionality.

Visit Site

iPlotz

This tool has the ability to enable you to generate completely functional wireframes that will allow you to test how the web site will function when launched. iPlotz offers ways to create prototypes for the software application, as well as the web site. With this software program, you are allowed to create up to 5 frames for free though you must buy it in order to create more web wireframes; it costs $15 per month. Among other features of iPlotz is the ability to invite people to view and leave comments on a wireframe components library and your wireframes. With this tool, you can include commonly used elements without creating them yourself. In addition, it enables you to manage the website development team even after the project is done. This software program is basically meant for industry professionals such as the web designers.

Visit Site

MockupScreens

This software program is meant for industry professionals such as web designers as well as for beginners. It enables you to generate the mockups of the applications, as well as the web site. It uses a graphic user interface (GUI) which enables you to create web sites even if you have no knowledge about coding or programming. It allows you to use simple checkboxes and radio buttons to create the web site. It also enables you to create presentations that you can share with your clients and team members. MockupSceens have the ability to help you determine how well your apps will function in specific scenarios. You can purchase the full version of this program for about $99.95 and there is a one month free trial version.

Visit Site

To wrap up

Wireframing is a widely known process amongst web designers, though only a few of them use it. Although it seems to take a lot of time, it is very helpful in the long run. Wireframing is highly recommended by the most successful web designers and should never be overlooked in the design process to ensure its success.

What’s your opinion? Do you use wireframes for your web design projects? If not why not?

Final Image

This is the final image that we’ll be creating.

Step 1

Download this image http://www.sxc.hu/photo/1104824

Don’t think you’ve already made it as we will be tracing over the image!

Open the image in Photoshop and re-size it to what you want. I re-sized mine to 1800 px by 2546 px.

I lowered the opacity of the penguin image to 50% as it’s much easier to see your paths and curves your creating.
To do this, simply duplicate the layer, delete the bottom, original layer and then set the opacity to 50%.

Step 2

Create a new layer, name it ‘Body’ and select the Pen Tool (the shortcut for the Pen Tool is ‘P’).

Make sure that Paths are selected.

Step 3

To start with we will work on the outline of the body.

Left click on the very top of the head. A small square box will show. This is called an anchor point. It’s the beginning of the path.

For larger areas I like to create larger lines as I feel it creates a smoother curve rather than creating lots of anchor points, but, if you want, you can create smaller lines and use more anchor points. Try both methods and see which works best for you.

When you come to do smaller and more detailed areas, e.g. the foot, you will have to create smaller lines and curves.

Step 4

Click (and hold) on the start of the arm.

Now drag your mouse down and you will notice that the line will bend.

Drag and release your mouse button when the line curves round and fits round the edge of the head.

If a line isn’t as good as what you want it to be, no problem, the Pen Tool is very forgiving.

One option is to delete the last anchor point you made. To do this, press Delete. This will delete the last anchor point. After you’ve deleted an anchor point you must remember to click on the last anchor point you made or else it will create a new sub-path.

You can also edit the angle of the line by choosing the convert point tool. When you created the curve you probably noticed these two lines appear. These are called guide/direction lines. They control the angle and length of the curve.

With the Pen Tool still selected, hold down the key ‘Alt’ (this is the shortcut key for the Convert Point Tool) and hover over the top direction line. (you’ll notice that your cursor won’t change until you hover over the ends of a direction line or an anchor point).

Now if you click and hold the top direction line you will be able to edit the curve and make any fine tuning to it.

The last way of editing paths is holding down the ‘Ctrl’ key. This enables you to move anchor points and direction lines and again make any edits to your lines and curves.

If you want, play about with a few lines to get to grip with what you can do.

Step 5

The bottom direction line will be long and like this, if you have not edited it.

If you try to continue and click on the outline of the arm with the Pen Tool, the line will not go where you want it to!
This is because the direction line is large and creates a large curve (basically a long direction line = a long curve, a short direction line = a short curve!).

Hold down the ‘Alt’ key, click and drag the bottom end of the direction line upwards so it sits reasonably close
to the anchor point and follows the direction of the arm.

Now you should be able to draw around the arm using these different methods to edit the line/curves.

Here’s what mine looks like.

Following the information in Step 3 to 5 you should now be able to draw around the whole body.

Remember,

Keep hold of your mouse and drag in a direction to curve the line
Long direction lines = long curves
Short direction lines = short curves
If you delete an anchor point, click on the last one you created
Use the convert point tool to shorten/lengthen the direction lines
Zoom into the areas that are quite detailed and need small curves and lines
It does not matter if your lines are not perfectly traced around the edges
Take your time!

Step 6

As you finish the right arm you’ll be able to click on the 1st anchor point you made. This will close and finish the path.

Your image should look similar to this.

Now change your foreground colour to black.

Now right click (with the Pen Tool still selected) and this box will appear.

Click on ‘Fill Path’ and use these settings.

The outline of the Pen Tool will be around the body so press delete to get rid of this.

Your image should now look like this.

Step 7

Click the small eye symbol next to the Body layer to hide that layer.

Create a new layer above the layer ‘Body’ and name it ‘Stomach’. Use the Pen Tool to draw around the outline of the white part of the body.

When you’ve finished and closed the path, set the foreground colour to white, right click and choose Fill Path. Click delete to get rid of the pen outline.

Now your image should look like this with the body layer showing.

Step 8

Create a new layer on top and name it ‘Left Eye’. Hide the other layers accept the original penguin image.

As the eye is a circle you can either create it with the ellipse tool,

or,

draw around the left eye with the Pen Tool and fill it with the colour Black.

After you’ve finished the left eye, duplicate the layer (Ctrl & J/Apple Option Key & J) and move it over to the other eye. Name this layer, ‘Right Eye’.

Here’s how the image is looking with all the layers visible.

Step 9

Create another layer on top and name it, ‘Beak’. Again hide the other layers so you can trace around the beak.

Use the Pen Tool to draw around the beak and set the foreground colour to #fbdf26. Fill the path and then press delete to get rid of the pen outline.

Step 10

Delete the background layer (the original penguin image) and make all your layers visible. I added a layer filled with the colour white at the bottom and cropped the image so the penguin was sat neatly in the centre.

Here’s the final image that we’ve created. I hope you’ve enjoyed the tutorial.

Final Image

These are the final images that we’ll be creating:

Introduction

The photographs produced by most digital cameras need some degree of sharpening, even when working with a high-end camera bearing a sophisticated sensor. So a clear understanding of sharpening process and its application within Photoshop is essential for creating that perfectly focused crisp image.

What is Digital Sharpening?

Loosely saying sharpening is a technique for defining the outlines of an object more prominently. Sharpening a digital image means making the edges of the image or edges of the objects within the image more pronounced. The process is carried out by enhancing contrast between pixels or more precisely between lighter and darker pixels. This edge contrast increment process is defined within neighboring pixels or adjacent group of pixels. Edge contrast is also known as local contrast or precisely acutance. Sharpening exaggerates the edges by increasing the contrast and creates a highly defined edge with sharp transitions between light and dark, which tells us where an object begins and ends.

Why do we need to Sharpen?

Inevitably, every photograph needs some sharpening to bring out the detail that otherwise gets lost in translation between camera, computer, and print. Sharpening works by increasing the contrast around the edges of your image to bring it more into focus, adding detail to your image. Sharpening enhances the definition of edges in an image. Whether your images come from a digital camera or a scanner, most images can benefit from sharpening.

Dark Side of Sharpening

Sharpening doesn’t compensate for bad focus. Also no amount of sharpening will make up for depth-of-field problems. The best way to get a sharp photo is to shoot a sharp photo in the first place. Nothing can take the place of an optically sharp image. Another thing is filter application is a destructive edit that alters pixels in an unchangeable way. But then, no perfectly focused image is going to “pop” without the appropriate amount of sharpening applied, either. Keep in mind that sharpening cannot correct a severely blurred image. Be careful; an over-application of sharpening creates harsh images with ragged edges and shadows. Over sharpening also tend to produce damaged pixels or “artifacts” and color fringing or “halos”.

Before you start

I have given the links to the images, if you want to follow along. My advice will be, use your own images to get a clear understanding of the principles and their applications. But remember this tutorial is more of an exploration than rather being a process or steps tutorial. So don’t concentrate on the process or steps only to achieve a specific effect. But think more about it, why are we sharpening? How can we use the same principles in some other projects? What are the advantages? Now let’s start!

Common Workflow

We will always start working by duplicating the background layer. This way we will ensure a non-destructive workflow. Later if things are not looking the way they should be, then we can always delete the layer and start afresh. After the sharpen procedure we can further control the effect of the sharpen layer by adding a layer mask to it, which is visible in the below screenshot. It is also possible to adjust the sharpen effect by using the layer opacity or layer blend mode settings.

Let’s explore this process:

Sharpening Using Smart Filters

Without duplicating the background layer directly apply the Smart filter. Select the layer and choose Filter > Convert For Smart Filters, and click OK. Photoshop will automatically convert the layer to Smart layer and apply the Smart filter to it. Smart Objects preserve an image’s source content with all its original characteristics, enabling you to perform nondestructive editing to the layer. To expand or collapse the view of Smart Filters, click the triangle next to the Smart Filter icon, displayed to the right of the Smart Object layer. There you will find a mask is already attached with it, known as filter mask. Use filter masks to selectively mask Smart Filter effects by painting with a black paint brush within it. The advantage of smart filters are you don’t have to use a separate layer mask to control the sharpen effect later.
For this tutorial though we will take the traditional approach for the sake of maximum users’ familiarity, which is duplicating the background layer and then apply the filter on it. But feel free to follow the Smart object and then Smart filter process.

Photoshop’s Arsenal of Sharpening

Let’s take a look at some of the sharpening tools available to us in Photoshop.

The Sharpen Tool

Under the regular tools menu there is the ‘sharpen’ tool.

Sharpen Filters:

Under the filter menu there are several sharpen filters available to you. They are – Sharpen, Sharpen Edges, Sharpen More, Smart Sharpen and Unsharp Mask.

Another powerful filter, which we use for sharpening but is not known for its sharpening capabilities is the High Pass filter, hiding within the obscure “Others” filters group.

The Sharpen Tool

The Sharpen tool increases contrast along edges to increase apparent sharpness. The more you paint over an area with the tool, the more sharpening increases. The main advantage is you can use this tool locally like the Brush Tool.

Using the Sharpen Tool

Open the face.jpg image in Photoshop. Right click on the background layer and select Duplicate layer. Rename the layer as “Sharpen”. Select the Sharpen tool from the Tool Box. In the options bar choose a soft brush tip and set Luminosity as blending mode. Select Protect Detail to enhance details and minimize pixelated artifacts. Now click and drag over the part of the image you want to sharpen.

Though for this image we are using the Sharpen tool at 100% opacity, but ideally use low opacity and slowly build up the sharpen effect. As Sharpen tool tend to produce “halos” or color fringing around the edges, Luminosity blend mode is used to avoid that. Luminosity blend mode will only utilize the luminance data from the color blend but omit the color information. Below screenshot represents visible fringing in Normal Blend mode, which appears reduced after changing of Blend mode to Luminosity.

Sharpen Group of Filters

The Sharpen filters focus blurred images by increasing the contrast of adjacent pixels. Let’s explore them one by one.

Preparation before applying the filters

Never apply the filters directly on the image itself. Always duplicate the image by duplicating the background layer and then apply the filter on the newly created duplicate layer. The advantage is later on we can experiment with various blend modes and also apply a mask on that duplicate layer to control the effect.

Using the Sharpen and Sharpen More Filters

The Sharpen filter focuses a selection and improves its clarity. The Sharpen More filter applies a stronger sharpening effect than does the Sharpen filter. Both of them are basic filters with one shot operation. No option box available for further controlling the effect.

Appling Sharpen and Sharpen More Filters

Target the layer, then Filter > Sharpen > Sharpen or Sharpen More. To increase the effects apply the filters again with Ctrl + F.

Sharpen Edges

This filter finds the areas in the image where significant color changes occur and sharpen them. The Sharpen Edges filter sharpens only edges while preserving the overall smoothness of the image. There is the same disadvantage as with the previous two filters in that we don’t have any control over the amount, because there is no option box/ dialogue box.

Using the Sharpen Edges Filter

Target the layer, then Filter > Sharpen > Sharpen Edges.

Smart Sharpen

The Smart Sharpen filter uses the same algorithm as the Unsharp Mask filter. The Smart Sharpen filter also allows you to remove previously applied Gaussian, Lens, and Motion Blur filters. You can set the sharpening algorithm or control the amount of sharpening that occurs in shadow and highlight areas.

Using Smart Sharpen in Your Work

Open Fish.jpg image in Photoshop. Duplicate the background layer. Then Filter > Sharpen > Smart Sharpen. Select the Basic option if it’s not selected and change the amount to 300. Change the Radius to 3. Then click the Remove drop down list and select Lens blur to remove any camera lens blur. Gaussian Blur will produce results similar to Unsharp Mask. But Lens Blur will produce better quality for images with detail. Select the More Accurate check box for a slower but more accurate sharpening effect. Actually without the More Accurate option checked Smart Sharpen will perform more or less like the Unsharp Mask filter.

Understanding Smart Sharpen options

In advance settings you can adjust sharpening of dark and light areas separately using the Shadow and Highlight tabs. But first select the advanced option from above below the preview checkbox. Shadow and Highlight have three common parameters. They are Fade Amount, Tonal Width and Radius.

Fade Amount

Fade Amount will reduce the amount of sharpening separately in shadows / highlights. Higher amount of sharpening tend to reduce the amount of finer detail in the highlights / shadows, which we can protect with the use of ‘Fade Amount’ option.

Tonal Width

This option determines which tonal value will be affected by the ‘Fade Amount’. Smaller value will affect only the lightest highlights, whereas larger value of Tonal Width will affect a wider range of the highlights.

Radius

Radius option specifies the size of shadows/ highlights. Basically it determines the amount of the sample data, which will be used in the determination of the ‘Tonal Width’.

Sharpen without Shadow adjustment. Sharpen related grain is visible in the dark areas.

Sharpen with Shadow adjustment. Adjusting the Fade Amount removed grain from the dark areas.

Sharpen without highlight adjustment. Notice sharpen related grain is visible in the highlight areas.

Sharpen with highlight adjustment. Grain removed from the highlight areas by adjusting the Fade Amount.

USM or Unsharp Mask Filter

The Unsharp Mask filter, which is an advanced method of sharpening, is different than the basic sharpening methods. Unsharp Mask filter finds pixels that are different from the surrounding pixels, and then increases the contrast in the surrounding pixels. Basically this is done by finding areas of high contrast between pixels and then increasing that contrast.

Using Unsharp Mask Filter in Your Work

Open the face.jpg image in Photoshop. Then choose Filter > Sharpen > Unsharp Mask. Use 500 for the amount and 1.0 for the radius.

Radius

Use the radius to determine the number of pixels surrounding the edge pixels that affect the sharpening. A low radius means that the sharpening will be applied right next to the edge only. A larger radius applies the sharpening further out from the edge. For high-resolution images, a Radius value from 1 to 3 is usually recommended. A lower value sharpens only the edge pixels, whereas a higher value sharpens a wider band of pixels.

Amount

Amount determines how much to increase the contrast of pixels. For high-resolution printed images, an amount between 150% and 200% is usually recommended.

Threshold

Determines how different the sharpened pixels must be from the surrounding area before they are considered edge pixels. For instance, a threshold of 2 affects all pixels that have tonal values that differ by a value of 2. For example, pixels with tonal value difference 10 and 12 will be affected but not 10 and 11. The default Threshold value (0) sharpens all pixels in the image. In addition, you specify the radius of the region to which each pixel is compared. The greater the radius, the larger the edge effects. In other words, if a pixel is darker than the surrounding neighborhood, then the neighborhood is lightened even more.

In addition, you specify the radius of the region to which each pixel is compared. The greater the radius, the larger the edge effects. In other words, if a pixel is darker than the surrounding neighborhood, then the neighborhood is lightened even more. Use Threshold on grainy images to avoid sharpening grain in flat areas.

Consider the End Usage

Over sharpening an image produces a halo effect (color fringing or color halos) around the edges. The effects of the Unsharp Mask filter are more pronounced on-screen than in high-resolution output. If the final destination is print, experiment to determine what settings work best for your image.

Controlling the Sharpness

1. Sharpen your image on a separate layer so that you can resharpen it later if needed.
2. If you need to reduce image noise, do so before sharpening.
3. Sharpen your image multiple times in small amounts.
4. The amount of sharpening needed varies among output media.
5. Use a Layer mask to control the sharpen.

Practical Example 1: Sharpen an image with a Luminosity mask

This process involves by selecting a channel from the channels panel that displays good contrast than the others. As each channel contains only grayscale information, thus omitting unwanted appearance of color fringing or the ‘halo-effect’.

Step 1

Open the Banana.jpg file. Then in the Channels panel examine the channels for a channel with good contrast. Finding a channel with good contrast is essential for good luminosity mask. Here the red channel is showing good contrast between the banana and the background.

Step 2

Duplicate the red channel by dragging it over the ‘create new channel’ icon below the Channel Panel. You can also right click on the red channel and select duplicate channel. Ctrl click on the Red channel to load that channel as a selection.

Step 3

Then go to Layers panel and duplicate the background layer and rename it to “Sharpen”. Selection still loaded choose Select > Inverse or press Ctrl + Shift + I to inverse the selection. Then “Sharpen” layer targeted click on the Add Layer Mask icon below the Layer panel to create a layer mask based on that selection.

Step 4

Now make sure that Layer mask is not selected by clicking on the layer beside the layer mask thumbnail. Then Filter > Sharpen > Unsharp Mask and match the settings from the below screenshot. If needed it is possible to use Level command on that red copy channel to increase the contrast. We can also paint with a soft black brush within the Layer mask to hide unwanted area.

Practical Example 2: High Pass Sharpening

First let’s take a look at what High Pass filter does. This filter removes low-frequency detail in an image, retaining the edges and smoothing the other areas into a medium gray color. Then we will use a blend mode like Linear Light to use only the contrast data. One can describe this process as a non-destructive sharpen method also. Combined with a Layer Mask for controlling the sharpen effect, probably this technique is the most versatile.

Step 1

Open the face.jpg file in Photoshop. Duplicate the background layer by right click and select duplicate layer. Rename the background copy layer to “Sharpen”. Then change the Blend mode to Linear Light. Linear Light blend mode darkens or lightens the colors by decreasing or increasing the brightness, depending on the darkness or lightness of the blend color. Purpose of this blend mode is to enhance the image edges by making them more pronounced.

Step 2

Choose Filter > Other > High Pass. Play with the radius for a suitable sharpness effect. Low radius value will sharpen the edges only.

Step 3

Adjust the opacity of the layer if effect is too strong. You can also duplicate the layer to make the effect more prominent. For controlling the sharpen effect create a mask on the duplicate layer (by clicking on the Add Layer Mask from below the layer panel) and paint with a black color Soft Brush within the mask to selectively apply the sharpen effect.

Variation Using Smart Filters

For those, using Smart Filter procedure for High Pass, there will be slight variation than the previous Smart Filter operations.

Step 1

Open the face.jpg file in Photoshop. Then target the layer and choose Filter > Convert For Smart Filters, and click OK. Photoshop will automatically convert the layer to Smart layer and apply the Smart filter to it. Now Filter > Other > High Pass.

Step 2

But we need to apply Linear Light blend mode and there is no duplicate layer here. Expand Layer 0 to reveal the High Pass smart filter entry by clicking on the arrow at the right side. Besides the High Pass text there is a small slider like icon which upon double click will open the Blending Option (High Pass).

Dialog box. Change the Blend mode to Linear Light. If needed double clicking on the High Pass text will reopen the High Pass dialog box, where one can further adjust the High Pass value. For controlling the High Pass filter effect paint with a black paint brush directly within the Filter Mask.

Conclusion

From the above discussions of various sharpen techniques I hope that a clear understanding has been established. As well as the appearance of a fundamental question, i.e. which is the best technique? Unfortunately there is no best technique. The best technique depends on the complexity of the project, the level of the user and the amount of time one is willing to spend. But the most common method will be invariably the Unsharp Mask and Luminosity blend mode combination, which offer more flexibility and ease of use probably.

I have a confession to make… Whilst I have a long-standing history in Photoshop design and love creating great outcomes and tutorials, until recently I simply didn’t have that much knowledge about saving images for the web.

After learning to optimize images correctly using Photoshop the average size of my image files is less than 1/3 of what it was, with no noticeable loss of quality.

This is great news for you guys (as tutorials and pages on this blog should load considerably quicker) and it’s great for me as my bandwidth and hosting costs should plummet.

So… if this is something you haven’t paid due attention to in the past, follow this incredibly simple guide to optimize your images and not take up so much unnecessary disk space.

How to Optimize Your Images For the Web

First off, here is the image that we’ll be working with.

It’s an older image from a past tutorial of mine at PSDFAN:

Now, in the past I logically saved via file>save as:

After then choosing my file name and .jpg as the file type, I was asked to choose a ‘quality’ setting for the image. I know that many of our authors save in 12/12 quality, which is HUGE. However, even at 8, which is still ‘high quality’ (but the lowest you want before your image degrades too much) you’ll see there are file size problems:

You can see that the file size is still pretty huge, with this single image being over 200kb!

Optimize Images Using Photoshop’s ‘Save For Web’ Function

A better solution is to use Photoshop’s inbuilt ‘save for web’ option.

You can find this under file>save for web & devices.

A pop-up window will appear. Now don’t worry, there may seem like a lot of settings at first. However, you don’t need to worry about many of them:

All you really need to pay attention to is the upper-right options. Just check that your image is being saved as ‘.jpg’ and that the quality is ‘high’.

Under ‘quality’ you can also input a manual setting. The default is ’60′ which is what I used for my web-ready images. If you have an image that needs to look particularly sharp then of course you can go higher. This will still be a better option for the web than the regular method of saving images (which is meant more for print and offline uses).

As you can see, the new ‘saved for web’ outcome is just 64kb. That’s just 30% of the file size of the original ‘save as’ image!

Start Optimizing Your Images Today!

If you’re not already optimizing your images for the web then start today.

You’ll quickly get into the habit of it and your server, clients or blog readers will thank you!

Using Curves in Photoshop

If you’ve ever struggled to get your head around curves adjustments in Photoshop, you found the right tutorial. We’re going to look at using different points on the curve, what they represent, and using the different RGB channels to make specific colour adjustments.

This tutorial is part of a PSDFan series on professional retouching, and as a digital retoucher I spend most days using curves in one way or another. Once you have a grasp of the basics, you’ll have at your command a seriously powerful tool for editing your photographs.

First, here’s what your flat, basic curve looks like before adjustments;

I’ve marked the curve to show what each point represents. It’s a scale that represents the starting exposure level of your jpeg or RAW conversion. the bottom left point is the blacks in your image, the top right is the whitest point and a gradual scale of everything inbetween. The middle point represents the ‘midtones’.

If we raise a point on the curve it becomes lighter, or more exposed. Pull a point down and we decrease exposure. Clicking the middle of the curve and pulling the midtones up or down will lighten or darken the whole image, but will keep the black and white points where they are;

If we pull the black point higher, we lose the pure blacks;

And pulling the white point down we lose the pure whites;

You can experiment to add more points, for example you can increase midtone contrast with an S-curve;

We don’t just have to stick to luminosity values, we can use the dropdown menu in the Curves dialog box to affect the individual channels of Red, Green and Blue (RGB).

Be aware that each of these channels has a friend in the CMYK colourspace; decreasing blue will introduce more yellow for example. These relationships are;

Red-Cyan
Green-Magenta
Blue-Yellow

So if we remove green, the same thing happens as if we increased the magenta curve in CMYK mode;

These relationships exist in CMYK mode of course, so if you’re working with CMYK curves for print, you can simply decrease Cyan to increase Red.

You might see a lot of this kind of processing in magazines at the moment;

Notice how the black point isn’t completely black? And how there’s a lot of blue in the shadows? I’ll let you experiment with it

This is the third in a PSDFan series of professional retouching tutorials aimed at teaching good practice for advanced photo editing. Please also see the other tutorials in this series:

Healing Tutorial (Part 1)

Dodge and Burn Tutorial (Part 2)

Be sure to look out for the next part in this series: Working With Local Tonal Adjustments.

Professional Retouching Tutorial: Dodge and Burn (Part 2)

If you’ve completed the Professional Retouching – Healing tutorial with your chosen image, you’re ready to jump into the next step in your professional workflow, Dodging and Burning. This is an advanced retouching tutorial, so stick with it and keep practicing!

You may know the Dodge and Burn tools (O) alter local exposure, lightening or darkening your image in brush strokes. By using Dodge and Burn we’re going to smooth and perfect skin while leaving texture intact, which is of critical importance in professional work. If you’ve ever followed those blurry skin tutorials on other sites, this is definitely the article for you. Some may have refined their understanding of blurring to a high level, which is fine but it’s like spending years becoming so good at pitching a ball you can hit a batsman right in the face 95% of the time. It’s a skill, sure, but unless you change your technique you won’t make the pro team

Here’s an example of skin retouching using dodge and burn;

Rather than use the standard tools, there is a better, more controlled and less destructive way to dodge and burn by using Curves, and we’re going to use that method in this second part of the tutorial.

• Open your chosen image and start a new Curves Adjustment layer and pull the middle of the RGB curve up as demonstrated below.

• Name the layer ‘Dodge’, click on the white mask tab and press Ctrl+I (Cmd+I on a Mac) to invert it, turning it black.

• Start a second Curves Adjustment Layer and pull the middle of the RGB curve down as demonstrated below.

• Name the layer ‘Burn’, click on the white mask tab and press Ctrl+I (Cmd+I on a Mac) to invert it, turning it black.

Alongside each Curve below I’ve added blocked in red how each layer should look in the Layers palette when you’re finished, named and with a black mask tab.

I’ll reopen the image I began in part one to demonstrate.

Select a soft Brush set to around 1-4% flow, with your foreground colour set to white.

On the black masks you’re going to paint with white, showing the effect beneath gradually.

Click on the Dodge layer’s black mask and paint an area lighter, or click the Burn layer’s black mask to paint an area darker.

Remember the dark area at the side of the mouth from the first part of the tutorial? Simply paint it out with the Dodge layer;

With your Flow set to 1% you won’t see a huge change with every mouse click, it’s a gradual, controlled build-up. Gently stroke your brush across all the problem dark and light patches, switching between Dodge and Burn until you have a beautiful, uniform skin texture.

If you’re having trouble seeing what needs dodging or burning, open a Black & White Adjustment Layer and pull the Reds down far enough to add contrast;

See them now?

The rest is just time, a keen eye and practice. Here’s the original side by side with what we can achieve with heal, dodge and burn;

It’s subtle, it takes a lot longer than quick-fix blurring, but remember the bus stop analogy from part one. Good retouching is invisible, cut corners and every waiting traveller, driver and pedestrian on the high street will find out about it.

Professional results take time, but it’s worth it. Web-sized images only tell a small part of the story, but in print, you need to be perfect.

If you have any ideas for future tutorials, please comment below and let us know, I’ll be happy to explain the techniques behind any popular suggestions.

Remember, you can check out Part 1: Healing

Professional Retouching Tutorial: Healing (Part 1)

Welcome to the first in a series of tutorials on professional retouching. Ever wondered how commercial and fashion photographs have that beautifully flawless look?

Final Image

This two part tutorial will work towards creating this professionally retouched result:

It takes a while to master, but here are a few things to consider;

• Keep as much texture as possible, this means keeping your brushes small and avoid any tutorial that tells you to blur huge sections of skin!

• Develop an eye for what is and is not a blemish. Beauty spots should in most cases be left well alone, keep the character of the model as well as the texture.

• Know when to be subtle, know when to stop. It’s disturbingly common to find beginner retouchers who absolutely will not stop until their 40 year old subject looks like Megan Fox.

• If you’re hoping to retouch photos professionally for other photographers, respect their work. This means not making changes for the sake of it, always remember that the model was chosen for a reason, as were the clothes, backgrounds, lighting, only make major changes on request. Be invisible.

For examples, feel free to visit my own beauty retouching portfolio.

With those points in mind, here is part one, and the easiest in the series; healing with minimal evidence

And here’s the starting image I’m using for demonstration;

Always start with a high resolution image. Politely ask a photographer if you need starting images, large JPEGS are fine for now (if they’re less than 1Mb in size they’re probably too small). Photography forums are a great place to find portfolio work when you’re starting out, try not to use the same photographs as a thousand other people on the web. Develop an entirely individual portfolio

When you’re retouching professionally, remember that your client might be using their images for large print, imagine every eyelash out of place or stray hair on a bus shelter poster. It may not be noticeable in a web-sized image, but just imagine dozens of people idling at that bus stop every hour. Your perfect work might go unnoticed, but any flaws will certainly be picked up on!

One of the fundamental parts of the retouching process is the healing stage, and we’re going to look into that with this first tutorial. Open your image in Photoshop, and drag your Background Layer to the New Layer icon to create a copy of your image. This new layer will be our working copy, saving the original so we can always pull parts of it back if we need to.

Here I’ve decided to retain these beauty marks, but it’s always up to you to decide which to keep or remove, or even move slightly to improve composition;

Select your clone stamp (C) and zoom in to 100%. Use the Lighten blend mode to remove darker blemishes and Darken blend mode to remove lighter distractions. This way your clone tool will ignore the ‘good’ texture and only alter the problem pixels. Keep your brush as small as the blemish and use a hard brush (around 90%) to avoid blurry edges, Alt-click to select a local sample of good texture of a similar tone and carefully paint out any major blotches.

Zoom to 200% and deal with any smaller imperfections, including stray eyebrow hairs;

Once you’ve imperceptibly removed all major distractions and stray hairs you’ll start to notice the next problem to tackle; shadows and highlights that betray wrinkles and deep pores, skin depressions and bumps, and even tonal variations caused by digital compression.

This is where we’ll start off in the next PSDFAN professional retouching tutorial, using Dodge and Burn to achieve flawless, magazine cover results. And absolutely no blur filters!

In the meantime, keep practicing, I want you to come back for Part Two as clone stamp ninjas Pride yourself on every seamlessly perfect removal and every pixel rescued from the fate of large-brush slap-dash cloning. Remember the bus stop and make sure Mr. Eagle-Eyed waiting traveller never even knows you were there…

Check out Part 2: Professional Retouching: Dodge & Burn

If you are just starting out with Photoshop and commands like Apply Image make you confused then this tutorial is for you. Besides Apply Image it will give you an understanding of how Channels work and also some advanced application of Blend modes.

Final Image

These are the final images that we’ll be creating:

Introduction to Apply Image

There are a few tools in Photoshop that are often overlooked or misunderstood, either because they’re hidden away or because their use isn’t immediately apparent. Yet these tools provide smart and useful ways to perform various tasks in Photoshop. The Apply Image command is one of them, which doesn’t get used very often, even by users who have been using Photoshop for years.

In this tutorial we will explore Apply Image and its many time saving applications.

Before you start

I have given the links to the images, if you want to follow along. My advice will be, use your own images to get a clear understanding of the principles and their applications. But remember this tutorial is more of an exploration than rather being a process or steps tutorial. So don’t concentrate on the process or steps only to achieve a specific effect, which may be possible to achieve by some other techniques also. But think more about it, why are we using Apply Image? How can we use the same principles in some other projects? What are the advantages? Now let’s start!

Apply Image at a glance

On the surface, Apply Image is useful for blending images, for working with layer masks, and for image editing. But then if you dig deeper you will find that the real power of Apply Image is its capability of blending, enhancing and modifying Channel data.
Following is a list of various applications of Apply Image:

Now let’s take a look at the advantages of using Apply Image:

Never use Apply Image command directly on the layer itself. Always duplicate the target layer and then apply the Apply Image on the newly created duplicate layer. The advantage is later we can reject this layer and go back to the original layer. Moreover we can also apply a mask on that duplicate layer to control the effect.

Exploring the Apply Image Feature

The Apply Image command can blend two images together. Before starting to work with it, you need to understand these important rules about using this tool:

Case Study 1: Channel Data modification

You download an image from a stock photo site for your project. You like the image, but the problem is the photographer lightens the image too much. You check the channels and find that the red channel is almost white. You don’t have the time for a new image search. You try the usual procedures like level or curve adjustment and playing with the blend modes. Although the image is getting dark but the detail is not coming back. Another example is in the channels palette, you noticed one channel’s data is corrupted. You thought that if I could anyhow replace the channel data with data from another good channel, then this image would be fine. One more example is you are working with a small size or low resolution image without any choice. You are thinking if there is any process through which you can improve the quality of the image. So let’s try our first exploration with Apply Image.

Step 1

Open the “Female Rep” image in Photoshop. Click the channels palette and check individual channels. The red channel is almost white or blown up. Green channel a little better than the Red channel though there is scope for improvement. Blue channel is better than Green based on the contrast factor, but with some sign of data corruption. The corrupted areas are patchy looking.

Step 2

Click the Layer palette tab and Duplicate the background layer. Rename it “Red data”. Go back to the Channels palette and target Red channel by left clicking on it.

Step 3

Then from Image menu, Image> Apply Image and use the settings from the below screenshot. What we are doing here is blending the green channel data with the Red channel in Multiply mode. As Multiply blend mode darken the image, the resulting Red channel is dark with the good data from the Green channel. Now the Red channel is showing good amount of contrast, which is the sign of a good channel.

Step 4

In the Layers Palette change the blend mode of the “Red data” layer in to Luminosity. In Luminosity blend mode “Red data” layer is taking only the luminance (or Contrast) data from the top layer, but omitting the color shift data due to the previous channel blend. As a result the detail of “Red data” layer is increased. Now duplicate the “Red data” layer and rename it “Green data”. Let’s use the Apply Image on the Green channel associated with the “Green data” layer to increase the detail of the contrast data more.

Step 5

Go back to the Channels palette and target the Green channel. Then again apply Image> Apply Image and match the below settings. Now we are blending the Green channel data with the Green channel itself in Multiply mode. The Green channel is showing now much better contrast due the Multiply blend mode. This process is also known as Self-blending.

Step 6

Go back to the Layer palette and check the image again. As we duplicate the “Red data” and create the “Green data” layer without changing the Luminosity blend mode, the detail of “Red data” is more increased.

Step 7

The resultant “Red data” layer is looking a little dark though. So change the opacity of the “Red Data” and “Green data” to 20% and 60% respectively. Now the image is looking perfect. You can control further by adding separate masks to the “red data” and “green data” layers to hide selective areas. This way you can perfectly control that how much data your final output image is taking from them.

Case Study 2: Mask creation workflow

Creating masks for complex objects like hair or fur is always a dilemma to Photoshop users. We are always looking for the next fastest or simplest method. Apply Image works as a great mask making tool also. With this tool it is possible to rapidly generate a base mask, which you can refine later with other tools. So let’s take a look at the mask making capability of Apply Image. First we take a look at how to create a mask by combining data from two existing channels. Then we will create a mask directly in the layers palette with the Apply Image.

Example 1: Step 1

Open the “Girl Dancing” image in Photoshop. First duplicate the background layer and rename it “Hair mask”. Click on the Channels tab and check individual channels. Here Red channel is showing the best contrast between the dress and background, where as the Blue channel is displaying good contrast between the girl’s hair and background. So we will use data from both these two channels to create the final combined mask.

Step 2

Click on the Layers tab and create a new layer below the “Hair mask” layer and fill it with black, which we will use later for the mask quality check. Now click on the Channels tab and target the Red channel. Right click on the Red Channel and select Duplicate Channel. Target the Red copy channel and from Image > Apply Image and use the settings from below. Here we are blending the Blue Channel information with the Red Channel copy. After selecting the Subtract blend mode the Red copy channel will become almost black. Only the skin and hair (Light areas) area will become light to medium grey. As the Subtract blend mode darkens the output, so the result is predictable. Check the invert option. Now the background area is again white and light areas (skin and hair area) looking much darker. So now the target is to make the hair and skin area black. Then the figure will be a black silhouette. Let’s change the Offset value into -175, but keep the Scale value as 1. This will darken the girl figure into a complete black silhouette and the background will also become medium grey. Now the target is to use another blend mode which will make the black more strong as well as change the grey into white. The Overlay blend mode is capable of all these. Overlay Blend mode lightens or darkens depending on the base color. So light-grey and dark-grey will become white and black respectively. But for that Overlay Blend mode has to be used more than once.

Step 3

Again use Apply Image on the same Red copy channel. But this time uncheck invert and change the blend mode to Overlay Blend mode. Use the screenshot below as a reference.

Step 4

Repeat this process two more times. So after using the Overlay blend mode for 3 times the background is fully white. Though there are a few areas like the upper part of the hand which require further work. Though the objective of this example is to create a quick base mask, but still explore a little more. Select a hard brush and change the blend mode of the brush from the Option Bar into Overlay. Fix those areas by painting over them either with black or white. Overlay Blend mode will ensure that only light-grey and dark-grey will change into white and black. Change the Overlay Blend mode into Normal Blend mode and to fill some white (shiny part of headphone etc.) area within the black figure.

Step 5

Invert the Red Copy channel from Image > Adjustments > Invert to change the figure to white silhouette. Still Red Copy channel targeted, click on the Load channel as selection button (leftmost button), below the Channel Palette.

Step 6

Selection still active, click on the Layers tab and target the “Hair mask” layer and click on the Add Layer Mask button (3rd from left) below the Layers Palette.

Step 7

You can still tweak the mask by using Select > Refine Mask command. Check Smart Radius option and experiment with Radius, Smooth and Shift Edge options.

Example 2: Step 1

In this example we will directly create the mask on the layer itself with Apply Image. Thus omitting the Channel based mask creation process. Open “Kitty” image in Photoshop. Click the channels palette and check individual channels. Blue channel is showing the best contrast between fur and background.

Step 2

In the Layer palette duplicate the Background layer and rename it as “kitty mask”. Press D key to change the foreground and background colors to black and white. Then create a new layer below the “kitty mask” layer and fill with black. We will use this layer to check the quality of the mask. Now click the Add layer mask button below the Layers palette to apply a white or Reveal All type mask to the layer. You can also use Layer> Layer Mask> Reveal All to apply the same white mask.

Step 3

Target the mask thumbnail on “Background copy” layer by clicking on it and then, Image> Apply Image. Self-blend the “Mask channel” (blue channel copy) with the Blue channel and select Exclusion as the blend mode. Exclusion blend mode will make the background black and kitty in light grey. Actually Exclusion Blend mode subtracts either the blend color from the base color or the base color from the blend color, depending on which has the greater brightness value. As a result the white background is now black with the kitty rather dark. But if you check the mask thumbnail you will see that this step creates a grayscale mask in the thumbnail. All we have to do is to increase the brightness of the mask so there is only pure black and white and nothing else.

Step 4

Choose a soft brush and color black. Then start to paint in Overlay mode to change the white shadow area below the kitty’s paws into black. Do not rub; try to paint with even, individual and separate strokes. Otherwise the white fur edge will look very “pixel-sharp” and rugged because of the overlay mode.

Step 5

Again use Apply Image on the “Kitty mask” layer, but blend mode will be Linear Dodge (Add). Apply the same Linear Dodge blend twice more.

Step 6

Press Alt key and click on the Mask Thumbnail to check the mask only. Take a brush with white color and fill all the areas within the Kitty figure where some black is still left. You can still fine tune the mask if you want by using Select> Refine Mask. After finishing painting the mask, Alt-click again on the Mask thumbnail to go back to the masked image display mode.

Step 7

The image is ready for the final phase, which is color and contrast tweak and finally sharpen filter to sharpen the image.

Case Study 3: Creating Luminance Mask

Luminance mask is a kind of mask where we create the mask from the image itself by utilizing the luminance data of the image. Typically, we look for the brightest channel and use that channel data as a mask. It’s good for the selective application of filters like sharpen or blur. First example is quick glow creation process where we will use the Apply Image command to create the Luminance mask to control the glow amount. In the second example we take the Sharpen data and use the Apply Image command to blend that data with the same layer, where Sharpen filter has been applied.

Example 1: Step 1

Open the previous “Female Rep” image in Photoshop again. Go to the Channels palette and notice that blue is the darkest channel. Now go back to the Layers palette and duplicate the background layer. Rename it as “Glow” and change the Blend mode to Screen.

Step 2

From Filters > Blur > Gaussian Blur with an amount of 6 pixels.

Step 3

Now target the “Glow” layer and click on the Add Layer Mask button from below Layers Palette. Then click on mask thumbnail and from Image > Apply Image. We will use the Blue Channel in the Normal mode to create the mask image, which will act as the Luminance Mask. Alt-click on the mask thumbnail and check the grayscale mask image to notice that only the bright areas are showing the glow.

Step 4

Let’s further control the glow amount by applying the Apply Image command once again. But use Multiply as the Blend type to darken the grayscale mask image more. This is the final look.

Example 2: Step 1

We will use the same “Female Rep” once more. Open the file and duplicate the background layer and rename it as “Sharpen”. Apply Filter> Sharpen> Unsharp Mask. Use very high values like, Amount 500 and radius 1. Now if you look at the edges carefully, you will see a “halo-effect” around them. This is a common problem of high value Unsharp Mask. One solution is to apply Luminocity Blend mode. But let’s explore another method with Apply Image command.

Step 2

Target the “Sharpen” layer and click on the Add Layer Mask button from below the Layers Palette. Click on the layer mask thumbnail and then Image > Apply Image. Select Green in the Channel field and check invert option. We will blend the green channel in Multiply mode. But we also want to protect the edge and remove that common “halo-effect” associated with Unsharp Mask. Invert and Multiply mode will take care of these two issues. Now the “halo-effect” is gone and then replace by dark color, which is making the edges more prominent.

Step 3

To make the effect much stronger let’s duplicate the “Sharpen” layer. Below is the final image.

Case Study 4: Image Effects

We will explore two creative applications where Apply Image could be used effectively. First example is creating a complex blend between two images. In the second example we will see, how we can use an image as a mask for another image with Apply Image.

Example 1: Step 1

Open “Paint texture” and “Woman” image in Photoshop. We will blend the “Paint texture” with the “Woman” image to create a textured look. Click the “Woman” file tab to make it active. Now to use Apply Image both images must be of same size. Target the “Paint texture” file and Image> Image Size. Then keep the Image size dialogue box open and go to Menu> Window. You will see that at the bottom of the menus both the open files are listed and the active (or focused) file with a check mark before that as an indication.

Step 2

Now click the unchecked file name (i.e. woman.jpg) and notice that in the open Image Size dialogue box width and height values are automatically changed to match the exact size of “Woman” file. This is a handy trick to make two file equal in sizes quickly. Click ok in the Image Size dialogue box to accept the change.

Step 3

Then duplicate the background layer of “Woman” file and rename it as “Texture”. Target the “Texture layer” and Image> Apply Image and match the settings from the screenshot. We are blending the “Paint texture” file by using the Screen blend mode with the “Woman” file. The advantage of this Apply Image based process is that we are not creating a new layer.

Step 4

Now duplicate the “Texture” layer. We will further blend this “Texture copy” layer with the “Texture” layer. Change the Blend mode of “Texture copy” layer to Hue to create the final image.

Example 2: Step 1

Open the same “Woman” file. Now create a new blank file with transparent background, but with same settings matching the “Woman” file. Select Brush form the Tool box and open the brush type pop-up panel by clicking on the brush sample thumbnail to the right side of Tool Preset thumbnail. Then click the panel option arrow at the right side of the pop-up panel and load Wet Media Brushes from the list. Then select the 24 pixel Heavy Scatter Flow brush.

Step 2

Select black as the color and paint in the middle of the transparent layer to create an abstract shape like the screenshot below. Avoid painting at the edges to keep them transparent. Keep this file open for now.

Step 3

Target the “Woman” file and duplicate the background layer. Rename the layer as mask. Now create another layer between these two layers and fill it with white.

Step 4

Target the “Mask” layer and click on the Add Layer Mask button below the Layers Panel. Click on the layer mask thumbnail to target and then from Image> Apply Image. In the Apply Image dialogue box use the newly created Brush paint image itself as a mask. Select the Merged in the Layer field. Select transparency in Channel field. Keep the Blending field as normal, because we want to apply the blending through a mask. Select Mask and choose the image and layer containing the mask. Select the Woman.jpg in the Image field and “Mask” layer in the Layer field. In the Channel field select Blue. Select Invert to reverse the masked and unmasked areas of the channel.

Step 5

Observe that, the painted black area is acting as the mask now. As a result the white filled layer below that is the background now because of the Mask layer’s (the brush painted file) edge transparency. Below is the final image.

Conclusion

I hope that now you have gained a considerable amount of knowledge regarding Apply Image command and its various applications. Looking forward to see your own creative applications of Apply Image command.

Learn a fast and professional technique to create an Advanced Reflective Clear Style in Photoshop from scratch. Layer Effects and Styles are very versatile in nature because of their flexibility and editable nature. Another advantage is they are reusable. After creating a complex style you can save it and use it later on other projects. Moreover if we combine multiple Layer Styles then it is possible to create some really complex looking layer effects, but still maintaining each components editable nature. So if you are new to Photoshop or maybe using it for some times but still wondering about Layer Styles and how to control them effectively then this is for you.

Final Image

This is the final image that we’ll be creating in this tutorial:

Step 1

Open a new file in Photoshop with the following settings. Save the file as Adv Reflective Clear Style.psd. During work remember to frequently press Ctrl + S to save and update the file, which will help you in the long run.

Step 2

Double click on the Background layer to open the New Layer dialogue box. Change the name field to ‘Gradient bg’ and click ok. Now the layer is ready for Layer Style as it is not possible to apply Layer Style on a locked background layer. Double click on the ‘Gradient bg’ layer to open the Layer Style dialogue box and then click on the Gradient Overlay at the left side, below the Styles pane. In the Gradient Overlay area (Right pane) create a Radial Gradient with the following settings.

Step 3

Click on the Pattern Overlay at the left side and click on pattern pop-up panel (right side) to open the Pattern pop-up list. Then click the pop-up panel option at the right side and load Artist Surfaces. Use the ‘Stone’ pattern from Artist Surfaces Group. Now reduce the opacity to 10% because we need a faint trace of it. Again click on the Gradient Overlay category and change the Blend Mode to Multiply. This will create a blend with the 10% Pattern Overlay below. Next we’ll add an Inner Glow to make it look more interesting.

Step 4

Inner Glow add glows that radiate from the inside edges. We’ll use this to make the edges of the gradient more dark. Now click on the Inner Glow category at the left side and match the settings from the screenshot below.

Step 5

To create that distorted dot pattern in the background, first we have to create a custom shape and save it as a pattern. Then we’ll use that shape to generate the dot pattern. First create a new file with following settings:

Step 6

Create a new blank layer (Ctrl + Shift + N). Select the Elliptical Marquee Tool and in the Option Bar click the Style drop down menu and select Fixed Size. Then in Width and Height field type 45px. Click on the upper left corner of the layer to create a circular marquee selection. Press D key to change the foreground and background colors as black and white. Then fill the selection (Alt + Backspace) with black and deselect by pressing Ctrl + D. Shift click on the background layer to select both the layers. Then in the Option bar click on the Vertical Centers and Horizontal Centers buttons to center align the circle layer. Now delete the background layer as we don’t need it anymore. Then Edit > Define Pattern to define this circle as a pattern with the name “circle_45px”. This pattern will be saved as a new pattern in the pattern drop down list. You can close the file now without saving as there is no relation between the newly created pattern and this file.

Step 7

Now create a new blank layer in the ‘Reflective Clear Style’ file and fill with white. Double click on the layer to open the Layer Style option box. From the styles at the left click on the Pattern Overlay Style and match the settings from the below screenshot. Click on the Pattern Pop-Up Panel to open the Pattern List. The “circle_45px”pattern will be at the end of the Pattern Pop-Up List. Click and drag on the layer directly with the Move Tool to position it the way you want. The difference between Edit > Fill and Pattern Overlay of Layer Style is you can change pattern position in case of Pattern Overlay as it is ‘live’ or editable in nature. But the problem is Layer Styles will never work on blank layer. A filled layer is essential for layer styles. Our goal is to blend this pattern layer with the layer below (Gradient bg). As we applied the pattern as a layer style it is not going to blend properly with the layer below. So to blend it we must ‘fix’ the layer style.

Step 8

Create a new blank layer below the pattern layer and from the layer panel option choose Merge Down. This will ‘fix’ the layer style into normal layer. So the layer style is not ‘live’ or editable anymore. Rename the merge layer into “Circle pattern distort”. Now we’ll apply a distort filter on this layer. We want to create a 3d looking bulge in the middle of this layer which will gradually diminish or blend towards the edge. It’s a simple process. All we need is a circular marquee selection and then apply the Spherize filter. But there is no falloff setting in the Spherize filter dialogue box. You can only adjust the Mode and the Amount. The solution is to apply Feather on the Elliptical Marquee selection. Feathering blurs the edges of the selection to create a softer transition, which we’ll use as a fall-off here. So first create a large perfectly circular selection with Elliptical Marquee Tool. Press Shift + Alt for a perfect circle originating from the center of dragging. You can also press the Spacebar simultaneously to reposition the circle while you are still dragging. Use the screenshot below as a guide.

Step 9

Selection still active choose Select > Modify > Feather with amount 50 pixels. Then Filter > Distort > Spherize with amount 100% and mode normal. Now you can see a bulge in the middle which is smoothly blends towards the edges. Change the “Circle pattern distort” layer blend mode to Overlay and reduce the layer opacity to 20%. For a more interesting effect invert the layer from Edit > Adjustments > Invert. The background is now complete.

Step 10

Select Custom Shape Tool (U) and in the Option Bar click on Open Custom Shape Picker and it’ll open the Custom Shape pop-up panel. Click the arrow (panel option) at the right side of the pop-up panel and load Ornaments. Then from the Custom Shape List at the left side select Hedera 2. Click and drag to create a new shape layer with the hedera shape. Change the tool into Move Tool (V). Then in the Layer palette left click on “Hedera 2” layer to target that layer. Now press shift key and left click on the “Circle pattern distort” shape layer. Alignment buttons will be active in the Option bar when more than one layer is selected. Then click on the Vertical Centers and Horizontal Centers buttons to center align the “Hedera 2” layer.

Step 11

Ctrl click on the “Hedera 2” layer to load the shape as a selection. Turn off the visibility of the layer by clicking on the eye icon (Visibility toggle button) at the left side of the layer. Now create a new layer on top of it by clicking on the Create a new layer button (second from right) below the Layers panel (Or press Ctrl + Shift + N) and fill it with 50% gray color. Rename this layer into “Plastic style”. Double click on it to open the Layer Style dialogue box. Let’s start building the main Plastic Layer Style. First in the Blending Option section, reduce the Fill Opacity to 0%. This will make the Plastic Style transparent or clear like glass.

Step 12

Let’s use the Bevel and Emboss to add various combinations of highlights and shadows. For Bevel and Emboss use settings from the screenshot below. In the Shading section, for Highlight Mode select Linear Dodge for a much stronger highlight than Screen blending mode. Also for the Shadow Mode use Color Dodge to simulate at the edge of the shape that light is passing through a translucent object. Below the Bevel and Emboss is the Contour of Bevel and Emboss, which will basically define the edge or shoulder of the Bevel. Click on the Contour Pop-Up panel and select Gaussian type from the contour list.

Step 13

Now click on the Inner Glow and use the settings from the screenshot below. Notice the use of Darken as the Blend Mode to produce a darker color blend.

Step 14

Outer Glow creates glow that spreads from the outside. We use this to create a darker outside area to make the clear style more prominent. Match the settings from the screenshot below. Blend Mode is Darker Color to produce a partial darker color blend. So there will be brightness variation in the outer glow region.

Step 15

Inner Shadow adds a shadow that falls just inside the edge. It’ll add volume around the edge of the shape. Use the settings from the screenshot below. Here Blend Mode is Multiply to produce a very dark outer edge.

Step 16

Drop Shadow adds a shadow that falls behind the shape. But here Drop Shadow is not creating shadow. The purpose of the Drop Shadow here is to create that bright light is passing from the edge of a translucent object look.

Step 17

Satin creates interior shading variation that produces a glossy finish. We use this to define the reflective glossy nature of the surface. Color Dodge as the Blend Mode is helping to do that by creating bright surface reflections. In the contour use Ring – Double for lots of light reflections but for subtlety reduce the Opacity below the Blend Mode to 15%.

Step 18

The base style is now complete. We’ll create two more duplicates of this style and combine them to produce a more complex effect. Now open the Styles Panel (Window > Styles) and click on the Panel Option at the upper right corner. Select New Style and type a name in the next New Style dialogue box. Click ok to save the style for future use. Below is the screenshot after finishing the basic Plastic style. For saving style check the second screenshot.

Step 19

Right click on the “Plastic style” layer and choose Duplicate Layer. Rename the duplicate layer as “Plastic highlight”. Double click on the layer to open Layer Style dialogue box and uncheck everything besides Bevel and Emboss and Satin. For Bevel and Emboss match below settings. Keep the Contour (Below Bevel and Emboss) as it is.

Step 20

Now click on the Satin Style and use settings from below. Contour is Ring – Double, but this time with much higher opacity.

Step 21

This is after finishing “Plastic highlight” layer.

Step 22

Duplicate the “Plastic highlight” layer and rename into “Plastic sheen”. Double click on the layer to open the Layer Style dialogue box. In The Bevel and Emboss match the settings from below.

Step 23

Below are the Drop Shadow settings. The purpose of this Drop Shadow is to boost the light passing from the edge look more.

Step 24

This is after finishing the “Plastic sheen” layer.

Step 25

The Plastic style is complete now. But let’s tweak it little more. Target the “Plastic sheen” layer and press Ctrl + Shift + Alt + E to create a copy merged layer on top of it. This process is known as Copy merged, which makes a merged copy of all the visible layers in a new layer. Rename it to “Upper reflection”. Duplicate the layer and rename it to “Floor reflection”. Drag or reposition the “Floor reflection” layer below the “Plastic style”. Reduce the opacity of the “Floor reflection” layer to 40% and blend mode to Multiply. Now target the “Upper reflection” layer. Lower the opacity to 50% and change the blend mode to Overlay. Below is the result.

Step 26

Let’s create the glow now. We can create a blank layer on top of the “Upper reflection” layer and use a soft brush to paint the glow spots. But let’s explore another precise technique which will produce a much better output. First turn off the visibility of the “Circle pattern distort”, “Upper reflection” and “Floor reflection” layers by clicking on the eye icons (Visibility toggle button). Then target the “Plastic Sheen” layer by left click on it. Now press Ctrl + Shift + Alt + E to create a merged layer of all the visible layers on top of it. Rename the Copy merged layer into “glow sharp” and drag it above “Upper reflection” layer. Then Image Adjustments > Desaturate to change the layer into grayscale or rather remove all color information. Then Image Adjustments > Levels and match the settings from below. Basically we are trying to separate the brightness information only and turning everything else into black.

Step 27

Change the layer blend mode to Linear Dodge (Add). Check the very precise and sharp crisp shaped glow on top of the highlight areas. Linear Dodge (Add) removed the dark colors keeping only white glow areas visible. Then duplicate the “Glow sharp” layer by right clicking on it and choose Duplicate layer. Rename the duplicate layer into “Glow blur” and drag it down below the “Glow sharp” layer. Then Filters > Blur > Gaussian Blur with radius 5 pixels to produced a soft and blurred version of “Glow sharp” layer.

Step 28

Ctrl + click on the shape thumbnail of “Hedera 2” shape layer to load the hedera shape as a selection. Create a new blank layer on top of “Circle pattern distort” layer and rename as “Shadow”. Fill the layer with black and double click to open the Layer Style dialogue box. Apply a Drop Shadow style with the settings from below screenshot. Reduce the layer opacity to 50%.

Step 29

Congratulations, Advanced Reflective Clear Style is now complete. Below is the final image. Also check the final screenshot of the Layer Panel after that.

Today I have a quick video tip for you.

Have you ever struggled when working with adjustment layers, and needed to make one set of adjustments effect a range of multiple layers (but not your entire canvas)?

This is an issue that used to really frustrate me, and I know some of you still struggle with this same problem.

Check out the short video below and I’ll walk you through how to apply a single adjustment layer to multiple layers (but not your entire document).