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

«Гумової» називається картинка, що володіє здатністю масштабироваться. Створити таку картинку можна, використовуючи комп'ютерні програми. Її зручність полягає в тому, що вона «розтягується» в потрібному напрямку. Таке веб-творіння успішно відображається в будь-якому браузері. Якщо картинка містить якісь корисні елементи, «гумові» властивості підвищують її функціональність.

Вам знадобиться

зображення, сайт, програма Adobe Photoshop, додаток «Блокнот», HTML-код, кореневий каталог свого сайту

Інструкція

Знайдіть або створіть зображення, яке необхідно зробити масштабується і розмістити в мережі інтернет. Запустіть програму Adobe Photoshop. Відкрийте це зображення в програмі. На панелі інструментів знайдіть Slice Tool. З його допомогою розріжте зображення на частини. Розділіть її таким чином, щоб вся картинка складалася з трьох графічних елементів і центральна була порожньою. Це допоможе зображенні розтягуватися при будь-якому дозволі монітора.

Збережіть картинку з оптимізацією для веб-формату (Save for web). При збереженні встановіть необхідний формат файлу - gif, jpeg або png. Для того, щоб змінити окремі фрагменти зображення, знайдіть в меню опцію Slice Select Tool і змініть частини картинки таким чином, щоб з розмір був мінімальним при найменших втратах якості під час візуалізації на екрані. Після зміни збережіть картинки як html і images.

Коли зберегли зображення, займіться редагуванням HTML-коду. Відкрийте збережений html-документ в додатку «Блокнот». Зітріть всі рядки коду, в яких немає необхідності. Збережіть незмінними тільки дані про таблицю, в яку вбудовані зображення

У рядках замість yourimage.gif вкажіть шлях до зображень на вашому комп'ютері. Висота і ширина повинна бути відповідна.

Для того, щоб зробити розтягується середню частину зображення, коли крайні частини розводяться в сторони, пропишіть необхідну інформацію в рядках коду. Вкажіть параметри (ширину і висоту) власного зображення.

Проведіть завантаження створених зображень в кореневий каталог сайту. Вкажіть нові шляхи до картинок на сервері, відредагувавши таким чином HTML-код. Впишіть код картинки між тегами.

Перевірте властивості картинки. Спробуйте змінити її масштаб в інтернеті. Зображення повинно бути пластичним в будь-якому напрямку.