Як зробити гумову картинку.

«Гумової» називається картинка, що володіє здатністю масштабироваться. Створити таку картинку можна, використовуючи комп'ютерні програми. Її зручність полягає в тому, що вона «розтягується» в потрібному напрямку. Таке веб-творіння успішно відображається в будь-якому браузері. Якщо картинка містить якісь корисні елементи, «гумові» властивості підвищують її функціональність.
Вам знадобиться
  • зображення, сайт, програма Adobe Photoshop, додаток «Блокнот», HTML-код, кореневої каталог свого сайту
Інструкція
1
Знайдіть або створіть зображення, яке необхідно зробити масштабується і розмістити в мережі інтернет. Запустіть програму Adobe Photoshop. Відкрийте це зображення в програмі. На панелі інструментів знайдіть Slice Tool. З його допомогою розріжте зображення на частини. Розділіть її таким чином, щоб вся картинка складалася з трьох графічних елементів і центральна була порожньою. Це допоможе картинці розтягуватися при будь-якому дозволі монітора.
2
Збережіть картинку з оптимізацією для веб-формату (Save for web). При збереженні встановіть необхідний формат файлу - gif, jpeg або png. Для того, щоб змінити окремі фрагменти зображення, знайдіть в меню опцію Slice Select Tool і змініть частини картинки таким чином, щоб з розмір був мінімальним при найменших втратах якості під час візуалізації на екрані. Після зміни збережіть картинки як html і images.
3
Коли зберегли зображення, займіться редагуванням HTML-коду. Відкрийте збережений html-документ в додатку «Блокнот». Зітріть всі рядки коду, в яких немає необхідності. Збережіть незмінними тільки дані про таблицю, в яку вбудовані зображення
4
В рядках замість yourimage.gif"вкажіть шлях до зображень на вашому комп'ютері. Висота і ширина повинна бути відповідна.
5
Для того, щоб зробити розтягується середню частину зображення, коли крайні частини розводяться в сторони, пропишіть необхідну інформацію в рядках коду. Вкажіть параметри (ширину і висоту) власного зображення.
6
Проведіть завантаження створених зображень в кореневої каталог сайту. Вкажіть нові шляхи до картинок на сервері, відредагувавши таким чином HTML-код. Впишіть код картинки між тегами.
7
Перевірте властивості картинки. Спробуйте змінити її масштаб в інтернеті. Зображення повинно бути пластичним у напрямку.
Зверніть увагу
Картинка на тлі повинна звужуватися і розтягуватися у міру зміни вікна браузера.
Корисна порада
Не забувайте про розміри вашого монітора, створюючи зображення.