Tonight while working on a web site for a client I was generating a header image that needed to be a specific width to fill out the header properly. The font selected by the client had the letters smashed together so I needed to add some space between the letters. I am not much of a designer so I had to play around with Adobe Photoshop until I was able to find the correct settings which happened to be named kerning and tracking. Kerning is used for a single letter and Tracking is used for a group of letters. These options are located in the Photoshop Character palette and can be modified using the steps below.
Add More Space Between Text Characters In Adobe Photoshop:
In the below steps we will be using an example header image which is displayed below. This first example of the image shows the letters with a lot of blank space to the right of the text.
Example Header Image Used In Steps Below:
- Highlight Text: First click the Horizontal Type Tool in the left navigation menu within Photoshop as shown in the example image below. I personally refer to this tool as the Text Tool and it is the small icon with a T in the middle of it.
Once selected highlight all of the text where you want to add more space between the characters as shown in the below example image.
- Open Character Palette: Now with the text highlighted click on Window in the top navigation menu and select Character from the drop down menu as shown in the below example image.
Once Character is clicked on the Character palette will open as shown in the below example image.
- Modify Character Tracking: Now with the text in the image still highlighted you can modify the space between characters by changing the number in the Tracking field within the Character window as shown in the below example image. The Tracking adjustment has an A-V icon with a right to left arrow below out to the left of the number you can modify. In the example image below there is a -30 currently in the field.
In this example we are changing the -30 to 150 which will add a lot more space between the characters to fill out the entire width of the image as shown in the below example.
Once you have made the changes you can now save the image in the format necessary for you to use it. I would also suggest saving a backup copy as a PSD so you can modify it in the future. Below is the updated version of the example header image displayed before the steps above.
Example Header Image With More Space Between Characters:
As you can see there is a lot more space between characters and the width of the header is filled out.