This video tutorial will show you how to edit images in the HTML based template. Due to the common files structure this tutorial is valid for such template types as:
- Full Site (static version)
- Flash or Swish Animated (static version)
- Flash or Swish template (static version)
- CSS Template
- Static Full Site
- Full Package (static version)
- Dynamic Flash or Swish(static version)
- XML Flash (static version).
First of all open the template directory. Depending on the template version you want to edit please open site(static) or site_flash(animated) folders.
In the folder you can see several HTML files: index, index-1, index-2 etc. Each index file is a separate page of your template. These files could be modified with your HTML editor (Notepad, Adobe Dreamweaver etc).
Replacing image using HTML editor
Open any index file with the HTML editor. To locate the images you can use the Find and Replace tool (CTRL+F). Search for the <img tag.
Images are inserted into the HTML file using the following structure:
<img src="images/img1.jpg" alt="">
where images/img1.jpg is the root to the image file and it’s name. So to find the specific image you can open the images folder, find the necessary image, copy it’s filename and using the Find and Replace tool in HTML editor find the code for the image.
Then you need to create new image that will be a replacement for the default one. Upload new image to the images (site/images or site_flash/images) folder. You can create new image with the same filename and on uploading it to the images folder just replace the esiting one or create new image with the new filename and change the image filename in the HTML code.
For example we have an image img1.jpg, the html code for this image is:
<img src="images/img1.jpg" alt="">
If you created new image, save it as img1.jpg, upload to the images folder and new image will appear on the page. Make sure the image have same dimentions, name and extension (jpg, gif, png etc).
The other situation is if you have image with different filename and extension. Let it be sample-image.png Upload this file to the images folder and then replace the default image html code with the following one:
<img src="images/sample-image.png" alt="">
The same way you can replace any other image.
Feel free to check the detailed video tutorial below:
Replacing image using Adobe Photoshop
The other way it to replace the image directly in the source .psd file. The source .psd files are located in the sources/psd folder of the template package. You need Adobe Photoshop software to edit them.
Usually there are several files in the sources/psd folder. Each psd file contains images and design for the specific page of your template.
Open the .psd file in Adobe Photoshop software.
1. Make sure the the slices are enabled. Select View > Show > Slices menu item from the top menu.
2. From the tools bar select the Slice Select tool.
3. All images are rounded by the slices. Using the Slice Select tool double-click on any slice. In the appeared window you’ll see the slice details:
- Name – the filename of the image.
- W: – width of the image
- H: – height of the image
4. When you found the necessary slice and you are shure that your new image matches slice dimentions you can add new image to the psd file.
- Select the Move Tool from the tools bar (V hotkey)
- Hold the CTRL button and click on the image you want to edit.
- In the layers window the image layer should be selected. If clicking the image you got the folder selected in the layers window then you’ll need to find the image layer manually.
- Now drag your new image to the Photoshop window. Then using the Move tool put it to the desired position.
- Adjust the layers to put new image above the default one.
- When you are done go to File menu and select Save For Web and Devices option.
To learn more about slices and Save for web procedure please check the following video tutorial on how to Save for web.
If your new image dimentions differ from the default ones we recommend you to replace images using HTML editor.
Feel free to check the detailed video tutorial below:How to edit images in HTML based template,