There are almost no limitations to uploading PSD files to RapidUI, but there are some simple and quick guidelines that we highly recommend you follow when working with Photoshop - it will help you achieve better results faster!
It is important to remember that the designs you are making in Photoshop will be turned into a fully functioning live website - they are the source layers for your website. Work tidily - organize groups, layers, and names, and try not to use unnecessary objects.
!RapidTip#1: Tidy 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.
- Every visible layer in Photoshop will be uploaded to your website. It is better to delete unnecessary layers before uploading your PSD. Invisible layers will not appear on your site, but they will lengthen the uploading time.
- Upload your site's layout only - do not include popups, menus, etc. in the original design because these items are not apart of your sites flow and can mess with the HTML hierarchy RapidUI builds for you - these type of things need to be uploaded separately, later.
- Name your layers! This will help you easily find any layer amongst all the other layers when working in RapidUI - organizing layers in folders and groups is another great way to keep things tidy and speed up your workflow.
- Make sure every object on your page has a separate layer. Two objects on the same layer will function as one in RapidUI. This will make editing and going responsive much easier for you.
- There is no need to upload several photos to the same spot (one on top of the other - usually for sliders, galleries, etc.). It will only slow down the upload process and will upload unnecessary photos. Simply use one image, and after turning it into a slider in RapidUI, add the other images to the slider.
- If you want certain objects to stick together in all resolutions, group them together! For example, if you want an icon to stay with its text, put them in a group together. This helps 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.
!RapidTip#2: Blend modes, clipping, & masks:
Most blend modes & clippings are supported in RapidUI, yet some of them might look different or even stop the PSD upload.
RapidUI does not support folder effects (blend modes, clipping, masks, etc). Instead, you can use the effects on a specific layer, or merge the folder layers.
If your PSD upload doesn't complete or doesn't look exactly like your Photoshop design, try one of these options (only one needed):
- Merge the clipped/blend layers into a single layer (without affecting the object's appearance) - the best option. If this option doesn't work, try one of these options:
- Rasterize clipped/blend layers (not text layers)
- Convert layers into smart objects (not text layers)
After trying one of the options above, upload your design once again.
It is very important to use the right text settings (styling) before uploading your PSD file to RapidUI. Your text settings (font family, font size, line height, color, etc.) in Photoshop is what allows us to create your web - if they are defined exactly as they should, your site will be pixel-perfect.
- The most important thing to remember is to never convert text layers! Don’t rasterize text, don’t convert it to a shape or a smart object, avoid changing the layer type - if it is not a text layer, it won’t upload as a text layer.
- Keep the text settings accurate - not only visually. The text settings you use set the text settings on your site, they’re relevant even if they visually look fine, so make sure that text sizes make sense. For example - a title’s text layer can have a font size of 18px, but a line height of 98px (obviously copied and pasted from a different title). In that case, the line height in your web will be 98px - which you do not want to happen of course.
- Make sure that the text direction is always set properly, not just visually. If your text direction is left-to-right, it will be written like this into your code in RapidUI (but can be changed if needed).
- Always use the same text settings for the same text type - if you are using the same looking headline several times on your site - make sure that their settings (styles) are the same.
RapidTip #4: Image Mode
In order to make sure your design file is fit for internet, your image properties have to match Google Chromes capabilities, which means setting your image mode to 8 bits/channel. To do this, head to ‘Image’ on the Photoshop top bar, select ‘Mode,’ and then set your file to ‘8 Bits/Channel’ (as shown below). Now you're ready to go!
RapidUI only supports the RGB color and Grayscale model. Do not use CMYK, LAB or HSB
Changes in Photoshop
Any changes made in Photoshop (after uploading your design to RapidUI) will not be updated automatically. However, there are two ways to upload changes from your design file / upload a new design onto the platform:
- Upload your file as a whole, and show only the layers you wish to upload (hide the layers you wish to be hidden in the platform), onto a section in your site
- Create a container on the platform - and upload your PSD/Sketch file containing only the new layers.
!RapidTip #4: Image Mode
In order to make sure your design file is fit for internet, your image properties have to match Google Chrome's capabilities, which means setting your image mode to 8 Bits/Channel. To do this, head to ‘Image’ on the Photoshop top bar, select ‘Mode,’ and then set your file to ‘8 Bits/Channel’ (as shown below). Nailed it, you’re ready to go!
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!