The techniques

For all of the techniques we’ll use the same simple, illustrative object — an orange — so you can see the different results in comparison. An orange works particularly well because it has a great shape and material texture. OK, ready to learn the four techniques?

1. Illustrator & Grain Effects

The first technique uses Illustrator and the pre-built Photoshop raster effects. This technique applies a noisy/grainy style to the object. Follow the steps below in Illustrator:

Steps for Technique 1

Create the solid shape(s) you wish to add tints and highlights to (in our case, the orange). Lock the layer. Add two layers above the first. Label one Multiply and the other Overlay. In the Multiply layer create an ellipse (circle) the same size as the orange with a linear gradient fill. The gradient fill should go from white (#ffffff) to black (#000000). Also adjust the gradient angle as you wish. In our case the light source is coming from the top left, so our shade should be opposite of the light in the bottom right of the object. For this example the angle of the gradient is -60º. Finally change the white in the gradient to 0% opacity. With the gradient object selected go to Effect > Texture > Grain. You should then see a modal with texture settings. On the right of the modal, select Stippled for Grain Type. Then adjust Intensity and Contrast to achieve the texture effect you’re looking for. Select OK. With the layer still selected, change the Blending mode to Multiply or Color Burn and drop the Transparency down to 10–15%. Align your Multiply object over the solid shape (the orange in our example). Once you’re satisfied with the results lock the Multiply layer. In the Overlay layer create an ellipse with a linear gradient that goes from white to black and adjust the angle so the white color is closest to the light source. Change the opacity of the black to 0%. Repeat steps 4 and 5. With the object still selected, change the Blending mode to Overlay and drop the Transparency to 15–20%. Align the Overlay layer over your object and that’s it. Salt and Pepper!

Download Sample File

Technique #1 Notes:

You can get different grain effects by selecting various Grain Types from the Effects > Grain dropdown menu.

from the dropdown menu. Take the time to experiment. Other options like Effects > Sketch > Reticulation can work as well, and you can get some really great results by stacking the effects.

can work as well, and you can get some really great results by stacking the effects. This technique also works with Mesh Gradients instead of Linear Gradients.

2. Illustrator & Raster Bitmap Masks

The second technique uses raster Bitmap images to create the textures. This technique can be a bit hefty on your processor. If you have a slow machine I would avoid this technique or use it sparingly.

Steps for Technique 2

In Illustrator create the solid shape(s) you wish to add tints and highlights to (in our case, the orange). Lock the layer. Add two layers above the first. Label one Multiply and the other Overlay. On the Multiply layer place a bitmap image in the position where you’d like to add shade to your object. You can view a sample bitmap image in the downloadable sample file below. Change the fill color of the bitmap image to black(#000000). Then create an Ellipse (circle) the same size as the orange with no fill or stroke. Select both the Ellipse and the bitmap image, then select Object > Clipping Mask > Create. Finally align the masked bitmap image directly over the orange below it. With the masked bitmap image selected, in the Transparency panel change the Blending mode to Multiply or Color Burn and drop the Transparency value to 10–20%. Next select the Overlay layer and place the bitmap image where you’d like to add a tint or highlight to your object. Then change the fill color of the bitmap texture to white(#ffffff). Repeat step 5. With the masked bitmap image selected, in the Transparency panel change the Blending mode to Overlay and drop the Transparency value to 10–20%. Voilà, Salt & Pepper success!

Download Sample File

Technique #2 Notes:

In order to alter the fill color in Illustrator, the raster texture must be in a Bitmap format.

You can also use gradient color fills with this technique.

3. Power Textures with Illustrator & Photoshop

If you‘re wanting a unique paint brush effect with realistic strokes and/or realistic textures, this technique is for you.

Steps for Technique 3

Open up Photoshop and create a new file the same size as your Illustrator Artboard. Also open the vector design in Illustrator. In our example, it’s the orange. In Illustrator select the entire orange object and select Edit > Copy. Next open up Photoshop and select Edit > Paste. Then you should be prompted with Paste As options—be sure to select Smart Object. In the layer panel create two layers above the smart object layer. Label one layer Multiply and the other Overlay. Next change the blending modes of the Multiply layer to Multiply and Overlay for the Overlay layer. In the layers panel select all three layers and then select the folder icon in the bottom of the panel. This will place all three layers into a group. Next select the smart object layer only, then use the Magic Wand Tool to select the entire orange object. If done correctly you will see animated dashed lines outlining the orange. In the layers panel select the folder or group. Then select the Add Layer Mask in the bottom of the layers panel (the icon is a rectangle with a circle void). This will mask the entire group (all three layers). Next select the Brush Tool, then select a texture brush of your choice from the bush presets panel. Also make sure you have a black (#000000) fill for your foreground color in the toolbar. In the layers panel select the Multiply layer and start brushing in the shade area on the bottom right of the orange. You can avoid adding too much texture but lowering the opacity of the brush. Next select a white (#ffffff) fill for your foreground color in the toolbar. Then select the Overlay layer in the layers panel and start brushing in the tint area on the upper left of the orange. You can avoid adding too much texture by lowering the opacity of the brush. Finally take a look at your overall composition. If the textures appear too drastic, you may need to lower the transparency of the Multiply and/or Overlay layers. That’s it, you’re done!

Download Sample File

Technique #3 Notes:

If you’re wanting to increase saturation and add shade to your smart object(s), you might want to use the Color Burn blending mode rather than the Multiply blending mode which just adds shade.

You can really get some great effects by using multiple brushes—especially if you’re using a pressure-sensitive graphics tablet.

A great resource for simulating realistic brushes in Photoshop is Kylebrush.com.

4. SVG Textures

This technique uses light code to create textured illustrations for the browser. The reason I added this is because of how low the file size is. You might have a unique challenge where you want to use a scalable illustration—let’s say for a responsive site—and desire subtle textures.

Steps for Technique 4

Follow the same steps as the first technique except when it comes to applying the Effect > Grain (step #4). Instead, use Effect > SVG Filter > AI_Static, then follow the remaining steps (#5–12) from Technique 1.

Download Sample File

Technique #4 Notes: