Photoshop Web Styles: step 1 of this Photoshop custom styles tutorial

What are Photoshop layer styles?

Photoshop layer styles are a collection of advanced effects that can be applied to a single layer: complete presets of the powerful Photoshop layer blending options.

The main advantages of using layer styles are the following:

  • The combined layer effects can can dramatically improve the appearance of a layer.
  • Photoshop layer styles can be applied with a single click.

The objective of this Photoshop tutorial is to design custom chrome looking styles that will allow you to create realistic metal effects. So you could render realistic metals with a single click.

Let’s get started: bring out the Photoshop styles window by selecting “Window > Styles” in the main Photoshop menu bar.

Opening Photoshop styles window

By default, the styles window displays a small preview image of each style. The style name is be displayed in a hovering tooltip. You can apply a style to a whole layer by clicking on such style icon.

Photoshop default layer styles

Photoshop web styles: a much more useful preset

As you see, default Photoshop styles are rather weird effects. But, believe me: Photoshop styles are a very powerful tool. All that you need is to select the appropriate collection of styles.

Adobe Photoshop comes with several built-in style presets. Let’s open the Photoshop web styles, which are a much more useful preset. Select the styles window and then open the window menu by clicking the small upper right arrow icon. Now select the collection of styles called Web Styles, towards the end of the style list.

Photoshop styles menu list

Since we want to create chrome looking Photoshop styles, we are going to focus on some metal looking styles from the Web Styles preset: chrome, slick chrome, mercury, gun metal neutral, brushed metal glossy and gun metal warm.

These default web styles are great to create metallic looking web interfaces. In the next sections we will learn how to create interesting shapes that extract out the maximum from these default web styles. And later on we will learn to customize these web styles with advanced Photoshop layer options.

Default web styles with chrome effect