Ray of Light effect
This is a tutorial on one of my favourite effects. I call it the ray of light effect (because it looks a little like little rays of light). I've used several shapes and the pen tool to create this effect. It's great to create movement in an otherwise static image or to just create the right atmosphere for a layout. So what does it look like?
I've also used this effect for the second style of my Altador Cup lookups
. I use it most of the time to emphasize movement or to give something a sunny look.
Step 01. Choosing the right image
Be careful with choosing the image your going to edit. Your image shouldn't be too passive. I would describe an image as passive when the main object (mostly a neopet or a petpet) is just standing or sitting. Some examples: 1
. Furthermore you should be able to follow the movement. For example the moving of the arm, legs, wings or hair. I mostly use images without a background for this effect, but that isn't really necessary. You shouldn't use an image with a dominant background (a background with a lot of details and colors) though.
I chose this
draik image (which you can find here
) to work with. I'm only going to use the pink draik, so I've cut it out. I've uploaded it as a PNG file for the people who are too lazy to cut it out themselves! Save the image on the left to your computer and open it in Photoshop. Of course, it has been scaled down... a lot.Step 02. The base
Open a new Photoshop file. I always make my files 1000px wide by 600px heigh. I do this because not everyone has the same screen resolution, so I suggest you make your layout no wider than 1000px. The 600px is a random number, but I always use it because it fits perfectly on my screen and I won't get a horizontal scrollbar when working on my layout.
For the option "Contents" I usually chose white, but you can also chose transparant, that doesn't really matter.
Paste the image (the PNG) in the new file (CTRL+V). Make a new layer beneath this layer and fill it with this color: #9269FC
. It's a purple color from the draik. I always use colors from the image (unless there isn't a color that works), so it looks more as a whole.
Before I actually start working on the layout I always imagine how I want the layout to look. Decide where you want the textbox, how wide the textbox should be, where you are going to put the navigation and then where the image should go. I really think you should do this, so you won't find out later that you're not able to make a layout of the image. For this layout, my textbox is going to be on the left, so I've placed the image on the right.
Step 03. The rays
Now we're going to work on the effect. First, decide where your focus point is going to be. This is the point from which all the rays will emerge. Most of the time I choose a point in the middle of the chest. But this time I'll use the end of the tail.
Now select the Pen Tool (P) and match your settings to mine:
You don't have to select the auto add/delete, but I find it pretty handy. It just means that when you want to start working on a new path, the old one will be deleted and it creates automatically a new one.
Well, let's start with the first ray. Start your path at the very end of the tail, follow the tail and her body. Here is an example of my path.
The first image shows the "importan part" of the path, the second image shows how I closed the path. Don't just close the path, but make sure there is enough space for you to work with. When your happy with your path, click "load path as a selection".
Now select a soft round Brush (B) (which is a round brush with hardness = 0). I usually use a diameter of 200 or 300px. It depends on how large the ray is going to be. In this case I use a 200px soft round brush. Make a new layer directly beneath the draik. The color I chose was the lighter (non-shadowy) pink from the spots on the wing.
Gently brush along the "important part" of the selection, so you'll get something like this:
Then select the Eraser (E) (Soft round brush, doesn't really matter which size. Something 100px-200px will do). Now gently erase a little part of the end of the ray. I do this because the end isn't really smooth. In this case you can't really see this very well (you have to zoom in a lot), but sometimes it's very obvious and that just looks sloppy.
I didn't change the blending mode of this layer, because I like the way this looks. Now we're going to create some more rays. I will make these just like the first one, so I'm not going to explain how I made them. I will, however, tell what color I used and on which blend mode the layer was set. Remember to make a new layer for each new ray!
Black and white are great for making rays. I always set them to soft light. You can also make solid rays instead of these gradient rays. I'm not going to use them for this layout, but I'll show you how the path of a solid ray looks:
This one ugly example, but believe me, it looks way better when you use it in your layout! Fill this ray with a solid color. To do this, click "Fill path with foreground color". Of course, you first have to set the right foreground color.
Step 04. Color bubbles
When making these rays, I always add color bubbles. You could also stick to white bubbles, to give the layout a bit more sparkly effect. I usually make these bubbles around the focus point and otherwise I would place them somewhere near the arms or the face. Be careful with your placement tough, if you place them in the wrong place, the outcome could be very weird. Just don't make them come out of some neopets' mouth or other body parts (if you know what I mean?).
Now we're going to work with the Eclipse Tool (U) to create circles. I'm going to create some circles around the wings. Using the Eclipse Tool is pretty easy. I always hold the shift tool, so the circles will be actual circles and no ovals. When you've finished all of the paths, click "Fill path with foreground color".
Now I'm going to create some other cirkles, but now I'm not going to fill them with a solid color, I'm only going to stroke the path. Select the Hard Round 1px brush, create the paths and the click "Stroke path with brush". If it doesn't create nice smooth line, you have to undo it (CTRL+Z). Right mouse click and select "Stroke path". The tool should be "Brush" and "Simulate Pressure" should NOT be selected. I only use black or white for these cirkles and I set the Layer blend mode to Soft Light. In this case I used white.
Step 05. Texturing
I ALWAYS use textures on my layouts. Most of the time I use my own textures
or swimchick's textures. For a more extensive guide on how to use textures, click here
For these types of layouts I mostly only use light textures. I do this because the layout itself is already very detailed with all the bubbles an the rays. When you use a texture with too much texture (like grunge textures), the layout will become too busy. So light textures are great textures when you want to give your light something extra, but you don't want to over do it.
Because the layout is purple/pink, you have to look for textures that fit with these colors. The textures you can use are mostly red to blue textures (with all purples and pink between the red and blue). Blue will emphasize the purple and make it more... blueish. While red will emphasize the purple and the pink and make it more red. These are the textures I'm going to use:
Let's start with the first texture. Copy and paste it into your file. First I set the layer to soft light. I liked how it looked, but when you want to make this into a layout, you have to make sure that you can actually make a background for your layout. So I set the layer back to normal and select a Soft round 200px brush. I used the Eyedropper tool (I) to select a color, for the left side I used the light pink/purple color and for the right site of the layout I used the dark purple color.
This is what the texture looked like when I was done (it has been scaled down, drag and drop to view full size). I removed a lot. As you can see, the parts that I didn't change where around or on the draik. I've set the layer to Soft Light and the Opacity to 50%.
Now copy and paste the second texture. I decided I was also going to set this layer to Soft Light, but first I was going to remove a lot.
As you can see, I've again removed a lot of the texture. I've set this layer to Soft Light (opacity = 100%).
Now I'm going the last texture. I really love this kind of light textures, because they're really simple, but they give your layout this little bit extra. Copy and paste. Set the layer mode to Screen.
And again, I erased a huge part of the texture. When using these kind of light textures, you don't want the little light spots all over your layout. Only leave some near and on your main object. Also, make sure none of them cover the face. Never ever cove a face with a (very textured) texture. Because then it will look like your main object has some really bad acne, you don't want that.
Step 06. Coloring
I always edit the colors (just like I always add textures). Not always as much, sometimes you wouldn't even say I changed them. But I think it makes layouts look much better, you can make the colors look more vibrant, making the whole layout a lot prettier. Most of the time I use Selective color layers (Layer » New Adjustment Layer » Selective Color), because with these you can edit the colors very precisely.
I can't really explain how I use the Selective Color layers, I just try things. What I do a lot though, is removing the blue colors from the yellow and sometimes from the reds. This will make the yellows and reds pop. Don't do this when there's a lot of green in your layout though. Also, be very careful with the amount of coloring you add. When you recolor your layout to much, your lines will start to look a bit jagged. This are the settings for my Selective Color Layer (drag and drop to view full size):
You could match your settings to mine, but you could also try to recolor the layout yourself. Do not click "OK" before your done with all the colors you want to edit. I've set this layer to Lighten and changed the Opacity to 85%. The difference between setting the layer to Normal and Lighten isn't very big, but I just liked it better on Lighten. You could also try to set the layer to color, this can look very good either.
Step 07. The finishing touches
Before you can use this layout as a layout, you first have to add a textbox. Make a new layer, directly below the draik PNG. Select the Rectangular Marquee Tool (M) and make a box. Then select the Paint Bucket Tool (G) and fill your selection with white. Always use soft colors for backgrounds. Most of the time I use white, but you can also use a light color. Of course, you could also use very dark colors. But please stay away from the other colors, since people should be able to read the text without getting major head aches. I've set this layer to Soft Light (didn't change the opacity), so the textbox will be a lilac color. This is an easy on the eyes color, so you can use it for a background. Then I added a border around the textbox. I do this almost always, because... I think it gives this extra distinction between your background and textbox background. To do this, go to your Layers pallette and right click on the textbox layer » Blending Options. Go to the last option: Stroke. Set the size to 1, the Blend Mode to Soft Light and the color to Black. Then click "OK".
This is how my textbox looks. I don't like the square look of the the textbox, so I'm going to give the textbox one round corner (the other one is covered, so you don't have to worry about that one in my case).
I doubt this is the best way to create round corners, but it works great for me. I first zoom in on the corner, so I can see better where to put the selection. Now select the Eliptical Marquee Tool (M) and set the style to "Fixed size" and the width and the height to 50px (You can change this number if you want to make larger or smaller circles. Place the circle in the corner, so it touches both sides of the box (see the first picture below). I use the Fixed size Marquee Tool because if you want to make more round corners, they'll all have the same size. Then select the Rectangular Marquee Tool (M). Set the style back to normal again and select "Add to selection", so you select this buttonthing:
). Now select the whole textbox, but not the corner as you can see on the second picture below. Press CTRL+Shift+I (Select Inverse) and press delete. You now have made a round corner.
You might want to add some extra things. I'm not really going to explain all that. But you could add some brushes, lines and gradients. I've added a pattern background. I've used this pattern
(it has been scaled down) from 77words at livejournal. If your looking for some great patterns, you should really check it out (on your own risk of course). I've filled a layer directly above the background color layer with the pattern and then I've set the blending mode to Soft Light and the opacity to 46%. You really have to lower the opacity of the patterns with layouts like this. Otherwise the pattern would clash with all the other objects. I've erased some of the pattern behind the draik. And of course, you could also add your site name. I would place it to the left of the draik above the textbox.
Something I do before I save the image, is sharpen it a little. Go to the layer that's on top. CTRL+A (Select All), CTRL+Shift+C (Copy Merged) and CTRL+V (Paste). Then go to Filter » Sharpen » Sharpen. Now go to Edit » Fade Sharpen... Now lower the opacity (I've set mine to 50%) and leave the mode as it is (Normal). Then click "OK". I think you should use Fade Sharpen most of the time, because when you Sharpen the image too much, the lines will start to look jagged.
Step 08. Saving the image
I suggest that you always save the file to your computer as a PSD file, so you can change things easily when your finished. Saving a file as a PSD isn't difficult. Just go to File » Save (CTRL+S) and save the image.
Now you have to save the image as a file you can upload and use in your layout. Go to File » Safe For Web. I suggest you save the image as a JPG file or a GIF file (JPG looks better, though, most of the time). Only save images as a PNG when you have transparant parts in your layout or when the file size is actually smaller as a PNG. I think this once occured to me when I tried to save a patterned background. But in all other occasions, stay away from PNG files, because they're very large files.
So, I've selected JPG (the first box below "Settings"). Now don't touch the other boxes or tabs, only the "Quality" is important. You'd say that you would want your layouts images to be as high quality as possible. Wrong. The difference between the highest quality and for example Quality 75 isn't noticable. While the loading time and the bandwidth it uses is noticable. My suggestion is that you set the Quality to around 75 (you might go a bit lower) and try to get the file size below the 300K (you can see the file size in the left lower corner). With these settings, my file size is 251K. Of course, normally I would crop the image, so the file size would be lower.
This is my final result: