Have you ever been to a site such as http://mimmomanes.com/ and wondered how to create the dot effect on the splash page. Well this tutorial will show you how to use a combination of filters and lighting changes to create the effect in Photoshop 7! This effect can be blended well with some grungy effects, so feel free to expand and experiment to make the effect more original to your liking
[ The Final Product of this Tutorial ]
Steps to Create Effect
The following steps will help you to create the image effect you see above:
1. Copy the original image from here (free membership required). You can also use any other image of your choice. Start Photoshop up and create a new RGB document 2048 by 1536 pixels and with the image resolution set at 72 dpi, and set the background color to white.
2. Go to Edit-Paste. (don't resize the image, just zoom out to see the entire thing). Once you have pasted the image, go over to your layers, Right Click the image part in Layer 1, and go to Select Layer | Transparency.
3. Now go up to Image-Adjustments-Hue/Saturation. (Ctrl + U) Move the Saturation slider to -80, and the Brightness slider to +5. Click Okay.
4. Now go to Image-Adjustments-Brightness/Contrast. Adjust your sliders to match the following:
[ make sure to check the preview box ]
3. Still with your selection go to your Layers, and Duplicate Layer 1. Now select "Layer 1 copy" [right click-select layer transparency].
4. Go to Filter-Pixelate-Color Halftone and adjust the settings to match the following:
For Channel 3, enter 90 and for Channel 4, enter 45.
4. Now lets add some noise! Go to Filter-Noise-Add Noise, and adjust the settings according to the following:
[ the hue/saturation settings used ]
5. Next, you need to copy the dot below, and create a pattern out of it:
[ copy the above image, and paste it in a new document ]
6. Once you have the layer that the dot is in selected, go to Edit-Define Pattern. Name it Circle. Now go back to your main document, and create a new layer in between Layer 1 copy and Layer one. Name this new layer "pattern".
7. Go to Edit-Fill, and your pattern should be in the box that appears. Click OK, which should apply the pattern to the whole canvas.
8. Look at your layers palate, and locate the drop-down menu in which Normal is the selected option. Change that to Overlay. Now look at the Opacity percent, and lower it to 88%.
9. Single click on Layer 1 copy, and change the layer setting (the drop down menu under the Layers tab) to Pin Light. Now it's time to reduce your image size. Go to Image-Image Size. and make your settings match the following:
7. Select Layer 1 copy, and go to Image-Adjustments and set the Contrast Level to +50 and the Brightness Level to +15. Lower the Opacity to 69%.
That's it! Your image should look identical or similar to the image at the top of this tutorial. If you need any help, please post in the Drawing and Design forums.
Thursday, March 13, 2008
Camera Shadows
Brief Introduction:
Lately, people have emailed me asking to show how to make a small nifty effect I used on lots of images. I like to call this effect a "Camera Shadow," because it's as if a person/camera is creeping upon a portion of the scenery in dark mysterious way. You've seen this done numerous times and here is the effect:
[ a shadow cast upon an old book]
Readying Up :
1. First steps first. Open Photoshop (CS/7). We'll be editing a premade image.
2. I found the old book from a great site: www.sxc.hu. The stock images are completely free for personal work and you're missing out if you don't have an account. For now, the direct link to the image: (click here) - beware 56k, the images are large resolution.
3. Once it's saved, open the file in Photoshop. Then, go to image > image size or simply transform the image into an fairly editable size. I've edited the dimensions of mine to be 400 by 350, for purposes of the tutorial.
4. Select all (ctrl+a) using the marquee tool and cut this selection (ctrl+x). Close this document, because we won't work directly on it.
5. Open a new file (ctrl+n). Photoshop should automatically detect the selection size and set the canvas to be as big as it is. So paste (ctrl+v) after the document is created. Make sure this new pasted image is on a new layer.
The Real Editing:
1. I always edit my images, no matter how good the lighting is, so go ahead and do that if you please. If not, just skip this and continue to the next step.
2. Create a new layer (ctrl+shift+n), this will be the layer of the shadow. Now, using the marquee tool, create a rectangle selection that is just about 75% of the image. Invert the selection (ctrl+shift+i) and fill this in black (alt+backspace) if your foreground color is set to black.
[ a black fill over the image ]
3. If you don't understand, just use the image above as reference. Now, go to filter > gaussian blur. Type in an amount of about 35.0. This should make it blurry and round enough. Play around with the settings, until it fits your needs.
4. Once you do this, you can set different blend modes, tweak opacity, and do many other changes if you'd like.
Note : Inner Shadows
There are 2 advantages to my method. One, you achieve a nice round and blended out shadow. Two, you can add layers under the shadow! That's the most important function. If you use innershadow, the shadow will be very square and too predictable, with the fact you wont be able to add anything under the shadow. Now you can add text and other images underneath.
Last Words:
As always, I've included the source file (.psd) for you. Have a look and observe how it's done.
Lately, people have emailed me asking to show how to make a small nifty effect I used on lots of images. I like to call this effect a "Camera Shadow," because it's as if a person/camera is creeping upon a portion of the scenery in dark mysterious way. You've seen this done numerous times and here is the effect:
[ a shadow cast upon an old book]
Readying Up :
1. First steps first. Open Photoshop (CS/7). We'll be editing a premade image.
2. I found the old book from a great site: www.sxc.hu. The stock images are completely free for personal work and you're missing out if you don't have an account. For now, the direct link to the image: (click here) - beware 56k, the images are large resolution.
3. Once it's saved, open the file in Photoshop. Then, go to image > image size or simply transform the image into an fairly editable size. I've edited the dimensions of mine to be 400 by 350, for purposes of the tutorial.
4. Select all (ctrl+a) using the marquee tool and cut this selection (ctrl+x). Close this document, because we won't work directly on it.
5. Open a new file (ctrl+n). Photoshop should automatically detect the selection size and set the canvas to be as big as it is. So paste (ctrl+v) after the document is created. Make sure this new pasted image is on a new layer.
The Real Editing:
1. I always edit my images, no matter how good the lighting is, so go ahead and do that if you please. If not, just skip this and continue to the next step.
2. Create a new layer (ctrl+shift+n), this will be the layer of the shadow. Now, using the marquee tool, create a rectangle selection that is just about 75% of the image. Invert the selection (ctrl+shift+i) and fill this in black (alt+backspace) if your foreground color is set to black.
[ a black fill over the image ]
3. If you don't understand, just use the image above as reference. Now, go to filter > gaussian blur. Type in an amount of about 35.0. This should make it blurry and round enough. Play around with the settings, until it fits your needs.
4. Once you do this, you can set different blend modes, tweak opacity, and do many other changes if you'd like.
Note : Inner Shadows
There are 2 advantages to my method. One, you achieve a nice round and blended out shadow. Two, you can add layers under the shadow! That's the most important function. If you use innershadow, the shadow will be very square and too predictable, with the fact you wont be able to add anything under the shadow. Now you can add text and other images underneath.
Last Words:
As always, I've included the source file (.psd) for you. Have a look and observe how it's done.
Comic Book Style Design - Page 2
Step 1. Draw with Pencil on Paper
The very first step is the pencil drawing. I could write a novel about how to draw, but this tutorial will focus on the process – the steps it takes – to go from pencil drawing to the finished, designed, commercial piece of artwork.
The following are the tools you will need:
Paper
I use a plate finish Bristol. This type of paper is heavy enough to handle a lot of erasing. It is also thick enough to not wrinkle when you are in the inking phase of this process.
Pencil
I actually use a mechanical pencil like the KOH-I-NOOR Technigraph 5611 Lead Holder. This type of mechanical pencil holds a very thick piece of graphite that you sharpen and use similar to a real pencil, except it’s better.
Eraser
I use the Staedtler Mars Plastic eraser. And a Sanford Tuff Stuff eraser stick.
I think that it is important to stay fairly loose when you are in the pencil drawing phase. Start with basic shapes, keep your lines fairly light and when you start to see the shape you’re going after you can focus in and "tighten" up your drawing.
Here is a sample of a fairly loose pencil drawing:
Here is a close-up sample of a fairly tight pencil drawing:
A Word of Encouragement about Drawing
I think most illustrators are far too hard on themselves. They expect to sit down with one piece of paper and draw exactly what they have in their mind the very first time around. In my opinion this is nearly impossible. Drawing is a process that takes a long time. I like to make an analogy between a good batter in baseball and a good illustrator. A great batting average for the major leagues is “.300.” This batting average means that they get 3 hits out of ten, or get a hit 30 percent of the time. I think that this is a reasonable expectation for an artist to have as well. If I can get 3 decent drawings out of ten attempts – I feel fairly good about myself.
So, relax while you’re in your pencil drawing phase of this process. Get yourself a big stack of paper and get loose, draw lots and don’t be concerned about “bad” sketches – just toss them aside and start over.
Here is our finished tight pencil drawing:
The very first step is the pencil drawing. I could write a novel about how to draw, but this tutorial will focus on the process – the steps it takes – to go from pencil drawing to the finished, designed, commercial piece of artwork.
The following are the tools you will need:
Paper
I use a plate finish Bristol. This type of paper is heavy enough to handle a lot of erasing. It is also thick enough to not wrinkle when you are in the inking phase of this process.
Pencil
I actually use a mechanical pencil like the KOH-I-NOOR Technigraph 5611 Lead Holder. This type of mechanical pencil holds a very thick piece of graphite that you sharpen and use similar to a real pencil, except it’s better.
Eraser
I use the Staedtler Mars Plastic eraser. And a Sanford Tuff Stuff eraser stick.
I think that it is important to stay fairly loose when you are in the pencil drawing phase. Start with basic shapes, keep your lines fairly light and when you start to see the shape you’re going after you can focus in and "tighten" up your drawing.
Here is a sample of a fairly loose pencil drawing:
Here is a close-up sample of a fairly tight pencil drawing:
A Word of Encouragement about Drawing
I think most illustrators are far too hard on themselves. They expect to sit down with one piece of paper and draw exactly what they have in their mind the very first time around. In my opinion this is nearly impossible. Drawing is a process that takes a long time. I like to make an analogy between a good batter in baseball and a good illustrator. A great batting average for the major leagues is “.300.” This batting average means that they get 3 hits out of ten, or get a hit 30 percent of the time. I think that this is a reasonable expectation for an artist to have as well. If I can get 3 decent drawings out of ten attempts – I feel fairly good about myself.
So, relax while you’re in your pencil drawing phase of this process. Get yourself a big stack of paper and get loose, draw lots and don’t be concerned about “bad” sketches – just toss them aside and start over.
Here is our finished tight pencil drawing:
Comic Book Style Design Page 1
We have often been asked the process by which we create our illustrated flyers and posters. I will try to give you a clear tutorial on how we create our illustrations and turn them into flyers or posters. Our end product will be this flyer which was created for our recent Go Media Inc. art show:
Before I go into an insane amount of details I want to give you a quick snap-shot of the process:
1. Draw with Pencil on Paper
2. Ink your penciled artwork
3. Scan your artwork at 300 dpi
4. Create a second copy of the artwork at 150 dpi
5. Create a “color” layer just under the artwork (set your artwork layer to “multiply”)
6. Color your artwork
7. Delete the artwork layer, and return the color layer to 300dpi
8. Open the original 300dpi artwork and paste it above the color layer
9. Flatten the image and save it
10. Import the image into your design software
11. Add text and graphics
12. Export the final design
The following sections will take through the above steps. Hopefully by the end of this tutorial you have a good idea of how to create your own comic book style.
Before I go into an insane amount of details I want to give you a quick snap-shot of the process:
1. Draw with Pencil on Paper
2. Ink your penciled artwork
3. Scan your artwork at 300 dpi
4. Create a second copy of the artwork at 150 dpi
5. Create a “color” layer just under the artwork (set your artwork layer to “multiply”)
6. Color your artwork
7. Delete the artwork layer, and return the color layer to 300dpi
8. Open the original 300dpi artwork and paste it above the color layer
9. Flatten the image and save it
10. Import the image into your design software
11. Add text and graphics
12. Export the final design
The following sections will take through the above steps. Hopefully by the end of this tutorial you have a good idea of how to create your own comic book style.
Comic Book Style Design Page 1
We have often been asked the process by which we create our illustrated flyers and posters. I will try to give you a clear tutorial on how we create our illustrations and turn them into flyers or posters. Our end product will be this flyer which was created for our recent Go Media Inc. art show:
Before I go into an insane amount of details I want to give you a quick snap-shot of the process:
1. Draw with Pencil on Paper
2. Ink your penciled artwork
3. Scan your artwork at 300 dpi
4. Create a second copy of the artwork at 150 dpi
5. Create a “color” layer just under the artwork (set your artwork layer to “multiply”)
6. Color your artwork
7. Delete the artwork layer, and return the color layer to 300dpi
8. Open the original 300dpi artwork and paste it above the color layer
9. Flatten the image and save it
10. Import the image into your design software
11. Add text and graphics
12. Export the final design
The following sections will take through the above steps. Hopefully by the end of this tutorial you have a good idea of how to create your own comic book style.
Before I go into an insane amount of details I want to give you a quick snap-shot of the process:
1. Draw with Pencil on Paper
2. Ink your penciled artwork
3. Scan your artwork at 300 dpi
4. Create a second copy of the artwork at 150 dpi
5. Create a “color” layer just under the artwork (set your artwork layer to “multiply”)
6. Color your artwork
7. Delete the artwork layer, and return the color layer to 300dpi
8. Open the original 300dpi artwork and paste it above the color layer
9. Flatten the image and save it
10. Import the image into your design software
11. Add text and graphics
12. Export the final design
The following sections will take through the above steps. Hopefully by the end of this tutorial you have a good idea of how to create your own comic book style.
Confusion about the Class Variable Q&E Page
Until very recently one of the questions on the Questions and Exercises: Classes page looked like this:
1. Consider the following class:
public class IdentifyMyParts { public static int x = 7; public int y = 3; } a. What are the class variables? b. What are the instance variables? c. What is the output from the following code: IdentifyMyParts a = new IdentifyMyParts(); IdentifyMyParts b = new IdentifyMyParts(); a.y = 5; b.y = 6; IdentifyMyParts.x = 1; b.x = 2; System.out.println("a.y = " + a.y); System.out.println("b.y = " + b.y); System.out.println("IdentifyMyParts.x = " + a.x); System.out.println("b.x = " + b.x);
The answer for part (c) confused some of you:
a.y = 5
b.y = 6
IdentifyMyParts.x = 2
b.x = 2
In fact we've received twenty emails in the last year from people who thought the tutorial was in error — that the correct value for a.x (and therefore the value of IdentifyMyParts.x) should be 1.
Actually the answer is correct, though it doesn't offer any explanation. The point of this question was to have you think about class variables. (In fact, the writer wrote IdentifyMyParts.x rather than a.x to give you a clue that this is a class variable.) What makes x a class variable is defining it as a public static int. This means that there is a single instance of x that is shared across every instance of IdentifyMyParts. When the first line of the following code snippet is executed:
IdentifyMyParts.x = 1;
b.x = 2;
Then x has a value of 1 for less than a nanosecond. When the second line of code is executed, x is set to a value of 2. Whether you call it IdentifyMyParts.x, a.x or b.x, it all refers to the same entity. For more information, see Understanding Instance and Class Members.
As a result of your feedback, we have improved the question and the answer.
Your continued feedback helps us improve the tutorial. Thanks!
1. Consider the following class:
public class IdentifyMyParts { public static int x = 7; public int y = 3; } a. What are the class variables? b. What are the instance variables? c. What is the output from the following code: IdentifyMyParts a = new IdentifyMyParts(); IdentifyMyParts b = new IdentifyMyParts(); a.y = 5; b.y = 6; IdentifyMyParts.x = 1; b.x = 2; System.out.println("a.y = " + a.y); System.out.println("b.y = " + b.y); System.out.println("IdentifyMyParts.x = " + a.x); System.out.println("b.x = " + b.x);
The answer for part (c) confused some of you:
a.y = 5
b.y = 6
IdentifyMyParts.x = 2
b.x = 2
In fact we've received twenty emails in the last year from people who thought the tutorial was in error — that the correct value for a.x (and therefore the value of IdentifyMyParts.x) should be 1.
Actually the answer is correct, though it doesn't offer any explanation. The point of this question was to have you think about class variables. (In fact, the writer wrote IdentifyMyParts.x rather than a.x to give you a clue that this is a class variable.) What makes x a class variable is defining it as a public static int. This means that there is a single instance of x that is shared across every instance of IdentifyMyParts. When the first line of the following code snippet is executed:
IdentifyMyParts.x = 1;
b.x = 2;
Then x has a value of 1 for less than a nanosecond. When the second line of code is executed, x is set to a value of 2. Whether you call it IdentifyMyParts.x, a.x or b.x, it all refers to the same entity. For more information, see Understanding Instance and Class Members.
As a result of your feedback, we have improved the question and the answer.
Your continued feedback helps us improve the tutorial. Thanks!
Subscribe to:
Comments (Atom)