Lilac Creative

I project I'm currently working on for a client called for some hand-drawn images of vintage cameras and typewriters, so I got out my Moleskine and had fun doing some sketching. Getting off the computer and taking pencil and paper in hand felt really good, and I realized that I don't do that enough anymore. I used to fill entire sketchbooks full of drawings and illustrations to the point where I was going through two full-sized sketchbooks in a year.

My creativity migrated to the computer after M was born. The computer was a nice, neat way of having everything I needed to be creative all in one spot, with no sharp implements or permanently-staining paints or toxic glues for a pint-sized person to get into. If she cried, all I had to do was hit save before I ran to see what she needed, and I could be sure that when I returned to it, my work would be exactly as it was when I left off. In short, the computer was (as it was intended to be) convenient.

But what I always loved about physically drawing, or painting, or writing, or even cutting and pasting, was the tactile feel of it. The way my fountain pen felt as I drew it across lined paper; different than a ball point pen, or a felt-tipped pen. The way watercolor paint spread outward from my brush strokes on rice paper, or 150lb Arches, and swirled and mingled with the other colors. 

I guess I always assumed that I liked to draw and paint for the purpose of visual accomplishment, but now I realize that the physical act, the tactile senses involved in the creation process are an equal part of the enjoyment for me. I need to make a point of working time into my schedule for painting and drawing again. 

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!

I love deep winter nights, when the earth lies still and silent beneath a blanket of pristine white snow, and the stars shine brightly in the clear night sky. And if you live in northern climes, you might even catch a glimpse of the Northern Lights dancing across the sky. It was a picture of these things in my mind that inspired me to create this wallpaper, which you can download here for free. If you're a DIY kind of person, stay tuned: I'll have a tutorial up of how I created this wallpaper in a day or two!

Click here to download 1024 x 768 version.

Click here to download 1400 x 900 version.

Click here to download 1600 x 1200 version.

Click here to download 1680 x 1050 version.

Update: Check Out the Tutorial

You can find the tutorial on how to make this wallpaper in two parts:

Creating a Winter Night in Photoshop - Part 1

Creating a Winter Night in Photoshop - Part 2

Web design isn't just colorful graphics and fun mouse-over effects; it requires a lot of forethought and strategic planning. I decided to write about the process involved in my recent site redesign, to give an idea of the way I work, as well as some useful tips to consider when planning for your own website design or redesign. In this post, I take a look at the initial planning I did before I even opened up my graphics programs or wrote that first line of code for the new site.

Is My Website Working for Me?

That was the first question I asked myself when I started to think about redesigning Lilac Creative, and it's one that all website owners should be asking themselves on a regular basis: Is your website actively working to aid your business? In today's business climate not having a website can be detrimental to a company's credibility, but having a poorly-designed or out-of-date website can be just as bad--if not worse--than having no website at all. Website owners should reevaluate their website on a regular basis to make sure it consistently meets the needs of the business or company it represents. A healthy business grows and changes to stay competitive and keep up with the changing needs of clients. If you don't update your website to meet the needs of your business' growth, your website can become a liability instead of an asset.

So, how do you determine whether or not your website is working for you? You need to have a clear understanding of your business' growth direction, and examine your website to make sure it is following that direction. It could be just a matter of simply changing colors on the site to match updated branding, or updating the site's copy to reflect a new mission statement. Or you might find that the new growth of your business requires your website to take on a different roll altogether. Perhaps your site started out as a basic informational site but now that your product has taken off, you'd like to be able to sell directly from your site. Evaluate your business' needs and then examine your website to see if it is efficiently meeting those needs. Consider new possibilities for your site that will meet more of your business' needs. It's your website; put it to work for you.

Examining the Roll My Website Plays

Unlike businesses that have a physical location where their storefront or office is the first place a client interacts with their business and their website is an auxiliary marketing/information tool, almost 100% of my business comes through my website, basically making my website the face of my entire business. When I first started freelancing, I knew the presentation of my portfolio needed to be a priority. This was most likely where people would go first, to see exactly the kind of work I do, and to decide whether or not my style and quality would fit their needs. With that in mind, my original site design gave careful consideration to the portfolio. Another important area of the site was the contact page. I needed a contact form that functioned well and gathered the right information to help me evaluate projects submitted through my website in order to give an accurate quote. Focusing on these things in my first design was a good start and the special attention to these areas paid off. My website brought projects in, and I saw my business grow. But the growth of my business also revealed to me areas of my site that were lacking, and showed me new opportunities that my old website wasn't well-suited to address.

The Evolving Needs of My Business

When I first started out, project inquiries trickled in slowly. I would do one or two quick, small projects in a month, and my freelance income was little more than hobby money. But the more sites I did, the more inquiries I started to receive. This also resulted in bigger projects, and more of them, but two problems started to arise. One, I was spending hours each day answering inquiries, which cut into my billable work hours. And two, I found that many of the inquiries I was receiving were either not prepared for my prices or not serious about their project, so I was wasting my time answering them but had no way of telling the serious inquiries from the non-serious. I also found that on top of inquiries, I was receiving many of the same questions from potential clients about my work process, what was included in my services, etc., making that much more correspondence work for me. It became clear to me that my website needed to provide more information to potential clients, and that by posting a basic pricing structure I could give people looking to hire me a pricing point of reference so they could know ahead of time whether or not my work would fit their budget. 

As my business grew, I also started looking at new product/services I could offer, and at ways to better serve my clients. Some of the things I brainstormed were possibly opening up my own blog theme shop, and providing clients with a private support forum. At the time of my redesign, I was not prepared to implement these ideas, but I wanted my new site to be easily expanded to include these things if/when I do decide to go ahead with them. I felt that my old site's CMS was not the best option for what I had in mind.

Lastly, I felt that the design of my old site no longer reflected the direction my business was headed in. It was very bright and colorful, and geared specifically towards women bloggers. I was starting to work more and more with small business owners--both men and women--and felt that my old site design wasn't reaching my full target audience.

The Goals for My Redesign

After examining all of that, I came up with a list of concrete goals that I wanted my redesign to accomplish:

• A more professional site design that follows the new direction my business is taking (focusing less on vanity blogs, and more on small business solutions)
• Provide more information to educate clients on what makes a good website, exactly what I do and the value behind it, as well as my design/development process
• Include basic pricing structures to give people an idea of what to expect in a quote, thereby eliminating non-serious inquiries
• Encourage all inquiries to come through my inquiry form, so that I have the information I need in order to give a quote
• Separate logo design portfolio from web design portfolio in order to eliminate confusion about what is and isn't my work, and to make each easier to browse
• Be built on a more flexible and feature-rich CMS that would allow for easy site expansion, membership management and possible eCommerce; to accommodate directions I can see my business going in in the future

With these specific features in mind, I then started to think about the design aspect of my new site. And I'll blog more about that in part two!

Share Your Experience

If you've been involved in the process of rethinking a website, you know the work involved. What new ways were you able to find to make your site work for you? I'd love to hear your ideas and experiences!

Update:

Here's a great article to read if you're considering a redesign yourself: Preparing and Planning for a Redesign by the folks over at Webdesigner Depot