Photoshop Template

What is a Photoshop Template?
A photoshop template is a ready-made design using Adobe Photoshop. It is used to edit the images and text images for websites. You will get all the source files needed to edit the template. Editing photoshop templates is discribed brefily below.

Editing Photoshop Templates

Editing Photoshop Template

The PSD file is recognised by Adobe Photoshop. The PSD file will be layered for easy modification of the image file. All the image sources for your web design is available in it. You can edit the text, image, colors, or even add your own photos to your web design template and save the optimized image data for web using Adobe Photoshop.

To manage your PSD file, open it with Adobe Photoshop. It's easy, simply select "File / Open" from the top of the menu and browse to the location of your PSD file. An other simpler way to open the file is to right click on the PSD file and select "open with / Adobe Photoshop". You can also drag-and-drop it from your file browser to your Adobe Photoshop window. If the PSD files on your computer are associated with Photoshop software, simply double click it to open in Adobe Photoshop.

Editing text in Adobe Photoshop

For simplicity in modification and allow search engines to scan your information, most part of content text is represented in HTML as plain text. To get the perfect look, to attract visitors and make them stay on your website, your webpages not only needed usefull contents but perfect and beautiful external views. For this reason some portion of the text is represented as images in HTML. You can edit this text using Adode photoshop.
With your psd source file already opened in Adobe Photoshop, press "T" key to use type tool. Click with type tool cursor the text you want to edit. If you get a message "The following fonts are missing..." it means that you have not installed all fonts needed to modify text.
Click here - how to install missing fonts

Shortcut keys

"Shift + Enter" - start typing from the new line
"Ctrl + Enter" - quit editing mode
"ESC" - discard all editing changes

To change text attributes such as font family, style or color etc, select text properties you want to modify. In the option panel you find dropdown menu for text, align, icons and color. Using this menu you can edit the font family, fonts style, size and color. After editing the text you should update it to your webdesign.

Editing images in Adobe Photoshop

You can insert your company logo and image content to create a unique website. Open the PSD file in photoshop to edit the images. You can hide the original image before inserting your image or logo. This will help to to easily understand the needs. You can also remove the images if you are don't need it.

To select a layer, choose "Window / Layers". The highlighted layer in the layer list is the current selected layer. Click on the "eye" icon on the left of the layer to hide the layer. The image associated with the layer will disappear. An other easy way to select the layer is to right click with the mouse on the image, it will list the layers containing images will appear. You can choose different layer to adjust the selection. Now you have selected layer with image you want to remove. To hide it, click on "eye" icon at the left of layers name. Click trash can icon at the right bottom corner of layers list panel to remove it.

To add your own image to PSD file just drag and drop it from file browser to your Adobe Photoshop window, Or you can use "File / Open" form the menu. Your image will appear in separate window of Adobe Photoshop program. After the modifications drag and drop the image to the template using the move tool. Move the image to the right position. If the inserted image is overlapped by other images, you need to move it up in the layer list, until the layer image gets visible. After editing all the images you should save the images.

How to update changes to HTML template

To get the edited images you should know some basics about slices in Adobe Photoshop. The slices in the PSD file represents image or background in HTML file. To see slices choose "View / Show / Slices" from the menu. To manage the slices use the slice tool (hotkey "K"). Select " File / save for web " for the menu to save the edited image for website. Make sure the updating image don't overlap with other image. To get the image for small buttons, bring it forward. If you need plain text in HTML, you should hide the text. First select the text layer you need to hide and click on the "eye" icon. Now update date the images using "Save for web" hotkey "Ctrl+Alt+Shift+S".

You will get a new window to optimize the images. Here you can select the image quality. Select the slice using the select slice tool, in the right you will get panel with image options. You can change the quality, the image type. Select the slices you need to update by holding the "Shift" key. Click on the save button on the top of the window. Change the file type options to images only and save it with a new image name. It will be better if you save the new images separately to a different folder.

You will get all the new images in the folder. Copy and paste the new images to the templates "images folder". Replace the old image file name with the new image in the HTML file. Now check the modification's in the HTML file.