Preparing Assets for UI Customization

Designers guide describe how to prepare assets for GetSocial UI customization using provided PSD templates.

Download Templates

All PSD files required for UI customization are included in archive.

Archive Structure

Assets Folder

In here you find the assets template PSD, mockups PSD, and all the linked Smart Objects.

  • assets.psd - use this template to customize the assets used for GetSocial UI;
  • mockups.psd - use this file to preview the UI before implementation;
  • links folder - all the linked files and Smart Object are located here.


Do not change the folder structure otherwise, the links will be broken, and you will need to relink them one by one!


Keep assets.psd and mockups.psd both open when editing Smart Object to prevent links to break and to see changes immediately.

Exports Folder

In the exports folder, you will find all the sliced assets and mockups exported as png’s. See Exporting assets and mockups section for how to export slices.

Creating Assets

If you want to make GetSocial UI look similar to default theme, you can follow basic flow:

ui customization flow

If you want to create unique look and feel of GetSocial views, you can use our mockups as a template, edit the Smart Objects, save & export the slices you want. The visuals will be exported with proper sizes and names.

ui customization flow

Layers in the Template

All the UI elements are Smart Objects located in the links folder. To update Smart Object - double-click on it from assets.psd, make the changes, save the Smart Object and close. Changes to Smart Objects will be updated automatically and showed in assets.psd.

Open assets.psd, go to Layers panel. In the Layers panel you will find the following groups:

ui customization flow


This group is locked and not visible. By making this group visible, you can see the drawing area/size of the icon that is going to be exported.


Each icon NEEDS to be designed in this area and should not be changed. To avoid modifying them, keep this layer locked!


This group is locked and visible. This layer group provides the information you need to give to your developers so they can create the stretchable drawable.

This is only required for the call to action buttons and badge.


Don’t forget to unlock and update the insets according to your design.


These are all the elements that can be customized.

Use groups and layers names when communicating with the developers implementing the GetSocial SDK. They will know exactly which icon you mean, and they can look for it using the same name if needed in the code.


DO NOT change the names of the layers. These are the same as the slices names, and id is the developers are using to configure the SDK.


This group is locked and visible. Don’t forget to turn off this layer when exporting the assets. Assets should be exported as transparent png’s with the predefined slice names.


If you need more contrast to see your icon designs better, unlock this layer and modify the colors to your preference and lock again.

Slice Options

The names of the slices are the id’s used in the SDK.

Editing Elements

Make sure your slices are locked before you start editing. To lock the slices in Photoshop go to View → Lock Slices.

To edit an element just double-click to enter the Smart Object and modify it without changing the canvas size. Save and Close when you are done. The icon Smart Object will be will be saved in the links folder and changed automatically in assets.psd and mockups.psd.


DO NOT delete the existing icon or Smart Object.
Always enter the Smart Object and make your design changes in there, save and close.

DO NOT change the Smart Objects individually, this will break the links in assets.psd and mockups.psd.
If changing this make sure you relink the layer after.

Repeat this with the all the elements you want to modify, save, preview them on different views if desired and export the assets or/and the mockups.


Don’t forget to save in between or turn your autosave on!


If you are using assets.psd and mockups.psd keep them both open when editing the Smart Objects. This will prevent links breaking, and you will be able to see the changes in both psd’s immediately.

Previewing UI

Working with Mockups.psd

Open mockups.psd.

All changes to Smart Objects made in mockups.psd will be automatically saved to files in links folder.


The size of the UI elements canvas is fixed, so if you want to change a size or position of the element you have to work within the scope of the existing canvas, see example below.
Asset Canvas Size

Slice Options

The views are already sliced and pre-named. Unlike the assets, you can change the names of the slices if desired.

To export the views check the Exporting assets and mockups section.

Editing Elements

Make sure your slices are locked before you start editing (see how to lock slices in Photoshop).


DO NOT forget that the Smart Object canvas size of the icons should NOT be modified (the icons & mockups are the same sizes in both templates). If you resize them in one template, it will not match with expectations of the other one anymore.

Feel free to change the rest of the mockups designs like background colors & fonts-styles according to your app design for a complete mockup design.

After editing and saving the assets in assets.psd, switch to mockups.psd. You will notice that the following Objects didn’t change:

  • (links folder: cta-button-small-mockup)
  • (links folder:
  • (links folder: cta-button-big-mockup)

A smaller image, the one in assets.psd, is used to create a nine-patch, so we created a separate Smart Object to show the full buttons.

Exporting Assets and Mockups

To export the views turn off the background layer → Save for Web → click on the Save button → Select folder → on Slice options select All User Slices → click Save.


After exporting the assets go to to compress the files or use the tinypng plugin for Photoshop

The only thing the developer needs to do is copy the assets and voila!


Do not change the names of the slices. These names are the ones used to configure GetSocial SDK!

Understanding the UI elements sizes

Assets Size

Exporting the assets generates 4X/XXXHDPI assets, that is the size expected by the SDK, on the smaller screen size UI elements will be downscaled automatically.

Mockups Size and Resolution Density

Mockups could be designed in any size and density resolution, the developer should put mockup PSD size and resolution density into json configuration file.

photoshop image size settings


Internally in GetSocial we design mockups with 1280x2560px size and 72ppi resolution density.

Measuring UI Elements for json Configuration

All the dimension and content padding properties in json configuration should be measured from the base design mockup; on the other hand, drawable insets - from exported assets.

Turning on the dimensions layer will show the guides that correspond to exposed configuration properties.

Measuring Dimensions on Images with Transparent Background

In some cases, you need to measure the distance between elements with wholly or partially transparent background, e.g. close button margins should be measured from background window corner. To help with that, all the Smart Objects have extra imgSize layer, which draws red half transparent bound of the available canvas.

To enable it, double-click on the Smart Object → open Layers panel → enable imgSize layer → save → go back to mockpus.psd to check the UI elements with red bounds.

extra imgSize layer

More than one app?

Just duplicate or unzip the archive again and update the templates with new designs.

Next Steps

Give us your feedback! Was this article helpful?

πŸ˜€ πŸ™