This article completes gradient article series, make sure you read through them all:

• 36 Color Gradient Sets For Photoshop and Resource Sites: Part 1
• Beautiful Gradient Effects On Web design – Research: Part 2
• 30 Logo Designs Using Gradient 3D Effects – Inspiration:Part 3

Put them in good use and here Part 4 starts:

1. Blending Gradients in Illustrator [ Video Tutorial]

How do you make a gradient bend to the shape you are creating? The answer is in Illustrator’s under-used Blend tool.

2. Tutorial – An Introduction To Mesh Tool

In the following tutorial you will be given an introduction to using of mesh tool.

3. Illustrator Gradient Mesh Tool Tutorial

Very simple tutorial showing you gradient mesh feature in easy to follow example.

4. Adobe Illustrator CS3 Tutorial: ‘Everything about Gradients’

Very comprehensive article with a lot of screenshots explaining everything about gradients in easy to follow way.

5. A Tutorial on using the Gradient Mesh tool in Adobe Illustrator 10

In this tutorial, you will create part of the image shown above using the gradient mesh tool, then using the skills you learned, you will finish off the image yourself.

6. Adobe Illustrator Gradient Mesh Portrait Tutorial

This amazing advanced tutorial will show you how gradient mesh portrait creation happens and will walk you through that process.

7. Adobe Illustrator CS, CS4: Gradient Mesh Tool, Gradients & Blends

In Adobe Illustrator CS, tonal gradations are rendered via the Gradient Mesh tool (U) and the Gradient Tool (G). The Gradient tool is fairly straightforward in its approach to rendering a gradation and blending subtle tonal and color gradations. On the other hand, the Gradient Mesh tool is one of the more labor intensive and frustrating tools in the Illustrator tool pallet, especially for the Illustrator newcomer.

This tutorial will show you basic overview about these tools.

8. Create Abstract Backgrounds

Abstract backgrounds are easy to create in Illustrator with a couple of simple techniques. Using Gradient Meshes, Steps Blends and Opacity Masks you can quickly create an abstract background – this tutorial will show you how.

9. Illustrator 101: One Gradient Across Multiple Paths

In this quick tip, you will touch on the importance of compound paths, as opposed to groups, when applying a single gradient across multiple shapes in Illustrator.

10. Creating Realistic Texture and a Sharp Vector Knife

Creating convincing vectors can be a daunting task. Dan Hess from Vectortuts will show you how to make wood and metal textures for a vector knife using the Gradient Mesh Tool, layering Gradients, and the Pathfinder Tools.

11. Gradient Flower Icon in Illustrator

In this tutorial you are going to use the Pen, Reflect, Scissors and Gradient tool, and of course super time saving Transform again technique.

12. Illustrator swatches gradient background effect

The Adobe’s Creative Suite 4 packages have this interesting gradient style effect. It looks like a grid of swatches going from one color to another in subtle gradient effect. If you have ever wondered how you create this effect, then this tutorial is just for you!

13. Quick Tutorial: Gradient Strokes

This is quick tutorial about how to create gradient strokes. This super simple technique use the Appearance panel and effects to create editable gradient strokes in Illustrator.

14. Make a Shiny Gum Ball Machine with Mesh Gradients

In this tutorial, Simona Pfreundner from Vectortuts will explain how to create a gum ball machine with mesh gradient. This is an advanced tutorial and the pace is fairly quick. Intermediated Illustrator knowledge is required.

15. Tips for Working with the Gradient Mesh Tool In Illustrator

In this tutorial, you’ll learn several tips that will improve your Mesh work so read through carefully!

16. Illustrate a Pair of Sweet Gradient Mesh Cherries

In this tutorial, Simona Pfreundner from Vectortuts will explain how to create a pair of cherries solely with the Gradient Mesh tool. If you’re not familiar with the Gradient Mesh tool, then this is a great tutorial to learn how to start using it. You can create artwork with a semi-realistic to very realistic look with that tool. It can take effort to master, but it’s worth your time.

17. Make an Aurora Borealis Design in Illustrator

To recreate the light patterns of the Aurora Borealis you’d probably turn to Photoshop’s filters and effects. Use Illustrator however, and you’ll not only achieve a stunning end result, but you’ll also benefit from the flexibility of working with vectors. This is an intermediate level tutorial rewarding you with an attractive desktop wallpaper for your efforts!

18. Create a Glowing Abstract Light Vector Graphic

Create beautiful vector illustration and learn how to utilize blends, different blend modes, and gradient meshes to use them later on other works!

19. Illustrator Tutorial: Gradient Mesh Flower

Gradient Mesh can be a wonderful tool to master but the learning curve canbring a bit of frustration to the beginner, so this tutorial is great learning point to get known gradient mesh tool better!

20. Create a Stylized Gradient Mesh Soccer Ball Illustration

This advanced Adobe Illustrator tutorial will show you how to create a realistic looking soccer ball with mesh objects and how to create reflections with the Opacity Mask.

21. Make a Fairy-Tale Inspired Magical Hand Shaped Vine

Intermediate tutorial teaching how to make a fairy-tale inspired magical vine that is shaped like a hand. You should have a basic understanding of Adobe Illustrator tools before you begin this tutorial.

22. Illustrate a Vector Lifesaver From Scratch

Create a unique lifesaver that can be used as an icon or design element. you’ll be working with the Pathfinder Tools to create the shapes. The Mesh Tool will help us to apply the color and highlights to give our object the desired “realistic” look, you’ll also take advantage of the Duplicate and Rotate Tools, to get a balanced look.

23. Design a Vector Audio Speaker Icon In Illustrator

This intermediate tutorial will show you how to create a vector speaker icon. You’ll learn to use some ellipses with gradients, the Grid Tool, and the Mesh Tool to create this icon design.

24. How to Create Vector Clouds with the Gradient Mesh Tool

Create impressionistic, infinitely-scalable vector clouds with the Gradient Mesh tool. It’s easy to start, but it takes a lot of time to master. There are several ways of approaching the Gradient Mesh – this one may be new to you.

Photoshop Tutorials

25. Photoshop Sunset: Warm Golden Sunsets With Gradient Maps

In this Adobe Photoshop tutorial, you’re going to look at how to easily improve and enhance a photo of a sunset using a Gradient Map!

26. Gradient Mapping effect in Adobe Photoshop

Learn how to use the gradient mapping tool to transform a standard photograph for use with a specific colour scheme or brand image.

27. Light and Shadows – Feathering Gradients in Photoshop

Tutorial explaining how to use feathering in your works in photoshop.

Feathering softens the edges of the gradient, which will help create convincing lighting that will blend nicely. You will be making use of the marquee tool frequently throughout this tutorial, so you’ll save yourself some time if you are already familiar with it.

28. Using Gradients to Make Light and Shadow – and a Coffee Cup!

In this tutorial, you’re going to use some simple circles and gradients to make a cup of coffee viewed from above. The end result isn’t that useful, but the process is interesting nonetheless.

29. Create Stylish Web-header using Photoshop Gradient tool

This tutorial will show you how to easily create stylish web header using only Gradient Tool Gradient Tool , Vector mask and Layer effect. The final web header image will include 3 layers consisted of 3 separate gradient this will allow you to easily edit each part later.

30. Tutorial: Rays of Light

Simple and fast tutorial explaining how to get effect as in the image below.

31. Using Photoshop Gradient Tool

Comprehensive article showing how to use Photoshop gradient tool correctly with many tips.

32. A Gradient Tutorial

Simple, yet very useful gradient tutorial to teach you how to create really subtle and good gradients.

If you know more such gradient tutorials, let me know and I will make this list even better!

It’s Monday and beautiful time to get inspired with very good examples and research a little bit what’s happening behind the scenes from graphic designer view.

This time I will showcase and analyze gradient effects used effectively in web-design and logo design creation. It’s very important to create and use subtle and eye-catchy color combinations and transitions to achieve modern and stylish effect. Maybe you haven’t noticed but light and shadow effects are widely used and it doesn’t necessary mean just color, but to bring greater effect, use textures and then put on them light but observable transparent color effects and you’ll see magic happening. Using light you can easily emphasize places and actually lead visitor’s attention from point to point using just color, illustrations, text size.

After this short introduction I’ll start to share beautiful examples of web site designs which use such light,shadow and gradient effects in very good way. And if you haven check out 36 Color Gradient Sets For Photoshop and Resource Sites: Part 1.

1. MikePrecious

Beautiful light and subtle spotlight effect on the top of texture. Such effects can be achieved on Photoshop using Filter–>Render–>Lightning Effects and playing with settings.

To get first and main focus on Mike Precious name and specialty one more .png transparent image with radial gradient effect is used. Notice subtle color variations from #F0F0F0 to #D1D1D1 and then at the end going back to lighter color.

2. EctoMachine

Notice this image below are used to repeat-y whole screen, which is great way to add interesting effect but in the same time get fast loading speed. If there would be simpler gradient effect you also could choose to use just 1px wide width image with gradient effects to get even faster loading time and beautiful effect.

3. Cellar-App

Very good example of 1px wide image on background covering whole page. (1px width and 3081px height).

4. Rawsterne

As you can see in this zoomed version, very subtle linear gradient is used, though I believe much more narrower image could be used in this example.

5. DigitalMash

Linear gradient image (40x1216px) is used through whole site from lighter on the top of the site to little darker on bottom.

6. CobbleStone Community

Radial gradient is created to take out company’s logo as first accent, little texture and color variations used to look really enjoyable wau. Definitely very good design.

7. DesignChuchi

One more amazing website with very light color variations making it to look very professional. Notice also top background image used 1px width and 237px height, other images like logo and mouse are just positioned above that one image.

8. VigetLabs

Look at the background image with many lightning effects in the center but on the sides transferring to simple linear gradient to fill big resolution screens. Actually there are 3 main background images using gradient effects on header, center line (light gradient) and then on the footer.

9. Coda

Almost whole professional feeling is achieved just by that huge background image (1600x1200px) using radial gradient and light texture. By the way such texture can be easily created in Photoshop on Filter panel – Noise – Add noise and after that just play with settings, opacity and color variations to get very good results.

10. Good Barry

One more time background image is 30px wide and 1900px height – subtle yet very effective. Even navigation has linear gradient effect to give dimensional effect.

11. OnWired

I cannot express how much I love this web design, it completely consists of light, shadows, radial gradients, many emphasis easily leading visitor through whole page. Exclusive eye-candy dimensional design and very good example for research.

12. ElementFusion

Color always help to organize and separate content, notice that center part is the lightest one taking out main image to get visitors attention to act. Nice icons, color variations explaining what this company is offering on the main image is really good choice.

13. Australia 2018-2022

Huge background image with radial gradient behind the earth and other lightning sparks to grab attention on football players, big “Join Our Bid” button and time countdown. Impressive work on Photoshop and beautiful implementation in web design.

14. Bohemian Coding

Background image is repeated on x-y asis, but to stand out with content in the center – white color with dark grey outer glow is used. Looks really professional. Notice light linear gradient effects on navigation bar and bottom area of main content where subtle grey gradient is used to darken bottom area.

15. AteBits

One of the best, modern web designs – beautiful eye candy. I must say here again – “Less is more” – very subtle color gradients are used, radial gradient on the center and navigation with linear gradients and very subtle dark outer glow to make those buttons stand out. Look behind the scenes how top background image + another one with radial gradient and other separator lines are used.

In the footer again another dark image repeat-x-y asis is used.

I really hope You enjoy this kind of articles, which is more inspiring, but this time looking a little bit behind the scenes. Stay updated because this is just Part 2 in series, there will be two more continuations.

36 Color Gradient Sets For Photoshop and Resource Sites: Part 1