This tutorial will help you learn how to customize the graphics in your template using the PSD files we provide.
Many of our templates come with
PSD versions of the GIF and JPEG image files that are included. The GIF and JPEG image files are what show up when a template is viewed. PSD files are high quality layered versions of the GIF/JPEG images. After editing a PSD file, you would save it as a JPEG or GIF to replace the original. For example, after editing a file named header.psd, you would "save as" header.jpg, overwriting the actual image that shows up on the template. The reason we sometimes include these PSD files is to give you a greater ability to modify the template's graphics.
You will need a copy of Adobe Photoshop to open and manipulate PSD files. For this tutorial's, we are using version 6 but other versions should suffice.
As an example for this tutorial, we'll edit the PSD header file included with the Web Hosting template shown below. The header PSD file includes the top portion with 'Company Name', the slogan, phone number, and keyboard background. Each bit of text is contained on a seperate layer with its own pre-applied styles. Basically all we need to do is click the text layer then type in your own words.
We'll start by changing "Company Name" to something serious. After opening this PSD file in Photoshop, you would select the Type Tool from the Toolbar (shown to the right). After that, you would hover your cursor over the "Company Name" text and click. A flashing line should appear (shown below).
At this point we can change letters from "Company Name" to something else. Changing the other text can be done the same way. If you would like to reposition text, click on its layer in the Layers tab then click the Move Tool in the Tool Bar. After doing so, you may click down and drag layers around to reposition them.
After editing the text layers and moving them around a slight bit all that is left to do is flatten all layers then save the image over top the old file. To do this, you would click Layer from the menu bar then go down to Flatten Image. After doing so, all layers will be merged into one. Now we must save the image. Click File then Save As and save the new image over top the old one. In our case, we would save the edited/flattened version of header.psd over top header.jpg, which is the file that shows up when the template is viewed.
Shown below is a cropped screenshot taken of the template in a browser using the new header.jpg file we created by editing header.psd.
This tutorial was meant to give you a basic understanding of how to manipulate text and move layers around in Photoshop. We encourage you to spend some time playing around with program.The best way to learn more about how something works is by "doing" and experimenting.
