---
description: >-
  This page will explain you how to correctly make the Highlight images for a
  Location
---

# Highlight Images

## Overview

The Graphics are based on the HGSS style for the Region Map. If you are using a different style, it might be that you might have to make your images a little differently or place them in the opposite folder as explained here.

Inside the Highlights folder you'll see these 2 folders:

<div align="left"><figure><img src="https://1270891022-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pefKCWRQ3oOZ4bMYJ62%2Fuploads%2FHTyGG4G05XGpq7u6BA8O%2Fimage.png?alt=media&#x26;token=617d0670-357b-4d2b-9d69-731dd4decc89" alt=""><figcaption></figcaption></figure></div>

You'll find this folder in:

* Graphics > Pictures > RegionMap > Highlights (v20.1)
* Graphics > UI > Town Map > Highlights (v21.1)

For this Guide I'm using the "Others" folder for locations like Cities, Town and certain Locations and the "Routes" folder for all Routes.

***

## Cities, Towns and Locations

Let's start with the "Others" Folder:

<div align="left"><figure><img src="https://1270891022-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pefKCWRQ3oOZ4bMYJ62%2Fuploads%2FDNJcubuN24OgGBgSFxhT%2Fimage.png?alt=media&#x26;token=f5b2cc8c-8c7d-4de9-bdb9-2c504291fdeb" alt=""><figcaption><p>Others folder content</p></figcaption></figure></div>

These are the example Images I've provided with the Plugin and are free to use.&#x20;

The way of making your own is for all of them the same so we'll take "mapSize1x1.png" as an example.&#x20;

The name is not so important right now but following the same naming as the examples will make it easier later when editing the PBS file. In any case, the image's name always needs to start with "map".

<div align="left"><figure><img src="https://1270891022-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pefKCWRQ3oOZ4bMYJ62%2Fuploads%2F63ZFdFDYbPHohhLrgZ3H%2Fimage.png?alt=media&#x26;token=7474aec2-ee4e-4345-ba1f-290ab5247cfa" alt="" width="375"><figcaption><p>mapSize1x1.png</p></figcaption></figure></div>

Important: The Image is 48x48, this is because as you can see, the red edge is exceeding the center tile.&#x20;

It is possible that for your Graphic style this isn't the case. If that's so then you can make them 16x16 (for a 1 by 1 location) and place them in the Routes folder instead.

***

## Routes

The difference with Routes is that they don't need those extra tiles since the red edge is not exceeding the center tiles.

<div align="left"><figure><img src="https://1270891022-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pefKCWRQ3oOZ4bMYJ62%2Fuploads%2FrJ9Iwln8KXmH8JbNJRT5%2Fimage.png?alt=media&#x26;token=6035d5e0-e576-49fd-84bf-68b3503d2816" alt=""><figcaption><p>Route folder content</p></figcaption></figure></div>

Let's look at the first one "mapRoute1.png"

<div align="left"><figure><img src="https://1270891022-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pefKCWRQ3oOZ4bMYJ62%2Fuploads%2FWi41pe8HCCgUtpJQCvtv%2Fimage.png?alt=media&#x26;token=52710f05-9be0-4645-a965-4ebb303fefef" alt="" width="256"><figcaption><p>mapRoute1.png</p></figcaption></figure></div>

The Image has a grey stroke on the top and bottom because this part will overlap a part of the town/city above and below it.

Alternativly you could also remove this grey stroke of this image but you can't change the Image size itself because the placement on the map will not be correct anymore.

<div align="left"><figure><img src="https://1270891022-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pefKCWRQ3oOZ4bMYJ62%2Fuploads%2F5oZRl4z3HybVHytJ4osY%2Fimage.png?alt=media&#x26;token=92d79699-a28c-4824-8c9b-24cc614f3fc7" alt="" width="256"><figcaption><p>mapRoute1.png</p></figcaption></figure></div>

Both Images are 16x16 as Route 1 is only 1 tile big and will result into this on the Region Map:

<div align="left"><figure><img src="https://1270891022-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pefKCWRQ3oOZ4bMYJ62%2Fuploads%2F30ttftWQeTXoyytB7LRM%2FRoute1-0.png?alt=media&#x26;token=584b8ec9-0ef5-4d39-8b34-dafce865b0db" alt=""><figcaption><p>Route 1</p></figcaption></figure> <figure><img src="https://1270891022-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pefKCWRQ3oOZ4bMYJ62%2Fuploads%2Fg1KQ0h8xSE7Y3kPShPti%2FRoute1-1.png?alt=media&#x26;token=bc251996-c825-4ba3-bf5d-7e7160390531" alt=""><figcaption><p>Route 1 <br>Highlighted</p></figcaption></figure></div>

This is basically everything about making these images. It'll consume some time but it's a 1 time thing and the result is satisfying! :)&#x20;
