Theming - Sidebar Dock Frames
The following document was created by Joshua Watmough, In-House Artist at SmiteWorks USA, LLC.
This document assumes that you have a basic understanding of the use of Adobe Photoshop and programs in general. If you have any questions please feel free to reach out to me through my work email: jwatmough@smiteworks.com
Download:
The Sidebar Dock Frames PSD file above may be updated from time to time. Make sure you download the latest PSD available from this page to have the most up-to-date version before continuing.
Once the sidebar PSD file is opened, you will see that there are three folders in the Layers panel. These folders correspond to the three image files used in the new sidebar layout. The folders are named the same as the relative image files used in CoreRPG for ease of identification and clarity. Those would be the Dock_icon, Dock_entry, and the Dock_category.
Inside the Dock_entry and the Dock_category folders, you will find two sub-folders. One for the Up and one for the Down button states. Inside the Dock_icon folder, you will find a single subfolder as this image has no down state.
Opening up the Sidebar_dock_category subfolder, you will find two base images (the same is true of the other sub-folders as well).The lower, highlighted item in magenta being the background of the Dock_category image. The upper, highlighted item in yellow is the border. These base images also have a layer effect applied to them.
The base image with an Inner Glow (represented here in light blue) to create the edge shadow and the border with a Bevel & Emboss. If these are not desired they can be hidden by clicking the eye icon to the left or adjusted by double-clicking on the Effect listing to open the control panel for the effect.
These base images also have 1 or 2 attached layers that use the base as a clipping mask, meaning that they only affect the pixels of the layer they are attached to.
The base image, for example, has one layer that is the Texture overlay and one Color Fill layer. This will allow for easy adjustments. To change the color, double-click the Color Fill layer and pick a new color in the pop-up window. The default image is set to gray. You can easily adjust, replace or hide the Texture layer as you see fit as well.
In the image workspace there are four guides set to represent the default “9-slicing” of the images as defined in CoreRPG. This is how the image will be divided to allow for scaling inside the FGU user interface. If you desire a different slicing, it must be defined in your ruleset or theme to accommodate the changes.
Once you have completed the changes you would like to the images, you may then export each. To do this easily, close all of the main three layer folders and hide all but one of them by clicking on the Eye icon to the left of the layer. In the "File" drop down menu at the top left of the program, select "Save a Copy". This will open the typical save window. Here you can name your save file to the appropriate name that corresponds to the layer folder that is left visible and select the PNG option for the file format and Save. Do this for each of the main layer folders.