How to replicate an “aged tapestry” fill effect?

I am using adobe illustrator and trying to capture a certain aged aesthetic in the fill of my svg shapes. Here is my inspiration below from an old tapestry. I’m only interested in the background, so we can ignore the floral pattern:

enter image description here

The closest I got to that background was by drawing a square, then:

select square >> swatches >> swatch libraries menu >> gradients >> metals

From here I was able to use the eye dropper to replicate the color palette well enough, but I seemed to have lost the “aged” component of the fill:

enter image description here


I take the point that my needs are vast, because svg is working in crisp vector space and yet I want an aged tapestry fill like the inspiration. To keep things realistic, I am not looking to replicate at the pixel level, as Joonas pointed out, the SVG would be too complicated. But I still can’t help but wonder, is there a way to achieve a convincing aged fill without coming across as overtly modern in terms of aesthetics? I’m trying to find a happy medium between the inspiration and my pure gradient; hopefully this kind of compromise would be palatable to the SVG format.


Your version is quite a clean gradient. Add some irregularity. Put on it another shape which has a non-repeating noisy pattern. Use a blending mode, for ex. Hard light to cause modulation and reduce the opacity to keep the effect subtle.

An example:

enter image description here

On top the grey pattern is my irregular shape. It’s solid grey with noise effect in Inkscape. The lower image is the same pattern placed on a gradient (not as complex as yours) with reduced opacity. The blending mode is hard light. Subtle effect works as well with normal blending.

Trying this in Illustrator needs an imported pattern, because there’s no easy way to generate a random pattern except by drawing it or by having some lucky accidents.

Illustrator users often have also Photoshop, which have plenty of tools to generate random looking patterns and you can always take a texture photo which you edit to the wanted shape in PS.

enter image description here

Here PS filter Render > Fibers is used to generate a pattern. The used colors are dark and light greys. The image has only about 200px width and height. Low resolution is handled fast later in Illustrator.

The next step is to copy and paste the image to Illustrator and vectorize it with Live Trace to greyshades. The number of colors must be high enough to get fine enough vector pattern. For the same reason have a low minimum shape area. See the settings dialog:

enter image description here

Vectorizing is not a must if you can accept raster images mixed with vectors. Someone can avoid it only to keep his vectors clean, but raster images will also cause harm if you want to scale up say 1000%. Raster image has an advantage: It does not slow down Illustrator like a 10000 path vector pattern

In the next image a gradient is made and the vectorized pattern is placed on it:

enter image description here

The blending mode is overlay and the opacity is reduced for subtle effect.

Check all available blending modes with different opacities because they all work differently!

Source : Link , Question Author : Arash Howaida , Answer Author : user287001

Leave a Comment