37723

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

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

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

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

Русский

2013-09-25

3.35 MB

22 чел.

Лабораторная работа №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?


 

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

66692. Особенности управления качеством образовательных услуг 51 KB
  Государственное регулирование в области качества образования основано на механизме лицензирования аттестации и государственной аккредитации образовательных учреждений. В ее ходе устанавливается соответствие содержания уровня и качества подготовки выпускников требованиям государственных образовательных стандартов.
66693. Лицензирование программного обеспечения 46.26 KB
  Защита авторских прав распространяется на все виды программного обеспечения в том числе и на операционные системы и программные комплексы независимо от того на каком языке они написаны и в какой форме выражены включая исходный текст и объектный код ГК РФ часть 4 гл.
66694. А.С. Макаренко 142 KB
  Одну з кращих своїх статей, написану для ювілейного збірника з приводу п'ятиліття комуни імені Ф.Э.Дзержинського, Антон Семенович так і назвав «Педагоги знизують плечима». Ці люди не розуміли, що вже давно наступив момент, коли без теорії не можна стати гарним практиком...
66695. МАТРИЧНЫЕ (ИГОЛЬЧАТЫЕ) ПРИНТЕРЫ 105.5 KB
  В зависимости от технологии печати различают матричные струйные лазерные светодиодные сублимационные принтеры. От их количества зависит качество печати – в основном на рынке представлены матричные принтеры печатающая головка которых имеет 24 иголки плотность печати до 180 dpi.
66696. Технология и организация междугордных перевозок 92.5 KB
  За последние 10 лет парк автомобилей в России вырос почти в 25 раза. В 1999 году произошло существенное на 61 увеличение количества грузовых автомобилей в экономическом комплексе и впервые за последние годы зафиксирован рост объема грузовых автомобильных перевозок....
66697. Жизнь и научная деятельность Бориса Борисовича Полынова 376.55 KB
  Крупную роль в советском почвоведении играл Борис Борисович Полынов 1877 1952 гг. вышла в свет его книга Кора выветривания в которой были глубоко и всесторонне охарактеризованы основные фазы и главные типы кор выветривания Полынов 1934. Полынов одна из самых ярких личностей в советском почвоведении.
66699. Научный вклад Сергея Николаевича Виноградского в почвоведение 159.5 KB
  Кроме того Сергей Николаевич Виноградский объяснил процесс почвообразования показав что в почве существуют азотофиксирующие бактерии способные давать растениям необходимый для роста азот являющийся одним из главных лимитирующих факторов развития растений.
66700. Добровольский Глеб Всеволодович 111.53 KB
  Это вызвало повышенный интерес к проблемам экологии к проблемам биосферы Добровольский Г. Биография Глеб Всеволодович Добровольский академик Российской академии наук Президент Общества почвоведов при РАН известный почвоведэколог научная организационная...