An mportant step in creating a unique web site from our web design template is the ability to insert your company logo and image content. If you are starting a new web project and do not have a company logo yet you can purchase exclusive logos in our template section.
First, open your PSD source file in Adobe Photoshop. You can get info about that in the Opening your PSD file tutorial.
Before inserting your own image in your web design template source you should delete or hide the original image. Hide images if you are not sure about the need of these images in the future, if you are sure you do not need it, then simply delete it. To accomplish both of these operations you need to locate the layer containing the image. The easiest way to do that is to control click it, just click on this image holding the "
Ctrl" button. If there are transparent layers existing over this image layer you will have to find the layer it is on first. The top layer layer will be selected when you open an image and if the image you want to adjust is not on the top layer, then clicking on the picture will do nothing.
Fig 8.4
Layers Panel
To check the content of a current selected layer do the following. Go to layers panel, choose
Window/Layers. Find the highlighted layer in the layer list, this is the current selected layer. At the left of the layer name you can see "
eye" icon. Click it to hide/unhide layers and see which images or elements disappear. Do this until you find the image you want to work on then click on the name of the image which is next to the "eye" symbol. This activates the layer and now you can work with that particular image.
Another way to find an image is to right click on the image. A list of layers containing images will appear in a drop-down list.. Choose different layers from that list. Use the procedure described above to make sure that you have selected right layer.
Fig 8.5
Right Click Image to See Layers List
All right now you have selected the layer with the image you want to remove. To hide it, click on the "
eye" icon at the left of the layer name. If you want to remove it click on the
trash can icon at the right bottom corner of the layers list panel, or right click and select "delete".
You can add your own image to a PSD file in very simple way. Just drag and drop it from your file browser to your Adobe Photoshop window. Or you can use
File/Open... form the top menu. Your image will appear in a separate window of Photoshop. You can do the prior modifications there. For example you can crop it using the crop tool (hotkey "
C") or make some color adjustments to make the image fit into the templates color scheme selecting
Image/Adjustments/Color Balance... from the top menu.
The next step is to move your image to your web design template PSD window. To do this, select the move tool
from tools panel or use the "
V" hotkey. Then drag and drop the image using that tool to your template window of Photoshop.
Now you can move that image to the right location using same tool. If the image that you have just inserted is overlapped or overlaps other images or text you should move it in the layers list. Go to layers list panel and left click and drag the box up or down in the layers list until it does not cover any other layers contents.
After you have done all images modifications you should update those changes to your web design template. For detailed instructions of how to do it read the Update changes to your template tutorial.
Changing images in photoshop... 
Linear Mode
