37723

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

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

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

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

Русский

2013-09-25

3.35 MB

21 чел.

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


 

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

83669. Теорема об активном двухполюснике для симметричных составляющих 162.5 KB
  При мысленном устранении несимметрии несимметричного участка для оставшейся цепи имеет место симметричный режим холостого хода. В соответствии с методом эквивалентного генератора теперь необходимо определить эквивалентные ЭДС и входные сопротивления симметричной цепи. Величина соответствующая напряжению холостого хода на зажимах подключения локальной несимметрии определяется при отключении локальной несимметричной нагрузки любым известным методом расчета линейных цепей причем в силу симметрии цепи расчет проводится для одной фазы. В...
83670. Вращающееся магнитное поле 126.5 KB
  Магнитное поле катушки с синусоидальным током При пропускании по обмотке катушки синусоидального тока она создает магнитное поле вектор индукции которого изменяется пульсирует вдоль этой катушки также по синусоидальному закону Мгновенная ориентация вектора магнитной индукции в пространстве зависит от намотки катушки и мгновенного направления тока в ней и определяется по правилу правого буравчика. С учетом вышесказанного магнитное поле катушки с синусоидальным током называют пульсирующим. Круговое вращающееся магнитное поледвух и...
83671. Линейные электрические цепи при несинусоидальных периодических токах 129.5 KB
  Причины возникновения несинусоидальных напряжений и токов могут быть обусловлены или несинусоидальностью источника питания или и наличием в цепи хотя бы одного нелинейного элемента. Кроме того в основе появления несинусоидальных токов могут лежать элементы с периодически изменяющимися параметрами. Характеристики несинусоидальных величин Для характеристики несинусоидальных периодических переменных служат следующие величины и коэффициенты приведены на примере периодического тока: Максимальное значение .
83672. Резонансные явления в цепях несинусоидального тока 130 KB
  Как и при синусоидальных токах резонанс на кй гармонике соответствует режиму работы при котором ке гармоники напряжения и тока на входе цепи совпадают по фазе иначе говоря входное сопротивление входная проводимость цепи для кй гармоники вещественно. Для кй гармоники тока можно записать где действующее значение кй гармоники ЭДС. Таким образом при изменении С величина кй гармоники тока будет изменяться от нуля при С=0 до при достигая максимума при резонансе см. Следует отметить что несмотря на то что обычно с ростом...
83673. Переходные процессы в линейных электрических цепях с сосредоточенными параметрами 157.5 KB
  Для цепей с заданными постоянными или периодическими напряжениями токами источников принужденная составляющая определяется путем расчета стационарного режима работы схемы после коммутации любым из рассмотренных ранее методов расчета линейных электрических цепей. общее решение уравнения 2 имеет вид 4 Соотношение 4 показывает что при классическом методе расчета послекоммутационный процесс рассматривается как наложение друг на друга двух режимов – принужденного наступающего как бы сразу после коммутации и свободного имеющего...
83674. Способы составления характеристического уравнения 175.5 KB
  Путем исключения из системы уравнений описывающих электромагнитное состояние цепи на основании первого и второго законов Кирхгофа всех неизвестных величин кроме одной относительно которой и записывается уравнение 2; путем использования выражения для входного сопротивления цепи на синусоидальном токе; на основе выражения главного определителя. Согласно первому способу в предыдущей лекции было получено дифференциальное уравнение относительно напряжения на конденсаторе для последовательной RLCцепи на базе которого записывается...
83675. Переходные процессы в цепи с одним накопителем энергии и произвольным числом резисторов 167.5 KB
  Общий подход к расчету переходных процессов в таких цепях основан на применении теоремы об активном двухполюснике: ветвь содержащую накопитель выделяют из цепи а оставшуюся часть схемы рассматривают как активный двухполюсник А эквивалентный генератор см. Совершенно очевидно что постоянная времени здесь для цепей с индуктивным элементом определяется как: и с емкостным как: где входное сопротивление цепи по отношению к зажимам 12 подключения ветви содержащей накопитель энергии. Например для напряжения на конденсаторе в цепи на...
83676. Операторный метод расчета переходных процессов 174.5 KB
  Выделенную из некоторой сложной цепи. Замыкание ключа во внешней цепи приводит к переходному процессу при этом начальные условия для тока в ветви и напряжения на конденсаторе в общем случае ненулевые. Отсюда 2 где операторное сопротивление рассматриваемого участка цепи. Следует обратить внимание что операторное сопротивление соответствует комплексному сопротивлению ветви в цепи синусоидального тока при замене оператора р на .
83677. Некоторые важные замечания к формуле разложения 143.5 KB
  Если при этом в цепи также имеют место другие источники например постоянной Е и экспоненциальной ЭДС и начальные условия для токов в ветвях с индуктивными элементами и напряжений на конденсаторах ненулевые то они должны быть все введены в формулу предварительно умноженными на j поскольку только в этом случае они будут учтены при взятии мнимой части от формулы разложения т. Определение независимых начальных условий путем расчета докоммутационного режима работы цепи. Составление операторной схемы замещения цепи для простых цепей с...