Preparing Assets for UI Customization¶
Designers guide describe how to prepare assets for GetSocial UI customization using provided PSD templates.
All PSD files required for UI customization are included in
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;
linksfolder - 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, you will find all the sliced assets and mockups exported as png’s. See Exporting assets and mockups section for how to export slices.
If you want to make GetSocial UI look similar to default theme, you can follow basic 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.
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, go to Layers panel. In the Layers panel you will find the following groups:
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.
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.
The names of the slices are the id’s used in the SDK.
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
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
If changing this make sure you relink the layer after.
Don’t forget to save in between or turn your autosave on!
If you are using
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.
Working with Mockups.psd¶
All changes to Smart Objects made in
mockups.psd will be automatically saved to files in
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.
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.
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:
- activity-action-button.bg-image-normal (links folder: cta-button-small-mockup)
- load-more-button.bg-image-normal (links folder: load-more-button.bg-image-normal-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.
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¶
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.
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.
More than one app?¶
Just duplicate or unzip the
getsocial-ui-customization.zip archive again and update the templates with new designs.