Nowadays, the combo of Photoshop and CSS3 makes up a huge toolbox for web designers; it allows us to achieve website designs that weren’t possible back in the early days of the internet. We can add depth to our design; we can simulate paper or other textures; we can using lighting or 3D effects and more. These elements, when used properly and subtly, can add up to the difference between a so-so web design and a great web design. With that in mind, I’ll be sharing some of my favorite and most-used Photoshop and CSS tricks when it comes to web design.
1. Gradients
Gradients can add subtle depth and lighting effects to your web design. If you’re stuck on a flat design, all you might need to add is the most subtle of gradients. That being said, please don’t use any super harsh gradients; in my opinion, the best gradients use tints or shades of the same color (ie. no pink to yellow gradients, please). Of course, each design is unique. Gradients can be achieved two ways: in Photoshop and CSS3.
Photoshop Gradients
Photoshop’s gradient tool allows you complete control over your gradient – it’s easy to use and can make your designs really shine.
To use Photoshop’s gradient tool, simply do the following:
1. Click the icon shown in the bottom left corner of the above image.
2. Select subtle colors in your color swatches (bottom right corner) – these will make up your gradient.
3. At the top of the page, choose either linear or radial for your gradient, set the mode to Normal, and adjust the opacity to your liking.
4. Click and drag the gradient tool on the layer you wish, in the direction you want the gradient to move.
That’s it! Looking at the above image, it’s important to note that subtle colors are used (bottom right). Some examples of gradients being used in web design can be seen here & here.
CSS3 Gradients
CSS3 gradients are really cool – the more you can do in-browser, the better – but keep in mind that not everyone uses a CSS3-compatible browser, so not everyone will be able to see your gradients if you only use CSS3. That aside, here is a handy CSS3 gradient generator (scroll down the page bit). It allows you to use hex codes and generates the proper CSS code for you. Booya!
Hit the jump for the whole article!
(more…)
