Customizing Your Web Template in Adobe Photoshop (Quick Guide)

- Opening PSD File
- Changing Text in Adobe Photoshop
- Changing Images in Adobe Photoshop
- Changing Image Colors in Adobe Photoshop
- Update Changes to Your Template

- Opening PSD File

A PSD file is a high resolution image file that can be edited using Adobe Photoshop. It is usually layered and can be easily modified and consists of all image sources that are a part of your web design template. Editing these files would need Adobe Photoshop be installed on your computer. Adobe Photoshop is probably the most powerful image modification tool available, used on the MS-Windows platform. Using this you can change image colors, text and add images to your web page with ease by optimizing the images for the internet.

To open a PSD image file in Adobe Photoshop, all you need to do is to select Open form the Photoshop file menu. In the pop-up, browse to your file location and select Open.

Figure: Opening PSD file

The other ways to achieve the same is to double click on your PSD file, or to right click, select Open With and then select Adobe Photoshop. Alternatively, you can also drag and drop the PSD file from your file browser into Photoshop.

- Changing Text in Adobe Photoshop

A web page normally consists of plain text, in order to facilitate better indexing by search engines. Text represented as pictures is not indexed and thus does not contribute to the search engine optimization process. This implies that text, as far as possible, should be kept in text format only and not in picture format.

Despite the disadvantage it is important that text is depicted as a graphic on your web page in order to improve its visibility and aesthetics. In such cases text can be integrated or edited using the Photoshop software. Normally the text integrated with graphics comes in a PSD format, easily readable by Photoshop.

Since we provide image blocks with hidden text, any graphic editor can used to modify these, but Photoshop takes the cake when you need to have more option with respect to fonts, sizes and styles.

After opening the PSD file in Photoshop, select the “T” tool in the left palette. Now click on the text that you want to edit. In case the message “The following fonts are missing” appears, it implies that you have not installed the necessary fonts. For instructions on how to install the missing fonts read the “Font Installation” section in the unzipping your template tutorial. In case the “Editing or rendering the text layer” message appears, it means that everything will be editable without any problems.

In case you need that your text field should contain multiple rows, you can insert a new line using “Shift + ENTER”. Quit the edit mode by pressing “Ctrl + Enter”.

You can change the attributes of the text like, font, size, color, style etc. by using the options that crop up under the main menu bar, once you click on “T”.

Figure: Options Panel

This panel consists of four drop down menus, alignment bars and a color bar. These drop downs are self explanatory and easy to use as in MS-Word. Further advance options are available in the type panel which can be launched using “Ctrl + T” while editing.

Figure: Type Panel

After editing and modifying, it is necessary that you update the design template.

- Changing Images in Adobe Photoshop

The first and the foremost step in the creation of your own web page is to assemble unique content and a unique logo. We do have a collection of logos for you to procure and use. However, you can also create of modify an existing logo using Photoshop.

In order to change or modify an image in Photoshop, you would need to open the PSD source file in Photoshop.
In case you want to insert you own image in the web template, you would need to hide or remove the old image first. An image may consist of various layers. Select the layer you want to remove by using Ctrl and Click.

Figure: Layer Panel

You could also use the layers panel to view the layers independently. Locate the highlighted layer in the list of layers. Click on the eye depicted to the left of the layer in the panel. This is toggle key to hide or unhide the layer. You can also simply right click on the image to see a list of layers and select the layer from there. Now in the layer panel, you can simply drag the layer to the trash can at the bottom of the panel to delete.

Adding an image is also very easy using Photoshop. Open the image you want to add and make all modification in the image. After you finalize the design in the image, you can simply drag and drop the image onto the template window and place it where you want it to appear.

After you finally approve the placement and look of the template you would need to update your web template with the required changes.

- Changing Image Colors in Adobe Photoshop

While replacing or adding images in your web template, you may encounter a need to change the color of the images you add to match the colors in the template.

In order to change or modify the color of an image in Photoshop, you would need to open the PSD source file in Photoshop. After opening, you need to select the layer where you need to change the color. Select the correct layer by using Ctrl and Click.

You could also use the layers panel to view the layers independently. Locate the highlighted layer in the list of layers. Click on the eye depicted to the left of the layer in the panel a few times. This is toggle key to hide or unhide the layer. This will make the image layer to hide or unhide. IF you are at the correct layer of which you want to change the color, you are at the right place.

Now, choose Image/Adjustment/Color Balance from the main menu on the top or just use the Ctrl + B hotkey. A color balance window will show itself consisting of three color sliders. Adjust them by dragging with the mouse until you are satisfied with the image color. Confirm color changes to the layer by clicking the Ok button or you could also reject these by selecting the Cancel button.

Figure: Color Balance Window

In case you want to change the color scheme of the entire web design template, select top layer from the layers panel. Now, choose Layer/New Adjustment Layer/Color Balance from the main menu at the top. Press Ok to confirm the new layer changes. Now a color adjustment panel appears, follow the above instructions until satisfied. Confirm color changes by clicking Ok button or cancel by selecting the Cancel button.

After finishing with all image color modifications, update these changes to the web design template.

- Update Changes to Your Template

After finishing all changes to the web template as per your liking, using Photoshop, the template (including HTML documents) needs to be updated with all these changes.

In order to achieve this, a working knowledge of Photoshop slices would be required. Each slice in a PSD image represents an image or a background in an HTML document. Slices, normally in PSD file are surrounded by blue rectangles. In case slices can’t be viewed, you can enable the slice view from View/Show/Slices on the main menu at the top. Manage slices can be done using the slice tool.

All slices thus needed should be arranged in such a way that they do not overlap each other. Arrange the slices in a proper order by selecting the slice tool and the slice. You can use Window/Options from the main menu at the top. Use the slice order buttons on the left that will Bring to Front, Bring Forward, Send Backward and Send to Back.

Figure: Slice Order Buttons

Before proceeding further, make sure that all layers in your images are perfect and in order, using the layer tool as described before in this tutorial.

Now, the time has come to save the final copy of your web template by optimizing it for the web.
From the top main menu, choose File/Save For Web or use the Ctrl+Alt+Shift+S hotkey. A Save for Web window will pop up.

This window facilitates optimization options of all images. If you want your website to load faster, you can decrease the image quality thus reducing the size. In this window, select a slice using Select Slice Tool. You can also select multiple slices using the shift and click option. Image options panel can be seen to the left. Using the quality input box, you could change colors, compression ratio etc. for GIF, PNG or JPEG images.

Figure: Image Options

After selecting the slices that you want to update, click on save. A window will pop up saying “Save Optimized as”. Now browse to the HTML folder of your web design template. Edit File Type option to Images Only and the Slices option to Selected Slices. Photoshop will now ask for confirmation for image replacement. Click on replace.

To view the modifications and the final look of your website, go to the HTML folder of your web design template and double click on the HTML file.