stylish banner for your website

Now I will show you how to create a stylish and effective banner which you may use on your website.
First of all we need to create a new document with the size of canvas 500×300 pixels and fill it with color of #2d164d.
Then use the Rounded Rectangle Tool and draw the form bellow with any color.
Then we use following layer styles for this layer: Gradient Overlay and Stroke:
And we get this:
Then create a new layer over and merge it with the previous one to get all effects in one layer. Now we apply the Drop Shadow layer style to received layer:
Get the effect which you may see at the picture bellow:
Let’s add some volume to our banner. In order to do this we use the Dodge Tool (130 px, Range: Midtones, Exposure: 25%.) and make darkening on left and right side.
After that we load selection with Select > Load Selection, then create a new layer and use the Gradient Tool to fill selected part of the layer with the gradient from white to transparent at the top and the bottom of layer.
Then remove selection with Ctrl+D and then change layer mode to Overlay.
And the last step for design of entire banner. We need to add some glare. In order for this we create a selection across the banner’s form (Ctrl+left click the first button Layer Thumbnail in the Layers Palette). The use the Elliptical Marque Tool, hold down Alt and cut the piece of the selected area. You have to get the same result as on picture bellow.
After that we use the Gradient Tool and fill the gradient from white to transparent on the new layer.
Remove the selection by using Ctrl+D and change the layer mode to Overlay. Then apply Drop Shadow layer style for current layer:
Get this one effect:
Now we may add some information to our banner. In the beginning we may bring the tracery to our banner. For these purposes we may use these brushes. Load selection of banner again (Ctrl+left click the first button Layer Thumbnail in the Layers Palette), create a new one layer and put the print of brush into the selected area.
Remove this selection with Ctrl+D and change the layer mode to Overlay, then set up opacity to 30%.
Now we adjust the sharpness by using Sharpen Tool (Brush: 200px, Mode: Normal, Strength:50%).
Now, I would like to add a picture. Let’s use Google Pictures or sites of stock clip-arts. I found this one. Open image, separate it from background by using Polygonal Lasso Tool and copy it to our main canvas, make it a little bit smaller and rotate by using Ctrl+T.
After that we’re going to highlight the flower. For this effect apply the Outer Glow layer style for current layer:
Get this effect now:
Let’s create a new layer and merge it with the previous one to get all effects in one layer. Now select the banner’s form (Ctrl+left click the first button Layer Thumbnail in the Layers Palette). After that invert the selection using keys Ctrl+Shift+I and press Delete to delete everything abroad the banner.
Now, remove selection with Ctrl+D. It’s time to add the text information. Use the Horizontal Type Tool and type the string ‘New Spa Saloon’ with white color.
Font we’ve used above is Avant Garde Gothic – commercial font. In this way you may use any other font if you don’t have this one. Now apply to this text layer Drop Shadow layer style:
Now we get something like this one:
After that, type one more string like ‘Click here to enter’ underneath with the color of #80bb00 using the same style of layer.
And the last thing what we need to do is add the name. Type the word ‘AQUA’ using white color.
Apply the following Blending Options for this text layer: Drop Shadow and Outer Glow:
We should get the result of applying layer styles at the picture bellow.
At this point our lesson is finished. I hope it was useful and interesting for you, do not feel shy to make experiments and you shall get great results. Good luck!

How to Create an Anime Artwork in Photoshop

Learn step by step how this painting was created. You will get a good understanding of how to create anime images with beautiful lighting and learn techniques that will help you in many types of drawings.

Preview of Final Results

How to Create an Anime Artwork in Photoshop

Step 1 – The Outline

Most people draw the outline on paper then use a scanner to load the outline into Photoshop. Begin by opening the outline image into Photoshop.

1. Use the Levels tool (Image > Adjustments > Levels) to correct the contrast of the outline. You can do this with the Levels tool by moving the black and white input sliders towards the center of the histogram. Make sure that the background is 100% white and the outline is 100% black with smooth edges.
2. To begin, you’ll need to unlock the Background layer. To do this, double-click on the Background layer in the Layers palette and click OK in the New Layer window.
3. Now that the layer is unlocked, you can change the blending mode to Multiply. This will make the white background in the layer transparent.

Tip: Ensure that there are no broken lines. You will be using the Magic Wand tool often and broken lines will slow you down.

Step 2 – Separating the Outline

In this step, you’ll learn how to separate the outline and the background into two layers. This will also make the outline slightly thinner. You’ll also learn how to dissect the outline without any jagged edges using the Load Selection from Layer command.

In the above image, you can see the difference between using the Magic Wand tool and the Load Selection from Layer command. The Magic Wand tool produces jagged edges that become apparent when placed on a colored background. Instead of using the Magic Wand tool, use the Load Selection from Layer command to produce smoother outlines that blend well with any background.

1. In the Channels palette (Window > Channels), click on the button. This will create a selection using the tonal information from the layer. Press the Delete button on your keyboard to delete the white background.
2. Add a new layer below the outline layer and fill the layer with white.
3. Change the blending mode of the layer to Multiply.
   

Step 3 – Base Color

Now that we have the outline and white background separated, we can add the base color.

1. Add a new layer below the white layer.
2. Select the Magic Wand tool and, in the option bar, set the Tolerance to 50.
3. In the option bar, checkmark the Contiguous and Sample All Layers options.
4. With the Magic Wand tool selected, click where you want to add color.
5. Expand the selection by 3 pixels using the Expand command (Select > Modify > Expand). If you are using Windows, you can press Alt, S, M, E on your keyboard to quickly access this menu item.
6. Use the Paint Bucket tool to fill the selection with a color of your choice. Use the same technique (Create a selection with the Magic Wand tool then fill with the Paint Bucket tool) for the entire image.

Step 4 – Adding Shadows

In this part, you’ll learn how to add shadows to the image. One important technique from this step is how to select the correct color.

1. Create a new layer and position it between the white layer and the base color layer.
2. Select the Magic Wand tool and set the tolerance to 1 (so that it will only pick one color) and uncheck the Contiguous and Sample All Layers options.
3. Select the Brush tool and set the hardness to 100%. This will give the brush a sharp edge.
4. In the Tools palette, click on the foreground color. This will bring up the Color Picker window. Select the base color from where you want to start. This will give us the hue of the color. Move the slightly off the area to change the saturation and brightness of the color.
5. Paint the shadows. Be sure to pay attention to where the light is coming from to get proper looking shadows.

Step 5 – Dodge and Burn

The Dodge and Burn tool will be used to give a gradient tone effect to the solid colors.

1. Duplicate the layers with the base color and shadow then position them above the original base color and shadow layers. The new layers will be used for dodging and burning while the old layers will be used to load selection with the Magic Wand tool. Select the layer with the base color and use the Magic Wand tool to create a selection of an area that you want to edit. In the image above, we created a selection of the hair.
2. When using the Dodge or Burn tool, turn on the “Other Dynamics” option in the Brushes palette (Window > Brushes).
3. Also, in the Dodge or Burn tool options, set the range option to Midtones.
4. When using the Dodge or Burn tool, set the hardness to 0%.
5. Select the top shadow layer (shade 2 in the screenshot). You will be using the Dodge and Burn tool to create a gradient in the shadows. Start with the Burn tool to darken the areas in a smooth motion on the lower part of the shadow.
6. On the same layer, select the Dodge tool and lighten the upper part of the shadow.
7. Select the duplicated layer with the base color. Use the Dodge tool to lighten the upper area of the base color.
8. Use the Burn tool to burn the lower area of the base color.

Step 6 – Adding Reflected Light

In this step, you’ll learn how to add light reflected from the ambient light.

1. Use the same setting as previously used for the Magic Wand tool.
2. Turn on the “Other Dynamics” setting in the Brush palette (Window > Brushes).
3. Set the Brush hardness to 0%.
4. For this image, a dark purple color was used to shade the area with no reflected light. The light source is from the left of the image so the right side of the characters were painted with dark purple.
5. A light yellow color was used to shade the areas facing the ambient light.

Step 7 – Coloring the Outline

Coloring the outline will add more detail to the final image and it’s easy to do.

1. Leave the brush presets on.
2. In the Layers palette, select the layer with the outline then lock the transparent pixels by clicking on the button.
3. Use the Brush tool to color the outline using a color that is close to the outline.
4. Keep using the Eye Dropper tool to select the color beside the outline.

Step 8 – Creating the Smokes

Now you’ll learn how the smoke swirling around the characters were created.

1. Create a new layer for the clouds. Use the Brush tool with a hardness of 100% and paint some zigzag shapes for the smoke.
2. Use the Smudge tool to smudge it in the motion shown above.
3. Use the Dodge and Burn tools to create volume on the smoke so that it looks 3D.
4. Load the selection (Select > Load Selection) of your smoke layer. Choose Select > Modify > Contract and enter an amount that will make the selection half its size. You may have to undo and try this several times to get the correct amount.
5. Create a new layer for the smoke highlights. Use the Brush tool and paint inside the smoke with yellow orange.
6. Select the Move tool and nudge the layer up by pressing the up arrow on your keyboard.

Step 9 – Creating the Cloudy Sky

Creating the cloudy sky uses a similar process as the previous step.

1. Create a new layer for the sky and name the layer “sky”. Use the Gradient Tool to create a gradient like the image above (#1).
2. Create a new layer above the sky layer and name this “clouds”. Use the Brush tool and paint some lines to create the shape of the cloud.
3. Use the Smudge tool to smudge the cloud layer in the motion shown (#3).
4. Load the selection of the clouds layer (Select > Load Selection). Choose Select > Modify > Contract and contract the selection like you did when you were creating the smoke. The selection should be close to half of what it was. You may have to try this more than once to get the right value.
5. Create a new layer and mane this layer “clouds 2”. Position it above the clouds layer. Select a color that it slightly darker than the color you used to create the clouds. It should still have the same hue and saturation. Paint the selected area with this color.
6. Use the Dodge and Burn tools to add volume to the clouds so that they look 3D.
7. Duplicate the clouds layer then use the Free Transform tool (Edit > Free Transform) and enlarge the cloud. Set the opacity of this new layer to 75%.
8. Use the Dodge and Burn tools on the sky layer to create a light source.

Step 10 – Adding Light

1. Create a new layer and name this layer “light”. Move the layer to the very top so that it is above all the other layers.
2. Select the Brush tool. In the Brushes palette (Window > Brushes), checkmark the Other Dynamics option.
3. Set the brush hardness to 0% for soft edges.
4. Select white as the foreground color then paint the areas where you want the light to appear. The image above shows the areas that were painted.

Step 11 – Tinting With a Gradient

This step will show you how to create more realistic colors by warming the areas closest to the light source and cooling the areas away from it.

1. Create a new layer and position it above all the other layers.
2. Load the selection of the characters then use the Gradient tool to create a orange to blue gradient. Because the light source of the drawing used for this tutorial is from the left side, I will draw a gradient from the left to right. This will make the left side warmer and the right side cooler.
3. Change the blending mode of the current layer to Color.
4. Lower the opacity to about 10-20%.

Final Results

The image above was created by Adimas Soekidin. You can view more of his work at his deviantART gallery.

Exposure Blur

Create animated light streaks using special Photoshop techniques.

Finding the Light Sources

In this section, we'll use the Levels tool to identify the light sources that will be used to create the light streaks.

Step 1

Open an image to edit. Use the Image Size tool to resize the image to the final output size you would like. This Photoshop effect will use a lot of your computers resource so we recommend starting off with a small image, around 300 pixels wide or tall.

Step 2

Duplicate the layer (Layer> Duplicate Layer or Ctrl+J).

Step 3

With the top layer selected, open the Levels tool (Image> Adjustments> Levels or Ctrl+L) and move the middle input slider all the way to the very right. Click OK when done.

Step 4

The light streaks will be created from the light areas in this layer. Use the Brush tool (B) and paint over the areas that you do not want any streaks to be generated from. If there are any light sources that's clipped off by the edge of the image, erase those light sources. If they're not removed, the final result will show light streaks with clipped edges.

Step 5

Change the blending mode to Screen.

Creating the Light Streaks

Now that we have the light sources identify, we can use it to create the light streaks. The streaks will be created by duplicating the layer and moving it one pixel at a time. This might send shivers down your spine; don't worry, it'll be easy and fun. Really!

Step 6

Before we start, we need determine the opacity of the light streaks. Light streaks with a lower opacity setting will be more transparent and is ideal if you'll be creating very long light streaks. If you'll be creating small light streaks, you can use a higher opacity. Instead of guessing, we'll give it a test. Change the opacity of the top layer to 15% and while holding the Alt key, press the right arrow key about 20 times until a streak of light is created. Using the reference below, adjust the opacity to what you think will work best with your image.

Step 7

Delete all the layers that were created so that you have 2 layers remaining. With Photoshop CS2, you can do this easily by selecting the layers the same way you select multiple files (Using the Ctrl or Shift key) and pressing the delete key.

Step 8

You've probably already figured out how to create the light streaks by now. But before I let you experiment, i need you to download a set of Photoshop actions that will let you zoom in/out and rotate left/right. Download and save the controls action to your computer then load it into Photoshop:

Loading the Action

1. Open the Actions pallet (Window> Actions).
2. Click on the flyout menu located on the top right of the Actions pallet and select "Load Actions".
3. Locate and select the action file then click Load.
4. The Controls action set should now be visible in your Actions pallet. There should be F keys assigned for each action. If you don't see any F keys assigned, it probably means that you have those keys reserved for other actions. To assign a different key to run the action, select the action, click on the flyout menu, select Action Options and change the Function Key.

   

   The function key is shown beside the action name.

Step 9

Use the images below as a reference to controlling the light streaks.

Tip: This is a CPU & RAM intensive process so we recommend closing any unnecessary programs before proceeding.

Use these commands to control the direction of the light streaks.

Use these commands to control the zoom and rotation of the light streaks.

This is an animated sequence of the light streaks I created.

Animating the Light Streaks: Creating the Frames

To create the animation, we need to create the individual frames as layers.

Step 10

First, we need to determine the amount of frames we want in the animation. More frames will create a smoother and longer animation but will also take longer to complete and create a larger file size. For this tutorial, I will be creating an animation with around 10 frames. Because my animation will only have 10 frames, I can merge the 115 layers into 10 layers.

Step 11

With some simple math, we'll find out how many layers we need to convert to one. To do this, take the number of layers the light streaks was created with and divide it by the number of frames. For myself, this will be around 12 layers (115 layers ÷ 10 frames). Now select the top layer and press Ctrl+E to merge down with the answer to the mathematical equation as the number of times. For myself, I will press Ctrl+E twelve times to convert twelve layers into one. Select the layer below and do the same thing until all the layers have been merged

Step 12

Hide all the layers except for the bottom two layers.

Step 13

Select the second layer and press Shift+Ctrl+Alt+E to create a new layer from the visible image. Select/activate the layer above, click on the eye to make it visible, and press Shift+Ctrl+Alt+E. Repeat this for the rest of the layers above.

Step 14

Delete all the old layers except for Background.

Animating the Light Streaks: Animating with ImageReady

Now that we have the frames created, we're ready to switch to ImageReady to start the animating process.

Step 15

Send the document to ImageReay (File> Edit in ImageReady or Shift+Ctrl+M).

You may also press the Photoshop to ImageReady button in the toolbox.

Step 16

Open the Animation pallet (Window> Animation). Click the flyout menu on the top right corner and select "Make Frames From Layers". Your animation pallet should now contain frames created from the layers.

Step 17

Save the image. To save the image as an animated GIF file, change the Format in the Optimize pallet (Window> Optimize) to GIF and adjust the settings. Because the animation I created will be used on the web, I used the following properties:
Format: GIF
Colors: 64
Dither Method: None
Use the "Save Optimize As" tool (File> Save Optimized As) to save the image.

Final Results

There are countless effects that can be created with this technique. Experiment with different combination to discover new exposure blur animations.

A simple camera flash effect was added to the end of the animation.

This effect was achieved by simply using the ALT and arrow keys.

This effect was achieved by alternating between the Rotate Right and Zoom In actions.

This effect was achieved by creating a right light streak and duplicating the layer about 20 times at the end.

Decorating Text

Creating text and then decorating it is often a daunting task, not knowing what colors to use and how to achieve effective results with the resources you have is often hard to overcome. Keeping your text simple but still having it stand out is an art in itself. Here we learn lots of techniques on decorating text like using textures, brushes and patterns. Pick and mix which techniques you use or just try all of them and end up with an image like this.

Preview of Final Results

Decorating Text Photoshop Tutorial

Step 1

Before we start on the actual image, we first need to create a simple pattern which we will use later. Create a new document with dimensions 20x20px then go edit>preferences>grid... and use these settings. Create a new layer (Shift+Ctrl+N), hide the background layer then set the foreground color to #808080. Now recreate the image shown here using whatever method you feel comfortable with, the polygonal lasso tool is a good choice for what we want to achieve. Now save the pattern by going edit>define pattern, after saving, close this document. When making patterns like this one it is important to make sure that they will repeat when tiled, there are various methods of achieving this like the offset filter, however with a pattern this simple it easy enough just to visualize it.

Step 2

Create a new document, this time with dimensions of 1024x768px then select the gradient tool (G) and open the gradient editor. Click the arrow in the presets box and choose pastels, select the first gradient in this set. Using a linear gradient drag from the bottom of the page to the top, holding Shift to keep it vertical. Lastly change the opacity of this layer to 75%. A gradient is always a strong way to begin a piece like this but does require a texture over it.

Step 3

Here we will create our background texture, first find a simple image of clouds, the one I used can be found here. Copy and paste this image then resize it to fit the page. Next invert the colors (Ctrl+I) and set the blending mode to screen. Now add a bit more depth to the background by doing exactly the same with another image of clouds like this one. When adding a texture to any piece on Photoshop, always experiment with all the blending modes as some will look better than others depending on the texture you use.

Step 4

Before you start on the foreground, a good idea is to set up some swatches that you will use regularly throughout this piece. Double click on the foreground color and create a swatch of these three colors; #b5005e, #39d336, #00baff.

Step 5

Okay now for the text, start by creating a new layer group named 'foreground', it will become clear why we did this later on. Select the text tool (T) and draw a text box that goes from the left of the page to the right. Type your text in then highlight it all and go window>character to bring up the character settings. Use all the same settings as shown here. The reason for the wide character spacing is to allow enough space for the borders we will add.

Step 6

Right click on the text layer and select blending options and add a drop shadow, outer glow, bevel and emboss, color overlay, pattern overlay and a stroke. Use the settings shown below. You will notice that, although we used the drop shadow and the outer glow, we just mimicked the effect produced by a stroke. The blending options can be very powerful when used in this way so take words like drop shadow as a guideline rather than an instruction.

Step 7

The next few steps will show how to add some goo and drips to the text. Set the foreground color to the purple swatch then create a new layer group named goo directly below the text, still within the foreground group. Create a new layer within this group (Shift+Ctrl+N). Use the line shape tool (U) and create lines like the ones shown here, make some with the weight set at 2px and some with weight at 3px to add some variety.

Step 8

Create a new layer within the goo group. Select the brush tool (B) and use a round brush with a size of 3px and a hardness of 100%. Zoom in to about 400% and draw some droplets at the bottom of each line, also draw some beads of liquid on the line.

Step 9

Create another new layer within the goo group. Using the same brush, decorate the text a little more to achieve a result similar to below. This step can take a few tries to get right but is quite enjoyable at the same time.

Step 10

If you try Ctrl+clicking on the text layer you will notice that the selection will not include the border around the text, this will become a problem in the next few steps as you will see. The easiest way to overcome this is to first duplicate the text layer then drag it below the original text, now create a new layer directly below the new text layer then select the new text layer and merge it down (Ctrl+E) then name it 'selection'. Now if you Ctrl+click this layer you will notice the selection covers the border of the text and we also still have our original text which can be edited easily.

Step 11

Create a new layer group named lines, this time above the text layer although still in the foreground group. Create a new layer then select the pen tool and draw path, making sure to hold and drag after each point to ensure the path is smooth. Next right click on the path and select stroke path and don't check simulate pressure. The result should be similar to below. On these brushes, using simulate pressure will blend out both ends of the line which is not what we want here.

Step 12

Now select the eraser (E) and use a 100px diameter, 0% hardness and 30% opacity to fade out the end of the line. Also use the blur tool (R) with a similar brush to blur some parts of the line.

Step 13

Now we will use that layer we created back in step 10 to remove parts of this line accurately. The concept behind this method is to use our selection layer to select all our text then create a new selection manually and intersect these selections, let’s see how it works. First Ctrl+click on the selection layer then select the polygonal lasso tool (L) and in the main toolbar change it to intersect mode. Choose a part of the line that you want behind the text then draw round that part of the text then select the layer with the line in it and hit Delete. So in the image here, I want the line to go behind the left part of the 'H', note that I didn’t draw accurately around the 'H' this is because only the parts included in both selections will become our final selection. Continue using this method for other parts of the line to give the impression it weaving in and out of the text.

Step 14

Try adding some more lines using the same method shown in the last three steps. Try also changing the brush size to either 2px or 1px or switching on simulate pressure.

In this example I used a 1px brush with simulate pressure on.

Here I used our green swatch, again with 1px and simulate pressure on.

For this effect I used a 2px brush with simulate pressure on and when creating the path, held Shift to get a straight line.

Step 15

A quick way to make some random dots is to first select the brush tool, using a 2px hard brush then hit F5 to open the brush editor. Use the same settings as shown here and use the blue swatch we created earlier. For this brush we can drag it, note how the dots will be random and will give different effects depending on how fast you move the cursor.

Step 16

For this step you will need to have a floral brush set, lots of these can be found here, download one and install it, note that you may need to restart Photoshop after installing it. Create a new group behind the text and in a new layer; use the purple swatch and go wild with these brushes, making them flow from the letters and the lines. My set included some leaves which I dotted around using the green swatch. Using the floral brushes was just an idea, other vector style brushes can give good results too, one which is worth trying is using tree brushes on the top half of the letters.

Step 17

Another nice detail that is simple to make is these blue lines. First create a new layer then select the blue swatch then the brush tool and use an 8px hard brush. Use the pen tool to create a large arc, mine went roughly from the 'H' to the 'O', now stroke the path and make sure simulate pressure is checked. Use the eraser tool to get rid of half of the line and to blend it slightly. I created three of these.

Step 18

Duplicate this layer, with all three lines in it then hit Ctrl+T and rotate the lines roughly 180° then move them to below the text as shown here.

Step 19

The text is looking nice now however the foreground and background are like to separate images at the moment so we will learn a few ways to make them harmonize better. A good way to approach this problem would be to create an in between layer which is kind of half and half and can bridge the gap between foreground and background. Start by creating a new group within the foreground group but below everything else in that group. Create a new layer in this group then go image>apply image then edit>transform>warp and drag only the boxes here to warp the image, make sure that when your warping the image it still covers the entire document or else you will be left with sharp edges.

Step 20

Now select this layer then go layer>layer mask>hide all, change the foreground color to white then use a few of the following brushes with medium opacity to unhide some of the content on this layer, make sure the layer mask is selected rather than the layer itself.

1. A grungy brush of any size, this can be a brush you have downloaded or one that comes with Photoshop like the spatter, charcoal or chalk brushes, these work well when used at a larges size and dotted rather than dragged.

2. A floral brush of medium to large size. This looks good on a slightly higher opacity brush as well as on low. Never drag these brushes, it just doesn't work.

3. A really good effect can be created when using the pattern stamp tool (s), although it requires a few tries to get it right. Try using the pattern we created earlier and also some of Photoshop's like the checkered one.

Optionally you can repeat these two steps again to add more detail as you are trying to get a fine balance between the foreground and background.

Step 21

You will notice with the image we have at the moment, the clouds are only in the background. Let's solve this problem; we have to choices here, we either add more in front of the foreground group or we can take something away from the foreground. I've found that the taking away method produces a more realistic result. However if you have some cloud brushes kicking about feel free to use them but in this image I didn’t. First let’s check where we are at in terms of layers; at the moment you should only have a foreground group, a background group and the white background layer, everything else should be contained within these. In the background group duplicate one of the cloud layers then drag it out of this group and to the very top of the layer stack. Change the blending mode to normal then go select>color range and pick the very darkest part of the image and use the settings shown below, OK. Now you should have a rough selection around the clouds, hide this layer then select the foreground group and in the layers panel click the layer mask button at the bottom.

Step 22

The last step is to add some color adjustments to the whole image. Start by creating a new layer above the foreground group then select the gradient tool and create a gradient like shown here. Use a radial gradient setting an create a blurry circle, go back to the gradient editor and change the color and do this again until you have something that resembles below. Lastly change the opacity of this layer to 50% and the blending mode to color. One last adjust that I save until last is to move that cloud layer that we duplicated to the top of the layer stack, unhide it then change the blend mode to soft light; I'll let you decide on the opacity this layer should be.

NOTE : ALL CREDITS FOR THE ORIGINAL TUTORIAL MAKER :)

Retro Text

Retro Text and Video Layers Retro text like this looks great but isn't easy to create in Photoshop alone so here we use a mix of Photoshop and Illustrator, raster and vector to create some unique text. The second part of this tutorial explains video layers, something which is relatively new to most people. The final result will be an animated image that could be used for a web header.

Preview of Final Results

Retro Text Photoshop Tutorial

This tutorial will kind of be split into two parts, the second part starting at step 19.The first part will cover the creation of the text and then editing this text in Photoshop. The first part will require Adobe Illustrator as well as Photoshop. The second part covers adding the animation in through Photoshop, this will mean you have to have Photoshop CS3 extended version as we will be using video layers. However there is ways round this if you can find a program to convert movie files into animated gifs. Firstly a good idea when starting any project is to think up a color scheme or to find one on the internet, I tend to use this site to find color schemes so for this project I searched for 'retro'. Part of the reason why I wrote this tutorial was because gomedia have released a couple of free sample motion packs which ought to be utilized and for people who don't know how to use them then this is what the tutorial covers. For this I will be using the Hooladanders pack which can be downloaded here.

Step 1

Start by opening Adobe Illustrator, there are two reasons why we want to use Illustrator here rather than Photoshop, firstly we can create vector files which gives us more flexibility when we export things to Photoshop and secondly there are a few nice things we can do in Illustrator which would take a while in Photoshop. Hit Ctrl+N to create a new document, I used a size of 800x600px but this doesn't matter as we are working with images that can be enlarged infinitely. Now hit Ctrl+' to show the grid. Now the default grid should have 8 subdivisions, if yours is different then go edit>preferences>guides & grid and change it. Next click on the view dropdown and make sure snap to grid is checked. Select the rectangle tool and draw a 2x2 rectangle, we will change the fill and stroke in the next step.

Step 2

With your rectangle still selected, go to the main toolbar and change the fill to one of the colors in your color scheme and set it to no stroke like in the image below. If you were wanting an outline round your text you would have to draw a line only at the left and right side of this rectangle for reasons that will become apparent later on.

Step 3

Create four more of these rectangles, each with a different fill and a 1 subdivision space between each.

Step 4

Hit V to use the selection tool then drag a box round all five rectangles then hit F5 to bring up the brushes panel. Inside this click the new brush button and select new art brush. Now change the settings to mimic the ones shown below. It should be fairly obvious why we changed it from a horizontal to a vertical direction.

Step 5

Next I worked out a rough typeface I was going to use, we are not using a real font here but rather, creating a path then stroking it with the brush we created. Below I've shown the path I would make if I wanted to make a P, an F and a C; the red lines being the first path and the green; the second path. From this you should be able to work out roughly how to create any letters. At the moment don't actually do this in Illustrator but maybe sketch out the kind of letters you want. I'll show more details on how I created the letters in RETRO. The main points here were to make most letters 1 major gridline in width and half a major gridline between the letters. Note that on the F, it extends 1 minor gridline below, this is to acount for the extra width from the brush on letters like the C. If this doesn't make too much sense at the moment; don't worry I'll go through a full example in the following steps.

Step 6

First I made a new layer, the plan was to have two layers as I needed two paths for some of the letters. This meant that I could export it to Photoshop as two layers also. We will create all of the first layer (red) then afterwards create the second (green). Hit P to select the pen tool, the pen tool in Illustrator works in the same way as in Photoshop. We don't want any bezier curves so click once at each point and don't drag the mouse. Draw this shape in your document; starting from the lower left point. We have to start at the right end or else the colors wont match up when we add layer 2.

Step 7

Hit V then click on the path and a bounding box should appear. In the main toolbar make sure we have no stroke or fill then just click on our brush in the brushes panel and it should look like the image below. If for example our brush was the wrong size we could click the small button to the left of new brush and change the size but since we set it at 20% already we should be fine.

Step 8

Now for quick bit of maths; go edit>preferences>guides & grid and take note of the 'gridline every:' number, now divide this number by 4, mine was at 72px so I got 18. This number is because we are going to round the corners and want the radius to be equal to two of the minor gridlines; the reason for this is obvious if you look at the examples of the letters I used but if you were to use different letters you could make it more or less rounded. Okay to round the corners, with the leter still selected, go effect>stylize (illustrator)>round corners and set it to the value you calculated.

Step 9

Do the same for the other letters, so all my paths looked like the image below. You can either do the letters one at a time or create all the paths then add the styles to all of them at the same time. The image below that shows the completed first layer of the letters.

Step 10

Now for the second layer, do exactly the same as for the first, In green is the paths I used for the second layer, I then added the same styling to achieve a result like the one below. Note that here you could always just copy the R to save creating it again. You should have three layers; one with the brush shape in it, another with the first layer of our text (red) which we'll call T1 and another with our second layer of text (green) which we'll call T2.

Step 11

Create a new document in Photoshop; since these are vectors you can make it any size but I used 900x300px as I envisioned it as a good idea for a website header. Now in Illustrator, hide T2 then drag a selection on over the text then copy and paste it into Photoshop as a smart object if possible, if not then paste it as pixels and ignore the next bit. Hit Ctrl+T then change the height and width to 150%. Now do exactly the same with T1, hiding the T1 in Illustrator, then alaign it with the other layer. Below I've only shown one letter but that's only because I'll be demonstrating the techniques on this letter first.

Step 12

Ctrl+click on T1 to make a selection around it. There is a few steps that aren't required for the text I used but you may need to do all steps If you are doing this to a different shape or size of text so I'll show you all the steps then you can work out the shortcuts if you want. Select the polygonal lasso tool then hold Shift to change it to add mode, this will add to the selection we already have. Now draw around the parts of T2 that you want to hide (purple line), one letter at a time. So here I've made this selection which will keep the same curve at the right part of the R by staying within this line then drawing round everything else. The resulting selection is shown below that.

Step 13

Next, with the either the polygonal lasso or the marquee, hold Alt+Shift to change it to intersect mode which will select only the parts included in both selections. Now draw round the part of T2 which you want removed, there's no need to be neat, just draw a box like the one shown in purple. This is so that when we remove it it will only apply to this one letter then we can go on and do the other letters after. Again I've shown the resulting selection below.

Step 14

Now go select>modify>expand and choose 3px as the value. Select the T2 layer and hold Alt and click on the add layer mask button in the layers panel, this will create a layer mask then fill the selection in black, if we were to just click on the layer mask button we would get everything except the selection filled black. Below is what your letter should now look like.

Step 15

Do this for any other letters that have two layers so for mine I had to do it to E.T, Note that after you've refined the selection you don't want want to make another mask so instead select the mask then hit D to reset the foreground and background colors then hit Alt+Backspace to fill the selection black. Alt+Backspace is a shortcut for filling something with the foreground color and is quicker than going edit>fill or Shift+F5.

Step 16

Now you can move certain parts of your text to get the spacing right. Lastly select T2 and hit Ctrl+E to merge it with T1 then right click and convert to a smart object. Below I've shown the finalized text.

Step 17

This next part shows how I created the background and is optional as I'm sure you can think of much more creative thing to use for a background. Well firstly I pasted in an Image of cardboard then desaturated it.

Step 18

Next I made a very dark radial gradient then set it to 75% multiply.

Step 19

Now go layer>video layer>new video layer from file and choose one of the videos you downloaded. Now go window>animation to bring up the animation panel. You will now have what looks like a histogram of the time, all except one of the layers should have an infinite time, the one that doesn't is your video layer and should be at the top. Move the time slider to the end of this layer, see the image below for reference. You will see that the animation will move, the reason we moved the slider to the end was because if you watch it you will see that the last 10 seconds include every part of the animation.

Step 20

Now hit Ctrl+T to enter free transform mode, a warning should pop up just press convert and it should change to a smart object. Next move, rotate and scle it then put it above part of your text, here I put it above the first R.

Step 21

Now we are going to mask it, I used similar techniques to what we used when masking the letters. Note that when you mask a video layer it does this in every frame. Ctrl+click on the text layer to make a selection then get the polygonal lasso tool out, hold Alt+Shift to go to intersect mode then draw roughly round the part you want to hide behind the letters like shown below; the purple line being the selection I made.

Step 22

Now mask the video layer in exactly the same way as in step 14 and 15. Do this for some other parts of the animation.

Step 23

Right click on the video layer then go blending options, that's right you can add layer styles to a video. Use the settings shown below. Make sure that 'Layer Mask Hides Effects' is checked as this will make the shadow more accurate because the shadow won't follow the layer mask at all. For the color overlay, just select the color that the animation merges into with the eyedropper, so here mine merged into the green line.

Step 24

Do exactly the same with the other two movie files and just copy and paste the layer styles by right clicking on the layers then change the color overlay. They should vaguely resemble the image below.

Step 25

Try now playing your animation by clicking the rewind button then the play button in the animation panel.

Step 26

There's a few things you can do with this file, you could save it as an animated gif, export it to flash or save it as a movie file. Here I saved it as a gif by going file>save for web & devices. Depending on what you want to do with the file you can choose your settings. I knew I was going to upload it to this site so wanted it quite low quality, I also found that by cranking the lossy value up you get a grainy effect and a smaller file, I liked this effect so kept the lossy at about 85% then set the colors to 64. Below I've included my final layers panel and also the unanimated image. You may notice that the colors are different here this is because I added a hue/saturation adjustment layer at the top of the layer stack.

NOTE : ALL CREDITS FOR THE ORIGINAL TUTORIAL MAKER :)

3D Textured Text Effect

In this tutorial, I will show you how you can make a stylized 3D textured text effect using various textures to give it a unique look with Illustrator & Photoshop. I will be giving you the step by step instructions along with the links to the resources & stuffs used.

Preview of Final Results

3D Textured Text Photoshop Tutorial

Step 1

Open up Illustrator, and with the Type Tool type a letter or text, I typed the letter “C” I used the font Adobe Caslon Pro, you can use any font that you like, just make sure that it is a bit thick font to yield better results. I set the font size to 400 pt & scaled it horizontally & vertically to 150% through the Character Palette, though don't worry about the font size too much because we'll be pasting it as Smart Objects in Photoshop so we can adjust the size at any given time. The color I used for the letter is #8CC63F.

Step 2

Now go to Effect>3D>Extrude & Bevel, make sure that Preview is on. Use the settings shown below, apart from specifying rotations for x, y & z axis, I chose Tall-Round from the Bevel drop down list. The settings will more or less depend on the font, so if you have used a different font play a bit, though I will advise to stay away from the fancier Bevel settings, mostly None setting works best. You can also make it more thick by increasing the Extrude Depth.

Step 3

After you’re happy with your 3D effect, it will be time to move on over to Photoshop. Open a new document in Photoshop. Now, copy your 3D text/letter from Illustrator & paste it as Smart Object in Photoshop, press Enter key or checkmark to commit. You can now resize your text to whatever size you want, in fact, bigger the better, but for the purposes of this tutorial, I will stick to a small canvas.

Power Tip: If for any reason, you want to edit the pasted 3D Smart Object, just double click on the Vector Smart Object thumbnail in the Layer Palette, press OK on the resulting window, the Smart Object will automatically open up in Illustrator, do the changes or editing you want, then go to File>Save & close the file & tadaa the changes will reflect in your Photoshop file.

Step 4

Now, lets begin with the Photoshop magic, we will be adding various texture on the different layers & will spice them up with the variety of blending modes, the key is to experiment & choose the settings that will best suit your purpose.

Open the texture image that you would like to use, for the first layer I used a texture, lets call it Texture 1 from a texture pack on deviantArt. Go to Select>All & then Edit>Copy to copy the entire texture image, Now we are going to paste this image into our letter, but you have to tell Photoshop where to paste it. So return to your 3D text document & pressing down Ctrl/Cmd Click on Vector Smart Object thumbnail, this will select the entire text/letter, in our case, the letter “C”, now go to Edit>Paste Into (Shift+Ctrl/Cmd+V) to paste the texture image on “C”. Change the blending mode of the texture layer to Overlay.

Now, your image & layer palette should look like so:

Look at your layers palette now. You see your texture image there and a mask has been made that allows only the letter part of the image to show.

If you’re using different images, play around a bit with blending modes, mostly Overlay, Soft Light, Hard light, Multiply will give the desired results.

Step 5

Repeat the procedure prescribed in Step 4, but with a different texture. I used one of the texture from this pack.

In brief, open the texture image, Select All (Ctrl/Cmd+A), Copy it (Ctrl/Cmd+C) & return to your original document, pressing down Ctrl/Cmd Click on Vector Smart Object thumbnail to select the letter/text & go to Edit>Paste Into (Shift+Ctrl/Cmd+V) to paste the texture in the letter “C”. And, change the blending mode to Multiply.

Step 6

Now, its again time to do the same thing as mentioned in Step 4 & 5, but with the different texture image. This time I used a more colorful texture from a another texture pack over at deviantArt. And, this time I choose the blending mode to Soft Light.

This is how my image & Layer Palette looks like after step 6.

Power Tip: If you need to edit the filler texture image or if you don't like how it looks within the letter, you can still change it! Just choose the Move Tool (V) & drag over with your texture layer selected. Also, if you need to resize the texture image select Edit>Transform to resize it.

Step 7

Now, select the Background layer & fill with a Gradient Tool (G). I used Linear Gradient & the colors for the two stops are as prescribed in the screenshot. Drag the gradient tool diagonally from bottom to top.

Step 8

Pressing down Shift key select all the layers in the Layer Palette except the background layer & Link all of them. Also make sure to link the Layer Mask thumbnails with their corresponding layer thumbnails by clicking once between them.

Step 9

Now, we will do the reflection of our letter “C”. For that, select all the linked layers & duplicate them.

Step10

Merge all the duplicated layers & name it Reflection.

Step 11

On the Reflection layer, go to Edit>Transform>Flip Vertical & place it beneath the letter “C”. Adjust its perspective if the need be.

Step 12

The next step is to add a layer mask to the duplicate layer. To do this simply click on the add layer mask button in the layers palette.

Now pick the Gradient Tool (G) and draw a gradient (black to white) in the direction from bottom to mid top.

Finally just reduce the opacity of the duplicate layer and you are all done. I reduced the opacity to 20% , there is no golden rule about the opacity % , just play with the opacity setting & choose the one that suits your image.

Step 13

Finally, with the Type Tool, I wrote the words “for creativity” with the settings as shown in the Character Palette.

The font used is Larissa & can be downloaded from here. I also rotated the words a bit via Edit>Transform.

Then I applied the layer style, as shown in the screenshots below.

Step 14

To add a bit of finishing touch, I added Outer Glow to the Vector Smart Object layer, as shown.

And, that’s how my Layers palette in end & final image looks like.

Here, is a another example of image, I made with the same technique.

To take it further, play & experiment with various textures, the blending modes, also changing the various Adjustments options like Invert, Posterize, Hue/Saturations settings etc. gives the different results. You can also make the text look grungy or rusty using grunge textures, its just the matter of exploring the powers of Photoshop & tapping your creativity!

NOTE : ALL CREDITS FOR THE ORIGINAL TUTORIAL MAKER :)

Create Custom Photo Brushes

When you think of creating custom brushes in Adobe Photoshop, you usually think of creating basic shapes and paths with the pen tool and then creating a brush from those shapes. But we can also use photos and convert them into brushes as well for unique designs in web sites and print designs. They also can make aesthetically-pleasing backgrounds.

Preview of Final Results

Create Custom Photo Brushes Photoshop Tutorial

Step 1

Open Photoshop and open a photo to use as a brush. It should be something that would work in a pattern, where the content of the photo is obvious as various sizes. I'm using this "blue angel wing" I found on iStockPhoto. IT should be relatively large, perhaps 1000 pixels for both width and height. If you create a brush at a small size, setting the brush to a larger size than originally created will cause it to lose resolution. But making it smaller is no problem, just like resizing a photo.

© ISTOCKPHOTO/DON WILKIE

Optional: You can download this file to use at http://www.istockphoto.com/file_closeup.php?id=130023 or use a similar one.

Step 2

To first define a brush, we need to select the area. Click the Rectangular Marquee tool on the toolbar.

Step 3

Click-and-drag a selection around the photo. We don't need to remove the white pixels first because they will be transparent in a brush.

Step 4

Go to Edit>Define Brush Preset.

Step 5

Name the brush something that matches the image, and click OK.

Step 6

Now that we have the brush defined, go to File>New and create a new file at 1024 x 768. Click OK.

Step 7

Click the Brush tool on the toolbar.

Step 8

Click the arrow on the Options palette which will bring down the brush styles and size options. Scroll down and click the brush we just created. You can change the size here, or change it by pressing the left and right brackets to make the size smaller or larger. Bring the size of the brush to something much smaller, such as 100.

Step 9

Go to Window>Brushes to bring up the Brushes palette. This palette has a lot of options for the Brush tool. Change the Shape Dynamics to these settings by clicking on Shape Dynamics then sliding the sliders. The brush can rotate to a certain degree as we brush. Try various settings as the preview shows how the brush will look.

Step 10

Change the Scattering to the settings shown here. Scattering does just that—scatter the brush as we brush. Try various settings as the preview shows how the brush will look.

Step 11

Change the Hue Jitter to 12%, because we want to somewhat adjust the hue as the brush is clicked-and-dragged, but within a certain range. Setting it to 100% would cause it to include the entire color range.

Step 12

Now for the fun part: click-and-drag with the Brush tool in a curve.

Step 13

Whatever color is selected in the Foreground in the toolbar is the color of the brush. You can have a jitter between the foreground and background color as well as hue jitter from the foreground color.

Step 14

If you create a second curved brush path like this, click on New Layer on the Layers palette first, so that we can adjust the layer blending mode on the Layers palette. In this example, I adjusted the top layer blending mode to Multiply.

Step 15

Try various photos and converting them to brushes using the same steps here. Brushes with added Shape Dynamics and Scattering can help create a unique background, such as this one created with a photo of Polaroids.

Step 16

This one was created with a scan of tape. Besides creating unique paths, backgrounds are often created with such brushes.

NOTE : ALL CREDITS FOR THE ORIGINAL TUTORIAL MAKER :)