There are many design elements you can customise in CityPlanner. This is an overview of what you can modify along with tips for making your project look as as good as possible.
- The SVG image format is recommended for uploading icons and logos to CityPlanner. SVG is a vector graphics format, which means that as images scale they retain sharpness regardless of screen size or resolution.
- If you lack vector assets, you can use Vector Magic to automatically convert images from raster formats such as PNG, GIF, and JPG.
- Inkscape is a free open-source program for Windows and Mac OS which can be used to edit and convert vector formats. Commercial options include Adobe Illustrator and CorelDRAW.
- Protip: Using vector graphics is extra important for projects published to 4K, Retina, and mobile screens.
- The Masthead is the logo or wordmark of your city. It lives in the top left corner of the CityPlanner interface and serves as the chief way to brand your project.
- Manage the Masthead under General Settings | Design:
- Protip: When using an image with a transparent background, it is recommended to use a white logo/wordmark with a subtle drop shadow. White stands out best over city models and the drop shadow preserves visibility over light backgrounds such as sky.
- Recommended image size for the Masthead is less than 200×200px.
Ribbon Logos & Icons
- The Ribbon is the button group which runs along the bottom of the interface.
- All of the logos and icons can be customised. The leftmost button is the “Logo Button”. By default it features the CityPlanner logo but it is designed to be replaced with your city logo/shield.
- Upload custom logos and icons on the CityPlanner Admin page, under the General Settings | Ribbon & General Settings | Dialogue tabs:
- It is recommended to use single colour white icons between 45-55px squared.
- CityPlanner supports custom typography using the @font-face CSS rule. Click here to learn more about @font-face.
- There are three fonts groups you can customise – 1) Buttons 2) Headings and 3) Paragraphs:
- To add custom type to your project, you can link to a remote stylesheet from the CityPlanner Admin page, under General Settings | Design:
- Protip: You need to upload the stylesheet and font files to your own server.
- Setting a Theme Colour is one of the key ways of branding your project. It highlights active and hovered interface elements.
- The Complementary Colour is used for Dialogue suggestions and creations.
- Set your custom palette on the CityPlanner Admin page, under General Settings | Design:
- Protip: Be mindful of using very light hues as it can make the white text difficult to read.
- As there are so many ways in which a project can be customised with your civic profile, CityPlanner allows for saving all customisations to the account.
- When clicking 1) Use As Default everything in the General Settings | Customise section (all tabs) is saved.
- Protip: You need be an Account Admin to set the default.
- Future projects henceforth begin with these settings. Previously created projects can be manually updated to the new defaults by opening each project and clicking the 2) Reset button.
Good luck designing your project!