Photoshop Essentials: Understanding Drop Shadows

Adobe Photoshop includes Layer Styles, a number of automated effects that you can apply to layers, including drop shadows, glows, beveling, and embossing, as well as a color fill effect. Layer styles allow you to edit applied effects dynamically without having to create a smart object version of the image layer first.

Adobe Photoshop includes Layer Styles, a number of automated effects that you can

apply to layers, including drop shadows, glows, beveling, and embossing, as well as a color fill effect.
Layer styles allow you to edit applied effects dynamically without having to create a smart object version of the image layer first. This means that you can apply editable effects to a selected image, shape, or type layer without permanently altering any pixels.

Each layer style contains its own settings; however, many of the controls are available for more than one effect and they operate in the same way. The best way to become familiar with them is to experiment. Apply a Layer style, play around with the control settings, and use the Preview option to decide whether you like what you see. You’ll notice as you experiment that many of the controls are self-explanatory and the dialog is very intuitive.

Applying effects to layers is easy. Either double-click on a layer to open the Layer Style dialog, or go to menu Layer>Layer Style. Alternatively, you can click Add Layer Style button at the bottom of the Layers palette (the one with the fx icon), and choose an effect from the list.

Some things to take note of when working with layer style effects and the Layer Style dialog:
- Layer styles cannot be applied to the Background layer.
- Layer styles can be applied to only a single selected layer at a time—not to multiple selected layers or to layer groups.
- Layer styles are attached to the layer. Therefore, when you move the layer in the Layers palette, the effects tag along.
- Type layers remain editable even after a layer style effect is applied.
- Layer styles can be copied from one layer to another.
- Adobe Photoshop displays applied Layer style effects as items in the Layers palette.
- Clicking the eye icon next to each effect’s name in the Layers palette temporarily disables the layer style. Click the eye next to the word Effects to temporarily disable all the applied layer styles for that layer.
- Lowering the Fill percentage in the Layers palette reduces the Opacity of the layer, but not the appliedLayer styles.
- The Global Light option in the Layer Style dialog box tells Adobe Photoshop to apply the same angle to all direction-dependent effects, such as Drop Shadow, Inner Shadow, and Bevel And Emboss. The idea here is to simulate consistent real-world lighting.
- Combinations of layer style effects can be saved for later use in the Styles palette.

Take a close look at how Drop Shadows work:

Drop Shadow applies a basic drop shadow—not a perspective drop shadow—to the images, type, or shapes that are contained within the layer. Adobe Photoshop allows you to specify the color, opacity, blend mode, position, size, and contour of the effect.

Applying effects to layers is easy. Either double-click on a layer to open the Layer Style dialog, or go to menu Layer>Layer Style.

Alternatively, you can click Add Layer Style button at the bottom of the Layers palette (the one with thefx icon), and choose an effect from the list.

Once the Layer Style window opens, pick the Drop Shadow, apply settings and click OK.

The top part of the Drop Shadow settings allow you to set a blending mode for the effect as well as the colour of the shadow. Just double-click the black rectangle to bring up the Color Picker. You can also move the slider to alter the opacity of the shadow.

Use the Angle circle to set the angle of the light source. Whatever angle you choose will be in relation to the original layer shapes. If you keep the Use Global Light option checked, the effect will use the current angle setting from Layer>Layer Style>Global Light.

At the risk of sounding obvious, use the Distance slider to set the distance (in pixels) of the drop shadow in relation to the original layer shape. The Spread option allows you to control where the shadow starts to fade, while the Size slider controls the size of the shadow, again in pixels.

The Quality area of the dialog allows you to set different contours. These beauties control the edge shape of the shadow and can dramatically alter the effect. Keep the Anti-aliased box checked to soften the edges between the shadow and other parts of the image, and also experiment with the Noise slider.

When working with Drop Shadows, it’s worth keeping the Layer Knocks Out Drop Shadow option checked. This will prevent the shadow from showing through layer pixels that have a low Fill opacity

Tip: To use the same Drop Shadow settings on another layer, drag the Drop Shadow layer in theLayers palette to the other layer. When you release the mouse button, the shadow attributes are applied.

No related posts.

Photoshop Essentials: Retouch and Healing Tools

Photoshop offers a large selection of tools and features for retouching photographs and images. In this tutorial, you’ll learn how to use the common touch-up tools.

Spot Healing Brush Tool

The Spot Healing Brush is primarily used to quickly remove blemishes, imperfections or other unwanted elements from an image. To use it, paint over an imperfection you’d like to get rid of using a suitable brush (brushes can be selected and modified in the options bar). The Spot Healing Brush Tool will automatically try to repair the imperfection by sampling the surrounding area.

Careful! Although the Spot Healing brush can be a great tool for quick fixes, it’s not always guaranteed to work if the area surrounding the imperfection is busy. Generally speaking, the surrounding area should be an approximate match in color & texture to what you want to take place of the unwanted element in your image.

Healing Brush Tool

The Healing Brush Tool performs a similar function to the spot healing brush tool mentioned above. Instead of automatically trying to determine the lighting, shading, and texture from the surrounding area, the healing brush tool lets you manually select a source, and then paint over an imperfection. To select a source, hold alt and click the desired part of the image. Then paint over the area you wish to replace. As with the Spot Healing Brush Tool, settings such as brush size can be controlled in the options bar.

Patch Tool

With the Patch Tool, an entire area can be repaired with pixels from another area. Just like the healing brush tool, the patch tool will try to correct lighting, shading, and texture. To use the patch tool, first draw a selection with any of the selection tools (or the patch tool, which will function as a lasso tool). Then, using the patch tool, drag that selection over the destination you want to use to repair that area.

Clone Stamp Tool

The final tool we’ll cover in this tutorial is called the Clone Stamp Tool. The Clone stamp tool allows you to paint with a sample of an image.

Keep in mind that you are not healing/repairing an image when you use the Clone Stamp Tool. Therefore, lighting and shading will not be maintained when you paint over an area. What you see is literally what you get when you paint from a given source, making it very useful in certain situations.

Blur & Sharpen Tools

The Blur and Sharpen Tools allow us to manipulate edges by making them softer or harder. They do exactly what you would expect them to do; blur and sharpen.

Both tools have similar attributes such as Strength (increase or decrease the strength of the tool, or how much it will blur) and the brush, all of which can be adjusted in the Options Bar for each tool. To use the blur or sharpen tool, simply set up the brush to your specification, hold down the mouse button, and hover over the areas you’d like to alter in your image.

You should have a pretty good feel of the basic retouching tools by now. The next step in mastering Photoshop is usually learning how to use the painting tools to compliment your photo remastering abilities!

Photoshop Essentials: Photoshop Color Replacement Tool

Some tools don’t get enough attention, this tool might be one of them. You could compare it somehow with the Healing Brush, although there is a difference. This tool works like a regular paint brush, it manipulates the color on your image while the underlying texture stays unaffected. Because of this, you can apply a color change in a more precision way.

If you select the tool in the Toolbox, you'll get to see the various options in the Options bar like different Modes to work with in which the Replace Color Tool can be applied: Hue, Saturation, Color and Luminosity. The Hue will apply the replacement in the most subtle way, while the Color mode might result is a far too vibrant effect.

Sampling determines the source for the color replacement. "Continuous" means you will be continuously sampling as you go. "Background Swatch" uses the background swatch as a pre-defined sample color. Only areas containing the current background color will be replaced. "Once" will replace the targeted color only in areas containing the color that you've first clicked.

You also have Limits options. "Contiguous" will replace colors that are contiguous with the color immediately under the pointer "Discontinuous" will replace the sample color under the pointer wherever you go. "Find Edges" will replace connected areas containing the sampled color while preserving the sharpness of the shape edges.

The Tolerance is a bit like with other tools, the higher the percentage the broader the range and the more colors will be replaced. Check the antialiasing option to get softer edges, although it could give you a less precise result. You can use the "Find Edges" options to limit the antialiasing.

The foreground color will be used as your new color that will replace the unwanted color.

BEFORE AND AFTER

THIS IS WHAT I DID:

• choose the "Once" option for the more dangerous areas and the "Continuous" for the safer areas
• used the "Hue" mode for a more subtle replacement (the others will create pretty drastic results)
• used the "Color" mode in combination with a less vibrant color to enhance the pink color of the shirt
• used the "Background Swatch" sampling option to resolve the grey areas

CSS and HTML 20: CSS Basics- Putting It All Together

You should already have an HTML file like the one made at the end of the HTML Beginner Tutorial, with a line that we added at the start of this CSS Beginner Tutorial, linking the HTML file to the CSS file.

The code below covers all of the CSS methods in this section. If you save this as your CSS file and look at the HTML file then you should now understand what each CSS property does and how to apply them. The best way to fully understand all of this is to mess around with the HTML and the CSS files and see what happens when you change things.

body {
 font-family: arial, helvetica, sans-serif;
 font-size: 80%;
 color: black;
 background-color: #ffc;
 margin: 1em;
 padding: 0;
}

/* By the way, this is a comment */

p {
 line-height: 1.5em;
}

h1 {
 color: #ffc;
 background-color: #900;
 font-size: 2em;
 margin: 0;
 margin-bottom: 0.5em;
 padding: 0.25em;
 font-style: italic;
 text-align: center;
 letter-spacing: 0.5em;
 border-bottom-style: solid;
 border-bottom-width: 0.5em;
 border-bottom-color: #c00;
}

h2 {
 color: white;
 background-color: #090;
 font-size: 1.5em;
 margin: 0;
 padding: 0.1em;
 padding-left: 1em;
}

h3 {
 color: #999;
 font-size: 1.25em;
}

img {
 border-style: dashed;
 border-width: 2px;
 border-color: #ccc;
}

a {
 text-decoration: none;
}

strong {
 font-style: italic;
 text-transform: uppercase;
}

li {
 color: #900;
 font-style: italic;
}

table {
 background-color: #ccc;
}

CSS and HTML 19: CSS Borders

Borders can be applied to most HTML elements within the body.

To make a border around an element, all you need is border-style. The values can be solid,dotted, dashed, double, groove, ridge, inset and outset.

border-width sets the width of the border, which is usually in pixels. There are also properties for border-top-width, border-right-width, border-bottom-width and border-left-width.

Finally, border-color sets the colour.

Add the following code to the CSS file:

h2 {
 border-style: dashed;
 border-width: 3px;
 border-left-width: 10px;
 border-right-width: 10px;
 border-color: red;
}

This will make a red dashed border around all HTML secondary headers (the h2 element) that is 3 pixels wide on the top and bottom and 10 pixels wide on the left and right (these having over-ridden the 3 pixel wide width of the entire border).

CSS and HTML 18: Margins and Padding

margin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outsideof the element, whereas padding is the space inside the element.

Change the CSS code for h2 to the following:

h2 {
 font-size: 1.5em;
 background-color: #ccc;
 margin: 1em;
 padding: 3em;
}

You will see that this leaves one-character width space around the secondary header and the header itself is fat from the three-character width padding.

The four sides of an element can also be set individually. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left are the self-explanatory properties you can use.

The Box Model

Margins, padding and borders (see next page) are all part of what's known as the Box Model. The Box Model works like this: in the middle you have the content area (let's say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. It can be visually represented like this:

Margin box

Border box

Padding box

Element box

You don't have to use all of these, but it can be helpful to remember that the box model can be applied to every element on the page, and that's a powerful thing!

CSS and HTML 17: Text

You can alter the size and shape of the text on a web page with a range of properties, outlined below:

font-family

This is the font itself, such as Times New Roman, Arial, or Verdana.

The font you specify must be on the user's computer, so there is little point in using obscure fonts. There are a select few 'safe' fonts (the most commonly used are arial, verdana and times new roman), but you can specify more than one font, separated by commas. The purpose of this is that if the user does not have the first font you specify, the browser will go through the list until it finds one it does have. This is useful because different computers sometimes have different fonts installed. So font-family: arial, helvetica, for example, is used so that similar fonts are used on PC (which traditionally has arial, but not helvetica) and Apple Mac (which, traditionally, does not have arial and so helvetica, which it does normally have, will be used).

Note: if the name of a font is more than one word, it should be put in quotation marks, such as font-family: "Times New Roman".

font-size

The size of the font. Be careful with this - text such as headings should not just be a paragraph in a large font; you should still use headings (h1, h2 etc.) even though, in practice, you could make the font-size of a paragraph larger than that of a heading (not recommended for sensible people).

font-weight

This states whether the text is bold or not. In practice this usually only works as font-weight: bold or font-weight: normal. In theory it can also be bolder, lighter, 100, 200, 300,400, 500, 600, 700, 800 or 900, but seeing as many browsers shake their heads and say "I don't think so", it's safer to stick with bold and normal.

font-style

This states whether the text is italic or not. It can be font-style: italic or font-style: normal.

text-decoration

This states whether the text is underlined or not. This can be:

• text-decoration: overline, which places a line above the text.
• text-decoration: line-through, strike-through, which puts a line through the text.
• text-decoration: underline should only be used for links because users generally expect underlined text to be links.

This property is usually used to decorate links, such as specifying no underline with text-decoration: none.

text-transform

This will change the case of the text.

• text-transform: capitalize turns the first letter of every word into uppercase.
• text-transform: uppercase turns everything into uppercase.
• text-transform: lowercase turns everything into lowercase.
• text-transform: none I'll leave for you to work out.

body {
 font-family: arial, helvetica, sans-serif;
 font-size: 0.8em;
}

h1 {
 font-size: 2em;
}

h2 {
 font-size: 1.5em;
}

a {
 text-decoration: none;
}

strong {
 font-style: italic;
 text-transform: uppercase;
}

Text spacing

The letter-spacing and word-spacing properties are for spacing between letters or words. The value can be a length ornormal.

The line-height property sets the height of the lines in an element, such as a paragraph, without adjusting the size of the font. It can be a number (which specifies a multiple of the font size, so '2' will be two times the font size, for example), a length, a percentage or normal.

The text-align property will align the text inside an element to left, right, center or justify.

The text-indent property will indent the first line of a paragraph, for example, to a given length or percentage. This is a style traditionally used in print, but rarely in digital media such as the web.

p {
 letter-spacing: 0.5em;
 word-spacing: 2em;
 line-height: 1.5;
 text-align: center;
}