Applying Mockups In Photoshop: Essential Techniques

5 Essential Photoshop CC Features for Web Designers

Hello Graphic Designers, welcome to Free Mockups. If you’re a web designer, you know how important it is to have a tool that can help you create high-quality designs. Adobe Photoshop CC is one of the best tools available for web designers today. In this article, we’ll explore 5 essential features of Photoshop CC that every web designer should know.

Layer Styles for Quick and Easy Effects

Photoshop CC offers a wide range of layer styles that can be applied to text, shapes and images to create professional-looking effects. Some of these styles include drop shadows, glows, bevels, and strokes. With just a few clicks, you can give your designs an extra layer of depth and dimension. Layer styles are also editable, which means you can tweak them until you achieve the desired effect.

When using layer styles, keep in mind the following tips:

  1. Avoid overusing layer styles. Too many effects can make your design look cluttered and unprofessional.
  2. Experiment with the settings to get the effect you want. Sometimes, a slight adjustment can make a big difference.
  3. Use layer styles in combination with other Photoshop features, such as adjustment layers, to create even more complex effects.

Smart Objects for Non-Destructive Editing

Smart Objects are layers that preserve the original image and allow you to make non-destructive edits to it. When you edit a Smart Object, the changes are applied to a separate layer, leaving the original image intact. This means that you can always go back and make changes to the original image without affecting any of the edits you’ve made.

Here are some examples of when to use Smart Objects:

  • When working with images that will be resized. Smart Objects can be scaled up or down without losing quality.
  • When working with filters or adjustment layers. Smart Objects can be edited even after you’ve applied a filter or adjustment layer.
  • When working with multiple versions of the same image. Smart Objects allow you to make changes to one version of an image and have those changes applied to all the other versions simultaneously.

Artboards for Easy Design Iteration

Artboards are a useful feature for web designers who need to create multiple versions of the same design. They allow you to work on different versions of your design within the same file and switch between them easily. You can also export each artboard as a separate file.

Here are some tips for using Artboards:

  1. Give each artboard a descriptive name that reflects the version of the design it contains.
  2. Use the Artboard tool to create a new artboard and the Move tool to move between artboards.
  3. Use the Export As feature to export each artboard as a separate file.

Export As for Efficient Asset Creation

Exporting assets from Photoshop can be a time-consuming process, especially if you have to export multiple versions of the same asset at different sizes. Export As is a feature in Photoshop CC that streamlines this process by allowing you to export assets as multiple formats and resolutions in one go.

Here’s how to use Export As:

  1. Select the layer or group that contains the asset you want to export.
  2. Go to File > Export > Export As.
  3. Select the file format and size you want to export.
  4. Click Export to export the asset.


In this article, we’ve explored 5 essential features of Photoshop CC that every web designer should know. We’ve learned about layer styles, Smart Objects, Artboards, and Export As. By using these features, you can create professional-looking designs more efficiently and with less effort. Happy designing!