Как правильно сохранить изображение для web в Photoshop
Одна из полезных возможностей графического редактора «Фотошоп» – оптимизация изображений для веб-страниц. Функционал позволяет сжать снимок для дальнейшего использования в среде Интернет. Такой подход предполагает заметное уменьшение времени загрузки изображения при сохранении его качественной составляющей.
В статье пошаговый план как правильно сохранить изображения для Web в Photoshop.
Содержание
- 1 Инструкция по работе
- 1.1 Формат файла
- 1.2 Качество
- 1.3 Цветовое пространство
- 1.4 Размер изображения
- 1.5 Сравнение исходных и оптимизированных размеров файла
- 1.6 Сохранение изображения
Функционал находится в меню «Файл»: раздел «Экспортировать», подпункт «Сохранить для Web…». При клике по строчке открывается диалоговое окно, где можно гибко настроить параметры сохранения.
По умолчанию активирован режим «Оптимизации», но для большего удобства практичнее переключиться на вкладку «2 варианта».
В этом случае отображаются все корректировки внесённые пользователем, а визуализация идёт в формате до и после. Здесь же можно подогнать масштаб отображения при необходимости.
Формат файла
Наиболее популярные форматы для сохранения фотографий и других графических файлов – JPEG и PNG. Также программа предлагает расширение GIF, но оно используется для анимационных элементов. Статичные веб-изображения целесообразнее сохранять именно в JPEG или PNG.
Кликаем по строчке с выбором форматов и в выпадающем списке определяемся с расширением.
Для справки! Формат JPEG идеально подходит для снимков с плотной цветовой гаммой, а также для фотографий, где используется градиент. В то время как расширение PNG чаще всего используется для отображения схем, логотипов и других изображений, где требуется прозрачность.
Качество
После выбора расширения следует определиться с качеством картинки. Соответствующий раздел находится немногим ниже списка форматов.
Из представленного списка необходимо выбрать один из заданных параметров качества, начиная с низкого и заканчивая наилучшим. Также есть возможность подкорректировать значение в процентном выражении в блоке справа.
Конечно, максимальное качество выглядит заманчиво, но здесь нужно учесть, что один из ключевых моментов оптимизации веб-ресурсов включает в себя уменьшение размера файла. Показатель «Наилучшее» даёт на выходе не только высокодетализированную картинку, но и увеличенный объём изображения. Поэтому необходимо найти золотую середину.
По умолчанию значение выставлено на «Высокое» (60%), что является оптимальным вариантом для большинства фотографий. Также следует обратить внимание на строчку «Оптимизация». Данный параметр позволяет ещё больше уменьшить размер файла. Ставить маркеры на «Прогрессивный» и «Встроенный профиль» необязательно, потому как популярные браузеры, вроде Chrome или Firefox не поддерживают вариативность цветовых моделей.
Цветовое пространство
Функция «Преобразовать в sRGB» должна быть активна.
Дело в том, что все браузеры работают с цветовой моделью RGB. Если изображение ранее было переведено в режим CMYK, то после сохранения гамма на сайте будет отображаться некорректно.
Строчку «Просмотр» оставляем без изменений: «Цвет монитора». Блок ниже определяет вывод метаданных для изображения. Большинство систем управления содержимым (CMS) позволяют пользователю ввести всю необходимую информацию о картинке, поэтому здесь можно выставить параметр «Не показывать» из выпадающего списка.
Размер изображения
Блок предназначен для настройки линейных параметров снимка. Значения корректируются как в процентном соотношении, так и конкретно в пикселях. При необходимости можно отрегулировать соотношение высоты и ширины, кликнув по значку цепи.
Целесообразнее менять размер изображения перед сохранением файла для Web, иначе могут возникнуть конфликты версий. Перед открытием диалогового окна достаточно нажать комбинацию клавиш Ctrl + Alt + I и определиться с параметрами.
Значение «Качество» в блоке «Размер изображения» оставляем без изменений – бикубический. Это универсальный метод интерполяции, позволяющий получить достойную детализацию при максимальном сжатии данных.
Сравнение исходных и оптимизированных размеров файла
По завершению настроек следует оценить качество оптимизации изображения. Ключевой момент – размер файла на выходе. В примере объём последнего – 5,93 Мб. Это очень много для веб-страницы, учитывая, что в распоряжении доброй половины пользователей мобильный 3G-интернет.
Тогда как оптимизированная для веб-страниц версия файла занимает всего лишь 152,6 Кб. Такая фотография откроется за доли секунды, а томительное ожидание не будет вынуждать пользователя покидать ресурс.
Сохранение изображения
Далее нажимаем на кнопку «Сохранить», расположенную в нижней части интерфейса. Программа откроет диалоговое окно, где необходимо определиться с именем файла.
При обработке обычного изображения без встроенных HTML тегов или других пресетов строчки «Формат» и «Настройки» оставляем без изменений.
Жмём «Сохранить» и дожидаемся окончания процедуры.
Подобный подход позволяет заметно ускорить загрузку веб-ресурса. Этот момент особенно важен, когда сайт верстается под мобильные устройства. Скорость интернета на последних постоянно колеблется и не всегда в лучшую сторону. Оптимизация для Web решает эту проблему.
Нарезка изображений разных форматов для web в Photoshop
Если вы создали большой и сложный рисунок
для своей страницы, то имеет смысл его нарезать на несколько маленьких,
которые затем поместить в таблицу с невидимыми разделителями (border=0).
Зачем это надо? Во-первых, скорость загрузки такой страницы увеличится,
за счет параллельной загрузки сразу нескольких файлов. Во-вторых,
если правильно подойти к делу, то суммарный размер нарезанных
картинок можно сделать меньшим, чем исходного файла.
Допустим, на всей картинке у вас используется 256 цветов и вы записываете ее в соответствующий файл gif. Теперь если вы правильно порежете картинку, то обнаружите, что в отдельных областях достаточно 128 или 64 цветов (правильная нарезка как раз и состоит в выделении областей с небольшим количеством цветов). Убирая лишние цвета, вы уменьшите размер файла. Эта же техника позволит сделать как бы единую gif-картинку, содержащую больше 256 цветов — думаю понятно как.
Если кто не знает, поясняю — формат gif может показывать не больше
256 цветов, но эти цвета могут быть любыми из TrueColor (16 млн).
Описания цветов, используемых на картинке, хранится в самом файле
в проиндексированном виде, например так — цвет номер 0 имеет RGB
составляющие 0,0,0 (черный), а номер 2 -255, 255, 255 (белый).
Если у вас на картинке используется только 16 цветов, а вы записали файл gif в 256-цветном режиме, то лишние цвета просто занимают место в таблице, увеличивая размер.
Возможен еще такой вариант — картинка может содержать комбинацию фотореалистичных участков с большим количеством цветов и плавными переходами и участков с малым количеством цветов и резкими границами да еще и прозрачностью. Как известно первые лучше записывать в jpeg, последние — в gif, вот так и режем (честно говоря, я ни разу не видел, чтобы так делали).
Значит так с помощью Photoshopa разрезать изображение можно двумя
способами.
1-й способ подойдет
для более ранних версий и основан на самом, что ни наесть элементарном
способе.
Для начала в изображении надо расставить guides ( направляющие)
— это горизонтальные и вертикальные линии, не влияющие на само
изображение. В первую очередь выберите режим привязки guides —
( Привязка или Ctrl+;) и показа линейки (Показать границы или
Ctrl+R). Теперь на линейке нажимаем на мышь и тянем ее с нажатой
кнопкой на изображение — появляется синенькая линия — вот это
guide и есть.
Теперь, если вы выберете инструмент перемещения, guides можно передвигать с места на место или уничтожать (для этого просто вытащите guides за пределы изображения) .Чтобы временно убрать показ guides, но не уничтожать их перейдите в режим (Показать направляющие или Ctrl+`). Расставьте guides так, как вы собираетесь порезать картинку.
Следующий момент — проследите что б у вас был включен режим «прилипания»
инструментов к guides.
Теперь все инструменты выделения будут
липнуть к расставленным направляющим. Все что осталось сделать
— выделить соответствующие области, сделать «обрезку»
и записать их. После этого делаете откат назад (используйте history)
и вырезаете следующий кусочек. При записи лучше пользоваться меню
Сохранить для Web Alt+Ctrl+Shift+S, позволяющим оптимизировать
размер файла.
Вот на рисунке изображен один из способов разрезки изображения.
2-й способ
более автоматизирован и практичен.
Для нарезки изображения достаточно выбрать инструмент «срез»
(slice) и выделяя квадратные области разметить всю картинку. Далее
выбрав инструмент «выбор среза» (slice select) более
точно подкорректируйте области среза.
Здесь как вы видите все очень просто и быстро. Дважды кликнув на конвертике рядом с номером кусочка вы можете ввести название картинки, url на который он будет ссылаться и т.д. что очень полезно в web программировании.
Далее нажав «Сохранить для Web» (Alt+Ctrl+Shift+S) открывается
новое окно. В левой панели выберите инструмент «выбор среза»
(slice select) и выбирая по очереди каждый кусочек настройте под
него самые оптимальный параметр (как
это сделать смотри здесь). !!!
Важно так же следить, что бы в гонке за малым разметом картинка
не потеряла своей монолитности!!!!
Как использовать «Сохранить для Интернета» в Photoshop
Несмотря на то, что в Photoshop существует множество параметров экспорта, метод «Сохранить для Интернета» обеспечивает оптимизированный подход для точных цветов и разумных конечных размеров файлов. В этом руководстве вы узнаете, как использовать эту функцию в Photoshop для оптимизации веб-проектов.
Вы также изучите основные настройки, такие как предустановка, изменение типа файла, настройка веб-привязки и многое другое. К концу этого поста вы сможете брать самые большие изображения, какие сможете найти, и с легкостью подготовить их для Интернета.
Как получить доступ к функции «Сохранить для Интернета» в Photoshop
Не все знают о функции «Сохранить для Интернета» в Photoshop, и найти эту опцию может быть сложно, если вы не знаете, где искать.
Чтобы получить доступ к этой функции, выберите Файл > Экспорт > Сохранить для Интернета (предыдущая версия) .
Вы также можете использовать сочетание клавиш Shift + Alt + Control + S (Win) или Shift + Option + Command + S (Mac) .
Как экспортировать файл с помощью функции «Сохранить для Интернета» в Photoshop
При попытке сохранить файл для Интернета вы заметите, что существует множество вариантов выбора. В этом руководстве я расскажу только о параметрах, которые помогут оптимизировать вашу фотографию для Интернета, а не о параметрах, которые помогут стилизовать изображение.
После перехода к File > Export > Save For Web (Legacy) выполните следующие действия, чтобы экспортировать изображение.
Шаг 1. Выберите точку обзора
В верхней части меню параметров вы найдете ряд вкладок: Оригинал , Оптимизированный , 2-Up, и 4-Up .
Вкладка Оригинал покажет, как ваша фотография выглядит без изменений.
Вкладка Optimized покажет вам оптимизации из окна экспорта, происходящие с вашей фотографией в режиме реального времени.
Щелкнув вкладку 2-UP , вы увидите разделенный экран с исходным изображением вверху и версией, которую вы оптимизируете, внизу. Вы можете использовать эту вкладку для сравнения двух версий по мере внесения изменений.
Щелкнув вкладку 4-UP , вы увидите разделенный на четыре части экран. В левом верхнем углу исходное изображение без изменений. В других окнах будут представлены три разные оптимизированные версии вашего изображения. Каждое изображение будет иметь разный размер, цветовую палитру и степень дизеринга. Вы также получите расчетное время загрузки изображения.
Эту вкладку лучше всего использовать, когда у вас есть огромная фотография и вам нужно найти наилучший размер для ее преобразования. Благодаря трем различным вариантам вам будет намного проще найти самое красивое изображение, не жертвуя при этом слишком большим качеством.
В большинстве случаев Оптимизированный вид — это все, что вам нужно.
Шаг 2. Рассмотрите возможность использования предустановки
Первая настройка, которую вы можете настроить перед экспортом фотографии в Интернет, — это предустановка . Предустановка изменит ваше изображение, используя настройки по умолчанию.
Откройте раскрывающееся меню Preset , чтобы найти полный список доступных пресетов. Вы можете щелкнуть каждую предустановку в списке и посмотреть, какая из них лучше всего соответствует вашим потребностям. Они предназначены для того, чтобы вы могли получить набор готовых настроек для различных распространенных типов файлов. Это может помочь сэкономить некоторое время по сравнению с индивидуальной работой с каждым параметром сохранения для Интернета.
Использование предустановки необязательно, но если вам нужно экспортировать в GIF, JPEG или PNG, их стоит использовать!
Шаг 3. Измените тип файла
Тип формата файла является одним из наиболее важных параметров, который необходимо изменить при экспорте фотографии в Интернет.
В раскрывающемся меню типа файла вы найдете следующее:
- GIF
- JPEG
- PNG-8
- PNG-24
- ВБМП
Выберите JPEG или PNG , чтобы обеспечить быструю загрузку вашего изображения и сделать его совместимым практически с любым веб-приложением или компьютерным программным обеспечением.
Шаг 4. Настройте веб-привязку
Чем больше цветов на вашем изображении, тем дольше оно будет загружаться на веб-сайт. Настройка Web Snap вашего изображения изменит допуск палитры. Например, если на вашем изображении есть четыре оттенка синего рядом друг с другом, эти четыре оттенка будут объединены в один.
Поэкспериментируйте с процентом Web Snap, чтобы увидеть, что работает лучше всего.
Можно оставить процент на уровне 0%, если вы не можете заставить свое изображение выглядеть правильно. Как правило, 0% — лучший вариант, если только вы не пытаетесь уменьшить размер файла.
Шаг 5. Убедитесь, что установлен флажок sRGB
sRGB — это цветовой профиль, который могут считывать и отображать все устройства. Это гарантирует, что цвета, которые вы видите на своем экране, будут выглядеть одинаково на любом другом. Если ваш проект был выполнен в другом профиле, например CMYK, включение этого параметра приведет к преобразованию цветов в sRGB и сделает их более совместимыми для использования в Интернете.
Большая разница между ними заключается в том, что sRGB имеет более узкий диапазон цветов. Этот ограниченный диапазон цветов уменьшит ваш окончательный размер файла, сохраняя при этом детали вашего проекта.
Шаг 6. Измените размер фотографии
Еще один важный способ уменьшить размер файла — уменьшить размер фотографии. Делать это необязательно, но если ваше изображение загружается слишком долго, вы можете попробовать уменьшить размер фотографии.
Я не рекомендую изменять размер вашего изображения, если вы не изменяете размер до определенного размера, например, для баннера, фотографии профиля или логотипа веб-сайта.
Вы можете сделать это, введя другую ширину или высоту или введя меньшее число в поле 9.0011 Проц коробка.
Шаг 7. Установите качество изображения
В старых версиях Photoshop был ползунок «Качество». Этот ползунок был заменен раскрывающимся меню с пятью параметрами: Ближайший сосед , Билинейный , Бикубический , Бикубический , Сглаженный, и Бикубический Острый .
В общем держите качество на уровне Bicubic . Конечно, вы можете поиграть с ним, но Bicubic обычно достаточно хорош.
Шаг 8. Нажмите кнопку «Сохранить»
После выбора всех параметров нажмите Сохранить для подтверждения.
Вам будет предложено назвать файл и выбрать, где его сохранить. Нажмите Сохранить для подтверждения.
Теперь ваше изображение будет сохранено в выбранном вами формате файла и готово для использования в Интернете!
В чем разница между «Сохранить как» и «Сохранить для Интернета»?
Использование Сохранить как в Photoshop — это более быстрый способ экспорта изображений в различные типы файлов. Однако он ограничивает элементы управления настройками экспорта, которые определяют вывод цвета, размер файла, размеры и глубину цвета.
Параметр «Сохранить для Интернета » обеспечивает больший контроль над цветами, настройками файла и размерами изображения. Это также решение в тех случаях, когда ваши цвета выглядят слегка искаженными после использования методов «Сохранить как» или «Сохранить копию». Как правило, проще всего просто использовать File > Save A Copy для экспорта ваших проектов, но изучение использования Save For Web открывает некоторые дополнительные настройки экспорта, которые могут вам понадобиться.
Подготовка файлов для веб-вывода в Photoshop
Векторные инструменты Photoshop — это один из инструментов, который позволяет нам создавать такую вышеупомянутую векторную графику. Векторная графика — это не что иное, как компьютерная графика, которую можно бесконечно увеличивать или масштабировать без разрыва или обрезки, в отличие от растровых графических форматов, таких как jpeg (Joint Photographic Experts Group), png (Portable Network Graphics), растровое изображение и т. д. создавать различные типы векторных фигур в Photoshop. Эти векторные формы рассчитываются математически, в отличие от растровых инструментов, основанных на пикселях, которые создаются путем объединения нескольких квадратов с информацией о цвете (пикселях). С помощью этого векторного инструмента мы можем создавать различные типы векторных фигур, такие как прямоугольники, квадраты, эллипс, круг, многоугольник, однопиксельные линии и многие другие пользовательские формы.
Создание векторного изображения с помощью векторного инструмента
Чтобы создать вектор из векторного инструмента Photoshop, выполните следующие действия:
Шаг 1: Откройте Photoshop (либо с помощью значка на рабочем столе, либо с помощью Adobe Creative Cloud, либо путем поиска и щелкните результаты поиска в меню «Пуск».
)
Откройте Photoshop
Шаг 2: Нажмите кнопку «Создать новый», чтобы создать новый холст для нашей работы.
Нажмите кнопку «Создать новую»
Шаг 3: Укажите желаемое имя и размер холста (выберите любой, поскольку мы используем векторный формат) в диалоговом окне, показанном ниже:
Создайте холст для работы
Шаг 4: Выберите любой инструмент векторной формы ( Здесь я выбираю инструмент «Многоугольник» на панели инструментов слева, как показано ниже.
Выберите векторный инструмент
Вы также можете выбрать векторный инструмент, нажав U на клавиатуре.
Шаг 5: После выбора формы, которую вы хотите, начните удерживать левую кнопку мыши с той позиции, с которой вы хотите, чтобы векторная фигура начала рендеринг, и начните перетаскивать мышь по холсту и остановитесь только после получения желаемого конечного положения или размера.
Рисование вектора
Подготовка файла для вывода в Интернет
Чтобы подготовить любой файл для публикации в Интернете с помощью Photoshop, мы можем выполнить шаги, указанные ниже: Фотошоп.
Нажмите на файл
Шаг 2: Нажмите на опцию Экспорт.
Нажмите на экспорт
Шаг 3: Теперь нажмите на опцию Сохранить для Web (Legacy). или вы также можете нажать:
Alt + Shift + Ctrl + S
Нажмите «Сохранить в Интернете»
