
Sometimes you find the perfect piece of click art or graphic that you just have to have for a layout. The trouble is the piece you have found is a web graphic designed for displaying on the internet at a low resoulution. Or perhaps, the graphic is the wrong colors, or perhaps you want to add just a little more to it. These tips and techniques will also work if you don't believe you can draw, yet want some original graphics to use.
First you need to find a graphic that you want to transform. I found this snail at Graphics Factory and wanted to make a mascot of him. What I was looking for was a clean outline. (Graphics Factory allows commercial use of their graphics, something you need to be watching for if you are going to be selling your finished product.) Once you choose your graphic, drag it onto a 12 X 12, 300 ppi new document in Photoshop. By putting it onto that size of canvas, you can see how large it in in comparison to a layout size. Go to Edit>Transform>Scale to resize your image to the size that will work for your layout. It might degrade the quality of the image, but that's OK as we are not really going to use this layer in the final format anyway. |
![]() |
Now we need to get rid of the white background. Use your magic wand tool to select the background in your image and once it is selected, hit the delete key.You may need to select several times if your background has more than one color.
|
![]() |
Now it is time to zoom in and start adding some changes to your image. First I want to change the colors on my snail to fit the colors for the kit he is to be in. Use your magic wand to select one color. Once the color is selected, then create another layer and pour another color into the selection. For my snail, I want to make his shell another color. First I selected the golden brown color, created another layer on top of the image layer and poured a purple color into the selection. If the color you want to select is broke up like mine is here, you can select it all with the magic wand two different ways: 1. You can un-check the options box for the magic wand that says contigous and then everything on the layer that is the color you click on with the magic wand will be selected. |
![]() |
Notice in the layer window how the purple color is in a layer all its own. That will make it easier to come back and make changes, add styles or to even add a pattern. Right now, I am going to make the lighter shade of gold, the hightlight areas, a different layer. Doing that will leave more options open to me as I continue to work with this snail. To choose the next color to change, you must alwasy go back to the image and make it the active layer when clicking with the magic wand. |
![]() |
Here is the snail with the two toned shell - note the swirl in the middle of the shell is still there and each of the purple colors are on their own layer.
|
![]() |
Continue choosing each color and pouring a color for your image into its own layer. So here is my snail in his new colors. Each color is on a separate layer and even the outline has been changed with its own layer. The only thing I did not change or make its own layer is the little contour marks on his chest. |
![]() |
Now, if you look close at your image you will find there are some gaps here and there between the colors, or perhaps like me you choose to leave off some contour lines or details. These will need to be filled in. Turn the visibility of the original image off and you will see those gaps. It will be easier to see the gaps if you put a white background layer at the bottom of your layers. To fill in these gaps, each layer will need to be dealt with one at a time.
|
![]() |
| Start with the top layer. For the snail it is the darker part of the purple. There are several ways to fill in the gaps. You might just be able to put a stroke style in the same color to fill in the gaps. For my snail, though, I want to do away with the outline and also the lighter part of the shell. So, I turned off all the other colors and used a paint brush to fill it in. BUT, I did this to a duplicate of the purple layer, not the original layer. Just in case, you see. It doesn't look like much now, but we will fix that later. | ![]() |
Do this to all your colors, work with them and make them fit together. At this time you need to go over your edges on the outside to "cure" the jaggies you got when you resized the graphic. Here is the snail - notice I added on to the foot a little. Its all solid but the only reason you know it is a snail is cuz I showed you the image at the beginning of the tutorial.
|
![]() |
Time to add definition and some details. First, in your layers windows, drag all the unused an duplicate layers into a group and turn the visibility off on the group. Then, group the layers left and duplicate this group.Turn off the visibility of the duplicate. The duplicate is a spare in case we mess up. Working on each color at a time, use the burn and doge tools to add details, contours and definition to the image. To help you do this, drag the original image to the top layer and turn its opacity to real low. It will become like an over lay for you to trace the details with the burn tool. This is the same image just above with the overlay on it to help me determine where the details should go.
|
|
Using the burn and dodge tools, contour, highlight, and work on the edges and details. He's getting there! |
![]() |
Lets do something about that line between the green blue of the body and foot. First make a new layer above the layers with the green and blue. Make a circular selection, and use the transform selection menu command that is under the selection menu to adjust the size, shape and angle of the selection so that it covers the area where the green and blue meet. Set the feather of the selection to about 25 pixels.
|
![]() ![]() |
Set your foreground and background colors to the colors you want to merge. Then, choose your gradient tool. It will be automatically set up to paint a gradient with the green and blue. With the new layer about the green and blue selected, use the gradient tool to draw a line across the selection. When you release the gradient tool, the selection will be filled. You may need to do this several times to find the angle and direction that works best. Just hit undo (or control-Z) and do over until you like what you see.
|
![]() |
I made a big X with my gradient tool to get this final version and then had to go in with the eraser to clean up the part that overlapped the edge.
|
![]() |
| For the eye, create a new layer above the green and make a circular selection. Pour white into the selection. | ![]() ![]() |
Create another new layer above the white and with the paint brush, draw in a pupil and some eyelashes ---OOPS we have now a lady snail.
|
![]() |
Let me walk you through one more modification before I turn you loose on this graphic. I don't like the way the shell just seems to sit there. It needs something more. Create another new layer under the shell. Holding down the contol key, click on the layer thumbnail of the shell and it will be selected. Then, making sure the new layer you created under the shell is selected, pour a medium gray into the selection. This will create a gray shell under the purple shell. Change the blending mode to color burn, and go to Filter>Blur>Gaussian - use a 3.0 setting in the Gaussian blur. Then use the nudge tools to pull the shadow out a little from the edge of the shell. Adjust opacity and position til you are satisfied. More information on this kind of shadow can be found in my tutorial on drop shadows. You might notice that I adjusted her neck a little here too - added a little space between her neck and the shell - added more added to the front. She looks cute, but can use some more details. |
![]() |
Now, its your turn to play a little. Here is what I did. I named her Sadie and she has a patterned shell with lips, and a body tattoo.
|
![]() |