We often talk about how to use Photoshop in web design, how to create certain effects, work with video or text, and much more. We've also covered why Photoshop is considered the best tool for website mockup creation. However, one question remains open: how to configure the application effectively to make the most of its capabilities.

Some readers might say: “Oh, come on, everyone customizes it as they like—do we really need an article on this?”

Well, you're partially right. But our focus today isn’t on how to arrange windows in Photoshop’s workspace. Many of us wonder how to improve our workflow overall, what features are available in the app that are initially hidden and require enabling in the settings. Have you ever truly considered how important it is to explore those settings?

Mobile convenience with Adobe Comp CC

Adobe Comp CC is a great option for quickly starting a new project. It can be design, graphics, UX/UI, and more. Yes, it's a mobile app, but even there you can set up a grid, add various content, use Typekit fonts, graphics, and images. Most importantly, you can export your project directly into Photoshop CC and continue working there. In other words, you can start working from your couch with a tablet and stylus instead of sitting at a desk.

Smart settings

To optimize your workflow, the easiest solution is to use built-in workspace presets available in Photoshop. There's even a specific preset called Graphics and Web, which organizes and displays the most essential panels—tools, properties, libraries, etc.

But you can take it further. Go to Edit → Preferences and choose Units & Rulers. While you can set various parameters here, it’s most practical—following standard practice—to set Rulers to pixels. This might already be the default, but it’s worth checking. This ensures rulers will always display in pixels, regardless of your workspace profile.

Now open Preferences → Performance. Under History & Cache, you’ll see several optimization sets for working with Photoshop CC. Choosing "Web Design" sets cache level to 2 and tile size to 128 KB; for photography, it sets 4 and 1024 KB. This affects file size when working with many layers. You can select presets or customize them yourself depending on your PC configuration.

After launching Photoshop CC without creating or opening any documents, simply press T to select the Text Tool. On the top properties bar, set your font, size, etc.—these will now be the default settings for all new documents. Even after restarting the app, the settings remain. Very convenient.

Artboards

Since the introduction of Artboards, designing for the web has become much easier. They let you create layouts for various screen sizes, orientations, or different pages—all within one document. Exporting becomes simpler as well.

In short, working with artboards is no more difficult than with layers or layer groups.

Grids, columns, and rows

When working in web design, you can’t do without modular grids. And yes, you can create them directly in Photoshop CC. Just open a new document and choose View → New Guide Layout. In the dialog box, you can configure horizontal and vertical guides, set number of columns/rows, width and height, apply to artboards, canvas, etc.

You can use plugins or manually configure your own modular grid—the choice is yours.

Saving shapes for later

When working on design projects often, you’ll find yourself using similar shapes—arrows, buttons, frame outlines. While their appearance may vary slightly, the base form is usually the same.

Photoshop CC allows you to save these shapes and reuse them over and over. For example, draw a shape, select the Pen Tool, and add anchor points. Then use the Direct Selection Tool to reshape it.

Now select the Path Selection Tool, right-click on the shape, and choose Define Custom Shape. Give it a name and click OK to save it.

The shape will now appear in your shape library and can be used again later—with editable anchor points, fill, and stroke.

Useful shortcuts

Any chance to save time during work is always welcome. So here’s a reminder of some helpful shortcuts:

Simplified vectors

When designing websites or apps, vector graphics are frequently used. In the latest Photoshop CC, working with vectors has become easier. The improved Properties panel now groups the most common vector parameters and functions in one place. But there are also other helpful features worth remembering.

In short, if you uncheck the box, vector nodes can be placed as shown below. The squares represent pixels at high zoom levels. If the box is checked, anchor points will snap to the pixel corners.

Copying settings

A lot of web design time is spent editing similar shapes. If you have many buttons or icons and need to update them all, Photoshop CC allows you to copy settings from one shape to another.

In the Layers panel, right-click and choose Copy Shape Attributes. The shape must be a smart object. You can also right-click the shape itself and separately copy the fill or stroke.

Now select another shape’s layer and paste the copied attributes using the context menu. The stroke and fill will be applied—but not the size.

Linked objects

It might seem unusual, but using linked smart objects in a PSD file can significantly reduce the file size.

For example, if you're creating a project for Retina (HiDPI) @1x displays, the object should be high-quality and large in size. Ideally, your original image should be at 2x or 3x resolution. Go to File → Place Linked. To edit the object later, just click "Edit Contents" and modify the source file.

Once your object is ready with the correct size and color, and you want to scale it to 2x or 3x, simply go to File → Export As… and choose the desired export size in the left menu. Photoshop CC handles it perfectly, even adding the proper prefix to the file name.

Layer styles

Often, we apply multiple effects and blending options to layers—gradients, shadows, patterns. But sometimes, we need to apply the same style set to other layers or objects. Manually copying all parameters would be exhausting.

Fortunately, you can save a layer style or even a group of styles. Apply effects, then go to Window → Styles, click the menu icon, and choose to save a new style. Select whether to include only effects, blending options, or both. The style will appear in your library and can be reused on any layer or text.

Adobe Preview CC

Wrapping up, let’s highlight one more handy mobile app: Adobe Preview CC. It allows you to preview your Photoshop CC designs on various iOS devices. If you make changes in the PSD, they instantly reflect on the iPhone screen. You can even connect an iPad to preview how the site looks there.

Conclusion

We all get stuck sometimes—in our ideas, workflow, or motivation. That’s why we need a spark, something to push us toward progress. It’s the same with new features and techniques. To try drawing with the Pen Tool or creating Styles, you need a goal, a reason. You need to answer the question: “Why do I need this?”

The answer is simple: Photoshop offers countless ways to save time in design and drawing. Some of the tips here may come in handy. Professionals might rediscover something; beginners might learn something new. And of course, this is just the beginning. Photoshop can also generate CSS, export in many formats, and even filter layers. These features are quite intuitive and hard to miss within the app itself.