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 getsocial-ui-customization.zip 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;linksfolder - all the linked files and Smart Object are located here.
Important
Do not change the folder structure otherwise, the links will be broken, and you will need to relink them one by one!
Tip
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:
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.
Open assets.psd, go to Layers panel. In the Layers panel you will find the following groups:
iconSizes
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.
Tip
Each icon NEEDS to be designed in this area and should not be changed. To avoid modifying them, keep this layer locked!
insets
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.
Tip
Don’t forget to unlock and update the insets according to your design.
icons
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.
Important
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.
background
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.
Tip
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.
Important
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.
Tip
Don’t forget to save in between or turn your autosave on!
Tip
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.
Tip
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.
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).
Important
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.
Tip
After exporting the assets go to http://tinypng.com to compress the files or use the tinypng plugin for Photoshop https://tinypng.com/photoshop.
The only thing the developer needs to do is copy the assets and voila!
Important
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.
Tip
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.