Lilac Creative

If you’ve ever posted a photo to your blog and wondered why it doesn’t look as good on your blog as it does in Photoshop, this post is for you! Here are a few tips for making your photos look good online!

Print quality images have a much higher resolution than is needed for viewing on a screen. It’s important to resize your image for web viewing. There are lots of automatic image resizers out there—some blogging platforms will automatically resize images as you upload them—but by doing it yourself in Photoshop, you can control the quality of the image as you resize it, so your photos look as good sized for web as they do at full resolution.

Resizing the Image

The first step is to convert the image from print resolution to web resolution, and then make sure that the dimensions will fit your blog.

Open your image in Photoshop, and then go to Image > Image Resize. You’ll see a dialogue box like the one above. If you’ve optimized your images for print, your image should be around 300 pixels per inch, which puts the dimensions around 3888 pixels wide and 2592 pixels tall.

Making sure the “Resample Image” option is checked, change the resolution to 72 pixels/inch. You’ll see the pixel dimensions automatically decrease to around 900 pixels by 600 pixels. Next change the pixel width to fit within the content area of your blog (if you’re not sure how wide your content area is, check with your blog designer and they should be able to tell you). Here I’m setting the width to 500 pixels, which will fit well within my blog posting area.

If your photo is vertically-oriented, you don’t necessarily want the width to be as wide as your posting area or the viewer may be forced to scroll down in order to see the entire photo. For vertically-oriented photos a good rule of thumb is to make the height of the photo the same as the width of your blog. It will make the width of the photo narrower than your blog post area, but the height will fit on the screen without needing to scroll.

Sharpening the Image

Sometimes resizing an image can soften details that really make the photo. Here are a couple ways to sharpen your photo and bring back those fine details.

Unsharp Mask

Unsharp Mask is a great tool for sharpening images, whether they’re print or web resolution. With your web-sized image open in Photoshop, go to Filters > Sharpen > Unsharp Mask. Set the Amount to around 42% and the Radius to around 1.5 pixels. Play with the Amount and Radius to see how it affects the sharpness of your photo.

High Pass
High Pass is another way to sharpen details in your photo, and it can also give a little bit of color “pop” to a color photo.

With your web-sized image open in Photoshop, create a duplicate of the image on another layer using CTRL/CMND + j or by right clicking on your background layer in the layers palette and selecting “Duplicate Layer”. Then set the top layer’s blend mode to Hard Light.

Next go to Filters > Other > High Pass. Set the Radius to around 1.2 pixels. You’ll notice that the preview window of the High Pass dialogue shows a gray field with embossed-looking lines around the details of your photo. For this reason, it’s important to have the duplicate layer’s blend mode set to Hard Light so you can see the end result of the filter in your image in the background as you’re adjusting the settings.

Saving the Image for Web

Once you’ve sharpened your image, you’re ready to save it for web. Photoshop has a special Save For Web option that allows you to optimize your final image for the web.

With your web-sized image open in Photoshop, go to File > Save for Web, and the following dialogue box will pop up:

In box 1 in the above figure, make sure the image type is set to JPEG. Below that are the image quality selectors. Set the image quality to “Very High,” then look at box 2. This will tell you how large your file size will be at that quality, and how long it will take to load the image at various internet speeds. If the file size is above 200K, I recommend lowering the image quality until it is. Keeping your image file sizes below 200K will ensure that images load quickly for your blog readers, and you should be able to get good image quality within the 200K file size.

A Few Last Notes on Images on the Web

• Not all colors are viewable on a screen. For that reason, web images may appear duller in color when you post them to your blog. To compensate, consider using a Vibrance mask on your image and increasing the vibrance and/or saturation just a touch (but not too much!).
• Computer screens need to be calibrated for correct color display. If you are a photographer, you probably have a color calibration tool that you use on a regular basis to make sure that the colors you see on screen are as close to print colors as you can get. However, your average blog reader may not have his or her screen calibrated for color, and may see your images slightly differently than you do on your calibrated screen.

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!