Getting Started

Each of these hero icons are interactive. If you hover your mouse over one, it will have a yellow outline. If you click one you will select it and it will have a green outline. Multiple heroes can be selected at once, allow you to drag multiple heroes at the same time. To get started, try dragging and dropping a hero icon somewhere. Move it to wherever you want on the screen.

You will notice there are certain boundaries you cannot drag the icon to, these are the same boundaries that the Dota 2 Client uses.

Continue dragging icons to make a layout that you like. You will notice as you drag icons over other icons that the selected icon should usually show up on top of other icons in conflicting space (further in the foreground). Dragged icons will usually get preference and are shown in the foreground. If you want to be specific about how several icons in the same place show up (which goes in the front, which in the back etc), see the section on Fine controls below.

Now that you have moved the icons into the positions you like, try changing the scale of some icons. To do this, select one hero (click on their icon) and scroll your mousewheel up or down. The size of the icon should change. (if your mouse doesn’t have a scrollwheel try the +/- keys on your keyboard while a hero is selected).

To unselect a hero icon (and regain control of your scrollwheel/keyboard keys) simply click anywhere on the screen, besides another hero icon and the Fine Controls box.

And….that’s the basics. Move icons around and increase/decrease their size as you see fit. As you can see its pretty easy to make a layout and should be very similar to the layout editor inside the Dota 2 client.

Fine Controls and Greater Precision#

Now that you’ve made a simple layout, let’s try getting more precise. There are several features in the Dota 2 Layout Editor that will help you get way more precise than you can in the Dota 2 client.

Select a hero and you’ll notice that the Fine Controls box gets some info and sliders in it.

The Keeper of the Light has been selected. His X and Y coordinates are shown, as well as sliders to control his Z-index and scale.

The Fine Controls box will show you which hero icon you have selected, their X and Y coordinates, their Z-index, and their scale. The X and Y coordinates are just for reference, but the Z-index and Scale are actually sliders which you can slide to increase or decrease the values.

The Z-index of a hero icon is the value that is used to determine whether they show up in the foreground or background when they are in the same position as another hero icon. An icon with a higher z-index will show up in front of an icon with a lower z-index.

The scale value is the scale of the hero icon (0 being the min, 18 the max). Try sliding these sliders to see the values change. With these 2 sliders you can very precisely change how icons show up on the layout.

Grid Display#

Next up is the Grid display. The Grid Display has recently been updated to be much more useful. When you press the Show Grid button, a grid will show up behind the hero icons. The distance between gridlines can be manually changed with the Horizontal and Vertical Grid sliders near the Show Grid button. You can also optionally use the Snap to Grid functionality, which will try to snap the hero icon to the nearest gridline when you drop it.

Keyboard Controls#

Another feature of the Dota 2 Layout Editor is that all of the major controls have keyboard shortcuts. So you can use these keyboard controls instead of dragging the icon around, sliding the sliders, etc. All of these require that a hero icon is selected:

Arrow Keys – move the selected hero icon around the screen.
J/K – Increase/Decrease the hero icon’s Z-index (move the icon ahead of or behind other icons in the same place).
+/- (plus/minus) - Increase/Decrease the scale of the icon.

Exporting Your Layout#

Now that you have your layout setup just as you like, you’d probably like to use it in the Dota 2 game. To do this, click the “Export Layout” control button. Your browser should prompt you to save a text file – this is your layout. Save the text file to the following location:

C:\Program Files (x86)\Steam\steamapps\common\dota 2 beta\dota\cfg\layouts\

Or something similar, based on your Steam install location and computer setup. Once the file is in your layouts directory, load up the Dota 2 Client. Join a game and when you can select a hero go to the Grid Selection screen. Press the edit button, and then the Import button. This should bring a list of layouts, select the name of the one you just saved and presto – your layout should show up in Dota 2!

Share Your Layout#

Maybe you’d like to show other people your layout that you made on the Layout Editor. Once you’ve finished creating your layout, press the “Share this Layout” control button. This should popup a message containing a link. This link is a permanent link to the layout you just created. Highlight the link, copy the text, and paste it wherever you want – instant messages, chats, forums, etc.

Import a Layout from Dota 2#

If you’d like to import a layout you started working on in the Dota 2 client, simply click the “Import Layout” control button. When the popup shows up, click the “Select File” button in green. This will show a browser prompt and you just need to select the text file you exported from the Dota 2 client. How do you export a layout from the Dota 2 client? While in a game, go to the Grid Selection screen and press the edit button. Next press the Export button and give it a name. The layout should show up in the following location on your hard drive:

C:\Program Files (x86)\Steam\steamapps\common\dota 2 beta\dota\cfg\layouts\

or something similar.