Оптимизация изображений в Photoshop Elements

Руководство пользователя Отмена

Поиск

1. Photoshop Elements User Guide
2. Introduction to Photoshop Elements
   1. What’s new in Photoshop Elements
   2. System requirements | Photoshop Elements
   3. Workspace basics
   4. Guided mode
   5. Making photo projects
3. Workspace and environment
   1. Get to know the Home screen
   2. Workspace basics
   3. Tools
   4. Panels and bins
   5. Open files
   6. Rulers, grids, and guides
   7. Enhanced Quick Mode
   8. File information
   9. Presets and libraries
   10. Multitouch support
   11. Scratch disks, plug-ins, and application updates
   12. Undo, redo, and cancel actions
   13. Viewing images
4. Fixing and enhancing photos
   1. Resize images
   2. Cropping
   3. Process camera raw image files
   4. Add blur, replace colors, and clone image areas
   5. Adjust shadows and light
   6. Retouch and correct photos
   7. Sharpen photos
   8. Transforming
   9. Auto Smart Tone
   10. Recomposing
   11. Using actions to process photos
   12. Photomerge Compose
   13. Create a panorama
   14. Moving Overlays
   15. Moving Elements
5. Adding shapes and text
   1. Add text
   2. Edit text
   3. Create shapes
   4. Editing shapes
   5. Painting overview
   6. Painting tools
   7. Set up brushes
   8. Patterns
   9. Fills and strokes
   10. Gradients
   11. Work with Asian type
6. Guided edits, effects, and filters
   1. Guided mode
   2. Filters
   3. Guided mode Photomerge edits
   4. Guided mode Basic edits
   5. Adjustment filters
   6. Effects
   7. Guided mode Fun edits
   8. Guided mode Special edits
   9. Artistic filters
   10. Guided mode Color edits
   11. Guided mode Black & White edits
   12. Blur filters
   13. Brush Stroke filters
   14. Distort filters
   15. Other filters
   16. Noise filters
   17. Render filters
   18. Sketch filters
   19. Stylize filters
   20. Texture filters
   21. Pixelate filters
7. Working with colors
   1. Understanding color
   2. Set up color management
   3. Color and tonal correction basics
   4. Choose colors
   5. Adjust color, saturation, and hue
   6. Fix color casts
   7. Using image modes and color tables
   8. Color and camera raw
8. Working with selections
   1. Make selections in Photoshop Elements
   2. Saving selections
   3. Modifying selections
   4. Move and copy selections
   5. Edit and refine selections
   6. Smooth selection edges with anti-aliasing and feathering
9. Working with layers
   1. Create layers
   2. Edit layers
   3. Copy and arrange layers
   4. Adjustment and fill layers
   5. Clipping masks
   6. Layer masks
   7. Layer styles
   8. Opacity and blending modes
10. Creating photo projects
    1. Project basics
    2. Making photo projects
    3. Editing photo projects
11. Saving, printing, and sharing photos
    1. Save images
    2. Printing photos
    3. Share photos online
    4. Optimizing images
    5. Optimizing images for the JPEG format
    6. Dithering in web images
    7. Guided Edits — Share panel
    8. Previewing web images
    9. Use transparency and mattes
    10. Optimizing images for the GIF or PNG-8 format
    11. Optimizing images for the PNG-24 format
12. Keyboard shortcuts
    1. Keys for selecting tools
    2. Keys for selecting and moving objects
    3. Keys for the Layers panel
    4. Keys for showing or hiding panels (expert mode)
    5. Keys for painting and brushes
    6. Keys for using text
    7. Keys for the Liquify filter
    8. Keys for transforming selections
    9. Keys for the Color Swatches panel
    10. Keys for the Camera Raw dialog box
    11. Keys for the Filter Gallery
    12. Keys for using blending modes
    13. Keys for viewing images (expertmode)

Оптимизация

Оптимизация изображений для веб-страниц — это процесс сжатия изображения и настройки параметров его отображения для оптимального использования в среде Интернет. При размещении файла в Интернете важное значение имеет размер файла: размер файла следует задать так, чтобы время на его загрузку было минимальным, а качество изображения — максимальным. Для размещения изображений в Интернете используются три основных формата: GIF, JPEG и PNG.

При размещении изображения в сети следует учитывать размер файла. Размер файла следует задать так, чтобы время на его загрузку было минимальным, а качество изображения — максимальным.

В настоящее время в технологии веб-дизайна используется три основных формата пиксельной графики — GIF, JPEG и PNG. Оптимизированные изображения в этих форматах можно создать следующими способами:

• Чтобы достичь точной оптимизации изображения для применения в приложениях веб-разработки (например, Adobe® Dreamweaver®), можно выбрать команду «Сохранить для Web». Диалоговое окно «Сохранить для Web» позволяет осуществлять предварительный просмотр изображения в различных форматах и с разными настройками оптимизации. В нем можно также задать параметры прозрачности и анимации.

• Чтобы получить оптимизированные изображения в основных форматах можно воспользоваться командой «Сохранить как». В зависимости от формата файла можно указать качество изображения, прозрачность фона или подложку (заполнение фоновых областей каким-либо цветом), вариант отображения цветов и метод загрузки.

Работа с диалоговым окном «Сохранить для Web»

Воспользуйтесь диалоговым окном «Сохранить для Web» для предварительного просмотра результатов применения различных параметров оптимизации фотографии, предназначенной для публикации в сети. Это простой процесс. Откройте фотографию и выберите «Файл» > «Сохранить для Web». Затем выберите формат из раскрывающегося списка форматов (GIF, JPEG, PNG-8 или PNG-24) и задайте дополнительные параметры по своему усмотрению. (Список форматов располагается непосредственно внизу списка «Установки».) Эта операция сохраняет копию файла, не внося изменения в оригинальное изображение.

Диалоговое окно «Сохранить для Web»

A. Палитра инструментов B.

Пипетка выбора цвета C. Оптимизация настроек и всплывающее меню с дополнительными параметрами D. Размер изображения E. Параметры анимации F. Список вариантов масштабов G. Меню предварительного просмотра в браузере H. Исходное изображение I. Оптимизированное изображение 

Параметры оптимизации появляются в правой части диалогового окна «Сохранить для Web». В поле «Потери сжатия» можно установить уровень потерь, допустимых при сжатии. В раскрывающемся списке «Количество цветов» можно выбрать количество цветов, которые используются при сохранении изображения. В поле «Подложка» представлены команды, обеспечивающие заполнение фоновых областей каким-либо цветом (В этом случае исходное изображение должно иметь прозрачные области). Вкладка «Размер изображения» также позволяет управлять размером изображения. Можно использовать готовые установки (выбрав соответствующий вариант из списка «Установки») или задать параметры выбранного формата для тонкой настройки алгоритма оптимизации.

Оригинальное изображение в окне (слева) и оптимизированное изображение в окне предварительного просмотра (справа). В нижней части каждого окна просмотра отображается соответствующая информация об изображении, например формат файла, объем файла, время передачи такого файла при соответствующей скорости. По мере изменения настроек меняется и эта информация.

В левом верхнем углу диалогового окна расположена небольшая палитра инструментов. Инструмент «Рука» предназначен для просмотра различных областей изображения путем перетаскивания фрагментов изображения в поле просмотра. Инструмент «Масштаб» используется для изменения масштаба: для увеличения масштаба щелкните инструментом на изображении, для уменьшения масштаба щелкните инструментом, удерживая нажатой клавишу Alt. (Для изменения масштаба также можно воспользоваться списком масштабов внизу диалогового окна.) Инструмент «Пипетка» используется для выбора цвета подложки.

Оптимизированные форматы файлов для веб-страниц

Для размещения изображения в Интернете можно использовать 4 формата файлов. При выборе формата изображения руководствуйтесь следующими рекомендациями:

JPEG

Формат JPEG может быть лучшим вариантом для сохранения изображений, предназначенных для публикации в сети.

PNG-24

Как и формат JPEG этот формат вполне подходит для сохранения фотографий. Если изображение содержит прозрачные области, предпочтительнее выбрать формат PNG-24 вместо JPEG. (JPEG не поддерживает прозрачность; в данном случае вам следует заполнить области цветом подложки.) Файлы в формате PNG-24 файлы зачастую имею больший размер, чем JPEG-варианты того же файла.

GIF

Как правило, формат GIF применяется для работы со шрифтовыми фрагментами, кнопками, логотипами и прочими изображениями, имеющими ограниченное количество цветов и резкие ясные контрасты. При экспорте анимированного изображения также используется формат GIF.

PNG-8

Формат PNG-8 фактически дублирует функции формата GIF, просто он менее известен. Используйте его для тех же целей. что и формат GIF (кроме анимации).

Формат GIF и PNG-8 позволяют сохранять изображения с использованием палитры индексированных цветов (не более 256 оттенков цвета). Чтобы преобразовать изображения в формат индексированных цветов, Photoshop Elements создает специальную таблицу индексированных цветов. Если цвет в оригинальном изображении не присутствует в таблице, приложение выбирает ближайший цвет в таблице или имитирует этот цвет, комбинируя имеющиеся цвета.

Файлы в формате JPEG и PNG-24 поддерживают 24-битную глубину цвета, таким образом, они могут поддерживать до 16 миллионов цветов. В зависимости от формата файла можно указать качество изображения, прозрачность фона или подложку (заполнение фоновых областей каким-либо цветом), а также метод отображения браузером цветов при загрузке.

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

Применение предустановленных вариантов настройки оптимизации

Быстро и легко оптимизировать изображения для сети можно с помощью предустановленных вариантов настройки оптимизации из списка «Установки» в верхнем правом углу диалогового окна «Сохранить для Web». Предустановленные варианты настройки оптимизации позволяют сохранять различные типы изображений с различным качеством.

Имя каждой установки отражает формат файла и качество сжатия. Например, можно выбрать «JPEG High» для сохранения оптимизированного изображения в формате JPEG с высоким качеством изображения и низкой степенью сжатия. Выберите «GIF 32 Dithered» для оптимизации изображения в формат GIF, уменьшите количество используемых цветов до 32 и примените смешение.

1. В диалоговом окне «Сохранить для Web» выберите имя установки из списка «Установки», затем нажмите «ОК».

2. В диалоговом окне «Сохранить оптимизированное изображение» введите имя файла и нажмите «Сохранить».

   Примечание.

   При изменении параметров в списке установок в меню «Набор» отобразится слово «[Без имени]». Пользовательскую установку сохранить нельзя, однако текущая установка появится в следующий раз при вызове диалогового окна «Сохранить для Web».

Справки по другим продуктам

• Просмотр оптимизированного изображения в веб-браузере
• Просмотр вариантов отображения цветов
• Просмотр расчетного времени загрузки

Вход в учетную запись

Войти

Управление учетной записью

Как сохранять изображения для сайтов. Оптимизация фото для веб

Головная боль вебмастера – картинки. Поисковые системы хотят, чтобы картинки были лёгкими и быстро грузились, посетители сайтов и соцсетей не хотят смотреть на «пожатые» пикселы и отвратительные артефакты сжатия. Как найти компромисс между требованиями поисковых алгоритмов и людей? Вот несколько советов.

Содержание

• 1 Выберите подходящий формат для изображений
• 2 Готовим к публикации JPG
• 3 GIF и PNG-8
• 4 PNG-24
• 5 Новые форматы изображений для WEB: WebP и HEIC
• 6 WebP
• 7 HEIC / HEIF
• 8 Общие рекомендации
• 9 Заключение

Обновлено: 20.06.2020

Выберите подходящий формат для изображений

Полноцветные изображения, включающие в себя миллионы оттенков, можно сохранять лишь в двух основных форматах: JPG и PNG-24. GIF и PNG-8 категорически не годятся: они оба работают лишь с ограниченным количеством цветов (до 256 в зависимости от цветовой таблицы). И GIF, и PNG-8 идеальны для сохранения рисунков, чертежей, или изображений, где используется очень ограниченная палитра. Не фото!

• Особенность картинок в форматах GIF и PNG-8: в отличие от JPG и PNG-24, их не стоит масштабировать. Сразу теряется чёткость, появляются неприятные артефакты.
• Особенности JPG и PNG-24. PNG-24 стоит выбрать, если нужно максимально доступное качество вне зависимости от размера. Ещё одно отличие этого формата — поддержка прозрачности: можно, например, удалить фон, чтобы разместить фрагмент фото на том фоне, который уже есть на сайте. Это удобно для размещения сложных логотипов в градиентными цветами и множеством цветовых оттенков. В большинстве случаев надо использовать JPG.

Вывод. Если вам нужно разместить на сайте чертеж, скан документа, рисунок — используйте GIF и PNG-8. В таком случае вы получите высокую чёткость при крохотном весе. Для загрузки фотографий на сайт используйте JPG. В соцсети предпочтительно загружать PNG-24, но об этом — ниже.Так выглядит фотография, которую сохраняют в одном из восьмибитных форматовДля подготовки фото для веб используйте профессиональное ПО. Я рекомендую Adobe Photoshop или его аналоги. Почему «Фотошоп»? Его модуль Save for Web позволяет видеть, как именно портится картинка по мере усиления сжатия, и вы можете выбрать нужное соотношение между качеством и весом картинки. В этом же окне можно посмотреть, как будет выглядеть картинка на других платформах.

А теперь перейдём к более конкретным рекомендациям.

Готовим к публикации JPG

Первое, что стоит усвоить: каждое сохранение в формате JPG увеличивает количество артефактов. Этот алгоритм сжимает за счёт усреднения однородных пикселов. Чем больше сжатие — тем меньше деталей, оттенков, тем более выражены всем знакомые «квадратики». Сохраняйте изображение в JPG для веб в самый последний момент, перед публикацией. До этого сохраняйте картинку в одном из форматов без сжатия с потерями: PSD, TIFF, или даже PNG-24.

До того, как сохранять изображение для веб, уменьшите разрешение фото. Камера сохраняет фотографии с ppi 300 или 240 (в зависимости от настроек камеры), а дисплеи (кроме ретины) понимают лишь 72 ppi. Избыточное разрешение увеличивает вес изображения без каких-либо визуальных преимуществ. Высокое разрешение нужно только для печати.Не сохраняйте для публикации в интернет фото с избыточным разрешением. Это увеличивает размеры, но не даёт никаких преимуществСтепень сжатия JPG для публикации в web — 80% и больше (то есть 70, 60, 50%…). Ориентируйтесь на качество в первую очередь, но помните: на сегодняшний день предельный «вес» картинки, размещенной на странице как иллюстрация — около 250 кб. Придерживайтесь этой цифры.

Удаляйте метатеги из картинок для веб: данные об авторе, авторских правах, информация о камере и т. д. Они значительно увеличивают «вес» картинки.

При сохранении поставьте галочку в чекбокс «Прогрессивная развёрстка». Этот алгоритм загружает изображение за несколько проходов. Посетитель сайта уже видит загружающуюся фотографию, которая по мере загрузки становится всё более детальной.

Подпишитесь на наш канал в Telegram, чтобы не пропустить новые статьи и рецепты!
@aromaesthetica

Стоит ли включать в изображение цветовой профиль? Пожалуй, нет, если вы сконвертировали фото в sRGB-1966. Браузеры умеют работать только с ним. А вот если ваше изображение сохранено в одном из профессиональных форматов, с отображением будут проблемы. Сам по себе цветовой профиль — крохотный текстовый файлик, интегрированный в контейнер с изображением. Конечно же, он немного увеличивает вес файла, поэтому его лучше срезать вместе с метатегами.

GIF и PNG-8

Разница между этими форматами — в лицензировании, и нашей темы это не касается. Кроме того, GIF умеет работать с анимацией, а PNG-8 — нет. Если ваше изображение содержит ограниченное количество цветов (от 1 до 256), а также области прозрачного — сохраняйте в одном из этих форматов.Старинная гравюра содержит минимум цветов и построена на штрихах. оптимальный формат — GIF или PNG-8GIF использует сжатие без потерь в формате LZW и поддерживает анимацию.

Его основное ограничение — палитра в 256 цветов. В конце 80-х, когда формат был создан, это было оправдано. Тогдашние дисплеи больше цветов и не поддерживали. Однако с развитием технологий такая цветопередача оказалась недостаточной. GIF не справляется с градиентными переходами цветов.

Однако, если говорить об анимации, проблемы с цветопередачей отходят на задний план: в этом случае мы менее чувствительны к качеству картинки.

При сохранении GIF и PNG-8 «Фотошоп» предлагает несколько опций. Первая: выбрать количество цветов. Больше цветов — больше вес. Смотрите, чтобы не уходило качество и не терялась резкость, и ориентируйтесь на минимальную по размерам палитру.

Если изображению не нужна прозрачность — снимите соответствующую галочку.

В некоторых случаях в индексированное изображение надо подмешать немного «шума», чтобы скрыть артефакты. Это используется для сохранения GIF и PNG-8, создаваемых из фотографий и видео (если речь о GIF). «Фотошоп» предлагает несколько типов такого шума, выбирайте подходящий.

Напомню: GIF и PNG-8 не стоит масштабировать! Сохраняйте их в том размере, в каком они должны отображаться на мониторе.

PNG-24

В это формате качество сохраняется, потому что сжатие не предусмотрено. Поддерживается прозрачность (альфа-канал).

Никогда не публикуйте на сайте фотографии в формате PNG-24. Они в несколько раз «тяжелее» фото в формате JPG. Размер загружаемого изображения прямо влияет на скорость загрузки страницы, и файл в формате PNG-25 «весит» примерно в 4−8 раз больше этого же изображения в формате JPEG без видимого ухудшения качества (с показателем сжатия 80%).

Если вы загружаете фото в соцсети (Facebook, Instagram, Vkontakte), стоит выбрать PNG-24. Причина в том, что при загрузке изображения всё равно будут конвертированы и ужаты соцсетями, а значит, качество фото пострадает ещё раз. Вы никак не можете контролировать степень сжатия, можно лишь попытаться снизить риски. Для этого и нужен PNG-24 как формат без потери качества. Во всех других случаях используйте более подходящие форматы.

Новые форматы изображений для WEB: WebP и HEIC

Алгоритмы, используемые видеокодеками для сжатия потоков, можно разделить на 2 основных типа: межкадровые и внутрикадровые. Межкадровые алгоритмы избавляют от лишних данных на временной шкале. Внутрикадровые сжимают информацию в рамках каждого кадра, вне зависимости от остальных кадров. И такой алгоритм вполне применим к статическим изображениям.

Развитие мобильного видео и увеличения разрешения дисплеев стали причиной появления новых стандартов кодирования, а с ними — и новых форматов изображений. Эти форматы предлагают намного больше возможностей сжатия, чем JPEG. Качество — выше, «вес» — меньше.

WebP

Этот формат изображений для публикации в интернет был разработан Google почти 10 лет назад. WebP — формат, производный от видеокодека VP8. Он обеспечивает сжатие без потерь, и в отличие от JPEG поддерживает анимацию и прозрачность. Таким образом, все старые форматы — JPEG, PNG и GIF в перспективе становятся не нужны. Единственная проблема — совместимость. Но рано или поздно эта проблема будет устранена.

Главная проблема формата WebP (читается как «веппи»): его до сих пор читают далеко не все браузеры. Сейчас, в 2018, с ним справляются только Chrome и Opera, а Microsoft Explorer, Microsoft Edge, Firefox и Safari его не понимают. Поэтому вам придётся предусмотреть подмену изображений этого формата на изображения традиционных для интернет форматов. А это ровно в два раза больше картинок, которые придётся загружать на сервер.

Ещё одна проблема: актуальная реализация работы с этим форматом подразумевает и конвертацию «налету», значительно утяжеляющую исходный ход веб-странички. Иными словами, соотношение «текст/код html» меняется в сторону html. Это плохо для поисковой оптимизации. Вот и получается: с одной стороны, картинки быстрее грузятся, но не каждым браузером, и надо держать картинки в двух форматах. С другой стороны, страничка становится тяжелее. И что более важно: зачем пережимать уже оптимизированную картинку во второй раз?

У формата изображений для интернет WebP может быть большое будущее: он действительно сильнее сжимает картинки. Фото с большой степенью сжатия становится чуть более мутным, другие артефакты сжатия не обнаружены. Но использовать этот формат сейчас — тема для размышления вебмастера. Лично я пока использовать этот формат не готов.

HEIC / HEIF

Этот формат может стать настоящим прорывом в области изображений для интернета. И вот почему:

• Контейнер файла поддерживает самый большой набор функций среди существующих форматов изображений. Например, тут есть поддержка многокадровых изображений с многокадровым сжатием. А это — HDR-изображения, а также мультифокусные и многообъективные изображения.
• Поддержка дисплеев 4K и 8K последних поколений. Кодирование HEVC использует сложные операции с меньшим, чем у JPEG, количеством ограничений. А это более эффективное сжатие за счет чуть большего времени кодирования.

Главная проблема на сегодняшний день — всё та же совместимость. Формат HEIC поддерживают только приложения iOS. Ни Windows, ни Android РУШС не поддерживают. А учитывая проблемы с лицензированием, ситуация, скорее всего, сохранится.

Общие рекомендации

Сохраняя файл для публикации на сайте, дайте ему осмысленное название, описывающее его содержание. Поисковые системы обращают на это внимание. Название нужно писать транслитом, пробелы — заменять дефисами. Все слова в названии — с маленькой буквы.

При уменьшении размеров фото используйте алгоритм с усилением резкости. Если умеете работать с алгоритмами усиления резкости — предварительно усиливайте её вручную, до того, как уменьшите размеры фото. Подробнее об усилении резкости и детальности смотрите здесь.

Не размещайте масштабированные изображения. Выясните у вебмастера, какой размер по ширине и высоте изображения нужен для сайта, и сохраняйте ваше фото для публикации именно в этом размере. CMS могут масштабировать изображение автоматически, но в результате страница будет весить намного больше, чем надо. Это плохо сказывается на быстродействии сайта, и как следствие — на его место в поисковой выдаче. Или, как вариант, CMS растянет картинку до нужного размера, смотрится это плохо.Те самые «квадратики», артефакты алгоритма сжатия. Вам нравится такое качество?Не рекомендую автоматические «оптимизаторы» картинок по рекомендациям Google Speed Test. Да, они драматически уменьшат вес изображений, но пожалейте глаза своих посетителей. Да и собственный бизнес: качество визуального контента влияет на восприятие сайта и конверсию. Хуже восприятие — меньше денег в ваш карман. Лучше потратьте немного времени на подготовку полноценного контента, оно того стоит.

Заключение

Чтобы соблюсти баланс качества и малого размера файла, сохраняйте изображения для публикации в интернет вручную. К выбору конечного формата подходите осознанно, если есть сомнения — выбирайте JPG. Да, каждый год появляются новые оптимизированные форматы, но поддерживаются они не всеми браузерами и системами управления контентом. JPG — универсальный формат для иллюстраций к текстам.

Резюме

Оптимизация изображений в Photoshop Elements

Руководство пользователя Отмена

Поиск

1. Руководство пользователя Photoshop Elements
2. Введение в Photoshop Elements
   1. Что нового в Photoshop Elements
   2. Системные требования | Элементы Фотошопа
   3. Основы рабочего пространства
   4. Ведомый режим
   5. Создание фотопроектов
3. Рабочее пространство и среда
   1. Знакомство с главным экраном
   2. Основы рабочего пространства
   3. Инструменты
   4. Панели и ящики
   5. Открыть файлы
   6. Линейки, сетки и направляющие
   7. Расширенный быстрый режим
   8. Информация о файле
   9. Пресеты и библиотеки
   10. Поддержка мультитач
   11. Скретч-диски, плагины и обновления приложений
   12. Отмена, повтор и отмена действий
   13. Просмотр изображений
4. Исправление и улучшение фотографий
   1. Изменение размера изображений
   2. Обрезка
   3. Обработка необработанных файлов изображений камеры
   4. Добавить размытие, заменить цвета и клонировать области изображения
   5. Настройка теней и света
   6. Ретушь и корректировка фотографий
   7. Повышение резкости фотографий
   8. Трансформация
   9. Автоматический интеллектуальный тон
   10. Перекомпоновка
   11. Использование действий для обработки фотографий
   12. Photomerge Compose
   13. Создать панораму
   14. Перемещение наложений
   15. Подвижные элементы
5. Добавление фигур и текста
   1. Добавление текста
   2. Редактировать текст
   3. Создание фигур
   4. Редактирование фигур
   5. Обзор окраски
   6. Малярные инструменты
   7. Щетки для настройки
   8. Узоры
   9. Заливки и штрихи
   10. Градиенты
   11. Работа с азиатским типом
6. Управляемое редактирование, эффекты и фильтры
   1. Управляемый режим
   2. Фильтры
   3. Управляемый режим редактирования Photomerge
   4. Управляемый режим Основные правки
   5. Регулировочные фильтры
   6. Эффекты
   7. Управляемый режим Забавные правки
   8. Управляемый режим Специальные правки
   9. Художественные фильтры
   10. Управляемый режим Редактирование цвета
   11. Управляемый режим черно-белого редактирования
   12. Фильтры размытия
   13. Фильтры мазка кистью
   14. Фильтры искажения
   15. Прочие фильтры
   16. Помехоподавляющие фильтры
   17. Фильтры визуализации
   18. Эскизные фильтры
   19. Стилизовать фильтры
   20. Текстурные фильтры
   21. Пиксельные фильтры
7. Работа с цветами
   1. Понимание цвета
   2. Настройка управления цветом
   3. Основы коррекции цвета и тона
   4. Выберите цвет
   5. Настройка цвета, насыщенности и оттенка
   6. Исправить цветовые оттенки
   7. Использование режимов изображения и таблиц цветов
   8. Цвет и камера RAW
8. Работа с выборками
   1. Сделайте выбор в Photoshop Elements
   2. Сохранение выбора
   3. Изменение выбора
   4. Перемещение и копирование выделенного
   5. Редактировать и уточнить выборки
   6. Сглаживание краев выделения со сглаживанием и растушевкой
9. Работа со слоями
   1. Создание слоев
   2. Редактировать слои
   3. Скопируйте и расположите слои
   4. Корректирующие слои и слои-заливки
   5. Обтравочные маски
   6. Маски слоя
   7. Стили слоя
   8. Непрозрачность и режимы наложения
10. Создание фотопроектов
    1. Основы проекта
    2. Создание фотопроектов
    3. Редактирование фотопроектов
11. Сохранение, печать и обмен фотографиями
    1. Сохранение изображений
    2. Печать фотографий
    3. Поделиться фотографиями в Интернете
    4. Оптимизация изображений
    5. Оптимизация изображений для формата JPEG
    6. Дизеринг веб-изображений
    7. Управляемое редактирование — панель «Поделиться»
    8. Предварительный просмотр веб-изображений
    9. Использовать прозрачность и матовость
    10. Оптимизация изображений для формата GIF или PNG-8
    11. Оптимизация изображений для формата PNG-24
12. Сочетания клавиш
    1. Клавиши для выбора инструментов
    2. Клавиши для выбора и перемещения объектов
    3. Клавиши для панели «Слои»
    4. Клавиши для отображения или скрытия панелей (экспертный режим)
    5. Ключи для рисования и кисти
    6. Клавиши для использования текста
    7. Ключи для фильтра Liquify
    8. Ключи для трансформации выделений
    9. Клавиши для панели «Образцы цвета»
    10. Ключи для диалогового окна Camera Raw
    11. Ключи для галереи фильтров
    12. Ключи для использования режимов наложения
    13. Клавиши для просмотра изображений (экспертный режим)

Об оптимизации

Оптимизация для Интернета — это процесс сжатия изображения и настройка параметров отображения для оптимального использования в Интернете. Когда вы размещаете изображения в Интернете, размер файла становится важным; вы хотите добиться размера файла, который достаточно мал, чтобы позволить приемлемое время загрузки, но достаточно большое, чтобы сохранить цвета и детали к вашему удовлетворению. Есть три основных графических файла форматы, которые используются в Интернете: GIF, JPEG и PNG.

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

В Интернете используются три основных формата графических файлов: GIF, JPEG, и PNG. Вы можете оптимизировать изображения в этих форматах, используя один из следующие методы:

• Для точной оптимизации изображения для использования в веб-разработке приложения, такие как Adobe® Dreamweaver® , вы можете использовать команду «Сохранить для Web». Диалоговое окно «Сохранить для Интернета» позволяет предварительно просмотреть изображение в различных файловых форматов и с различными настройками оптимизации. Вы также можете установить параметры прозрачности и анимации.

• Для базовой оптимизации можно использовать команду Сохранить как. В зависимости от формата файла можно указать качество изображения, фон прозрачность или матирование, цветное отображение и метод загрузки.

Использование диалогового окна «Сохранить для Интернета»

Используйте диалоговое окно «Сохранить для Интернета» для предварительного просмотра. эффекты различных параметров оптимизации на фотографии, которую вы хотите поделиться в сети. Процесс прост. Откройте фотографию и выберите Файл > Сохранить для Интернета. Затем выберите формат из файла меню формата (GIF, JPEG, PNG-8 или PNG-24) и задайте нужные параметры. (Меню формата файла находится непосредственно под меню Preset.) сохраняет копию вашего файла, не перезаписывая исходное изображение.

Диалоговое окно «Сохранить для Интернета»

A. Ящик для инструментов B. Пипетка цвет C. Настройки оптимизации и всплывающее меню для дополнительных параметров  D. Изображение Размер  E. Параметры анимации  F. Уровень масштабирования меню  G. Меню предварительного просмотра в браузере  H. Исходное изображение  I. Оптимизированное изображение

Параметры оптимизации отображаются в правой части окна «Сохранить для». Веб-диалоговое окно. Помимо выбора формата веб-файла, вы может выбирать параметры сжатия и цвета, сохранять прозрачность фона или установить матирование фона и изменить размер изображения. Ты можно использовать предопределенные настройки (выбирая формат из Preset меню) или выберите параметры для конкретного формата, чтобы точно настроить оптимизацию.

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

Небольшой набор инструментов расположен в верхнем левом углу диалогового окна коробка. Чтобы просмотреть различные области изображения, выберите инструмент «Рука» и перетащите, чтобы отобразить эти области. Чтобы увеличить изображение, выберите инструмент «Масштаб» и щелкните вид; затем, удерживая нажатой клавишу Alt, нажмите снова, чтобы уменьшить масштаб. (Кроме того, вы можете использовать поле Масштаб в нижней части диалогового окна.) Чтобы создать матовые цвета, используйте инструмент «Цвет пипетки». инструмент.

Оптимизированные форматы файлов для web

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

JPEG

В большинстве случаев это лучший формат для сохранения фотографий.

PNG‑24

Как и JPEG, это хороший формат для фотографий. Выбирать PNG-24, а не JPEG, только если ваше изображение содержит прозрачность. (JPEG не поддерживает прозрачность, вы должны заполнить его матовым цвет.) Файлы PNG-24 часто намного больше, чем файлы JPEG формата такое же изображение.

гифка

Формат GIF используется для штриховой графики, иллюстраций с большие области сплошного цвета и четких деталей, а также текст. Кроме того, если вы хотите экспортировать анимированное изображение, вы должны использовать GIF.

PNG‑8

PNG‑8 — менее известная альтернатива GIF. Используйте его для те же цели (кроме анимации).

Изображения в форматах GIF и PNG-8, иногда называемые изображениями с индексированными цветами , может отображать до 256 цветов. Чтобы преобразовать изображение в индексированный цвет формате Photoshop Elements создает таблицу поиска цветов. Если цвет в исходном изображении не отображается в таблице поиска цветов, приложение либо выбирает ближайший цвет в таблице, либо имитирует цвет, используя комбинацию доступных цветов.

Файлы JPEG и PNG‑24 поддерживают 24‑битный цвет, поэтому они могут отображать до 16 миллионов цветов. В зависимости от формата можно указать качество изображения, прозрачность фона или матирование, цветной дисплей, и метод, который браузер должен использовать для отображения изображения во время загрузки.

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

Применить предустановленную настройку оптимизации

Вы может быстро и легко оптимизировать изображение для Интернета, выбрав предопределенный параметр оптимизации, называемый пресетом , из меню «Набор» в правом верхнем углу окна «Сохранить для Интернета». диалоговое окно. Пресеты адаптированы для удовлетворения потребностей оптимизации различных типов изображений.

Название каждого пресета отражает его формат файла и уровень качества. Например, выберите JPEG High оптимизировать изображение в формате JPEG с высоким качеством изображения и низкая компрессия. Выберите GIF 32 Dithered, чтобы оптимизировать изображение в GIF, уменьшите количество цветов до 32 и примените сглаживание.

1. В диалоговом окне «Сохранить для Интернета» выберите параметр имя из меню Preset, а затем нажмите OK.

2. В диалоговом окне «Сохранить оптимизированный как» введите имя файла и нажмите Сохранить.

   Примечание:

   Если вы измените параметры в предустановке, предустановка В меню отображается слово «[Без имени]». Вы не можете сохранить пользовательскую настройку; однако текущие настройки отображаются в диалоговом окне «Сохранить для Интернета». поле в следующий раз, когда вы показываете его.

Еще подобное

• Предварительный просмотр оптимизированного изображения в веб-браузере
• Предварительный просмотр вариантов цветного дисплея
• Просмотр предполагаемого времени загрузки
• Конвертировать png в jpg онлайн
• Онлайн-улучшитель фотографий

Войдите в свою учетную запись

Войти

Управление учетной записью

Войдите в свою учетную запись

Войти

Управление учетной записью

Сохранение фотографий для отправки по электронной почте или в Интернете в Photoshop CS5

Автор сценария Стив Паттерсон.

В этом уроке по Photoshop мы узнаем, как изменять размер, оптимизировать и сохранять фотографии для загрузки на веб-сайт или отправки по электронной почте семье или друзьям, используя комбинацию команд «Размер изображения» и «Сохранить для Интернета и устройств» в Photoshop CS5! Это руководство также полностью совместимо с Photoshop CS4.

Вот фотография, которая сейчас у меня открыта на экране, которую мне нужно оптимизировать для Интернета:

Исходное изображение.

Если мы посмотрим на мою панель «Слои», мы увидим, что я немного отретушировал это изображение, добавив несколько слоев и корректирующих слоев над исходным изображением на фоновом слое :

.

Панель «Слои».

Шаг 1. Дублируйте изображение

Чтобы подготовить эту фотографию для отправки по электронной почте или загрузки на веб-сайт, мне нужно свести документ к одному слою, а затем изменить размер изображения, чтобы сделать его меньше, но сначала я хочу убедиться, что не потеряю работа, которую я сделал, или внести какие-либо постоянные изменения в размер исходной фотографии. Чтобы не рисковать, прежде чем делать что-либо еще, я собираюсь сделать дубликат своего изображения, перейдя к Изображение меню в строке меню в верхней части экрана и выбор Duplicate :

Выберите Изображение > Дублировать.

Photoshop откроет диалоговое окно «Дублировать изображение» и попросит вас назвать копию. Вы можете просто принять имя по умолчанию, которое Photoshop уже ввел (в моем случае это «копия blue_dress»), потому что мы можем легко переименовать изображение, когда мы сохраним его позже. Нажмите OK в правом верхнем углу диалогового окна, чтобы принять имя по умолчанию и закрыть его:

Нажмите OK, чтобы принять имя по умолчанию.

Photoshop откроет идентичную копию изображения, включая все слои, которые вы добавили к исходной версии, в отдельном окне документа:

Копия исходного документа появляется в новом окне.

Шаг 2. Сведение изображения

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

Перейдите в меню «Слой» > «Свести изображение».

Если мы снова посмотрим на мою панель «Слои», мы увидим, что все мои слои теперь сведены к одному фоновому слою:

Панель «Слои» с плоским изображением.

Шаг 3: изменение размера изображения

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

Выберите Изображение > Размер изображения.

Откроется диалоговое окно «Размер изображения». Как мы вскоре увидим, диалоговое окно Photoshop «Сохранить для Интернета и устройств» также дает нам возможность изменить размер изображения, но вы получите лучшие результаты, если заранее измените размер изображения с помощью команды «Размер изображения».

Если мы посмотрим на верхнюю часть диалогового окна, в разделе Pixel Dimensions , мы увидим, что моя фотография в настоящее время имеет ширину 1571 пикселей и высоту 2356 пикселей. Это слишком много для большинства людей, чтобы уместить все изображение на своем экране, если я отправлю им фотографию по электронной почте, и, конечно, слишком велико для отображения на большинстве веб-сайтов:

Текущая ширина и высота изображения в пикселях.

Вообще говоря, для электронной почты и веб-просмотра вы хотите ограничить размеры вашей фотографии не более чем 800 пикселей на 600 пикселей, что означает, что ширина не должна превышать 800 пикселей, а высота не должна превышать 600 пикселей. Если вы загружаете фотографию на веб-сайт, у веб-сайта могут быть другие, определенные размеры, которых вам нужно придерживаться, но, как правило, сохранение размера в пределах 800 на 600 пикселей позволит большинству людей удобно просматривать изображение на своем экране.

Прежде чем вводить новые размеры в пикселях, сначала убедитесь, что все три параметра в нижней части диалогового окна — Стили масштабирования , Ограничение пропорций и Передискретизация изображения — отмечены . Технически, когда изображение сглажено, нам не нужно беспокоиться о первом параметре, «Стили масштабирования», потому что к изображению не применяются стили слоя, но проще просто убедиться, что все три параметра отмечены. Затем установите 9Параметр 0436 Image Interpolation в самом низу диалогового окна на Bicubic Sharper (лучше всего для уменьшения). Нигде не написано «Интерполяция изображения», но это нижняя опция, которая управляет тем, как Photoshop обрабатывает пиксели в процессе передискретизации. Установка Bicubic Sharper даст нам наилучшие результаты при уменьшении размера изображения для просмотра на экране:

Убедитесь, что отмечены первые три параметра, а нижний параметр установлен на Бикубическая резкость.

Затем вернитесь к разделу Размеры в пикселях в верхней части диалогового окна и введите новые размеры. Так как моя фотография находится в портретном режиме, что означает, что она больше в высоту, чем в ширину, и я не хочу, чтобы высота превышала 600 пикселей, я введу 600 пикселей в параметр Высота . Если в нижней части диалогового окна выбран параметр «Сохранить пропорции», Photoshop автоматически введет новое значение ширины, чтобы сохранить соотношение ширины и высоты изображения таким же, как оно было изначально. В моем случае Photoshop ввел 400 пикселей для ширины :

При выбранном параметре «Сохранить пропорции» все, что нам нужно ввести, — это новая ширина или высота, и Photoshop введет для нас другое значение.

Обратите внимание, что я не изменил значение Разрешение в разделе Размер документа диалогового окна. Это связано с тем, что разрешение определяет размер изображения, которое будет напечатано на бумаге, и не имеет ничего общего с просмотром изображения на экране компьютера. Все, на чем нам нужно сосредоточиться при изменении размера изображения для отображения на экране, — это фактические размеры изображения в пикселях, которые можно найти в разделе «Размеры в пикселях» в верхней части диалогового окна.

После того, как вы ввели новые размеры, нажмите «ОК» в правом верхнем углу диалогового окна, чтобы закрыть его, после чего Photoshop уменьшит изображение до нового меньшего размера.

Шаг 4. Сохранить для Интернета

Мы продублировали, сгладили и изменили размер нашего изображения. Теперь пришло время оптимизировать и сохранить его. Перейдите к меню File в верхней части экрана и выберите Save For Web & Devices :

.

Выберите «Файл» > «Сохранить для Интернета и устройств».

Откроется очень большое диалоговое окно Photoshop «Сохранить для Web и устройств» с большой областью предварительного просмотра, занимающей большую часть пространства. Если вы посмотрите чуть выше левого верхнего угла области предварительного просмотра, вы увидите серию из четырех вкладок. По умолчанию выбрана вкладка Optimized , что означает, что вы не видите исходное изображение. Вместо этого вы видите предварительный просмотр того, как выглядит изображение с текущими настройками оптимизации (которые мы рассмотрим чуть позже):

Область предварительного просмотра по умолчанию настроена на оптимизированный режим просмотра.

Вы можете оставить режим просмотра Оптимизированный или, чтобы просмотреть параллельное сравнение исходной и оптимизированной версий изображения, переключитесь в режим просмотра 2-Up , щелкнув соответствующую вкладку:

Переключение в режим просмотра 2-Up.

При выборе 2-Up мы теперь можем видеть исходную версию изображения слева и оптимизированную версию справа (если ваше изображение находится в ландшафтном режиме, то есть его ширина превышает высоту, вы увидите вертикальную предварительный просмотр с исходной версией вверху и оптимизированной версией под ней):

Исходная версия слева, оптимизированная версия справа.

Формат файла
В правой части диалогового окна находятся различные параметры оптимизации (если вы не видите какие-либо параметры в списке, убедитесь, что в области предварительного просмотра выбрана оптимизированная версия изображения). Первое, что нам нужно сделать, это выбрать правильный формат файла для нашего изображения. Если вы впервые используете диалоговое окно «Сохранить для Интернета и устройств», вы увидите 9Формат файла 0436 GIF выбирается вверху (прямо под словом «Предустановка»). GIF — отличный формат для сохранения веб-графики, но для фотографий мы хотим использовать формат JPEG , поэтому измените параметр с GIF на JPEG, если он еще не установлен на JPEG:

Установите формат файла на JPEG.

Качество изображения
Непосредственно под параметром формата файла находятся параметры качества изображения . Мы можем выбрать один из предустановленных параметров качества (Низкое, Среднее, Высокое, Очень высокое и Максимальное) слева или ввести конкретное значение в Качество Вариант справа. Хотя может показаться заманчивым выбрать настройки самого высокого качества для наших фотографий, чтобы каждый мог увидеть, насколько они действительно потрясающие, оптимизация их для электронной почты или Интернета означает, что нам нужно сохранить размер файла как можно меньше, а это означает найти средний баланс между качеством изображения и размером файла. Предустановка качества Высокое качество почти всегда является лучшим выбором, предоставляя нам лучшее из обоих миров — приемлемое качество изображения и относительно небольшие размеры файлов. Выбор предустановки «Высокий» автоматически установит для параметра «Качество» значение 9.0436 60 :

Выберите предустановку «Высокое качество», в которой для параметра «Качество» установлено значение 60.

После выбора параметра качества убедитесь, что выбран параметр Optimized , который поможет еще немного уменьшить размер файла. Оставьте не отмеченным параметр Progressive , а также оставьте не отмеченным флажок Embed Color Profile , так как большинство веб-браузеров все равно не поддерживают цветовые профили:

Выберите «Оптимизированный» и не устанавливайте флажки «Прогрессивный» и «Встроить цветовой профиль».

Цветовое пространство
Наконец, выберите параметр Преобразовать в sRGB , если он еще не установлен. Это гарантирует, что фотография будет сохранена в цветовом пространстве sRGB, что, короче говоря, означает, что цвета на вашей фотографии будут правильно отображаться в Интернете или когда кто-то просматривает изображение в электронном письме:

Параметр «Преобразовать в sRGB» не позволяет цветам ваших фотографий выглядеть тусклыми и тусклыми на экранах компьютеров других людей.

Размер изображения
Ранее, когда мы рассматривали, как изменить размер фотографии с помощью команды «Размер изображения», я упоминал, что диалоговое окно «Сохранить для Интернета и устройств» также дает нам возможность изменить размер изображения. Вы найдете параметры размера изображения в правом нижнем углу диалогового окна. В моем случае здесь диалоговое окно показывает, что моя фотография имеет ширину 400 пикселей и высоту 600 пикселей, так как я изменил ее размер ранее. Хотя может показаться удобным иметь возможность изменять размер изображения, пока вы устанавливаете все другие параметры веб-оптимизации, вы получите лучшие результаты изменения размера, если проигнорируете эти параметры здесь и будете придерживаться фактической команды «Размер изображения»:

Параметры размера изображения в правом нижнем углу диалогового окна.

Сравнение размеров файлов
На этом этапе мы сделали все, что нужно, но прежде чем мы закроем диалоговое окно «Сохранить для Web и устройств» и действительно сохраним изображение, давайте быстро взглянем на две версии ниже. фотографии в области предварительного просмотра, чтобы сравнить размер файла исходной версии с размером оптимизированной версии. В моем случае исходное фото (слева) было целых 9.0436 703 Kb , слишком большой для Интернета, особенно для людей с низкой скоростью интернета, в то время как оптимизированная версия (справа), которая выглядит почти так же хорошо, как и оригинал, имеет размер всего 58,41 Kb :

Представление 2-Up позволяет сравнить размеры файлов между исходной и оптимизированной версиями изображения.