- Главная
- Информатика
- Создание и оптимизация изображений для web. Использование Adobe Photoshop и Illustrator
Содержание
- 2. Об оптимизации При подготовке изображений для интернета и других электронных материалов часто приходится искать компромисс между
- 3. Photoshop Save As and Image Processor В Photoshop можно использовать команду "Сохранить как", чтобы сохранить изображение
- 4. Sh.Kasimova A-Display options B- Toolbox C- Optimize pop‑up menu D-Color Table pop‑up menu E-Animation controls (Photoshop
- 5. Sh.Kasimova Просмотр изображений в диалогом окне Кликните в верхней части области изображения для выбора опций отображения:
- 6. Просмотр информации о оптимальном изображении и времени загрузки Область аннотаций под каждым изображением в диалоговом окне
- 7. Sh.Kasimova Оптимизация изображения для web 1.Выберите File > Save For Web & Devices. 2Нажмите вкладку в
- 8. 5. Изменяйте настройки оптимизации до тех пор, пока вас не устроит качество изображения и размер файла.
- 9. Sh.Kasimova 8. Нажмите «Save». 9. В диалоговом окне «Save Optimized As» выполните следующие действия и нажмите
- 10. Сжатие веб-графики до определенного размера файла 1.Выберите File > Save For Web & Devices 2. Нажмите
- 11. Sh.Kasimova Создание слоев CSS для веб-графики Вы можете использовать слои в оформлении Illustrator-а для создания слоев
- 12. Просмотр оптимизированных изображений в веб-браузере Вы можете просмотреть оптимизированное изображение в любом веб-браузере, установленном в вашей
- 13. Sh.Kasimova Сохранить файл по электронной почте 1. Выберите «File > Save For Web & Devices». 2.
- 14. Создание веб-контента в Adobe Illustrator CS5 Adobe Illustrator CS5 предоставляет множество инструментов для создания и оптимизации
- 15. Sh.Kasimova Использовать цвета RGB Всегда работайте в цветовом режиме RGB. Если вы пытаетесь использовать печатный контент
- 16. Sh.Kasimova Figure 2 Text anti-aliasing options.
- 17. Sh.Kasimova Выровнять по пиксельной сетке Новая функция в Illustrator CS5, опция Align to Pixel Grid позволяет
- 18. Создание иллюстраций По мере работы с веб-изображениями вы поймете, что обычно не нужно изменять размер изображений
- 19. Sh.Kasimova Баланс качества изображения с размером файла Ограничение графики до небольших размеров файлов важно для распространения
- 20. GIF. Если иллюстрация имеет менее 256 цветов (как простая кнопка) или необходимо, чтобы обложка имела общую
- 22. Скачать презентацию
Об оптимизации
При подготовке изображений для интернета и других электронных материалов часто
Об оптимизации
При подготовке изображений для интернета и других электронных материалов часто
Сохранить для web и устройств (Save For Web & Devices)
Вы можете использовать функции оптимизации в диалоговом Save For Web & Devices для просмотра оптимизированных изображений в различных форматах и с различными атрибутами файла. Вы можете просмотреть несколько версий изображения одновременно и изменять параметры оптимизации, как предварительный просмотр изображения, чтобы выбрать лучшее сочетание параметров для ваших нужд. Вы также можете указать прозрачность и матирование, выбрав Функции для управления размывания, и изменение размеров изображения в пикселях или в процентах от исходного размера.
Когда вы сохраните оптимизированный файл с помощью команды Save For Web & Devices, вы можете выбрать «создать файл HTML для изображения». Этот файл содержит всю необходимую информацию для отображения изображения в веб-браузере.
Sh.Kasimova
Photoshop Save As and Image Processor
В Photoshop можно использовать команду "Сохранить
Photoshop Save As and Image Processor
В Photoshop можно использовать команду "Сохранить
Обзор Save For Web & Devices
Вы используете диалоговом окне Save For Web & Devices (File > Save For Web & Devices ) для выбора параметров оптимизации и предварительного просмотра для оптимизированных графических объектов.
Sh.Kasimova
Sh.Kasimova
A-Display options
B- Toolbox
C- Optimize pop‑up menu
D-Color Table pop‑up
Sh.Kasimova
A-Display options
B- Toolbox
C- Optimize pop‑up menu
D-Color Table pop‑up
E-Animation controls (Photoshop only)
F- Zoom text box
G- Preview In Browser menu
H- Original image
I-Optimized image
Sh.Kasimova
Просмотр изображений в диалогом окне
Кликните в верхней части области изображения для
Sh.Kasimova
Просмотр изображений в диалогом окне
Кликните в верхней части области изображения для
Original
Отображает изображение без оптимизации.
Optimized
Отображает изображение с текущей оптимизацией.
2-Up
Отображается два вида изображения .
4-Up
Отображается четыре вида изображения.
Навигация в диалоговом окне
Если проведенная работа невидима в диалоговом окне Save For Web & Devices, можно использовать Hand tool для внесения другой области в область просмотра. Используйте Zoom tool для увеличения или уменьшения.
- Выберите Hand tool (или не отпускайте ПРОБЕЛ), и and drag in the view area to pan over the image.
- Выберите Zoom tool и кликните внутри его; держите Alt
Просмотр информации о оптимальном изображении и времени загрузки
Область аннотаций под каждым
Просмотр информации о оптимальном изображении и времени загрузки Область аннотаций под каждым
Sh.Kasimova
Sh.Kasimova
Оптимизация изображения для web
1.Выберите File > Save For Web & Devices.
2Нажмите вкладку
Sh.Kasimova
Оптимизация изображения для web
1.Выберите File > Save For Web & Devices.
2Нажмите вкладку
3. (Необязательно) Если ваше изображение содержит несколько фрагментов, выберите один или несколько фрагментов, которые вы хотите оптимизировать.
4. Выберите предустановленную настройку оптимизации из меню «Preset» или задайте отдельные параметры оптимизации. Доступные параметры изменяются в зависимости от выбранного вами формата файла.
Если вы работаете в режиме 4-Up, выберите «Repopulate Views» в меню «Оптимизация», чтобы автоматически генерировать более качественные версии изображения после изменения настроек оптимизации.
5. Изменяйте настройки оптимизации до тех пор, пока вас не устроит
5. Изменяйте настройки оптимизации до тех пор, пока вас не устроит
Sh.Kasimova
Sh.Kasimova
8. Нажмите «Save».
9. В диалоговом окне «Save Optimized As» выполните следующие действия
Sh.Kasimova
8. Нажмите «Save». 9. В диалоговом окне «Save Optimized As» выполните следующие действия
Сжатие веб-графики до определенного размера файла
1.Выберите File > Save For Web & Devices
2.
Сжатие веб-графики до определенного размера файла
1.Выберите File > Save For Web & Devices
2.
Автоматически выбирает оптимальный формат в зависимости от содержимого изображения. 7. Выберите параметр «Use», чтобы указать, следует ли применять указанный размер файла только к текущему фрагменту, к каждому фрагменту изображения или ко всем срезам. Нажмите кнопку ОК.
Sh.Kasimova
Sh.Kasimova
Создание слоев CSS для веб-графики
Вы можете использовать слои в оформлении Illustrator-а
Sh.Kasimova
Создание слоев CSS для веб-графики
Вы можете использовать слои в оформлении Illustrator-а
1. Перейдите на вкладку «Слои» в диалоговом окне «Save For Web & Devices ». 2. Выберите «Export As CSS Layers». 3. Выберите слой Layer pop‑up меню и задайте следующие параметры: Visible
Создает видимый CSS-слой в полученном HTML-файле. Hidden
Создает скрытый уровень CSS в результирующем файле HTML.
Просмотр оптимизированных изображений в веб-браузере
Вы можете просмотреть оптимизированное изображение в любом
Просмотр оптимизированных изображений в веб-браузере
Вы можете просмотреть оптимизированное изображение в любом
- Чтобы просмотреть изображение в своем браузере по умолчанию, щелкните значок браузера в нижней части диалогового окна «Save For Web & Devices». - Чтобы выбрать другой браузер, выберите «Other» во всплывающем меню браузера (рядом с значком браузера). - Чтобы добавить, отредактировать или удалить браузер во всплывающем меню браузера, выберите «Edit List » во всплывающем меню браузера. В диалоговом окне «Браузеры» вы можете найти все браузеры на своем компьютере и установить браузер по умолчанию для предварительного просмотра вашего изображения.
Sh.Kasimova
Sh.Kasimova
Сохранить файл по электронной почте
1. Выберите «File > Save For Web & Devices».
2. Перейдите
Sh.Kasimova
Сохранить файл по электронной почте
1. Выберите «File > Save For Web & Devices».
2. Перейдите
Создание веб-контента в Adobe Illustrator CS5
Adobe Illustrator CS5 предоставляет множество инструментов
Создание веб-контента в Adobe Illustrator CS5
Adobe Illustrator CS5 предоставляет множество инструментов
Рекомендации по созданию веб-контента
Прежде чем перейти к работе с веб-графикой, важно изучить некоторые основные принципы создания веб-графики в Illustrator. Вот быстрый быстрый взгляд: - Используйте цвета RGB. - Используйте соответствующую настройку сглаживания. - Выровнять по сетке пикселей. - Создайте свои иллюстрации для масштабирования. - сбалансировать качество изображения с размером файла. - Выберите лучший формат файла для вашей графики.
Sh.Kasimova
Sh.Kasimova
Использовать цвета RGB
Всегда работайте в цветовом режиме RGB. Если вы пытаетесь
Sh.Kasimova
Использовать цвета RGB
Всегда работайте в цветовом режиме RGB. Если вы пытаетесь
Отрегулировать сглаживание текста
Использование этой функции не является критическим, но это лучшая практика. Если вы создаете текст, который будет использоваться в web, он станет растеризованным, когда web будет оптимизирован (сохранен как JPEG, GIF или PNG). Как растеризованный текст зависит от параметра сглаживания в оригинальной обложке, который вы устанавливаете с помощью панели «Символ» . Сглаживание добавляет цветные пиксели к краю текста, чтобы создать оттенки серого, делая край более гладким. В большинстве случаев вы, вероятно, используете настройку Sharp. Если текст довольно мал, вы можете отключить сглаживание (выберите «Нет»), чтобы текст не был слишком размытым.
Sh.Kasimova
Figure 2 Text anti-aliasing options.
Sh.Kasimova
Figure 2 Text anti-aliasing options.
Sh.Kasimova
Выровнять по пиксельной сетке
Новая функция в Illustrator CS5, опция Align to
Sh.Kasimova
Выровнять по пиксельной сетке
Новая функция в Illustrator CS5, опция Align to
Создание иллюстраций
По мере работы с веб-изображениями вы поймете, что обычно не
Создание иллюстраций
По мере работы с веб-изображениями вы поймете, что обычно не
Sh.Kasimova
Sh.Kasimova
Баланс качества изображения с размером файла
Ограничение графики до небольших размеров файлов
Sh.Kasimova
Баланс качества изображения с размером файла
Ограничение графики до небольших размеров файлов
Выберите лучший формат файла для вашей графики
Когда создается обложка в Illustrator, в конечном итоге нужно будет оптимизировать ее для использования в Web, если не используется какой-либо другой способ, например, конвертируется в формат переносимого документа (PDF). Поэтому нужно выбрать один из трех основных типов файлов для графического веб-контента: JPEG, GIF или PNG.
GIF. Если иллюстрация имеет менее 256 цветов (как простая кнопка) или
GIF. Если иллюстрация имеет менее 256 цветов (как простая кнопка) или
Sh.Kasimova