Web Designer Wall
Design

Vector Polishing Techniques: Add Depth, Light and Grain

By Aigars Silkalns Updated 13 min read

Finished mountain scene with grain applied over the whole image

Flat vector art looks clean but often reads as lifeless. The fix is a short, repeatable pass of five moves: add coloured light, separate depth layers, place highlights, add a little grain, and keep every step editable. This guide shows that pass on one illustration, in the order that gives the best result. It maps each step onto Illustrator, Photoshop and plain SVG/CSS, so you can use whichever tool you already have.

The original version of this tutorial used nine Photoshop tricks: lens flare, dissolve dust, polar-coordinate rainbows, particle brushes and so on. The goal has not changed, but the method has. This version drops two of the old techniques on purpose: the Dissolve dust effect, because it bakes in a crunchy look that grain and soft gradients now do better, and the vintage erase look, which is covered by the grain step. The rainbow has its own short section near the end. Today you can do most of it non-destructively, in the vector file or in smart layers, and you can ship the same effects on the web without exporting a single bitmap.

Why flat vector art needs polish

A vector shape has perfectly even colour and perfectly sharp edges. Real surfaces do not: light falls off, distant objects soften, and every photo or print carries some noise. Our eyes read the absence of those cues as “flat”. Sometimes flat is exactly the look you want, and a clean, geometric style is a legitimate choice. If you want more atmosphere, add the cues deliberately, one at a time, and stop when the image has enough.

The scene below is the test piece for everything in this article: a sun, three mountain ridges and a sky, all plain filled paths. On the right is the same artwork after the five steps.

Flat vector mountain scene on the left and the same scene with glow, haze, highlights and grain on the right
Left: flat fills only. Right: the same shapes after the five polishing steps.

The five steps at a glance

Step What it adds Blend or effect
1. Coloured light Mood, colour variation Gradients with Screen or Overlay
2. Depth Distance, focus Gaussian blur and haze
3. Highlights Focal points, contrast Color Dodge or Screen
4. Particles Scale, energy Small shapes with Screen
5. Grain Texture, print feel Noise with Overlay

Each step below gives the Illustrator route, the Photoshop route and the SVG/CSS route.

Step 1: Paint coloured light, not grey shadow

The quickest way to add life is to put glows of colour over a plain background. Pick two or three hues that are neighbours or complements, keep one dominant, and let them overlap.

Mountain scene with warm, cyan and violet glows added to the sky
Step 1: a warm glow behind the sun, cyan on the left, violet at the top, all blended with Screen.

In Illustrator

Use a freeform gradient for the sky. In the Gradient panel, choose Freeform Gradient as the type, then pick Points to drop independent colour stops anywhere on the shape, or Lines to draw colour along a path for smoother blends. Lines suits continuous colour blends along a path, while Points suits scattered colour spots; check the Spread option in the Gradient panel, which controls how far each colour reaches and may be limited in Lines mode (see Adobe’s freeform gradient help). If you prefer separate glows you can still edit later, draw ellipses with radial gradients that fade to 0% opacity and set their blend mode to Screen in the Transparency panel.

In Photoshop

Create a new layer per glow, paint a soft radial gradient from a colour to transparent, and set the layer blend mode to Screen (or Overlay for a subtler tint). This replaces the old “Dissolve” dust method: Dissolve scatters pixels randomly, which produces a crunchy, dated look. A soft gradient plus a clean grain pass (step 5) gives you control over both separately.

In SVG and CSS

<defs>
  <radialGradient id="glow">
    <stop offset="0" stop-color="#ffd27a" stop-opacity=".95"/>
    <stop offset=".45" stop-color="#ff6fa5" stop-opacity=".45"/>
    <stop offset="1" stop-color="#ff6fa5" stop-opacity="0"/>
  </radialGradient>
</defs>

<g style="mix-blend-mode: screen">
  <ellipse cx="820" cy="360" rx="520" ry="360" fill="url(#glow)"/>
</g>

The blend is one declaration, mix-blend-mode: screen, and the same property takes color-dodge and overlay. mix-blend-mode is widely supported in current browsers, including on SVG groups. Put isolation: isolate on the SVG (or its wrapper) so the blend modes only mix with the artwork and not with whatever sits behind it on the page. For a CSS-only take on the same idea, see How to Create Spotify Colorizer Effects With CSS Blend Modes.

Step 2: Build depth with blur and haze

Distant objects are softer, lighter and closer to the colour of the sky. Apply all three to your back layers: blur the furthest ridge, shift its colour toward the sky, and lay a soft gradient of the sky colour over the base of the distance.

Mountain scene with the far ridge blurred, a pink haze gradient and small stars
Step 2: the far ridge is blurred and hazy, the near ridges stay crisp, and a few soft stars fill the sky.

This is the same idea as the old “blurred and darkened” trick, with one change: keep the blur small. Three to five pixels on a 1200 pixel wide canvas is plenty, and scale it with the artwork size. In Photoshop, convert the layer to a Smart Object first so the Gaussian Blur lands as a Smart Filter you can edit or turn off later. In Illustrator, Effect > Blur > Gaussian Blur is a live effect on the object, but raster-based effects such as Gaussian Blur are rendered at the Document Raster Effects Settings resolution (Effect > Document Raster Effects Settings), so check that setting before you export.

In SVG the same two moves are an feGaussianBlur filter on the far ridge and a gradient rectangle that fades the sky colour in at the base. The complete, runnable file is at the end of this article.

<filter id="soft">
  <feGaussianBlur stdDeviation="5"/>
</filter>

<linearGradient id="haze" x1="0" y1="0" x2="0" y2="1">
  <stop offset="0" stop-color="#ff9ec0" stop-opacity="0"/>
  <stop offset="1" stop-color="#ff9ec0" stop-opacity=".55"/>
</linearGradient>

<g filter="url(#soft)" opacity=".85">
  <path d="M0 430 L170 330 L300 410 L470 290 L650 420 L820 340 L1000 430 L1200 350 L1200 675 L0 675Z" fill="#6a3a8a"/>
</g>
<rect y="330" width="1200" height="200" fill="url(#haze)"/>

Step 3: Place highlights where light would land

Highlights create focus. Decide where the light source is (here, the sun) and add a thin lit edge on the surfaces that face it. Colour Dodge brightens and saturates the colours underneath, which is why it looks richer than painting with white. Use it at low opacity, because it clips quickly.

Mountain scene with lit mountain faces, a sun flare line and soft light circles
Step 3: lit faces on the nearest peaks, a horizontal flare through the sun, and a few soft light circles.

In Photoshop, put the highlight on its own layer set to Color Dodge, pick the colour from the artwork, and paint at 5 to 10% brush opacity. Your original layers stay untouched. In Illustrator or SVG, draw the lit facets as shapes and set the blend mode to Color Dodge, then reduce opacity until it feels natural. A flare does not need a filter: a thin ellipse, a bright dot and some translucent circles set to Screen read as a lens flare and remain fully editable. Photoshop’s Lens Flare filter still exists, but it bakes pixels into a layer and cannot be recoloured, so it is the last resort.

<g style="mix-blend-mode: color-dodge" opacity=".55">
  <path d="M800 430 L980 510 L880 530Z" fill="#ff8a5c"/>
  <path d="M290 490 L460 400 L400 470Z" fill="#6a4cff"/>
</g>
<g style="mix-blend-mode: screen">
  <circle cx="820" cy="360" r="14" fill="#fff" opacity=".9"/>
  <ellipse cx="820" cy="360" rx="600" ry="3" fill="#fff" opacity=".35"/>
</g>

Step 4: Add a few particles, but keep them subordinate

Stars, dust and sparks add scale and movement. The old method was a scattering brush stroked along a path. In Photoshop the modern equivalent is still a round brush with Scattering, Shape Dynamics (size jitter) and Transfer (opacity jitter) switched on in the Brush Settings panel, painted on its own layer set to Screen. In Illustrator, the Scatter Brush or the Symbol Sprayer does the same job while staying vector. Keep the count low and avoid placing particles on your focal point, otherwise they compete with it.

In SVG you can write the particles by hand or generate them. A few dozen circles with varied radius and opacity, a handful of them blurred with the soft filter, are enough:

<g fill="#fff" style="mix-blend-mode: screen">
  <circle cx="93"  cy="17"  r="1" opacity=".3" filter="url(#soft)"/>
  <circle cx="190" cy="78"  r="2" opacity=".45"/>
  <circle cx="287" cy="139" r="3" opacity=".6"/>
  <circle cx="384" cy="200" r="1" opacity=".75"/>
</g>

To scatter many at once, this short script fills a group with random circles. Run it once and paste the result back into the file if you want a fixed layout:

const group = document.querySelector('#particles');
const ns = 'http://www.w3.org/2000/svg';
for (let i = 0; i < 40; i++) {
  const c = document.createElementNS(ns, 'circle');
  c.setAttribute('cx', Math.round(Math.random() * 1200));
  c.setAttribute('cy', Math.round(Math.random() * 260));   // upper sky only
  c.setAttribute('r', (1 + Math.random() * 2).toFixed(1));
  c.setAttribute('opacity', (0.3 + Math.random() * 0.5).toFixed(2));
  group.append(c);
}

Step 5: Finish with grain

Grain does two jobs. It hides banding in big smooth gradients, and it makes digital shapes feel printed. It is the last step because it should sit over everything, including the glows and the blur.

Finished mountain scene with grain applied over the whole image
Step 5: a full-frame noise layer set to Overlay at about 45% opacity ties the layers together.

In Photoshop

Convert the flattened artwork, or a stamped-visible layer, to a Smart Object and choose Filter > Noise > Add Noise. Gaussian distribution gives a speckled look, Uniform a gentler one, and Monochromatic keeps the grain neutral instead of adding colour speckles. Because the filter is a Smart Filter, you can change the amount later or lower its opacity.

In Illustrator

Illustrator can apply a raster Grain effect from its Effect Gallery texture filters (look under the Texture group; menu wording varies a little between versions). It is resolution dependent, so set Effect > Document Raster Effects Settings first, and apply it to a copy of the shape if you want to keep an untouched original.

In SVG

<filter id="grain" x="0" y="0" width="100%" height="100%">
  <feTurbulence type="fractalNoise" baseFrequency=".85"
                numOctaves="3" seed="7" stitchTiles="stitch"/>
  <feColorMatrix type="saturate" values="0"/>
</filter>

<rect width="1200" height="675" filter="url(#grain)"
      style="mix-blend-mode: overlay" opacity=".45"/>

The grain is generated by the browser, so it costs no image bytes, though a full-screen filter is more expensive to paint than a plain shape, so test it on a low-end phone before putting it on an animated hero. Fractal noise through feTurbulence is the same technique behind most “grainy gradient” backgrounds on the web.

Rainbow and spectrum effects in modern tools

The old tutorial made a rainbow by stretching a gradient through Filter > Distort > Polar Coordinates. That still works in Photoshop, but a spectrum is now easier to keep editable. In Illustrator, build it as a linear gradient with several stops and bend it with a Warp or Envelope Distort. On the web, a single CSS declaration draws it, and you can blend it over your artwork like any other layer:

.spectrum {
  background: conic-gradient(from 200deg at 50% 100%,
    #ff4d6d, #ffb347, #fff275, #5ee38b, #4db8ff, #9b5cff, #ff4d6d);
  mix-blend-mode: screen;
  opacity: .35;
  mask-image: radial-gradient(circle at 50% 100%, transparent 38%, #000 40%, #000 62%, transparent 64%);
}

Keep the opacity low; a faint spectrum reads as light refracting, a saturated one reads as a sticker.

Browser support

mix-blend-mode, feTurbulence and isolation are all widely supported in current evergreen browsers, and each MDN page carries the current Baseline status. Check it before relying on a newer property such as the mask in the spectrum example.

The complete SVG

This is the finished illustration from the images above, as one file you can save as polish.svg and open in a browser. Remove the groups from the bottom up to see each step undone.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 675" style="isolation:isolate">
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#2b2a6b"/><stop offset="1" stop-color="#e0507a"/></linearGradient>
<radialGradient id="glow"><stop offset="0" stop-color="#ffd27a" stop-opacity=".95"/><stop offset=".45" stop-color="#ff6fa5" stop-opacity=".45"/><stop offset="1" stop-color="#ff6fa5" stop-opacity="0"/></radialGradient>
<radialGradient id="cyan"><stop offset="0" stop-color="#3ee7ff" stop-opacity=".8"/><stop offset="1" stop-color="#3ee7ff" stop-opacity="0"/></radialGradient>
<radialGradient id="violet"><stop offset="0" stop-color="#9b5cff" stop-opacity=".85"/><stop offset="1" stop-color="#9b5cff" stop-opacity="0"/></radialGradient>
<linearGradient id="haze" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff9ec0" stop-opacity="0"/><stop offset="1" stop-color="#ff9ec0" stop-opacity=".55"/></linearGradient>
<linearGradient id="rim" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#ffb36b" stop-opacity="0"/><stop offset=".5" stop-color="#ffb36b" stop-opacity=".9"/><stop offset="1" stop-color="#ffb36b" stop-opacity="0"/></linearGradient>
<radialGradient id="sun"><stop offset="0" stop-color="#fffdf2"/><stop offset=".5" stop-color="#ffd98a"/><stop offset=".92" stop-color="#ff9a55"/><stop offset="1" stop-color="#ff7a5a"/></radialGradient>
<filter id="soft" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="5"/>
</filter>
<filter id="grain" x="0" y="0" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency=".85" numOctaves="3" seed="7" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/>
</filter>
</defs>
<rect width="1200" height="675" fill="url(#sky)"/>
<g style="mix-blend-mode:screen">
<ellipse cx="820" cy="360" rx="520" ry="360" fill="url(#glow)"/>
<ellipse cx="180" cy="200" rx="360" ry="260" fill="url(#cyan)" opacity=".7"/>
<ellipse cx="560" cy="80" rx="420" ry="220" fill="url(#violet)"/>
</g>
<!-- the sun: a radial gradient from white-hot core to warm rim -->
<circle cx="820" cy="360" r="120" fill="url(#sun)"/>
<g filter="url(#soft)" opacity=".85">
<path d="M0 430 L170 330 L300 410 L470 290 L650 420 L820 340 L1000 430 L1200 350 L1200 675 L0 675Z" fill="#6a3a8a"/>
</g>
<rect y="330" width="1200" height="200" fill="url(#haze)"/>
<path d="M0 500 L140 420 L290 490 L460 400 L640 500 L800 430 L980 510 L1200 440 L1200 675 L0 675Z" fill="#3a2160"/>
<g style="mix-blend-mode:color-dodge" opacity=".55">
<path d="M460 400 L640 500 L560 520Z" fill="url(#rim)"/>
<path d="M800 430 L980 510 L880 530Z" fill="#ff8a5c"/>
<path d="M290 490 L460 400 L400 470Z" fill="#6a4cff"/>
</g>
<path d="M0 590 L180 520 L360 580 L560 510 L760 595 L960 525 L1200 585 L1200 675 L0 675Z" fill="#170d33"/>
<g style="mix-blend-mode:screen">
<circle cx="820" cy="360" r="14" fill="#fff" opacity=".9"/>
<ellipse cx="820" cy="360" rx="600" ry="3" fill="#fff" opacity=".35"/>
<circle cx="640" cy="440" r="26" fill="#ffd27a" opacity=".35"/>
<circle cx="520" cy="480" r="14" fill="#3ee7ff" opacity=".35"/>
<circle cx="420" cy="510" r="38" fill="#ff6fa5" opacity=".18"/>
</g>
<g id="particles" fill="#fff" style="mix-blend-mode:screen">
<circle cx="93" cy="17" r="1" opacity="0.3" filter="url(#soft)"/>
<circle cx="190" cy="78" r="2" opacity="0.4"/>
<circle cx="287" cy="139" r="3" opacity="0.6"/>
<circle cx="384" cy="200" r="1" opacity="0.75"/>
<circle cx="481" cy="1" r="2" opacity="0.3"/>
<circle cx="578" cy="62" r="3" opacity="0.4" filter="url(#soft)"/>
<circle cx="675" cy="123" r="1" opacity="0.6"/>
<circle cx="772" cy="184" r="2" opacity="0.75"/>
<circle cx="869" cy="245" r="3" opacity="0.3"/>
<circle cx="966" cy="46" r="1" opacity="0.4"/>
<circle cx="1063" cy="107" r="2" opacity="0.6" filter="url(#soft)"/>
<circle cx="60" cy="168" r="3" opacity="0.75"/>
<circle cx="157" cy="229" r="1" opacity="0.3"/>
<circle cx="254" cy="30" r="2" opacity="0.4"/>
</g>
<rect width="1200" height="675" filter="url(#grain)" style="mix-blend-mode:overlay" opacity=".45"/>
</svg>

Keep it non-destructive

  • Layers, not merges. Each step lives on its own layer or group, so you can toggle it to compare.
  • Smart Objects in Photoshop. Filters become editable Smart Filters, and you can place the Illustrator artwork as a linked or embedded Smart Object so edits to the vector flow through.
  • Live effects in Illustrator. Effects stay editable in the Appearance panel until you expand them.
  • Judge it at the final size. Effects that look subtle at 200% zoom may vanish in a 400 pixel thumbnail, and the reverse is also true.

Accessibility and performance when this goes on a web page

  • Contrast. If text sits on a polished background, check contrast against the brightest and darkest parts under the text, not the average colour. Glows can quietly push a headline below the readable range.
  • Motion. If you animate the glows or particles, wrap the animation in a prefers-reduced-motion: no-preference media query so people who opt out do not get it.
  • Alt text. Decorative backgrounds get an empty alt="" or are set in CSS. Meaningful illustrations need a short description of what they show.
  • Weight. A heavily filtered SVG can be slower than an optimised AVIF or WebP image. For static art, export the finished piece as AVIF or WebP; for art that must stay crisp and themeable, keep the SVG.

Common mistakes

  • Too much of everything. If every area glows, nothing does. Reserve the brightest light for one focal point.
  • Black or grey shadows. Shade with a darker, more saturated version of the local colour, not neutral grey, which turns muddy.
  • Heavy grain on small images. Grain scales with the image. Check it at the delivered size, or it will look like dirt.
  • Baking effects in too early. Merge only when you are exporting.

Where to go from here

Once these five moves are second nature, the style options multiply. Study how others combine flat shape work with light in Vector Illustration Trend, build the base artwork with Illustrator: Abstract Vector Art, push live effects further with Mastering Illustrator Effects, or move your vectors straight onto the page with Playing with SVG Design. For textured sources to blend over your work, see Free Texture Stock Photos, and for gradient styling in the browser, CSS Gradient Text Effect.

192 comments from the archive

  1. Great examples. I love vector illustration and I think with a certain amount (lots) of time you can create vectors that aren’t flat but for that strong finish a bit of tinkering always does well.

    The particle trail is my favourite. Simple yet elegant. Thanks.

  2. Really nice, very clean and clear examples. I love the contrast between the ultra glam and the very worn looks, so much depth and value can be added within the last couple steps.

  3. wow… really great work. I’m not a vector artist,, but im really loving ours

  4. Thank you for simple and amazing article, keep up good work!

    Best regards from Serbia

  5. Yeah, the particle trail is my favourite too, easy to do and versatile.

    For those of you like me who struggled to find the Brush Panel, when you have the brush tool selected, hit F5 (on the PC) and it’ll show up.

    Getting to terms with the Brush Panel is quite useful, as it’s a great way to get a lot more out of your brushes.

  6. Thanks!
    That was the missing piece between photoshop and illustrator!
    Great post!

  7. Hey Nick, good to know you use certain effects that are often frowned upon by some designers. Shows that true designers use all the tools that are available to him regardless of stigma.

  8. So informative and brilliant! Very great!

    I am going to have to get into this whole vector thing…. but its so hard and time consuming! Though, jobless and lifeless usually means I should pick a hobby that will consume my time!

  9. Thank you for this. Very insightful. :)

    @ Andrei:I don’t think the website you mention is a rip off. You could say that it was inspired by the Web Designer Wall’s layout.

  10. Great, really nice!

    last week i bought me a wacom intous3 A4 Tablett, i think thats a good interesting tutorial for me, thanks a lot – you making great stuff!

  11. It takes a lot to impress me in photoshop, and I must say those techniques work quite well !!!

  13. I don’t have photoshop, but your article does allow me the chance to use some ideas and put them into paint shop pro. Perhaps one day I can contribute an article or two for paint shop pro… hehe.

  14. As Andrei Gonzales mentioned above, I was heavily inspired with webdesignerwall when making my own site – I hope you don’t find me a complete copycat, although I admit to having copied the overall layout. But, sadly for me and happily for Nick, I am not as skilled in WordPress as he, so I couldn’t copy all the really cool features, like the menu, the post dates, tag cloud, the comments and the other killer stuff that makes Webdesignerwall:) But thanks Nick, for great inspiration, and for sharing your knowledge! The only thing I knew about in this post, was the “vintage” thing which I myself heavily use, so I’m looking forward to learning the other techniques you tell about in this post;)

  15. @Malene,

    I don’t mind “heavily inspired” at all. It is my honor that my design inspired you. FYI – Cameron Moll once mentioned in his article, Good Designers Copy, Great Designers Steal.

  16. @Malene – I may have been a bit harsh. I actually slightly prefer your artwork to the one Nick used on this site (sorry Nick, but I have a soft spot for Malene’s “aged clay” effect.), although I still do feel you could have used another layout.

    @Nick – *scratches head* …I wonder what you meant by that last post…

  17. @Andrei Gonzales – my entire point is: it is ok to copy ideas (seriously, who doesn’t copy?), but do not rip. Malene does have similar style as Web Designer Wall, but her illustration is original and stylish. So I don’t consider a rip.

  18. BittBox, I love the work you do and am in awe of your generosity. Thank you so much!

  20. Hello,

    Seems like some awesome tips are on this entry, thank you very much.

    I was trying some of them and wondered what version of Photoshop are you using as I cannot seem to find those brush options on CS2.

    Great site!

    Sailesh

  21. Posts like this are pure gold, a suggestion …post more like this and your blog exposure will grow harder and harder.

  23. Buenas! I´m from Argentina GRACIAS!! por lo que me enseñas te agradezco un monto..

    Mis saludos y mis respetos para vos

  24. u r the best… thanks so much….. love u alot…!!!! hw can u b so geniuss???

    cn help me wif my sch project???plzzz

  25. Hi, thanks for sharing those great tips with us. 1 question though, do you import a flat image of the original artwork or the source file. I cant seem to import my layer ai file into photoshop

  28. Your artwork is awesome, but I have one question do you rasterize the artwork or
    import it as shape layer to preserve it’s vector based nature?

  29. Man you’re plain awesome! This is the sort of stuff i was looking for so long. Keep up the good work – and be sure, that i’ll tell all my friends :)

  30. One of the most useful and revealing posts I’ve seen on any tutorial site.

    Your sites never cease to amaze me, please keep up the good work. Please keep sharing your ideas and techniques, they’re making this world a far more beautiful place.

  31. i just discover this site today, thank God. i love your site been a painter and a designer, i have discover something that will make me go the extra mail.
    lovely keep it UP!

  32. hello, is it possible to get a low cost version of the most uptodate photoshop. and a tablet. i know im asking allot. but does any one know where. or have one of them. PM on youtube at ww2willyjeep. Thank you in advance.

  34. HELLO! These tutorials are very useful! I just started using Adobe Illustrator and your site helped me a lot.

  35. Excellent tutorials. When do we get to see the tip/trick for something like your ‘abstract background’ wallpaper (the ‘parallel lines’) ?

  36. Thanks for the terrific tutorial. I dare say that you probably have the best looking blog I’ve ever seen. Your layout is stunning. Congratulations!

  37. It’s very useful, by seen those creation it gives me a new life for my creativity. So I have change my way for a new path. Thanks a lot the people how have built such.
    Thanks once a gain god bless to all,
    Keep it up,

    If you guys like to see my creations I can give those to uplode in your site.

  38. I’ve always wondered how you did the “particles” effect – now that I’m in on the secret, I’ve regained a little bit of peace of mind. Really.

    This is immensely useful. I’m sure I speak for my fellow worshipers when I say I’ll be eternally grateful for this. Arigatou!

  40. fantastic tutorial!!! this is what tutorials should look like! keep up the good work.

  41. waaaaaaaa!!!!
    THANKS, THANKS A LOT!!
    (i don’t speak (or write) in English very well, but i’ll do my best in this post…)
    This tutorial is amazing, I visited this blog a few times, i love its design, and I always wanted to know how to do digital illustrations like that… and you have helped me a lot with this! =)
    Once again, endless thanks! ^^

  42. Wonderful work! I love this site :D im a big fan of your wonderful colors :)

    cheers from manila!

  43. Thanks for the fantastic material. Words can’t describe how useful this is. I found your website by accident and now I use it for ideas and to just marvel at the talent. Thanks a million for this.

  44. I LOVE that you share all these techniques with your readers! I have read some of these on your previous blog entries and they’ve been really helpful with my projects. I can’t wait to try out all of these techniques!

  45. Wow! It always took me a long time to experiment with vector effects to get a result that feels complete, but only because there hasn’t really been online resources devoted to a FINISHED vector piece. This is a wonderful tutorial.

  47. That is all sooo amazing! I am german and do not understand all, but i will try your tips, because I go to an art school and your tutorial helps me a lot!
    Respect!!!

  48. This is a very world class tutorial.. i can say that.. thanks a lot

  49. Your vector effects are great, I want to use them too. I make vectors with brushes using different varieties of colours and patterns. But I am wondering where did you get your brushes? Your artwork is very impressive and astonishing! ;)

  50. Good work. We could always use a good talented, self motivated, and learning designer like you.

  54. Thanks a lot… ill be using this site a lot to help me with my designing…
    i have used some of these techniques before but not in the way you have shown us.
    thanks again.. please post more techniques which are helpful :)

  57. gee! if i was a woman, id ask you yo marry me… :)
    Im at university doing some multimedia and your tutorial amazes me, it’d help me with the projects greatly.
    I hope you post some more ideas, i’d love to read and learn to be an advanced designer! :D

  58. Hi…
    off the topic question..
    what pluggin do you use for image preview in this page?
    thanks..
    you’re awsome..

  59. wow! fantastic! thanks very much. i am so happy you share your knowledge for people (like me) who are starting out and are amazed by these types of graphics, now i can start creating my own… you should feel good about yourself for doing such things for others.

  60. Yes, I agree. I hope that I can some day close to the work you are producing. Thanks for the free and easy to understand advice!

  61. I feel a tad stupid for not having found out about that stroke-path trick, yet. Here I’ve been clumsily trying to draw smooth curving strokes with the mouse-pad on my laptop when really it was as simple as getting out the old pen tool.
    I very much appreciate all of these great tutorials. I’ve got to start putting together a website in a couple of weeks time and I can definately make use of what I’ve just learnt.

    Keep up the fantastic work,

  62. Wow, thanks for sharing these tips! I’m currently interested in vector work and this articles would really be a big help. :)

  63. i have always wonder how ya done it mate. they kinda easy to produce once you know how, simply gorgeous and i’m a great fan of ya work. thanks for all the tutorials and keep them coming.

  65. Thank you for the the good material you provide on this site. One of my favorite by far… keep up the good work !

    Maybe you can show us also the effect with the parallel deformed lines…

  69. i see u which is quit good and want take some tips to good graphics in the field of pacakaging industry.u will do quit good work in this field ok.

  70. I’m making sites based on CSS-technology for three years already but I didn’t see this greatful resource before! Good luck dear author! :)

  71. Yay for dig, bookmarks, and rss. There’s no way I’ll be able to remember all of this the next time I open photoshop.

  72. Thanks for the nice and clear tutorial ! love your work !!!!!
    You are the best!

  73. Wonderful options, creative techniques, paths panel does not work for Technique 5: Particles. Suggestions? Thanks!

  74. Hey,

    what brush did you use at Technique 5?
    Do I have to download them or how can I enable these brushes?

    Thanks for help,
    Anonym

    PS.: I really love your work and your tutorials, of course :-)

  76. thanks..
    this is such a great tutorial…really help me to do my work..

    :D,

  77. Great guide. I’ve always wondered how you do those neat effects ;)

    Thanks!

  78. Hi, this is great tutorial. I’m quite a beginner in Photoshop and all this is really helpful. I suposse you import in someway the AI file with layers divided. I don’t know it is possible and I will be very grateful if you do some Photoshop tips for dummies. Thanks
    Katty

  80. Very Nice Nick. I like all of that.

    I will have to get to practicing with those techniques tonight.;)

    -Brandon

  81. see u which is quit good and want take some tips to good graphics in the field of pacakaging industry.u will do quit good work in this field ok

  82. I am dont have good experience with illustrator but after looking at your work just think I am getting hooked man good job amazing magic stuff you do man

  83. For faster works I combine Macromedia Dreamweaver with Macromedia Fireworks, it works great for simple illustration or just placing pictures to webpage.

  84. Very Nice Nick. I like all of that.

    I will have to get to practicing with those techniques tonight.;)

  85. Woww really perfect i like all your works i see it also in your Deviantart

    you can say i’m one of your Fans :)

  86. Very Nice.
    I do have a question though. How do you get your background image so small in size while keeping it so crisp?

    Thank you.
    amy

  87. I really love the background for this site, haha, did you do it yourself? if so, using what program?

    .. tutorial?! *innocentface*

  88. hie…. wow .. i am awestruck .. i am new to illustrator and just stumbled upon thissite yesterday …. i love the tutorials .. i am going to be a frequent visitor…. and hope to learn more ….
    thankyou so much for all the tutorials

    Mythili

  89. Hi :), how to make your beautiful array of line ? I mean array of line like spider

  90. I went to school for this but my weakness has always been photoshop. You give me some serious motivation to start getting into photoshop a little heavier. Thanks for the encouragement and truly great style!

  91. You’re so talented. These all are good tutorials, i m working as web designer so your tips will help me a lot. i will expect such a good tutorials form your side :)

  92. i have one question. i was trying your technique “particles”. but i have a problem.
    i can’t find the settings in the brush panel you use.
    i just see my brushes, but no “scattering and shape dynamics” and so on.
    can you tell me where i can find these settings? or how i can make them appear?
    because in photoshop i just doubleclick at the layer and the options/settings pop up.

    kind regards, ilse

  93. Your tutorials are really great! Thank you for your creative work.I learned and inspired a lot from it.

  94. You’re really good. The effects all make the final image look incredible. I hadn’t realized the difference polishing makes. The tips are a little out of the league I was looking for but it’s definitely something to look up to.

  95. I’m just passing through on the look-out for Adobe Illustrator tutorials, though I have to stop and say – what a beautiful website. Excellent job.

    Rik x

  96. Thank you soo much for these amazing tutorials! I thought I was getting pretty good with Illustrator before, but compared to what you do, I’m still a beginner! But hopefully with your tutorials, I’ll be able to learn more about the mesh tool and blending. Thanks again!

  98. OK! It’s a really good picture!
    But… not for printing with CMYK, isn’t it?

  100. i luv ur webpage! and thanks for the awesome tutorials, i leanred more throug hyou than through my teacher the whole semester ;) greets and keep up the good work

  102. YOU ARE AMASING! You have taught me soooo much! Your tutorials are quick, easy to understand (even for inexpiranced people!) and wonderfully helpful! now I know CSS! YEH ME!

    THANKS SO MUCH! Tyrone

  103. yo, ya design are tough! Thats the kinda stuff i wanna learn in my shop, i hope with a little of your techniques and ma imagination i can create some tough shit like you.

  105. simple and elegant approach. I like it. yes, this is not design, but the way of work. just example.

  106. I am currently learning illustrator and I’m very impressed with your tutorial on spice an image up with the photoshop techniques mentioned above . Very informative and helpful.

  107. while i like the idea of polishing the vector graphics and making them more ‘real’ i think the style is a bit over done. maybe a bit too glam? not that i am anything to shout about.

    thanks for the tips.

  108. hi .. can u explain in other tutorial how do you do to make the brush scattering an dynamics in the both sides of the brush .. i cannot do that if you make me the favor to explain me ill be so much glad .. thanks

  109. from this site i have learn lot of hidden effects of photoshop….thaks dude for developing my knowledge of designing

  111. cannot do that if you make me the favor to explain me ill be so much glad

  114. Brilliant stuff man… I really like how you’ve broken technique down then leaving the rest up to our imagination.

    Keep it up and I’ll be definately bookmarking this site.

    Cheers :D

  115. Great tutorial… anything that can help me learn design from a professional is a big plus. I bookmarked this site as well and look forward to learning more in the future.

  116. Really good works, I’m trying to learn photoshop. These works are incredible.

  117. nice tips pls so all menu explain also
    means file and content sub files
    nice and learn easly

  118. I just want to say for some of us that just dabbles and wants to learn the techniques you use in your art work, your tutorials are FANTASTIC! Thank you for sharing I have been inspired to try some of these techs for my sons PeeWee football card. Thanks again

  119. I agree that a certain degree of polishing can provide some really neat details, but I think a key issue here is to show moderation. Many of the examples shown above has been largely overdone in my opinion, and I didn’t think of the original illustrations as flat or dull. I mean, they have lots of gradients and nice details, and doesn’t necessarily need all the extra elements scattered around.

    But yeah, a nice tutorial overall! I just think it’s important to keep in my mind the old cliche of how great power brings great responsibility along.

  120. Great stuff! You use some awesome techniques that I’ll be using in some of my future art. Thanks for sharing =)

  121. I am overwhelmed by your prowess. When you say that your vector illustration are ‘dull’ or ‘boring’, to me that is a language hard to fathom as per now, this is because they already look complex and really nice. Moreover your tutorials have helped me a lot, imagine i have already been given a new, in the village(am in Africa by the way) i am being called a computer guru. They don’t understand the difference between a computer and software. I have never gone to any practical design class, thanks to you i have learned a lot. Mark you keep it up since i am still your student. Kudos and thanks.

  123. Beautiful lessons! This is Magnificent visual art presentation! You the present professional and creative person Magnificent figures! I in a creative shock! I wish to you good luck! And there are a lot of design ideas

  124. Thankyou for posting such tutorials which helps lot to improve your skills….

  126. hey hi i have just saw your work its excellent i really like illustration part
    and i want to suggest something that you could add more tutorials on your
    web i mean for vector illustration side its could be amazing. best of luck
    aqib ahmed !!!!!

  127. the best tutorial i ever read about photoshop , man you are amazing

  129. great tutorial i ever knew..

    i’m just beginning to learn adobe illustrator..
    n combine my first artwork with photoshop..
    as i read u’r other tutorial..
    finally i’ve done my first artwork..
    i hope u’ll post another awesome tutorial..
    thx anyway…

  130. Indonesian designer respecta 4 people that love 2 sahre like you
    BIG THANKS PAL! =D
    XOXOXOXOXOXOXO^^

  131. you are mind-blowingly talented my friend. your work is fantastic. do me a favor and keep it up :D

  133. Loved your work. Your tutorial were extremely helpful. You are such an inspiration. Thank for sharing your tip. God bless You.

  135. Great stuff man. Iove the glowing dust effects and the particle tails, keep it up! I’m always looking for ways to improve in illustrator and photoshop and I’ll be making my own online web presence very soon. Just want to do it right the first time.

  136. If you ever in New York, I would like to meet you.
    You are so generous by showing ur technique to other artist.
    Keep up the good work.
    Le

  137. I was using the guidelines given in the tutorial that links to this blog that gives three steps to make shinny buttons. I followed the steps (and the similar steps to make the shine in the itunes note) but I keep getting weir lines when I blend the different objects. I wonder if it has to do with my preferences, but am uncertain what will cause this problem. Do you (or any other visitors) know how to solve this?

  138. Man i’m not even a beginner. I’m an artist tough and looking toward the computer design. what i do in hard airbrush you perfect it in computer bits. I love it. And the fact that you put it on the net for everybody to see makes you an artist. Just like a sourgeon doing his miracles on a live camera. Thank you

  139. im starting to try to make vactor images and when u saw that skin tone in the image above i went out of my mind…i been lookin for something like,its a great smooth efect u have on the skin,congrats!

  140. I can´t play around with the settings of the brush pannel to get different results, i don´t know why…

  141. can isee more projects with there explanation as i teach my students same effects.

  142. some one help me guys

    i am not beginer in photoshop , i can do many basic operations and i need a help to learn high level operation like mask operation,other than this more,pls guys som1 hlp me.

  144. wow… It’s really nice photoshop tip.
    the particles technique is great, I like it.

  148. 463 comments (: Bu m,illet sanattan anlamıyomu nedir, sanki pablo picasso

  149. Wow, thanks so much for sharing your skillz. I am a Vector illustration junkie and this type of thing is just what I have been needing to get re-inspired. Thank you so much!

    -Melanie S.

  150. great tutorial! I’ve been reading online tutorials for awhile! This is so far the best one on graphic design (no kidding!) So detailed and SO GENEROUS for sharing the tips and techniques in both illustrator and photoshop! THANKS a bunch! REALLY!

  151. I have a question. Are there any programs like that for windows or can i some how download photoshop onto my windows laptop????

  152. I will definitely be polishing my illustrations using photoshop with some of these techniques! Thanks so much for the education and inspiration.

    Cheers

  153. Thanks Thanks What’s the problem here? Google could bury the meager profit number from even the biggest media conglomerates.

  156. Glorious tutorial! I love Illustrator, but find that my art is flat. Using your tips, I can now add life to them in Photoshop and give them a whole new dimension!

    Thank You

  157. The designs showed here show what simple and tasteful design is all about. Another one to consider

  158. what means this:
    Experiment with the blending modes and drag the layers around (you will get unexpected results): Overlay, Color, Multiply, Screen, and Color Dodge.

    i cant understand

    step 1
    step 2
    step 3
    ???
    can you send email to me i am a chinese student~~~~~~~~~

  159. hi I’m using elements7 and i’m having problem on imitating your rainbow effect. its the layer mask icon I can’t locate and the gradient your using.. can you help me please..

  160. I was using the guidelines given in the tutorial that links to this blog that gives three steps to make shinny buttons.

  161. Thank you so much for sharing your great talent dude, this I really a great help to all aspiring web and graphic designers. Keep it up and share more nice ideas. Your cool dude.

  162. your tutirials are good for student.but how can we grow our creativity & colour sence.pls writre something in my problem.
    thank you.

  163. Hi, recently I was researching design companies and came across a South African website that has done some copy-pasting. I scrolled through the site and saw something very familiar in their footer; beautifully drawn doodles. I recognized it immediately as I was one your site before. As a designer I know how I would feel if someone stole my hard work. (This is actually just to bring it under your attention)

    Oh yeah, here it is – https://cheapwebdesign.co.za/ .

    Please let me know what you think!

  164. horrible…the name of the tutorial is abt glow and he doesnn’t teach it at allll

  165. I loved the rainbow effect.
    It costs a lot of work to do, without the toys that you have. :)
    Ninel

  167. Its a misleading name on this vector… And i think its sad to eliminate the positive effect of vectors by adding this stuff. In that case you had no need to use vector in the first place

  168. Learning all tricks and how to use photoshop is really hard but with a little hard work after that all things looks simpler . The worst part is that there aren’t too many good vectors out there for use.

  169. gmna caranya ngedapetin efek kaya gituuuuu ??
    dimana ????
    pake photoshop apa ???
    ayolah aku pengen bisa ???

  170. Thanks for tutorial,that’s right,vector image result often too flat,except for the expert of course and if we edit in illustrator it self,will need much time for best result,love this site.

  171. Apple’s launch of the iPhone 4 white has seen the greatest excitement for a new phone ever, with HD video recording, a super high-res screen and ridiculously slim dimensions, it’s not hard to see why its so popular in the world.

  172. People think that iphone 4 white is better iphone 4 black. Is that ture? Here you can judge by yourself.

  173. These are so incredibly well thought out, I’m having such a hard time redesigning ours right now… I want to use all the ideas of inspiration, but that would mean I’d have the worlds longest footer

  174. Excessive fear, anger, and work under stress last pregnancy, infants can lead to excessive hassaslığa. Intense emotions, going through the mother’s blood circulatory system and brain functions that affect the baby in some leads to the release of chemical

  175. Vectors need not be flat & boring. You don’t always need to use Photoshop either – there are many ways of making 3D, glowing and particle effects using Illustrator alone without any raster effects.
    Nice article none the less. very in-depth. :)

  176. There are many ways of making 3D, glowing and particle effects using Illustrator alone without any raster effects.I find it interesting and informative.

  177. Really nice..This effect works best with cyan, magenta, and purplish colors.

  178. This Gentling click on the area where you want to be dodged. Be easy and try to over-dodge the image.

  179. the techniques are explained in a very good manner and perfectly up to the mark explanation is there. It took time for me to read, but it was really very valuable. thanks for sharing such a nice post. Great efforts !

  180. I’ll answer that question in this, the first article from a series on vector images. In subsequent parts of the series, we’ll take the fundamentals we’ll learn here and see how they can be applied to a range of more complex design tasks.

  181. A tip : Don’t merge or rasterize your shape layers. As long as all your layers are shape layers then you have a vector piece of art.

  182. Hello
    Could you explain the technique 5: particles for illustrator CS5? I would really appreciate it. Great website by the way!

  184. glowing and particle effects using Illustrator alone without any raster effects

  185. ectors need not be flat & boring. You don’t always need to use Photoshop either – there are many ways of making 3D, glowing and particle effects using Illustrator alone without any raster effects.

  189. This is an old post that I never read before. Great post, by polishing vector with Photoshop effect, it can bring such a huge improvement.

  191. Excellent beat ! I would like to apprentice while you amend your site, how can i subscribe for a blog website? The account aided me a acceptable deal. I had been tiny bit acquainted of this your broadcast offered bright clear concept

  192. You could certainly see your skills in the work you write.
    The sector hopes for even more passionate
    writers like you who aren’t afraid to mention how they believe.
    Always follow your heart.

Comments are closed on this article.