The International Simutrans Forum

 

Author Topic: New UI - Rules & Templates  (Read 5887 times)

0 Members and 1 Guest are viewing this topic.

Offline An_dz

  • Web Admin
  • Administrator
  • *
  • Posts: 2841
  • D'oh
    • by An_dz
  • Languages: pt, en, it, (de)
New UI - Rules & Templates
« on: January 09, 2015, 01:44:25 AM »
New UI - Rules & Templates

This guide will explain how you must draw the new cursors and icons for pak96.comic. They are very similar to our sister/brother pak192.comic, but more plain and with different label icons.

You need our template to create your icons, as you'll need the background and other layers to create a standard icon. If you have checked-out our repository, the template is located in \ui\symbols\toolbar_templates.psd\, or you can download the attached file.



Cursors
Let's begin with the easiest to explain. Cursors must be a resized version of the object, in the case of ways it must be the NS image. Ways must not go over 48px width, other types may be drawn around this.

A 1px black border is mandatory around all of it. In ways this will enlarge the way cursor to be 50px.

Manual work is highly necessary to build a good looking icon as the image must not be interpolated. This example shows how you may progress:



Sizes may be flexible to slightly bring more detail, you can check \air\ways\LZ*.png\ files to see how it was changed.

Tunnels are an exception as they must be the same from the icon.



Icons
Mostly, icons are either a 2D front or side representation of the object.

A full 1px black border is necessary as well, unless described in the next following rules.



Ways -  ground, bridges, elevated and tunnels

Ground ways & Tunnels
Ground ways and tunnels are and exception, they must be a 3D front looking perspective and no black border as it's almost impossible to have a good 2D sideways looking representation. To draw them you can use either the Runway or the Taxiway template and removing the label.

The maglev track is, so far, the only exception as it can follow the general rule.



Elevated ways & Bridges
Elevated ways and bridges follow the general rule, they are drawn sideways. Bridges must have water at the bottom of the tile, while elevated tracks must not. The pink line shows where the ground of the bridge is and so you must draw everything else from it. Bridges pillars must end 1 px below the bottom of the tile while elevated tracks must touch it. If it has pillars, two of them must be drawn symmetrically.



The Template


All icons in the template have a specific purpose as you can see that each has a label. Each icon group has many layers so you can use the templates for other uses different from what the group is meant. For example, if you're going to create an icon without any label you may use any template and delete the label layer.

Labels are always over everything and your drawings must be done below the Overlay layer.

But let us explain what each of them are meant for, order is from left to right, first row and then second row.
  • Sign label
    Used on any usable signal
  • Electricity label
    Used on track electrification or powerlines
  • Stop label
    Used on any in-track stop
  • Stop Extension label
    Used on any kind of stop extension
  • Decoration label
    Anything that is used solely for decoration, like walls or street lights.
  • Metro label
    For things that are meant to be used underground/metro, this label may be used with other labels, that's why it's on the left
  • Runway label
    Used for airport runways, this template is also for any other way type, just remember to delete the label.
  • Taxiway label
    Used for airport taxiways, this template is also for any other way type, just remember to delete the label.
  • Bridge or Elevated way label
    This label can be used both for bridges and elevated ways. Bridges must have the water layer, elevated must not. The pink line is to show where is the way ground must be, details like the parapet go over it.
  • Passengers, goods and mail labels (all in the second line)
    To be used with stops and stop extensions, showing which types of goods the stop allows. If your stop also has the metro label, you add those right below the metro label, touching the metro label shadow.
« Last Edit: March 07, 2016, 02:57:28 AM by An_dz »

Offline Václav

  • Devotee
  • *
  • Posts: 3230
  • formerly VaclavMacurek
  • Languages: CZ, EN
Re: New UI - Rules & Templates
« Reply #1 on: January 10, 2015, 06:24:23 PM »
Ha. Thanks. With this I can (after finishing of mall) prepare at least some (for some time) extensions and other constructions for final publishing - when they will have icon that will belong to pak96.comic instead pak128.