Graphic Tutorial

Create Your Own Sexy Background Patterns (Part 4: Synthetic Fiber)

Posted on

Reprinted from webdesign.tutsplus.com

Ever wondered how to create perfect, seamless background patterns that work on Photoshop and on the web? Look no further because today we’re going to break it down for you – step by step. You’ll be creating your own background patterns in no time!


Introduction

Heya everyone! Today we’re continuing our tutorial series on creating background patterns that can be used on the web (and during the design phase) with our fourth edition: Synthetic Fabric Textures. We’ll be looking at how to create believable, tile-able fabric patterns by starting with a plain vanilla approach, and then taking the same principles to create advanced versions.

Our objective is simple: To teach anyone how to create background patterns that are intended for the web (but that can also be used easily during the design process). We’re going to be “program agnostic”, meaning that most of the tips will work in both Photoshop and Fireworks.

Be sure to check out the rest of the series, including Carbon Fiber, Noisy Backgrounds, and the Intro to Patterns post!


Today’s Patterns

Today is day four in our series – but it’s worth mentioning that all of these tutorials are “standalone” – meaning that you should be able to pick right up on Part 4, even if you missed the first couple parts.

The pattern we’re going to be covering today is how to create an effective “synthetic fabric texture” that can be used as a pattern in Photoshop as well as a tiling background on your web pages. We’re going to do this in 4 steps:

  • Step 01: Basic Fiber Texture
  • Step 02: Basic Canvas Texture
  • Step 03: Intermediate Denim Texture
  • Step 04: Advanced Denim Stripe Texture

For the past few months, subtle, noisy textures have been super popular with web designers (check out our tutorial on creating them here). In the last few weeks though, I’ve been noticing more and more “advanced” noise textures… which is to say that people are going beyond the simple ‘add noise pattern’ approach and trying out funkier effects. There are two main things that I’d like to point out:

1: The textures that we’re going to cover today are all created 100% in Photoshop. We’ll cover how to create photographic textures in our next tutorial.
2. These textures should be subtle and used sparingly. Nothing screams 1995 like a fugly background texture using heavy handed Photoshop filters.

Alright… you’ve been warned. Let’s do this!


The Written Tutorial


Step 01: The Basic Fiber Texture

This introductory texture is incredibly simple to create, but can be used for some highly professional looking results when used properly.

For instance, check out the texture behind the footer of the ‘qop‘ WordPress theme:

Not bad right? We’ll start out with a blank canvas. Set the size to 400 x 400 for now. The size can be changed later on, but you don’t want it to be too small because we’ll need some room around the edges to work with.

Create a new layer and fill it in with Black color.

Go ahead and name it the Black Layer just for the sake of organization.

Now we want to apply a quick filter to establish the foundation of our rough line texture. While on the Black layer, apply the following filter: Filters > Sketch > Water Paper.

You can adjust the settings until you have your own custom desired effect, but the demo texture uses the following settings:

  • Fiber Length: 15
  • Brightness: 42
  • Contrast: 43

Set the Black layer’s blending mode to Screen so that only the white lines show through. At this point you can also add a background rectangle to establish a color for your texture. Note that you can change the color at any point in this process.

We can’t really see anything but white now… so let’s add a simple colored rectangle and name it our Background Color. I used the color #242d34, but feel free to use anything you’d like.

Ahh, much better! Now we can see our texture. It’s a bit flat though. So, let’s add a little depth to our texture – we’ll do this by creating a new layer and filling it in with Black (again). Name this layer “White” (you’ll see why in the next steps).

Now we’re going add the Filters > Sketch > Water Paper effect again, but this time we want to add much more Brightness and Contrast to the settings:

  • Fiber Length: 15
  • Brightness: 63
  • Contrast: 66

Now, just invert the colors for that same layer (Image > Adjustments > Invert), and set the blending mode to Multiply. Bring down the opacity of the layer to around 90% so that the effect isn’t too abrasive.

Whallah! Not too shabby right?

The next step is to crop down the edges of this pattern because Photoshop tends to get a little heavy handed around the edges. Crop in about 50px from each edge using the Crop tool.

Why did we crop this in? Because Photoshop tends to get a little heavy handed around the edges of the Water Paper filter, which means that if we try to make it into a pattern, we’ll get obvious “seams”. Cropping in from the edge helps us to eliminate these visible seams when we go to use this as a pattern or on the web.

The final step is simple – just set the background color to your desired color, adjust the opacity of each filter layer until you get the desired level of texture, then make it into a pattern (Edit > Define Pattern). All done!

And, the final product should look like this when used as a pattern:

This might be a little too dramatic in terms of contrast to use (I usually dial the intensity up for tutorials to make the effects obvious), so feel free to play around with the opacity of the texture layers to get it “just right” for your own particular design.

To customize this effect: The main things you might be interested in tweaking are the “fiber lengths” of the Water Paper filter and the background color. Additionally, it can also be fun to mess around with the scale of the final pattern. Once you crop in, try resizing the entire image to tweak the density of the texture (and use the Sharpen tool to tweak how sharp it is).


Step 02: The Basic Canvas Texture

This next texture is probably the simplest of all four today. Three easy steps will complete the effect:

First, create a new document (400 x 400) and draw a colored rectangle on the document. We’ll use this later on to adjust the color of the final pattern.

Next, create a new layer, fill it in with Black, and add the filter: Filter > Texture > Texturizer. Use the following settings:

  • Texture: Canvas
  • Scaling: 50%
  • Relief: 3
  • Light: Top Left

Set the blending mode on that layer to Screen.

Next, create a new layer, fill it in with White this time. Add the same exact filter: Filter > Texture > Texturizer. Use the following settings:

  • Texture: Canvas
  • Scaling: 50%
  • Relief: 3
  • Light: Top Left

Now just set that layer’s blending mode to Color Burn so you can see through to the background color.

Finally, let’s adjust the background color to something more subtle. Note that as you adjust the background color, you may also want to adjust the opacity and blending modes of the top two layers until the effect is as you desire it.

The final pattern as shown in the demo:

You can create the pattern from here (Edit > Define Pattern), or you can play around with the background color, filter layers’ opacity, and the cropping until you have a pattern that is seamless and fits your design.


Step 03: Intermediate Denim Texture

This next texture is a bit more advanced, so pay special attention if you’re looking to recreate this effect.

Begin with a new document (400 x 400) and begin by drawing a blue rectangle (#2b4891) as the background. You can actually choose any color, but we’re used to seeing blue denim, so we’ll stick with that for now.

Next, create a new layer and Fill it with 50% Gray (you can use the hot key Shift + Backspace/Delete). Give it the name of Horizontal Layer for now.

Next, set the Foreground and Background color to the default black and white by pressing D. We need to add the foundation for our denim pattern. On our gray layer, apply the filter: Filter > Sketch > Halftone Pattern.

Use the following settings:

  • Size: 1
  • Contrast: 0
  • Pattern Type: Line

This should produce a basic line pattern… but denim is “fuzzy”, so we’ll want to mess this up a bit using another filter: Filter > Pixelate > Mezzotint. Set the type to Fine Dots.

Now create a duplicate copy of this layer (Cntrl + J) and name it “Vertical Layer”.

Use the Free Transform Tool (Cntrl + T) to rotate it 45 degrees AND scale it out far enough so that it meets each corner of our document. I happened to scale it up 145% in case you’re trying to match mine exactly.

Don’t worry that scaling the pattern up so big will create some raster imperfections. We actually want those. In fact, go ahead and add additional blurring (Filter > Gaussian Blur set to 0.3) to both this layer and the first untransformed layer.

Finally, set the blending mode on the diagonal layer to Multiple with 70% Opacity — and set the blending mode on the horizontal stripe layer to Soft Light with 60% Opacity.

That completes the denim effect! You can tinker with the background colors and then make it into a pattern (Edit > Define Pattern).

Note: If you notice any obvious seams in your pattern, you’re going to need to play around a bit with the cropping. The trick here is to just make sure that there aren’t any unnaturally bright or dark lines near any of the edges. Try a few different croppings until the pattern is seamless.

If you followed the demo to the letter, you can simply crop down the height of your document to 400px by396px. This will remote the seams (below):

Whallah! How does this work? If you remember back in our first pattern tutorial, the general idea here is that the final few pixels at the right-side and the bottom of our pattern will always need to link to the left-side and top of the document. Cropping off those 4px in this case helps the bottom match to the top. Since the right and left already match up, we’re good to go!


Step 04: Advanced Denim Stripe Texture

Alright! We’ve arrived at the final texture of the day. By now we’ve employed some pretty tricky techniques, so this final step is actually going to seem quite simple.

Create a 200 x 240 document. Go ahead and drag in the three raw layers that we used for our denim pattern (the two texture layers + the background color).

Group these layers together (Ctrl + G) and set a 50px wide mask over the entire group folder. If you haven’t created a group mask like this before, it’s easy: Just use the Rectangular Marquee selection tool to draw a 50px wide selection that fills the document from top to bottom (look at the Info panel to check your measurement). Then just hit the “Add Vector Mask” button at the bottom of the layer panel:

Why 50px? Because with a document of 200px wide, we are going to want to fit 4 stripes of 50px.

Next, duplicate this layer group, move it over to the right of the first group, then (optionally) flip it horizontally to create an opposing diagonal pattern.

To add some contrast in the stripes, simply change the background color (subtle changes are best here) to something a bit brighter or darker than the original color).

Finally, duplicate BOTH of our stripe groups and move them over into the blank space on our document.

We’re note quite done yet – to add some visual interest, let’s de-link the group masks for these last two stripes, then move the 3 denim layers inside over about 100px to create a slightly different striation. The end result isn’t dramatically different, but people looking for seams in your pattern will be thrown off by this final step.

Congrats! Select Edit > Define Pattern, and start using this in your own projects. As a final thought, you can obviously do a lot more with this by adding your own customizations. The below example changes up the colors to a brown hue, and then also has scaled down the “knit” of the pattern by reducing the image size. Check out our final example:


Conclusion

Alright! So now you should have a good enough basic understanding to create your own custom variations of these Synthetic Fiber patterns – play around with the levels, colors, document sizes, and more to add your own personal twist on these. Heck, you can even invert the shading to create subtle, light colored patterns.

In the next parts of this series we’ll be showing you how to create some advanced photo-based textural patterns, more shape based patterns, transparent patterns, and even more in the future.

Create Your Own Sexy Background Patterns (Part 3: Carbon Fiber)

Posted on

Reprinted from webdesign.tutsplus.com

Ever wondered how to create perfect, seamless background patterns that work on Photoshop and on the web? Look no further because today we’re going to break it down for you – step by step. You’ll be creating your own background patterns in no time!


Introduction

Heya everyone! Today we’re continuing our tutorial series on creating background patterns that can be used on the web (and during the design phase) with our third edition: Carbon Fiber Textures. We’ll be looking at how to create sleek, professional carbon fiber patterns by starting with a plain vanilla approach, and then taking the same principles to create advanced versions.

Our objective is simple: To teach anyone how to create background patterns that are intended for the web (but that can also be used easily during the design process). We’re going to be “program agnostic”, meaning that most of the tips will work in both Photoshop and Fireworks.

Be sure to check out the first post in the series if you missed it!


Today’s Patterns

Today is day three in our series – but it’s worth mentioning that all of these tutorials are “standalone” – meaning that you should be able to pick right up on Part 4, even if you missed the first couple parts.

The pattern we’re going to be covering today is how to create an effective “carbon fiber texture” that can be used as a pattern in Photoshop as well as a tiling background on your web pages. We’re going to do this in 4 steps:

  • Step 01: Basic Carbon Fiber Texture
  • Step 02: Modifying the Basic Carbon Fiber
  • Step 03: Getting Funky: Diagonal Carbon Fiber
  • Step 04: Taking it to the Next Level: Advanced Carbon Fiber

Ready? Let’s do this!


The Video Tutorial


The Written Tutorial


Step 01: Basic Carbon Fiber Texture

The basic carbon fiber texture is actually pretty darned simple to create. There’s tons of tutorials for this basic pattern out there on the web, so we won’t breaking any new ground here. What’s important in this first step is that you pick up the basic principles that we’ll be using in the more advanced stages. The main tricks are:

  • Keep your document as small as possible.
  • Use dark gradients to create a convincing and subtle light source.
  • Don’t get too fancy – a little goes a long ways with carbon fiber.

Let’s start our basic version by creating a 4×4 document:

Next, grab a 2×4 px selection of the background (shown) and create a new layer from it (Ctrl+J):

On the new 2x4px layer, let’s add a basic gradient from the Layer Styles panel (double click the layer, or right-click it and select Layer Styles). The gradient we’ll be adding will run from the bottom to top and use the colors Black (#000000) on the bottom to Dark Grey (#4f4f4f) on the top:

This gradient is going to be the foundation of our carbon fiber… so you can always return to this step to change the the outcome of the final product.

Next, let’s take a 1×4 pixel selection of the gradient layer using the Rectangular Marquee tool and create a new layer by cutting it off (Right click > Layer via Cut).

Now set the opacity on this second layer to 92%.

Why? We’re trying to create very subtle variations in the grey-tones so that the carbon fiber appears to have a believable light source. Obviously, there isn’t a true light source and we can’t create one without having a massive image (which defeats the point of a web pattern), but small changes in shading will deceive the eye into thinking that there is depth.

Merge the two 1×4 px layers together (above) and then, using the marque tool again, take a 2×2 selection off the top of the new layer:

Next, to create our pattern effect, swap the ordering of the two 2×2 px tiles from top to bottom, and vice versa:

Our pattern is now complete! Simple save it to your library of patterns by using the Edit > Define Patterntool. Give it a name of your choosing, and it will now appear whenever you use the Layer Styles > Pattern Overlay library.

Alright! So we have one very basic carbon fiber complete… let’s move on to the next step, where we’ll create some modifications on this idea.


Step 02: Modifying the Basic Carbon Fiber

The basic carbon fiber can be manipulated quite easily. In this next short example, we’ll use the exact same process and principles to create a slightly larger fiber texture.

Note: I’m purposefully going to skip over some of the repetitive screenshots that we reviewed in the last step, so I’ll only be highlighting new techniques.

Start this time with an 8px by 8px document.

In the first carbon fiber pattern that we created, we took a shortcut by creating a single gradient for the entire left side of the document. This worked becuase the document was only 4×4 and really couldn’t handle any more detail than we went over.

In this second version we’re going to get a little more meticulous with our shape. Begin on your document by adding a 4×4 rectangle:

Add another 4×4 rectangle for the bottom space (I’ve colored it in so you can see it better):

Now we need to add a subtle gradient to the bottom square. Remember, the bottom left region is dark… nearly black, so use a very dark gradient:

Repeat the gradient step for the top 4×4 layer, but this time it’ll be a light gradient:

Duplicate both 4×4 layers and perform the “fliperoo” trick where we swap the position of each square to opposite corners of the document.

Now we have our basic carbon fiber pattern, but let’s add one level of customization by adding a Levels Adjustment layer. Do this from the Layers menu at the top; You’re looking for the “Layer > New Adjustment Layer > Levels” button.

The Levels Adjustment layer will allow us to tinker with the brightness and contrast of our fiber pattern. When you’re done, Define the Pattern (Edit > Define Pattern) and you’ll be set to go. Here’s what your pattern will look like:

Note: When trying to use the Define Pattern tool, make sure you’re not selected on the Adjustment Layer… for some reason Photoshop won’t let you use “Define Pattern” when you are on layers like this one (it’ll be grayed out until you select another layer).

Now we have a second carbon fiber pattern complete! You can use this same basic process over and over to create your own variations. Try different document sizes, adding color, adjusting the contrast of your gradients, and anything else you can think up to create unique effects.


Step 03: Getting Funky: Diagonal Carbon Fiber

Ok, so you’ve got the basics down… that’s great! In this next step, we’re going to create a diagonal carbon fiber pattern using the same basic principles that we used in the first two steps – but we’ll use a radical little twist on the grid-layout of our pattern to create a unique effect.

Start with a 30px by 30px document. Once you finish this step you can repeat the process using a different document size, but this should be a good starting point.

We’re going to be working in cells of “5px” as a general rule of thumb… so let’s start our pattern by creating a rectangle that’s 5px tall by 15px long.

Next, add a gradient across our first shape:

Now add a 5px by 5px square shape with the color of #191919 directly next to our rectangle shape.

Tip: Use the “Convert Point Tool” (under the Pen Tool panel) in you need to adjust or sharpen up any edges. Your shapes should end exactly on defined pixels, not show any blurry “half pixels”.

What we have here is our basic pattern that we’re going to repeat quite a few times… so let’s convert these two shapes into a single “Smart Object” so we can always return back to them to edit the gradient.


Right click on one of the layers (when you have selected both using the Shift Key) to open up the context menu and find the Convert to Smart Object button.

Note: You can always go back and edit your smart objects by right clicking on the layer and selecting “Edit Contents”. This will edit each instance of the smart object… which makes edits quick and easy when you have 10 or more duplicates floating around.

Next, we need to duplicate the smart object and nudge it down by 5px and to the left by 5px.

Repeat the same “Duplicate, then Nudge” process over and over until you’ve covered your document. Refer to the screenshot if you get lost, but there should always be a 5px unit of measurement between all major parts.

Now let’s add a background color layer. I used a simple rectangle for this – set the color to #1e1e1e:

Finally, just to be safe, lets add another of those trusty Level Adjustment layers so we can tinker around with the darkness and contrast on the fly.

Whallah! You can now use the Define Pattern tool again and use the pattern wherever you want, like this:


Step 04: Taking it to the Next Level: Advanced Carbon Fiber

For this last step, we’re going to use the same basic principles again… but this time we’ll flip things by 45 degrees to create another unique diagonal carbon fiber effect.

This final pattern is actually the easiest of all to master, so this should be a cakewalk if you’ve made it this far!

Start with an 8×8 document and add a background color. I used Black (#000000), you can use whatever you’d like… just keep the exact color in mind for the next step:

Now add a rectangle, measured at 4px wide by 8px tall:

Everything should be familiar now – add a subtle gradient – the ending color should match our background color (my gradient here is #555555 to #000000). Note the angle – we’re setting it to be 135 (or -45 depending on how you want it) so that it will match up nicely when we rotate the layer:

Bingo! We have our final pattern… adjust the document size and gradient colors to get your own custom variations:

… and here it is:


Conclusion

Alright! So now you should have a good enough basic understanding to create your own custom variations of these Carbon Fiber patterns – play around with the shapes, colors, document sizes, and more to add your own personal twist on these. Heck, you can even invert the shading to create subtle, light colored patterns.

In the next parts of this series we’ll be showing you how to create some advanced textural patterns, more shape based patterns, transparent patterns, and even more in the future.

Create Your Own Sexy Background Patterns (Part 2: Noise Patterns)

Posted on

Reprinted from webdesign.tutsplus.com

Ever wondered how to create perfect, seamless background patterns that work on Photoshop and on the web? Look no further because today we’re going to break it down for you – step by step. You’ll be creating your own background patterns in no time!


Introduction

Heya everyone! Today we’re continuing our tutorial series on creating background patterns that can be used on the web (and during the design phase) with our second edition. We’ll be looking at how to create the ever-popular “noise” patterns that so many websites have been using lately. Be sure to check out thefirst post in the series if you missed it!

Our objective is simple: To teach anyone how to create background patterns that are intended for the web (but that can also be used easily during the design process). We’re going to be “program agnostic”, meaning that most of the tips will work in both Photoshop and Fireworks.


Today’s Patterns

Today is day two in our series – but it’s worth mentioning that all of these tutorials are “standalone” – meaning that you should be able to pick right up on Part 4, even if you missed the first couple parts.

The pattern we’re going to be covering today is how to create an effective “noise texture” that can be used as a pattern in Photoshop as well as a tiling background on your web pages. We’re going to do this in 4 steps:

  • Step 01: Creating the foundational noise pattern (Basic Grey)
  • Step 02: Inverting the noise pattern (Black)
  • Step 03: Adding color (Blue)
  • Step 04: Adjusting the shading and hue (Green)
  • Step 05: Adding additional vibrancy (Orange)

Ready? Let’s do this!


Step 01: Creating The Foundational Noise Pattern

The first step in today’s tutorial is probably the most crucial, because we’re setting up the foundational elements. There are a lot of different ways to create these noise patterns… but I’m going to show you one of the best (and most flexible!) methods to save you frustration and headaches down the line.

Start by opening up a new document. The size doesn’t matter much (we’re using 200px by 200px in the demo), but it’s best to keep it above 75px to ensure that your noise pattern is believably random. Smaller documents are liable to start looking like “repeating tiles” – documents that are significantly larger will increase your file size without much added value.

Let’s add a basic rectangle shape and name it “Base Color” (organization will make life easier later on!). You can use whatever color that you’d like (we used #EBEBEB), but make sure the rectangle occupies the entire space.

Now let’s open up a new layer and name it the “Noise Layer”. It’s just a blank layer right now…

Using the “Rectangular Marquee” tool (M), draw a selection across your entire document while selected on the Noise Layer. Then select “Fill…” from the context menu (Right Click when over the selection – or it’s also under the Edit panel) and let’s fill it with the color White.

Tip: Next we want to convert the “Noise Layer” to a Smart Object. You can do this by right clicking on the layer and selecting “Convert to Smart Object” or selecting “Convert for Smart Filters” from the Filters menu.

Why make it a smart object? Because this will allow us to retain the ability to edit the intensity of the noise texture later on! There may be steps in the future where we end up needing to flatten the texture, but it’s always best to keep things editable for as long as we possibly can.

Alright, Smart Object in hand, we want to add the noise texture.

  • Filter > Noise > Add Noise
  • Use 4.8% for the amount (you can adjust this later on if you want something more subtle or more intense)
  • Select Gaussian for the Distribution.
  • Select the Monochromatic checkbox (to remove those annoying colored pixels).

Finally, set the Blending Mode on the Noise Layer to “Multiply” so that only the darker noise pixels are visible. Now you can change the color on the base layer for different noisy color.

Whallah! We now have established the foundational elements for our basic noise pattern…

…and that would be the end of this humble tutorial if we were lazy…

In the next steps though, we’re going to show you how to invert, alter and add believable depth and vibrancy to your noise pattern to make it truly stand out from the pack!

Before you move on: Go ahead and group your layers together (the Base Layer and the Noise Layer) using Ctrl+G to create a layer folder. Duplicate it once and hide the original so we always have a copy of it. For each new step, we’re going to create a new duplicate group. This is just a good basic habit to have because it ensures that you always have a backup of our foundational pattern.


Step 02: Inverting the Noise Pattern (Black Noise)

Alright, let’s twist this noise pattern into something dark and delicious now. I’m going to show you how to create an inverted noise pattern that appears to have a subtle sparkle to it.

Start with a copy of the original noise group (see the end of Step 01). The first thing we want to do is make the background color Black, so go ahead and do that on your Base Layer.

Next, because our Noise Pattern is composed of only “dark” pixels, we need to essentially invert it. Unfortunately, we can’t do this as a “Smart” effect, so we need to flatten out the noise pattern. Make sure you have the intensity level set to what you’d like, then “Rasterize” the layer. You can do this by Right Clicking on the layer and selecting Rasterize from the context menu, or from the Layer > Rasterize > Rasterize Layer menu.

Now that we’ve essentially flattened out our noise pattern, we want to invert it. Do this from the “Image > Adjustments > Invert” panel.

What’s wrong? You can’t see the Noise Pattern anymore?

We’ll need to make some slight modifications to see our inverted noise pattern. First, set the Blending Mode on the noise layer to “Screen“.

Next, adjust the “levels” of your noise pattern (Ctrl + Alt + L … or Image > Adjustments > Levels).

Alternate Method: You can also simply add an adjustment layer for the levels (Layer > New Adjustment Layer > Levels). You might prefer this way if you want to make changes to the intensity later on.

Presto! Now we have a sparkly, inverted noise pattern. Obviously, you can adjust this to your heart’s content – make it darker and more subdued – or brighter and more intense. You can even change the base layer color to a dark blue or red to get other effects. Go nuts!

Remember – you save save these as “Patterns” in Photoshop by selecting “Edit > Define Pattern“. Do this and later on you’ll be able to use these patterns over and over again. You can even save your patterns as libraries and share them with friends and colleagues.

Next we’re going to show you how to add depth and vibrancy to your noise patterns…


Step 03: Adding Color, Vibrancy and Depth (Blue)

Let’s add some color and vibrancy to our noise pattern now. It’s worth mentioning that in the following steps we’ll be using some general techniques… you don’t need to follow them to the letter – just keep each one in mind for when you go to create your own custom patterns.

Start by adding some color to your Base Layer.

Now create a copy of your Noise Layer and set both blending modes to Color Burn. The duplicate layer will help us get the bottom layer darker. It’ll also give us the ability to shift the opacity on a finer scale later on.

Create yet another copy, but this time we’re going to Rasterize it and Invert it (see Step 2, Black Noise, for details if you missed it).

Set the blending mode on our new layer to Screen. We also want to add a new Adjustment Layer (Layers > New Adjustment Layer > Levels) so that we can control the intensity of the light noise.

Now let’s create a subtle offset by nudging the light layer away from the dark layer (1px up and 1px left) using the Move Tool (V) and your keyboard.

Next, add a layer mask over your Light Noise layer so we can play with it.

Using a roughly textured brush (set to about 130px and the color Black) we want to essentially mask off a bit of our light noise by painting away from the Layer Mask. One brush stroke should do the trick, but use your own judgment. The idea here is to create a rough, random pattern.

Set the Opacity of the layer down to around 45%. You can do less or more according to your own preferences… we’re just trying to drop the intensity of the contrast back a little bit though.

Now we have a nice pattern with a bit of depth to it. If you’re not digging the depth though, you can easily tinker with this by flipping the light noise layer horizontally to remove the offset and create a simple “sparkle” effect.

Alacadabra! Not bad huh? Here’s what the final texture would be:

Bonus Tip: If you notice any subtle “seams” when you go to use your new pattern, try cropping your original pattern down by 5 or 10px all around the edges. You’ll often get seams if Photoshop decides to clump up darker noise pixels around the edges of your Noise Layer, so simply cropping off the edges will result in a clean, seamless pattern.


Step 04: Adjusting The Shading and Hue (Green)

The next two steps are going to go quickly. By now we’ve set the main principles that we need to create just about any noise pattern that you can imagine – so we’re just going to show you what this texture can look like when you start playing with the Color and Intensity of the contrast. Let’s peek at the Green version…

Start with a copy of the Blue Noise layer group. Go ahead and change your Base Layer color to green.

You’ll notice a funny thing when shifting colors around… the contrast coming from the noise tends to shift from subtle to dramatic with different colors. This essentially means that we’ll want to adjust the opacity of the noise layers to account for the shifting intensity. There isn’t a hard-set rule for this – just play around with the opacity settings until you have the look you’re going for.

Finally, here’s the finished noise pattern:

I’ll mention it once again to be safe – if you notice any seams on your pattern when you go to use in on a larger shape or on your website, what you’ll need to do is crop in about 10px all around your shape to remove the “edge” pixels which can be darker when Photoshop adds them in during the very first “Filter > Add Noise” step.


Step 05: Adding Additional Vibrancy (Dual Hued Orange)

Alright – so I’ve got just one last trick up my sleeve for this tutorial. Up until now, we’ve only been adjusting the Base Layer when we wanted a new color. This is all fine and well when we want a basic noise pattern… but what if we want something with a little extra life to it?

Well, this last step if for you guys who want just that – a dual hued noise layer that has a bit of a “spark” to it.

Go ahead and start it up by changing our background color. Adjust your noise level opacity as you please (I didn’t mess with it at all for this particular demo).

Here’s where we throw the curve ball in – add a new Adjustment Layer (Layers > New Adjustment Layer > Hue/Saturation) and make it a clipping mask over the “light noise” layer. Now just tinker with the settings until you get a nice golden color coming from the light noise layer.

The final effect is here:

It’s subtle, but the light “glow” coming from that top noise layer is going to add some great life to any projects that you use it in. Enjoy it and create your own variations!


Conclusion

Alright! So I hope you’ve gotten a little something out of this second session. By now you should have a good understanding of noise patterns and how to use them in your own projects. You can save all of the files that we created here as .GIF, .PNG or .JPG files and use them instantly on the web too… but we’ve really only just begun.

In the next level of this series we’ll be showing you how to create some advanced textural patterns, shape based patterns, transparent patterns, and even more in the future.

Create Your Own Sexy Background Patterns (Part 1: Pattern Basix)

Posted on Updated on

Reprinted from webdesign.tutsplus.com

Ever wondered how to create perfect, seamless background patterns that work on Photoshop and on the web? Look no further because today we’re going to break it down for you – step by step. You’ll be creating your own background patterns in no time!


Introduction

Heya everyone! Today I have the pleasure of starting a screencast series I’ve been wanting to do for a while now: How to create web patterns that work in both Photoshop and on the web. We’re going to do this as a series, starting with the most basic patterns and moving up to some of the most advanced background patterns that we can find, including complex textures.

Our objective is simple: To teach anyone how to create background patterns that are intended for the web (but that can also be used easily during the design process). We’re going to be “program agnostic”, meaning that most of the tips will work in both Photoshop and Fireworks.


Web Patterns

Let’s be clear: The ideas behind creating background patterns are all pretty simple – most patterns take just a couple steps and can result in remarkably effective textures. In fact, the worst patterns for the web are usually those that “try too hard” by attempting to fit too much inside of each tile.

Why is that bad? Because background patterns (in most cases) should be subtle and nonabrasive. Harsh textures distract a user’s attention away from the real star on any web design: the content.

So why use textures at all? Because, user properly, background patterns give a site a sense of character and personality that can blow away flat colors. Patterns and textures give content depth and separation, help develop hierarchy, and can give websites (which are flat by their nature) a sense of tactile feeling. They can make a site feel polished, refined, and professional – which helps to emphasize the content and make it memorable.

While the ideas behind creating patterns are simple… getting them to actually work perfectly can often be tricky. Rest assured though, this tutorial series is going to show you all the tricks you’ll ever need to create your own custom variations to use in your own projects. We’ll even hand out some freebies along the way!


Today’s Patterns

Today is just day one in our series – so we’re going to be starting with some uber-simple patterns just to get our brains moving. We’ll start with a simple grid, move to a crosshatch pattern, show how to create a scaling diagonal pattern, and then we’ll get a little bit funky by showing you how to add some subtle color and texture.

Ready? Let’s do this!


The Video Tutorial

The video portion of this tutorial will help smooth out any steps that you don’t quite follow in the written version (below). Plus, sometimes it’s also just nice to see how someone else works, so enjoy!


The Written Tutorial

Because some of these patterns are going to be difficult to see on a web-resolution screencast, I’m also providing a step by step written tutorial. You can watch the video or the written version (or both!), it’s pretty much up to you which way you learn best. Let’s dive in…


Step 01: Create a Basic Grid Pattern

The basic grid pattern is about as simple as it gets, so it’s a fantastic starting point. Let’s begin by opening up a document that’s 7px by 7px.

Why this size? Because we’re going to create a grid pattern with a 1px line running down the center… and we will want to have an equal amount of space on each side of the grid. This isn’t mandatory for this particular pattern (so long as the grid is a perfect square, it’ll still repeat seamlessly), but it’s a habit that we’ll want to have when we move onto the more advanced patterns later on.

The steps are simple:

  • Open up the document (7px by 7px).
  • Draw a 1px line down the center vertically (hold Shift for it to be straight).
  • Apply your preferred color (we used #F3F3F3 for the demo).
  • Draw another 1px line down the center – horizontally this time.
  • At 800% zoom, grab the Convert Point tool and fix the points so that the line only occupies one pixel of space. This last step is the most important as it will get us the crisp, sharp grid lines that we’re looking for.

Here are the screenshots:

Once you have your pattern exactly where you want it, we want to save it as a pattern. To do that, select from the top menu in Photoshop “Edit > Define Pattern“. This will automatically save your document as a pattern that can be used inside of the “Layer Styles > Pattern Overlay” library.

Now that we have the basics done, you can tinker with this a lot. We used a 7px document, but if you wanted a tighter grid, you could go down to 5px or 3px. Alternatively, if you wanted a more wide open grid, you could use a larger document size. The line width, spacing, and colors are all up to you.

Tip: Color that might look subtle (low contrast) on the pattern document may look way too intense when you use them as an actual pattern in another larger document. The trick here is to:

  1. Use a lot of trial and error – Save your pattern (Define Pattern) and then try it out immediately in a larger document to test for it’s overall appearance.
  2. When in doubt, use the most subtle color combinations that you possibly can. Less is definitely more in this case, as you don’t want your pattern to distract from the content. Remember, even very subtle patterns can have dramatic effects.

Step 02: The Classic Crosshatch

For this second pattern, we’re essentially just going to be rotating our lines by 45 degrees. Remember that spacing is crucial though – so we’re going to have to use a little critical thinking to get the pattern to repeat:

Open a new document at 8px by 8px this time. Why 8px and not 7px like we did before? Because we want our lines to exactly meet each corner and if we use and if we use 7px, the lines won’t quite work.

  • Open a new document at 8px by 8px.
  • Zoom in using the Navigator panel to 800% or greater.
  • Draw two diagonal lines, each matching the opposing corners. Tip: Hold the Shift Key and drawn diagonally for a perfect 45 degree angle.

Here’s the screenshots:

Pay special attention on that last screenshot, as it illustrates how you can really change the entire feel of the grid by spacing it out or cropping down on it. A tight crosshatch pattern can make a great texture just as well as a big juicy pattern. Play with the spacing and line width until you’re happy with the results.


Step 03: Diagonal Lines… Scaled

This next pattern is pretty easy as it essentially just uses the crosshatch pattern ideas (using just one line instead of two of course!). Simple diagonal line patterns are a great way to add subtle texture behind text (such as headlines) because it adds character without making the text unreadable.

For the diagonal line, go ahead and start with out crosshatch document – but this time, remove one of the lines before you save your pattern (Edit > Define Pattern). The document size in this case is going to be crucial, as it directly correlates to how tightly knit the lines will be.

The screenshots:

The second image shows how, by adjusting the spacing of the document and the line weight and direction, you can get a really wide range of patterns. Not too tricky huh?

Tip: For the purists out there, you can get a much cleaner, sharper line by going through your line – pixel by pixel – and removing any of the “feathering” that we saw from Photoshop’s rendering. This happens essentially because Photoshop is drawing an anti-aliased line where we ideally want a pixelated line. The pixels are so small though that, in most cases, it doesn’t matter either way. Here’s just a screenshot of the super-sharp version just in case you want to see it.


Step 04: Adding Color and Texture

Alright, so we’ve got the basics down! Now let’s add just a bit more personality using two more quick techniques: Adding color and texture.

The color part is probably pretty easy if you haven’t figured it out yet. Just add color to your background and lines until you have the desired effect. My tips: Keep the contrast low – there’s nothing more obnoxious than an overly vibrant pattern.

The texture part is a wee-bit trickier. Texture has always been a notoriously difficult thing to master on the web. Why? Because in most cases, the texture repeats… and most people can spot it a mile away. Even high resolution textures will repeat and show off the tile separations unless you use images that are huge (such as 1920 x 1080)… which isn’t always a practical solution.

The trick with textural patterns?

  • Keep your tile big enough that people won’t be able to easily see the repetition. (Use your own judgement here – obviously a tile size that’s 1200 x 1200 isn’t really a “tile”)
  • Keep your textures subtle and low-contrast so that the textural spots don’t jump out at people.

In later parts of this tutorial series we’re going to examine how to create some advanced textures… but to round up today, let’s look at a very simple pattern with a bit of grunge to it. The steps:

  • Open up a new document (99 x 99px is about what we used… but play around with it based on your own grid sizing).
  • Draw a rectangle over the entire document.
  • Apply your basic Crosshatch pattern (using any color combo you wish).
  • Using a lightly textured brush on a blank layer (set to the same color as your pattern’s background), very lightly (click once) paint a small brush stroke over the crosshatch.
  • Adjust the position and opacity until you get the desired effect.

And the screenshots:

And last but not least, let’s take one last look at the four textures we just created:


Additional Tips (and Using These on the Web)

Bonus Tip 01: When saving your pattern (Edit > Define Pattern), remember to hide the background layer if you want to create a transparent pattern. Sometimes you’ll actually want to save the background color, but other times it can be really handy to be able to overlay a pattern onto another color without needing to go back to the original file and make changes. Obviously, using White or Black as the pattern color is your best bet in terms of extending the usability of these transparent patterns.

Bonus Tip 02: We’ve gone over how to turn these patterns into “Patterns” that can be used by Photoshop (or Fireworks), but how do we use them on the web? Easy actually – just same them as .GIF, .PNG, or .JPG files (I recommend PNG for transparent patterns). Then just add them to your web folder and use them as the background images via CSS! Remember to set the “repeat” value if you want them to tile themselves across the entire page.


Conclusion

Alright! So I hope you’ve gotten a little something out of this first session. By now you should have a good understanding of the theoretical concepts behind how patterns work – and a technical understanding of how to create and use them in Photoshop. You can save all of the files that we created here as .GIF, .PNG or .JPG files and use them instantly on the web too… but we’ve really only just begun.

In the next level of this series we’ll be showing you how to create some “noisy” background patterns that make you swear that you could touch ‘em. We’ll also be touching on how to create advanced textural patterns, spae based patterns, transparent patterns, and more in the future.

4 Ways to Create Long Shadow Effects in Photoshop

Posted on

Reprinted from psd.tutsplus.com

Final Product What You’ll Be Creating

Part of the recent, “flat design” trend, long shadow effects are a popular but not necessarily new phenomenon. The trend’s strongest impact seems to be on interface design elements and icons but it is being increasingly used as part of web designs, as well. In this tutorial, we will show you 4 ways that you can create long shadow effects in Photoshop using several different tools. Let’s take a look!

 


Tutorial Assets

You will need the following assets to complete this tutorial. Please download them before you begin, or find alternatives.


Characteristics of Long Shadow Effects

There are 2 main characteristics of long shadow effects.

  1. Each object of the design must have a flat, 2-dimensional shadow that extends for at least 2.5 times the diagonal of the object, which makes the shadow very long, this adds emphasis and drama to the design.
  2. The shadow should be cast at a 45 degree angle, preferably towards the right.

The shadow color can vary in its darkness compared to the background color, and in some cases, fade out into a transparent fill. There are many tweaks that can be added to the effect, and it’s all up to you to decide what final result you’re going for.


1. Prepare Your Artwork

Step 1

Create a new 750 x 750 px document, and fill the Background with the color #cf3f30.

Step 2

Set the Foreground color to #e74c3c, Pick the Rounded Rectangle Tool, choose the Shape option in theOptions bar, and set the Radius to 10.

Press and hold the SHIFT key, then click and drag to create a 450 x 450 px rounded rectangle.

Step 3

Create the text in White. In this tutorial, two different fonts are used, but you can use whatever text and fonts you like.

Step 4

As for the first line of text, the font used is Bebas, and the font Size is 100pt. While the second line is created using the font Pacifico, the font Size 100, and the Leading value is set to 100 as well.

Keep in mind that the Flat Design in general uses simple, bold and crisp fonts.

Step 5

Select the three layers you have so far, pick the Move Tool, and click the Align horizontal centers icon in the Options bar to make sure all the elements are properly centered in the document.


2. Create a Long Shadow Background Using Shape Layers

Step 1

Set the Foreground color to Black and pick the Rectangle Tool. SHIFT + click and drag to create a rectangle that covers pretty much the whole background. The new shape layer should be placed right on top of the Background layer.

Step 2

Go to Edit > Free Transform (CTRL/CMD + T) to enter the Free Transform Mode. Then, press and hold the SHIFT key and rotate the black rectangle -45° (counterclockwise).

Step 3

Now click and drag the sides of the black rectangle until they reach the corners of the red rectangle.

Step 4

Click and drag the left part of the rectangle until it reaches the center of the red rectangle (diagonally). When you’re done, hit ENTER/RETURN to accept the changes.

Step 5

Change the black rectangle layer’s Fill value to 0.

Step 6

Double click the black rectangle’s layer to apply a Gradient Overlay effect. Start by choosing a Black to Transparent gradient. Then, change the Angle to -45, and the Opacity to a value you like, depending on how subtle or intense you want the shadow to be. The value used here is a quite subtle one, which is 15%.

Step 7

This is the most basic way of creating a long shadow for simple shapes.


3. Create Long Shadows Using the Pen Tool

The Pen Tool is a complicated way to create a long shadow effect. While is might be more complicated than other techniques mentioned in this tutorial, the great thing about this technique is that it gives you a lot of control over the look of the effect.

Step 1

Create a new layer between the text layer and the red rectangle layer, then pick the Pen Tool (with theShape option selected in the Options bar).

Step 2

Before you start adding the anchor points, you need to add a guide to add all the points on the same level. To do so, go to View > Rulers (if you don’t have the option checked already), then click the ruler at the top and drag a guide and place it on the upper edges of the letters.

This works only for the first line of text because the letters have the same height. But for the second line, the points will be added without the need for a guide.

Step 3

Click once to add points at each top corner of the letters, and in between them, starting from the top left corner of the first letter.

Step 4

When you reach the top right corner of the last letter, move the Pen Tool parallel to the red rectangle shadow, and extend it so that it covers the red rectangle bottom right corner and add a point there. Then, continue the shape passing the first letter’s bottom left corner, and close the shape by going back to the very first anchor point you added.

Step 5

Pick the Direct Selection Tool, then, SHIFT + click the anchor points you added between the letters.

Step 6

Pick the Move Tool, then press the keyboard’s Down Arrow key to move the selected points downwards.

Then, press the Right Arrow key to move the points to the right, until the resulting lines become parallel to the original shadow edges. (Which you can fix using the Direct Selection Tool as well if needed).

Step 7

You might need to modify some individual points after that, to remove some empty areas, or adjust the angle they create. To do so, simply use the Direct Selection Tool to select the point, then move it as needed.

Step 8

Just make sure that all the shadow lines look parallel as much as possible. You can create a line using theLine Tool, rotate it in the Angle of the shadow you want to create, then move it on the corner of each letter to see where you actually need to place the anchor points.

This is a time consuming method, but as mentioned, it gives you more control over the final outcome. So you need to take your time creating and perfecting it.

Step 9

Once you have the shape ready, apply the same Gradient Overlay effect used for the red rectangle shadow (Step 2.6).

Step 10

To remove the extra part of the shadow extending outside the red rectangle, right click the text shadow layer, then click Create Clipping Mask.

Tip: To create the second line’s shadow, pick the Pen Tool once again, and choose theCombine Shapes icon in the Options bar to add this shadow to the previous one.

If you are using the CS6 version, you can create the new shadow in a separate layer, then select both text shadow layers, and merge them by going to Layer > Merge Layers, which is what I’ll be doing in this tutorial, as it better illustrates the process of creating the shadow for the text with different letters height.

If you create the two shadows in two separate layers, you can still get a nice different version of the Long Shadow effect, and it will look like the version explained in Step 4.8.

Step 11

Now for the text with different height letters, you’ll need to create the shadow right away. If you want the shadows to be combined, you’ll need to add anchor points only where the two shadows don’t overlap. But for this tutorial, the complete process will be explained in case you want to create the shadows separately.

And since the second line of text’s font is a cursive/round font, you’ll need only one anchor point at the very top of each letter, and an anchor point in between every two letters.

The important thing once again, is to make sure that the lines are parallel to the original shadow edges.

This involves more detailing where the shadows don’t overlap, like the bottom left part of the letter S. So you basically can’t connect the end point to the start point directly. Instead, you need to separate them in a way that still follows the original direction of the shadow.

This might sound more complicated than it actually is, but having the original shadow as a reference will make things much more easier.

Step 12

Pick the Add Anchor Point Tool, and click to add points where there are empty areas that should be filled with shadow, then move those points to cover those areas. The top left part of both the S and l letters are adjusted here.

Step 13

If you created the shadow in a separate layer, apply the Gradient Overlay effect, and clip it to the other shadow layer (by creating a Clipping Mask).

Step 14

That’s it for the first method. It needs a lot of precision and paying extra attention to the many details, but it is the non-3D way to control the angle of the shadow in a shape layer.

Tip: A cool variation of the Long Shadow effect is a version where the shadow fades out instead of the solid color version.

To achieve that, you simply need to play around with the Scale value of the Gradient Overlayeffect. Here, it is set to 30%

So you can see how the shadow fades out to a transparent fill.

You can also move the shadow around until you like how it looks.

The Opacity and Scale values are the values that control the shadow’s appearance. You can also use aColor Overlay effect instead of a Gradient Overlay if you don’t want the shadow to fade at all.


4. Create Long Shadows Using Duplicate and Nudge

This is a super easy way to get a perfect 45° long shadow effect.

Step 1

Start by duplicating the text layer you have, then drag the copy under the original text layer.

Step 2

Change the copy text layer’s font color to Black.

Step 3

Go to Edit > Free Transform, then use the Down Arrow key and the Right Arrow key to nudge the copy text layer one pixel down and one to the right. Hit ENTER/RETURN to accept the changes.

Step 4

Now press the CMD/CTRL + ALT + SHIFT + T to duplicate the layer with its transformation. You’ll need to repeat that until the shadow covers the bottom right end of the red rectangle.

Step 5

Select all the copy layers, and go to Layer > Merge Layers.

Step 6

Apply the Gradient Overlay effect you like (Step 2.6).

Step 7

Right click the merged layer and choose Create Clipping Mask. And there you have it!

Step 8

You can use the same method to create separate shadows for each text, and they will overlay nicely creating a cool variation of the effect.

To do that, create each line of text in a separate text layer. Then select both text layers, duplicate them once, move the copy layers below the original ones, and change their font color to Black.

Step 9

Select the first line’s copy text layer, enter the Free Transform Mode (CTRL/CMD + T), then move it 1px downwards and 1px to the right, and hit the ENTER/RETURN key to accept the changes.

Step 10

Press the CMD/CTRL + ALT + SHIFT + T keys to duplicate the layer and the transformation until the shadow covers the bottom right end of the red rectangle. Then select all the copy layers and merge them (Layer > Merge Layers).

Step 11

Repeat that for the second line’s copy text layer.

Step 12

Apply the same Gradient Overlay effect, and create a clipping mask for each shadow layer.

Step 13

You can also make the shadow fade out as explained in the Quick Tip at the end of Step 3.


5. Create Long Shadow Effects Using Photoshop’s 3D Tools

This is the fastest and most efficient way, since it is both simple, and fully editable.

Step 1

Select the text layer then go to 3D > New 3D Extrusion from Selected Layer. This will convert the text layer to a 3D layer.

Step 2

To edit the settings you need to open two panels: The 3D panel, and the Properties panel (both under theWindow menu). The 3D panel has all the elements of the 3D Scene, while the Properties panel displays the Settings of the selected element in the 3D panel.

Start by selecting the Current View tab in the 3D panel, then choose Top from the View drop down menu in the Properties panel.

Step 3

Select the text mesh name, click the Coordinates icon at the top of the Properties panel, and change the X Rotation Angle to 90° so that the text faces upwards as well.

Step 4

Click the Mesh icon at the top of the Properties panel, then change the Extrusion Depth to a quite big value, and the one used here is 300.

The idea is to create a really long extrusion, which will create a long shadow when the light hits it from a certain angle. So depending on the text and the light angle, you might need to use a different Extrusion Depth value. But usually you can start with a value around 200 or 300.

An important thing to keep in mind though, is to go to 3D > Snap Object to Ground Plane after each time you change the Extrusion Depth value. Otherwise, the object will extend inside the Ground Plane and you will not notice that big of a difference.

Step 5

If you need to scale the text up or down, do than by zooming in or out. To do so, select the Current Viewtab in the 3D panel, pick the Move Tool, and choose the Scale the 3D Object icon from the 3D Mode set to the right of the Options bar. Then click and drag anywhere in the scene. Drag down to zoom in, and up to zoom out.

Step 6

Once you like how the scene looks, click the Infinite Light 1 tab in the 3D panel. Then, you can go ahead and change its Y Rotation Angle to 45° in the Properties panel (after clicking the Coordinates icon at the top of the Properties panel).

Step 7

Or you can use the Move Tool to click and drag the light as you like in the scene. You can see how the shadow looks as you’re moving the light, so keep moving it around until you like how it looks.

Step 8

To get the exact color of the original text, which is White, you’ll need to adjust the Front Inflation Materialsettings. So change the Specular color to White, and both the Illumination and Ambient colors to Black. Then change the Shine value to 0.

After you do that, it is a good idea to go to 3D > Render to see how everything looks. You might need to change some of those values depending on the text color and the light angle. For example, if the text color is a bit dark, you might need to change the Shine value to 100%.

Step 9

When you’re done with the Front Inflation Material settings, click the Environment tab in the 3D panel, and scroll down the Properties panel until you see the Ground Plane section. Change the Shadows Opacityvalue to a value you like. Here, it is set to 14.

Step 10

Go to 3D > Render, to render the final scene.

Step 11

You can’t create a Clipping Mask for a 3D layer. So we’re going to convert it to a Smart Object by going toFilter > Convert for Smart Filters.

Step 12

Then right click the Smart Object layer and choose Create Clipping Mask.

Step 13

If you need to edit the 3D layer, you need to double click the Smart Object layer’s thumbnail.

Step 14

This will open a new file that has the original 3D layer. You can then click the 3D mesh name in the 3Dpanel, then click the Edit Source button down the Properties panel.

Step 15

This will open yet another file, and the new file contains the text layer. You can make any changes you want there, such as changing the text, the font, the size, etc. The color, however, must be changed it in the 3D scene as you’ll see next.

When you’re done, save the file (File > Save), then close it (File > Close).

Step 16

That will take you back to the 3D file, and it will be updated with the changes you’ve just made.

If you want to change the color, use the Diffuse color box to do so, and then you might need to adjust theShine value.

When you’re done, render the file once again, then save the file and close it.

Step 17

The Smart Object will be updated in the original file now.


Congratulations! You’re done.

In this tutorial, we explained several methods that you can use to create long shadow effects in Photoshop. The first method showed how to create a background shadow using shape layers, then we showed you how to use the pen tool to create a long shadow for text, after that, we showed you how to use the duplicate and nudge technique, finally, we showed you how to use Photoshop’s 3D tools to quickly create a long shadow effect for your artwork. We hope that you learned something in this tutorial and can use these tips to help create your own long shadow designs.