JS Animated. Как редактировать изображения

Из этого туториала Вы узнаете, как редактировать изображения в Веб-шаблонах.

Есть несколько способов добавить изображение на ваш сайт в JS-анимированных шаблонах. Следуйте инструкциям, изложенным ниже:

Замена изображения

1. Откройте ваш сайт в браузере и исследуйте файл изображения, для того чтобы узнать название файла. Скопируйте его в буфер обмена:

   

2. Создайте новое изображение, используя скопированное название и расширение, например, icon_1.png or client-logo-2.jpg.

3. Войдите в ваш клиент FTP или откройте Файловый менеджер Панели управления хостингом.

4. Загрузите новое изображение в вашу папку ‘images’ на сервере и подтвердите замену файла.

Замена изображения в html

1. Откройте ваш сайт в браузере и исследуйте файл изображения, для того чтобы узнать название файла. Скопируйте его в буфер обмена.

2. Войдите в ваш клиент FTP или откройте Файловый менеджер Панели управления хостингом.

3. Загрузите новое изображение в папку ‘images’ на сервере.

4. Откройте файл *.html для редактирования, например, index.html.

5. Найдите файл с нужным названием, используя сочетание клавиш CTRL+F.

6. Замените путь к изображению на новый и сохраните изменения:

   

7. Проверьте ваш сайт, теперь на нём будет отображаться новое изображение.

Добавление нового изображения на страницу

1. Во-первых, подготовьте изображение. Откройте файлы шаблона и и откройте sources_###.zip, для того чтобы найти PSD-файлы шаблона. Вы можете ознакомиться с данным туториалом, для того чтобы узнать, как разархивировать sources.zip для MAC или для Windows OS и как редактировать PSD-файлы.

2. Экспортируйте изображения в формат .png, выбрав Сохранить для сети Интернет (Save for web).

3. Войдите в ваш клиент FTP или откройте Файловый менеджер Панели управления хостингом.

4. Загрузите новое изображение в папку ‘images’ на сервере.

5. Откройте файл *.html для редактирования, например, index.html.

6. Найдите файл с нужным названием или добавьте код для нового изображения следующим образом:

   <img alt="" src="path-to-image-goes-here" />

7. Укажите путь к новому изображению, например, «img/image.png» и сохраните изменения.

8. Проверьте ваш сайт, теперь он будет отображать новое изображение.

Вы можете также ознакомиться с детальным видео-туториалом ниже: