Головна Головна -> Підручники -> Підручник Вивчаємо FrontPage скачати онлайн-> Використання спеціальних засобів FrontPage для роботи із зображеннями

Використання спеціальних засобів FrontPage для роботи із зображеннями



У FrontPage передбачений цілий набір корисних засобів для редагування зображень. Звичайно, ці засоби не замінять повноцінний редактор графічних файлів, однак в багатьох випадках вони зекономлять вам безліч часу. Цими засобами можна скористатися за допомогою панелі інструментів Picture. Кнопки цієї панелі інструментів і їх призначення наведені в табл. 3.

Таблиця 6.3. Панель інструментів Picture
Кнопка Назва Призначення
Insert Picture Вставляє малюнок на поточну Web- сторінку
Text Розміщує текст поверх малюнка
Auto Thumbnail Замінює малюнок його копією зменшеного розміру і створює гіперпосилання від цієї копії до вихідного малюнка
Positioned Absolutely Помічає зображення як позиційоване з використанням абсолютних значень
Bring Forward Зображення переводиться на одну сходинку ближче (до переднього плану) по відношенню до інших елементів
Send Backward Зображення переводиться на одну сходинку далі (до заднього плану) по відношенню до інших елементів
Rotate Left Зображення повертається на 90 градусів проти годинникової стрілкою
Rotate Right Зображення повертається на 90 градусів за годинниковою стрілкою
Flip Horizontal Перевертає зображення справа наліво (дзеркальне зображення)
Flip Vertical Повертає зображення вверх ногами (перевернуте зображення)
More Contrast Збільшується контраст: темні області зображення стають темнішими, а світлі – світлішими
Less Contrast Зменшується контраст: темні області зображення стають світлішими, а світлі – темнішими
More Brightness До всіх частин зображення пропорційно додається білий
Less Brightness До всіх частин зображення пропорційно додається чорний
Crop Дозволяє виділити мишкою частину зображення, яка замінить вихідне
Set Transparent Color Дозволяє вказати на зображенні в форматі GIF колір, який буде сприйматися браузером як прозорий
Black and White ??????? Зображення стає чорно-білим
Wash Out Зображення висвітлюється так, що його можна використовувати як фонове
Bevel Зображення стає “випуклим”
Resample Фізично змінює розмір зображення
Select Дозволяє вибрати мишкою зображення чи активну область
Rectangular Hotspot Дозволяє помітити активну область прямокутної форми
Circular Hotspot Дозволяє помітити активну область круглої форми
Polygonal Hotspot Дозволяє помітити активну область у формі багатокутника
Highlight Hotspots Виділяє активні області на виділеному зображенні суцільним білим кольором для їх перегляду
Restore Відновлює зображення у відповідності з останнім збереженим варіантом

Додавання написів у зображення

Web-дизайнерам часто доводиться стикатися з необхідністю додати текстовий напис в зображення. Самий простий приклад – додавання напису на малюнок кнопки. У FrontPage для цього передбачений спеціальний засіб, який називається Text On GIFs. Приклади його використання приведені на мал. 10. Скористатися цим засобом дуже просто.

  1. Якщо ви ще не розмістили зображення на Web-сторінці, зробіть це.
  2. Виділіть зображення (клацнувши по ньому мишею).
Мал. 9. Лівий малюнок – це початкове зображення. Малюнок з написом – результат застосування засобу Text On GIFs
  1. У панелі інструментів Picture виберіть Text.
  2. Навколо зображення або його частини виникне ще одна рамка з квадратиками. Перетягніть її в те місце малюнка, де ви хочете розмістити напис, і наберіть потрібний вам текст. Ви знову зможете скористатися рамкою для переміщення тексту в інше місце, клацнувши по ньому (по тексту).
  3. Виділивши текст, ви зможете скористатися для нього будь-якими можливостями форматування, як за допомогою пункту Font в меню Format, так і за допомогою кнопок на панелі інструментів Format
  4. Після закінчення роботи з текстом на малюнку клацніть мишею в будь-якому місці сторінки за межами малюнка. Редагування буде завершене.

Один з можливих способів гарантувати, що текст в браузере відвідувача буде відображатися саме так, як ви задумали (незалежно від встановлених на комп’ютері відвідувача шрифтів), – створити повністю прозорий файл GIF і розмістити на ньому текст. Головна перевага засобу Text On GIFs в порівнянні з обробкою зображення в спеціалізованих редакторах – значна економія часу.

Багато дизайнерів використовують набори прозорих GIF-файлів, щоб гарантувати правильне розміщення тексту в тій або іншій області екрана. Існує велика спокуса взяти маленький прозорий GIF, розтягнути його і розмістити на ньому зображення. Але це треба робити дуже обережно.

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

Пам’ятайте про те, що колір тексту повинен відрізнятися від кольору, вибраному у вихідному файлі GIF в якості прозорого. В протилежному випадку ваш текст також стане прозорим. Легше за все для перевірки на певний час відключити властивість прозорості (для цього клацніть правою кнопкою по зображенню, виберіть Picture Properties і зніміть прапорець Transparency).

Створення значків для попереднього перегляду зображень

Завантаження зображень часто займає багато часу. Поширений підхід до вирішення цієї проблеми – розмістити на Web-сторінці невелике зображення для попереднього перегляду (thumbnail) з гіперпосиланням на зображення вихідного розміру. Таким чином, велике зображення вихідного розміру буде завантажуватися лише за бажанням користувача. Для створення значків попереднього перегляду у FrontPage передбачені спеціальні засоби.

  1. Вставте зображення повного розміру на те місце, де, за вашою думкою, повинен знаходитися значок попереднього перегляду.
  2. Виділіть це зображення.
  3. Виберіть в панелі інструментів Picture пункт AutoThumbnail (чи натисніть Ctrl+T). В результаті FrontPage в автоматичному режимі знищить зображення великого розміру зі сторінки, розмістить на його місці значок попереднього перегляду і створить гіперпосилання від цього значка до вихідного зображення.
  4. Якщо є необхідність, настройте розмір значка за допомогою звичайної рамки з квадратиками.
  5. При збереженні Web-сторінки FrontPage відкриє діалогове вікно Save Embedded File, в якому ви зможете змінити імена іконки та вихідного файла зображення.

Точне позиціювання зображень

На панелі інструментів Picture є три кнопки, які дозволяють настроювати абсолютне позиціювання зображення на сторінці. Звичайно абсолютне позиціювання означає, що ви повинні вказати точні координати x-y від верхнього лівого кута вікна браузера. FrontPage дозволяє вам забути про виміри, виконуючи за вас всю чорнову роботу.

Для того, щоб виконати абсолютне позиціювання зображення на Web-сторінці, проведіть наступні операції:

  1. Виберіть зображення.
  2. Натисніть кнопку Positioned Absolutely на панелі інструментів Picture.
  3. Перетягніть зображення в потрібне місце.

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

Зображення, позиціоновані з використанням абсолютних значень, можна розміщувати шарами, один над одним. Той же прийом можна використати не тільки для двох, але і для невизначеної кількості зображень. Вмістити зображення над іншими (на передньому плані) можна за допомогою кнопки Bring Forward, а відправити його на задній план можна кнопкою Send Backward.

Наприклад, мішень на мал. 10 знаходиться на передньому плані, а черепаха – на задньому.

Мал. 10. Зображення у FrontPage можна накладати одне на одне.
Зображення мішені розміщене над зображенням черепахи

Для накладення зображень одне на одне використовується позиціонування CSS2. Перший браузер, який підтримує CSS2 – це Internet Explorer 4. Netscape Navigator версії 4 не підтримує накладення зображень. У результаті малюнок з мішенью і черепахою в ньому буде виглядати так, як показано на мал. 11.

Мал. 11. Позиціонування CSS2 не підтримується Netscape Navigator 4

Поворот і обертання зображень

У панелі інструментів Picture передбачені чотири кнопки для поворотів та обертання зображень: дві з них здійснюють поворот зображення на 90 градусів, і ще дві дозволяють перевернути зображення справа наліво або зверху вниз. Результат показаний на мал. 12.

Мал. 12. Приклад застосування засобів роботи із зображеннями у FrontPage

FrontPage дозволяє обертати і повертати одне і те ж зображення необмежену кількість разів. Після застосування цього засобу при збереженні файла FrontPage, як звичайно при зміні графічних файлів, відкриє діалогове вікно Save Embedded Images. Ви зможете записати змінений файл під іншою назвою, зберігши тим самим початковий файл в недоторканості.

діалогове вікно Save Embedded Images

Зміна контрасту і яскравості

У FrontPage передбачені чотири кнопки для зміни контрасту і яскравості зображення (див. табл. 3). Результат із застосування показаний на мал. 12 (другий набір зображень). Одну і ту ж кнопку для настройки контрасту або яскравості можна застосувати до одного зображення декілька разів. У результаті яскравість або контраст зміниться пропорціонально числу натиснень.

Збільшення контрасту робить більш темні області ще темнішими, а світлі – ще світлішими. Зменшення контрасту дає зворотний ефект. Збільшення яскравості пропорціонально додає білий колір до всіх дільниць зображення, а зменшення яскравості – точно так само додає чорний колір.

Як при будь-якій іншій зміні зображення, після зміни яскравості FrontPage при збереженні відкриє діалогове вікно Save Embedded Images, надаючи тим самим можливість зберегти модифіковане зображення під іншим ім’ям.

Заміна цілого зображення його частиною і зміна розміру зображення

Заміна цілого зображення його частиною (Cropping) – це процес, в ході якого початкове зображення замінюється вибраною вами його частиною. У результаті всі зайві пікселі відкидаються і все зображення стає меншим. Ось як виглядає ця операція у FrontPage.

  1. Виділіть зображення.
  2. Натисніть кнопку Crop в панелі інструментів Picture (див. табл. 3).
  3. FrontPage помістить звичайну рамку з квадратиками всередину виділеного зображення. Ви можете перетягнути цю рамку або самостійно виділити мишею дільницю всередині зображення.
  4. Натисніть кнопку Crop ще раз. Початкове зображення буде замінено виділеною вами частиною.

При збереженні Web-сторінки FrontPage розцінює створений вами файл нового розміру як абсолютно новий файл і пропонує зберегти його за допомогою діалогового вікна Save Embedded Images. Однак, зверніть увагу, що за умовчанням для цього файла пропонується та ж назва, що і для початкового. Якщо ви хочете зберегти початковий файл, виберіть для нового файла іншу назву.

ПОРАДА

Найкраще зберігати зображення не в кореневій папці вашого Web, а в спеціальній папці Images. При створенні Web FrontPage спеціально створює її для вас.

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

Зверніть увагу, що при такій операції не змінюється ні початкове зображення, ні його розмір. Змінюється тільки розмір простору, що виділяється браузером для показу зображення. Тому в багатьох випадках краще змінити розмір початкового зображення. Далі в цьому розділі буде розглянуто, як це можна зробити засобами FrontPage.

Настройка прозорості

Всі зображення в форматі GIF і JPEG мають прямокутну форму. Однак, більшість об’єктів, з якими ми маємо справу в реальному житті, мають зовсім інші форми. Можна спробувати вирішити цю проблему, помістивши малюнки в спеціальні фрейми зображень, однак в більшості випадків вас навряд чи влаштує результат. Результат буде набагато кращим, якщо ви помітите часгини зображення, що вами не використовувалися, як прозорі (тобто співпадаючі із загальним фоном Web-сторінки в браузері). У результаті вийде так, неначе видима частина зображення наклеєна на шматок абсолютно прозорого скла. Приклад використання такого прийому показаний на мал. 13.

Мал. 13. Зліва для зображення використовується білий фон, а справа – прозорий

Настроїти прозорість можна з більшості спеціалізованих редакторів зображень, що підтримують формат GIF. Однак те ж саме можна зробити і з допомогою FrontPage.

  1. Виділіть зображення на Web-сторінці.
  2. Натисніть на кнопку Make Transparent в панелі інструментів Picture (див. табл.3).
  3. Клацніть мишею по будь-якому пікселю на виділеному зображенні. Всі дільниці зображення, колір яких співпадає з вибраним вами, стануть прозорими.
  4. Якщо вам знадобилося зробити прозорим інший колір, повторіть кроки 2 і 3.
  5. Для відключення прозорості зображення відкрийте його властивості і на вкладці General зніміть прапорець Transparent.

Перетворення зображення в чорно-біле

Для перетворення зображення в чорно-біле достатньо просто виділити його і натиснути кнопку Black and White в панелі інструментів Picture. Повторне натиснення цієї кнопки дозволяє знову повернути кольори зображенню (якщо ви ще не встигли його зберегти).

Освітлення зображення

FrontPage дозволяє освітлити (“відмити”) зображення. Це зручно, наприклад, якщо ви плануєте зробити це зображення фоновим і переживаєте про те, щоб воно не заважало сприйняттю тексту.

Висвітлення зображення проводиться за допомогою кнопки Wash Out. Результат показаний на мал. 12 (нижній ряд). Цікаво, що ви можете висвітлити зображення необмежену кількість разів, але перед кожним наступним натисненням кнопки Wash Out необхідно зберігати зображення.

Надання зображенню “випуклості”

При застосуванні ефекту “випуклості” (beveling) верхній і лівий краї зображення робляться світлішими, а нижній і правий краї – темнішими. В результаті зображення здається випуклим.

Фізична зміна розміру вихідного зображення

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

На відміну від звичайної зміни розмірів зображення (коли фактично змінюється тільки простір, що відводиться під зображення браузером), фізична зміна розміру приводить до реальної зміни файлу. Тому при збереженні Web-сторінки буде відкрите діалогове вікно Save Embedded Files.

Відновлення зображення

Поки ви не зберегли зображення, FrontPage дозволяє вам повернутися до його початкового вигляду. Для цього досить виділити малюнок і скористатися кнопкою Restore в панелі інструментів Picture. Якщо ж вам треба відмінити щойно внесені вами зміни, скористайтеся командою Undo в меню Edit або клавіатурною комбінацією Ctrl+Z.








Популярні глави цього підручника:



Всі глави цього підручника:

Вивчаємо FrontPage