Well, I was supposed to be on my way home from Michigan today, but a snowstorm moved in and I'm stuck here. So I thought this would be the perfect opportunity for me to share how to make the colorful watercolor-textured background used in my last desktop wallpaper. This tutorial is a quick and easy one; it primarily makes use of Photoshop brushes and layer blend modes, and requires that you have a nice selection of watercolor brushes at hand. The two sets I used for this project are BittBox's Watercolor Photoshop Brushes, and Splatter Photoshop Brushes. They are free downloads, but please be courteous and read his TOU. Ready to get started?

Step 1: Creating a Colorful Base

Open up a fresh file in Photoshop. Since I was making a widescreen wallpaper, I started out with 1680px x 1050px canvas. Create a new layer above the white background layer, and with a large round soft brush (I used a 300px round brush with hardness set to 0%) paint areas of color on the new layer. Let areas of the white background show behind your color layer around the edges or in the corners. It should look something like this:

Step 2: Blending the Colors

Now we're going to soften the colors and blend them into each other using a Gaussian Blur filter. From the Filters menu, select Gaussian Blur and set the blur to around 80.

Step 3: Adding Some Watercolor Brush Strokes

Create a new layer above your color layer. Break out your watercolor brush stroke brushes, and using a medium gray color, "stamp" a couple different brush strokes around the edge of your new layer like this:

Set your brush strokes layer blend mode to Color Burn. Then duplicate your color layer and drag it so that it is positioned above your new brush strokes layer in the Layers Palette. Right click on the copied color layer in the Layers Palette, and select "Create Clipping Mask" from the menu that pops up. Then adjust the opacity of the gray brush strokes layer to suit your tastes. It should look something like the image below:

Step 4: Another Brush Stroke Layer

Next create another new layer above your first brush stroke layer and it's clipped color layer. Add another "stamped" watercolor brush stroke to the center of this layer, again using a medium gray color.

This time change the blend mode of this layer to Linear Burn. Again, copy the bottom color layer and drag it so that is positioned above your newest brush stroke layer in the Layers Palette. Clip the color layer to the brush stroke, and adjust the opacity of the brush stroke layer to suit.

Step 5: Lightening It Up with Some Splatters

Now it's time to get messy. Break out your watercolor splatter brushes, and on a new layer (above the layer we created in step 4 and its clipped color layer) throw a few splatters down in medium gray. This time change the blend mode of your splatter layer to Screen, and (yep, you guessed it) copy the color layer again, drag it above your splatter layer in the Layers Palette and clip the color layer to the splatter layer. Adjust the splatter layer's opacity to your liking. It should look something like this now:

Step 6: Tweak It Your Way

You can add as many splatter and stroke layers as you want. Play around with different blend modes to see what effects you can come up with. I also added a pattern overlay style to each of my clipped color layers, using a watercolor paper texture pattern to give more texture and depth to each of my paint strokes and splatters. Enjoy and have fun!

I needed a camouflage background for a web project I was working on recently, and after playing around in Photoshop a bit, I came up with a quick and easy way to make a tileable digital camouflage pattern ideal for use as a website background. First I did some Googling to see what different real-life digital camouflage patterns look like, so I could get a feel for colors and arrangement and I kept these in mind as I worked on my own background. Most of them are too contrasty and busy for a website background, so I purposely toned mine down so that it was recognizable as digital camouflage, but not so bold as to detract from the overall website. Ready to dive in? Here are the steps I took to create my tileable background:

Step 1: Creating a Brush

I started out by making a quick grunge brush. Selecting my brush tool, I chose one of the rough chalky-looking brush tips and changed some of the settings in the brush palette. Under "Shape Dynamics" I set the size jitter and angle jitter to 75%, and under "Scatter" I set the scatter at 100% with "Both Axes" checked. 

Step 2: Painting the Camo

Next I opened up a 300px x 300px (at 72ppi) canvas. In this example I'm making blue urban camouflage, but you can make desert camo using beiges and browns, forest camo using greens and browns, or even purple or pink (or whatever) camo. You want to pick three colors for your camo--a light, a medium and a dark--and you want to make sure the shade values are spaced out enough so that there is good contrast between all three colors. Fill your canvas with your lightest color and on a fresh layer, use the grunge brush you created to color splotches of your medium and dark colors (see my example below). Refer back to the Googled camo images for pattern inspiration if you need to.

Step 3: Digitizing the Camo

Once you have your camo pattern layer the way you want it, make sure the layer is selected in the layers palette and go to Filters > Pixelate > Mosaic. Set the cell size to around 8 and click okay.

Step 4: Making it Tileable

Now to make our tiny square of camo a seamless tile. Merge your layers together, and then create a layer from the background (right click on the background layer and choose "Create layer from background"). Next, go to Filters > Other > Offset and offset your pattern so that the lines where the edges of the pattern don't line up (on the top and bottom) make a cross somewhere in the center. If you play with the offset settings and you can't see a visible line where your pattern very obviously doesn't match up, then you're finished! If you do have obvious visible lines, continue on to step 5.

Step 5: Cleaning Up the Pattern

Get out your grunge br ush again and paint along the lines where the pattern doesn't quite match up (I put red lines through mine to show you where I was working) to cover up those lines. Then run the Mosaic filter again (still set to 8).

Step 6: Testing the Pattern

To test your pattern, turn it into a pattern by going to Edit > Define Pattern. Give your pattern a name and hit Okay. Then open up a new, larger canvas and select your Fill Tool. In the Fill Tool's settings bar up top, set the fill to Pattern, and in the pattern drop-down menu find and select the new camo pattern you just defined. Then fill the canvas with your new pattern.

Perfecting a Camouflage Background for the Web

If you're creating your tileable camouflage pattern for use on a website, be sure to consider the size of the space you're planning on filling with your pattern. If you're using your pattern as a background for the entire site, you'll want a larger pattern with subtler contrast between your colors so that your background isn't too distracting. Start with a larger canvas and create a pattern with more variation. If you're planning on using your pattern in smaller accent areas, then you'll want your pattern to be smaller with more contrast between the colors so that the pattern is recognizable as camouflage even in small doses.

In part 1 of Creating a Winter Night in Photoshop, we completed a starry night sky with northern lights and snowy hills. Now we're going to finish the scene up with some snowy pine trees, and some soft light reflections from the Aurora Borealis!

Part 2 - Finishing the Scene

Step 11: Drawing the Pine Trees

Time to add some pine trees to our scene! To do this I got out Illustrator and used the pencil tool to freehand two trees, each with three sections. I made them black because color doesn't matter at this point; we're going to be coloring them the same way we did our snow hills. If you don't have Illustrator, you can create your tree sections in Photoshop using the pen tool.

Step 12: Ordering the Trees in Photoshop

Next I dragged each section of tree from the Illustrator window onto my open Photoshop document, and made sure they were in correct order (top piece on top, middle piece below the top layer, and bottom piece below the middle layer). I gave each tree its own group folder in my layers palette, so it would be easy to distinguish the individual trees. Since I wanted three trees but I only drew two, I duplicated one tree group, changed its height and size, and flipped it horizontally to make it look a little different from its twin. Once I had the three trees' layers organized, I positioned each tree where I wanted it to be in my scene.

Step 13: Coloring the Trees

Next we need to color our snowy trees. Open up your Snow group folder, right click on your top snow hill layer, and select "Copy Layer Style". Now select all three tree groups in your layers palette, right click and click "Paste Layer Style". We need to change the way the gradients display on the trees, however. On the snow hills we wanted the blue at the bottom, but with the trees we want the blue to show up at the top of each piece, giving the illusion of a shadow from the branches from the upper section of tree. To do this, double click on of the tree section layers to open the layer style panel. In the Gradient Overlay panel, check "Reverse" next to the gradient drop-down. You may also want to darken the blue color in the gradient for a more pronounced shadow. Now just copy that layer's style and paste it to the other tree layers.

Step 14: Giving the Trees Shadows

Now we need to add shadows beneath the trees. Use your color picker to change the foreground color to a medium gray-blue. Break out your brush tool and select a soft round brush of about 100px. Create a new layer below your tree groups, and paint a shadow beneath each tree as shown below. Don't worry if it isn't absolutely perfect; we'll soften the shadows up in the next step.

Step 15: Softening the Tree Shadows

To soften the tree shadows a bit more, go to Filter > Blur > Gaussian Blur and make the blur about 25 pixels. Then change the blend mode of the tree shadow layer to Multiply.

Step 16: Adding Colored Light Reflections to the Trees

Almost done! Let's add some reflected colored light from the Aurora Borealis to our trees. To do this, you need to merge your tree groups together into one layer (you may want to duplicate each tree group, so you can keep the originals in tact just in case). Now duplicate your aurora layer, flip it vertically (Edit > Transform > Flip Vertical), and drag it so that it is positioned above your tree layer in your layers palette. Right click on this layer and choose "Create Clipping Mask" to clip the aurora layer to your trees. Change the layer's blend mode to Overlay, and move it around until the color displays on the trees the way you want it to. 

Step 17: Adding Color Reflections to the Snow

Last step! We're going to add light reflections to the snow the same way we did with our trees. Merge the Snow group and tree shadow layers together, duplicate the aurora layer and flip it vertically, position the new aurora layer above the merged snow layer in your layers palette, and clip the aurora layer to it (right click on the aurora layer and select "Create Clipping Mask"). Change the aurora's blend mode to Overlay, and then move the layer so that the colors display on the snow as desired. Adjust the opacity of the aurora layer to lessen the intensity if needed.

And we're done! The end result is a colorful wintery night scene, perfect for the winter holidays! In my December wallpaper I added a gold star to the top of one of my trees, and added a linear calendar for the month of December. Try dressing up your scene with some creative typography, or maybe some winter critters of your own creation! Feel free to leave comments with links to your results following this tutorial--I'd love to see what you come up with! Happy Holidays!

My December desktop wallpaper features a snowy winter scene against a starry night sky created using Photoshop. In this post, I'll give a step-by-step tutorial of how I did it. This tutorial assumes you have a general knowledge of how to use Photoshop gradients, the polygon tool, and the pen tool. Ready? Let's get started!

Part 1 - Creating the Background

Step 1: Night sky gradient

Fire up Photoshop and open up a fresh document (mine was sized 1680px x 1050px, for a standard high-res widescreen wallpaper). Select your gradient tool, and create a custom gradient that has a deep navy blue at one end, and a lighter electric blue at the other. Fill your background with the gradient so that the navy blue is at the top, and the lighter blue at the bottom. This simulates the way the sky is always lighter closer to the earth, even at night.

Step 2: Creating Snowy Ground Shapes

Next we need to create the hills of snow. Grab your pen tool and create two block shapes with wavy tops. Extend the bottoms and sides beyond the boundary of your document. Make sure the rises and falls of each shape are offset from the other, so that one hill is visible behind the other, as shown below. I made my back shape gray, and the front shape white to better demonstrate how they should look, but the color of the shapes doesn't matter right now--we're going to change that in the next step.

Step 3: Snowy Gradients

With the top shape selected in your layers palette, go to Layers > Layer Style > Gradient Overlay in the top menu, or just double click the layer to open up the layer styles window and go to the Gradient Overlay screen. Create a custom gradient that has a light to medium gray-blue at one end and white at the other, and adjust the gradient orientation so that the white is at the top of your curved shape, and the blue is at the bottom. Copy this layer style to the bottom curved shape, and then adjust the gradient on this layer so that the white is a very light gray, and the blue is a little darker. We want the lower layer to be slightly darker than the top layer to give an illusion of distance.

Once you've done this, pull the two layers into a group (select both layers in the layer palette and drag them into the file folder icon at the bottom of the layers palette), and label it "Snow". This will help us keep our layers organized as we work.

Step 4: Creating a Custom Star Brush

Next we're going to add stars to our night sky with a custom star brush. Open up a fresh document and create a black four-pointed star shape with the polygon tool (set the sides to "4", and in the Polygon Options panel, check "Star", Indent Sides by "75%", and check "Smooth Indents"). The polygon tool will automatically make the star of equal height and width, and we want our star to be longer than it is wide, so hit ctrl/cmmd + t and pull the bottom handle downward to elongate the star as much as desired. To make the star shape into a brush, go to Edit > Define Brush Preset, name your brush and click okay.

Grab your brush tool and select your new brush in the brushes menu. Now we need to adjust some of the brush's settings, so open up the brushes palette. On the Brush Tip Shape panel, set your brush's diameter to around 30px, and adjust the spacing to around 600%. Next check "Shape Dynamics" and in that panel set the size jitter to around 50%. Then check "Scattering" and in that panel set scatter to 1000% and check "Both Axes". Your starry-night brush is now ready to go!

Now create a new layer below your "Snow" group. With your foreground color set to white, swipe your new brush across this new layer to add stars to your night sky as desired.

Step 5: Making the Stars Glow

Duplicate your stars layer by dragging it into the new layer icon at the bottom of your layers palette. Select the bottom star layer, and then go to Filters > Blur > Gaussian Blur and set the blur to about 7 pixels.

Step 6: Adjusting the Glow

Increase the intesity of the stars' glow by duplicating the new glow layer two times. Merge the three glow layers together (select all three glow layers, right click and choose "Merge Layers"). You should now have two star layers again: one regular star layer, and one glow layer. Adjust the opacity of the glow layer to suit your tastes. At this point, you may want to drag your star layers into their own group folder, and label it "Stars".

Step 7: Drawing the Aurora

Now we're going to create the Aurora Borealis in our night sky. Create a new layer above the Stars group and get out your brush tool again. Change the brush to a soft round brush of about 200px--the color you use doesn't matter (we'll be changing it in the next step). Now draw an irregular wavy line across your night sky, as in the figure below.

Step 8: Coloring the Aurora

The Aurora Borealis is multi-colored, so let's add some color to ours. Double click your aurora layer to open the layer styles palette, and go to the Gradient Overlay panel again. This time we're going to add a multi-colored/rainbow gradient. I used one of the stock rainbow gradients for this example. Once you've found (or created) a rainbow gradient you like, adjust the angle of the gradient so that the gradient washes over the aurora layer at an angle of around 45 degrees. Then click ok.

Step 9: Softening the Aurora

At this point, I found I wanted my Aurora to be a little softer and less defined. To achieve this, go to Filter > Blur > Gaussian Blur, and this time we want our blur to be around 60 pixels.

Step 10: Adjusting the Aurora

Now we're going to blend our Aurora so that it looks more a part of our night sky. To do this, we need to simplify our layer so that the layer style is integrated. Create a new blank layer, and select both the Aurora layer and the blank layer, right click and select "Merge Layers". Now change the blend mode (top left of the layers palette) of our simplified Aurora layer to Screen and adjust the opacity as desired.

At this point our background is complete! Stay tuned for part 2 of Creating a Winter Night in Photoshop, where I'll cover how to create some beautifully snowy pine trees and achieve some beautiful light reflections from the Aurora!

Recently, I needed to create a vector graphic rhinestone for a client project I was working on, so I googled "vector diamond tutorials" and then "vector rhinestone tutorials" and really had a hard time finding anything useful.  So, left to my own devises, I came up with what I think is a pretty good-looking diamond, and I thought I'd share how I did it.  This tutorial will show you step-by-step how to create the diamond below in Illustrator CS4.

Part 1: Creating the Basic Shape

1. I looked at lots of images of solitaire diamonds so I could get an idea of the geometric pattern of a diamond's facets.  To create my vector diamond I started out by creating a square using Illustrator's rectangle tool (use the shift key while drawing the rectangle to keep the proportions even for a square).  Then I duplicated my square by dragging the square's layer in the layer palette into the new layer icon, which creates an identical layer directly above the original layer.  Rotate the second square 45 degrees so the two overlaid squares make the shape below. Note: To make the different layers easy to identify, I made each a different shade of gray.

2. From these two squares we want to make three different sets of shapes: one octagon in the center (where the two squares overlap), and two sets of triangles (where each square overlaps the other).  To do this we'll need the pathfinder palette and three sets of our squares.  Select both squares in the layers palette and drag them into new layer icon to create duplicates directly above the originals. With the top set of squares active, click the intersect button in the pathfinder palette.  This will create the center octagon.  Duplicate the squares again, and this time click the Minus Front button in the pathfinder palette.  This creates one set of four triangles.  Now reverse the layer order of the original squares, and with both layers active, click the Minus Front button again to create the second set of four triangles. You should now have three layers: the octagon layer, and two grouped layers of triangles, as in the figure below.

3. Next use the circle tool to create a circle a little larger than our existing collection of shapes, and send it to the back (ctrl/cmmd + shift + [ ).

4. The next sets of facets will need to be drawn with the pen tool, so we'll need to create a guide to help us out.  Using the line tool, create a line that passes through the circle and lines up at the corner where two of the outer triangles meet, as shown below.

5. Now we're going to use the pen tool to create an irregular diamond shape that follows the straight edges of the two adjacent triangles, with an outer point that touches the edge of the circle where our guide line hits, as shown below (I outlined the shape in red for demonstration purposes only).  Once you have this shape, you can delete the guide line layer.

6. We need a total of eight of this facet shape, so we're going to duplicate the layer and then rotate it 45 degrees (right click on it, and choose Transform > Rotate from the right click menu).  Place the new facet at the corresponding juncture between two triangles, and repeat this step six more times.  When you're done it should look like the figure below.

7. We're almost done creating the facets--just one set left!  The outside-most facets are not their own shape, but simply what's left of the circle showing behind the rest of the facet layers.  We need to create facet shapes over top of that circle, and each of the outside-most facets needs to be two facets and not just one.  Using the pen tool, trace just half of an outside facet shape as shown below.  Duplicate that facet and reflect it horizontally.  Line it up with the original facet shape so that the two flat edges meet and their rounded edges continue the shape of the circle. Now duplicate this facet set, rotate it 45 degrees, and line it up at the next interval.  Repeat this step six more times, until your diamond looks like the figure below.  Now we have all the facet shapes we need for our diamond.

Part 2: Adding Color

8. Now we're ready to color our diamond.  Selecting all our facet layers, we're going to add a custom gradient.  I started with the white to black gradient available in the default colors palette and changed the white to a very pale gray, and then added a dark blue between the pale gray and the black, moving the blue closer to the black end of the spectrum.  When you add the gradient to all your facets at once, it will look like the figure below.

9. At this point, it doesn't look very realistic with all the gradients lined up in the same direction, so next we'll want to use the gradient tool to align each facet's gradient individually.  This is easiest to do if all layers are ungrouped. Just adjust each facet's gradient until you're happy with how it looks.  If it still looks rough and unfinished to you, don't worry; the next step will help polish things up nicely!

10. You should still have a circle layer at the very bottom of your layer stack.  Duplicate it by dragging and dropping the circle layer in the layer palette into the new layer icon, and bring the duplicate all the way to the front.  Then you're going to create a new custom gradient with white at either end, and a closely-packed rainbow spectrum in between (and off center a bit).  If you are working in Illustrator CS4, change the opacity of the two end points to 0%.  Fill the new circle with your custom gradient, and rotate the angle of the gradient about 45 degrees.

11. Next change the transparency settings of the rainbow circle so that the blend mode is set to color burn, and adjust the opacity as you see fit.  The rainbow layer mixes with the gradient facets to create the look of refracted light.  I ended up moving the rainbow gradient within the circle so that it ran across the top of my diamond instead of the bottom.

12. Last, we add a few details to suggest the diamond's luminosity.  I created some sparkles with the pen tool, and added a little glow behind them by drawing a white circle with the elliptical tool and running a Gaussian blur filter over it.  Then I set my diamond over a rich, blue gradient background.  To create the look of light reflecting through my diamond onto the background, I duplicated the diamond's circle layer two more times and offset one circle to the top left of the diamond, and the other to the bottom right.  I filled the bottom right circle with a custom gradient that had a deep black-blue on one end and a sky-blue on the other, and set it to radial (making sure the lighter blue was on the inside).  I then ran a Gaussian blur filter over the circle, and set the blend mode to overlay.  I used the same radial gradient on the upper left circle, only I reversed the colors so the dark blue was in the center and the light blue on the outside.  I ran the same Gaussian blur filter on this circle, and set its blend mode to screen.

And there you have a beautiful, luminous vector diamond illustration.  I'm sure other precious stones could be created from this tutorial with the use of different colored gradients.  If you find this tutorial useful, or create your own art with it, I'd love it if you left me a comment or a link to your creation!  Happy creating!