Підготовка зображень для WEB

Назва роботи: Підготовка зображень для WEB

Категорія: Лабораторна робота

Предметна область: Інформатика, кібернетика та програмування

Опис: Зображення в мережі також важливі як у будь-якому друкованому виданні. Зображення повинні бути правильно відмасштабовані, мати хорошу чіткість і збережені в колірному просторі sRGB. Тому для отримання хороших результатів при сайтобудівництві потрібно коректно відмасштабувати зображення перед розміщенням їх у мережу. В Інтернеті використовуються зображення з колірним простором sRGB.

Дата завантаження: 2013-09-25

Розмір файлу: 3.35 MB

Роботу завантажили: 28 чол.

Лабораторна робота №4

Підготовка зображень для WEB

Мета роботи: Вивчити послідовність обробки та підготовки зображень для подальшого використання в Інтернеті.

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

Проблеми зображень для Web.

Нижченаведені проблеми повинні бути враховані при створенні зображень для використання в Інтернеті (або при використанні в багатьох офісних програмах). Зображення повинні бути правильно відмасштабовані, мати хорошу чіткість та збережені у колірному просторі sRGB.

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

Зображення відмасштабоване у браузері

Зображення відмасштабоване в Artweaver

Розмір файла. Зображення для Web повинні мати по можливості невеликий обсяг, і разом з тим порівняно високу якість. Формат Jpeg надає відмінний компроміс між розміром та якістю. Використовуйте файли типу Jpeg для веб-сторінок і використовуйте налаштування на середню якість.

RGB зображення у браузері

sRGB зображення у браузері

Отже, зображення для Web мають бути відмасштабовані користувачем до необхідних розмірів; відмасштабовані з використанням опції Bicubic Sharper; повинні бути у колірному просторі sRGB; збережені у Jpeg форматі.

Порядок виконання роботи

1. Збереження зображення для електронної пошти.

1.1. Дублюйте ваш файл із зображенням із лабораторної роботи №1, згідно свого варіанта. Виконайте Зображення -> Дублікат. У діалоговому вікні Дублювати зображення , введіть нове ім'я файлу та увімкніть прапорець “Дублювати Тільки Об'єднані Шари” (мал. 4.1).

1.2. Змініть розмір зображення (мал. 4.2). Для цього виконайте Зображення -> Розмір Зображення. У діалоговому вікні Розмір Зображення встановіть роздільну здатність 72 dpi і встановіть відповідний розмір у пікселях. Найчастіше для фотографій це значення становить 500800 пікселів.

1.3. Збільште контрастність зображення, виконавши Фільтри -> Різкість -> Маска Різкості. Встановіть Кількість в 50%, Радіус в 1 піксель, опцію Поріг встановіть 10. Радіус в 1 піксель зазвичай використовується для зображень, призначених для web. Якщо використовувати великі значення, на невеликих зображеннях можуть з'явитися артефакти у вигляді сходів.

2. Підготовка зображень для Web-сторінок

2.1. Дублюйте вашфайл із заданим зображенням (див. п.1.1).

2.2. Виберіть інструмент обрізання Обрізання (С) з панелі інструментів. Налаштуйте параметри Обрізання (С) . Встановіть необхідну висоту та ширину у %, наприклад 80% та 60%. (Рис. 4.4).

2.3. За допомогою інструмента Обрізання (С) обведіть межу обрізки. Вибрані значення обмежуватимуть співвідношення сторін прямокутника 4х3, наприклад 800 на 600 пікселів, видимі на панелі Інфо . Після встановлення меж обрізки, натисніть Застосувати для того, щоб прийняти зміни і Artweaver перетворює розмір картинки відповідно до обрізки та встановлених розмірів. При необхідності потрібно змінити роздільну здатність зображення на 72 dpi.

2.4. Збільште контрастність зображення за допомогою фільтра Фільтри -> Різкість -> Маска Різкості. (Див. п.1.3).

2.5. Збережіть зображення за допомогою діалогового вікна Файл -> Зберегти як… . Встановіть формат файлу - “JPE G”, потім Зберегти та у діалоговому вікні (мал. 4.5) виберіть значення Якість , звертаючи увагу на отримуваний розмір . Єдине, що тут необхідно відзначити ¦ багато зображень для Web сторінок зберігаються з використанням опції Прогресивний (рис. 4.5). Коли прогресивні зображення розміщуються на веб-сторінці, вони з'являються дуже швидко, але з низькою роздільною здатністю, а потім, при подальшому завантаженні стають чіткішими. Ця опція дозволяє показати всю сторінку досить швидко, навіть якщо вона містить безліч зображень.

3. Додавання чорного бордюру та тіні.

Вам часто потрібно буде додавати до зображення просту рамку та/або тінь, щоб відокремити його від фону.

3.1 3.4. Виконайте перші чотири кроки для підготовки зображення для web.

3.5. Створітьвиділення навколо всього зображення | Виділення -> Все або Ctrl+A

3.6. Додайте чорну лінію навколо зображення, виконайте Виділення -> Змінити -> Стиснути … та у вікні ввести значення 2 пікс. Потім Виділення -> Інверсія Після цього вибрати Зображення -> Залити… і в діалоговому вікні у полі Зміст , Використовувати встановити Чорний (Мал. 4.6)

Цей простий ефект дозволяє зробити зображення суворішим і може бути межею малюнка.

3.7. У пунктах 3.1 3.4 зображення було правильно відмасштабовано, але тепер, щоб додати тінь, Вам необхідно його зменшити. Використовуйте діалогове вікно Зображення -> Розмір зображення для того, щоб зменшити розмір зображення до 95% від поточного (рис. 4.7).

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

3.9. Створіть простір навколо зображення для відкидання тіні, збільшивши розмір полотна. Для цього виконайте Зображення -> Розмір Полотна ... (Рис. 4.11). Натисніть кнопку, яка відповідає верхньому лівому кутку, це змусить полотно збільшитися праворуч і донизу. Введіть потрібні значення для розміру полотна.

3.10. Додати тінь. Для цього виберіть Шари -> Тінь … (рис. 4.10)

Значення, встановлені за замовчуванням, підходять для додавання тіні до web зображення. Натисніть кнопку OK. Тінь має з'явитися.

3.11. Зрештою, додайте відповідний фоновий колір. Потрібно використовувати такий же колір, як і на вашій веб-сторінці, наприклад,коричневий.

На закінчення згорніть усі шари командою Шари -> Об'єднати Все.

4. Створення кнопок

Незамінним елементом дизайну будь-яких Web-сторінок є графічні елементи керування кнопки. Artweaver дозволяє створити багато варіантів кнопок.

4.1 Проста квадратна кнопка

Для створення простої квадратної кнопки необхідно створити новий документ у форматі RGB (розмір полотна повинен відповідати розміру кнопки), виберіть кольори (основний – світлий, фоновий – темний) для заливки майбутньої кнопки градієнтом, виділіть все зображення та залийте майбутню кнопку лінійним градієнтом в одному напрямку (Рис. 4.11).

Потім виділіть все і Виділити-Змінити-Стиснути (Виділення приблизно в 25-35 пікселів, залежно від розміру кнопки і після цього виконати Виділення-розмити краю Виділення приблизно на 10-12 пікселів (рис. 4.12). Далі заповніть виділену область тим же градієнтом, але у зворотному напрямку, за бажанням на кнопці можна розмістити текст або намалювати стрілку.

Мал. 4.11. Початкове заливання градієнтом

Мал. 4.12. Виділення кордону заливання

Мал. 4.13. Готова кнопка

4.2. Випукла кнопка з тінню

Artweaver дозволяє застосувати безліч ефектів, багато з яких незамінні при створенні кнопок: накладення тіні від об'єкта на площині, від меж об'єкта на сам об'єкт тощо. Однак слід мати на увазі, що всі ці перетворення доступні тільки при створенні нового шару, на якому та здійснюються всі дії.

Створіть новий документ у форматі RGB, дублюйте шар Фон та у новому шарі сформуйте круглу область під передбачувану кнопку. Залийте її лінійним градієнтом в одному напрямку (основний колір -світлий, фоновий – темний). Потім зменшіть виділення через Виділити-Змінити-Стиснути на 12-16 пікселів і заповніть виділену область тим же градієнтом, але у зворотному напрямку.

Застосуйте ефект тіні за допомогою Шари -> Тінь …. Потім шари потрібно звести командою Шари -> Об'єднати Усі ..

При необхідності на кнопці можна розташувати текст або намалювати стрілку (рис. 4.14).

Мал. 4.14. Остаточний варіант кнопки з тінню

4.3. Кругла кнопка з окантовкою

Для цієї кнопки створіть новий документ у форматі RGB, сформуйте круглу область під передбачувану кнопку та залийте її радіальним градієнтом в одному напрямку (основний колір - світлий, фоновий - темний) (мал. 4.15). Потім зменшіть виділення на 14-16 пікселів через Виділення- >Змінити->Стиснути та заповнити виділену область тим же градієнтом, але у зворотному напрямку.

Після цього знову зменшіть виділення за допомогою Виділити-Змінити-Стиснути на 5-8 пікселів, залийте виділену область тим же радіальним градієнтом. Основний колір перед цим доведеться відновити (рис. 4.16).

1. Назва та мета роботи

2. Опишіть вимоги до зображень для WEB та

порядок їхньої підготовки. Скріншоти виконаних робіт

3. Опишіть порядок створення простої кнопки WEB інтерфейсу.

Скріншоти виконаних робіт

Як додати рамку до зображення?
Як додати тінь до зображення?
Як змінити розмір зображення?
Які особливості притаманні зображенням для веб-сторінок?
Який формат файлів потрібно використовувати для графіки?
Яким чином створити зображення кнопки в Artweaver?