Lilac Creative

Blog

Entries Posted Under 'Design'

Clock Works Desktop Wallpaper

| 0 Comments

I've been having lots of fun makin' wallpapers lately! Here's another one for your enjoyment. This one's got a bit of steampunk inspiration to it: a rich and slightly grungy wood panel with a glass pane revealing the inner workings of gear-driven mechanism. Last but not least, some gold-leaf lettering across the glass reads "Clock Works". Enjoy!

Clock Works Desktop Wallpaper

Click here to download 1680 x 1050 version (widescreen).

Click here to download 1280 x 1024 version (fullscreen).

 

Creating a Colorful Watercolor-Textured Background

| 0 Comments

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:

Watercolor Splatter Tutorial Step 1

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.

Watercolor Splatter Tutorial Step 2

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:

Watercolor Splatter Tutorial Step 3a

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:

Watercolor Splatter Tutorial Step 3b

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.

Watercolor Splatter Tutorial Step 4a

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.

Watercolor Splatter Tutorial Step 4b

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:

Watercolor Splatter Tutorial Step 5

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!

Watercolor Splatter Tutorial Step 6

Colorful Splatter Grunge Wallpaper

| 0 Comments

I've got a new desktop wallpaper for you! I have a personal project that I've been working on on and off for the past couple months, and it features watercolor-textured splatters in a wash of rainbow colors. I loved the effects I was coming up with so much that I decided to play with them on a wallpaper canvas, and here's the result. I'll give a step-by-step tutorial on what I did to achieve this look at a later date. Until then, you can grab a copy of this wallpaper for your laptop or desktop. Enjoy!

Splatter Grunge Wallpaper

Click here to download 1680 x 1050 version (widescreen).

Click here to download 1280 x 1024 version (fullscreen).

Create Digital Camouflage in Photoshop

| 0 Comments

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. 

Digital Camouflage 1

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.

Digital Camouflage 2Digital Camouflage 2b

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.

Digital Camouflage 3

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.

Digital Camouflage 4

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).

Digital Camouflage 5

Step 6: Testing the Pattern

Digital Camouflage 6

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.

Digital Camouflage 6b

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.

Next Page