RapidUI Guide: How to make your Photoshop file ready for development

Designer, the website building process starts with you.

Building websites that function like a dream starts in the design platform. To help you get the most out of your design before you’ve started your upload, we’ve put together a list of best practices for structuring your layers in Photoshop that will make your design-to-live transition quick and easy.

We promise, when you sit down to build you’ll be happy you took the time to get organized: developing your files with RapidUI saves you hours of building time, and working with an orderly layer system saves you even more time within the platform.

This is a layer-by-layer guide to structuring your Photoshop designs to be ready for easy, quick development.

Tip 1: Tidying up your layers

Before you upload your design, take care to organize your layers into groups, name layers properly, and hide or delete unnecessary layers, so your website will function as smoothly as possible.

• Upload your site’s layout only — popups and menus, will come in later.
  If you have objects that are hiding parts of your site, like popups or menus, don’t include them in the original design. The HTML hierarchy we create is based on your design — but because these objects aren’t part of your site’s flow, they’ll need to be uploaded separately.
• Name your layers: In the interest of Future You, do yourself a nice thing and name your layers! Think about how you’ll find these layers in a sea of layers, groups, and folders, and name accordingly. Go all the way with organizing layers in folders and groups — anything you can do in the pursuit of tidiness.

• Group ’em up: If you want certain objects to stick together in all resolutions, group them together! Think about icons: if you want an icon to stay with its text (and you do), put them in a group together. You’ll really feel the benefits of grouping when you go responsive; because grouped elements impact each other’s placement, elements that are grouped together will stick together in smaller screens, so editing one object will automatically edit the rest of the group’s elements to match — and help you adapt your design faster and easier.
• Every object gets its own layer: Two objects on the same layer will function as one in RapidUI, which isn’t what you want. That means every object should have its own layer; this will make things way easier during the editing/going responsive process, and will help you out when you’re customizing your elements’ functionalities.
• One image per spot, please: You don’t need to upload more than one image in the same spot — and, in fact, we prefer that you don’t. For carousels, sliders, and so on, upload one image with your design file; once you’ve made that element interactive, you can add the rest of your images. Uploading all of the images together will only slow down the upload process and add extra steps to your workflow.

Want your elements grouped together? This is how we do it.

Tip 2: Get to know your blend modes, clipping, and masks

We’ve found that flattening complex graphics will often bring you closer to the web design we want. Think about a base layer that you’re using as a clipping mask, with secondary layers clipped to the base, like photo montages; combine these elements into a single layer will make your upload faster and cleaner.

• Merge your layers: First things first, if you’ve found that your layers look wonky, merge all the clipped/blended layers that you can without affecting your object’s appearance. If some of your blend modes look different in RapidUI — it must be something we’ve yet to develop. You can easily fix it by merging layers into a single layer.
• Rasterize or convert: If this option doesn’t work, try rasterizing your clipped/blended layers, or converting them into smart objects. If the problem is with text layers, rasterizing and smart objects won’t work! we’ll go deeper into that in the next section.

RapidUI doesn’t support folder effects yet (blend modes, clipping, masks, etc), so for now, to upload groups of layers with effects, use the effects on individual layers, or merge the layers in the folder.

Tip 3: Keeping up with text layers

For your website to come out pixel-perfect, you have to pay attention to the details of your text styling: for example, font family, font size, and line height.

The most important piece of advice we can give you is: never convert text layers! If it’s not a text layer in Photoshop, it won’t upload as a text layer to RapidUI.

• Don’t rasterize text, don’t convert it to a shape or a smart object, don’t change the layer type.

No rasterizing text!!! Never!!!!

• Take care of your text settings: Even if your texts look fine, the sizes have to make sense, so keep an eye on line height and font size.

Example: a title’s text layer can have a font size of 18px, but a line height of 98px. In that case, the line height in your web will be 98px — which will look super weird. By paying attention to detail, that can easily be avoided.

• Make sure that text direction is always set properly: Your left-to-right settings (or right-to-left) will be written into your code, and even though they can be changed — that’s just making your life complicated.
• Check your text settings: Always use the same text settings for the same text type. If you are using the same headline format several times in your site, make sure that their settings (styles) are the same.

The web development process starts with design. By incorporating these tips into your workflow, you’ll be able to start building websites faster and easier — and see better results.

When it comes to building with RapidUI, what you see is what you get — and that starts in Photoshop.