37723

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

Лабораторная работа

Информатика, кибернетика и программирование

Изображения в сети также важны как и в любом печатном издании. Изображения должны быть правильно отмасштабированы иметь хорошую четкость и сохранены в цветовом пространстве sRGB. Поэтому для получения хороших результатов при сайтостроительстве нужно корректно отмасштабировать изображения перед помещением их в сеть. В Интернет используются изображения с цветовым пространством sRGB.

Русский

2013-09-25

3.35 MB

25 чел.

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

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

Цель работы: Изучить последовательность обработки и подготовки изображений для последующего использования в Internet.

Теоретические сведения

На сегодняшний момент гораздо больше изображений размещаются в сети, чем выводятся на печать. Интернет стал основной средой для общения и распространения информации. Изображения в сети также важны как и в любом печатном издании.

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

Нижеперечисленные проблемы должны быть учтены при создании изображений для использования в Интернет (или при использовании во многих офисных программах). Изображения должны быть правильно отмасштабированы, иметь хорошую четкость и сохранены в цветовом пространстве sRGB.

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

Изображение отмасштабированное в браузере

Изображение отмасштабированное в Artweaver

sRGB. В Интернет используются изображения с цветовым пространством sRGB. Если вы работает в цветовом пространстве RGB или каком-то другом, тогда перед сохранением изображения для web необходимо переконвертировать изображения в sRGB. Это условие является довольно важным, потому что RGB изображения при просмотре их через браузер будут казаться плоскими.

Размер файла. Изображения для Web должны иметь по возможности небольшой объем, и вместе с тем – сравнительно высокое качество. Формат Jpeg предоставляет отличный компромисс между размером и качеством. Используйте файлы типа Jpeg для Web страниц и при сохранении используйте настройки на среднее качество.

RGB изображение в браузере

sRGB изображение в браузере

Итак, изображения для Web должны быть отмасштабированы пользователем до необходимых размеров; отмасштабированы с использованием опции “Bicubic Sharper”; должны быть в цветовом пространстве sRGB; сохранены в Jpeg формате.

Порядок выполнения работы

1. Сохранение изображения для e-mail.

1.1. Дублируйте ваш файл с изображением из лабораторной работы №1, согласно своего варианта. Выполните Изображение -> Дубликат. В диалоговом окне Дублировать изображение, введите новое имя файла и включите флажок “Дублировать Только Объединенные Слои” (рис. 4.1).

Рис. 4.1.

Рис. 4.2.

1.2. Измените размер изображения (рис. 4.2). Для этого выполните Изображение -> Размер Изображния. В диалоговом окне Размер Изображния, установите разрешение в 72 dpi и установите подходящий для Вас размер в пикселях. Чаще всего для фотографий это значение составляет 500–800 пикселей.

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

1.4. Сохраните изображение выполнив команду Файл -> Сохранить Как…. Установите формат файла в “GIF”, затем Сохранить и в диалоговом окне (рис. 4.3) выберите Палитра -> Оптимизированная. После сохранения проверьте информацию о файле и его размер. Если размер файла получился меньше 100Kб, то такой файл подходит для использования в E-mail и Web.

               

Рис. 4.3

2. Подготовка изображений для Web страниц

Создания изображений для Web страниц практически ничем не отличается от создания изображений для E-mail. Обычно изображения для Web страниц сохраняют с уже известными значениями размеров по высоте и ширине.

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

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

Рис. 4.4.

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

2.4. Увеличьте контрастность изображения используя фильтр Фильтры -> Резкость -> Маска Резкости...(см. п.1.3).

2.5. Сохраните изображение, используя диалоговое окно Файл -> Сохранить Как…. Установите формат файла - “JPEG”, затем Сохранить и в диалоговом окне (рис. 4.5) выберите значение Качество, обращая внимание на получаемый размер . Единственное, что здесь необходимо отметить – многие изображения для Web страниц сохраняются с использованием опции Прогрессивный (рис. 4.5). Когда прогрессивные изображения помещаются на web страницу, они появляются очень быстро, но с низким разрешением, а затем, при последующей загрузке становятся четче. Это опция позволяет показать всю страницу довольно быстро, даже если она содержит множество изображений.

Рис. 4.5.

Рис. 4.6.

3. Добавление черного бордюра и тени.

Вам часто нужно будет добавлять к изображению простую рамку и/или тень для того чтобы отделить его от фона.

3.1–3.4. Следуйте первым четырем шагам для подготовки изображения для web.

3.5. Создайте выделение вокруг всего изображения – Выделение -> Все или Ctrl+A

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

Этот простой эффект позволяет сделать изображение более строгим и может служить границей рисунка.

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

Рис. 4.7.

Рис. 4.8

3.8. Если Ваше изображение имеет только слой Фон, то вам необходимо изменить его тип в слое изображения. Это делается для того, чтобы к нему можно было применить эффект отбрасывания тени. Щелкните правой кнопкой на слое Фон и выберите Дублировать  слой. Теперь в файле есть слой изображения (рис. 4.8).

3.9. Создайте пространство вокруг изображения для отбрасывания тени увеличив размер холста. Для этого выполните Изображение -> Размер Холста…(рис. 4.11). Нажмите кнопку, которая соответствует верхнему левому углу, это заставит холст увеличиться вправо и вниз. Введите необходимые значения для размера холста.

Рис. 4.9

3.10. Добавьте тень. Для этого выберите Слои -> Тень … (рис. 4.10)

Рис. 4.10.

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

3.11. В конце концов, добавьте соответствующий фоновый цвет. Нужно использовать такой же цвет, как и на вашей web странице, например, коричневый.

В заключение сверните все слои командой Слои -> Объединить Все.

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.15.

Рис. 4.16

4.3. Круглая кнопка с окантовкой

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

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

СОДЕРЖАНИЕ ОТЧЕТА

1. Название и цель работы

2. Опишите требования, предъявляемые к изображениям для WEB и   

    порядок их подготовки. Скриншоты выполненных работ

3. Опишите порядок создания простой кнопки для WEB интерфейса.

   Скриншоты выполненных работ

4. Выводы

Контрольные вопросы

  1.  Как добавить рамку к изображению?
  2.  Как добавить тень к картинке?
  3.  Как изменить размер изображения?
  4.  Какие особенности присущи изображениям для web страниц?
  5.  Какой формат файлов нужно использовать для web графики?
  6.  Каким способом создать изображение кнопки в Artweaver?


 

А также другие работы, которые могут Вас заинтересовать

67827. ПРАВОВЕ РЕГУЛЮВАННЯ ВИКОРИСТАННЯ ТА ОХОРОНИ РОСЛИННОГО СВІТУ 117.5 KB
  Рослинний світ становить сукупність усіх видів рослин, а також грибів та утворених ними угруповань на певних території. Це правове визначення рослинного світу як об’єкта навколишнього природного середовища міститься в ст. З Закону України «Про рослинний світ».
67828. ЗАХОПЛЮЮЧІ ПРИСТРОЇ (ЗП) ПРОМИСЛОВИХ РОБОТІВ 1 MB
  Технологічне призначення: захопюючі і утримуючі ЗП призначені для зхахоплення і утримування об‘єктів за допомогою гачків петель вилок лопаток губок пальців голок кліщів еластичних камер струменів повітря магнімного поля вакууму електростатичного притягання адгезії липучих накладок та інших засобів...
67829. ПРАВОВЕ РЕГУЛЮВАННЯ ВИКОРИСТАННЯ ТА ОХОРОНИ ЛІСІВ 101.5 KB
  Ліс є невід’ємною та незамінною частиною світової екосистеми. Значення лісів для навколишнього природного середовища проявляється в корисних властивостях лісів. Корисними властивостями лісів є їх здатність зменшувати вплив негативних природних явищ, захищати ґрунти від ерозії, регулювати стік води...
67830. СИСТЕМА ТРАНСПОРТНИХ І НАКОПИЧУВАЛЬНИХ ЗАСОБІВ РТС. НАВАНТАЖУВАЛЬНО-РОЗВАНТАЖУВАЛЬНІ ЗАСОБИ РТС 1.82 MB
  В загальному випадку транспортна система складається з складів 12 заготівок, оброблених деталей і зібраних виробів, складів 24 напівфабрикатів, інструментів і технологічного оснащення, а також транспортних засобів їхньої доставки і завантажувально-розвантажувальних пристроїв, що забезпечують...
67831. ПРАВОВЕ РЕГУЛЮВАННЯ ВИКОРИСТАННЯ ТВАРИННОГО СВІТУ 86.5 KB
  Відносини у галузі охорони, використання і відтворення тваринного світу, об’єкти якого перебувають у стані природної волі, у напіввільних умовах чи в неволі, на суші, у воді, ґрунті та повітрі, постійно чи тимчасово населяють територію України або належать до природних багатств її континентального...
67832. МІЖНАРОДНО-ПРАВОВЕ РЕГУЛЮВАННЯ ВИКОРИСТАННЯ ПРИРОДНИХ РЕСУРСІВ 125 KB
  Планета Земля, яка є нашим спільним домом, для сучасної людини перестала бути безмежною, в зв’язку з чим, всі природні та інші процеси, які відбуваються в сучасному світі, стали взаємозалежними та взаємопов’язаними. Так, наприклад, пестициди (ДДТ), що використовувалися...
67833. ТРАНСПОРТНІ ТА СКЛАДСЬКІ ЗАСОБИ РТС 418.5 KB
  Конвейєром називають машину для безперервного транспортування виробів. Відмітною особливістю багатьох конструкцій конвейєрів, разом з виконанням функцій по переміщенню заготівок, є можливість утворення невеликих міжопераційних заділів, що забезпечують незалежну роботу складних верстатів в складі РТС.
67834. ІНФОРМАЦІЙНО-ВИМІРЮВАЛЬНІ ПРИСТРОІ СИСТЕМ КЕРУВАННЯ РТС. СИЛОМОМЕНТНІ СИСТЕМИ НАДАННЯ ЧУТЛИВОСТІ РТС 208 KB
  Якщо при великосерійному виробництві з невеликими змінами продукції що випускається сумарні витрати на створення жорсткопрограмованого робототехнологічного комплексу складаються з трьох приблизно рівних частин одна з яких вартість сучасного високоточного промислового...
67835. ТАКТИЛЬНІ СИСТЕМИ НАДАННЯ ЧУТЛИВОСТІ РТС 172 KB
  Тактильними називають такі системи надання чутливості які дозволяють роботу зареєструвати факт дотику з обєктом визначити положення точок дотику і виміряти контактні сили в кожній з них. Прообразом тактильних систем надання чутливості послужило відчуття дотику яким наділені багато живих істот.