Learn Online With Tutorial Portal

Design the Pirates of the Caribbean Movie Poster

2010-12-31T05:27:00.000-08:00

Click to enlarge

Step 1

*Note for Mac users: ctrl=cmd

Create a new 1920×1200 pixels document in Photoshop, with 72 pixels/inch as resolution. Select the Paint Bucket tool and fill the background with black (#000000).

Step 2

After downloaded our 3rd volume of Grunge Textures, select an item from the set and paste it into the Photoshop canvas. Press ctrl+T to activate the free transform tool and re-size the texture, then shift+ctrl+U to desaturate it.

Set the layer blending mode to overlay with opacity 45%. You will obtain again a black canvas. This is due to the layer blend mode, which doesn’t affect black areas.

Create a layer between the background and the texture. Grab a large, soft white brush with hardness 0% and paint over the center area. You will notice that texture’s details will appear where you paint on with the brush. If you reduce the opacity of the light effect layers, the difference between the light and the dark area will be more subtle.

Step 3

Let’s change the background color: go to Layer>New Adjustment Layer>Gradient Map… and add a gradient layer going from blue #0b5a88 to green #00601b. Set the layer to overlay.

Step 4

Download the free font Captain Kidd, which looks similar to the one used into the original movie poster.

With the Type tool, write the title of the poster. As you may notice from the screenshot, I used different sizes for the first P, the C of Caribbean and the rest of the letters.

Step 5

We will play with blending options to add style to the text. Right-click on the thumbnail of the “P” layer and select “blending options”.

Let’s add a gradient overlay going from grey (#a6a6a6) to a lighter grey (#e4e4e4) and a color grey near to white (#f1f1f1):

Play with Bevel and Emboss options to add depth to the text:

Select Satin to add that kind of metal reflection effect that you see on top of the letter:

Use Inner Shadow with the right settings to darken the top area of each letter:

Finally add an Inner Glow, set on color dodge, to make more evident the white borders of the Bevel and Emboss effect:

Step 6

Now that the effect is complete, right-click on the “P” layer and select “copy layer style”. Then right-click on the other letters’ layers and select “paste layer style” to add the same style to the entire logo.

Here is my result:

Step 7

The text is almost complete, but there’s another detail we can add. Select all the text layers from the layers window, and press alt+ctrl+E to merge them into a new layer. Move this layer below all the text layers.

Move two pixels down the layer by pressing twice the down button on your keyboard.

Finally add a red color overlay. In this way we’ve created even more depth, and the text now looks in 3d.

Step 8

Group all the text layers and hide them. We are now going to enrich the background with the classic pirate skull! So we need space to create the scene which is behind the text

Download this free photo of a skull and open it in Photoshop. With the pen tool, carefully extract the skull from the background, and paste it into the main Photoshop document (press ctrl+T if you want to resize the skull).

Desaturate the skull by pressing shift+ctrl+U. Duplicate the layer (ctrl+J), and set the new layer to overlay with opacity 40%.

Duplicate also the new layer (set to overlay). Then go to Filter>Other>High pass and put in a radius around 6 pixels. Increase the opacity to 100%. In this way we’ve enhanced the details of the image.

Add an inner glow to the original skull to lighten its edges:

Step 9

Don’t forget that our skull is a dead pirate. He needs a bandan! I found this free image that we can use to extract the bandan. Always with the pen tool, carefully trace the contours of the bandan, then press ctrl+enter to activate the selection and copy (ctrl+C) and paste (ctrl+V) the selection into the main document.

To make the effect more realistic, add a soft drop shadow below the bandan.

Step 10

In order to switch the bandan color from green to red, press ctrl+U to open the hue/saturation window, check “colorize” and move the color picker arrow to the red area.

Step 11

You can add lots of details to the skull. I used this free image of a pirate to extract some details, like the 2 beard locks. Remember to desaturate a bit (ctrl+U) all the new elements of the composition.

Step 12

Now the unfailing two crossed swords! I downloaded this image from Shutterstock:

After extracted the object, as always with the help of the pen tool, scale and rotate it (ctrl+T) and put it below the skull.

Duplicate the sword (ctrl+J) and flip horizontally the duplicated layer (Edit>Transform>Flip Horizontal). Finally each sword was duplicated again, with the duplicated layer set to overlay to increase the color contrasts. Also these elements were desaturated a bit to better match the composition.

Here is the result:

Step 13

Now we need to modify a bit the skull and the swords. To do it, select all their layers and, as we did with the text effect, press alt+ctrl+E to merge them into a new layer. You can hide now the visibility of all the skull and swords layers, since we will work only with the merged one.

With the burn tool in “shadow mode”, paint over the eyes concavities to darken them.

Step 14

Duplicate the skull, title it “shadow” and move it below the original one. Add a black color overlay, press ctrl+T to activate the anchor points and enlarge it. Our light source is frontal.

Go to Filter>Blur>Gaussian blur to blur the image.

Finally reduce the opacity to make the effect softer.

Step 15

Make the text visible. You can see how the composition looks nice at this point! All what remain to do are a couple of corrections.

First of all, Use the same technique applied with the skull to add a shadow effect to the text:

Step 16

Create a new group and title it “light effects”. Switch the group blend mode to color dodge and create a layer inside the group. To create the light effect, I’ve used one of our Energy Light effects brushes. Simply set white as foreground color and click once to realize the effect. Reduce the opacity if the result is too strong. If you want to enhance other areas of the text/skull, use a white brush of your choice and just paint.

Step 17

A gradient map layer is helpful to give harmony to all the objects of the composition. Go to Layer>New Adjustment Layer>Gradient Map… and add a gradient going from purple (#290a59) to yellow (#ffcc00). Set the layer to overlay with opacity 35%.

Step 18

The last touch is a metal texture from our Scratched Metallic Textures set. Paste it into the canvas and set the layer to overlay with the opacity around 40%.

Finito!

And here is the result of our hard work. W Jack Sparrow!

Create a Cute Cartoon Penguin & Poster

2010-12-30T03:54:00.000-08:00

Final Result

In This Tutorial you can learn how to Create a Cute Cartoon Penguin and Poster .

Illustrator

1. Sketch out your penguin character, I’m using a graphics tablet to roughly sketch it out. Copy and paste your sketch onto a 500×700 canvas in Illustrator and lock the layer.

2. Get the pen tool and trace around the body using the gradient colour below, with no stroke.

3. Create a new layer and remove the body layer from view, using the pen tool trace around the beak and the mouth features using the gradient colours below.

4. With the pen tool trace around the white area of the face, then create a small circle for the eye, duplicate the circle by holding down alt, clicking on the eye and dragging it away. Using the gradient colours below.

5. With the zoom tool zoom up to the eye. Get the pen tool and draw a eye reflection using the colour white. Go to Window > Transparency to bring up the window, make the opacity 20%.

6. Get the circle tool, hold down shift and draw 2 circles using the colour below. With the 2 circles selected, go to Effects > Blur > Gaussian Blur and put in 6.2.

7. Using the gradient colours below trace the white parts of the wing and stomach with the pen tool.

8. Using the pen tool trace around the feet using the first to gradient colours below. Then using the third colour draw around the shadow areas of the feet. Save the document and close illustrator.

Photoshop

9. Open up Photoshop and create a new canvas that’s 500×700 pixels.

10. Double click the background layer to unlock it, right click the layer and go into blending options. Put in a Gradient Overlay using the colours below.

11. Open up the Penguin file, copy and paste it onto the document. Press ctrl+t, hold shift and drag one of the top corners down to make the size smaller so it fits well.

12. Go to Window > Brushes (or F5) to bring up the brushes box. Press on the new layer icon to create a new brush and name it clouds. Put in the settings below for the new brush type.

13. Now create a new layer on the canvas, right-click and go into blending options. Put in these settings:

14. Now click on the new brush you create earlier and create the clouds on the new layer. The brush will make various sizes circles every time you click to help make a better cloud.

Final Result

Ghost Love Story – Photoshop Manipulation Tutorial

2010-12-29T05:32:00.000-08:00

Step 1

Usually, when I start doing a manipulation, the first step that I usually do is to add a very slight shadow on the model so that I can figure out the rests of the shadows later. First, we will make a new layer, change it to “Overlay“, and add small shadows on the image behind the girl, using the “Brush Tool“, with a big Diameter, over 1000 px or more, depends on your image size. The color I chose is cyan and blue. After that, we’re done with the first step ->see the image below.

Step 2

After that, we’ll go to Image -> Adjustments -> Levels and set the shadows and lightness like this:

Next, we’ll add the first objects in the picture. We’re gonna add now, each in different layers, the candle, the ghost behind the girl, the clock on the table, and the rain window.

Because the flame of the candle does not have the color that I want, I painted it myself. Let’s do this together. We’ll use a very small size of the Brush Tool, with a yellow color, like #d3bd00, and draw. We’ll make the shadows of the flame with a red color and orange, of your choice. And we will easily draw each flame.

We’ll smooth the flame to be more realistic with “Blur Tool“. To add extensions to the flame, use “Smudge Tool“- and try to slowly pull the mouse click on reaching very little the flame, to resemble a smoke.

After you’re done with this, we’ll add the next path of shadows, using the “Burn Tool” and we’ll touch every object from the photo (the candle, the ghost behind the girl, the clock, and the rain window). Don’t forget to make realistic shadows, taking into account the candlelight. The final of the step 2 should be like this :

Step 3.

This is the most important step. The colors. We’ll definitely add more orange, blue and green (for the wall behind the girl). Use the Bursh Tool with Opacity to 25-35 %, (Overlay layer) and throw in the orange color on the walls and on the girl’s face. You can then add a burned orange, darker, to place it over her hand, and the table, as the shadows. The blue tone color place it over the ghost with the same opacity, until you’re happy with the result. You can go then with Burn Tool and make realistic shadows on the model.

Now let’s begin with the colors of the candle. To begin, select the “Burn Tool” and brush along the edges of the wax using a small brush size. Burn especially beneath the wax to make the shadows.

After that we move to the wall color, using the Brush Tool, make a new layer put it on Overlay. (of course you can use as many layers as you need/want). We’ll choose a yellow and orange to simply paint on the wall, illustrating the candle light reflection. We will do the same thing (you create a new layer each color you choose) for the face of the girl, and glass.

We will use the brush used at the beginning, to make the smoke from the candle, and the spirit which the ghost inhales. For the smoke use the white color, and for the soul ( from her neck ) use a cyan blue. (Brush Tool, Opacity 30%, Overlay) For the ghost use a simple blue (layers on overlay, don’t forget). Draw each object slowly and smoothly.

Step 4

As you can see I used the mask reference to make the ghost on the wall. (see image below). To make it, I used the Brush tool, at a low opacity, (about 25-30%). I chose a darker white color and I tried to make a human like face for this ghost using the mask stock as reference. You don’t have to add much details, because then you’ll go with the Erase tool, and erase parts you don’t like, so anyway you’ll erase the imperfections. Then use the Smudge Tool to create the fading effect.

Almost done. Now we do the final retouches. We’ll start with her face. We’ll paint her eyes, using a very small brush tool, and we’ll smoothly paint over the eyes, making the light. Choose a light cyan color, give shape and color the upper lip and eye shape, especially the eyelids.

After drawing the lines on the eyes, select the “Smudge Tool” and smudge the line endings, then click on the eraser set opacity to about 40% and erase the excess or anything that you don’t need . Then choose yellow, and paint with the “Brush Tool” the face shape, the contour of it. See image above

After, pass directly to the hair, and do the same as you did with lips and eyes: add simple blue light using cyan, smoothly and slowly (do not forget to remove their heads- of the lightness lines- with less than 40% opacity).

Do the same for the hand, face and neck, and her blouse. Light (draw) the window with the “Dodge Tool” a reflection of the candle flame.

I hope you liked this tutorial.

Creating Pseudo-vector Wallpapers for Desktop

2010-12-28T06:41:00.000-08:00

In this tutorial you will learn how to create pseudo-vector wallpapers for your desktop. This tutorial will be very useful for beginners and it will be divided in two parts. On first part (of two) we will create everything except the grass and the kitten.

Final Image Preview

Step 1 (Part 1 )

Create a new document with the resolution 1900×1200 for this tutorial with white background. Select Gradient Tool (G) and drag a gradient on canvas like on image below.

Step 2

Select the Elliptical Marquee Tool to create selection similar to the picture below and fill it with linear gradient by using colors of #81ec00 and #41bf01 on the new layer. It will be meadow.

Step 3

With selection still active, apply Inner Shadow layer style to this layer.

Step 4

Keep selection active. Create new layer under the current layer and fill it with white color. Now remove selection with Select > Deselect (Ctrl+D) and apply Filter > Blur > Gaussian Blur with these settings:

Set up layer opacity to 53% and you will have what i have now:

Step 5

Now let´s start creating clouds on the sky. Create a new layer above all the layers, then use Elliptical Marquee Tool to create round selection and fill it with white color.

Step 6

Remove selection with Ctrl+D. Duplicate this layer with Ctrl+J two times and move both duplicates like on image below. For the image on the right, click on layer to select it and then reduce the size with Edit > Free Transform.

Step 7

Merge three of these layers in one and correct the bottom part of the cloud. Use the Pen Tool to create shape similar to the shape on my screenshot. If you prefer you can use other tools like Lasso Tool but i prefer Pen Tool in this case.

Step 8

Click on Paths and select Path (if window not visible go to Windows > Paths), click on selection icon on the palette which says Load Path as a Selection (Ctrl+click on shape thumbnail on Path also works). Go back to layers palette, invert selection with Ctrl+Shift+I (Select > Inverse) and press Delete button to clear selected area.

Step 9

Finally load selection of current layer with cloud by using Select > Load Selection and fill selected area with linear gradient by using colors of #e7f6fd, #b5e4fd.

Step 10

Remove selection with Ctrl+D. After that apply Inner Shadow layer style to this layer.

Step 11

We now have one cloud but we need more. Duplicate this layer a few times with Ctrl+J and move copies to the left and right. Apply Edit > Transform > Flip Horizontal for some copies and apply Edit > Free Transform to change sizes to some of them.

Step 12

Now we need to create flowers. Select the Elliptical Marquee Tool and create oval selection, then fill it with gradient. It will be one of flower´s petals.

Step 13

Remove selection with Ctrl+D and apply Drop Shadow layer style for current layer.

Step 14

Duplicate this layer with Ctrl+J a few times. After that apply Ctrl+T to rotate each layer and organize it like i have. We now have flower’s petals.

Step 15

Now we have to form the middle of flower. Create a new layer and using the Ellipse Tool create round shape with foreground color of #ffa200. After that apply Drop Shadow and Inner Glow layer styles to shape.

Step 16

Create a new layer where we create a stem and leaves of camomile with color #9cfe15 by using the Pen Tool. Do similiar steps as used to create cloud (Load Path as selection and then fill it with color).

Step 17

Create more camomiles on the same way and put it to the different parts of our canvas to create feeling that they were knocked up upwards.

Part 2

Final Image Preview

Step 1 (Part 2)

Open PSD file that was created on Part 1 of this tutorial. Now we are going do add grass somewhere on our meadow. Select the Pen Tool and create shape similar to the picture which you can see below:

Step 2

Create selection of this shape (Load Path as a Selection – Ctrl+click on shape thumbnail on Paths also works). Fill selected area with green (#89f00b) to transparent linear gradient on the new layer by using Gradient Tool.

Step 3

Remove selection with Select > Deselect and duplicate this layer a few times with Ctrl+J and spread everywhere on the meadow area.

Step 4

And the kitten is the last thing we need to create. Create new layer, select the Elliptical Marque Tool to create selection similar to the selection on my picture below and fill it with color #ffc000 (Orange).

Step 5

Create new layer and again with the Elliptical Marque Tool create kitten eye but now fill it with color #ffffff (White).

Step 6

Apply Stroke layer style to current layer.

Step 7

Create a new one round selection and fill it with black color.

Step 8

Duplicate this layer with Ctrl+J, then move it a little bit left and turn to left by going to Edit > Transform > Rotate. We have created the eyes.

Step 9

Now we need to add ears. Select the Pen Tool, then go to the layer with orange ellipse and create shape like on image below. Create selection of this shape (Load Path as a Selection – Ctrl+click on shape thumbnail on Paths also works). Create new layer and fill selection with color #ffc000.

Step 10

Duplicate it with Ctrl+J, then apply Edit > Transform > Flip Horizontal to flip copied layer and move it left.

Step 11

Now let´s focus on creating kitten nose. Create a new layer. On this layer create ellipse selection by using Elliptical Marquee Tool and fill it with black color.

Step 12

Create a new one ellipse selection on the same layer and fill it with white to transparent gradient. In this way we create small glare on kitten nose.

Step 13

Remove selection with Ctrl+D. Then correct noise shape by using Pen Tool. Create the same shape you can see below.

Right click on shape and select Make Selection. After that press Delete to clear selection. Apply Select > Deselect to remove selection.

Step 14

Use Pen Tool to create kitten mouth. Right click on shape and select Make Selection. Fill selection with color #000000 (black).

Step 15

To finish off with the kitten face apply Brush Tool, hard round brush with small size to add a few dots with black color.

Step 16

We keep working with the Pen Tool. Create a new layer to create auricle with black color like my image below. Start by creating shape, convert to selection by right clicking on shape and selecting Make Seletion. Finally fill it with black color (#000000).

Step 17

Duplicate this layer, then flip horizontal (Edit > Transform > Flip Horizontal) and move a little bit left to create second one auricle.

Step 18

Create a new layer and use the Brush Tool (hard round brush, 10px) to make eyebrow holding Shift button make straight line with black color.

Step 19

With eyebrow layer selected apply Edit > Transform > Warp to bend the line like on image below.

Duplicate layer and move new eyebrow above the other eye.

Step 20

Now I would like to create kitten body. Create new layer. Use the Rectangular Marquee Tool to create rectangular selection and fill it with color orange (#ffc000).

Step 21

Now go to Edit > Transform > Distort and do like on image below.

Step 22

After that go to Edit > Transform > Warp and transform it again.

Step 23

Create new layer. To create arms and hands we use again the Rectangular Marquee Tool. Create rectangular selection to create first arm and fill it with color orange (#ffc000). After that go to Edit > Transform > Warp and transform it.

Step 24

Use the Elliptical Marquee Tool to create hand on a new layer. First create one finger only. Fill it with color orange.

Step 25

Then duplicate selection and rotate copies to get additional fingers.

Step 26

Merge fingers and arm layers. Duplicate layer and go to Edit > Transform > Flip Horizontal. Move second arm to right position.

Step 27

Use again Elliptical Marquee Tool to create first hind leg on a new layer and fill it with same orange color.

Step 28

Duplicate layer and go to Edit > Transform > Flip Horizontal. Move second hind leg to right position.

Step 29

Between hind legs, use Rectangular Marquee Tool and fill selection with black color (#000000).

Step 30

Create tail on new layer by using Elliptical Marquee Tool and transforming it with Edit > Transform > Warp. After finishing creating tail, just merge all the layers with kitten body parts together except kitten eyes. Finally create new layer and add some black stripes on it again with Elliptical Marquee Tool.

Step 31

Keep adding black stripes till you have all of them. When you have created all stripes, select layer content that has kitten body (Ctrl+click on the layer thumbnail on layers palette), invert selection with Shift+Ctrl+I (or go to Select > Inverse) and clear selected area (Del).

Step 32

Remove selection with Ctrl+D and merge kitten layer and stripes layer (remember that you must keep kitten eyes layer separated). Select content layer again, create new layer and go to Select > Modify > Expand. We are going to Expand selection by 3 px and finally fill selection with black color (#000000) on new layer.

Step 33

To finish off the tutorial, create a new layer under kitten layer for the shadow and create round selection by using Elliptical Marquee Tool.

Step 34

Fill selected area with color #33b301. Remove selection with Ctrl+D and apply Filter > Blur > Gaussian Blur with similar settings to these:

Final Image

That is it! We created pseudo-vector wallpapers for desktop. Hope this tutorial was useful for you.

Create a Surreal Environmental Photomanipulation

2010-12-26T22:13:00.000-08:00

Today’s Photoshop tutorial shows you how to combine photographs to create a surreal photo manipulation using a combination of creative techniques and tips. Image manipulation can be tricky, especially for beginners, but this tutorial breaks some of he more advanced techniques; making it easy to understand for everyone.

Final Product

Resources

Hand Image
Background
Planet Earth

Step 1

Open the hand image

Step 2

Paste the Galaxy image into a new layer

Step 3

On the layer with the galaxy image, create a layer mask to paint in the part of the hand image we are going to use

Step 4

See below for an example of the finished layer mask that should be painted

Step 5

In a new layer, paste the earth image

Step 6

Create a new layer and move it beneath the pasted earth image layer (layer 2)

Step 7

Ctrl+click the ‘Earth’ layer to select the content of the ‘Earth’ layer. Next, make sure you select the layer you just created

Step 8

Fill the new layer’s selection with white. We will be using this layer to create the glow for the planet

Step 9

This is Important, press ctrl-d to release the selection or the gaussian blur you are about to apply will not work. Apply a Gaussian blur by navigating to Filter>Blur>Gaussian Blur. Set the Radius value to somewhere between 30px and 70px (depending on the size of your image)

Step 10

On a New Layer below the last layer, using a soft brush paint white over the area on the hand where we will simulate light reflection from the planet’s glow

Step 11

Change the Blend Mode to Overlay to simulate the natural light striking the hand from the planet

Step 12

On a New Layer beneath the ‘earth glow’ layer (or layer 3 in my PSD) paint a shadow with a soft brush

Step 13

Change the opacity to 50-53%

Step 14

On the layer above the planet layer with a soft brush paint white on the dark area to fully illuminate the planet

Step 15

Change the Blend Mode to Overlay

Step 16

On a new layer, paint black using a soft brush on the upper wrist area to increase the shadow effect

Step 17

Change the opacity to 15%

Step 18

Between the earth glow layer (layer 3) and the earth shadow layer (layer 6) create a Color Balance adjustment layer by navigating to Layer>New Adjustment Layer>Color Balance. With the Midtones radio button selected (by default) use the following values: Cyan/Red +19, Magenta/Green -9, Yellow/Blue -10

Step 19

On the layer above the earth glow layer (layer 3) create a Curves adjustment layer (Layer>New Adjustment Layer>Curves). Create a point on the grid in the position shown below

Step 20

Create a Levels adjustment layer (Layer>New Adjustment Layer>Levels) using the parameters indicated in the image below

Final Product

And there you have it. You have just created a stunning surreal photomanipulation in photoshop

Web Designing Essential Rulez

2010-12-25T00:59:00.000-08:00

Web design can be deceptively difficult, as it involves achieving a design that is both usable and pleasing, delivers information and builds brand, is technically sound and visually coherent.
Add to this the fact that many Web designers (myself included) are self-taught, that Web design is still novel enough to be only a side subject in many design institutions, and that the medium changes as frequently as the underlying technology does.
So today I’ve put together my 9 principles for good Web design. These are only my opinions and I’ve tried to link off to more reading on subjects so you don’t only hear my voice. Obviously, I have lots of disclaimers: rules are made to be broken, different types of design work differently, and I don’t always live up to my own advice. So please read these as they are intended–just some observations I am sharing…

Capture the Valley uses bars of color to guide your eye through sections from top to bottom…

1. Precedence (Guiding the Eye)

Good Web design, perhaps even more than other type of design, is about information. One of the biggest tools in your arsenal to do this is precedence. When navigating a good design, the user should be led around the screen by the designer. I call this precedence, and it’s about how much visual weight different parts of your design have.
A simple example of precedence is that in most sites, the first thing you see is the logo. This is often because it’s large and set at what has been shown in studies to be the first place people look (the top left). his is a good thing since you probably want a user to immediately know what site they are viewing.
But precedence should go much further. You should direct the user’s eyes through a sequence of steps. For example, you might want your user to go from logo/brand to a primary positioning statement, next to a punchy image (to give the site personality), then to the main body text, with navigation and a sidebar taking a secondary position in the sequence.
What your user should be looking at is up to you, the Web designer, to figure out.
To achieve precedence you have many tools at your disposal:

Position — Where something is on a page clearly influences in what order the user sees it.
Color — Using bold and subtle colors is a simple way to tell your user where to look.
Contrast — Being different makes things stand out, while being the same makes them secondary.
Size — Big takes precedence over little (unless everything is big, in which case little might stand out thanks to Contrast)
Design Elements — if there is a gigantic arrow pointing at something, guess where the user will look?

2. Spacing

When I first started designing I wanted to fill every available space up with stuff. Empty space seemed wasteful. In fact the opposite is true.
Spacing makes things clearer. In Web design there are three aspects of space that you should be considering:

Line Spacing
When you lay text out, the space between the lines directly affects how readable it appears. Too little space makes it easy for your eye to spill over from one line to the next, too much space means that when you finish one line of text and go to the next your eye can get lost. So you need to find a happy medium. You can control line spacing in CSS with the ‘line-height’ selector. Generally I find the default value is usually too little spacing. Line Spacing is technically called leading (pronounced ledding), which derives from the process that printers used to use to separate lines of text in ye olde days — by placing bars of lead between the lines.
Padding
Generally speaking text should never touch other elements. Images, for example, should not be touching text, neither should borders or tables.
Padding is the space between elements and text. The simple rule here is that you should always have space there. There are exceptions of course, in particular if the text is some sort of heading/graphic or your name is David Carson But as a general rule, putting space between text and the rest of the world makes it infinitely more readable and pleasant.
White Space
First of all, white space doesn’t need to be white. The term simply refers to empty space on a page (or negative space as it’s sometimes called). White space is used to give balance, proportion and contrast to a page. A lot of white space tends to make things seem more elegant and upmarket, so for example if you go to an expensive architect site, you’ll almost always see a lot of space. If you want to learn to use whitespace effectively, go through a magazine and look at how adverts are laid out. Ads for big brands of watches and cars and the like tend to have a lot of empty space used as an element of design.

3. Navigation

One of the most frustrating experiences you can have on a Web site is being unable to figure out where to go or where you are. I’d like to think that for most Web designers, navigation is a concept we’ve managed to master, but I still find some pretty bad examples out there. There are two aspects of navigation to keep in mind:
Navigation — Where can you go?
There are a few commonsense rules to remember here. Buttons to travel around a site should be easy to find – towards the top of the page and easy to identify. They should look like navigation buttons and be well described. The text of a button should be pretty clear as to where it’s taking you. Aside from the common sense, it’s also important to make navigation usable. For example, if you have a rollover sub-menu, ensuring a person can get to the sub-menu items without losing the rollover is important. Similarly changing the color or image on rollover is excellent feedback for a user.
Orientation — Where are you now?
There are lots of ways you can orient a user so there is no excuse not to. In small sites, it might be just a matter of a big heading or a ‘down’ version of the appropriate button in your menu. In a larger site, you might make use of bread crumb trails, sub-headings and a site map for the truly lost.

4. Design to Build

Life has gotten a lot easier since Web designers transitioned to CSS layouts, but even now it’s still important to think about how you are going to build a site when you’re still in Photoshop. Consider things like:

Can it actually be done?
You might have picked an amazing font for your body copy, but is it actually a standard HTML font? You might have a design that looks beautiful but is 1100px wide and will result in a horizontal scroller for the majority of users. It’s important to know what can and can’t be done, which is why I believe all Web designers should also build sites, at least sometimes.
What happens when a screen is resizes?
Do you need repeating backgrounds? How will they work? Is the design centered or left-aligned?
Are you doing anything that is technically difficult?
Even with CSS positioning, some things like vertical alignment are still a bit painful and sometimes best avoided.
Could small changes in your design greatly simplify how you build it?
Sometimes moving an object around in a design can make a big difference in how you have to code your CSS later. In particular, when elements of a design cross over each other, it adds a little complexity to the build. So if your design has, say three elements and each element is completely separate from each other, it would be really easy to build. On the other hand if all three overlap each other, it might still be easy, but will probably be a bit more complicated. You should find a balance between what looks good and small changes that can simplify your build.
For large sites, particularly, can you simplify things?
There was a time when I used to make image buttons for my sites. So if there was a download button, for example, I would make a little download image. In the last year or so, I’ve switched to using CSS to make my buttons and have never looked back. Sure, it means my buttons don’t always have the flexibility I might wish for, but the savings in build time from not having to make dozens of little button images are huge.

If anyone knows good type it’s iLoveTypography!

5. Typography

Text is the most common element of design, so it’s not surprising that a lot of thought has gone into it. It’s important to consider things like:

Font Choices — Different types of fonts say different things about a design. Some look modern, some look retro. Make sure you are using the right tool for the job.
Font sizes —Years ago it was trendy to have really small text. Happily, these days people have started to realize that text is meant to be read, not just looked at. Make sure your text sizes are consistent, large enough to be read, and proportioned so that headings and sub-headings stand out appropriately.
Spacing — As discussed above, spacing between lines and away from other objects is important to consider. You should also be thinking about spacing between letters, though on the Web this is of less importance, as you don’t have that much control.
Line Length — There is no hard and fast rule, but generally your lines of text shouldn’t be too long. The longer they are, the harder they are to read. Small columns of text work much better (think about how a newspaper lays out text).
Color — One of my worst habits is making low-contrast text. It looks good but doesn’t read so well, unfortunately. Still, I seem to do it with every Web site design I’ve ever made, tsk tsk tsk.
Paragraphing — Before I started designing, I loved to justify the text in everything. It made for nice edges on either side of my paragraphs. Unfortunately, justified text tends to create weird gaps between words where they have been auto-spaced. This isn’t nice for your eye when reading, so stick to left-aligned unless you happen to have a magic body of text that happens to space out perfectly.

6. Usability

Web design ain’t just about pretty pictures. With so much information and interaction to be effected on a Web site, it’s important that you, the designer, provide for it all. That means making your Web site design usable.
We’ve already discussed some aspects of usability – navigation, precedence, and text. Here are three more important ones:

Adhering to Standards
There are certain things people expect, and not giving them causes confusion. For example, if text has an underline, you expect it to be a link. Doing otherwise is not good usability practice. Sure, you can break some conventions, but most of your Web site should do exactly what people expect it to do!
Think about what users will actually do
Prototyping is a common tool used in design to actually ‘try’ out a design. This is done because often when you actually use a design, you notice little things that make a big difference. ALA had an article a while back called Never Use a Warning When You Mean Undo, which is an excellent example of a small interface design decision that can make life suck for a user.
Think about user tasks
When a user comes to your site what are they actually trying to do? List out the different types of tasks people might do on a site, how they will achieve them, and how easy you want to make it for them. This might mean having really common tasks on your homepage (e.g. ‘start shopping’, ‘learn about what we do,’ etc.) or it might mean ensuring something like having a search box always easily accessible. At the end of the day, your Web design is a tool for people to use, and people don’t like using annoying tools!

7. Alignment

Keeping things lined up is as important in Web design as it is in print design. That’s not to say that everything should be in a straight line, but rather that you should go through and try to keep things consistently placed on a page. Aligning makes your design more ordered and digestible, as well as making it seem more polished.
You may also wish to base your designs on a specific grid. I must admit I don’t do this consciously – though obviously a site like Psdtuts+ does in fact have a very firm grid structure. This year I’ve seen a few really good articles on grid design including SmashingMagazine’s Designing with Grid-Based Approach & A List Apart’s Thinking Outside The Grid. In fact, if you’re interested in grid design, you should definitely pay a visit to the aptly named DesignByGrid.com home to all things griddy.

The ExpressionEngine site is the soul of clarity. Everything is sharp and clean.

8. Clarity (Sharpness)

Keeping your design crisp and sharp is super important in Web design. And when it comes to clarity, it’s all about the pixels.
In your CSS, everything will be pixel perfect so there’s nothing to worry about, but in Photoshop it is not so. To achieve a sharp design you have to:

Keep shape edges snapped to pixels. This might involve manually cleaning up shapes, lines, and boxes if you’re creating them in Photoshop.
Make sure any text is created using the appropriate anti-aliasing setting. I use ‘Sharp’ a lot.
Ensuring that contrast is high so that borders are clearly defined.
Over-emphasizing borders just slightly to exaggerate the contrast.

9. Consistency

Consistency means making everything match. Heading sizes, font choices, coloring, button styles, spacing, design elements, illustration styles, photo choices, etc. Everything should be themed to make your design coherent between pages and on the same page.
Keeping your design consistent is about being professional. Inconsistencies in a design are like spelling mistakes in an essay. They just lower the perception of quality. Whatever your design looks like, keeping it consistent will always bring it up a notch. Even if it’s a bad design, at least make it a consistent, bad design.
The simplest way to maintain consistency is to make early decisions and stick to them. With a really large site, however, things can change in the design process. When I designed FlashDen, for example, the process took months, and by the end some of my ideas for buttons and images had changed, so I had to go back and revise earlier pages to match later ones exactly.
Having a good set of CSS stylesheets can also go a long way to making a consistent design. Try to define core tags like

and in such a way as to make your defaults match properly and avoid having to remember specific class names all the time.

Photoshop Navigation Bar and Buttons

2010-12-23T23:04:00.000-08:00

This simple Photoshop tutorial will walk you through the creation of a simple, but cool navigation bar and buttons that you can use on your website!

1.
First of all, create a new document and fill the background with a dark gray. (my document is 430 x 130, and my background color is #161616)

Empty image, oh yeah! Make a new layer then make a selection sized around 400 x 34, fill the selection with #393939.

Apply this following Gradient Overlay.

Make a new layer and select the bar again, fill the area with a nice pattern.
(note: click the word pattern above to be taken to the pattern image)

Change the layer opacity of this pattern layer to 30%.

2.
Make a new layer again and with the Rectangular Marquee Tool make a set sized selection of 300×26 in the middle of the main bar.

Fill this selection with #161616.

Apply the following layer styles:

Inner Glow

Gradient Overlay

Stroke

3.
Now what you need to do is create a selection 1 x 26, or just draw a line from the top of the 2nd bar to the bottom with the pencil tool. You can use any color.

Apply the following Gradient Overlay.

Duplicate the ‘indent’ layer and move it around 81 pixels to the right. (press the right key once, then hold shift and press the right key 8 times)

Repeat that step once to the left, then maybe again. I ended up with 4 indent lines, I merged them all and centered them.

After you’ve merged the layers together, lower the layer opacity to around 50%.

4.
Make a new layer and zoom in on the left corner area, make a shape like so next to the left indent line (using the pencil tool):

Duplicate this layer, flip it horizontally and move it to the left side of the next indent line.

Merge these layers together then duplicate it, move it into the middle.

Do the same again and move it to the right.

Merge all these layers together and change the layer mode to Softlight and the opacity to 50%.

5.
Make a new layer then get the Gradient Tool, using these options:

Make a gradient in the bottom middle sort of area:

Set the layer mode to Overlay and the opacity to 40%

Now you can add text!

Above I used:

Tahoma

12pt

No Anti-Aliasing

#f6dc00

I also applied this Drop Shadow to my text layer.
That’s it:

Thanks for reading this Photsohop tutorial, everyone. I hope you enjoyed it, and even learn something!

Photoshop Designing Xbox 360 Logo

2010-12-22T16:04:00.000-08:00

1. Using Polygonal Lasso Tool to make a shape and fill the color #45862C like this:

2. Continue to use Palygonal Lasso Tool to split that shape into 4 parts (each part in one layer)

3. Now the most important is to radiate light upwards, you will pick Gradient tool and set the color like this:

Ctrl + click on layer No.1, use Gradient to drag like the result below

Continue to apply step 3 to 3 remain layers, you will get the result like this:

4. Create a new layer, zoom out the right angle of the shape then use Polygonal to draw a selection like the picture below:

Pick Gradient tool and set the color like this:

Apply gradient to the selection, you will get the result like this:

Continue to apply step 4 to 3 remain layers, you will have:

Final step, you will make shadow around the logo, and this is my final result:

Photoshop Actions Tutorial

2010-12-21T17:14:00.000-08:00

This tutorial will teach you how to create duotones, tritones and quadtones inside of Photoshop. At the end of the tutorial you'll find a link to 8 custom duotone/tritones as a complimentary download.

One of the main purposes behind Gavin's creative action sets is to free up photographers time and give them more creative ideas. He has invested thousands of hours developing his programs so that you do not have to. At the click of a button, or watching a 3 minute movie, you'll have many more creative options and ways to distinguish yourself from the competition. All this for around $100. Find all the details, including special pricing at Gavin's PhotoEffects website.

Toning With Duotones, Tritones And Quadtones
In order to tone with duotones, your photograph must first be converted to black and white. One of my favorite methods to convert to BW is using ‘calculations’.

Open your photograph and click on image, then calculations.

The calculations dialogue box opens. There are four areas to focus on in the ‘calculations’ dialogue box. The two channels, the blending mode and opacity settings.

I usually combine the ‘red’ and ‘green’ channels. The ‘soft light’ blending mode is great for evenly toned BW. The ‘screen’ blending mode is good for ‘high-key’ BW.

You will need to alter the opacity setting to suit your photograph. Anywhere between 20-100%.

When you have the settings they way you want them, click ‘OK’.

There are two further steps required to create your grayscale image. After you click ‘Image-Mode-Grayscale,’ a dialogue box will open up, asking if you want to discard color information. Click ‘Ok.’

After clicking on Image-Mode-Duotone, the ‘Duotone’ dialogue box will open.

The drop-down box at top left allows you to specify how many colors you will use to tone your image. There are three choices; duotone, tritone or quadtone. Two of the great advantages of duotones are the ability to ‘load’ existing presets, as well as create your own.

I’m giving you 8 of my custom duotone/tritones as a complimentary download. Loading duotone pre-sets is simple. Click ‘load’ in the duotone dialogue box. If you have never used duotones before, you will be taken to Adobe’s duotones/tritones pre-set folder. Navigate on your computer to where you downloaded my presets, and double click on one of them. See below,

This will load the preset into the duotones dialogue box and tone your photo accordingly. To create & save your own custom duotones, click on one or more colors in the duotone dialogue box.

Either the ‘color picker’ or ‘pantone’ color boxes will appear. Choose the color you want and click ‘Ok.’

You can continue this process to change more colors. You can also change the spread of any particular color by clicking in the ‘curve’ area.

When finished in the ‘duotone curve’ box, click ‘Ok’. Then click ‘save’ in the duotone box to save your custom duotone into your own pre-sets folder.

I finish up my Duotone/Tritone by adding a ‘Curves’ adjustment layer.

In order to save your file as a JPG, you will need to convert back to RGB color.

Value of my custom actions/movie tutorial sets
One of the main purposes behind my creative action sets is to free up photographers time and give them more creative ideas. I have invested thousands of hours developing my programs so that you do not have to. At the click of a button, or watching a 3 minute movie, you'll have many more creative options and ways to distinguish yourself from the competition. All this for around $100.

3 Free Photoshop Actions - Plus Photo FX Actions Discount

Our specialized program has been published by the 'Professional Photographers of America' (PPA) twice as well as in other publications. Try my 3 Photoshop Actions for free. They produce the effects above (from left to right — Infrared, Toned and Softly). We offer 4 sets of Photoshop Actions and Flash movies and we are offering a special discount for a limited time. Purchase one set of Photoshop Actions and get a second set for free. Visit the special Actions discount page for details."

Beginner’s Guide to Photoshop Masks – Part Two

2010-12-20T21:00:00.000-08:00

This post is the second part of the two parts series of the “A Beginner’s Guide to Photoshop Masks” I decided to post here on PSD Vault for Photoshop Beginners.
If you have been following PSD Vault Photoshop tutorial for a while, you probably would have noticed a lot of them contain steps involving Photoshop Masks – which can be a little difficult to understand if you just started Photoshop. Here Look the Example.

In this second part, I will cover the following topics:

The Use of Quick Mask
The Use of Clipping Mask
Apply Mask on Image Adjustment Layer

Also if you would like to read the first part of this series, please click this link below:
A Beginner’s Guide to Photoshop Masks – Part One
OK let’s get started!

The Use of Quick Mask

Firstly download this stock image and use it for this part of the tutorial.
Before we begin, I would like to mention a bit of introduction of “Quick Mask” – although it’s got the word “Mask” in it, it’s more widely used as a tool to make selection of certain objects on an image, rather than hide or reveal them.

Quick mask can be quite useful if want to cut out one part of the image that would be otherwise difficult to select using selection tools such as lasso or marquee tools.

Now let’s load the stock image you just downloaded into Photoshop.
To enter the Quick Mask Mode, Press the “Q” key or Press the button down the bottom of the toolbox:

Choose the black colour as the foreground colour:

Now you can also adjust the brush size prior to painting the mask:

Use this brush to paint over the eagle, as shown below: (for tutorial purpose, I did not go into making a precise selection here)

Now press “Q” key to exit quick mask mode, you will see the mask become a selection:

Once the selection is made, you can copy, cut and move it anywhere you want.
That’s pretty much it for Quick Mask. If you want to make a more precise selection, adjust the brush size and use erase tool along with the brush tool when you paint the mask.

The Use of Clipping Mask

Now let’s get to the clipping mask part. Personally I think this is one of the greatest feature of Photoshop and I seriously can not be without it :)

Basically a clipping mask can take the shape of the base layer – the base layer can be text, shape, or a filled selection.

Let’s take a look at the clipping mask in action. Download this stock image and use it for this part of the tutorial.
Create a new document sized 600px * 600px with a white background and type some texts onto it:

Load the stock image in and select a portion of it, copy and paste onto the text document you just created:

Right-click on this layer and choose “Create Clipping Mask”:

Now you can the layer has a little down arrow attached to it, meaning it has been transformed into a clipping mask:

Now if you take a look at the canvas, you will see the texture layer takes on the shape of the text layer. As a result, we successfully apply the texture to the text and make it look more stylish :)

You can also use clipping mask on shapes, just using the same method as on a text layer. Have a try with it and experiment the effect yourself :)

Applying Mask on Image Adjustment Layer

On later versions of Photoshop, we’re introduced a new featured called “Adjustment Layer”, which you can apply image adjustment options such as curves, color balance and channel mixer, etc onto it – without the need of changing the original layer content.
Now on those adjustment layers, you can also apply mask in order to hide or reveal certain portion.
As shown below, I added a color balance adjustment layer to the background layer. By default, Photoshop will automatically attach a mask to the adjustment layer:

Same as the layer mask on a normal layer, you can use brush tool/eraser tool to paint or erase on the layer mask:

As the portion on the adjustment layer will be hidden, and reveal the content on the layer below:

One more thing you need to remember is that you can make the adjustment layer as clipping mask via right-clicking menu:

This way you can apply image adjustment only on the layer that it “clips” onto, without affect other layers. Also when you combine the layer mask on the adjustment layer, and the clipping mask option together, you can add very complex effect to the image :)
OK that’s it for this tutorial! Hopefully you learn a few things about the masks in Photoshop and find those tips useful :)
Till next time, have a great day!

open an ai or eps file in Photoshop

2010-12-19T22:14:00.000-08:00

Many of you have asked me if it is possible to open and use our vector resources (.ai and .eps files) in Photoshop. Well, it is, even if with evident limits. In this brief tutorial I’ll show you how to manage vectors using Photoshop and which are the advantages of using a vector software like Illustrator to work with these kind of files.

Both with a Mac or a Pc, the process of opening a file with a specific software is the same. Just right-click on your .eps/.ai file and select “open with>Photoshop”. Since I’m a Mac user, I simply drag one of WeGraphics vector resources, Animal Skulls, over the Photoshop icon in my toolbar to open it. In the following example I’ve used an .ai file, but if you use an .eps one the process is almost the same.
At the end of this first step, this is what you should see (I’m using Photoshop CS4):

The most important thing to consider is the size. Vector objects are scalable, and this means that you can resize them at your pleasure – make them smaller and then enlarge them – without lose quality. But when you open a vector file in Photoshop, the vector will be turned into a raster image. So you won’t be able to resize them in according with your needs – you can make it smaller, but if you try to enlarge it the result won’t be so good…
This is why I suggest you to choose a very large size. In this case, since my aim is to use these vectors for the preview displayed in the resource page of the site (580×380 pixels), the default size works fine.

I’ve opened the vector file with Photoshop…and now?

Once opened the vector file with Photoshop, you’ll have all the objects on the same layer. If can select and move a single object, because they are all merged.

To extract and import one of the objects, simple grab a selection tool – in my case the Rectangular Marquee Tool – to select it, and press ctrl+C to copy it (cmd+C if you’re using a Mac).

Switch to the Photoshop document you’re working on – where you want to put in the (ex)vector file – and press ctrl+V to paste it (cmd+V for Mac users). In this way you’ve imported the object, extracting it from its original layer.

At this point, if you’re not sure about the desired final size of the object, I suggest to convert it into a smart object. To do it, right-click on the layer of the skull (in my case), in the layers window, and select “Convert to Smart Object”.

Why do I need to convert the (ex)vector into a smart object? In this way you are free to resize the (ex)vector at your pleasure, as if it is a vector.

Now that your object is a smart object, resize it all the necessary times, until you are satisfied with the result. To show you the importance of this step, let’s take a look at the following example. I’ve created 2 copies of the same skull. One of these, the one on the left, has been converted into a smart object. While the one on the right is a simple raster image. I’ve scaled down both the images. As you can notice, there is no difference for the moment:

Now let’s enlarge the two images. Something horrible happens to the image on the right!

This is why Smart Objects are so useful, because of their scalability. Now all what remains to do is to create a nice composition. Then you can use image adjustments (Image>Adjustments) and layer styles (Right-click>Blending options) to change image colors.

This is what I’ve obtained. By clicking on the image you will be redirected to the download page of the resource.

Why is it better to use a vector software?

By using a vector software like Adobe Illustrator to open .eps and, of course, .ai (Adobe Illustrator) files, there are several advantages. In example, your can modify the objects, not only resize them. You can eliminate some parts and add more details. Also the way to manage colors is different, it’s very simple to change colors – while in Photoshop it can results non so easy for a newbie – and to switch from flat colors to gradients. Finally, always take in mind that you can export an object from Illustrator to Photoshop, and the process is identical to the one explained in this tutorial. Select the object, pres ctrl+C to copy it, and ctrl+V to paste it into the Photoshop document. By saving the object as a smart object, you will be able to resize it without lose image quality.

We’ve finished guys. I hope you’ve understood something new. In case of doubts, you can use the comments.

Low Resolution Works in Photos

2010-12-18T16:46:00.000-08:00

Low resolution photos may look great on your monitor at ‘screen resolution’ (72 ppi or pixels per inch). The small file size downloads fast and is easy to share online. Plus you can get a lot of these images on a memory card.
But photos taken on a camera’s ‘basic’ or ‘low’ quality settings don’t cut it when you want professional quality images for print publication. With some exceptions, a resolution of 300 ppi is considered the minimum quality standard for printing photos. More on that in a moment. But first…

"Splash of NYC" captured by Mike Opinia (Click Image to Find Photographer)

Some Definitions

pixel: smallest unit of measurement in a digital image. Pixels are typically square and make up a grid the height and width of your image. Measured in microns (1/1000 of a millimeter or about 1/25,000 inch). Image sensors in most consumer cameras have pixels 4 to 5 microns square.
ppi: pixels per inch. How resolution is measured for your “capture” or “input” devices (camera, scanner) and your computer monitor.
dpi: dots per inch. How resolution is measured for your home/office printer which outputs your image in round dots, not square pixels.
lpi: lines per inch. How resolution is measured for offset presses. Newspapers generally print at 100 lpi and require 200 ppi images for quality reproduction. Magazines use a 150 lpi linescreen (300 dpi images) and art books and exhibition prints are printed at 200 lpi (400 ppi images). The rule of thumb is to print images at a dpi that’s double the lpi.
megapixel: one million pixels. How the resolution of digital cameras is measured. The larger the megapixel rating, the more information you can capture within an image and the larger you can print that image, maintaining high quality.
resolution: level of detail attainable by a monitor or a printer, determined by the ppi, dpi or lpi. When capturing images for printing, the higher the resolution, the greater the detail (up to a point) and the larger the file size. Quality may also be affected by the lens capturing the image, the camera’s ability to process the image, and the grain and size of a scanned original.
pixelization: the jagged stairstep effect you see on a low resolution image printed larger than optimal for its file size.

"...streets of Beograd..." captured by Lubica (Click Image to Find Photographer)

file size: how many kilobytes (k) or megabytes (mb) of information in a file. Determined by the resolution and physical size of an image. Relevant for screen display and printing of images as well as storing and transferring of files.
compression: how much of the potential information in an image file is discarded to keep file size down. Saving a photo in.jpg format allows you to choose a compression level, depending on whether better quality image or smaller file size is more important for your purposes.

On ‘Print Quality’ Resolution

If you’re shooting for print output, capture your images at the highest quality setting your camera offers: High, Best, Fine, or whatever your system calls it. This captures the shot using the lowest compression ratio or no compression at all. You can always resample down (from more resolution to less) but if you interpolate up, you lose information, and therefore image quality.

Shooting at high resolution may also give you the option of cropping and enlarging a portion of your image later, retaining enough data for a quality print, even after tossing some pixels to the cutting room floor. You won’t get as many images on your camera’s memory card shooting at high-res but you can keep your creative options open by archiving your ‘keepers’ on CD or a back-up drive. Your future self will thank you.

As mentioned, the industry standard resolution for quality photo output (offset press, digital, or inkjet) is 300 ppi. However, you may be able to get away with a ppi as low as 200 if the image is not too finely detailed, if it will be printed on low quality paper such as newsprint, or if it will be viewed from a distance.
The following formula can help you calculate:

how large a print you can make from a digital image with a given set of pixel dimensions and a given resolution (ppi)?
what resolution a digital print will have printed at given output dimensions from a file with given pixel dimensions
what dimensions in pixels your digital image will have captured at given dimensions in inches and at a given resolution

"Modest Dwelling" captured by Tony Taffinder (Click Image to Find Photographer)

The Formula:

Divide each dimension of your digital image (in pixels) by the print resolution desired (in pixels per inch). This will give you the largest print size (in inches) you can generate at that resolution.
Example: (1500 pixels / 300 ppi) x (2100 pixels / 300 ppi) = 5″ x 7″.
To capture an image of this physical size at this resolution, you would need a 3 megapixel (MP) camera:
1500 pixels x 2100 pixels = 3,150,000 pixels or approximately 3 megapixels
A 1 megapixel camera will yield a 3 x 5″ print at 300 pixels per inch (ppi)
(3″ x 300 pixels) x (5″ x 300 pixels) = 900 x 1500 pixels = 1,350,000 pixels or approximately 1 megapixels
A 2 MP camera will give you a ‘print quality’ 4 x 6″, a 3 MP camera, a 5 x 7″… and it would take a 7 MP camera to shoot an 8 x 10″ print quality image.

Photo File Types

.bmp The bit-mapped (or raster) file format used by Microsoft Windows. The BMP format supports RGB, indexed-color, grayscale, and Bitmap color modes.
.eps Encapsulated PostScript. File format capable of containing both high-quality vector and bitmap graphics, including flexible font capabilities. The EPS format is supported by most graphic, illustration, and page-layout programs.

"Louvre on a cloudy afternoon" captured by Anirban Karmakar (Click Image to Find Photographer)

.jpg or jpeg. Joint Photographic Experts Group. JPEG is an image file format with multiple levels of compression. The more compression, the lower the image quality. The most commonly used forms of JPEG utilize ‘lossy’ compression algorithms, which discard a certain amount of information. JPG compression analyzes images in blocks of 8 x 8 pixels and selectively reduces the detail within each block.
JPEG is the default format for most consumer digital cameras. While its small file size is great for storage purposes, its “lossy” compression makes it less than ideal for image editing. Every time you save the file, the picture quality degrades. Once the photo quality has been lost, the original quality cannot be restored. To avoid this degradation issue, save your JPEG photos to a CD or other storage system as TIFF files. You can do this with most photo software, or with Windows XP. (Open the image. From the File menu, choose Save As. In the Save as type box, select TIF. Compression option None is recommended.)
.psd Adobe Photoshop file format (PSD) is the default file format in Photoshop, and the only format that supports all the program’s features. When saving a PSD file for use in previous versions of Photoshop or ImageReady, options for maximizing compatibility are available.
.tif or tiff.Tagged Image File Format. File format commonly used for image files. 8-bit RGB TIFF and 16-bit RGB TIFF are two variations that most image editing software applications recognize. RGB TIFF is a common choice for saving photo images after they have been polished up in editing software such as Adobe Photoshop. Before going to press, always convert to CMYK color mode.
Linda Pizzitola is principal of Kauai Design Graphics, Inc., a graphic design, copywriting and marketing firm on the island of Kauai, Hawaii. Subscribers to her quarterly e-zine, The Graphics Grapevine, receive short articles and tips on design, persuasive writing and small business marketing. To see her online portfolio and a client list, or to subscribe to The Graphics Grapevine or access back issues.

Hot Beautiful lady Effects

2010-12-17T01:00:00.000-08:00

In this tutorial we are goint to use some sexy Hot Beautiful lady Effects by photoshop. this tutorial is for those peoples who are newer user of photoshop.

Step 1:

Open a lady photo (as sexy as good!)

How about this one?

Sexy enough?

Now, let do it!

Use any cutting tools and get your lady out off the background...

Reopen that photo and put the layer under "cut layer" :

Pick Brush Tool

Download and load this brush into Photoshop: Odysee_brush

Creat a new layer under "cut layer"

Pick this brush :

Brush on the new layer like this :

OK. continue!

Download and load this brush into Photoshop : Green Lotus

Creat a new layer up on "cut layer"

Pick this brush :

Put the brush like this with color #c6eaf9

Choose any brush (just downloaded) and creat any new layer, make your photo be plendid!

Step 2 :

Pick Smudge Tool

Choose this brush : (Chalk brush 60 px)

Go to Window ~> Brushes, set option :

Duplicate "cut layer" once. Rechoose "cut layer". Start smudging on the edge of your lady how to have something like this :

Change mode = Color Dodge

Duplicate "cut layer copy", a new layer will appear up on "cut layer copy"

Keep smudge on the edge...

Change mode = Softlight.

Not bad? Want more? Ok! Let's continue!

Step 3 :

Click the top layer on layer palette.

Go to menu Layer ~> New adjustment layer ~> Curve

Result :

Wow, more impressive.

More more??? Yes yes!!!

Go to menu Layer ~> New adjustment layer ~> Gradient Map

Pick any gradient you feel it suitable to your photo, and here's some examples :

Mode = Overlay. Opacity = 70%

Mode = Multiply. Opacity = 70%

Mode = Soft light. Opacity = 60%

You've already finished this tutorial. Good luck!

Photoshop Abstract Photo Tutorials

2010-12-16T00:17:00.000-08:00

In this really easy tutorial I’m going to be showing you how to turn a regular old photo into a really interesting, abstract piece of artwork! Just like the one shown below:

1. Stock Photo/Photo Edits

Well, first off you’ll want to start by finding a nice stock photo, or a photo of your favorite celebrity! I used a photo of the lovely Evangeline Lilly, of course. After opening up your stock photo, you might want to sharpen the photo just a little bit (Filter > Sharpen > Sharpen) then if it’s to strong, go to Edit > Fade and use an input of about 50%.

2. Adding Photo Effects

Make your photo black and white by going to Layer > New Adjustment Layer > Gradient Map and using the black/white gradient in the settings.

Using a Gradient Map to make your image black and white is better than simply desaturating the image, as you’ll lose contrast that way.

3. Adjusting Photo Further

Duplicate the Background layer & move it above the Gradient Map. Set the layer mode to Color and the opacity to 40%.

Now make a Brightness/Contrast layer, use the following settings:

Again duplicate the Background layer and move it above all of the layers. Apply Filter > Blur > Gaussion Blur with a radius of 2.0. Set the layer mode to Soft light & the layer opacity to 40%.

Head over to TheDesignWorld.com and pick out a nice Abstract Render. I picked the Trace Render.

Move the render onto the canvas like so:

Change the layer mode for the ‘render’ layer to Lighten.

The result of changing the layer mode to Lighten will be like so:

4.

It’s optional, but you can sharpen the render once Filter > Sharpen > Sharpen, I did.

Create a new layer and drag a bright gradient from one corner to the opposite corner like so:

The bottom left is #c7f92a & the top right is #4e9107.

Set the layer mode to Screen.

Make another Gradient Map, Black to White, change the layer opacity for that layer to 30%.

The final touches I added was some 2d ‘tech’ stuff with the pencil tool.

Design Old-Collage Effect Poster

2010-12-15T10:11:00.000-08:00

One of my favorite ‘looks’ is the sort of old-collage feel of old photos and old paper. It’s a favorite because it lets you work images and text together really easily. In this tutorial we’ll put together a poster where there is a main photograph and a lot of text using the old-collage feel.

Step 1

This tutorial is based on a job I did a few days ago for a charity client who needed a poster to promote an upcoming event. They are a choir made up of homeless people called the Sydney Street Choir and it’s a pretty neat little organization that you can learn about at www.sydneystreetchoir.com. The brief was to promote the event using this really nice photo (shown) of the choir down by the Sydney Harbour Bridge shot by John Marmaras and including some written copy, which I’ve shown below the image.
Unfortunately there is a lot of text to go on the poster and although this image is gorgeous, it is very busy, so using the photo as the background for the poster would present problems in getting all that text working over the top. I know this is a problem because I spent an hour trying to make it work before deciding that I should try something else!

The Text…

SYDNEY STREET CHOIR
Performs With
Jonathon Welch
from THE CHOIR OF HARD KNOCKS
Mark Trevorrow
aka BOB DOWNE
Massed Choir of 110 People
Gabrielâ€™s Big Band
Also Featuring Jeremy Brennan
Tuesday 27 Nov 2007 At 7:30PM
Northside Conference Centre
Cnr Oxley St & Pole Lane, Crows Nest
Tickets: $35
All Proceeds to Sydney Street Choir
Tickets Tel: 9439 7822
SYDNEY STREET CHOIR connects with, inspires and empowers, those who are living or working in homeless or disadvantaged communities, through creating music, performance and passionate expression, that truly opens peopleâ€™s hearts.

Step 2

So if the photo-as-poster model isn’t going to work, then we need another look. I decided to put together what I call the old-collage feel. This is a good one to work with as it’s very easy to combine elements on a page since everything is meant to look a little messy anyway.
The first place we go is to iStockPhoto where I found these four images that I will use to put the poster together.

Step 3

To begin with I used the starburst paper as background by pasting it into the background layer, pressing Ctrl-T to rotate and resize it accordingly.
Next I placed the text on the page. I have used Univers Condensed for this poster. Because I knew there was going to be a lot of text, using a condensed font seemed like a good idea so that it’d be easier to get it all in. With the main heading "Sydney Street Choir," I tried a few permutations before deciding that Sydney wasn’t a particularly important word and by shrinking it down I could make "Street Choir" a lot larger and punchier.
After that I used a large soft brush and in a new layer painted black over the top right corner and around the bottom. I then set this layer to Overlay so that it would darken the paper but in an organic way. You can see the result in the following image and the painted areas in the image just below.

Step 4

Next I placed the photo on the stage and because I wanted it to look like something thrown down on a piece of paper I gave it a thick white border. I also added a faint drop shadow so that the photo looked to be interacting with the background. With this look your aim is to get the various pieces of the composition interacting with each other on the canvas. You can do this by overlapping, shadows, adjusting the lighting to match, adjusting coloring to match, and so on.

Step 5

Next I wanted to add the paper on to the stage. Because all three items (the paper, the tape, and the baggage tag) are isolated on white, it’s quite simple to cut them out. Just use the Magic Wand Tool (W) with a Tolerance set to about 32, then click in the white areas, holding Shift down so you can select them all. Then go to Select > Modify > Expand and use a value of 1px. This cuts out a thin border across the whole image and ensures there is no white on the edges. It’s a quick and dirty technique, and if you wanted to cut something more complex then you might use a better extraction technique.
Once you have the white selection expanded, press Shift+Ctrl+I to invert the selection and then you can hit Ctrl-C to copy the image out and paste it into the main image.

Step 6

After pasting in the object, I added a small drop shadow and moved the paper behind the photo layer (which I had settled in the bottom right corner so as to leave lots of room for text along the left).

Step 7

Now we start adding the text. In the image below, all I have done is paste the text in and space it out a little with line breaks. This looks sort of OK, but is pretty boring with everything being uniform. It’d be much better if we worked on the type a little to give it some variation and highlight the more important parts.

Step 8

Here you can see I’ve changed the text so that the names of the main two performers are highlighted, the words ‘from’ and ‘aka’ are shrunk right back since they aren’t important and ‘the Choir of Hard Knocks’ and ‘Bob Downe’ are subtitles. The other three performers (who aren’t as well known) are also shrunk back and will be only really read if the person is really interested. We want people passing by to see the title (Sydney Street Choir) followed by the big acts (Welch and Trevorrow) and hopefully that will draw them close enough to read the rest.
Note also that the text is also set in Univers Condensed (in various weights) and the type sizes are relatively ordered. It’s important to have some consistency and continuity in your text–don’t just have a huge assortment of different sizes and weights and fonts, or things can start to look a little chaotic. So the moral of the story is variation is good, too much variation is bad!
You’ll also see that I’ve pasted in a couple of extra photos (of the two main acts) and used the same Layer Style of Drop Shadow + thick white border on them – but have sized them down accordingly so that the white border didn’t overwhelm the photos. I’ve also transformed and rotated each so it all looks a little random.
Finally there is also the "sydney street choir" logo which I was told late in the day needed to be on the poster (gotta love last minute client changes!). Now it’s going to be difficult to cut that logo out because it’s complex, but fortunately it’s black on a white background which means all we need to do is set it to "Multiply" and the white will blend away leaving the logo stamped on the paper.

Step 9

Next I pasted in one segment of the tape image from iStockPhoto and have arranged it to look like it’s holding the paper down. Then I’ve written the "Performs With" text over the top to turn it into a subtitle linking the headline and body copy.
I’ve also pasted in the venue details down at the bottom and given the text some treatment to highlight and fade back various parts (as we did with the performer list). Unfortunately, the text is getting lost down there and since the venue and time is pretty important we need to do something about that!

Step 10

So in a layer down the bottom just above the background I pasted in a dark brown rectangle as shown (just grab the selection tool, draw one in and fill it with dark brown) and then set the layer blending mode to Multiply. This effectively makes the bottom much darker and now we can invert the text color to a beige color. In case you are wondering the beige color was selected off the paper above it using the Eyedropper tool since it’s always nice to keep colors matching on the image.

Step 11

Finally, I have pasted in the baggage tag up in the top right corner and layered it in between the title text and photo then pasted in that rather long paragraph of description text. And with that we’re complete! At this point to send it off to print, we would switch off all the text layers (except the main title) and save as a TIFF file, then open up InDesign, create a new document and place the TIFF file in. Then we would copy in the text in InDesign to make sure it shows up nice and sharp in the final print out poster. But since this site doesn’t really deal in InDesign we won’t go too much into that. I’ve included it, though, as a few people mentioned this in the comments of the last tutorial

Final Thoughts

This tutorial is not so much about technique as it is about layout and composition. In this case it would have been difficult to make the poster work just by using the photo as a background. I had all of three hours to do the entire job (charity work!), and still wanted it to look nice. Thanks to cheap stock images, it’s possible to very quickly put together a nice look that will stand out in the places this poster is going to get put up.

design Stunning Smoke Digital Effects

2010-12-14T03:10:00.000-08:00

In this tutorial we are going to show you how to easily create digital abstract smoke using both Illustrator and Photoshop. One of the best things about this technique is that it’s very customizable and you can do it pretty quickly.
As I said before, we will use Illustrator a bit, but actually you can use whatever vector software you have. The only requirement is that it have a similar tool to the Blend Tool in Illustrator.

Final Image of This Tutorial

Step 1

Open Illustrator, and using the Pen Tool (shortcut: P), draw two different curved lines, try to make them cross each other like the ones below. Those will be the shape of our smoke. After that, do the same thing again and draw two more lines. From those two pairs of lines, select one pair, and set the stroke color of the first line white and the other with dark gray(70%). Repeat the same thing on the other pair of lines but invert the colors. The reason we do this is because when we import those shapes in Photoshop we will be able to tweak the colors with a lot more ease.

Step 2

Using the Blend Tool, click on the edge of the white line and then click on the edge of the gray line. It will create a line between the two lines. With the Blend Tool selected, go to Object>Blend>Blend Options. There, change the Spacing to Specified Steps and put 200 steps. Repeat the same procedure on the other pair of lines we have.

Step 3

Now it’s all Photoshop from here. Copy the first blend and paste it in to Photoshop as a Smart Object. Repeat that for the second layer. We choose to paste as Smart Objects because you can scale and re-scale without losing quality. This happens because they remain vectors rather than becoming bitmap graphics. Besides that we can edit the vectors again, and if you are using the CS3 version it’s possible to apply all filters in a non-destructive mode as well. That means if you apply any filter you will be able to change their parameters anytime or even delete the filter effect returning to the original image. This is not dissimilar to Layer Styles except now with filters.

Step 4

Here I just organize my layers using folders. Set the blending mode to Multiply for both folders: Shape 1 and 2. After that apply a Gaussian Blur with a radius of 1 pixels in both layers: Smoke 1 and 2.

Step 5

Duplicate both layers inside of each folder. So you will have Smoke 1, Smoke 1 Copy, Smoke 2, and Smoke 2 Copy. Change the Blending mode of the Smoke 1 Copy and Smoke 2 Copy to Overlay

Step 6

Now we are going to change the color from that grayish tone to a blueish one by creating a new fill or adjustment layer and choosing Hue/Saturation. Put that layer on top of the others and double-click on the layer to edit the Hue/Saturation parameters.

Step 7

Duplicate the Smoke 1 layer and Rasterize it. Then put it on the top of the other layer, even above the adjustment layer. After that change its blending mode to Color Dodge and apply a Gaussian Blur with the radius of 25 pixels. You will get a light blue color like a glow.

Step 8

Now we have the basics. We could stop here and have a great effect already, but let’s take it to the next level. It’s time to add some extra wafts. First fade Smoke 1 back to about 50% so it’s a little softer. Then duplicate the Smoke 1 group and fade right back to 20%. Select the group and add a Layer mask. Then using a White to Black radial gradient, mask it out as it gets to the right side so the smoke is fading off into nothing.

Step 9

Next duplicate the same fading out smoke layer we made in the last step and rotate it to make it look a bit more random. If you had time you could replicate these layers from the very beginning steps in Illustrator. Your aim should be to have wafts of smoke going away from the main smoke channel. If you want a smoke on white effect, you should stop here.

Step 10

Next create a new layer above all the others and fill it with a gradient going from white (#FFFFFF) to grey-ish blue (#C4CCD0) as shown.

Step 11

Set the new layer’s blending mode to Exclusion. Exclusion (as well as Difference) invert colors from lower layers, which gives us a smoke on dark-grey effect.

Step 12

The coloring is now pretty cool, but it could be even more graceful. Create a new layer above the others and fill it with a linear gradient from #5f4547 to #7096e4 as shown. Once you have the gradient, set the blending mode to Color and 50% Opacity.

Step 13

Finally we add a bit of text to finish off the image. This effect is best when you create it larger than you need at the end, then shrink it down and run the Unsharp Mask filter over it (Filters > Sharpen > Unsharp Mask) to get the curves looking clean and crisp.

Light and Shade to Bring Text Life

2010-12-13T08:01:00.000-08:00

I’m still pretty bad at drawing, but I did learn a lot about light and shade. In this tutorial we are going to take some very basic principles of light and shade to make a rather impressive-looking text effect.

Light Sources

So before we start the tutorial, here is a little diagram about how light might hit an object. Here we have a square object in the middle with light coming from the top left. You can see that where the light hits the object, a shadow is cast on the other side. Note that the shadow is not a Photoshop drop shadow, which makes the object look like it’s hovering above the canvas. Here we want the object to look like it’s a three dimensional thing stuck on the canvas, extruding if you like. Now tell me what other Photoshop tutorial site gives you diagrams? It’s like being back in school!The best book I’ve ever read on drawin

Step 1

We begin the tutorial by drawing a subtle Linear Gradient from dark grey to darker grey. Note that because we want our light to come from the top left, that’s where the lighter part of the document is.

Step 2

Now we place some text. I’ve used a very cool font called Agency FB, which has a condensed, hard-edge feel to it. You should make the text a grey-ish blue color – #c2c8d4 to be precise.

Step 3

Next Ctrl-click the text layer and create a new layer above it. In the new layer, with that selection still held, draw a linear gradient of #495a79 to transparent from bottom right to left. So in other words you are darkening the bottom right as shown.

Step 4

Set your foreground color to Black (you can do this by pressing the letter ‘D’ on your keyboard which restores the defaults).

Now Ctrl-click the text layer again and create a new layer beneath the text layer. Now press the down arrow on your keyboard once and the right arrow on your keyboard once. Then press Alt+Backspace to fill it with black. Then press down and right again one time and fill with black. Each time you will be moving 1px right and 1px down. You should repeat this process about 30 times (which is why it’s important to use Alt+Backspace instead of the Fill tool).

Note also that to move the selection but not the fills when you press your arrow keys, you have to have one of the Marquee tools on. If you switch to the Move Tool (V) when you press down and right you will actually move the black fill as well as the selection and will just be filling the same pixels over and over.

Step 5

Here’s what you should now have. Now deselect and make sure you are on the shadow layer, then go to Filter > Blur > Motion Blur and use values of -45 degrees and a distance of 30px.

Step 6

Set your shadow layer to Multiply and about 40% Opacity and then hold down Shift and press the down arrow and then the right arrow. This will move your object right and down 10px each (Shift tells Photoshop to go 10px at a time instead of 1). Now you may have some of the blurred parts of the shadow sticking out to the top and left of the object. If this is the case, grab a small soft eraser and gently erase away anything which shouldn’t be shaded (remember the diagram at the beginning).

Step 7

Next duplicate the shadow layer, hold Shift and move it down and right again. Then run the Motion Blur filter again with a distance of 50px this time and set this layer to Multiply and 20% Opacity. This is just to give our shadows more of a trail off.

Step 8

Now create a new layer above all the other layers, hold down Ctrl and click the main text layer to select its pixels and back on your new layer fill the selection with White. Don’t let go of the selection just yet though. Instead press down and right one time to move 1px away and then hit Delete.

Set this thin white line layer to about 80% Opacity.

Step 9

As you can see, the thin white line gives a sort of highlight effect where the light source is hitting the text and gives the impression that the text is more three dimensional.

Step 10

Next we want to create some streams of natural light. Create a new layer above all the others and draw four or five white rectangles approximately similar to those shown (i.e. getting fatter as they go down).

Step 11

Now press Ctrl+T to transform and rotate and enlarge the rectangles as shown. Now normally you’d press Enter when you’re finished, but this time don’t let go just yet. Instead, right-click and you will get a pop up menu showing you other types of transforms you can do. Choose Perspective. The reason it’s important to do this in one step is so that you don’t lose your bounding box. So take the top left two points and bring them closer together so that the light appears to be coming from one place and spreading out.

Step 12

Here we have our four strips of "light." Now set the layer to Overlay and 20% Opacity and then go to Filter > Blur > Gaussian Blur and give it a blur radius of 6px.

Step 13

You should now have something that looks like this.

Step 14

Now since those thin strips are meant to be light, it would make sense if our highlight layer only showed up where the light was hitting right? So Ctrl-click the light layer and then click on the highlight layer from earlier, then while the selection is still on, click on the Add Layer Mask button (it’s the one at the bottom of the layer palette to the right of the ‘f’ icon). This will create a Mask that only shows the highlight layer where the light overlaps it.

Step 15

So you could stop here; it’s already looking pretty good, but we’ll finish this effect off by adding some warm lighting.

Step 16

So first of all create a new layer just above the background and fill it with a pinkish color – #9d506c.

Step 17

Now set the pink layer’s blending mode to Colour and the opacity to 20%. This gives our background a nice reddish-warmth. Over the top of this we can now mix in some yellows. If we don’t put in the reddish cast underneath, the result comes out looking overly yellow and not particularly real.

Step 18

Next we create a layer just above the pink. Fill it completely with white and then go to Filter > Render > Lighting Effects. I don’t often use Lighting Effects, but it does have one very cool preset called the Two O’clock Spotlight, which you can select by going to Style at the top and looking through the options. You can pretty much use this as default, but for our purposes it helps to extend the ellipse to make it a little longer (i.e. the spotlight is a little further off).

Step 19

Now we set the lighting layer to Overlay and you have something like shown below. Now duplicate that layer, move it above all the other and set it to 40% Opacity. This makes sure that our warm lighting is also interacting with the text and not just the background.

http://psd.tutsplus.com/tutorials/text-effects-tutorials/using-light-and-shade-to-bring-text-to-life/

Conclusion

Finally, we duplicate the top lighting layer one more time and set it to 65% Opacity, then click the Add Layer Mask button on the layers palette again and draw a linear white to black gradient from top left to bottom right. This makes the extra lighting layer fade off as it goes down right.

Design Realistic Tattoo By Photoshop

2010-12-12T05:09:00.000-08:00

There are lots of tutorials on the Web that claim to achieve a realistic tattoo effect. Usually these tutorials instruct the user to import an image they want to use as a tattoo and to set it to overlay. Out of experience I can say that this does NOT look like a tattoo. It looks like…well…an overlayed image.
In this tutorial I will be demonstrating an advanced technique to achieve a realistic tattoo. We will be using masks, adjustment layers, displacement maps, and several brushing skills will be applied.
So the first thing I did was go looking for a good stock image. I wanted a face with a lot of detail such as facial hair, expression, and most importantly, pores! I tend to get my stock images from the free site.
Here Look The Final Image of this Tutorial

Step 1

Ok, open up your stock image and duplicate it by clicking on the layer and dragging it to the New Layer icon down the bottom (it’s the one to the left of the trash can). Name this layer Base, desaturate it (Ctrl+Shift+U) and duplicate it again. The reason I am doing this is that I like to have multiple stages of my base image, just in case I mess up, so that I can come back at any given time and fix errors.

Step 2

Time to prepare our image. I really want to bring out the detail in the skin, so I am going to up the contrast and adjust the tones a little bit. Let’s add three adjustment layers: First, a Levels layer, then a Brightness/Contrast layer, and last a Curves layer. You can add each by going to Layer > New Adjustment Layer > Levels/Brightness/Curves depending on which you’re adding. Adjustment layers allow you to change the properties of the image below without actually destroying or changing image data.

Step 3

The well known ‘S-shape’ in the curves layer enhances contrast but may have a downside. As you can see, some parts of the stock are affected heavily by the light. These parts include the forehead and parts of the cheeks. The curves layer can make these parts too light and eliminate their detail. To solve this, you need to apply a layer mask to the curves layer and brush up those parts.
You can do this by going to your layers palette, clicking on the curves layer, then down the bottom clicking on the button third from the left to add a Layer Mask. Once you’ve added a layer mask, you’ll see an extra mask clipped on to the layer. Click on that mask, and then using a softish brush gently paint black over the areas where you do not want the curves layer to show through. Remember that when you add a layer mask, white lets the layer show through and black hides it.

Step 4

I was not all too happy with what I had, so I decided to use the Burn Tool (O) to touch up the image manually. I used a large, soft brush and set the range to Shadows with an Exposure of 32% (shown)
Now go to Layer>Flatten Image and save the file as Displacement.psd. DO NOT CLOSE THE FILE, as you will lose everything. Hit Ctrl+Z to undo the ‘Flatten Image’ command and now go to File > Save As and save the file as Tattoo.psd or any other name apart from Displacement.psd
We will be using the Displacement.psd file as a displacement map. Therefore we shouldn’t edit it any further, and any change we apply to our image from now on will be saved into the Tattoo.psd file. Ok, on to the fun part…

Step 5
Now that we’ve finished prepping our image, we can finally start applying the tattoo. Open up your Gomedia free vectors file in Illustrator (preferably, but you can also open it in Photoshop). Copy and paste a design of your choice onto the face. Rotate it and adjust it accordingly, so that it fits more or less. Mask out any parts that should not appear to have a tattoo on them. In my case these are the lips. Rename the layer to ‘Tattoo’ so that you can find it easier. Close the vector eps file and do not save the changes. Here is how my design (tribals, set 3) looks applied.
I masked out the top part so that it doesn’t go over the lips, and I got rid of the tips that stick out beyond the face.

Step 6

Duplicate the shape layer twice. There now should be a ‘tattoo copy’ and ‘tattoo copy 2′. Set the ‘tattoo copy’ layer to Overlay at 80% Opacity. Set the ‘tattoo copy 2′ layer to Soft light at 64% Opacity. Hide the original ‘tattoo’ layer.
For organizational purposes, I have created several layer sets and dropped my layers into those sets. You can create a layer set by clicking on the icon in your layers palette that is located between the ‘new adjustment layer’ icon and the ‘new layer’ icon. Using layer sets will smooth your workflow.

Step 7

Rasterize your ‘tattoo copy’ layer by right-clicking on it in the layers palette and selecting Rasterize layer. This process will return the blending mode to Normal so we must set the blending mode back to Overlay and the Opacity back to 80%. Now go to Filter > Blur > Gaussian blur and blur the layer with a value of about 2.0 pixels.
Next, this is where your creative mind steps in. You will have to mask away parts of both ‘copy’ layers until you have found a satisfying result regarding the opacity of the tattoo. I prefer to use a big brush and alter in between 10 and 20 percent opacity while brushing. Here is how my result looks:
Congratulations, you have just gone beyond the part that is covered in any other tutorial. You have created something that looks more or less real. But we are not done yet.

Step 8

We are almost there–time to apply our displacement map. Select your ‘tattoo copy’ layer and go to Filter > Distort > Displace. Leave the default settings and hit ok. A window will come up prompting for a psd file. Now navigate to your Displacement.psd file and select it. Select your ‘tattoo copy 2′ layer and hit Ctrl+F. This will repeat the filter for this layer giving you something similar to this:

Conclusion

I hope that you have learned something from this tutorial and I hope that you understand that it takes a lot of time and effort to make something look real. The best way to achieve such an effect is by experimenting and constantly looking at challenges from a different angle. When I first started doing this it took me about 6-8 hours to get a good balance and to develop this technique.
Please note that sometimes the displace filter can have a negative effect. In such cases either do not use it or play around with the opacities of the layer and the Fade Displace option under the Image tab. You will truly achieve great results by playing around. Here is my final product that I submitted to a contest:

Download Source PSD

Vanishing Point Filter to Mock up a Business Card

2010-12-11T19:31:00.000-08:00

There are many instances when you will want to simulate or mock up how a design would look printed out and photographed. It might be for a portfolio piece, it might be for a client to help them imagine a concept design, or it might just be for your own satisfaction at seeing how your work is going to look to the end user.
In this technique, we’ll use a bit of perspective and the very useful Vanishing Point filter to achieve some great results. I will apply this technique to Collis’ Sample Calling Card from a previous tutorial.
Here Look Final Result

Step 1

First we choose something to be our background for the work. In my case, I chose a wooden table I have in my office. After that get a business card or a square piece of paper to use as reference and take a picture. Without moving the camera, get rid of the piece of paper and take another picture.

Step 2

Now let’s create our Perspective Plane using the Vanishing Point filter (Filters>Vanishing Point). A new window will open with the filter’s settings.

Step 3

Select the Create Plane Tool (C) and start creating a box using the business card as reference. After that, just resize the plane.

Step 4

With our plane done, now lets place our card there.

Open the image you want to place on the grid. In our case it’s Collis’ card, and press Ctrl+A to select everything and Ctrl+C to copy it.
Back to our tutorials file, create a new layer and go again to the Vanishing Point filter.
Inside the filter’s setting box, paste the card.
Now just move it and resize it until you find the position you like.

Repeat basically the same actions and place the other side of our card.

Step 5

To make our card more real, we will use the Layer Styles. Lets add some Drop Shadows to the front side of the card.
Click the right button of the mouse on the layer, copy the layer style, and paste it to the other side of the card’s layer.

Step 6

Select one of our sides, duplicate the layer, and convert it to a Smart Object. Add a Gaussian Blur (Filters>Blur>Gaussian Blur). (Note: if you are not using Photoshop CS3, don’t worry about converting to a Smart Object.) Now just change the Blending Mode to Screen 45%.
Repeat the same steps for the other image.

Step 7

Now let’s organize our document. Try to use layer names that you will remember and group them in cards. After that select everything but the guides, group them again, and name the group "content." Duplicate the group and convert it to a Smart Object.

Step 8

You can stop here, but we’ll keep going a bit further to show you how to add a depth of field effect. With our “Content” Smart Objected selected, select all layers.

Change the Feather Options to 80px and Anti-alias.
Create a rectangular selection like the one I did. Invert the selection (Select>Inverse).
Now Apply a Gaussian Blur again.

Notice that this will create that distance focus effect: everything gets blurry the further away it gets from the focal point.

Step 9

After that you can even apply a Diffuse Glow (Filters>Distort>Diffuse Glow) to make it look more real.

Conclusion

The Vanishing Point filter is definitely an amazing filter and it allows us to preview our work with more realism. The best thing is that it’s really easy to use. You could even place another texture for the table or add more objects to the scene.

Design 3D Software Box in Photoshop Using Actions

2010-12-10T18:40:00.000-08:00

Final Product What You'll Be Creating

Actions can be used to quickly automate repetitive tasks. In this tutorial, we will demonstrate how to create an action that will automatically create a 3D software box from a flat template.

Video Demonstration

Take a look at this short video demonstrating what this action will do.

Step 1: Create the Canvas

Our first step is creating an action to create the canvas template. Open action panel, click folder icon to create new set. Name it Psdtuts+ box. Click new icon to create new action and name it 1-Create Canvas. Click Record. Remember that you should not do anything that is not needed because Photoshop will remember that. Make sure to follow this tutorial closely.

Step 2

Our first step is creating the new file. Click File > New. The box dimension are 19.3 x 5.8 x 24.2 cm. For the canvas size, use 25.1 x 30 cm. Set resolution to 300 dpi, this will enable the final artwork to be printed.

Step 3

Create two horizontal and vertical guides. Click View > New guide with position: 5.8 cm. You will see that the actions list is updated.

Step 4

Add some information on the size of the template. We will not use space on top left corner, so add that as well. Because this action is intended to be used by many people, not for our personal use, we have to make sure that everything we do here can be done on other people’s computer. The same goes for adding text. Use font that available in every OS (PC and Mac). In this tutorial, I used Arial.

Step 5

Let’s simplify the template and flatten all layers. Click Layer > Flatten Image.

Step 6

We’ve finished the first action; creating the box template. Press the Stop button. Below, you can see list of steps that we performed. I suggest you to test this action by clicking the Play button.

Step 7: Front Cover

We’re done with creating the box template. Our next step is creating an action to automatically render the template into 3D. This takes lots of steps. We’ll simplify it by separate it into 8 smaller actions. Our first action will create the front cover. Click new action icon and name it 2.1-Front Cover. Click record button to start recording action.

Step 8

In practice, at this point the box design is possibly in some layers. So, our first step is to flatten all layers. The problem is now we only have one layer and Flatten Image command is not available. To fix this, press Stop button to stop the recording process, create new layer, press Record to continue recording, click Layer > Flatten Image. This way, we can record Flatten Image command and skip creating new layer. Next step is to reset foreground and background color to default, black and white. Use the rectangular marquee to select front cover. Hit Cmd/Ctrl + J to duplicate selection to new layer. Rename layer to front.

Step 9

Press Stop button. Place a reference image onto the canvas. Move it behind layer front. Activate layer front. Press Record button to continue recording process.

Step 10

Press Cmd/Ctrl + T. Transform layer front until it fits the onto the reference image.

Step 11

Double click layer to open Layer Style dialog box. Add Gradient Overlay. Press Stop to stop the recording process.

Step 12

We’re done recording actions for front cover. This is the list of steps that we did. Make sure to test our action by running action 1-Create canvas and then action 2.1-Front Cover.

Step 13: Side Cover

First, hide the reference image. Create a new action, name it 2.2-Side Cover. We will be recording the creation of the side cover.

Step 14

Activate Background layer. Use rectangular marquee tool to select side cover. Duplicate selection to new layer (Cmd/Ctrl + J). Rename layer to side.

Step 15

Press Stop, we don’t want this step recorded. Place layer side above reference image.

Step 16

Make sure layer side is active. Continue recording. Transform side cover to perspective.

Step 17

Add Gradient Overlay and Color Overlay. These layer styles will add some shades onto side cover.

Step 18

We’re finish with this part. Press Stop button. Take a look at steps we have recorded. Test the progress by running all the actions we have created.

Step 19

Hide reference image. Our next step is creating an action for top cover. Click new icon and name this 2.3-Top Cover. Click Record button.

Step 20

Activate Background layer. Select top cover, hit Cmd/Ctrl + J. Rename layer to top.

Step 21

Press Stop button. Now place reference image behind layer top. Make sure to reactivate layer top and press Record button to continue recording.

Step 22

Hit Cmd/Ctrl + T and transform top cover.

Step 23

Add layer style Gradient Overlay. Press Stop button.

Step 24

Below is the list of recorded steps. Don’t forget to test the progress.

Step 25: Shadow

Hide reference image. Create new action, name it 2.4-Shadow.

Step 26

Activate Background layer. Create new layer. Rename layer to main shadow. Press Stop button. Place reference image under layer main shadow. Reactivate layer main shadow.

Step 27

Press Record. If this is an ordinary illustration, we can just draw the shadow manually using brush tool. Because actions cannot record manual drawing, we need to use another method. Use polygon lasso tool to create selection in shadow shape, right under the box. Click Edit > Fill, Use: Black.

Step 28

Deselect (Cmd/Ctrl + D). Click Filter > Blur > Gaussian Blur to soften the shadow.

Step 29

Set layer opacity to 34%.

Step 30

Hit Cmd/Ctrl + J to duplicate layer main shadow. Add another Gaussian Blur, this time use very big Radius. This will be the cast shadow on the floor.

Step 31

We’re done with this action. Press Stop to stop recording.

Step 32: Drop Shadow

Create new action, name it 2.5-Drop Shadow.

Step 33

Select Background layer. Create new layer, rename to drop shadow. Press Stop button. Place layer above reference image.

Step 34

Press Record button. We need to create another shadow that goes behind the box. Use polygon lasso tool to create the selection and fill it white black to white gradient. Change layer blend mode to Multiply to hide lighter pixels.

Step 35

Deselect (Cmd/Ctrl + D). Add Gaussian Blur. Reduce layer opacity to 58%.

Step 36

Press Stop and hide reference image, we no longer need it now. Below, we can see that there is too much shadow on the back. Again, if this is just another illustration we can simply use an eraser tool and delete it. Because Photoshop cannot record manual drawing, we will use another technique, masking. This will takes more time but at least Photoshop can record that.

Step 37

Press Record button. Add layer mask then draw a linear black to white gradient. Shadows covered with black will be hidden.

Step 38

Drag layer mask icon to trash icon to delete it. Select Apply to delete hidden pixel. If you still not satisfied with the result, you can repeat this process. Add layer mask again, draw gradient, and then delete the mask.

Step 39

We’re done with this action. Press Stop.

Step 40: Cut Front and Side Cover

We will add a nice reflection on the floor. Create new action again. In this action, we will simply cut each reflection into separate layers.

Step 41

Activate Background layer. Select side cover. Cut selection to new layer by pressing Cmd/Ctrl + Shift + J. Rename layer to side reflection.

Step 42

Activate Background layer. Select front cover, cut it to new layer (Cmd/Ctrl + Shift + J). Rename layer to front reflection.

Step 43

We’re done with the action. Press Stop.

Step 44: Create Front Reflection

Next action is creating front reflection. Create new action.

Step 45

Our current canvas is too small for reflection. We need to add extra space. Click Edit > Canvas Size. Select top rectangle since we want to add canvas to lower part of the image.

Step 46

Remember that in our last action, layer front reflection is selected. So, we can directly continue to transformation. Hit Cmd/Ctrl + T, right click and choose Flip Vertical. Hold Cmd/Ctrl and move each corner. See picture below for reference.

Step 47

Double click layer. Set Opacity to 30% and add Gradient Overlay.

Step 48

Add layer mask. Draw white to black gradient until front reflection fading gradually.

Step 49

Press Stop button. We’re finish with this action.

Step 50: Create Side Reflection

Create new action. Click Record.

Step 51

Remember that in our last action, active layer is front selection. So, we need to select side reflection to activate it. Perform similar transformation process.

Step 52

Set layer opacity to 30% and add Gradient Overlay.

Step 53

Add layer mask. Draw gradient to gradually fade the reflection.

Step 54

Press Stop. Let’s review our action.

Step 55: Action 2.9-Clean up

Create new actions. This will be our last action.

Step 56

Select Background layer. Draw a simple black to white radial gradient.

Step 57

We don’t want the user distracted by thin guides on the workspace. Click View > Clear Guides to remove them.

Step 58

This one is short.

Step 59: Combining All Steps Into One Big Action

Let’s simplify the action. Create new set. Alt-drag action 1-Create Canvas to duplicate it. Create new action and name it 2-Render. We won’t record any command so press Stop button. Alt-drag list of commands from action 2.1. Alt-drag list of commands from action 2.2 and put it under previous list. Keep doing this until every command is in one giant action. If you test the action by running first action then second action, you will get image below.

Step 60: Create Product Box for Psdtuts+ Texture Pack

We’re done with the action. Now, we’ll use this action to create a simple Psdtuts+ texture pack box. With the help from our action, designing process is much easier. Select action 1-Create Canvas and press Play button to automatically create cover template.

Step 61

Let’s fill Background with a simple gradient.

Step 62

On top left corner of the front cover, draw a square shape. Use pen tool and click its right bottom corner to delete it. Duplicate the shape, hit Shift + Left Arrow and Shift + Right Arrow a few times to move the shape. From the option bar, select subtract icon. We will have a ribbon shape.

Step 63

Change its color to #ebbf25. Add Gradient Overlay.

Step 64

Create new layer, hit Cmd/Ctrl + Alt + G to convert it to clipping mask. Paint white on indicated areas to add depth.

Step 65

Use pencil tool, size 2 px to draw a straight line on some part of the ribbon.

Step 66

Create new layer and place it under the ribbon. Draw a shadow. Create another layer and draw softer and bigger shadow.

Step 67

Add some text on it. Give it layer style Stroke.

Step 68

Create new layer and draw a white to black radial gradient from top left. Set blend mode to Overlay.

Step 69

Let’s add some texture. Here, I’m using a nice texture from Vandelay Premier. Set blend mode to Overlay and reduce its opacity.

Step 70

I use premium watercolor brush from Psdtuts+ to create some splatter. Place the splatter under the ribbon to get a nice 3D effect.

Step 71

Add some logos to each cover. Add text and give it some Stroke to keep it stand up.

Step 72

Select action 2-Render and press Play button. Wait for a few seconds or minutes, depends on the speed of your computer.

Step 73

It’s magic! You’ve got yourself a 3D product box. Congratulations!

Final Image

That’s it. I hope this tutorial inspires you to create something cool automatically using actions.

Design BlackBerry Interface Using Photoshop

2010-12-09T18:52:00.000-08:00

Here is very long tutorial, in this tutorial you will be making BlackBerry in Photoshop. A lot things for you to learn in this tutorial. As we found some website are publishing our tutorials as it is without changing even pictures, so we’ll be uploading watermarked pictures now and onward.

1. First of all take a new file in Photoshop and put any picture as the background in it. I’ve taken 500x600px size and RGB Color mode and 72 DPI with this picture as background:

2. Now pick Rounded Rectangle tool and draw a rectangle with 50px rounded corners and use Edit >> Transform >> Warp tool to make top and bottom edges a bit round, no worries about color please:

3. Now we have to apply Blending Options to it, Now run the commands, Layer >> Layer Style >> Drop Shadow, Inner Shadow, Inner Glow, Bevel & Emboss, Color Overlay, Satin and give the following settings on relevant boxes:

You will get the following result:

4. Now draw another rounded rectangle with top and bottom slight curved, but smaller in size, with color #171717 and apply the following Blending options to it:

you will get this kind of result:

5. Copy this rounded rectangle, remove Blending options and fill it with white color and reduce the opacity of layer to 10% and remove the left and bottom part like show below:

6. Now draw a small rounded rectangle on top of this rectangle:

this would be used as Speakers and apply the following settings on it by running the command, Layer >> Layer Style >> Drop Shadow, Inner Shadow, Pattern Overlay and Stroke:

You will get this:

6. Now to make screen you can use any Wallpaper, I’m using the following and giving it slight inner and drop shadow (Layer >> Layer Style) with 25% white outline with 1 px size, like:

7. Now by using Pencil Tool with 1 px size and in white color, draw the Signals Icon, like I’ve done below:

8. Like this I’m going to make Battery icon, Speaker, Wifi, BlueTooth etc. Icons, and also putting some icons on it. please have a look so far:

9. Now I’m going to make the bottom part, first I’m going to make the separation, pick Rectangle Tool and draw a long horizontal rectangle just under the screen and fill it with #737373 color and apply Drop Shadow and Gradient (black white black horizontal), like:

10. Now Pick Pen Tool , take new layer and draw the shape like shown below:

Right click anywhere and select Make Selection, give 0 in Feather and hit OK. Fill it with #9c9c9c color and then right click on the name of this layer and select Paste Styles, you will get something like this:
11. Give this layer a slight Drop Shadow and the Gradient (Layer >> Layer Style) as show below:

You will get this:

12. Now by using this technique make 3 More curves, but last curve would be gradually having less bend, like

Infact I’m going to make the Keypad, as black berry has 4 Rows for keypads, so that is why I’ve adjusted partition.
13. Now I’m going to make End/Power key, just zoom in that area and pick Pen tool and draw the shape as shown below:

take new layer, right click anywhere and select Make Selection and fill it with #e9e9e9 color and reduce the opacity to 15%, then apply Inner Shadow, Drop Shadow, Bevel & Emboss (Layer >> Layer Style) according to your desire, I’ve made like this:

14. Press Ctrl+J to copy it and then press Ctrl+T (Transform) and then right click on it and select Flip Horizontal and then adjust it towards the left side, it would be for Send key. As show below:

15. Now I’m going to make Trackball, for this pick Ellipse tool and draw a circle in the middle of these two buttons, and then apply the following blending options:

you will get something like this:

16. Now draw a smaller circle over it and then apply a Built-In Style from the Style Panel, you will get something like this:

17. Now I’m going to put Menu Key and Escape Key also icons on Send & End/Power keys, so I’ve made these keys and placed as show below (I’m trying to reduce this tutorial so that is why didn’t write how I made these, hope you understand it).

18. Pick pen tool and draw the shape at the bottom, as shown below:

take new layer and right click and convert it into Selection and fill it with any color and apply the following Blending Options:

You will get this:

19. Now as we know black berry has keys in 10 columns so I’m going to use Guide lines and I’ve put guidelines equally to make 10 columns like:

20 Now you have to make each button separately and to save time I’ve made all buttons and applied Bevel & Emboss over all buttons, like:

21. I’ve given some detailing over it like:

22. Now I’m going to write alphabets and symbols over it as:

23. Now I’m going to make Spacebar, take new layer and by using Pen Tool draw the shape like:

Right click anywhere, convert it to selection and then fill it with any color and apply the following Blending Options:

you will get something like this:

24. By using this technique I’ve also made 2 Shift buttons, 0 and symbol button as:

25. Now finally I’m going to apply some detailing and putting Stunningmesh over it. Here is the final look:

Hope you like this tutorial as well.

Good Design with Swirls and Flourishes

2010-12-07T09:02:00.000-08:00

Final Image Design with Swirls and Flourishes Tutorial

It’s very common these days to see swirls and flourishes within graphic design. You can use brushes or vectors to achieve this look, but if you want to customize your own you’ll have to dig in and spend some time creating them. You should check out My 10 Favorite Swirls and Decorative Brush Sets post for some awesome free design elements you can download. This tutorial will cover some of the techniques you can use to create your own beautiful swirls and flourishes.
A quick thanks to Zoe who requested a tutorial like this, by dropping me a comment using my Community Suggestion Box. If their is a tutorial you would like to see covered, I would love to see your suggestions there.

Step 1

Open up Illustrator and create a new document. All the shapes I’m gonna draw are merely suggestions and I would encourage you to experiment with your own shapes and styles. Grab the pen tool and draw a nice wavy line.

Step 2

Throughout this tutorial we are going to create brushes and symbols to help us make the shapes. I want the vines to begin wide and gradually get thinner, so we are going to use a simple custom brush to create this look. Grab the pen tool or use a 3 sided polygon and draw a long triangle shape like below.

Step 3

Open up the brushes palette. If it’s not open click Window->Brushes. Drag the shape you made over to the brush palette. In the options that appear choose New Art Brush. In the second window of options keep all the defaults except change the colorization method from the dropdown menu to tints. That step is important if you want to change the color of the brush later.

Step 4

Click on the swirl you made and then the new brush you made to apply the brush. You should now have a simple wide to narrow swirl shape like below.

Step 5

Next up we are going to make a tighter swirl at the end of our line utilizing the spiral tool. Grab the spiral tool, which is nestled by default under the line segment tool. Single click anywhere on the canvas to bring up the spiral tool options. I used the options shown below.

Step 6

Rotate and size the spiral into place.

Step 7

Draw another branch coming of the vine. I think it really helps the design look organic if you vary the size of the vines. For this branch I changed the stroke to .5.

Step 8

Now we are going to design a leaf to make it into a symbol we can use throughout the design. Grab the pen tool and draw out a leaf shape like below. Draw the basic black shape and draw a highlight in white. Use the image below as a reference.

Step 9

Open up the symbols palette (Window->Symbols). Drag your leaf that you drew over to the symbols palette. Change the name to something applicable and switch the type to graphic.

Step 10

Click and drag an instance of that leaf symbol onto your canvas. Rotate it and resize it into place at the end of the smaller vine. I also added a second smaller leaf and rotated a little more.

Step 11

Now we are going to make another brush for some of the smaller vine branches. Draw a long triangle like before, using the brush we made earlier, the pen tool or a 3 sided polygon. Then grab the ellipse tool and draw an oval at the end. Use the image below as your reference.

Step 12

Just like in step 3 select the shapes you made and drag it to the brushes palette to make a new brush. Don’t forget to select tint from the colorization method.

Step 13

Grab the pen tool or the arc tool and draw a small branch. Click on the new vine brush you created and that will give you a simple branch you can use throughout the design. Change the stroke to .25

Step 14

The rest of the vines are more of the same. I did add two more leaf symbols to help vary the look. Use the image below to add two more symbols.

Step 15

The techniques for this second large branch are all the same brushes and symbols that we’ve already stepped through. To make the thicker swirl on the right side I used the twirl tool with a .5 stroke and stroked it with the second vine brush we created. Here’s were I’ve got so far:

Step 16

Continue making swirls, branches and leaves until you have a design you’re happy with. Be creative and remember to experiment with different sizes and widths to keep the look organic. Here’s what I came up with.

Step 17

Now it’s time to add some color back into our design. If you have colors in mind that you want to use, feel free to color the image right now however you’d like. I decided to get some help from Adobe Kuler. I wanted a simple green theme for the vines. I found an awesome swatch theme called “Rainy Green Light.” If you’ve never used Kuler before you can learn a little more through a short tutorial I wrote about Using Adobe Kuler. Basically, all you need to do is signup for an account so you can use their service. Sign in, find a theme you like, download the theme and place the swatches in your swatches folder within your Illustrator folders (if you are using windows, that path will most likely be: C:\Program Files\Adobe\Adobe Illustrator CS3\Presets\Swatches). Within Illustrator open up your newly found swatch theme by clicking on the small arrow in the top right of the swatches palette, choose Open Swatch Library and choose your theme. Kuler is an awesome service, it’s definitely worth experimenting with.

Step 18

Using your own color theme or the one you downloaded change the swirls to different colors. Play around till you get something you are happy with. Here’s where I’m at so far:

Step 19

Illustrator is perfect for making lines and vector shapes, and photoshop will service us nicely finishing off the look and adding some texture. So go ahead and open up photoshop and create a new document at the size you want. With the document opened up in Illustrator select everything, then click and drag it into your new photoshop window. Resize it and rotate it into the top left corner. Click enter to accept the placed object.

Step 20

Make a copy of the left swirl layer (while selected click Layer->Duplicate Layer). Then hit ‘ctrl, t’ to bring up the free transform tool. Rotate and place the copied flourish in the lower right portion of the canvas.

Step 21

Click on the text tool and add your text to the middle of the canvas. For the fonts I used OptimusPrinceps and Scriptina.

Step 22

Now you can add a nice design element I choose a cool bird silhouette. You can find this one in the Birds of a Feather font (letter t). All three of the fonts I used can be found for free at DaFont.

Step 23

I thought the background could use some more interest and texture. Click on the background layer and add a slight radial gradient like the one below. My colors are: #c4c083 and #f6f2ba.

Step 24

Next up, I went out and found 2 awesome free textures. If you’d like to use the same ones, you can download them here. Place the one called texture2 on the top layer. Change the layers blend mode to linear burn and the opacity to 20%.

Step 25

Place the file called texture 1 on the top layer. Change the blend mode to Darker Color and the opacity to 60%.

Step 26

I think that looks pretty slick already, but now the swirls and text looks like they could use a little texture as well. Copy the layer for texture 1 and paste it on it’s own layer at the top. Then ‘ctrl, click’ on the thumbnail in the layers palette for the left swirl to select it. Hit ‘ctrl, shift, i’ to select the inverse, then click delete to get rid of any part of that new texture layer that isn’t directly above the left swirl. Change the blend mode to Multiply and the opacity to 93%.

Step 27

Repeat these texture overlay techniques for the right swirl and the bird. For the bird layer I used Hard Light for the blend mode at 73% opacity. Here is my final result.

Creative Photo Composition By Photoshop

2010-12-05T18:22:00.000-08:00

It would be lovely if every client gave you perfect photos to work with, but all too often this isn’t true. When you get photos that are too small, not visually interesting, or of poor quality you have to get creative. In this tutorial, I’ll take you through an instance where I had to make an A4 magazine cover out of a snapshot from a cheap camera.
This tutorial is following an actual job I did maybe a year ago for one of our charity clients. They had had a couple of documentary film makers out in Vanuatu and had a pretty ordinary photo of them that they wanted for a monthly newsletter/magazine cover.
Note that I’ve scaled the sample PSD and the tutorial images down to a size that works for the Web, the real work was of course done at 300dpi and A4 size and everything was a lot bigger, but that doesn’t really matter for us here.
Here Look the Final Image

Step 1

So here’s the photo I was given. It’s a nice enough photo in that it shows the film makers and the locale well, but it’s small and the wrong dimensions. If I scale it up to A4 it’s going to look awful both because the quality in the photo isn’t there and because it’s the wrong dimensions, I’ll wind up cutting out most of the image anyway.

Step 2

So I paid a visit to iStockPhoto.com, which is where I get most of my photos, and I found this one of a retro looking TV out in the grass. This is perfect for the cover because they are making a film so it’s neat if the photo is on a TV and the scene looks sunny and tropical which matches Vanuatu.

Step 3

The image however is not quite A4, so the first thing we need to do is extend it. We can do this with the Clone Stamp Tool (S). If you’ve never used this tool, basically it works in two steps. First you hold down Alt and select what you want to clone then you paint somewhere else and it copies the first point. There’re a few things I’ll say about this tool. First when you hold down Alt, you’ll see some crosshairs that are extremely useful for ensuring you are positioning the tool correctly. So here I first select exactly the edge, then move the cursor down, and again press Alt just for a moment so I can see where the cross hair is again (but don’t click the mouse again or you will reposition where you are cloning from). Then you can align edges precisely. The other thing to note is that it’s generally better to use a soft brush when cloning.
Anyhow so in this step I used a soft brush, duplicated the photo layer so there are two copies, switched the visibility of the top one off and then simply duplicated the background over the bottom white area. Note that this won’t look quite right but we’ll fix that in a moment.

Step 4

Now switch the top layer back on, and using the Clone Tool again, brush the larger strands of grass down following the angle of the blades. In the image below, I’ve faded out the bottom area so you can see which part is clone and which is original image.
So what is happening here is in the previous step, you filled the layer with a general grass texture (which didn’t look 100% correct). Then in this layer on top, we are brushing the main blades of grass over the top. This should fool all but the most discerning eyes into thinking it is a continuous photo. The grassy texture is messy enough that unless you look closely you won’t realize isn’t quite right.

Step 5

Now we create another layer on top and use the color picker to pick out the top-most blue for the foreground color. Then for the background color pick out a slightly darker blue. Then in our new layer draw a Linear Gradient straight down from dark blue to lighter blue. Make sure that the lighter blue begins just past the edge of the photo you are covering up.
Then grab a soft eraser brush and erase the blue gradient layer so that it’s all gone except the top part fading into the photo. There are of course some problem areas where the grass stems continue on, but we’ll fix those next…

Step 6

Now zoom in close and with the Clone Tool taper off the grass stalks to look like they’ve ended (somewhat) naturally.

Step 7

So now we have our TV background going off to the edges with the television nicely centered. If you wanted, you could spend more time on the sky/grass stalks, but in this case we’re going to have text there anyhow so it’s not uber important.
What we want to do next is get the photo to look like it’s part of the image (in particular like it’s on the screen). So first we place the photo on top of the screen and using Ctrl-T to transform, get it to roughly the right size.

Step 8

Now we switch off the visibility of the photo layer temporarily and using the Pen Tool go around the area of the television that would normally show pictures. Once you’ve got your path, right-click on the canvas (make sure you still have the pen tool on though) and choose Make Selection and the press OK in the dialog box that appears.

Step 9

With the selection still up, turn the photo layer back on and click on it so that you are working with the photo. Then press Ctrl+Shift+I to invert the selection and hit delete. This will cut away the rest of the photo that you don’t need.

Now duplicate this photo layer and switch off its visibility as we’ll need it later.

Note: Actually in this step and further steps, you should probably use Layer Masks so that you preserve the photo. I have some really bad Photoshop habits and one of them is not using masks. I’ll try to remember in future and write best practices next time )

Step 10

Next we set the photo layer to 50% Opacity so that we can see what’s behind it. Then with a soft eraser brush selected, gently erase out the parts of the photo that cover the grass stalks.

Step 11

With some stalks of grass it’s better to use the Pen Tool. Here for example I’ve drawn a path around the stalk which is pretty triangular and then right clicked and chosen Make Selection and the hit Delete once the selection was up.

Step 12

So once this is all done, the photo is starting to look like it’s part of the scene, but not quite. The lighting for the photo is pretty wrong still, so that’s what we’ll work on next.

Step 13

So first of all go back to the duplicate of the photo layer we made in step 9 and hold down Ctrl and click on that layer to select its pixels. Then create a new layer on top of the other photo and fill it with black. You can delete the duplicate photo now as we don’t need it any more. Next we hold down Ctrl again and select the black layer to select its pixels and then go to Select > Modify > Contract and use a value of 5px.
Then hit Delete to leave a 5px border. Set the Opacity of this layer to about 20%. This will be a sort of shadow at the edges of the TV screen to give the impression that it’s slightly curved.

Step 14

Now hold down Ctrl and click on the main photo layer to select its pixels. Then press Ctrl+Shift+I to invert the selection and go to the new shadow layer and hit Delete. This just stops the shadow from going over the top of the grass stalks.

Step 15

Next with a fat Eraser brush selected, go to the photo layer and erase a little of the top left and right corners. We do this because we want those two highlight layers to continue on over the photo (which we’ll complete in a couple of steps).

Step 16

Next in a new layer on top, I added a white to transparent radial gradient towards the top right corner. I then faded this out to about 20%.
I also added with a soft brush a little white down the bottom, though it’s hard to see. If you open the sample PSD at the end of the tutorial you’ll see what I mean.
The main thing we are trying to do here is give the impression that you are looking at curved glass, which is a little reflective.

Step 17

Next we switch off the photo layers so we can see the original photo at the back and using the Pen Tool trace out the two highlights in the top left and top right. Once you have a path around each, right-click the path and choose Make Selection. Then in a new layer at the top, fill the selection with white. Do this for both highlights.

Step 18

Now we can switch the photo back on and the highlights will still be over the top. You might want to fade them out a little and erase away any areas where a grass stalk is meant to be poking through (as we did earlier for the photo itself). The final image is shown below.

Step 19

As I mentioned earlier, this was in fact for a cover of a newsletter/magazine I did a year or so ago. You can see roughly what the final thing looked like in the picture below.
The main point of this tutorial is partly to show you some basic ways to merge a photo with another and extend a photo, but more importantly to show how you should not be limited by the things your client gives you. It’s so tempting as a graphic designer to bemoan the quality of photos or a logo or other design constraints, but with a little creativity you can often do a lot with very little and still achieve a professional effect.

Download PSD

Note that becuase the photo is not freely available I’ve merged it with a watermark layer.

Photoshop Grungy Scene with Colorful Lights

2010-12-04T18:13:00.000-08:00

In this Photoshop design tutorial, we are going to be creating a striking, dark-themed piece with colorful highlights using stock photos, textures, and Photoshop brushes. The scene is built around a raven and a clock that represents fate and waiting for your time to come. With this tutorial, however, we will be depicting this theme in a fresh and edgy way that will surely give you some new things to try in Photoshop!

Final Preview of This Tutorial

Tutorial Resources

Texture: Parched ii by Struck Dumb (deviantART)
Texture: Grunge v by Struck Dumb (deviantART)
Stock Image: Raven by Philip MacKenzie (stock.xchng)
Stock Image: Oma’s Old Clock by Jean Scheijen (stock.xchng)
Brushes: Cloud Brushes by Javier Larios (QBrushes)

Step 1: Adding the Background Texture

Start up Photoshop and then create a new document that is 8.5" wide x 11" tall.
We want to bring in some texture to begin to build up our background. Download and open up the Parched ii texture in Photoshop. Place the texture into our main document.
Press Cmd/Ctrl + T to initiate the Free Transform command. Hold Shift (so that our rotation is done in 45-degree increments), then rotate the texture 90 degrees so that it is oriented vertically, fitting nicely in our canvas.

I really love incorporating textures into my artwork, combining different images and playing with blending modes to add a nice bit of complexity. I would encourage you to try combining different textures to create some interesting visual effects. Find free textures in the Design Instruct Freebies section.

Step 2: Desaturate the Background Texture

Next, with the texture layer selected in the Layers Panel, press Cmd/Ctrl + Alt/Option + U to bring up the Hue/Saturation image adjustment dialog window. Move the Saturation slider all the way to the left to completely desaturate the image.

Step 3: Add Another Background Texture

We are going to repeat the previous steps with the other grunge texture. To start, download and open the Grunge v texture. Place the texture into the document and then rotate and size it using Free Transform (Cmd/Ctrl + T). Afterwards, desaturate it by pressing Cmd/Ctrl + Alt/Option + U to bring up the Hue/Saturation image adjustment dialog window and moving the Saturation slider (middle slider) all the way to the left.

Step 4: Blending the Textures Together

You should now only be seeing the top texture that we have just placed into our composition. From here, we want to blend both the textures. To blend them, we are going to change the top texture layer’s Blend Mode to Multiply and reduce the layer Opacity to 75%.

Now create a new layer on top of all the other layers. Then choose the Gradient Tool (G) from the Tools Panel. In the Options Bar, pick the Radial Gradient option and set up the gradient so that it fades from solid black (#000000) to transparent. In addition, choose the Reverse option.

Click-and-hold in the center of the canvas and drag your mouse outwards to create a radial gradient in the new layer that will fade out to black. You may need to use Free Transform (Cmd/Ctrl + T) while holding Shift to drag one of the corners outwards in order to enlarge the gradient (holding Shift constrains the proportions). Also, you might need to move the radial gradient slightly upwards so that more of the gradient is showing on the bottom of the composition, and less on the top.
Create a new layer below the radial gradient layer. Fill the new layer with a light tan color (#9a8662) using the Paint Bucket Tool (G). Afterwards, change the Blend Mode of the layer to Color.

Step 5: Adding a Focal Point

So far, we have been working on building up a background with textures and it’s looking pretty good. What we want to do now is add a focal point to the center of the scene where we will be placing most of our design elements. Before we bring in those elements, we will lighten up the center of the image a bit to make the fade to black even more gradual. This, in effect, gives greater emphasis and prominence on the center of the composition where our major elements will be.
On a new layer just above the light tan color layer from the previous step, use the Gradient Tool (G) set to a solid white color (#FFFFFF) to transparent gradient. Make sure that you still have Radial Gradient selected and that it fades from solid to transparent, just like before. This time, however, uncheck the Reverse option so that the color of the gradient will originate from the middle, rather than the outside. Click and drag the mouse outwards from the center of your canvas to create the radial gradient on the new layer.
By default, the color will just be solid white; this is OK, but we are going to change the Blend Mode of this layer to Soft Light so that we get a more subtle result. Below you can see the difference between the Normal blend mode (left) and the Soft Light blend mode (right) that we have the layer set to.

Step 6: Adding the Raven

We can now begin to add some of the key elements that we will be using for this piece. For starters, let’s download and open up the Raven stock image in Photoshop. We need to isolate the raven from the background, and to do that, you can trace around it with the Pen Tool (P). If you have the benefit of using a tablet or are just good with the mouse then you can use a Quick Mask (Q) to mask out the background.
Once you have isolated the raven and removed the background, drag the image over into the main document. After bringing in the raven, you may need to do a bit of additional cleaning up in case there is any part of the green background left over; just use the Eraser Tool (E) to tidy it up as needed.

Step 7: Improving the Raven’s Tone with the Burn Tool

Select the Raven layer in the Layers Panel and then press Cmd/Ctrl + J to make a duplicate layer. Hide the visibility of the original layer and then make the duplicate layer the active layer.
Choose the Burn Tool (O) from the Tools Panel. In the Options Bar, have the Exposure set low at around 20-30% and also pick a soft, round brush. The idea is to darken up the edges and also to enhance the darker areas of the feathers and claws. Use the following image as a reference.

Step 8: Create Rays of Light

Next, create a new layer at the very top of the Layers Panel. With the Rectangular Marquee Tool (M), create a tall and fairly wide rectangle selection. Fill the selection with solid white using the Paint Bucket Tool (G).
Duplicate this rectangle (Cmd/Ctrl + J) and move it to the right of the first one. Press Cmd/Ctrl + T to switch to Free Transform. Grab one of the handles on the side and drag it to the opposite side in order to make this rectangle narrower than the first. Repeat this process once more so that you have three tall rectangles, side by side, each one slightly narrower than the one to the left.

Select all three layers in the Layers Panel. Press Cmd/Ctrl + E to merge these three rectangle layers together into one layer. Then change the Blend Mode of the merged layer to Overlay.

Switch back to Free Transform (Cmd/Ctrl + T). Hold down Shift + Alt/Option, click-and-hold on the top-middle handle, and then drag it upwards. This will extend the rectangles vertically on both the top and bottom at the same time so that it stretches outside the boundaries of our canvas.

With the rectangles layer still selected, go to Filter > Blur > Gaussian Blur and apply the filter with Radius at about 56px.
Lastly, use Free Transform (Cmd/Ctrl + T) while holding Shift to rotate the rectangles clockwise so that they are diagonally oriented. As you can see, it now looks like rays of sunlight shining through a window. Easy technique, great results.

Step 9: Adding the Clock

Next, we need to bring in the Oma’s Old Clock stock image. Go ahead and download and open it in Photoshop. You will see that the clock is on a solid white background that will make it very easy for us to isolate.
Double-click on the Background layer of the stock image — this will open up the New Layer dialog window, just hit Enter or press OK to unlock this layer.
With the Magic Wand Tool (W), simply click on any part of the white background and then press Delete to remove it.
Place this image into our main document. Locate the clock at the center of the composition, and make sure that it is on top of all of the other layers.

Step 10: Adding a Subtle Hue to the Textured Background

I want to inject a subtle hue into our nicely textured background before moving on. I think that this will help blend the background with some of the effects that I would like to add in the upcoming steps.
To begin, grab the Paint Bucket Tool (G), select a vibrant red color (#ff0000) for your Foreground color, create a new layer below the two background radial gradient layers and just above the layer with the light tan color, then fill it with the red color.
Afterwards, change the Blend Mode of this layer to Soft Light and lower the Opacity to about 35%.

By adding this extra bit of color to our image, not only will it help blend some of the elements together, but it also adds a bit of warmth and almost a slightly dangerous feeling to the image.

Step 11: Tweaking the Effect of the Light Rays

I want to reduce the strength of the overlay on the raven that is being caused by the rays of light layer. I like the way it looks on the background, so I only want to reduce it on the raven. To do this, I am thinking that the best way would be to use a masking technique that I find very useful and that I find myself using quite often in my workflow.
Start by holding down Cmd/Ctrl and then click on the Raven layer’s thumbnail to load a selection around the raven.

Keep the selection active, but switch to the rays of light layer that is just above the Raven layer. Now that you are on the rays of light layer, press Cmd/Ctrl + J to copy the selected area into a new layer. For the moment, doing this will just intensify the effect, but we are going to fix that soon.

Again, hold down Cmd/Ctrl and click on the Raven layer’s thumbnail to load a selection around it. Select the next layer above the raven (which should be the original rays of light layer) and then press Delete to remove the area inside our selection. The image will now look like it did before we began this step, but now we have complete and separate control over the effect on the background and the effect on the raven.
On the layer just above the rays of light layer is the duplicate selection we have made, so we want to reduce the Opacity of this layer to about 50% and you should end up with something like this:

Step 12: Introducing Spots of Color

Create a new layer on top of all the layers. Then choose the Gradient Tool (G) from the Tools Panel. Set up the tool so that it will create a Radial Gradient that fades from a vibrant orange (#F6520A) to transparent. Create a medium-sized radial gradient by dragging from the center of the canvas, going outwards. Once you have done that, change the Blend Mode to Screen.

Press Cmd/Ctrl + J to duplicate the layer with the medium-sized radial gradient and feel free to play around with the positioning of these two gradient layers until you are happy with the results.

Next, we are going to create another radial gradient in a new layer, but this time using a vibrant blue color because it is the complementary color of orange. I am using the color #0AC7F6. Set the Blend Mode to Screen as well.

You may notice from the image above that I have actually made a third copy of the orange radial gradient and scaled it up so that it balances out the color of the overall image. We have now added some vibrant colors that really give a fresh feel to the piece. I wanted to steer clear of doing something that feels completely dark and morose, but instead putting my own spin on the "grungy" genre. Feel free to try this step with different colors as you may end up with some very interesting results!

Step 13: Adding Clouds Using Brushes

Create a new layer at the top of the Layers Panel. For this new layer, we will need the free Cloud Brushes library; download and load up the brush library in Photoshop. Set your Foreground color to white, switch to the Brush Tool (B), pick several cloud brushes, and then paint a few clouds on this layer, experimenting with the placement.
Create a few additional layers where you can add more clouds; place some of them in front of the clock and a few behind it to add some depth and visual interest.

Step 14: Final Adjustments

To finish off the piece, I want to make a few last adjustments to the composition. One of these changes is to add just a bit of additional contrast to the overall image to help the colors pop a little more.
To enhance the contrast, I am going to click on the Create new fill or adjustment layer icon at the bottom of the Layers Panel, and then choose Levels to add a Levels adjustment layer on top of all the other layers. Thus, this adjustment layer will affect all of the layers underneath it. When you add an adjustment layer, the Adjustment Panel will appear, showing the options for the current adjustment layer (in this case, Levels). Move the middle slider (which is the slider that sets the gray point) to the right so that it’s set to around 0.84. Afterwards, lower the adjustment layer’s Opacity to around 72%.

Next, double-click on the Raven layer to access the Layer Style dialog window. Add a Drop Shadow layer effect using the following settings:

Lastly, I’m just going to add a bit of text to the background and my name and title underneath using the Horizontal Type Tool (T) — this step is optional, of course.

Tutorial Summary

We covered many techniques in producing this grungy, mysterious, but also colorful piece. We made a nice textured background using stock textures and Hue/Saturation image adjustments. We created rays of sunlight using a simple technique of drawing rectangles with the Rectangular Marquee Tool, tweaking the blending mode of the layer and applying the Gaussian Blur filter. We enhanced the raven’s highlights using the Burn Tool. We finalized our composition with a Levels adjustment layer to give it the perfect overall color contrast. I hope you enjoyed this tutorial!

Hand Drawn Design Using Photoshop

2010-12-03T19:13:00.000-08:00

In case you haven’t noticed yet, the hand drawn style is one of the hottest design trends. There are several ways to create hand drawn images — you can create it from scratch in Photoshop or you can scan an actual hand drawn sketch. Personally, I like to use a scanned drawing because you get a realistic drawing texture. Here is a quick tutorial to show you how to create a hand drawn design in Photoshop using the blending mode and alpha channel.

Final Image

1 Create From Scratch in Photoshop

If you have a tablet, you can simply draw the sketch by using the brush tool.

Don’t Have a Tablet?

If you don’t have a tablet, you can create the artwork in Adobe Illustrator and then imitate a hand drawing effect in Photoshop.
First draw a vector illustration. Then import it in Photoshop. Use a grungy brush and gently erase select parts of the image. Use the Blur tool to create the smug effect.

2 Scan It

The easiest way — scan the drawing and set the layer blending mode to Multiply.

Invert Color

If you want to have a white color stroke instead of black — go to menu Image > Adjustments > Invert (or press shortcut Cmd+i) and then select Screen blending mode.

Step It Up: Create Color Gradients

What if you want more than just a black or white stroke (ie. colors gradients)? Then you will have to extract the drawing from the white background. A simple way to do this is by using alpha channel.

Copy (Cmd+C) the drawing.
In the Channels palette, create a new channel. Then paste the drawing in the new channel.
Invert (Cmd+i) the channel layer.

Go back to the Layers palette, create a new layer. Go to menu Select > Load Selection. In the Load Selection prompt box, select Channel: "Alpha 1" (which is the name of the alpha channel I created earlier).

Shortcut Tip: the shortcut for loading a channel selection is Cmd + Opt + any number key (ie. 1, 2, 3). Learn more Photoshop shortcuts.

Fill Selection

With the channel selection loaded, you can fill it with any color.

Using It In The Design

For the purpose of this tutorial, I’m going to show you how to incorporate your hand drawing on a female model (the photo was purchased from iStock).

1. First, cut out the model.

2. Fill the background with some sort of light glowing gradients.

3. Paste the drawing on top of the model. Lock the layer transparency. Play around with the color gradients.

4. Duplicate the drawing in the background to add more details to the image.