Creative Concepts

2009-05-29T17:20:00.001+06:00

Step 1

Lets open a new document and get rolling. Because I’m working in this limited space I’m going to use a document width of 540px, but if you’re building an actual header, you’ll probably want to make your wider and 350px high will be plenty.

Click on the foreground swatch in your Tools bar and enter the RGB code #372819 in the field at the bottom of the Color Picker to change the color to a nice brown. Now simply hit Command-Delete (PC: Ctrl-Backspace) which is the keyboard shortcut to fill the stage (or a selection) with the foreground color.

Step 2

Create a new layer by clicking the New Layer icon at the bottom of the Layers palette. If your layers palette isn’t visible, open it by choosing Window>Layers from the main menu. Double click on the layers name and rename it Header Background.

When you create a new layer, it will automatically be selected as your working layer. Press the M key to choose the Rectangular Marquee tool and drag a selection across the stage which will be used to create the background area of the header that contains all those pretty swirls. The height of my selection is 185px.

(*note: If you choose Window>Info from the main menu, the Info palette will open up and you can see exactly what size selection you are creating as you go.)

Step 3

Press the D key to reset the foreground color to black, then fill the selection by pressing Command-Delete (PC: Ctrl-Backspace) just like we did in Step 1. Then press Command-D (PC: Ctrl-D) to deselect.

Step 4

For this step you’re going to need to download a new Photoshop Pattern file. I’ve included this file in the download at the end of the lesson or you can download it by itself here. Once you’ve downloaded the pattern, you’ll need to place it in the Applications>Photoshop>Presets>Patterns folder on Mac, and the PC path should be quite similar.

Now we are going to load and apply this style to our layer. Either double-click to the right of this layer’s name in the layers palette or Control-Click (PC: Right-Click) on the layer and choose Blending Options to bring up the Layer Styles dialog box. Choose Pattern Overlay from the Styles list on the right. Click on the pattern swatch to open the Pattern Picker, then click the little circle with the arrow in the upper right hand corner. Now you can see all the options available for the Pattern Picker, choose Load Pattern. Now simply navigate to where you placed the pattern at the beginning of this step and click OK. This will load the pattern into your Pattern Picker (right at the end). Now just choose it and the Pattern Picker will close.

Step 5

You’ll see that the pattern you chose is now active in the Pattern window. Change the Blend mode to Luminosity.

Step 6

Select Blending Options from the Style list at the left and move the Fill slider all the way to the left to reduce the layer’s Fill Opacity to 0%.

Step 7

Next select the Inner Glow style and add the following settings. This is what adds the nice edge burn effect you see in the header. When you’re done, click OK to commit the layer style and return to the document.

Step 8

You’ll notice that the Header Background layer now has a Layer Style icon. Your header should now look something like the one below.

Step 9

Create a new layer and call it Red Bar. With the Rectangular Marquee tool draw out a nice selection below the Header Background (mine is 45px high), fill it with #88160F, and press Command-D (PC: Ctrl-D) to deselect.

Step 10

Next, open the Layer Styles dialog box just like we did in Step 4, choose Pattern Overlay. Just like we did in our earlier step, we’re going to load a pattern set into the Pattern Picker. This time though, we’re going to use a stock pattern set called Texture Fill 2 which you’ll find in the drop down menu where we loaded our pattern in Step 4. You can either Append (put these patterns at the end of the pattern picker) or you can click OK to replace all the current patterns with the new one. Either is fine.

Find and select the pattern called Sparse Basic Noise by holding your mouse over each pattern until it’s name appears. And use the following settings. Then set a Gradient Overlay using the settings that follow.

Step 11

Lastly, add the following 1 pixel Stroke and click OK.

(*note: in my header I used a double outline created by using the Single Row marquee tool available in the Rectangular Marquee tool’s expanded menu with a 1 pixel gap between them.)

Step 12

Now lets duplicate our Red Bar layer by pressing Command-J (PC: Ctrl-J). This will create a new layer directly above the Red Bar layer called Red Bar copy.

Press the V key to switch to the move tool then click and drag this new red bar to the top of the header until it looks like the one below.

Step 13

Now lets add a shadow below the bottom Red Bar layer. Click on the Header BackgroundRed Bar Shadow. layer and then add a new layer above it by clicking the Add New Layer icon at the bottom of the Layers palette. Rename the layer

Switch to the Gradient tool by pressing the G key and make sure the foreground color is set to black by simply pressing the D key. In the Gradient tool options that appear across the top of the screen, make sure that Foreground to Transparent is selected as well as Reflected Gradient. On the stage drag a short vertical line from the bottom of the Red Bar downward to create the gradient shadow.

Step 14

Lets put the same shadow below the top bar by repeating the process then drop the opacity of both shadow layers to 80% in the layers palette. You can do this by duplicating the layer and moving the gradient up, or by creating a new layer and a new gradient.

Step 15

The last thing we are going to do is place a radial gradient into the header to create the glow behind the logo area.

Create a new layer above the Header Background layer and name it Header Glow. Press the X key to switch the foreground and background colors, now making white the foreground color. Choose the Gradient tool again by pressing the G key and this time make sure that Radial Gradient is selected from the Gradient Options.

Step 16

Click and drag a nice radial gradient onto the stage where you think the glow should live. Don’t worry that it extends beyond the Header Background, we’ll fix that in the next step.

Step 17

Ok, now listen very carefully. We are going to create a layer mask on the Header Glow layer by loading the Header Background layer as a selection so follow along.

To load the selection, hold down the Command (PC: Ctrl) key and click on the thumbnail for the Header Background layer. Cool right?

Ok, now make sure that the Header Glow layer is your active layer (it will be highlighted). Then click the Add Layer Mask button at the bottom of the layers palette (it’s the one that looks like a circle inside a rectangle). Your selection will be converted to a layer mask and the layer mask icon will appear on the Header Glow layer.

Step 18

Obviously this white gradient is much too bright, so the last step is to simply drop the Header Glow layer’s Fill opacity down to around 30%.

Step 19

Great work! Click here for Hero Header Part II where I’ll show you how I created the old paper and logo star that complete the header graphic!

2009-05-29T17:14:00.002+06:00

create a new document with the dimensions 950 x 1130 pixels. Fill your background layer with the color black. Select the rounded rectangle tool and set radius to 15px.

Draw out a rounded rectangle for your header. Leave equal amounts of pixels either side and dont place it right at the top of your canvas.

Add these layer styles to your header layer.

Your rectangle should be now transformed into the image below.

On the left side of the header add your website title and slogan, on the right side add 3 navigation items.

Inbetween the 3 navigation items on the right add a very small square or rectangle, i drawn 3 pixel long line. Once you have done that add this outer glow.

You should have something like this.

Finally make a selection on your header similar to the image below.

Fill the selection with the color white then set layer opacity to 2%. Underneath your header add another rounded rectangle using the rounded rectangle tool with a radius of 15px, this will be our navigation.

Add these layer styles to the navigation.

You should have something like this.

Make a selection across half of your naviagtion.

Fill the selection with the color white and set layer opacity to 5%. Now add your navigation text. Inbetween each item add a small divider. To make the divider create two 1 pixel lines next to each other using two different shades of grey, one dark and one light shade.

To create a hover on your navigation select the elliptical marquee tool and create a white circle. Have the top of the circle just overlapping the bottom of the navigation you want to hover.

Now goto “filter > blur > guassian blur”, blur by about 6-8 pixels. Set layer opacity to 23% then delete the bottom half of the circle so it comes level with the navigation.

Where now going to make a featured box for some featured content. Select the rounded rectangle and draw out a big rectangle underneath your navigation.

Dont fill your selection with a color, instead select a radial gradient with the color #2c2d2d as your forground and black as your background and create a radial gradient in the selection, start the gradient from the bottom left corner. Then add this stroke.

You should have something like this.

Add an image of your choice, im using the final result of my iphone light beams tutorial. Add it to the left side of the box. Now add some descriptive text on the right side.

The layer styles for the silver style button are as follows.

Using the same layer styles as we used for the header, navigation and featured box create more content boxes using the rounded rectangle tool.

Add your glowing dot that we used in the header and label each content box.

The 1st content box im going to use as an image gallery. With the rounded rectangle tool add another rectangle within the content box. Then add these layer styles.

You should have something like this.

Add an image inside the inner rectangle by copying an image to the clipboard then goto “edit > paste into”. Move your image into place then create a black rectangle across the bottom of the image set layer opacity to 40% then add some image info.

To the box on the right im going to add some simple news articles.

In the 3rd content box im going to add a flickr gallery. Create an inner rounded rectangle like we did in the 1st content box.

Add some flickr images within your inner rectangle, i made my images have rounded corners by copting them and pasting them into a rounded rectangle, doing this automatically adds a layer mask, just delete the rounded rectangle after.

With the elliptical marquee tool just add two black circles in the middle at each end of the gallery.

Inside the plain black circles just add a left and right glowing arrow.

Now for the footer, Duplicate your header and all it’s elements, drag to the bottom of your canvas. Delete the little navigation the the 3 glowing dots, replace with your copyright information.

2009-05-29T16:53:00.000+06:00

Create a new document. Use the elliptical marquee tool to create a blue circle.

Load the selection of the layer and move it over until it looks like that below.

After you delete this selection, it will look like this below.

Use the elliptical marquee tool to create a green oval.

Move this selection up a bit

Delete the selection, and rotate the layer a little through the use of the transform tool.

Load the selection of the green layer. Then go to Layer > Modify > Expand. Expand by 5 pixels. Then select the original blue layer, and delete the selection.

Use the elliptical marquee tool to create a magent oval approximately the same width as the green one.

Using the same method in the last two steps, you will get the resultant graphic below.

Once again, select the elliptical marquee tool and fill an oval selection with orange.

Transform the selection a little bit and move it over. Delete that portion of the layer.

And the result is below.

Move and rotate (Ctrl + T) the layers a little bit to straighten everything out.

Complete step #7 except this time, use the orange layer first, and then delete from the blue layer.

To finalize your logo, add your company text below with any other symbols you wish. The final product is below.

How to Create a Sparkling Fantasy Photo Manipulation

2009-05-18T10:18:00.003+06:00

Step 1

The first step is to create a background for our image. This time we'll use a simple combination of different textures using the blending modes. Just open the first texture and the second one over the first. Now change the mode of this last one to Multiply and the Opacity to about 40%, then Merge them.

Step 2

Now duplicate your layer, Desaturate the upper one and use the Eraser Tool (E) to delete parts from the upper left zone. Use the Motion Blur in this layer like in the sample image below, merge the layers, and finally add some magenta and blue using Image > Adjustments > Color Balance.

Step 3

Now grab this image of a woman. Cut her out from the original picture and paste in the center of the new image. We are going to modify her color and light using the blending modes again.

From the beginning we have in mind that we want the light falling from the upper-left corner of the image, so we have to show this in the girl and her lights and shadows. First, let’s go to Image > Adjustments > Hue/Saturation and add some more saturation to the image.

Now duplicate our layer with the girl, and with the upper layer selected go to Image > Adjustments > Brightness/Contrast and add more brightness. Change the mode of this layer to Screen and the Opacity to 58%. Finally, you can delete (using a blurred brush and a Layer Mask or the Eraser Tool) the darker parts (under her arms and hair).

Duplicate our first layer with the girl again and move it over the other. Go to Image > Adjustments > Levels and make it darker. Pay attention to the shadows in her dress, don’t be worried by her face or others zones at this point.

When you have some good details in the shadows of the dress change the Layer Mode to Linear Burn and use the Layer Mask or the Eraser Tool again to delete the zones that you don’t need to be dark, like her face, the light zones in her arms, etc. Now merge the Layers of the girl.

Finally, use the Burn Tool (O) to make the zones darker than you need. I retouched her hair and some details in her face.

Step 4

The face in our image doesn’t look too big, but it still seems a little pixelated, we can fix this using the Smudge Tool (R). Select it with a small brush (about 16 px) and the strength set to about 30%, and use it on her skin with small strokes in the direction of her features. You can use the Blur Tool (R) to help with this process, but use it carefully because we don’t want the face out of focus.

Step 5

Now let’s duplicate our girl layer and add some Cyan, Green and Blue to the lower one. Go to Image > Adjustments > Color Balance and change the settings to those shown below.

Change the Layer Mode in the one on the top to Hard Light, the Opacity to 40% and use the Layer Mask or the Eraser Tool to delete most of the image, just leave some of its warm tones on the left side, where the light is falling over our model. Merge the layers with the girl and finally go to Image > Brightness/Contrast and add a little more of brightness.

Step 6

We’re going to create the shadow of the girl in the easiest way. Just create a new layer over the girl and use the Brush Tool (B) with black selected to draw some uneven horizontal lines under her feet and her back.

Go to Filter > Blur > Motion Blur and use a horizontal blur with about 760 px. If you need some more shadows over the girl just supplicate the layer, erase the shadows that you don’t need, and merge the layers.

Now let’s add a transparent shadow falling over the background. Just duplicate the "girl" layer, fill it with black (for example, go to Levels and make it dark) and move it to the position shown below. Then make it a little smaller using Free Transform (Command + T) and add a Gaussian Blur (Filters > Blur > Gaussian Blur) of about 21 px.

Change the Layer Mode of the shadow to Soft Light, the Opacity to 75%, and finally erase the lower part of the shadow.

Step 7

Now create a new layer, select the Brush Tool (B) again with black selected and a blurred blush, then draw some dark zones, as shown below.

Go to Filter > Motion Blur and add the settings shown below. You can use the filter twice or more if you prefer.

Change the Opacity to about 70%, erase some parts if you consider it necessary and change the Blending Mode to Multiply. If you want to add more shadows in some parts just repeat the process painting in other places.

Step 8

Now, in a new layer use a smoke brush with a white color selected and put it behind the girl. You can use Gaussian Blur to make it out of focus.

Step 9

Now we’re going to create some subtle rays of light in the corner of our image. You can draw some lines and use the Motion Blur, but we can do it with the same brush that we´ve used for the smoke. Just duplicate some of these layers and apply the Motion Blur (Filters > Blur > Motion Blur) with the settings shown below.

Now move the layer to the corner and repeat the previous step with another brush. Use Free Transform (Command + T) to change the angle of the rays. I used three different layer for the light to get a good result.

Step 10

Now grab an image with ribbons in it. Open the new image and select the ribbons, as shown below.

Copy and paste them into our image and go to Image > Adjustments > Hue/Saturation. Modify the settings as shown below.

Finally, use the Burn Tool (O) to make darker the zones in the ribbon that are not touched by light. You can adjust levels or other settings to get a perfect color and light.

Grab some more ribbons from another similar image. Select them and paste them into our image, then change the color/saturation, and use the Burn Tool (O) in a similar way as in the previous step.

Add the shadow for this last ribbon falling over the girl's dress. There are a lot of ways to make it. For example, draw a black stripe, use Gaussian Blur, change the opacity and the blending mode to Multiply, much like we did in previous steps.

For the shadow of the second ribbon, duplicate this layer, fill it with black and apply a Gaussian Blur.

Change the blending mode to Soft Light and erase the parts that you don’t need.

Finally, I add a new ribbon and a new layer of shadow under the model.

Step 11

Now let’s add some flower imagery. This is a simple cut and paste process. The only important thing is that you change the levels or colors little in the images as needed.

Use some stock images of flowers to add behind the girl. You can download these images: 1, 2, and 3.

The only remarkable details are some shadows added using the brush and some Gaussian Blur, then change the color in one of the images. To make this just go to Image > Adjustments > Hue/Saturation, select yellow colors, and change the Hue bar as shown.

Add a flower image in the hand of the girl. To integrate it in the image select the layer of the flower and draw a black shadow in the upper part, then use the Gaussian Blur again (Filters > Blur > Gaussian Blur). Now change the opacity of the layer if it's needs. Create a new layer under the flower and paint two little shadows, use blur again using a subtle Gaussian Blur, and change the opacity as needed.

The system to add the other flowers are always the same. It’s easy and it only requires that you choose good stock images. For example, it’s important that the light in the flowers is logical and respects the light source of our image. If light come from left, don’t use images with the shadow in the right. It’s really simple, you just need cut them, and correct them a little with Levels as needed.

Step 12

Now let’s add some rays of lights flowing from the hand of the girl. To make this, select the Brush Tool, select a hard brush with a size about 8 px and white as the foreground color. Now select the Pen Tool (P) and select in the upper part the option of Paths.

Now draw a curve similar to the one in the image and press the right button on your mouse, then select Stroke Path. In this new menu select Brush and check the Simulate Pressure box.

Press OK. Now press the red button on your mouse again, and select Delete Path. In this layer, select Layer > Layer Style > Gradient Overlay. Add a gradient from black to blue as shown below. Then select Outer Glow and add a blue glow.

Now add a Gaussian Blur to the layer. Go to Filter > Blur > Gaussian Blur and add 2,5 px.

Now duplicate the layer and change the position of the new one.

Select the Brush Tool again and use the smoke brush with a white color. Draw some of smoke and select Edit > Transform > Warp to adjust the curve of the smoke as needed.

For the other ray of light I’ve used the same steps as those above.

Step 13

Now create a new layer, use a brush with a white color to draw a stripe, and then use a blur on it. Finally, change the blending mode of this layer to Overlay. Then you can move it over the ribbons to simulate shine.

For the rays behind the girl use the same system. After you’ve created one of them, duplicate it and move until you’ve done something similar to the sample below. Finally, add the smoke as you’ve done previously.

With these simple ideas I’ve created different points of lights marked in red in the next below. With a mark in blue you can see another ray of light that I’ve drawn using the previous steps.

Step 14

Now that we’re finishing the image, we just need to add details to make it more attractive. For example, let’s use some petals to decorate the image here and there. Use some flowers too and put them in our image as if they’re flying. To make the movement effect just go to Filter > Blur > Gaussian Blur.

Cut another ribbon, paste it in the right corner of our image and add a Motion Blur. Then go to Layer > New Adjustments Layer > Drop Shadow and add the setting shown below.

Add another ribbon in the bottom of the image and repeat the Motion Blur.

Step 15

Finally, let’s add some Adjustments Layers. Go to your upper layer and then to Layer > New Adjustments Layer > Levels. Modify the settings as shown and repeat the process with Color Balance and a Gradient Map. Then change the opacity in the Gradient Map layer to 9% and in the Levels layer to 75%.

Conclusion

The final image is below and I hope you enjoyed this tutorial! Have fun applying these techniques in your own work!

Use Over 40 Advanced Keyboard Shortcuts to Create a Reflective Timepiece

2009-05-16T09:55:00.002+06:00

Step 1

Well, to get things started off right, let's make a new document with the dimensions of 2304 pixels by 1708 pixels, and 300dpi. These dimensions worked great while creating this tutorial, so let's stick with them!

Next we'll set some guides. Be sure your snap feature is turned on View > Snap (Command + Shift + Colon key). Unfortunately there is no visual aid to show that it is turned on. Press Command + R to display your rulers, then use the Selection Tool (V) to drag a guide from the left and top rulers, ensuring they snap to the center of the artboard. Press Command + Colon key to hide any Guides at any time.

Don't worry, if you make a mistake, just press Command + Z to undo. If you make a few mistakes, just press Command + Option + Z to step back to where you were. Now that we have that out of the way, let's get to the fun stuff!

Here's an interesting trick. Change the background of your artboard by selecting your favorite color, grabbing your Paint Bucket Tool (G), then Shift-clicking on the artboard. Cool right?

Step 2

Lets work from the bottom up, kinda like a painting. First lets create a nice blue gradient for the background. Select the Gradient Tool (G), select radial from the gradient choices. When choosing your colors, you can use #3e5198 for the foreground, and #222d53 for the background.

The effect we want is a lighter center, and a slightly darker outside. This creates more visual interest, rather than just a plain solid color. Once you have your colors selected, simply click and drag from the center of the artboard to the right edge and release.

Step 3

For Psd Plus members, Drag in the supplied "concreteTexture.jpg" image that is found in the "source" file in this tut's member download, or grab a texture you prefer off the net. Make sure it is on a layer above the "background." Scale (Command + T) and adjust as needed. Set the color mode to Overlay (V, then Shift + or -), and reduce the Opacity of the layer to 30% (V, then 3). This will give us a nice subtle effect.

Here's a quick note on Opacity and Fill. The number pad (1 = 10%, 2 = 10%......0 = 100%) will change the Opacity or Fill (press Shift and number to change Fill) to whichever tool is selected. If the Selection Tool (V) is active, then it will adjust the layer. If the Brush Tool (B) is selected, then it will adjust the brush. The same goes for the Gradient and Paint Bucket Tool (G).

Step 4

Create a new layer and name it "Main Clock." Select the Circular Marquee Tool (M), and drag from the center of the artboard out towards the edge. The trick is to press Option+Shift while dragging. This will constrain proportions and create a marquee from the center, out.

Leave some free space on the top and bottom. Press (D) to change to the default colors. Next, press Option + Delete to fill the marquee with your foreground color. Deselect the marquee (Command + D). Don't like the color you just filled the circle with? Pick a different color and press Shift + Option+ Delete and see what happens! The transparency is preserved!

Select the Main Clock Layer and the "Background" Layer by Command-clicking each layer (if a marquee appears, that means you clicked on the layers thumbnail. Oops!) Press (V) for your Selection Tool, then align the circle by pressing the Align Vertical Centers, and the Align Horizontal Centers. This is a precautionary measure to make sure everything lines up later down the road.

Filling Note: If you press Command + Delete, the marquee will fill with the background color. An easy way to remember which one does which is to observe on the left side of your keyboard, the Option button is on the left of the Command button (just like the foreground and background colors).

Step 5

Now we get to add some effects. Double-click on the "Main Clock" layer to open up the Layer Style dialog box. Enter the following adjustments (everything else can remain as the default setting):

Drop Shadow: Opacity = 65%, Angle = 90 (make sure Global Light is checked), Distance = 49, and Size = 79.
Inner Shadow: Opacity = 65%, Distance = 0, Choke = 12, and Size = 38.
Inner Glow: Blend Mode = Color Burn, Color = #a32025, Size = 111
Bevel: Technique = Chisel Hard, Size = 81, Soften = 14, Highlight Mode Opacity = 45, and Shadow Mode Opacity = 45.

Step 6

Here comes the fun part! Let's create the numbers for the face of the clock. Select your Type Tool (T) and click anywhere to make a text field. Type in the number 00 (a nice round number to help us align everything) and make sure the text is center aligned. The size should be approximately 40pt (to increase or decrease the size of the font use Shift + Command + <>). Helvetica Neue Font was used, but almost any font will work. Click your check mark box to accept the changes.

Now let's align this text to the background, the same way we did in the previous step. Command-click the text layer and the background layer , then use the align tools to ensure we are directly in the center.

Step 7

Next, Shift-drag the text box to the top of the circle, and let it snap into place. It should be half on, half off of the top edge of the "Main Clock." Aligning it this way will give us a nice visual, letting us know that everything aligned properly.

Once in place, press Command + T for the Free Transform Tool. Your anchor will be in the center of the transform box. Shift-drag it down to the center of the circle. Zoom in (Command + Plus key) if you need to be more precise. Change the angle to 30 degrees and click the check box to accept the changes.

Now press Command + Option + Shift + T eleven more times to repeat the transform and make a new layer via copy. Wow, that's amazing!

Step 8

Adjust the number to read correctly by selecting the layer, then pressing Command + T. Grab the bounding box corner and rotate it into place while holding Shift. Edit the text by double-clicking the text layer and entering the appropriate number.

Note: Using the bounding box to rotate the numbers into place is the quickest way, but you have other options as well. Try rotating it 30 degrees, then click the check box to accept the changes. Now press Command + Shift + T to repeat the transform. Keep doing this until the number is in place. Now you can select a different number layer and use the same keyboard shortcut. Neat!

Once all of the numbers are correct and can be read properly, select all of the numbers by Shift-clicking the entire set of numbers. Press Command + G to group all of the numbers together. Name the group "Numbers."

Step 9

Now we want to make a copy of all of the numbers to one layer. Option-click the eye on the "Numbers" group. This will turn all of the other layers off. Press Command + Option + Shift + E to stamp everything visible to a new layer via copy. Name this layer "Merged Numbers."

Now turn on the other layers by clicking on each layer eye. You can keep the group "Numbers" turned off. The reason we made a copy is to keep an editable copy of the numbers, to apply the effects to only one layer which reduces file size, and to learn a great shortcut!

Step 10

Resize the Merged Numbers layer (Command + T), so it fits inside the clock as shown below. Be sure to hold Option + Shift while dragging to constrain the proportions to the center.

Apply effects to the "Merged Numbers" layer. Use the settings indicated below. Don't be afraid to choose your own settings either. Make it your own!

Here are the settings used:

Outer Glow: Opacity = 56, Color = #a32025.
Bevel: Style = Pillow Emboss, Size = 24, Soften = 8, Highlight Mode Opacity = 30, and Shadow Mode Opacity = 30.
Gradient Overlay = #ffffff, #c8c8c8, #ffffff, #c8c8c8, #ffffff (refer to image below) Click New to add this gradient to the presets field because it will be used in Step 13).

Step 11

Create a new layer and name this "Hour Hand." Use your Custom Shape Tool (U) and choose the pencil shape from the drop down menu at the top. This looks most like a clock dial. Drag out a shape to make it look like a short, thin hour hand. Press Command + T, then hold Shift while rotating the hand so it is straight up and down. Position it towards the center to help you measure the next hand.

We need a longer minute hand now. Duplicate the layer by pressing Command + J. Rename this layer "Minute Hand." Select the Square Marquee Tool (M) and drag a square around the upper part of the hand. Now press Command + T and drag the hand so it is a little longer than the other one. Doing this will keep our pointed area proportional between the two hands.

Step 12

Turn off the visibility of the "Minute Hand." Drag the "Hour Hand" up so the end is within the center guides. Press Command + T, rotate it holding Shift, then move the anchor point to the center guides (zoom in if necessary). Rotate the hand to the location of your choice (sometimes the anchor can't be edited until the object is rotated). Now do the same with the "Minute Hand."

Step 13

Use the settings below to style both hands. The "Minute Hand" will have slightly more distance in the drop shadow, so it appears to be above the "Hour Hand." Here are the settings:

Drop Shadow: Opacity = 55, Distance = 11 (14 for the "Minute Hand"), Size = 13.
Inner Shadow: Opacity = 42.
Bevel: Technique = Chisel Hard, Size = 9, Highlight Mode Opacity = 55, Shadow Mode Opacity = 55.
Gradient Overlay: Use the same color of gradient that was saved in Step 10, Angle = 96.

Step 14

Adding some light spots to the clock hands will make our effect even more realistic. Create a new layer and name it "Highlights." Press (D) for your default colors, then (X) to switch to white.

Press (B) and from the brush menu (if you are using CS4 you can use the following shortcuts) select a brush diameter of 150 (Control + Option-click-drag), and a hardness of 0% (Control + Option + Command-click-drag). Set the Opacity to 30% (press 3). For earlier versions of PS, use the Bracket keys to adjust the diameter, and Shift + Bracket keys to adjust hardness.

Paint the white spot anywhere you can see it. Now select a Brush Diameter of 50, with 0% Hardness. Set the Opacity to 60% (press 6). Click once in the center of the previous highlight.

Now select your Circular Marquee Tool (M). Drag a circle around your highlight. Press (V), now click inside the marquee to cut it and reposition it. Find a white part on the "Hour Hand" and try to center your highlight to the upper edge of the hand (it depends on where you put your hands, but remember the light source is coming from the top).

Before you deselect, Option-click and drag a new copy to a highlight on the "Minute Hand," and the upper edges of the numbers 7 and 12. Now you can deselect, and pat yourself on the back for making it this far!

Step 15

Add your company logo if you would like. Just drag it into your document, making sure the logo layer is below both hand layers. Position it, then use Command + T to resize it.

Copy the layer style of the numbers by right-clicking and selecting Copy Layer Style, then right-click on your "logo" layer and select Paste Layer Style. Decrease the bevel effect until it looks more realistic (Bevel: Size = 5, Soften = 0).

Step 16

Hold the hands together by creating a center piece. Create a new layer and name it "Center." Command-click on the "Main Clock" layer thumbnail to create a marquee. Fill it with any color (Command + Delete), Deselect the marquee (Command + D), resize to the center (Command + T). Don't forget to hold Shift + Option to constrain the proportions to the center.

Now copy the "Main Clock" layer style, and paste it onto the "Center" layer. Make a few minor adjustments as shown below. The drop shadow distance should be a little more than the "Minute Hand" layer because it is above both hands:

Drop Shadow: Distance = 19 and Size = 13.
Inner Glow: Uncheck this effect.

Step 17

Let's create the cover now. Create a new layer and name it "Cover." Command-click on the "Main Clock" layer thumbnail to create a marquee. Press (D) for default colors, then press Command + Delete to fill it with white. Deselect the marquee (Command + D). Lower the layer opacity to 20% (V, then 2).

Resize (Command + T, then hold Shift + Option-drag) the "Cover" layer to fit a little inside the beveled edge of the "Main Clock." See the image below.

Create a Layer Mask by clicking on the button at the bottom of the Layer Panel, select your Gradient Tool (G), make sure Linear is selected, then choose the same gradient from Step 10. Now click on the Layer Mask to select it. Zoom out if necessary, and drag a gradient from the upper left corner of the image, down to the lower right corner. This effect will had some variation to the cover and make it appear to be a more reflective surface.

Step 18

Now we need to continue to build up the glare effects to make the "Cover" look more realistic. For those of you who have watched my Glass Ball Tutorial on YouTube, this step will be a breeze.

Create a new layer and name it "Glare." Command-click on the "Cover" layer thumbnail to create a marquee. Press (D) for default colors, then press Command + Delete to fill it with white. Deselect the marquee (Command + D). Lower the layer Opacity to 40% (V, then 4)

Transform the "Glare" layer by pressing Command + T, then Shift-dragging from the bottom and bring it above the center line. Shift + Option-drag from the right side to squeeze the layer, then Shift-drag from the top to squeeze it down into place. Use the image below for reference. Make sure the glare is covering the number 12, as shown.

Step 19

Create a Layer Mask for the "Glare" layer. Select your Gradient Tool (G) and make sure the Linear Gradient is selected from the gradient field above. Choose default colors (D). Select the Layer Mask, then drag a gradient from the bottom of the circle to the top. Instant Glare! We still have some polish to add though.

Default Colors Note: If you are on a layer, the letter D makes black the foreground, and white the background. But, if a Layer Mask is selected, and D is pressed, then the default colors are reversed. Just press X if you need to swap them.

Step 20

Create a new document by pressing Command + N. Let's make this a square document. The size should be 7 inches by 7 inches at 300dpi.

Double-click on the background layer,then press OK to unlock the layer. Fill the layer with black (try to use those shortcuts you learned in the previous steps). Go to Filter > Render > Lens Flare, then select the 105mm Prime option at 110%, and press OK.

Lets Fade the Filter we just applied. Press Command + Shift + F. Lower the Opacity to 90%.

Fade Filter Note: This shortcut is only accessible directly after a filter is applied. It's great for lowering the Opacity or changing the blending mode of a filter without affecting the pixels it is sitting on top of.

Step 21

Go to Filter > Distort > Polar Coordinates. Select Polar to Rectangular, and press OK. Whoa, what happened! Don't worry, it's going to look great I promise!

Now flip it vertically. Go to Edit > Transform > Flip Vertically. Now go back to Filter > Distort > Polar Coordinates. This time select Rectangular to Polar, and press OK. Wow, now look at that! Did I keep my promises or what!

Step 22

All you have to do now is cut out the fat. Create some quick center guides like we did earlier. Choose your Circular Marquee Tool (M), then drag a circle from the center out to the edge of the glare. Be sure to hold Shift + Option while dragging.

Now press Command + Shift + I to inverse the selection. Press Command + X to cut out the fat.

Step 23

Shift-drag your creation into your clock document so it is centered.

Resize the reflection by pressing Command + T and Shift + Option dragging it to the same size as the "Cover" layer. Rotate the reflection so the beads of light are at the top, and aligned to the center. Accept the changes by pressing the Check Mark.

Rename this layer to "Flare," and make sure it is above the "Glare" layer. Press (V), then hold Shift and press the Plus or Minus keys to cycle through your layer modes. Soft Light works best in our case.

Step 24

We need to add more pop to the glare at the top. Command-click on the "Glare" layer thumbnail to create a marquee. Select the "Flare" layer, then press Shift + F6 to bring up the Feather Selection dialog box. Type 100 pixels and click OK. This will fade our flare and blend it more.

Now make a new layer via cut by pressing Command + Shift + J. Now set the Blending Mode to Screen (V, then Plus or Minus keys). Rename the layer to "Flare2."

Step 25

We better add one more lens flare for good measure. Create a new layer and name it "Flare3." Command-click on the "Cover" layer to get a marquee. Fill it with black and don't deselect the marquee yet. This will confine our lens flare to the pixels inside the marquee.

Go to Filter > Render > Lens Flare. This time choose 50-300mm Zoom, and position the flare crosshair on the left side so all of the reflections are aligned from left to right. Select 110%. Press OK.

Deselect the selection (Command + D) and press Command + T to rotate it so the brightest part is centered at the top. Accept the changes. Now set the layer mode to Soft Light.

Step 26

A few more lighting effects and we are done. Create a new layer above all of the others and name it "Inner Rim." Command-click the "Main Clock" layer thumbnail to create a marquee. Fill the marquee with white (D, then Command + Delete). Deselect the marquee (Command + D). Press Command + T to reduce the size to meet the inner edge of the "Main Clock" Bevel as shown.

Let's cut out the fat. Command-click on the "Cover" layer (make sure the "Inner Rim" layer is still selected). Press Command + X to cut out the center.

Reduce the layer Opacity to 70% (V, then 7). Create a Layer Mask. We need to fade the effect now. Select your Gradient Tool (G), Default Colors (D), (X) to inverse default colors, and Shift-drag a Linear Gradient from the center of the clock down to the bottom of the clock.

Step 27

Create a new layer and name it "Outer Rim." Command-click on the "Main Clock" layer to create a marquee, and fill with white (D, then Command + Delete). Deselect the marquee (Command + D).

Now select the "Inner Rim" layer and Command-click on the layer thumbnail. Press (W) for your Wand Tool, and Shift-click the center of the marquee. This will get rid of the middle part that we don't need. Now click back on the "Outer Rim" layer and cut out the fat (Command + X). Set the layer Opacity to 80% (V, then 8).

Select your Gradient Tool (G), and choose Radial Gradient. If the layer mask is selected, press (D) for your default colors. Shift-drag up from the top of the "Outer Rim." You will have to drag about 3-4 inches above the clock. Zoom out if necessary. This will give us a nice hot spot on the top of the clock, which is closer to the light source.

Step 28

Create a new layer and name it "Shadows." Fill it with black. Set the layer mode to Soft Light (V, then Shift and use the Plus or Minus keys). Now create a Layer Mask, choose your default colors (D), select your Gradient Tool (G), then Shift-drag a Linear Gradient from the bottom of the image to the center of the clock. This will add a little more depth to our image by fading the light.

Conclusion

Wow, you did it! Great Job! Hopefully this tutorial has helped you and will make you a quicker, more efficient Photoshop designer.

How to make Fire Blast

2009-05-16T09:51:00.002+06:00

Use the polygon lasso tool to select a shape as below. The fill with white.

Apply Filter --> Distort --> Radial Blur Zoom 100% The result should be similar to below.
Set the eraser as above and brush lightly around the edges of the shape until you have a similar look to the one below.


Apply Filter --> Blur --> Gaussian Blur Radius 1.2 The result should be similiar to below



Here is an example of it in use

2009-05-13T16:31:00.001+06:00

GOOGLE

2009-05-13T14:12:00.000+06:00

Making a Wedding Invitation in Photoshop

2009-05-13T12:37:00.002+06:00

1 – Creating the initial paper colour and texture

Create a new layer.

Choose the Selection Tool, and select a rectangle in the centre of the area.

Fill the area with a tan colour. I've used #E8E0BE here. Press Ctrl+D to deselect the area.

Create a new layer.

Fill it with 50% grey.

Click Filter > Noise > Add Noise. Set it to 10%, Gaussian, Monochromatic, and press OK.

Change this layer's Mode from Normal to Overlay.

2 – Scorching the parchment

Create a new layer.

Set the colours back to black and white, by pressing "d", and Click Filter > Render > Clouds.

Change the layer's Mode from Normal to Color Burn, and set its Opacity to 50%.

The next step is to distort the edges of the paper, to give it a jagged appearance.

In the Layers list, click on your tan-coloured, paper layer. It should be called "Layer 1".

Click Filter > Distort > Wave, to bring up the Wave window. There's a lot of guesswork involved here. You may need to try this a few times, until you get a Wave effect you like.

Set the number of Generators to around 100. This creates a hundred sources of ripples, which creates a very random effect over all. (Having less Generators produces more regular waves, which isn't what we want here. Think of the number of Generators as being the number of pebbles you're throwing into a pond.)

Set the Wavelength, Amplitude, and Scale sliders to low numbers (around 10), and press OK.

This wave will now be saved, so you can click on Layer 2 and Layer 3, and Click Filter > Wave (or Ctrl+F) to repeat the same wave on each layer.

3 – Adding some cursive text and a Drop Shadow

At this point, change the colour of Layer 1 by pressing Ctrl+U, to adjust its Hue/Saturation properties. I do this for almost everything I create in Photoshop.

Add in your own text. I've used the Pageant font here.

For added effect, add a space between each letter, or increase the Tracking. (It's the "A V" on the Character Palette, which can be accessed by clicking Window > Character.)

Right-click "Layer 1" and choose Blending Options (Effects in Photoshop 5.5.) Give the layer a normal Drop Shadow, and press Ok.

4 – Text and decoration

Create a new layer.

To create the swirly dividers, choose the Selection Tool, and select a narrow strip.

Fill the selected area with a dark brown. I've used #724C40 here.

Press Ctrl+D to deselect.

Click Filter > Twirl, and press OK.

Change the layer to Color Burn.

Right-click this layer, and Duplicate it.

To flip the duplicate layer, click Edit > Transform > Flip Horizontal.

If you're using Photoshop 6.0, 7.0, or CS, choose the Shape Tool to put in an extra doodad (a flower in this case.) Once you've clicked the Shape Tool, make sure the "Fill Pixels" square, at the top left of the screen, is selected. Then, click the drop-down box next to "Shape:". Click the sideways arrow, Choose "All", and press OK. Then select the Flower from the list. Hold Shift and apply it to your image.

Your own printable wedding invitation is now complete.

2009-05-07T15:18:00.000+06:00

Creating a 5-minute Website

If you find that you are totally unable to design a nice-looking website, no matter what you do, you'll find this five-minute website tutorial to be invaluable. I learned by imitating the websites of the professionals, and came up with this nice website design formula.

This tutorial goes through the steps of making a left-oriented website.

Choosing a background for your website -

White website background
(reputable, mainstream) A white website background should almost always be used on a company website, or a site that is trying to sell something. The "white" theme can also be done with a navy blue background, and white text.

Black website background
(cool, different) A black website background should be used for any website that's even slightly non-corporate - games websites, adult websites, personal websites. If your website is a bit different, use black.

Graphical website background
(natural, real) Making your website background graphical (e.g. by tiling), is dangerous, and rarely looks good. A very faint photo or a well-done watermark is okay. I had to tone down the background on my old website several times to get it right.

1 – Setting up the menu area

Your website should always start in Photoshop, not your web page editor.

Make a new 500x400 pixel image.
Zoom out and use the Freeform Pen tool to make an appropriate shape for a website menu. Remember to hold Ctrl whenever you want to move your points around, or drag their "arms". Make sure you have the "Paths" option at the top left of the screen selected. (You must zoom out or maximise the little window you're working in, otherwise you won't be able to drag your points into the grey area.)
Turn it into a selection. (Right click on it and choose "Make Selection".)
Make sure that your points make almost a complete circuit, as the first and last points will connect up when you turn the path into a selection.

2 – Designing the menu

Create a new layer.

Fill the selected area with a left-right gradient of a colour and a darker shade of that colour. (I used red and dark red.)
Right-click the layer in the layers list, and choose "Blending Options" (Adobe Photoshop 6.0 & 7.0) or "Effects" (Adobe Photoshop 5). Give the area a shadow, bevelling, contour, and a texture (I used Carpet here).

3 – The watermark

To create a watermark (lightened area), use the Wingdings font, and type in "jk". It should come out as two swirly symbols.
Press Ctrl+T to rotate them, then make them into a watermark by changing them to an Overlay layer.
If your watermark extends over the edge of your menu area, just right-click it in the Layers list, and Rasterize or Render it, to make it editable. Then Ctrl+Click on your red menu layer, click Select > Inverse, and press Delete, to delete the unwanted part.

4 – Making a logo

The bulbous area at the tip is where the website's logo goes.

Use Times New Roman font here, and put some appropriate text in.

The easiest way to put the horizontal line in is by just typing underscores. ( __ )
GRight-click each of these layers, and choose Blending Options (Photoshop 6.0 and 7.0) or Effects (Photoshop 5.)
Give each of these layers a 0.5 pixel black Stroke (outline), a Drop Shadow, and a Bevel.
If a black outline of one pixel is still too much, just make the outline 50% opacity, and it will look like it's half as thick.

5 – Making some buttons

Create a new layer.
Use the Shape Tool to put in a rounded rectangle. (Select the little square button at the top left that says "create new work path"). Create the shape, and then right-click it and convert it to a selection. (This step is Adobe Photoshop 6.0 and 7.0 only - just use a rectangle in Adobe Photoshop 5.0)
Put another light-to-dark gradient across the shape (I've used green), and then give them the usual bevel/contour, texture, stroke, and shadow.
Give the button some text (I've used bold Tahoma), of a new colour (I've used yellow), and give it the usual effects, but without the texture.

6 – Adding a picture

The final touch, which adds a nice effect, is to put a picture of something relevant in behind the menu. You can find stock photography easily on the web.

Use the Clone stamp tool to extend the top and bottom of the photo if it's not big enough.
While holding shift, run a white airbrush along the right side of the image.
Don't worry about the bottom of the image for now.
When you've finished doing any website design, always select any non-picture elements (e.g. the menu bar, header text, buttons, and button text) and press Ctrl+U to colour-shift them. Play around with the sliders until you like the colours. (I haven't done this here, because I already knew which colours would look best. :)

7 – Creating a "sliver"

A sliver is what I call a thin slice of an image that can be repeated indefinitely on your website, to fill up an area of any size.

Save your work here, and do not save it again from this point, as the image will be flattened, and you want to keep your layers for future work.
This step can also be done easily with the Slice Tool, but for simplicity, it has been omitted here.
Select an area towards the bottom of the image, about a centimetre tall, and as wide as your image.
This area should not have any watermark on it, or any outstanding features in the photo.
Click Layer > Flatten Image, then Image > Crop, to remove everything but the selection. (If you don't flatten the image, it will apply the bevel to the top and bottom edges of your sliver, which is not what you want.)
Click File > Save for Web, and choose Jpeg, Quality 60.
On the History Palette, undo the Crop, but not the flattening.
Select the area of your menu, and click Image > Crop. This selection should be exactly the same width as your sliver.
Click File > Save for Web, and choose Jpeg, Quality 60 again.

8 – Table layout

In your web page editor, make a table with two columns.
Set the width of the left column width to be equal to the width of your menu image, and set the right column to be around 500 pixels wide. Make the width of the whole table equal to the sum of these two numbers.

Set the background of your left cell to be the sliver image. Then insert the menu image into that cell. Depending on your web page editor, use Hotspots or an Image Map to turn the buttons into links.

To finish up, some words about text...

Obviously, the body text of the page should be black, but what about the headings?

Scroll up and look at the image. The aim is to balance the primary colours - red, blue and green. Which colour is there the least of?

The red menu bar, and the green buttons and grass are each more prevalent than the blue water, so the best colour for the text headers on the page is blue. (Always use a dark shade of that colour when on a white background.)

Design Your Company Logo

2009-05-07T15:07:00.001+06:00

1 – The company name

Start by using the Text Tool and typing the main word of your company name. Select a darkish or midtone colour, and choose a serif (curly-edged) font such as Palatino Linotype or Times New Roman. Use all capitals, and slightly enlarge the first letter.

2 – Creating the company logo sub-text

Using the same font, put the rest of your company name, or some other descriptive phrase, underneath the main header. Use a much smaller font size, and increase the letter spacing by typing a high number into the "Tracking" box. (Alternatively, you can just put a space between each letter.)

The horizontal lines I've put in help to separate out and highlight the text of the company logo. An easy way to make a line is to use the text tool and type an underscore ( _ ), then press Ctrl+T to transform it into an elongated shape.

3 – Adding a graphic element to your company logo design

With just words and lines, your logo design will look dull.

If you don't already have a small image you'd like to use, you can use the Shape Tool in Adobe Photoshop 6.0 and 7 to draw a shape.

Another option is to use the Text Tool, and type a character in the Wingdings font.

At this point, your company logo design is finished, and will look good both on screen and on paper. However, if you want to embellish it further for the screen, then read on. Embellishing your company logo design will make it look nicer, but it won't be as clear.

4 – Adding a vertical border to your company logo

A black border like this will help accentuate the colours in your logo design. With your background colour set to black, click Image > Canvas Size, and increase the height of the image a bit. The extra space on your logo design will be filled with the background colour (black).

5 – Watermarking your company logo

Choose a very light grey colour, select the Text Tool, and write "jk" in Wingdings font. Make the font size very large. "j" and "k" in Wingdings show up as nice swirly characters, which make a nice watermark. In the Layers window, drag this layer almost to the bottom of the list, so it doesn't cover up any other layers.

6 – Adding some effects

To add some effects, right-click on a layer, then click "Effects" (Adobe Photoshop 5) or "Blending Options" (Adobe Photoshop 7.0 and 6). I added the following effects to some of the layers: Bevel and Emboss (set to Inner Bevel), Drop Shadow, Gradient Overlay (set to Overlay mode.)

I also changed the Comco header's text colour to blue, and made the horizontal lines orange. Feel free to change any of the colours on your company logo to whatever suits your purpose.

If you can't manage to do it yourself, you can get professional logo design done fairly cheaply at LogoWorks. Have a look at their site if you're interested

2009-05-07T15:07:00.000+06:00

1 – The company name

Start by using the Text Tool and typing the main word of your company name. Select a darkish or midtone colour, and choose a serif (curly-edged) font such as Palatino Linotype or Times New Roman. Use all capitals, and slightly enlarge the first letter.

2 – Creating the company logo sub-text

Using the same font, put the rest of your company name, or some other descriptive phrase, underneath the main header. Use a much smaller font size, and increase the letter spacing by typing a high number into the "Tracking" box. (Alternatively, you can just put a space between each letter.)

The horizontal lines I've put in help to separate out and highlight the text of the company logo. An easy way to make a line is to use the text tool and type an underscore ( _ ), then press Ctrl+T to transform it into an elongated shape.

3 – Adding a graphic element to your company logo design

With just words and lines, your logo design will look dull.

If you don't already have a small image you'd like to use, you can use the Shape Tool in Adobe Photoshop 6.0 and 7 to draw a shape.

Another option is to use the Text Tool, and type a character in the Wingdings font.

At this point, your company logo design is finished, and will look good both on screen and on paper. However, if you want to embellish it further for the screen, then read on. Embellishing your company logo design will make it look nicer, but it won't be as clear.

4 – Adding a vertical border to your company logo

A black border like this will help accentuate the colours in your logo design. With your background colour set to black, click Image > Canvas Size, and increase the height of the image a bit. The extra space on your logo design will be filled with the background colour (black).

5 – Watermarking your company logo

Choose a very light grey colour, select the Text Tool, and write "jk" in Wingdings font. Make the font size very large. "j" and "k" in Wingdings show up as nice swirly characters, which make a nice watermark. In the Layers window, drag this layer almost to the bottom of the list, so it doesn't cover up any other layers.

6 – Adding some effects

To add some effects, right-click on a layer, then click "Effects" (Adobe Photoshop 5) or "Blending Options" (Adobe Photoshop 7.0 and 6). I added the following effects to some of the layers: Bevel and Emboss (set to Inner Bevel), Drop Shadow, Gradient Overlay (set to Overlay mode.)

I also changed the Comco header's text colour to blue, and made the horizontal lines orange. Feel free to change any of the colours on your company logo to whatever suits your purpose.

If you can't manage to do it yourself, you can get professional logo design done fairly cheaply at LogoWorks. Have a look at their site if you're interested

Compucert IT and Computer Training

2009-05-04T11:29:00.000+06:00

Compucert IT and Computer Training

Nebula Photoshop Tutorial

2009-05-04T11:00:00.001+06:00

In this tutorial you will learn how to create a nice nebula in photoshop cs, with realistic gas clouds. Before you start you have to have

some brushing skills, because we are gonna brush pretty much. And you have to make a brush with the clouds texture. You can do that in this way:
First pick a normal soft brush and then open the "brushes window". Use the settings given above. Now you will see you get a kind cloudy brush. Save the brush by clicking on the new layer button button. Give a name and click ok. (_ view image _)

Now we can begin making the nebula. Make a 600x800 sized image, and color the background black with the paint bucket. Now make a new layer. Pick a fuzzy brush and draw some colors and stuff. Now pick the smudge tool and smooth it all a bit. You will now get something like this. Yes I know, it looks weird but this is just a bg color. (_ view image _)

Now pick your clouds brush and make some gassy clouds with colors on you color bg we just made. The clouds should look like this: black color from the middle in the middle from the clouds you have to make it the color you want, and the color that is facing the middle should be more like highlighted. This is pretty easy, it doesnt have to be like mine, you can make different shapes.

Now pick the smudge tool and smudge the clouds. Size : 5 or lower if you want it more detailed, strength must be somewhere near the 50/60%

Now you have to more like drag the colors of the clouds and take them in each other something like this. we are gonna use this technique pretty much, it gives the clouds a bit thickness.

Now we are gonna make the center lightsource, make a new layer and use the paint bucket to make in whole black. go to filter -- render -- lensflare. Make a lensflare right in the middle so you just get a nice round shape, the brightness must not be to bright, just somewhere near 60.

Now you have to set the layer mode to screen. go to filter -- blur -- gaussian blur and blur the lensflare this way so you dont see the lens shapes anymore.

Make a new layer and pick a round soft brush as big as the center of the lensflare and use it on the lensflare and give it an outer glow. (you can choose the color but it must fit to the nebula) if you done that you get something like the image in the right.

Now we must already start making the outer clouds, in this way you can see how the nebula looks like a bit and start detailing it. make a new layer and just pick the clouds brush and draw the shape you want in black , use the brush opacity on 30/40% and make it on someplaces a bit more darker.

If you done that you have to make a new layer below the black clouds you are gonna give the clouds a bit depth, pick a color, I picked a bit orange/red color. Set the opacity on 30 and go make a bit colored clouds under the black ones. Look at the image at the left of this text to see the example:

The next step is to smudge the black clouds now this will give the clouds thickness, and it looks nice.

Now we go inside the clouds again we are gonna add planets and stars in the nebula cus it looks so empty now. You have to make a new layer under the lensflare. Now pick a 1 px round brush and start making little stars with the color white opacity on 30% so you get random stars. I know this will take a while but its worth it. Now you can also add some planets to it, its not worth to make whole planets and put them in your work. You also can just use the Eliptical Marquee Tool and make little circles, and then brush in them. You have to make sure you also make the shadows on the planets. This you also can do with the brush tool. Just pick a soft brush as big as your planet, use black and just draw the shadow in it. It's that simple. Now the final step in this tutorial is improving the lensflare. Click on your most upper layer. Then use the rectangle tool to make a realy thin rectangle the color must be black set the layer to lighten. (_ view image _)

If you done that open the layers blending option...use the settings I did you can see them at the image.Now you get a gradient line that shows the light flare but still not finished you have to brush the lensflare still a bit otherwise it looks a bit fake. If you got something like mine you have to link the rectangle layer and this one with each other and go to layer - merge linked (ctrl+e)
(_ view image _)

Now you can make a layer above it and give a glow to the flare with your brush. (_ view image _)

Well the tutorial ends here guys. But you can always add new things in the nebula and detail the nebula more. I kept it easy cus its a tutorial...but you can make more and more layers. Make the nebula endless. This here is what I have got while writing my tutorial I hope this tutorial has helped you with your art.I wish you good luck with your work. (_ view final image _)

Fake 3D in Photoshop

2009-04-30T11:36:00.004+06:00

Fake 3D in Photoshop

This is one of those tutorials where we will use Photoshop not because it is the ideal tool, but as a demonstration of Photoshop’s power and versatility.
This tutorial was inspired by a request to know how to replicate a certain imagery style using only Photoshop. These referenced images were produced using 3D software, such as 3ds Max, which are built for producing such scenes. Trying to reproduce this effect using just Photoshop (not even with the help of Illustrator and its useful line-drawing and 3D effects tools) is a wonderful way to get to grips with many of Photoshop’s functions. This kind of layered concept looks very cool when combined with natural textures and glossy Web 2.0 stylings, plus Web Designer adopted it for the cover of issue 145. What’s more, faking three-dimensional objects in Photoshop has a lot of uses in design other than being a demonstration of its abilities. Apart from the fact that it negates the need to either purchase or learn 3D software, it can often allow results to be produced far more quickly.
We will have a good look at Photoshop’s Transform function in creating the illusion of perspective, as well as clipping groups and airbrushing to create shading.
This image was created at about 3,000 x 3,500 pixels in size, so any measurements in this tutorial should be adjusted to whatever size you work at. Happy faking!

This tutorial was written by Nik Ainley and first appeared in Web Designer issue 152

Download all the files for this tutorial here http://www.webdesignermag.co.uk/tutorial-files/issue-152-tutorial-files/

01 Line ‘em up

The most important aspect of getting a good 3D feel is creating realistic perspective. To achieve this, we are going to create a guide grid. There are two ways to do this. The first involves drawing out a grid such as this using the Line tool or Pen tool, and then transforming it with Distort selected to give it some perspective. This method is preferable, but the next one is almost certainly quicker.

02 A bit of perspective

The second way is to use the Vanishing Point filter, which is rather useful for perspective-based trickery. On a new layer, enter the filter and draw out a plane with a nice perspective. Then click on the little arrow at the top and choose Render Grids to Photoshop, then exit the filter and you have yourself a nice grid to use. The filter can get oddly grumpy about producing differently orientated planes, though, so watch out. The Plane Drawing tool will change colour to let you know this is happening. We explain why we don’t use the filter for the whole process in the boxout on page 60.

03 Background work

Now place and keep this grid at the top of your image. We will be turning it on and off throughout in order to match various objects’ perspectives to it. Add a gradient to the background, trying to match the angle of your grid. This in turn adds a quick bit of depth.

04 Shape time

Now to add our first object. You can use anything you want here really; simple geometric shapes work very well. Using either the Pen tool or the Shape tool, draw out a simple shape. Make it quite big so that distorting it later doesn’t introduce fuzziness.

05 Details

To make our shape a bit more interesting, we are going to add some colour and details. First of all, we made sure the shape was white, and then got a selection based on its outline (Ctrl-click on the layer’s thumbnail). We then contracted the selection by about 20 pixels (Select>Modify>Contract) and filled this with a dark pink on a new layer

06 More details

To make it a bit more interesting, we first added a layer style to this new layer. We used a Gradient Overlay, white to black, with a Soft Light blending mode from top right to bottom left. We also added a fuzzy Inner Glow using a dark grey and blending mode set to Overlay. We then duplicated this a couple of times, shrunk them down and recoloured them.

07 Merge

Now we are going to match this object’s perspective to our grid. At this point, make sure the object’s colours and details are as you want them, as it is much harder to change after this process. First merge all your object’s layers together. If you want to use this object several times, create a copy of your layers before you merge them and hide them so that you can use them again later.

08 First distortions

With your grid enabled and your merged object selected, enter Transform mode. With the Distort mode selected, choose where you want your object to be and start matching the perspective of the grid. Note here that once we have transformed our object, it will be matched to the perspective at that specific point on your canvas and can’t be moved again.

09 Use your eye

The important thing to keep in mind here is to match the angles of the Transform tool’s edges to your grid. If they are directly over a grid line then they should run in exactly the same way. If they are in-between grid lines, make sure their angle is somewhere in-between the grid lines’ angles that they are within. If your grid doesn’t have enough lines, you might have to go back and make another one. Use your judgement to decide what looks right.

10 Flat is boring

Now we want to add some depth to our object. First of all, make sure you are zoomed in at 100 per cent (if you aren’t already) and select your object layer. Now, holding down the Alt key, tap the down arrow about 20/30 times. To repeat having to do this in the future, you might want to write a quick Photoshop action that does this for you

11 Too many layers!

Now select all of these copied layers (do not select your original layer, which should now be at the bottom of the stack) and merge them together (Ctrl+E). Move this new merged layer underneath your original layer and make it all white (Ctrl+U and push the Lightness slider up to 100). You might not notice any change at this last step, but that’s okay.

12 Shading
We want to add some shading to this new layer to give the impression of depth. First of all, lock the transparency of your bottom, all-white layer. Now, using the Gradient tool set to black to transparent and Linear, drag from the left inwards and then right inwards. This part is very much down to personal judgement in terms of how you want it to look.

13 A little bit more detail

In order to add a bit more realism, we are going to pay special attention to the corners (or in this case, corner). Zoom right in on the corner of your object, and create a selection that only has one side of the object inside (however, it doesn’t matter which right now).

14 Smarten those edges up

Hide your selection so that you can see what you’re doing better (Ctrl+H), then using a big, soft brush, daub black onto your layer just outside of your selection. The fuzziness should creep over the edge of the selection onto your object.

15 The dark side

side of your object. Make sure to make it either slightly lighter or darker than you just did so you end up with some distinction at the edge. We decided to have the right-hand side of our objects always darker to give the impression of a directional light source.

16 Well, that was easy but…

If we want to use other objects with less rectangular shapes, we have a slightly more difficult job matching perspective. However, there’s a very easy trick we can use to help this. Let’s try a disc. On a new layer, draw a circle.

17 Be square
Do the same sort of tricks and effects you did to your first object to make it look a bit nicer. Once you have merged these layers together, draw a big square that just encompasses the circle on a new layer underneath. Use a contrasting colour so it stands out from the circle.

18 Much easier!
Now match your new object’s perspective to the grid as before, but make sure you have both your circle and square layers selected. Luckily, transforming them both at the same time is no problem for Photoshop. Match the grid lines up to the transform box as before. Once you have done that, you can simply delete the square layer. A circle isn’t too much of a problem, but for more complex shapes, this technique really helps.

19 Pesky shadows

Adding shadows between objects is one of the best ways at creating the illusion of depth, and also one way in which 3D programs produce amazing results much more easily than Photoshop. The easiest way to have the shadows is associated with the object they are falling on, rather than with the object they are casting. Here, create a new layer above the object you want the shadows to fall on, and group it with the object layer (Alt-click on the line between the two layers).

20 Make the icon illustrations selectable as one

In order to make the icons selectable as one object, we converted the vectors to objects. Do this by following Object>Path>Outline Stroke. Next up, we selected the objects we wanted as one, then divided (from the Pathfinder tool), ungrouped and finally merged them. Now the icon is selectable as one single object with the details as knockouts

21 Block party

We now have the basic techniques for creating the entire image. So we just have to keep creating objects, match their perspectives to somewhere on the grid, add depth and make sure the shadows are in place. This is the time-consuming part, and you can add as many objects as you like. Try to keep your layers organised into layer groups to stop yourself from going mad.

22 Float them all

Once you have finished creating and placing all your objects and are happy you aren’t going to add any more, we can add a bit more depth by giving them all a shadow. Select the outline of all your layers (Ctrl-click on your layer thumbnails while holding down Shift), then on a new layer just above your background, fill this selection with black. Apply a Gaussian Blur to this layer by about 40 pixels, move it down and to the right a bit, then drop its Opacity until it looks right.

23 Flatten it

To add a few finishing touches to the image, we first need to flatten the entire thing. Do this and copy the result into a new document. It’s best to do these final bits separately to your layered file so you can go back and change things if necessary. Run a Gaussian Blur over your new flat layer (about 30 pixels or so) then fade (Ctrl+Shift+F) to a Soft Light blending mode of about 30 per cent Opacity.

24 Depth of field

Now to add some fake depth of field. Duplicate your image and run a Lens Blur filter on it (40 pixels or so). Add a Hide All Layer Mask to this layer (hold down Alt while clicking the Add Layer Mask button). Use a white to transparent gradient, or a big, soft brush to start adding white to this Layer Mask to make parts of the image blurry. Try making the top or the bottom of the image blurriest or specific objects that appear to be further below the others.

25 Final touches

Flatten your two layers together and run a light Unsharp Mask on them (settings of 30, 0.6, 0 should do) and make any final tweaks to lightness or colour you think the image needs. That should be it; hopefully, you’ll have something that looks like our image.

In detail
Not quite perfect

There are several different ways that doing 3D in Photoshop makes things a lot harder than using a 3D program. Apart from the fact that all the lighting and shadowing has to be done manually and won’t be as accurate as with a 3D program, we are much more constrained in terms of moving things around.
To demonstrate this, the shiny object has been moved from its intended position in the image below. As you can see, its perspective is now completely wrong and it doesn’t fit in with the rest of the image at all. However, if we wanted the object here, we would have to reproduce it as a flat object and then distort it to match the grid in its new position.

Quick tip

A clever way of bringing interest to this sort of image is by adding details to the front of your objects. Make sure that you do this before adding perspective to them so you can do the distorting all in one go. Try adding shapes, patterns, textures or text to your objects to make them livelier. Feel free to vary the colours, but try to keep an overall colour scheme in mind.

A Comprehensive Introduction to Photoshop Selection Techniques

2009-04-30T11:10:00.002+06:00

A Comprehensive Introduction to Photoshop Selection Techniques

Have you ever had difficulties making selections and thought there was a better way? Let's review both quick solutions, and on the other side, comprehensive and details techniques for making selections. Each approach has it's place in your workflow. The more methods you know how to use, the faster and more effectively you'll move in Photoshop.

Selection in Photoshop

Photoshop selects pixels based one of the three properties, as shown in the image below:

Chroma: is the color of the pixel. Color of a pixel is the level of RGB values and color based select tools like the Magic Wand. Select by color uses the RGB% as a criteria to group pixels based on the set tolerance values.
Luma: is a selection based on Illumination levels. Illumination levels are whiteness of the image, which is nothing but higher values for all the three R, G and B channels. Photoshop doesn't have a native interface for a Luma based selection, but many existing tools can be hacked to get a similar result.
Masks: are based on spatial position. Pixels are selected and discarded or masked by a parallel layer bound to corresponding image layer. Masks are grayscale and brightness of the mask is called an Alpha level, which is the degree of opaqueness of the corresponding layer pixel. It's also called the Transparency/Opacity channel as in RGBA etc.

A Note on Masks

In this article, words like Masks and Alpha will be used interchangeably. The process of transferring images to layer masks will be shown once and then used repeatedly without explicitly mentioning thereafter.

Step 1

Open a new image that you want to use as a mask. Double-click the background layer and create a new layer, which is "Layer 0." Make a new layer, which is "Layer 1," on top of it and fill with a uniform color, then hide "Layer 1."

Step 2

Go to "Layer 0" and click Select > Select All (Command + A) to select all pixels. Next, click Edit > Copy (Command + C) to copy all pixels to the clipboard.

Step 3

Go to "Layer 1" and create an empty Layer Mask. Initially an all transparent Layer Mask will be created. Alt-click the layer mask to see it in the canvas.

Step 4

With the Layer Mask visible, paste onto the canvas by clicking Edit > Paste (Command + V). A grayscale version of the copied image will be pasted in as the layer mask.

Step 5

Click on the fill layer thumbnail (not mask) to see the result. Any image can be applied as a Layer Mask to another layer. The opacity of the layer will be controlled by grayscale level of the mask.

More on Masks

The easiest way of creating a Layer Mask is to click the Add Layer Mask button with something selected on the canvas. The selection will be saved as a layer mask attached to the current layer and everything outside the selection marquee will be masked and hidden.

Activate Layer Masks

Alt-clicking on the Layer Mask makes it active for editing. Only activated layer masks can be edited which are represented by a thin white outline around them.

Add Shapes to Layer Masks

Dragging any shape onto the canvas while a layer mask has been activated will draw it on the Mask instead of the layer itself. To draw it again on the layer we need to deactivate the Mask by clicking on the layer thumbnail.

Add Brush Strokes to Layer Masks

The same is true for brush strokes. Anything painted on the canvas with a Layer Mask selected will draw it on the Mask instead of the Layer. We can use this property to select objects with irregular boundaries from backgrounds, by painting everything else black on the Layer Mask. White brush strokes will reveal and blacks will conceal.

Copying a Layer Mask to Another Layer

Finally, we can transfer the Layer Mask to another layers by simply loading it as a selection (Command-click) and unloading as we did in the first step by clicking the Add Layer Mask button. Or by Alt-dragging the mask to another Layer (Not Shown).

Boolean Operations with Selections

This example shows how to Load, Add, Subtract, and Intersect selections between overlapping layers just with quick thumbnail clicks.

Load Pixels to Selections

In "Layer 2" Command-click to load a fill as a selection. Any pixel which is not transparent in "Layer 2" will be loaded as a selection. This is not the same as copying the layer, only its outline. The green fill shows the selected region although you will get only the surrounding Marquee. Let's call this state (with "Layer 2" selected) the initial state.

Addition

With the "Layer 2" loaded as a selection, Command + Shift-click on "Layer 1" to add it to the selection. Now non-transparent pixels of both "Layer 1" and "Layer 2" are combined as the new selection. Notice the small plus sign in the Command-Click box.

Subtraction

Revert to the initial state and Command + Alt-click on "Layer 1." This will subtract any overlapping pixel of "Layer 1" from the current selection of "Layer 2." Notice the minus sign.

Intersection

Revert to initial state and Command + Alt + Shift-click on "Layer 1" to keep only the overlapping pixels as a selection. Notice the X sign. If the layers are not overlapping this action will deselect all.

Garbage Masks

Garbage Masks are created to roughly isolate the 'region of interest' from rest of the image. Further trimming is carried out inside the Garbage Mask with precision.

Vector and Raster Selections

Draw an outline around the region of interest in the image with any of the Lasso Tools and double-click to complete the selection. A Garbage Mask needs to be saved for further refining, which can be done both as a Layer or Vector Mask. We must choose it depending on complexity of the outline and how we are planning to trim it later on. With the Lasso selection click Add Layer Mask to save it as a Layer Mask.

Alternatively, we can also save the selection as a Vector Mask which can be later refined by working on the shape spline that defines its outline. With the Lasso selection still intact (2), go to the Paths tab (3b) and click Make Working Path from the Selection button at the bottom. This will save the selection outline as a Shape Working Path.

Now load the selection again, and return to Layers tab. Click Add Layer Mask once to create a Layer Mask (Command-click to load again) then click the same button( 6b) once more to Add Vector Mask. Saving selections as Vector Masks or Shapes saves memory.

Selecting with Vector Mask

Click on the Vector Mask to activate it. Or selecting any of the Shape tools will make it active. Vector Masks are modified by adjusting the spline positions (Control Points) and curvature (Tangents). You can disable, delete, or save the Layer Mask with another Layer. The Convert Point tool is most suitable for altering Vector shapes and Paths. Click and drag on the handles, then Command-click on control points to move them.

Once a acceptable outline has been achieved use the Add Points tool to refine and further match the outlines. Delete points when necessary. Dragging handles with Command + Shift will lock their relative slopes. Drag directly on the Control Point to reset handles. Regular curvy shapes are best to be extracted with this process.

This method is also best in situations where boundaries are not clearly visible.

Select by Color Range

Selecting by color is the fastest way to Chroma select. Click Select > Color Range and select a color with the Eyedropper Tool available. Once selected certain shades can be removed selectively with the Minus (-) Eyedropper or again added with the Plus (+) Eyedropper. There is also a preview window that displays the selected region or the original image.

This tool can be used to setup Garbage Masks around the subject and later refine it with editing the Mask. Select by color is not a one-click solution, but does a great job in minimizing manual work.

Chroma from Channels

Color information of each type are stored in as separate channels, which can be viewed in the Channels Tab. We can use the channel wise variations in color intensities for selecting objects in the image. This process is helpful only when background and foreground have separate color distribution in at least one channel.

Advanced Chroma

In the Histogram we can see that the blue channel is predominant in the image and it extends up to the highlights where other channels are very weak. Our subject here is the patch of vegetation in foreground.

Picking the Best Channel

A simple observation of the three channels tell us that the blue channel has the highest contrast between the Sky and Grass. We are going to exploit this property to separate the two. Duplicate (Command + J) the Layer and go to the Blue channel of the Copied layer. Click Image > Adjustments > Curves or Press Command + M to apply curves modification on the current channel.

Applying Curves

Select the point closer to the dark grays of the channel and drag it (2) forward in the x-axis (horizontally) keeping y-axis at 0 (shown by the small circle). This will make the darker pixels uniformly more darker. It shouldn't affect the background, drag it a little back to left if it does.

Next, select another point closer to the White Point, drag it (3) back towards the midtones keeping the y-axis(vertical) at maximum (shown by the small circle). What we are doing is saturating the dragged range of blue up to 100%. Make sure the whole background turns white or almost so, and there is a very high contrast between the Grass and Sky.

Channel as Mask

Command-click on the channel thumbnail to load the channel into the selection. Areas which are predominantly blue will be selected totally and the rest according to respective degrees. Areas which have no blue (the black parts) will be left from the selection. With the selection in place go to the Layers tab and click Add Layer Mask to save the selection as a Mask.

Inverting the Mask

Press Command + I to invert the Layer Mask.

Selecting by Brushing on Masks

Brush based selection is used to extract foregrounds with complex outlines with accuracy. It is also used to refine selections made with other techniques. And it also support transparency (softness).

Erasing is probably the first thing that comes to mind when we talk about brush based selection. But it is not a recommended process at all. Erasing is a destructive process and can permanently damage the original image as recovery is limited only to a number of undo levels we have set.

Brushing with Layer Masks

Here too Layer Masks can be used, to preserve the workflow of Eraser and additional possibility of recovering removed portions if they are needed. Painting on the Layer Mask with a White or Black will reveal or hide the contents respectively. We can brush out backgrounds in the same way as in using the Eraser tool and get it back by painting with White.

No Feedback

When brushing the mask we may sometimes trim off relevant parts accidently and keep focusing on the wrong silhouette only to be discovered later. This is highly probable when foreground background have similar hues and there is no immediate visual feedback.

Immediate Feedback

This problem can be averted by following a simple rule of keeping a multiplied duplicate of the current layer in the background as a guide layer. Multiplied gradient maps will show-up as high contrast versions of the subject outlines if violated.

Luma Select

As already mentioned Luma is the illumination levels of an image. Luma can be used to extract components from the image which have a considerable brightness difference than others.

Simplest Luma Hack

Unlock the background and make a duplicate of it, then hide the original Layer.

Apply Threshold

Apply a Threshold Adjustment Layer on top. You will notice that some parts of the image have been turned instantly black and rest are pure white, and there are no intermediate grayscale levels.

Adjust Threshold

Adjust the Threshold Slider and try to enclose the subject or background (whichever is darker) in black. Hide the Threshold layer and look at the original image for guidance when required.

Merge Layers

Command-click to select the top two layers and Merge them into one. Select the bottom layer, make it visible and create a blank Layer Mask.

Add Layer Mask

Copy the merged image and paste to the Layer Mask, following the process discussed above. We have our Layer Mask ready, but in most cases there will be holes and parts of our background visible. Use the Mask Painting technique discussed above to make it tidy. Invert if necessary.

Luma Select with Transparency

The Threshold technique discussed above is very fast to implement, but is only useful for extracting solid objects as it lacks transparency. The following method can be useful in situations where we need Luma extraction with transparency. Here we are going to remove the ice-water from the rest of the rocks.

Using Luma to Mask with Transparency

Unlock and Create a layer from the background (1). Apply an Adjustment Layer Black and White on top and then a Brightness-Contrast Adjustment Layer above it.

Reduce Brightness

Select Use Legacy mode and slowly move the Brightness slider to left, try to get as many black areas from the rocks as possible. This process will reduce the brightness of the Water too so don't overdo it.

Increase Contrast

Now slowly increase the Contrast slider to the right. With each increase dark-grays will turn to black and lighter grays will glow more brightly. We are going to get the whites as opaque and grays as semi-transparent. Try to get both Whites and Grays where necessary. Over increasing the contrast will make it look like a Threshold Layer, if so there will be no translucency left.

Merge the Layers

When satisfied with the results Merge the top three Layers. Go to the background layer and Add a Layer Mask and copy the merged Layer into the Layer Mask.

Yet Another Possibility

Other than the above two procedures there is also another way of Luma based extraction using the Lab color method.

Lab Color Technique

Open an image and turn it to Lab Color mode by clicking Image> Mode> Lab Color. Goto Channels Tab and find the lightness channel or press Ctrl+1 to directly select it. This is where the illumination levels of all pixels are indexed in the Lab Color mode. You can play with that channel and try to isolate some element from the background. Don't forget to duplicate the Layer or the Channel before you alter any channel.

And filters that doesn't work on the image in Lab Color mode works on the Lightness channel, and yield almost similar results.

Conclusion

Photoshop has quite a few options when it comes to selection techniques. Try applying some of these solutions in your workflow to increase your productivity and effectiveness

2009-04-30T11:05:00.002+06:00

A Comprehensive Introduction to the Type Tool

The Basics

Type is the Photoshop tool to create vector outlines and mathematical shapes to define the symbols of a typeface. It's located on the standard Tool Bar as a tiny T. The keyboard shortcut of this is the letter (T), and if you hold click over that tool (or Shift + T several times) you'll see four options: Horizontal Type, Vertical Type, Horizontal Type Mask and Vertical Type Mask.

Horizontal Type Tool: This enables the tool to create horizontal standard text (left to right and top to bottom).
Vertical Type Tool: Enables the tool to create vertical text (top to bottom and right to left), useful to write in oriental languages like Japanese or Chinese, or if you want to experiment with typographic design.
Horizontal Type Mask Tool, Vertical Type Mask Tool: Creates a Quick mask using the Type shape as a Selection. We'll see more application of these modes shortly.

Once you've select your desired Type Tool, you'll notice the mouse cursor changes into the standard Type cursor, something like an I, this means the document is ready to put text on it.

Creating a Type Layer

There's two ways to create a text layer, which are Point and Paragraph Type:

Point Type: This option will create a Type layer into a single line, the break lines must be placed by you hitting Return or Enter in the keyboard.
To create a Point Type layer select your desired Type Tool (Horizontal or Vertical text), and click one time with the cursor anywhere you want to put the text in. Then just start writing, when you have finished to add the text you can either click the tiny Commit button on the Option bar, hit the Enter key on the numeric pad of your keyboard or just hit Command + Enter.

Paragraph Type: This option will create a Text layer with text wrapping into a bounding box. Is pretty useful for both print and web design. To add a Paragraph layer you must create the bounding box first. You can Click and Drag the cursor diagonally until you've got your desired size.

Doesn't matter if there's a background image, or any other object, the Type tool will create a new layer for the new text. Besides, you can easily switch between Point to Paragraph type or vice versa by going to Layer > Type > Convert to Paragraph Text / Convert to Point Text.

Resize and Transform

Obviously, you can resize and transform each text layer as any other, do it by using the Move Tool (V), selecting the layer and Showing Transform controls. Anyway this kind of transforming will stretch, enlarge, or badly distort the type shape.

If you really want a good result on a Paragraph Type layer, you must do the following: Select the Type tool, and click over the Paragraph text, then go to one of the transform handles and click and drag to resize the box, the text will automatically reflow inside the new box. Shift-drag to preserve the proportion or keep a constant rotation increment, Command-drag to scale the type, Command-drag on a center handle to skew the type box, and Option-drag to resize the box from its center.

Character Options

Basic Formatting

It's time to move forward. After typing some text, you obviously want to change the font face, color and more, this is really simple. First show the Character window by going to Window > Character. The Character window has several Options to format characters, following there're some examples about formatting Font Family, Style, Size and Color (you must double-click on color sample to see the color picker). After committing the type, you can either click on the text miniature in the Layers panel and change the entire text layer format or with the Type tool selected, click on the text layer you want to edit, make a selection and change the character format of the selected text.

Kerning and Tracking

You can easily customize both Kerning and Tracking in Photoshop. Select a text layer or make a text selection and look in Character window for the Kern and Track values.

You're able to customize the kern (space between specific pairs of characters) by selecting between Metrics Kerning or Optical Kerning. Metrics will automate adjust kern using the included pairs of the font you're using. Optical will adjust the kern based on the font shape. Besides you can customize the kern values by typing a numeric value (positive or negative) in the Kerning field or select one of the presets.

Tracking is very similar, just set a numeric value (positive or negative) to increase / reduce space between the letters. Besides you can combine both Kern and Track to obtain a nice result.

Vertical and Horizontal Scaling

Scale the text layer both horizontally and vertically by changing the Scale values in the Character window. Just as advice, I almost never use those scaling values because when you distort a typeface you're distorting the shape itself, and sometimes creating an undesirable result, look at the image below, the nice Century Gothic's 'O' character is a perfect circle without scaling it, and it turns into an oval when you change the scaling values. Besides notice the shapes aren't regular, i.e. the line width is wider at top and bottom of the 'O' character when you change the vertical scaling.

Baseline Shift

This is very useful when you want to make your text layer fit somewhere, such as around an image. Change this value to move the baseline of a text selection above or below the baseline of the rest of the text layer.

Faux Bold and Faux Italic

Photoshop has the option to auto create a Faux Bold and Italic variation for any typeface, pretty useful sometimes, but you must take special care in order to distort the type shape as little as possible. Below there are examples of Faux Bold on the Arial typeface, which isn't distorting the type shape that much, but applying Faux Italic on Myriad Pro actually distorts the original italic style of the typeface (look at the 'a' character for example).

Font Variants and Text Decoration

You can easily customize the font variant, Capitalizing all the characters, or convert it to Small Caps. To do so, just select a text layer, or make a text selection, and click on the respective button in the Character Window. Besides, you can edit the text decoration as Underline or Strikethrough.

Anti-aliasing, Where and When

Anti-aliasing produces smooth-edged text making the text borders blend into the background layer/image. There're four anti-aliasing options: Sharp, Crisp, Strong and Smooth, and obviously the option None. Often, you must apply some anti-aliasing to every text layer in your design for easily reading in particular into Serif typefaces. There're some exceptions when you should set None as anti-aliasing value, i.e. when you're adding sample text for web design content, when using a pixel typeface, etc.

Leading

Either in both Point or Paragraph text layer you can adjust the leading (vertical space) between lines. Leave it as an automatic value by selecting (auto) for the Leading value, or type a custom value to adjust the space by yourself.

Paragraph Options

Basic Alignment

Since a Paragraph Text Layer can contain multiple lines, formatting them is very important for the quality of any design, that's what the Paragraph window is about. Open it by going to Window > Paragraph. Create a paragraph text layer, type something, commit the text and click on the layer miniature to activate the options for the entire text. Alternatively, you can make a text selection by using the Type tool, and apply paragraph formatting only into the selected lines of your text layer.

Of course, the basic feature on Paragraph text is Align. You can easily customize the alignment (Left, Center, Right or Justify) by clicking on the icons in the Paragraph window, besides there are three more options for Justify Alignment, changing the alignment of the last line of the text layer or the selected text (Left, Center, Right).

To customize the Justify alignment, go to the Paragraph palette menu and click on Justification, there you'll be able to configure Word and Letter Spacing, Glyph Scaling and Auto Leading percentages.

Hyphenation

The settings you choose for hyphenation affects the horizontal spacing of the paragraph, making it wider or stretching it, depending on the words of each line. To apply hyphenation into a Paragraph Text Layer, just choose the language in the Character Window, and activate Hyphenation in the Paragraph window. To disable Hyphenation, just uncheck the option box in the Paragraph window.

Most of time the automatic Hyphenation will work just fine for you, but sometimes you'll need to customize it. To enable advanced Hyphenation options click on the Paragraph panel menu and select Hyphenation. You'll see the following options:

Words Longer Than # Letters: set the minimum number of characters for your hyphenated words; i.e. if you set a value of 5, the word 'photo' will be not hyphenate, but if you set the value '3' you'll get 'pho-to.' The default value is '2.'
After First # Letters and Before Last # Letters: specifies the minimum number of characters at the beginning or end of a word that can be broken by a hyphen, i.e. if you set any of those values as '1' you could have an undesirable hyphenation, such as "h-ello" or "actio-n." By default both values are set as '2.'
Hyphen Limit: set the maximum number of consecutive lines on which hyphenation may occur.
Hyphenation Zone: set a distance from the right edge of a paragraph.
Hyphenate Capitalized Words: prevents hyphenation of capitalized words.

Indent and Space Between Paragraphs

Indenting is quite easy. Just select a text layer, or make a text selection, and write or slice both left or right Indent values. You can indent a text selection left or right, or indent the first line of a Paragraph as shown in the second image below.

Besides, you can easily add space between paragraphs (before or after) in the Paragraph window, just type a custom value in the Space Before or the Space After paragraph.

Warp Text

One of the most powerful features of the Type Tool is the capability to Warp any text layer according to your particular needs. To Warp a type layer double-click on the Text Layer Miniature and click over the Create Warped Text button in the Options Menu. You'll be prompted to select a Warp Style orientation (Vertical or Horizontal), then you'll have three sliders to increase or decrease the values of Bend, Horizontal and Vertical Distortion. Below is a single example of how to warp Point text by using Arc Warp and different values of Bend and Distortion.

Of course you can Warp a Paragraph Text Layer as well, see the image below. It shows a simple way to get the famous "Star Wars" intro effect just by increasing the Vertical Distortion and with the help of a small Gradient Layer Mask.

Warping text is really funny, try it with different warp options. There're a few restrictions though, you cannot Warp a Text Layer if you applied previously Faux Bold, or Faux Italic styles in the Character panel.

Type on a Path

You can create a type layer that flows along a work path created by using the Pen Tool or Vector Shape Tool. To create a Type on a path, first draw a path by using the Pen Tool, then select the Type Tool and place the cursor anywhere on the path, you'll see the shape of the cursor changes the baseline for an S shaped line. Click on the path and write some text.

Path on a Shape

The process to add a text layer on a vector shape is the same. First, ensure the vector shapes is selected, do this by using the Path Selection Tool to select the shape. Once the path is visible, select the Type Tool and click anywhere over the path and write something. You can edit any Character option, a good example is increasing the Baseline Shift a little bit to create a space between text and shape.

Edit Type on a Path

Sometimes you'll need to change the orientation and position of the type on a path. For this, select the Path Selection Tool, place the cursor over the text until you get a little black arrow on the type cursor, then Drag the cursor below the baseline to flip the type. Use the same method to flip the text and place it inside a shape. Obviously, you can add any layer style to the text layer and this will continue being editable.

Convert Type into Shape

Several times we'll need to be able to change or modify the shape of a character, for several purposes, like logo design, Photoshop makes this easy. Just create a text layer or select one and go to Layer > Type > Convert to Shape. This tool will convert the type into a Vector Layer Mask, which can be edited as any other vector shape. You can also create a Work path by going to Layer > Type > Convert Work Path.

Type Mask Tool

Finally, you can do most of the described features of the type tool, but using Selections instead type shapes. For this click and hold on the Type Tool until more options appears. There select Horizontal (or Vertical) Type Mask. By selecting this tool you'll be able to create a quick selection with the shape, which is pretty useful on either Layer Mask or Quick Mask mode. Below is a small example of a word written using the Type Mask Tool. I used that selection to create a Layer Mask over a picture.

Conclusion

Type tool is one of the most powerful features of Photoshop. With practice you'll become a master after playing with characters and paragraphs. There are no limits of what you can create with this wonderful tool.

3D Blocks Background Tutorial

2009-04-29T17:25:00.000+06:00

» 3D Blocks Background Tutorial

Start a new document by pressing CTRL + N. I used 500 X 500 (you can make it any size), than go to Filter -> Render -> Clouds.

Now go to Filter -> Pixelate -> Mezzotint and use the following setttings.

After that, go to Filter -> Blur -> Radial Blur and apply these settings.

Once that's completed, go to Filter -> Stylize -> Extrude and use these settings.

Lastly, go to Hue/Saturation by pressing CTRL + U and use the following settings, you can play around with these if you want other colors.

This is how your finished background should look.

» 3D-Photo effect

Published 05/19/2006 | 3D Effects |

In this tutorial I will try to explain how to create a
3D effect from a 2D-image

1. This is the original image

2. Start with creating the "Photo-frame" by drawing a selection with the Polygonal Lasso Tool (L). Save the selection as "frame"

3. Now, mask the details that is outside the frame you created in step 2.
When you're done, copy the masked objects and paste it into a new layer

4. Creating the Photo frame
Select the first layer with the original image and Load the "frame selection" that you saved in step 2. Select inverse and hit Delete. Select inverse again and go to
Select > Modify> Contract selection by 15 pixels. Save that selection as Innerframe.

Now, load the selection "frame" and then load the selection "innerframe" and chose subtract from selection, an d it will look something like this.

5. Add a new Layer and fill it with a gradient white to light grey. White top left to light grey bottom right.

6. Creating a shadow.
Add a new layer below the "frame layer", load the selection "frame" and fill it with black. Deselect and apply the gaussian blur filter with amount 5.

7. Now go to edit > transform > skew and drag it down a little bit on the right side.

8. Set the opacity to about 60%

9. Now, fill the bottom layer with any color you like and you're done!

2009-04-29T16:59:00.002+06:00

Professional Tips for Improving Photoshop’s Performance

In this tutorial, we’ll take a look at the Photoshop Preferences to increase our Performance. With more and more features and important improvements, Photoshop gets more effective than ever. On the other hand, depending on the Photoshop version, features for working with 3D imagery, motion-based content, and advanced image analysis, greatly increase the requirements of both Graphics and Hardware.

There’s nothing worse than being detained from your workflow because of performance deficit. That’s why you should check out this tutorial to work more efficiently without wasting your time and improve your workflow and designs!

What you'll learn

First, we’ll take a look at the Photoshop requirements and the basics on how to increase performance without touching Photoshop. Later we’ll jump into Photoshop and take a look at the Preferences and how to set them up wisely. Since I’m currently working and experimenting with the new Photoshop CS4 version, all settings or images apply to the latest version. There could be some minor differences to other releases, but most of these tips are all-purpose. Let’s take a look at what you’ll learn:

Basics

The first thing which comes to one’s mind is the CPU, Memory and Hard disk, but with the current release Adobe designed new features to additionally take advantage of your display card’s GPU (Graphics Processing Unit) to accelerate performance. New features like: Smooth display at all zoom levels, Animated Zoom tools, Rotating the Canvas, the Pixel grid or the possibility to move colors matching to the GPU, require additional performance and adjustments.

Photoshop GPU features

Preparation

The first thing to do, is to update your display card’s driver and DirectX since we are working with images, motion graphics or 3D objects. Unfortunately, we don't have much control over the Video-RAM, but we can update the drivers to help the system utilize the given power.

A clean and ideal system and up to date operating system is a must-have. The second step is to defragment your hard drive and close all unnecessary processes other than Photoshop. Most of the time you can’t even see any difference or increased performance, but you can use the built-in monitoring tools (MAC: Activity Monitor, Windows: Task Manager) to experiment, control and understand what happens.

Making sure the basics are properly processed, should give us a good foundation before jumping into Photoshop. You can take a look at the different tools and resources which I think should help you get started.

Photoshop Requirements

It is obvious, that your PC or Mac should definitely meet the standard requirements. This tutorial won’t help you increase performance where no performance is available. Instead, we'll try to allocate memory, set scratch disks, change the properties in different sections and monitor our processes to make use of wasted performance. Nowadays, it shouldn’t be a problem to find, buy and work with a decent system, so we won’t talk about hardware and what system to choose. But feel free to leave a comment, if you have any questions.

With different Photoshop versions to choose from, you should think about why you are using the current version or why you want to upgrade to a specific version. If you are only working with still images and don’t plan or need to integrate 3D objects or any other special features, you should think about getting the standard version. On the other hand, users who work in these areas should consider buying or upgrading to the extended version. Each version has special requirements besides the general requirements, which will later affect the performance on your system.

Photoshop Preferences

Now it’s time to jump into Photoshop. The default configuration are neither bad, nor perfect. Each one of us has different needs and a different workflow, that’s why we’ll take a look at all the different settings to make sure each one of us is happy.

Since some features are not necessarily required like the Zoom or smoother Hand moving feature, we’ll try to disable different features or plug-ins to reduce the launch time, optimize other preferences and make the most of our RAM and even more. Open the Preferences by going to the Photoshop menu (Mac) or Edit > Preferences (PC) and let's start.

After the Preferences Window opens, you'll find a simple and easy to choose list on the left side. These are the different sections that we'll work off. You can access these sections from the General Preferences Window as we did or by selecting them directly by going to Edit > Preferences > Section (Windows) or Photoshop > Preferences > Section (Mac).

General

The first General section helps you configure some of the more common features that affect the workflow. You should spend some time experimenting with these settings to find the best solution for you. The flick panning is a good example. Although it's a cool feature, it's not necessarily speeding up your work. You can simply disable the features and later enable them whenever you want to use them. Note, that the changes take effect the next time you start Photoshop.

Color Picker

Let's you choose between Windows, Mac or Adobe Color.

Image Interpolation

Let's you choose between Nearest Neighbor, Bilinear or Bicubic, which focus on different ways of constructing new data points within the current range.

Options

Some of these features heavily rely on RAM. Try to experiment with the options to keep a little dynamic while disabling unimportant features, which are intended to catch one's eye instead of being useful.

History Log

History Log is disabled by default, but it could be useful in some cases. By enabling it, Photoshop will log all your steps while working and save them in an external file. This could be interesting for tutorial writers or anybody who wants to track one's workflow. Note, that this feature will require additional RAM.

Interface

This section provides different options for interface style and management. By playing with these settings, you can style, dynamically open, close or move different panels or palettes.

General

These options help visualize the interface for easier navigation and better understanding.

Panels & Documents

If screen size doesn't permit you to display all needed panels at the same time, you should choose to remember panel locations and close or collapse your panels when clicking away. That way you'll increase your workspace. Note, Photoshop needs to store the information in the RAM which will affect the performance.

UI Text Options

Let's you choose your Interface language and font size.

File Handling

File Saving Options

Each time you save a file, Photoshop adds additional information or even small thumbnails for better compatibility and preview. The more information you add to your file, the bigger it will get. You can set the options to Ask for better control. Photoshop will then ask you what to do before saving your file.

File Compatibility

You can additionally experiment with the options for RAW-files and Version Cue. The Camera RAW Preferences provide useful options like the RAW-file Cache size or TIFF / JPEG Handling. You should spend some time experimenting with these settings considering your Camera and workflow.

Version Cue

If you want your projects to be compatible to Version Cue, you should enable the feature, otherwise disable it for smaller file size.

Recent Projects

At the bottom of this section, you'll find an option to set the the number of projects you want to be listed in the recent file list (File > Open Recent).

Performance

Our main focus in this tutorial is the performance. So far, we were able to increase performance slightly. This is the place where we can boost our performance dramatically. Setting everything to the maximum isn't the best solution. Therefore, read the following paragraphs which should help you decide.

Memory Usage

The first and easiest way of increasing Photoshop performance is allocating more memory to Photoshop by moving the slider to the right. RAM is one of the main requirements besides your processor speed and hard disk space. Depending on your system, Photoshop will be able to work with up to ~1,6GB Ram (32-Bit) or up to ~3,2GB (64-Bit).

Most of the modern PC Systems are 64-Bit ready, so if you ever wondered why you can only use ~1,6GB (32-Bit) or 3,2GB (64-Bit), though you have 4GB or more, you should consider an upgrade to a better OS and the 64-Bit version of Photoshop. As you can see, upgrading your RAM only increases performance when working with the proper OS and Photoshop version. When planning an upgrade, always remember that your OS and other processes need RAM too.

History & Cache

By default, Photoshop saves 20 history states. It is difficult to weigh whether you should decide in favor of history states or performance. If this is the first time you’ve heard about the history states or rarely use them, you can set it to 5 or 10. Other users should keep an eye on their workflow to find the best level.

You should consider Image-cache, when working with high-resolution images. Caching Images decreases time needed for updating the image while working in different zoom levels. Photoshop creates images with lower resolution which are used to update quickly. The higher the Cache level, the more levels Photoshop will create for you to display. Which will require more RAM. You can set your value between 1 and 8. I recommend using this feature when working with high-resolution images. When working with smaller images, it's not necessarily required.

Scratch Disks

When your computer doesn’t have enough RAM to perform an operation, Photoshop uses free space on any available drive to save special files. Photoshop provides the functionality to set up to four scratch disks, which are similar to virtual memory.

By default, Photoshop uses your primary hard disk as the scratch disk. You should change that, because it can slow down performance if your operating system uses it to for its virtual memory needs or space is limited. You should prefer internal hard disks instead of external or removable drives, but make sure you set the scratch disk to a defragmented hard disk which has plenty of free space and high revolution.

Photoshop requires at least 1GB of free disk space, but more is better. With a maximum of 64 EB you should be able to boost your Performance using scratch disks, that's for sure. In most cases one or two extra drives should be sufficient, but investing in a powerful RAID systems should definitely increase your performance when working on bigger projects with huge file sizes.

GPU Settings

Photoshop automatically detects your display card. If it is OpenGL compatible, Photoshop will give you the option to enable OpenGL Drawing. By clicking on Advanced Settings, you'll have additional options for better OpenGL control.

Advanced Settings

The Advanced Settings window should give you an insight on what the GPU is capable of and what its tasks are.

Cursors

I've never touched this section and I think I'll never change the appearance of the cursors. I don't think this will affect the performance, instead this is just an extra option Adobe offers designers to customize their Photoshop appearance.

Transparency and Gamut

Transparency Settings

Allows you to select a transparency grid size and to choose a color scheme for the transparency grid which shines through your layers.

Gamut Warning

As soon as an image moves out of the CMYK color space, this color will mask the specific areas.

Units and Rulers

Units and Column Size

This section allows you to change the different measurements for units, types, rulers or column size. For example, change your type measure from points to pixel or vice versa. Depending on the final output, you should prefer pixels for screen output or pica, inches or points for print.

New Document Preset Resolutions

When creating a new document, Photoshop asks you what resolution to work with. You can set the default values here.

Point / Pica Size

Choose between PostScript or Traditional.

Guides, Grids and Slices

You can't create high quality designs and layouts without using guides, grids or slices. They help you align and measure your designs perfectly. Different Images with different colors could cause problems detecting the guides in the image. This sections gives you some options to customize your guides, grids and slices for better visualization.

Plug-Ins

Each time you launch Photoshop, it loads Plug-Ins and presets with it. Some of them are useful, some not. We can temporarily disable Plug-Ins which we rarely use and enable them at a later time whenever needed. To disable a plug-in, navigate to the Plug-Ins folder inside the Photoshop install folder and then insert a ~ in front of the plug-in name.

Plug-Ins Folder

By organizing your Plug-Ins in folders, and adding them to this section will, it will ensure better control and better performance. You can later disable the whole folder instead of searching for the single Plug-Ins.

Extensions

Adobe Kuler is one of the cool extensions integrated into Photoshop. By disabling these options, Kuler won't be able to connect and download the color schemes from the Kuler network. If you aren't using any of the extensions, you can disable this feature and save some RAM in the background.

Type

This sections of no importance for any notable increase in performance, but offers options for Quotes, Text types and Preview sizes. This is another section where I wouldn't change anything. You could change the size of the Font Preview Drop-down menu, but that could cause delays.

Tips and Links

Thumbnails and Snapshots

Each layer has its own Thumbnail to preview what's on the layer. You can change the size of the thumbnails or even disable them. I wouldn’t disable them, but if you are working on a slow system with less RAM you should definitely consider smaller thumbnails.

In addition to the History states, Photoshop offers Snapshots which are very useful, but they are stored in your RAM which makes Photoshop slower. Again, if you’ve never used this feature, then you can disable it.

Layers and Channels

The number of layers and alpha channels in your file can also impact on the size of your file or the time needed to save it. By deleting empty layers or merging them together, you can minimize your file size and the time needed for saving and opening the files.

Fonts and Styles

If you like to add hundreds of Fonts to your library, Photoshop will require more time to load all the fonts while it starts. It's better to clear out unused fonts. You should try out some font management utilities like Suitcase (Windows and Mac OS) or Font Agent (Mac OS). This also applies to brushes, gradients, custom shapes, styles, patterns and other freebies you download. Clearing your lists will definitely help shorten launch time.

Conclusion

I hope this tutorial was useful for you. Feel free to leave a comment, if it helped increase performance on your system. I'll try to answer your questions, should there be any. Thanks.

How to Turn Humdrum Photos into Cinematic Portraits

2009-04-29T16:52:00.003+06:00

How to Turn Humdrum Photos into Cinematic Portraits

There are a plethora of ways to treat a portrait for a myriad of uses, but that is for another feature. Let's tackle adding drama or a cinematic quality to a regular, humdrum portrait. Let's even throw in a little bit of faking HDR. That way if you work on a project that requires a stunning shot without the stunning photography, you'll be able to cobble something together using your mad skillz!

Step 1

Open the man image from iStockphoto and separate him from the background. Use whichever method you're comfortable with, I would usually use the Pen Tool, but I'll be honest, as he's got no hair to worry about and the background is white I kinda cheated. I used the, ahem, Magic Wand Tool to select the white. I then Feathered the selection by 1 pixel (Select > Feather), expanded it by 2 pixels (Select > Modify > Expand) and hit delete 2-3 times until the white halo disappeared. Call this layer "MAN." Select the Dodge Tool, set the Range to Highlights and the Exposure to 15% and run it over the Iris a couple of times. This should bring the eyes out a bit.

Step 2

Open up the cloud image from sxc.hu and import it into the document underneath the "MAN" layer. Resize it to about 130% and drag (Use the Select Tool, hold Alt and simply drag the cloud around the canvas) three duplicates. Overlap them as in the image below. Then select the eraser, set as a large soft-edged brush, and run it along the hard-edges where the cloud layers meet.

Step 3

Finally, select the Clone Tool, set it to a large (around 400 pixels) soft-edged (0% hardness) brush and clone out the obvious pattern repetitions. Choose multiple source points to avoid more obvious patterns.

Step 4

These next few steps are a lot easier if you have access to a graphics tablet, however you can still do it with a mouse. Create a Curves Adjustment Layer just above the "MAN" layer and check the box that's marked Use Previous Layer to Create a Clipping Mask. Set it up as shown and call it "CURVES_DARK." Select the "CURVES_DARK" layer mask and fill it with black, this should hide the effects of the Curves.

Select the Paintbrush Tool and set it to 0% Hardness, 15% Opacity and 65% Flow. Change the Brush size to suit the part of the image you're treating. Obviously the bigger the brush, the smoother the transition. Set the Foreground Color to White and begin painting directly on the Layer Mask. Some areas require more work than others so don't be scared of going over some patches several times.

Check the image below for approximate brush sizes to use. Cover both the skin and clothing. There is no exact science to this, it's a lot of trial and error.

To get the finer details you'll need to reduce the brush size right down. The eyelashes as an example required a 3 pixel brush, but I increased the opacity to around 40 percent. I did the same with the wrinkles and other hard-edges.

Ultimately, your Layer Mask should resemble this (press Alt and click on the Layer Mask to see where you've painted on the mask). I didn't quite do enough on the Mask and there are three ways to rectify this. Option 1 is to double-click on the Layer Thumbnail (this is represented, in this case, by a circle that's half black and half grey). Adjust the Curves to produce a darker result. Option 2 is to continue painting on the Layer Mask, but you risk messing up your good work. Option 3 is to duplicate the Curves Adjustment Layer, then you can scale back the effect by tweaking the Layer Opacity.

Step 5

Again, all you peeps with a graphics tablet are going to find this a lot easier. Create another Curves Adjustment Layer above "MAN" and "CURVES_DARK" on the layer palette. Check the box that's marked Use Previous Layer to Create a Clipping Mask and call it "CURVES_LIGHT." Pull the upper part of the line upwards to lighten the image. Note: How much you manipulate the Curves layers (including "CURVES_DARK") affects how much you'll need to draw on the Layer Mask and how much you'll need to tweak the overall exposure later on.

Fill the "CURVES_LIGHT" Layer Mask with black and Draw directly onto it with a soft-edged brush loaded with white. Again pick the brush size and opacity to match the area you're treating. If you overdo an area, load your brush with black and go over the problem area.

You're looking to paint over all the areas where there are highlights. To strengthen things like the wrinkles, you should paint light next to the dark but not over it. Paint up to hard-edges with a small brush and then away from it with a large brush to diffuse the transition.

Alt-click on your Layer Mask thumbnail to see where you've painted on it. It should resemble the image below. Note the Layers palette as well, all my layers are currently on Normal at 100% Opacity and Fill. The little arrow next to the Layer thumbnail signifies that it's using the lower layer as a clipping mask.

If yours don't, then select the "CURVES" layer and go to Layer > Create clipping mask. To mask off any areas you require a hard-edge such as the bottom of the nose, simply draw around it using the Pen Tool, turn the path into a selection and paint onto the appropriate Layer Mask.

Step 6

Create a Gradient Map Adjustment Layer above "MAN," "CURVES_DARK" and "CURVES_LIGHT." Use the underlying layers as a Clipping Mask. Set the Gradient Map as shown below and then change the Layer Blending Mode to Soft Light and the Opacity to 75%. Now you could tweak the hue/saturation, play with the channel mixer and add a nice studio-esque background and stop there for now. But let's carry on and add some real drama to this.

Step 7

Add a Gradient Map Adjustment Layer below "MAN" and above "CLOUD." Input the darker color as #164370 (a darkish blue) and the lighter color as #e2dc9a (a muddy yellow). OK this, then set the Layer Blending Mode as Soft Light and change the Layer Opacity to 68%. Add a Curves Adjustment Layer directly below the Gradient Map. Adjust as shown and then change the Layer Opacity to 60%. Your Layers palette should that shown below.

Step 8

Add a new layer directly above "CLOUD" and fill it with 60% black. Set the Blending Mode to Overlay (it should disappear). Select the Burn Tool and set to a big brush (917 diameter, 0% hardness), set the Range to Midtones and the Exposure to around 15%. Then burn around the corners to create a vignette. Call the layer "VIGNETTE" and adjust the Opacity to suit. Mine ended up at 77%.

Step 9

Create a new layer directly above "MAN" (using "MAN" as a Clipping Path) and another directly below the "CLOUD_CURVES" and "GRADIENTMAP" layers. Call the new layers "WHITEGLOW." Select the Paintbrush Tool, load it with white and work on the layers as shown below. Create a soft, white glow below the man to lift him from the background. Then create a white glow above to bleed light from the background over the subject. Follow the pink path as shown, then go over a second time.

Step 10

This next step is a stylistic choice as we're going for a stylized look. However, if you want a more naturalistic finish you can skip this part. Select all the layers currently linked with "MAN."

Then go to Filter > Stylize > Glowing Edges and set up as shown.

We want to knock out the midtones on this so go to Image > Adjustments > Levels and set up as shown.

Then change the Layer Blending Mode to Screen and drop the Opacity down to around 34%. Duplicate this layer and set the duplicate Blending Mode to Overlay, change the Opacity to around 13%. I also masked off areas around the chin on the original Glowing Edges Layer (Screen, 34%).

Step 11

Duplicate the "CLOUD" layer and drag it above the "GLOW_EDGES" layers. Apply a 2-3 pixel Gaussian Blur, then set the Layer Blending Mode to Screen and the Opacity to 50%. Take a soft-edged Eraser and delete all parts of the cloud that spill over the face and details. Duplicate the layer and drag it until you get a fairly even coverage of mist at the bottom of the image. Call these layers "CLOUD_BLURRED."

Step 12

Download the water drops 1 image from sxc.hu and open it. Go to Image > Rotate Canvas > 180 degrees. Erase the bigger ball of water and the broken balloon part.

Then select the Burn Tool, set it to Shadows with an Exposure of 35% and run it along where you've erased. This should give a more realistic blend.

Paste it into your document directly above the "CLOUD_BLURRED" layers and set the Blending Mode to Screen. Position on the shoulder so that the condensed drips line up with the mans shoulder. You will need to rotate it to fit. Then drag a duplicate of this layer along the shoulder, rotate and fit. Call these layers "DROPS_RIGHT."

Duplicate both "DROPS_RIGHT" layers and with the duplicates selected go to Edit > Transform > Flip Horizontal. Rotate them to fit the line of the shoulder and rename them both "DROPS_LEFT."

Download and open the water drops 2 image from sxc.hu. We only want the drops here so delete the Balloon and the denser part of the water (Eraser and then Burn Tool). Paste into the Working document, change Blending Mode to Screen. To get smaller bits of spray simply resize to make them smaller.

To get drops of rain, drag a duplicate and resize bigger. Make several copies until you get a good spread. Use the Clone Tool to get a more precise covering. Then group the layers, select the group and go to Layer > Layer Mask > Reveal all. Use this Mask to soften the impact of the rain, remove any drops covering detail and give it an overall clean up.

Step 13

Create a new layer directly above the "WATER_DROPS" group (the rain and stuff) and call it "STARBURST." Fill it with 60% black and go to Filter > Noise > Add Noise and set up as shown below.

Then go to Filter > Blur > Radial Blur. Apply a Zoom blur as shown. The Blur center should be just on the mans shoulder. If you don't hit that, then just reposition the layer and resize it so it fills the entire canvas.

Finally, adjust the Levels as in the image below and set the Layer Blending Mode to Overlay. As 60% is pretty much an overlay neutral color, and the levels are well balanced out, it shouldn't affect the whole image. Add a Layer Mask to mask out any areas that you don't want rays. I masked out parts of the face and shirt.

Step 14

Create a new layer directly above "STARBURST" and call it "FAKE_RAIN." Fill it with 60% black, add noise (as you did for "STARBURST") and then resize it.

Then go to Filter > Blur > Motion Blur.

Bring up the blending options (click the f symbol in the black circle at the bottom of layers palette) and pull the black Layer Slider across to 130.

Apply a Small Gaussian Blur.

And a Smart Sharpen filter.

Finally, tweak the Levels and set the Layer Blending Mode to Hard Light.

Step 15

Duplicate "FAKE_RAIN," call it "FAKE_RAIN_BGROUND" and move it below the "VIGNETTE" layer on the layers palette. Rotate it 10 degrees or so and change the Layer Opacity to 75%.

Step 16

Create a new Gradient Map Adjustment Layer directly above "FAKE_RAIN." Set the darker color as #075053 and the lighter color as white. Then set the Layer Blending Mode to Color with an Opacity of 55%. Add a Layer Mask (Layer > Layer Mask > Reveal All), grab a large soft-edged brush, load it with black, reduce brush Opacity to 20% and paint over the face area a couple of times.

Step 17

Add a Hue/Saturation Adjustment Layer directly above the Gradient Map you just created. Pull the Saturation slider down to -68% and OK it. At this staged I added a Layer Mask and masked off some of the red tie using the a soft-edged brush at 25% Opacity.

Step 18

Add a Curves Adjustment Layer above that and set up as shown below. It's looking pretty moody now, time to add the finishers on this.

Step 19

Create a new layer above the three new Adjustment Layers and call it "OVERLAY_DODGE/BURN." Fill it with 60% black and change the Layer Blending Mode to Overlay. Using the Dodge and Burn Tools we're going to further boost some highlights and a couple of shadows.

Here's how it looks with the changes.

Here's roughly what your "OVERLAY_DODGE/BURN" layer should look like on Normal Blending Mode. Notice that some areas are whiter than others, those areas have been painted on more times than the darker parts. Layering it up is the key to a smooth and natural transition.

Step 20

As a little salad garnish I've added a lens flare. Fill a new layer with black. Go to Filter > Render > Lens Flare and pick 105mm prime. The default settings should be fine. Set the lens flare Layer Blending Mode to Screen and position it above the shoulder. It's worth mentioning that I also applied a small amount of noise, followed by a Gaussian Blur (around 4 pixels) and then a smart sharpen (around 150 at 7 pixels).

Step 21

Select all of your layers and duplicate them. Merge all the duplicated layers into one, making sure you leave the originals untouched. Duplicate the merged layer and name one "HIGH_PASS" and one "INVERTED." Select "HIGH_PASS" and go to Filter > Other > High Pass. OK a 2 pixel pass and then set the Layer to Overlay. Mask off any sections you feel are too strong, I did the starburst area a little.

Step 22

Select the "INVERTED" layer and desaturate it (Command + Shift + U). Then invert it (Command + I), apply a 40 pixel Gaussian Blur and then set the Layer Blending Mode to Overlay. It's a little much so drop the Layer Opacity to around 45% or whatever you're comfortable with.

Conclusion

You should be left with a highly editable image. Adjust Layer Opacities, fine-tune Layer Masks, play with Adjustment Layers or even turn visibility of some of the layers off. Even without the rain and the clouds and whatnot, what you're left with is a way to make portraits punchier. View the final image below or a larger version here.

Create an Asian Inspired Illustration with Impact

2009-04-29T14:09:00.003+06:00

While creating things from scratch is an awesome way to showcase your style and technique, using stock photos is an easier way to add impacting detail to your work. To be able to do all that, we'll be using various ways to separate photos from their backgrounds, manipulating them and altering the overall lighting, contrast, and color balance to finish off this complex illustration.

Final Image Preview

Introduction

When it comes to creating this sort of work, it's all about building your piece step by step.

I started out by wanting to use a model photo. I wanted a simple and impersonal posture and found this asian model on istockphoto. It's the photo that gave me my theme, so I started looking for things I could use with that.

I decided to focus on Japanese culture, so bonsai trees and pagodas were an obvious choice. Wanting to include some kind of floral theme, I found enough orchids on sxc to use as an important part of the piece.

As a first attempt, I used mostly the same resources as in the final version, but made one crucial mistake -working at a small scale. While the document size was not at all small, the large overall size of the elements made the piece cluttered and too in your face. It was an easy fix: Crop Tool, select all, drag the box out a bunch, out with (some of) the old, and in with (a bit of) the new.

While all the objects in my first attempt seem to be fighting over hierarchy, the second piece spreads out all the elements, so that they all lead to the central part, the model's face. Her dark hair also makes it easy to draw attention, so I avoided using too many dark shades of colors in any other parts.

From a compositional point of view, the piece has clusters of colors that eventually balance out: Blue water at the lower left; blue sky at the top right. Red flowers and monument on the left; red large pagoda on the right. They strike a balance because they are all grouped in a two by two order.

Any imbalance in color will ultimately become a focal point, and whether or not it conflicts with what you want the viewer to be looking at, is up to how you plan your piece.

Rather than spending time beforehand, I created this balance along the way. Once I included an element, I was sure to create its counter measure. Slowly, the piece developed itself into what it is now. It's an organized improvisation that you refine with every step forward.

A good way to see if your piece is balanced well compositionally, not only chromatically, is to desaturate it. Here is a black and white version I made using a Channel Mixer set to Black and White with a Green Filter (RGB). It will show you if certain parts are too dark or too light and help point out any unintentional focal points.

Step 1

First, get this istockphoto and open it in Photoshop. If you're keeping my document settings (listed later), buy the large format version. In this step, we'll separate the model from the background. Unfortunately, it's red, which will interfere with her lipstick, makeup, and even skin tone if not handled properly.

It's nothing we can't fix though, so open the photo in a PS document. Double-click on the background layer and name it something to turn it into a regular layer. Use the eyedropper tool (I) to select the photo's background color and go to Select > Color Range. Use an appropriate fuzziness that will cover as much of the model as possibly. Don't worry about part of the face showing up, we'll take care of that in the next few steps.

Step 2

Open your channels menu (Window > Channels). Inside you will see all the available channels of the image. The red channel contains all red pixels, and the other two correspond to their own colors. The RGB channel is all in one.

In an ideal case, the background of the photo would be a green screen. If so, it would be better to make a selection of the green channel, instead of using a Color Range Selection. In case you want to combine channels, or make them interact somehow, go to Image > Calculations. There you can add, subtract or blend mode a channel on top of another.

Step 3

Enter Quick Mask Mode (Q). A new channel will now appear, which is our quick mask. Make all the other channels invisible (RGB, R, G, B). You'll now see a silhouette of the model - the one created with the Color Range Selector.

Step 4

All the white areas represent a selection, so we need to make sure that the inside part of the silhouette is completely black. Grab the brush tool (B) and paint with black inside, to cover any white sections.

Step 5

Exit Quick Mask Mode (Q) and click on the small icon in the layers menu to make it a mask.

Step 6

Now open a new Photoshop Document. It's a (very) odd size: 28.45 cm by 17.64 cm at 300 ppi (3360 px by 2084 px). Bring in the cut out model. We'll now do a little touchup. Add a Hue/Saturation Adjustment Layer (Layer > New Adjustment Layer) and make it a clipping mask (Command + Alt + G).

Step 7

Add a Curves adjustment layer too.

Step 8

To simulate an overexposed look, we'll add glows on lots of elements. Double-click on the model's layer to add a few layer styles. Use the settings below.

Step 9

Cut out this flower with the Pen Tool and place it behind the model. Add the appropriate layer style.

Step 10

Duplicate it and add a few more.

Step 11

Add some above the model too.

Step 12

Download this photo, cut it out and place it behind the model. In a new layer underneath the flower, paint a red glow. Change its colors by following the next step.

Step 13

Add these Adjustment Layers: Hue/Saturation and Selective Color, using the settings shown below.

Step 14

Duplicate the red orchids and move them to the other side. Change their colors with these Adjustment Layers and add a blue glow on top.

Step 15

Find the "model" layer and create a few new layers as a clipping mask. Paint a shadow from the flowers on her right shoulder, a light glow on her head and fill her pupils with black (paint with a black, soft brush).

Step 16

Get this eye photo and make a selection of it with the Marquee Tool. Feather it (Select > Modify > Feather) and copy it in a new layer. Place it on top of the model's pupil, duplicate it and place it on the other side. Don't flip the second eye, rather free transform it (Command + T), warp it and move the center of the grid until the pupils correspond with the model's previous eyes.

Step 17

Add an Adjustment Layer for both of the eyes.

Step 18

You could chose to leave this out, but I wanted a more impersonal look. Paint a light green soft dot over the iris on a separate layer.

Step 19

Now get this istockphoto of a bonsai tree and get ready to go mad separating it. Some things are great to have isolated on white. I'd rather have this one on a different color. Highlights are more difficult to select than alienated colors because you're selecting white, you can (and will in this case) heavily interfere with the object's own highlights. Select white as your foreground color, and go to Select > Color Range. Use the settings shown below - don't forget to tick the Invert box.

Step 20

Go to the Channels menu, press Q, make the quick mask channel visible and other invisible. Use the brush tool (B) on white to paint in areas that have dark accents and should be entirely white, like the bark and portions of the foliage. The brush should be about 95% in Opacity.

Step 21

Once the tree mask is completely white, press Q again and add a layer mask. To do this, you need to double-click the background layer and transform it into regular layer.

Step 22

Simulating the same overexposed effect, add some blend modes to the tree.

Step 23

Duplicate the tree, flip it and place it behind all the other layers.

Step 24

Get this photo and isolate it just like the bonsai tree. Add a Levels Adjustment Layer to make it brighter, and thus more faded into the background.

Step 25

It's time for a background. Get this photo and place it behind all the layers. Erase anything that goes past the Pagoda's roof (toward the right side).

Step 26

Add a white large glow with the brush tool (B) on the top left side, and fade out the horizon's mountains in the same way.

Step 27

Now add a Gradient Map Adjustment Layer and make it a clipping mask for the scene.

Step 28

Add the photo again on the other side, with the same Gradient Map applied.

Step 29

Now trace this photo with the Pen Tool and copy its selection in a new layer. Most importantly, keep both layers (which includes the background you copied it from) and position them in the document. Add a Hue/Saturation Adjustment Layer for the copied layer, as a clipping mask. In the screenshot below, the background photo is not visible.

Step 30

Make the background photo visible and add a Gradient Map Adjustment Layer. Also, erase all the sides and leave the bottom in so that it creates a reflection on the other water photo.

Step 31

Download this stock photo and this one as well. Trace, copy, and place them in the scene. Add blending modes just like you did on the flowers.

Step 32

We'll now make a few color adjustments in the following few steps. Select the top of layer of the entire document, and make a few Adjustment Layers. First, a Curves and Hue/Saturation.

Step 33

There are quite a few ways to change the colors in any given piece in Photoshop. You can use a Hue/Saturation adjustment layer, Channel Mixer, Photo Filter, Color Balance, Selective Color, etc. My personal favorite is the Gradient Map, and it's what we'll use right now. To create one, go to Layer > New Adjustment Layer > Gradient Map. After creating one, select the proper gradient from the menu, and drag the layer's Opacity to 20%.

Step 34

Add another Gradient Map, but with a different gradient and a different blending mode for the layer, use Overlay.

Step 35

And as a final element, I wanted to add some kind of personal graphic. Create an elliptical shape (U) that's much larger than the document shape. Its color is irrelevant.

Step 36

Double-click its layer to add these blending modes. The first thing to do is to drag the Fill Opacity to 0 in the Advanced section of the Blending Options menu (first thing you see).

Step 37

After adding those, add a few more across the layers with different colors. To change to a different color, edit the Drop Shadow from the previous step.

Final Image

Finally, I added a few soft white glows over the branches to give it more realistic lighting. With that, the piece is now finished. Thanks for reading, everyone!

Valentines Day - Photoshop Style

2009-04-29T14:02:00.004+06:00

Valentines Day - Photoshop Style

A few days ago, I decided to make a special present for my girlfriend. I also thought this technique could be used by others that have the same plan, so here it goes. I will teach you some nice techniques that could improve your experience and also help you make a great gift.

Step 1

First of all, create a new document and fill it with black.

Step 2

Now import your 3D text and position it as you want. For making this text, I used Xara 3D. It is a very simple program that you can use. Next add some shadows to each letter.

Step 3

The thing I want to achieve here is to make some kind of colorful clouds behind the text. This technique is also known as "nebula," so it is most likely that you will know about this effect.

To do this we will use the Brush Tool first with a Hardness set to 0%. Make a new layer, and chose a blue color and paint behind the text.

Step 4

On the same layer, paint a red color over sections of the blue. Experiment to find the outcome you like best.

Step 5

Now use a yellow color and do the same as above.

Step 6

Now paint a white area as above.

Step 7

We will make it blurry now. Go to Filters > Blur > Gaussian Blur and set the Radius as you like.

Step 8

Now we need to make it look dustier. Create a new layer and fill it with black.

Go to Filter > Render > Clouds
Set its blending mode to Overlay
Duplicate the layer

Step 9

I want to give the text faces a light neon look. For this we must select each letter face. Use the Pen Tool for this.

Step 10

Make a new layer over the L letter and call it L face:

Press Ctrl-Enter (Command+Return on a Mac)
Fill the selection with any light color
Follow the settings below to add the effect to the letters.

Step 11

Now use the Dodge Tool, set the Exposure to 55%, and make the face of the letters lighter by brushing over them.

Step 12

Duplicate L face layer, remove the Effects and set it to Overlay.

Step 13

Use the same technique for all the other letters and don't forget to put each letter face over its letter so that you will keep the composition as you first put it together.

Step 14

Now I want to make a background. Go to the bottom of the layer list and make a new layer over the background layer.

Step 15

Select a dark pink color for the foreground and black for the background. Use the radial gradient:

Step 16

Use the Gradient Tool and make something like this:

Step 17

I don't want to see the clouds on that pink, so I will mask it using the Mask Tool.

Step 18

The image is almost finished. Now what we need to do is make some of the clouds and dust go over the letters so that they look more realistic. To do this you need to copy the clouds and dust layers and move them on top of all the layers.

Step 19

Merge them together and mask or delete some of it. As you can see in the example, I have masked most of it because I am going to make a smaller cloud and use it for this effect. I used Linear Light for the Blending Mode.

Step 20

Now I will explain how to make some really nice tentacles that you could use with this effect.

Make a new layer and call it "Green" because green is the color we will use here. Select a green color in the foreground (31b14a), and using the Pen Tool draw a path that you would like the tentacle to follow.

Step 21

Select the Brush Tool and make sure you select a small brush size. I chose 1 pixel. Use these settings to make the brush, and use a Pen Pressure effect.

Step 22

Now select the Pen Tool again, right-click (Option or Alt-Click on a Mac) and select Stroke Path.

Before you hit Ok on the screen that appears, make sure you check the Simulate Pressure.

This is what you should get:

Step 23

Now using the same path, you need to make some more strokes but this time modify the shape of the path a little and use different tones.

Something like this:

Step 24

Do the exact steps all over again at least 8 or 10 times starting from Step 20. But don't forget to use different tones of green and also modify the shape of the path.

When you are finished, you should get something like this:

Step 25

Now use the brush tool and simply draw over your path. Don't worry, you don't need to follow the path exactly. I use a tablet and this gives me more precision but this is not needed.

Next, using the brush tool do something like this:

Step 26

Now use these settings to make it shiny:

Step 27

In the end, mask the part of the tentacle behind the text.

Step 28

Make more tentacles using different colors and different shapes.

Here is my result:

Conclusion

In the end, you can add some more clouds or change the background with a nice texture or other color.

Happy Valentines!

Creative Concepts

How to Create a Sparkling Fantasy Photo Manipulation

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Step 13

Step 14

Step 15

Conclusion

Use Over 40 Advanced Keyboard Shortcuts to Create a Reflective Timepiece

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Step 13

Step 14

Step 15

Step 16

Step 17

Step 18

Step 19

Step 20

Step 21

Step 22

Step 23

Step 24

Step 25

Step 26

Step 27

Step 28

Conclusion

How to make Fire Blast

GOOGLE

Making a Wedding Invitation in Photoshop

1 – Creating the initial paper colour and texture

2 – Scorching the parchment

3 – Adding some cursive text and a Drop Shadow

4 – Text and decoration

Creating a 5-minute Website

1 – Setting up the menu area

2 – Designing the menu

3 – The watermark

4 – Making a logo

5 – Making some buttons

6 – Adding a picture

7 – Creating a "sliver"

8 – Table layout

Design Your Company Logo

1 – The company name

2 – Creating the company logo sub-text

3 – Adding a graphic element to your company logo design

4 – Adding a vertical border to your company logo

5 – Watermarking your company logo

6 – Adding some effects

1 – The company name

2 – Creating the company logo sub-text

3 – Adding a graphic element to your company logo design

4 – Adding a vertical border to your company logo

5 – Watermarking your company logo

6 – Adding some effects

Compucert IT and Computer Training

Nebula Photoshop Tutorial

Fake 3D in Photoshop

Fake 3D in Photoshop