Как правильно сохранить фото в фотошопе: Сохранение файлов в Adobe Photoshop — Независимое театральное объединение "Зрительские симпатии"

Содержание

Как правильно сохранить изображение для Web в Photoshop

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

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

При активной вкладке «2 варианта», теперь мы видим сразу два изображение, оригинальную версию слева и оптимизированную версию справа (если Ваша картинка имеет альбомную ориентацию, т.е. её ширина больше, чем высота, то тогда картинки будут показываться одна над другой):

Формат файла

С правой стороны диалогового окна находятся опции оптимизации изображения.

Первое, что нужно сделать, это выбрать правильный формат файла для нашего изображения. Если Вы открываете это окно в первый раз, по умолчанию установлен формат GIF. формат выбранного файла в верхней части (непосредственно под словом «Preset»). GIF в некоторых случаях используется для сохранения веб-графики, но для моей фотографии лучше подойдёт формат JPEG, поэтому я изменю GIF на JPEG:

Качество сжатия изображения

Непосредственно под опцией формата находится варианты выбора качества сжатия изображения, т.е. выходного качества самой картинки.
Мы можем выбрать из предварительно заданные параметров качества (низкое, среднее, высокое и очень высокое, и наилучшее, в англ. — Low, Medium, High, Very High, и Maximum) в выпадающем списке слева, либо можем ввести определённое значения качества в процентах справа.

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

Значение качества «Высокое» почти всегда является оптимальным выбором, оно даёт нам приемлемое качество изображения при относительно небольшом размере файла. Выбор значения «Высокое» автоматически устанавливает значение качества на 60%:

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

Цветовое пространство

Наконец, включите опцию «Преобразовать в sRGB» (Convert to sRGB), если она ещё не активна. Это позволит убедиться в том, что фотография сохраняется в цветовом пространстве sRGB, что, проще говоря, означает, что цвета на фотографии будут корректно отображаться на веб-сайте:

Размер изображения

Диалоговое окно также дает нам возможность изменить линейный размер изображения.

Я рекомендую изменять размер изображения заранее, перед включением диалогового окна «Сохранением для Web», чтобы при сохранении для Web линейные размеры в пикселях были уже готовыми. Особенно это актуально для последней версии Photoshop CC с его
новым диалоговым окном «Размер изображения». Об изменении размера изображения в Photoshop CC рассказывается здесь, а в версиях CS6 и ниже — здесь.

Сравнение исходных и оптимизированных размеров файла

На данный момент, мы сделали все, что нужно, для оптимизации файла для Web, и теперь давайте посмотрим на размер файла в байтах в исходной и оптимизированной версиях. В моем случае, размер исходной фотографии (слева) был равен колоссальному для интернета значению — 1,29Mb что слишком велико для пользователей даже со средней скоростью интернета, а оптимизированная версия (справа), которая выглядит почти так же хорошо, как и оригинал, получилась всего 41,85 Kb :

Сохранение изображения

Чтобы сохранить оптимизированную версию Вашей фотографии, нажмите кнопку «Сохранить» (Save) в нижней части диалогового окна. Photoshop откроет новое диалоговое окно «Сохранить оптимизированный как» (Save Optimized As), которое позволяет при необходимости переименовать изображение, а также выбрать нужную папку на жёстком диске для сохранения. Когда закончите, нажмите кнопку «Сохранить», чтобы сохранить изображение и выйти из диалогового окна:

Ну вот, собственно, и всё. Фото теперь полностью оптимизировано и готово к оправке по электронной почте либо для размещения на сайте.

Фотошоп как сохранить

Как сохранить фото в фотошопе

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

В фотошопе сохранить изображение можно под разными форматами – psd, bmp, gif, jpeg и другие различные форматы. Чтобы сохранить новую фотографию в adobe photoshop, вам нужно будет в программе выполнить следующие действие: Наводим курсор мыши на пункт «Файл» и один раз нажимаем левую кнопку мыши, в раскрывшемся меню выбираем пункт «Сохранить как…».

Также можно сохранить фотографию быстрым способом, для этого нажимаем на клавиатуре комбинацию клавиш Shift+Ctrl+S.

После всех выполненных действий в программе фотошоп откроется проводник виндовс, где вам нужно будет выбрать локальный диск и папку, в которой будет сохранена ваша фотография. Итак, в правой части проводника выбираем локальный диск и папку. Я буду сохранять изображение на рабочем столе windows, поэтому я выберу пункт «Рабочий стол».

Теперь нам нужно указать название и формат сохраняемого изображения.

Итак, напротив строки «Имя файла», в специальном поле указываем название сохраняемой фотографии. Далее напротив строки «Тип файла», нажимаем на специальную кнопку, после чего откроется выпадающие меню, где нам нужно будет выбрать формат JPEJ (*JPG; *JPEG; *JPE) самый распространенный и легкий формат, который везде используется и применяется.

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

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

После того как вы установили ползунок на качество фотографии, нажимаем на кнопку «OK».

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

Понравилось – ставим лайк, делимся с друзьями, подписываемся на сайт.

Также вы можете посмотреть подробную видео инструкцию, в которой, вы сможете посмотреть, как сохранить фотографию в adobe photoshop.

Как сохранить фото в фотошопе

Подписаться на новые инструкции через:

Как сохранить картинку из фотошопа?

Внимание! В данном ответе предполагается, что у Вас в фотошопе картинка уже открыта.

1. Выбираем Save As (Сохранить как):

2. Далее выбираем куда будем сохранять, ставим Fomat (Формат) JPEG и жмем Сохранить:

3. В появившемся окошке устанавливаем Quality (Качество) на 10:

4. Жмем ОК.

Как сохранить в фотошопе

Когда работа в фотошопе готова её необходимо сохранить.

В зависимости для какой задачи вы сохраняете файл вам необходимо выбрать формат. В этой статье мы рассмотрим как сохранять и какой формат файла выбрать.

В каком формате сохранять файл?

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

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

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

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

Как сохранить в PSD

Файл — Сохранить (CTRL+S)

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

Задайте название файлу и выберите формат PSD (обычно выбран по умолчанию).

Если хотите пересохранить в другой файл и с другими именем — воспользуйтесь командой Файл — Сохранить как.

Как сохранить в JPG

Выполните команду Файл — Сохранить.
Выберите формат JPG.

После этого появиться окно, где вы можете настроить параметры сохраняемого файла.

Здесь вы можете отрегулировать качество фотографии, выставив значение Качество от 1 до 12.

Установите галочку на параметре просмотр и будет видно как меняется качество фотографии, когда вы меняете параметр Качество.

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

Разновидность формата лучше оставить Прогрессивный. Сейчас не будем вдаваться в технические подробности, но этот вариант самый оптимальный.

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

Как сохранить в PNG

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

Файл — Экспортировать — Сохранить для Web (старая версия)

Появиться окно с настройками сохраняемого изображения.

Выбирайте формат PNG-24 — это будет качественное изображение с наименьшим весом файла и со всеми цветами.

Установите галочку Прозрачность, чтобы картинка была с прозрачным фоном.

Параметры — Чересстрочно и Встроенный профиль необходимо убрать, т.к. это лишняя и не нужная нагрузка на файл.

картинка с прозрачным фоном сохранённая в фотошопе

Как сохранять в GIF

Файл — Экспортировать — Сохранить для Web (старая версия)

Выбирайте формат GIF.

Формат GIF серьезно ужимает изображение в цветах и соответственно в весе файла. Максимум тут доступно 256 цветов.

Не забудьте поставить галочку напротив Прозрачности, чтобы был прозрачный фон, если он нужен.

Адаптивная модель цветов — наилучшая, когда нужно сохранить в максимальном качестве.

Дизеринг я устанавливаю 100%, в этом случае градиентные переходы более плавные.

Если у вас есть анимация в гифке, то можно настроить её количество повторов. Обычно ставят Многократно, чтобы анимация была бесконечно повторяющаяся.

Теперь вы знаете как сохранять в фотошопе, используя самые популярные форматы. Остались вопросы? Приглашаю в комментарии.

Как сохранить документ в фотошопе

В этом уроке вы узнаете, как сохранить документ в фотошопе. После того как фотография была отредактирована то, скорее всего вы задались вопросом как ее сохранить? Для этого в фотошопе предусмотрены три команды: Save (Сохранить), Save As (Сохранить как) и Save for Web & Devices (Сохранить для Web и устройств):

Основные сведения

Все три команды можно выполнить через меню File (Файл):

Команда Save (Сохранить), позволяет сохранить документ, в том формате, в котором была открыта изначально. Ее рекомендуется использовать в том случае, когда вы редактируете изображение, что бы в случае зависания программы не потерять результаты. Следующая команда, Save As (Сохранить как), будет для вас наиболее полезна, она позволяет выбрать формат сохранения, качество и название. Команда Save for Web & Devices(Сохранить для Web и устройств) полезна для сохранения изображения веб ресурсов или каких либо устройств, позволяя сильно сжимать и менять размеры изображения. Что бы изучить настройки этой команды потребуется отдельный урок.

Сохранение файла в формате JPEG

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

Для соxранения изображения в этом формате нужно выбрать File (Файл)- Save As (Сохранить как), после чего откроется окно с настройками сохранения, о котором подробно будет рассказано ниже:

В верхней части расположено окно для выбора места сохранения вашем жестком диске.
Изменение имени файла
В поле Format (Формат) можно выбрать формат для файла. Выберите формат JPEG и нажмите сохранить.

Перед вами откроется окно с настройками файла:

В разделе Image Options можно выбрать качество и степень сжатия:Low (Низкое), Medium (Среднее), High (Высокое) и Maximum (Максимальное). Легче всего это сделать при помощи ползунка. Помните, что чем больше сжатие, тем хуже качество. Слева указан размер файла. В разделе Format Options можно выбрать один из трех методов сжатия:

Baseline Standart (Базовый Стандартный) этот метод сжатия самый распространяемый, идеально понимаемый формат для устройств и веб браузеров.
Baseline Optimizes (Базовый оптимизированный) метод который позволяет сжимать изображение, но при этом сохранять четкость и краски.
Progressive (Расширенный) с помощью сoхранения этого метода изображение будет загружаться не построчно, а за несколько проходов по мере загрузки. В каждый из них будет выводится полное изображения, улучшаясь от прохода к проходу. Некоторые браузеры и устройства плохо с ним работают.

Оставьте Baseline Standart и нажмите OK

Сохранение файла в формате PSD

При сохранении файла в формате PSD сохраняются все процессы редактирования, включая слои, маски, фильтры и тд. Поэтому если вы откроете этот формат в Photoshop, то сможете с легкостью внести изменения.

Вновь выберите File (Файл) — Save as (Сохранить как). В открывшемся окне в поле Format (Формат) выберите PSD:

В статье Форматы графических файлов более подробно рассказано о форматах изображений.

Похожая по теме статья: Как создать новый документ в фотошопе

Как сохранить изображение в Фотошопе? Как правильно сохранять готовые изображения в Photoshop’е? Как сохранить изменения в фотошопе.

09.11.2018 09.11.2018

Когда работа в фотошопе готова её необходимо сохранить.

В каком формате сохранять файл?

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

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

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

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

Как сохранить в PSD

Задайте название файлу и выберите формат PSD (обычно выбран по умолчанию).

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

Как сохранить в JPG

Выполните команду Файл — Сохранить .
Выберите формат JPG .

После этого появиться окно, где вы можете настроить параметры сохраняемого файла.

Здесь вы можете отрегулировать качество фотографии, выставив значение Качество от 1 до 12.

Установите галочку на параметре просмотр и будет видно как меняется качество фотографии, когда вы меняете параметр Качество .

Разновидность формата лучше оставить Прогрессивный . Сейчас не будем вдаваться в технические подробности, но этот вариант самый оптимальный.

Как сохранить в PNG

Появиться окно с настройками сохраняемого изображения.

Выбирайте формат PNG-24 — это будет качественное изображение с наименьшим весом файла и со всеми цветами.

Установите галочку Прозрачность , чтобы картинка была с прозрачным фоном.

Параметры — Чересстрочно и Встроенный профиль необходимо убрать, т.к. это лишняя и не нужная нагрузка на файл.

картинка с прозрачным фоном сохранённая в фотошопе

Как сохранять в GIF

Выбирайте формат GIF.

Не забудьте поставить галочку напротив Прозрачности , чтобы был прозрачный фон, если он нужен.

Адаптивная модель цветов — наилучшая, когда нужно сохранить в максимальном качестве.

Дизеринг я устанавливаю 100%, в этом случае градиентные переходы более плавные.

Если у вас есть анимация в гифке, то можно настроить её количество повторов. Обычно ставят Многократно , чтобы анимация была бесконечно повторяющаяся.

Я вас снова приветствую на просторах моего блога, уважаемые читатели и посетители. Сегодня мы узнаем, как сохранить картинку в фотошопе для разных ситуаций. Мы узнаем, как сохранять изображения на прозрачном фоне, без потери качества, анимацию и многое другое. Многие уже наверное удумают: «Что за фигня? Когда мы начнем нормальным фотошопом заниматься, а не мелочами всякими». Я вам отвечу. Не спешите вперед паровоза. Изучите сначала теорию и азы, а уж потом и самое интересное будет. Идите по порядку и всё будет круто. Тем более, здесь есть свои нюансы, начиная с формата рисунка, заканчивая размером.

Обычное сохранение

Для сохранения вашего документа или точнее сказать картинки, вам нужно снова идти в верхнее меню и нажать там куда? Правильно, надо нажать на «Файл» . А в открывшемся меню выбрать «Сохранить как» . Есть несколько основных форматов, в которые рекомендуется сохранять. Подробнее мы их рассматривали . Вкратце скажу вам в какие форматы для каких целей лучше сохранять изображения.

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

Если изображение предусматривает работу с более точным рисунком, где показаны какие-то важные мелочи, то ставьте на полные 12, так как от этого зависит, как будет меняться качество при увеличении картинки. Если это обычная картинка, где точность и качество особой роли не играет, то не стоит ставить больше 8.

В каких форматах лучше всего сохранять картинку

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

Если ваш проект еще не закончен, то сохраняйте в формате PSD . Сохранится весь ваш прогресс, прозрачность, все слои и так далее. Да и кстати, если проект не просто какая-то однодневка, а что-то более масштабное, то лучше всегда держать копию в PSD. Я всегда держу шаблоны картинки, которые вставляю в анонс к статье, так как тема одна и та же. Просто меняется картинка внутри и заголовок.
Если вы закончили ваш проект и хотите сохранить ваш конечный результат (например обработали фотографию или сделали коллаж), то сохраняйте в JPG (JPEG) . Самое оптимальное для фото. В подавляющем большинстве случаев сохранять будем именно в нём.
Если вы делали анимацию (например анимированные баннеры), то вам подойдет только GIF , так как только он может состоять одновременно из нескольких изображений. Но несмотря на огромный плюс, данное расширение имеет и жирный минус. Дело в том, что оно не способно сохранять картинки с количеством цветов более 256. А это, как вы уже наверное догадались, очень мало, с учетом того, что обычная JPG фотография способна содержать в себе более 16 миллионов цветов. Чуете разницу? Но для малоцветных анимированных баннеров — это будет то, что надо.
Если у вас изображение подразумевает прозрачный фон, т. е. на картинке только определенный объект без белого фона (или), то тогда ваш формат PNG . Дело в том, что если вы сохраните любую картинку с прозрачным фоном в фотошопе с расширением JPG, то он просто зальется белым цветом. И при последующей вставке картинки в редактор, никакой прозрачности больше не будет.
Если вы хотите сохранить картинку в фотошопе без потери качества, то лучше всего делать это в формате TIFF . Именно здесь сохраняется вся цветовая палитра и пиксели. Данный формат используют для полиграфии при распечатке растровых изображений как раз так из-за того, что качество не хромает. Единственным минусом становится то, что он занимает неприлично много места на жестком диске.
Ну и конечно, нельзя было не упомянуть, что фотошоп способен создавать графику в формате PDF , что позволит открывать его не как изображение,а как документ.

Еще хотелось бы заметить, что GIF, как и PNG поддерживает прозрачность фона, но в отличие от последнего он не поддерживает полупрозрачность. Либо вс1, либо ничего.

Конечно, тут вы можете увидеть много других расширений, но поверьте мне, они не стоят вашего внимания.

Сохранение для Web

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

А если вы хотите сохранить картинку в фотошопе с прозрачным фоном для Web, то выберите формат PNG-24. Обязательно убедитесь, что в пункте «Прозрачность» стоит галочка, иначе ваше изображение будет с белым фоном, который заменит всю пустоту. Как вы уже знаете, расширение PNG способно работать без фона.

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

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

Попробуйте проделать все манипуляции от начала до конца самостоятельно. Это очень просто. Кроме того, сделайте это для каждого из назначений.

Ну а если вы хотите более подробнее изучить фотошоп, то могу вам предложить замечательный видеокурс , благодаря которому вы обучитесь фотошопу за пару-тройку недель. Поверьте, это совсем не сложно, если уделять программе 1-2 часа в день. Все уроки выполнены в формате видео и рассчитаны для начинающих, так что вам не будет дискомфортно и вы всё поймете с первого раза. Поверьте, это действительно стоящий курс!

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

С уважением, Дмитрий Костин

Работая с графическим редактором Adobe Photoshop вот уже 5 лет, я удивился узнав, что не все знают о важности и необходимости правильно сохранять изображения. Обратившись к интернету, я действительно не нашел актуальной и правильной информации по этой теме. По этой причине, я разобрался в вопросе и хочу рассказать вам как правильно сохранять изображения.

Кому это нужно знать и зачем?

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

О каком времени речь?

Для начала проясним одну вещь:

Используя интернет, вы теряете время — много времени

Загрузка страниц в интернете не моментальная и требует времени, но за долгие годы пребывания в интернете вы привыкли не замечать этого. Допустим, средняя скорость загрузки страницы 3 секунд , где 2 из них приходятся на загрузку изображений. Иллюстрации, элементы интерфейса, фотографии, рекламные баннеры, PDF-презентация или даже картинка с милым котом, в зависимости от размера файла, потребуется время, что бы браузер вывел изображение на экран.

Не обманывайте себя «мегабайтами в секунду»

Скорее всего, ваш интернет-провайдер обещает вам 100 Мбит/с — это гениальный рекламный ход(читайте как: обман) породивший множество заблуждений, в том числе и в теме скорости загрузки сайта. Я замерил скорость соединения с сервером расположенным в Москве, результат:

А вот скорость загрузки страницы с сайта значительно ниже:

Сколько изображений в день вы просматриваете?

Десятки? Сотни? Я как активный пользователь интернета просматриваю несколько сотен изображен в день, причем большинство из них высокого разрешения. Если уменьшить вес этих изображений и соответственно увеличить скорость загрузки, хотя бы на 1 секунду, умножив на 500 изображений в день, то получим около 8 минут в день и 4 часа в месяц.

4 часа в месяц я ожидаю, когда загрузится картинка

Все, что нужно знать о сохранении изображений

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

Вредной привычкой является установка качества в значение 100 , но в сравнении с 80 разнится видимого качества практически равна нулю, а вот разница в весе ощутима .

Для размещения изображения на сайте, передаче по почте, сохранения в облаке, отправке в мессенджере и т. п. — необходимо использовать Save for Web.

JPEG или PNG?

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

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

Какое качество(Quality) выбрать?

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

Оптимизация(Optimized)

Функция включает дополнительный алгоритм по преобразованию цветов, рекомендуется включать всегда , кроме случаев, когда важны самые мельчайшие детали(например Pixel Art).

Преобразовать в sRGB(Convert to sRGB)

Преобразование цветов изображения к соответствующей таблице sRGB.

sRGB является стандартом для интернета

Разрешение(Image Size)

Самым распространенным разрешением экрана является: 1366×768 — для компьютера и 720×1280 — для смартфона. Имейте это ввиду и не сохраняйте изображения больше, чем 1920 по ширине.

Метаданные(Metadata)

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

Когда вы последний раз смотрели подробную информацию скачанного изображения?

Используя данный метод, мне удалось уменьшить вес изображения в два раза.

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

Спасибо, Владислав.

Подготовке любого цифрового изображения, читаемого графическим редактором Adobe Photoshop, будь то PSD-файла, TIF-изображения или «большой» JPEG-картинки, к публикации на сайте, в форуме или социальных сетях, а также к пересылке по электронной почте. Другими словами, «джейпег» для Интернет. В рифму получилось.

Безусловно, форматы изображений, которые умеет читать Photoshop, едва ли исчерпываются названными тремя. И что приятно, большинство можно перевести в JPEG. Вне зависимости от исходного формата в Photoshop существуют два пути «джейпегизации». Возможность выбирать приятна вдвойне. Оба пути различаются. Внешние отличия обнаруживаются невооружённым взглядом, отличия в назначении («Каким путём следовать?») я выделю специально.

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

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

Первый способ

1 шаг

Открываю исходное изображение в Photoshop. В моём случае это файл с названием «Пример.psd», содержащий нарисованный шар.

Нажимаю на клавиатуре сочетание клавиш «Ctrl», «Shift» и клавиши, обозначенной латинской буквой «S» либо выбираю в главном меню «Файл» («File») > «Сохранить Как…» («Save As…»). Появляется диалоговое окно с заголовком «Сохранить как».

2 шаг

Выбираю месторасположение будущего JPEG-изображения. В поле «Имя файла» ввожу новое название картинки, если необходимо. В ниспадающем списке «Тип файла» выбираю формат «JPEG (*.JPG, *.JPEG, *.JPE)».

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

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

3 шаг

Нажимаю на клавиатуре клавишу «Esc», чтобы закрыть окно «Сохранить как».

Выбираю в главном меню «Изображение» («Image») > «Режим» («Mode»). Если «галочка» установлена напротив «8 бит\канал» («8Bits\Channel»), то выбираю «16 бит\канал» («16bits\Channel»). Увеличение глубины цвета желательно, чтобы конвертация из одного цветового профиля в другой прошла аккуратно. Визуально на исходном и итоговом изображениях изменение глубины цвета едва ли отразится.

Затем выбираю в главном меню «Редактировать» («Edit») > «Преобразовать в профиль» («Convert to Profile»). Появляется диалоговое окно с заголовком «Преобразовать в профиль».

В моём случае исходный цветовой профиль («Source Space»), который описывает цвета в рисунке, называется «Adobe RGB (1998)». Выбираю в ниспадающем списке «Целевой профиль» («Destination Space») значение «sRGB IEC61966-2.1». Проверяю параметры преобразования — они располагаются ниже: параметр «Инструмент» («Engine») имеет значение «Adobe (ACE)», «Метод (рендеринга)» («Intent») — «Относительный колориметрический» («Relative Colorimetric»), установлена «галочка» напротив параметра «Использовать компенсацию точки чёрного» («Use Black Point Compensation»), «галочка» отсутствует напротив параметра «Свести изображение, чтобы сохранить вид» («Flatten Image to Preserve Appearance»).

Если Вы увеличили глубину цвета (я проделал это чуть раньше), то параметр «Использовать дизеринг» («Use Dither») будет неактивным. Если в открытом изображении всего один слой (когда Вы открываете JPEG-картинки или «простые» TIF-изображения, обычно, так и есть), то параметр «Свести изображение, чтобы сохранить вид», также, неактивен.

Нажимаю кнопку «Готово» («OK»). Окно «Преобразовать в профиль» исчезает.

4 шаг

В главном окне программы появляется новое диалоговое окно с заголовком «Параметры JPEG» («JPEG Options»). Параметр «Качество» («Quality») позволяет задавать соотношение качества выходного изображения и объёма, который картинка будет занимать в памяти компьютера. Таким образом, оплатой за уменьшение объёма является деградация качества исходного изображения. Чем меньше значение параметра «Качество», тем меньше объём JPEG-изображения.

В рассматриваемом примере я остановлюсь на значении равном 6.

Чтобы оценить качество картинки до сохранения, установлю рядом с параметром «Предпросмотр» («Preview») «галочку».

5 шаг

Установлю значение второго параметра — «Форматирование» («Format Options») — равным «Стандартное оптимизированное» («Baseline Optimized»). Объём будущей JPEG-картинки уменьшился, а качество изображения осталось прежним.

6 шаг

Нажимаю в окне «Параметры JPEG» («JPEG Options») кнопку «Готово» («OK») и проверяю результат.

Сравниваю объёмы исходного PSD-рисунка (~ 3000 Kb) и итоговой JPEG-картинки (82 Kb). Таким образом, JPEG-файл получился примерно в 36 раз меньше исходного изображения при визуально равном качестве. Удобно!

Обращаю внимание, что размер итогового JPEG-изображения остался прежним, как у исходного PSD-рисунка он равен 2480 пикселей × 2480 пикселей.

Второй способ

1 шаг

Открываю исходное изображение в Photoshop.

Нажимаю на клавиатуре сочетание клавиш «Ctrl», «Alt», «Shift» и клавиши, обозначенной латинской буквой «S» либо выбираю в главном меню «Файл» > «Сохранить для Веб…» («Save for Web…»).

Появится новое диалоговое окно с одноимённым заголовком.

2 шаг

3 шаг

Устанавливаю значение параметра «Качество» («Quality») на максимум.

4 шаг

Уменьшаю размер изображения с помощью параметра «Размер изображения» («Image Size»).

Это необязательная операция, но она помогает существенно уменьшить объём будущего JPEG-изображения, чаще всего, с минимальными потерями в качестве. С одной стороны, уменьшение размера приведёт к естественному уменьшению объёма и, с другой стороны, к уменьшению детализации. Последнее, в свою очередь, ограничивает мои возможности в печати итоговой JPEG-картинки. Если я не планирую печатать последнюю, то забуду об ограничениях.

В данном примере ввожу в поле «Ширина» («Width») значение 600. Автоматически изменится значение в поле «Высота» («Height»). Также, автоматически изменится размер выходного изображения относительно размера исходного рисунка, указанный в поле «Процент» («Percent»). Изменения происходят автоматически и поле «Процент» находится в активном состоянии, если поля-параметры «Ширина» и «Высота» связаны, о чём свидетельствует соответствующий значок, расположенный справа от названных полей.

В окошке предпросмотра слева оценю размер и качество изображения. А примерный объём последнего смогу узнать по числу, указанному, обычно, в килобайтах (Kb) или мегабайтах (Mb) под левым углом окошка.

5 шаг

Устанавливаю «галочку» рядом с параметром «Оптимизированный» («Optimized»).

6 шаг

Если хочу ещё сократить объём выходного изображения, то уменьшаю значение параметра «Качество» («Quality»). Рекомендую придерживаться значений в пределах 45-90.

В данном случае я выберу значение равное 75.

В итоге, среднестатистическое, при скорости доступа в Интернет равной одному мегабиту (1 Mbits), время загрузки моего рисунка из Интернет составит одну секунду. Оно указывается под значением объёма будущего JPEG-изображения.

При этом, визуально картинка получилась вполне приемлемого качества, переходы тонов достаточно плавные.

7 шаг

Устанавливаю «галочку» рядом с параметром «Преобразовать в sRGB» («Convert to sRGB») и выбираю значение «Цвета, отображаемые монитором» («Monitor Color») в ниспадающем списке ниже.

8 шаг

Наконец, устанавливаю «галочку» рядом с параметром «Встроенный цветовой профиль» («Embed Color Profile»).

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

9 шаг

В появившемся диалоговом окне с заголовком «Сохранить оптимизированное изображение как» («Save Optimized As») выбираю месторасположение JPEG-картинки и задаю её имя, если необходимо. Нажимаю в активном окне кнопку «Сохранить». Оба окна исчезают. Теперь могу оценить результат.

Закрываю исходное изображение. В появившемся диалогом окошке с предложением сохранить изменения, выбираю «Нет» («No»).

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

Подробнее об интерполяции и её влиянии на деградацию качества цифрового изображения я расскажу в уроке «Что такое интерполяция?»

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

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

Сегодня поговорим о том, как сохранять готовые работы в Фотошопе.

Первое, с чем необходимо определиться, прежде чем начать процедуру сохранения, это формат.

Распространенных форматов всего три. Это JPEG , PNG и GIF .

Начнем с JPEG . Данный формат универсален и подходит для сохранения любых фотографий и изображений, не имеющих прозрачного фона.

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

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

В отличие от предыдущего формата, PNG при повторном редактировании (использовании в других работах) не теряет в качестве (почти).

Последний на сегодня представитель форматов – GIF . В плане качества это самый худший формат, так как имеет ограничение по количеству цветов.

Давайте немного попрактикуемся.

Для вызова функции сохранения необходимо перейти в меню «Файл» и найти пункт «Сохранить как» , либо воспользоваться горячими клавишами CTRL+SHIFT+S .

Это универсальная процедура для всех форматов, кроме GIF .

Подложка

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

Параметры изображения

Здесь выставляется качество картинки.

Разновидность формата

Базовый (стандартный) выводит изображение на экран построчно, то есть обычным способом.

Базовый оптимизированный использует для сжатия алгоритм Хаффмана (Huffman). Что это такое, объяснять не буду, поищите сами в сети, это к уроку не относится. Скажу только, что в нашем случае это позволит немного уменьшить размер файла, что на сегодняшний день не сосем актуально.

Прогрессивный позволяет улучшать качество изображения пошагово по мере его загрузки на веб странице.

На практике чаще всего применяются первая и третья разновидность. Если не совсем ясно, для чего вся эта кухня нужна, выбирайте Базовый («стандартный») .

Сохранение в PNG

При сохранении в этот формат также выводится окно с настройками.

Сжатие

Эта настройка позволяет значительно сжать итоговый PNG файл без потери качества. На скриншоте настроено сжатие.

На картинках ниже Вы можете увидеть степень компрессии. Первый скрин со сжатым изображением, второй – с несжатым.

Как видим, разница значительная, поэтому имеет смысл поставить галку напротив «Самый маленький/медленно» .

Чересстрочно

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

Я пользуюсь настройками, как на первом скриншоте.

Сохранение в GIF

Для сохранения файла (анимации) в формате GIF необходимо в меню «Файл» выбрать пункт «Сохранить для Web» .

В открывшемся окне настроек ничего менять не придется, так как они оптимальны. Единственный момент – при сохранении анимации необходимо выставить количество повторений воспроизведения.

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

Конвертирование в CMYK в Photoshop CS

Немногие пользователи Photoshop после обработки фотографий отправляют их на печать. Уже привычным делом стало делиться своими снимками в сети Интернет или показывать их друзьям на экранах компьютеров, планшетов и прочих гаджетов. Но что делать, если все-таки возникла необходимость напечатать фотографию? Стоит ли полагаться на удачу и ожидать что снимки выйдут столь же удачными, как на экране монитора? Тут и возникает необходимость подготовить снимок таким образом, чтобы и на бумаге он вышел «правильным» и все старания по обработке фотографии не прошли зря.

У многих читателей, возможно, уже возник вопрос: «Что тут можно сделать не так? Разве не достаточно выполнить команду Image >Mode >CMYK [Изображение >Режим >CMYK] и решить проблему раз и навсегда?»

Дело в том, что метод заданный по умолчанию в Photoshop для конвертации в режим CMYK, не учитывает определенные моменты, которые могут негативно и непредсказуемо отразиться на печати.

Что из себя представляют режимы CMYK и RGB?

Режим RGB является методом визуального отображения изображения на экране с помощью трех цветов Red (Красный), Green (Зеленый) и Blue (Голубой), после смешения пикселов которых, получается необходимый оттенок.

А CMYK представляет собой распределение Cyan [Голубой], Magenta [Сиреневый], Yellow [Желтый] и Black [Черный] цветов для реализации сетей смещения, которые распределяют образцы точек с переменной плотностью и размером на «листе бумаги», именно это и дает возможность получить необходимый цвет. Когда мы смотрим на CMYK-изображение, то наблюдаем лишь симуляцию режима, на самом деле мы наблюдаем RGB-режим, в который «налету» было переведено изображение для его отображения, потому что монитор не поддерживает CMYK-метод вывода.

Увеличение точек

Итак, с чего же начать? Для корректного конвертирования изображения в CMYK-режим, необходимо решить несколько проблем и, прежде всего — Dot Gain [Увеличение точки]. После того, как изображение уже напечаталось, легко заметить, что оно состоит из маленьких пятен, сделанных чернилами принтера, в зависимости от качества используемой бумаги они (пятна) имеют расширение от центра к внешним сторонам.

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

В Photoshop у вас есть возможность регулировать процесс печати этих точек, управлять их яркостью перед окончательным выводом. Делается это посредством меню File > Print with Preview [Файл >Печать с Предварительным просмотром], параметр Dot Gain [Точечное увеличение]. Для соответствия в данном случае (когда произошло увеличение точек в размерах) требуется уменьшение точек, чтобы расширение стало равным одному миллиметру.

Количество чернил

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

Число 300 на самом деле является средним значением, неким универсалом. Большинство газет и журналов задают даже меньшие значения как предел, поэтому прежде чем отдавать в печать изображение уточните эти параметры.

Например, можно распределить цвета следующим образом (правильный способ): 90 C, 90M, 100Y и 0K, таким образом, получается сумма 280 (90+90+100+0). А вот такое распределение будет уже неправильным: 100C, 100M, 100Y и 100K, потому что в этом случае сумма будет равна 400. Главное реально понимать, что визуально соотношение 20C, 20M, 20Y и 20K выглядит, так же как и 0C, 0M, 0Y и 0K. О факторах влияющих на это было сказано выше.

Конвертирование в другой профиль

Перейдем к практической части. А именно, будем брать под контроль все, ну или почти все, факторы, которые могут негативно повлиять на печать изображения. Часто, создавая PSD-файл, содержащий несколько слоев, различные цветовые режимы и пр., невозможно отследить все изменения CMYK-режима.

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

Для этого существуют несколько способов. Один из них выполнение команды Image >Mode >CMYK [Изображение >Режим >CMYK]. Данный способ математически преобразовывает изображение, не обращая внимания на сопутствующие этой конвертации проблемы.

Другой путь — выполнение команды Image >Mode > Convert to Profile [Изображение >Режим >Конвертировать профиль], где вам нужно найти область определения [Destination Space] и выбрать из выпадающего меню Profile [Профиль] пункт Custom CMYK [Выборочный CMYK], после чего вам откроется диалоговое окно как на рисунке ниже.

Установите параметры как на рисунке, они являются оптимальными.

Вот таким довольно простым после тщательного рассмотрения способом достигается корректное конвертирование в CMYK-режим.

Источник: http://photonews.ru

В каком формате сохранять фото после фотошопа

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

Форматы для сохранения фото в Photoshop

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

размер;
поддержка прозрачности;
число цветов.

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

Подведем итог. Сохранение картинки в фотошопе выполняется двумя командами меню. Первая «Файл – Сохранить (Ctrl+S)».

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

Когда создается новое изображение на компьютере, команда будет работать как «Сохранить как» («Файл – Сохранить как… (Shift+Ctrl+S)»).

Эту команду считают главной, и при работе с ней нужно знать множество нюансов. После ее выбора пользователь должен указать Фотошопу, каким образом он хочет сохранить фотографию. Необходимо назвать файл, определить его формат и показать место, куда он будет сохранен. Все указания выполняются в появившемся диалоговом окне:

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

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

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

Базовый («стандартный») – при этом картинки или фото на мониторе отображаются построчно. Так отображаются файлы JPG.
Базовый оптимизированный – изображение с оптимизированной кодировкой Huffman.
Прогрессивный – формат, обеспечивающий показ, во время которого улучшается качество загружаемых изображений.

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

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

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

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

Форматы для сохранения фото

PSD и TIFF

Оба эти формата позволяют сохранять документы (работы) со структурой, созданной пользователем. Сохраняются все слои, их порядок, стили и эффекты. Имеются незначительные отличия по размеру — PSD весит меньше.

JPEG

Наиболее распространенный формат для сохранения фотографий. Подходит как для печати, так и для публикации на странице сайта. Основным недостатком данного формата является утрата некоторого количества информации (пикселей) при открытии и проведении манипуляций с фото.

PNG

Имеет смысл применять, если на изображении есть прозрачные участки.

GIF

Не рекомендуется для сохранения фото, так как имеет ограничение по количеству цветов и оттенков на итоговом изображении.

RAW

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

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

Остальные форматы не совсем подходят для сохранения фотографий.

Отблагодарите автора, поделитесь статьей в социальных сетях.

Обычное сохранение

Для сохранения вашего документа или точнее сказать картинки, вам нужно снова идти в верхнее меню и нажать там куда? Правильно, надо нажать на «Файл» . А в открывшемся меню выбрать «Сохранить как» . Есть несколько основных форматов, в которые рекомендуется сохранять. Подробнее мы их рассматривали здесь. Вкратце скажу вам в какие форматы для каких целей лучше сохранять изображения.

В каких форматах лучше всего сохранять картинку

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

Если ваш проект еще не закончен, то сохраняйте в формате PSD. Сохранится весь ваш прогресс, прозрачность, все слои и так далее. Да и кстати, если проект не просто какая-то однодневка, а что-то более масштабное, то лучше всегда держать копию в PSD. Я всегда держу шаблоны картинки, которые вставляю в анонс к статье, так как тема одна и та же. Просто меняется картинка внутри и заголовок.
Если вы закончили ваш проект и хотите сохранить ваш конечный результат (например обработали фотографию или сделали коллаж), то сохраняйте в JPG (JPEG). Самое оптимальное для фото. В подавляющем большинстве случаев сохранять будем именно в нём.
Если вы делали анимацию (например анимированные баннеры), то вам подойдет только GIF, так как только он может состоять одновременно из нескольких изображений. Но несмотря на огромный плюс, данное расширение имеет и жирный минус. Дело в том, что оно не способно сохранять картинки с количеством цветов более 256. А это, как вы уже наверное догадались, очень мало, с учетом того, что обычная JPG фотография способна содержать в себе более 16 миллионов цветов. Чуете разницу? Но для малоцветных анимированных баннеров — это будет то, что надо.
Если у вас изображение подразумевает прозрачный фон, т.е. на картинке только определенный объект без белого фона (или), то тогда ваш формат PNG. Дело в том, что если вы сохраните любую картинку с прозрачным фоном в фотошопе с расширением JPG, то он просто зальется белым цветом. И при последующей вставке картинки в редактор, никакой прозрачности больше не будет.
Если вы хотите сохранить картинку в фотошопе без потери качества, то лучше всего делать это в формате TIFF. Именно здесь сохраняется вся цветовая палитра и пиксели. Данный формат используют для полиграфии при распечатке растровых изображений как раз так из-за того, что качество не хромает. Единственным минусом становится то, что он занимает неприлично много места на жестком диске.
Ну и конечно, нельзя было не упомянуть, что фотошоп способен создавать графику в формате PDF, что позволит открывать его не как изображение ,а как документ.

Конечно, тут вы можете увидеть много других расширений, но поверьте мне, они не стоят вашего внимания.

Сохранение для Web

Выбираем знакомое нам меню «Файл» в самом верху, а потом нажимаем на «Сохранить для Web» .
Во вновь открывшемся окне выбираем формат по принципу, описанному выше. Для примера возьму самый распространенный JPEG.
И качество ставьте порядка 60. Больше просто ни к чему для интернета.

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

Разновидности форматов

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

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

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

PNG реализован в 8 и 24-битном вариантах. Первый тип не очень хорош для сохранения качественных фотографий из-за ограничения цветов. А 24-битный PNG имеет преимущество перед JPG – это сохранение степени прозрачности. Эти форматы можно открывать в любом средстве для просмотра изображений. Формат PSD подходит только для работы в Adobe Photoshop.

RAW – это «сырой» формат снимка, сохраненный на фотоаппарате. Такой файл загружается в Фотошоп для дальнейшей детальной корректировки цвета, резкости, насыщенности, баланса белого и так далее. Имеет наилучшее качество и возможность тонкой настройки фото, но не подходит в качестве финального формата изображения. Чаще всего после редактирования RAW конвертируется в JPEG с помощью Adobe Camera Raw.

Как сохранять фото?

Теперь рассмотрим стандартную процедуру сохранения фото в Adobe Photoshop. После того, как вы завершили редактирование изображения, сделайте следующее:

Откройте меню «Файл» и выберите пункт «Сохранить как».

Теперь выберите место для сохранения на жестком диске. Укажите название файла и выберите формат из списка. Затем кликните на кнопку «Сохранить».

После этого откроется дополнительное окно с параметрами. Его содержимое зависит от выбранного формата. Если вы решили сохранить фото в JPEG, то появятся настройки со скриншота. Можно выбрать прогрессивный тип формата и наилучшее качество.

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

Снова откройте «Файл» и зайдите в «Экспортировать». Здесь выберите пункт «Сохранить для Web».

Перед вами появится окно предпросмотра с панелью инструментов в правой части. Данное средство позволяет выбирать между несколькими форматами: JPEG, GIF, PNG-8, PNG-24 и WBMP.

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

Видеоинструкция

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

Заключение

Чаще всего, отредактированные и законченные работы сохраняются в стандартном формате JPEG. Он отлично подходит для печати, использования в интернете. Однако он несколько теряет в качестве при повторном редактировании, загрузке на сайты и так далее. Но при правильной настройке средствами Photoshop вы добьетесь качественного результата. PSD подойдет в том случае, если вам важно сохранить структуру проекта, PNG – для изображений с прозрачными элементами. Хуже всего в отношении качества проявляет себя GIF.

Дополнительно мы рассмотрели процедуру сохранения в графическом редакторе. Надеемся, что у вас получится выполнить эту операцию с первого раза! Если возникнут трудности, то не стесняйтесь задавать вопросы в комментариях к статье.

Подготовка фотографии для Интернета

25 декабря 2019 в 17:01 — последнее обновление

Урок №2

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

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

Итак, сначала определяемся, какой размер будет у нашей фотографии.

Смотрим исходный размер. То есть, в меню Изображение, выбираете пункт Размер изображения.

Открывается окно Размер изображения

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

Вводим вместо 2048 (у вас скорее всего там другие цифры) 1024 в окошко «ширина», при этом в окошке «Высота» автоматически появится цифра 768 (потому, что перед фразой Сохранить пропорции стоит галочка)

Нажимаем кнопку «ОК» — теперь у Вашей фотографии нужный размер!
Кстати, если вы на первом уроке кадрировали снимок до нужного размера, то этот абзац можете пропустить.

Примечание: Если исходный размер снимка меньше, чем 1024х768, то увеличивать его не стоит. Он, конечно, растянется до требуемого размера, но качество изображения ухудшится. Поэтому, если фотография и не закрывает весь экран — то пусть радует глаз красотой а не размерами. Ведь еще Ленин говорил по этому поводу: «Лучше меньше — да лучше!»

С размерами определились, переходим непосредственно к сохранению.

Сохранение фотографии для Интернета

В меню Файл, выбираете пункт Сохранить для Web.

Открывается диалоговое окно Save For Web

Как видите, появляется 2 снимка для сравнения качества изображения: оригинал и тот снимок, который получится при устанавливаемых Вами параметрах.

Вы спросите: какие параметры устанавливать?

Во-первых, в окошке 2 выберите формат GIF или JPEG.

Формат GIF поддерживает не больше 256 цветов и подойдет только для сохранения рисунков и чертежей (рисунки 6-8 на этой странице сохранены в формате GIF с поддержкой 64 цветов, поэтому весят по 7-11 кб — мелочь, а приятно!)

Конечно, красивую фотографию в этом формате не сохранишь, поэтому выбираем формат JPEG.

В окошке 3 выбираем качество фотографии: низкое, среднее, высокое, максимальное. Вы скажете: конечно максимальное?

Да, если бы речь шла о сохранении на винчестер, то так бы оно и было. Но Вы же собираетесь эти фотографии размещать в Интернете для скачивания почитателями Вашего таланта! А кто любит долго ждать открытия страницы? Вот именно, никто!

Представленная фотография сохранена при среднем качестве и «весит» 36 кб. При высоком качестве она бы весила около 100 кб, а при максимальном — 200! Вообщем, я особой разницы между средним и высоким качеством не вижу, зато вижу большую разницу в объеме получаемого файла.

А вы можете поэкспериментировать. Меняя значения, вы будете видеть, как у вас на глазах меняется качество правого снимка. Кроме того, под правым снимком увидите, как меняется размер К (в килобайтах) снимка, в зависимости от качества.

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

Если шибко грамотный фотошоп при этом выдаст вам предупреждение, что «некоторые имена файлов несовместимы с некоторыми веб-браузерами», скажите, что и без него все знаете и нажмите ОК .

Всё, снимок готов!

Внимание! Пока Вы полностью не закончите работу над фотографией, сохраняйте ее в «родном» фотошоповском формате PSD. Потому что многократное повторное сжатие в форматах GIF и JPEG приводит к безвозвратной потере качества.

Перейти к другим урокам по фотошопу:

Кадрирование фотографии.
Тоновая коррекция изображения
Маскировка некоторых дефектов на фото с помощью Заплатки
Удаление «эффекта красных глаз» с помощью Photoshop
Подготовка фотографии к печати

импорт и экспорт фотографий / Фотообработка в Photoshop / Уроки фотографии

Итак, вы делаете первые шаги в Adobe Lightroom. Кадры импортированы, настройки внесены. И на этом этапе появляется вопрос: как сохранить фотографии? Логика работы в других (например, офисных) программах и Adobe Photoshop подсказывает, что где-то в меню должен быть пункт для сохранения, заветная иконка с дискетой. Но в Adobe Lightroom другая механика работы с файлами. О ней и о том, как вывести готовые фото из Adobe Lightroom, пойдёт речь в этом уроке.

Особенности работы с форматом RAW и принципы недеструктивной обработки

Adobe Lightroom относится к классу RAW-конвертеров. В них можно открывать и редактировать изображения в привычном формате JPEG (TIFF, PSD), но предназначены они для работы с RAW-файлами. В камерах разных брендов такие файлы могут называться, например, NEF, CR2, ARW, RAF.

В чём особенность RAW? RAW с английского переводится как «сырой», «исходный». То есть перед нами ещё не изображение, а цифровые данные, полученные с матрицы камеры и записанные в файл. Теперь, чтобы из этой информации сделать фотографию, RAW надо сконвертировать. Этим и занимаются RAW-конвертеры. Давайте разберём, чем принципиально отличается работа с таким форматом.

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

Почему перед началом работы с файлами их импортируют, а для получения конечного файла — экспортируют?

Перед стартом файлы нужно импортировать, то есть добавить в виртуальный каталог Adobe Lightroom. В нём содержатся записи о снимках, хранящихся на жёстком диске. С помощью каталога программа может «запомнить», какие настройки были применены к тому или иному файлу. Каталог позволяет сортировать файлы, добавлять их в виртуальные коллекции, присваивать метки — цветовые, рейтинги, флажки. Таким образом проще отобрать из большой фотосессии лучшие кадры или выбрать из разных папок снимки для портфолио.

А чтобы получить готовое изображение с внесёнными настройками, фото нужно экспортировать из этого каталога посредством функции Export.

Возможности пакетной обработки и конвертирования

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

Окно Export и его настройки

Если кликнуть правой кнопкой мыши на снимок или его превью, в контекстном меню появится пункт Export. Давайте запустим окно настройки экспорта.

Пройдём по списку предложенных пунктов.

Export Location. Здесь мы выбираем, куда будут экспортироваться файлы. Часто фотограф начинает хаотично создавать папки с фото, из-за чего велик риск потерять данные. Важно навести порядок и делать резервные копии фотоархива.

Лучший вариант — хранить фото на отдельном жёстком диске. Например, в ноутбуки линейки ConceptD от Acer можно установить два накопителя. На одном из них — операционная система, на другом — рабочие данные. Так мы точно не потеряем файлы при сбое ОС, да и работать система будет быстрее.

В нашем ConceptD 3 установлен SSD-диск под систему объёмом 512 ГБ и HDD для пользовательских данных объёмом 1 ТБ. Хорошие показатели для ноутбука, к тому же у нас сравнительно простая комплектация, в более продвинутых устройствах могут стоять ещё более объёмные накопители. А в версиях ConceptD 5, ConceptD 7 и ConceptD 9 используются два твердотельных накопителя — так система работает ещё быстрее.

Отдельного внимания заслуживает пункт Choose Folder Later («Выбрать папку позже»). Это очень удобная настройка, если вы хотите создать пресет для экспорта.

File Naming. Здесь задаются параметры автоматического переименования снимков при экспорте. Обычно название файла с фотографией содержит несколько букв (например, DSC) и номер. Рекомендую не трогать номер, чтобы упростить поиск.

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

Набор формул для переименования, доступный по умолчанию

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

Эта функция пригодится фотографам, работающим в компаниях, которые ведут свои фотоархивы и где есть требования к наименованию файлов.

File Settings. Один из самых важных пунктов при настройке экспорта! Здесь выбирается формат, в который будет конвертироваться снимок. Среди доступных вариантов: PSD, TIFF, PNG, DNG — это специфические форматы, которые нужны для дальнейшей работы с файлами, например, в Adobe Photoshop, полиграфии, дизайнерских задачах. Есть пункт Original: программа просто сохранит RAW-файл в новое место, указанное в Export Location. Однако чаще всего фотограф экспортирует уже готовый к публикации кадр. В этом случае необходим формат JPEG. Именно такое изображение легко отправить по почте, опубликовать в социальных сетях и напечатать на домашнем фотопринтере.

Форматы, в которых можно экспортировать снимки из Adobe Lightroom

Кадр в формате JPEG имеет сравнительно малый объём, открывается на любом устройстве. Как правильно сохранять JPEG? Прежде всего, проверим, установлено ли цветовое пространство (Color Space) sRGB, ведь именно в нём отображается графика в интернете. После выбора формата JPEG необходимо настроить параметр Quality. Чем он ниже, тем меньше файл, но тем заметнее артефакты сжатия. Я использую Quality не ниже 90%, но для любительских фото и социальных сетей можно и 70%.

Другие цветовые пространства предназначены для специфических задач (например, для полиграфии). Кроме того, цветовое пространство Adobe RGB можно выбрать, если вы экспортируете файл для дальнейшей обработки в других графических программах, но тут нужно быть уверенным в своих действиях. Если не уверены, выбирайте sRGB как универсальный вариант.

В зелёной рамке пункт выбора цветового пространства, в красной — регулятор Quality, в синей — Limit File Size To.

Ещё один полезный параметр — Limit File Size To. Он пригодится, если вы готовите изображения для загрузки на сайт с лимитом на максимальный объём файлов. Так, некоторые сайты до сих пор не позволяют загрузить картинки тяжелее 500 Кбайт, некоторые фотостоки ограничивают максимальный объём файлов 30 МБ. Здесь задаётся желаемый размер: программа сама подберёт степень сжатия, чтобы «уложить» информацию.

Image Sizing. Этот пункт окна Export отвечает за ресайз, изменение размеров изображения. Для публикации в социальных сетях лучше использовать маленькие картинки разрешением порядка 1600 пикселей по длинной стороне, а вот при подготовке изображений для печати — в полном размере. Чтобы активировать функцию, необходимо поставить галочку напротив пункта Resize To Fit, иначе изображение будет сохраняться в исходном размере. Здесь предлагается выбор, как будут меняться размеры. Самый востребованный пункт — изменение размеров по длинной стороне (Long Edge).

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

Если вы экспортируете изображения, скажем, на фотостоки, пригодится пункт Megapixels. Здесь картинка будет уменьшаться до определённого количества мегапикселей. К примеру, есть стоки, которые не принимают картинки больше 99 Мп, однако некоторые мои панорамные кадры имеют разрешение 100–150 Мп. Поэтому я ставлю настройку, уменьшающую изображения до 99 Мп. Но поскольку далеко не все мои снимки имеют такое разрешение, а растягивать на 99 Мп картинки меньшего размера смысла нет, выставляю галочку в пункте Don’t Enlarge. Это запретит программе увеличивать изображения, имеющие меньший размер.

После настройки пунктов File Settings и Image Sizing мы уже готовы к экспорту фотографий. Далее идут настройки второстепенной важности, о них кратко.

Output Sharpening. Это повышение контурной резкости при экспорте фотографий. Часто рекомендуется дополнительно «шарпить» изображение при уменьшении его размеров. Если вы собираетесь экспортировать уменьшенные изображения, скажем, для публикации в интернете, можно включить Output Sharpening и выбрать параметр Screen.

Минус этого инструмента в отсутствии гибких настроек: варианты из трёх основных пресетов и их степень воздействия из трёх пунктов. При этом отсутствует функция превью: мы не увидим, как шарпенинг скажется на фотографиях, пока их не экспортируем. Функция подойдёт для быстрого экспорта большого количества фотографий. Но если нужно подготовить к публикации какое-то важное изображение, лучше делать это с помощью Adobe Photoshop, где больше возможностей для того же шарпенинга, однако работа в нём займёт больше времени.

Metadata. В этом пункте мы можем выбрать, какие метаданные оставить в файле с фотографией, а какие обрезать. Так, некоторые фотографы не любят, когда на опубликованных ими снимках можно увидеть параметры съёмки. В таком случае нужно выбрать пункт Copyright Only: обрезается вся EXIF-информация, кроме поля Copyright, которое можно заполнить в фотокамере или Adobe Lightroom.

Watermarking. Удобный инструмент для добавления водяных знаков. Надо ли ставить копирайты на собственные фотографии? Вопрос дискуссионный, ведь если кто-то захочет украсть ваш кадр, он найдёт способ скрыть любую отметку. А если кому-то понравится ваш снимок и он захочет с вами связаться, можно задействовать поиск по картинкам.

Для копирайта доступен выбор шрифта, размера и положения на фото. Можно пойти дальше и загрузить PNG-файл с прозрачным слоем, например, с рукописным копирайтом. Тогда получится быстро и просто расставить копирайты на все ваши снимки. Раньше для автоматической расстановки копирайтов требовались отдельные приложения, теперь же всё доступно в Adobe Lightroom.

Post-Processing. Последний пункт окна Export. Здесь определяем, что произойдёт с фотографиями после экспорта. Как правило, по умолчанию стоит пункт Do Nothing. Однако мы можем настроить это поле так, чтобы фото после экспорта открывались, например, в Adobe Photoshop.

Создание пресетов для экспорта

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

В левой части окна Export есть панель с пресетами, в категории Lightroom Presets содержится несколько пресетов, доступных по умолчанию.

Но фотографу лучше создать пресеты под свои задачи. Пользовательские пресеты отображаются в категории User Presets. Важный момент: пресет создаётся из уже созданных настроек, поэтому сначала лучше настроить все параметры, описанные выше, а потом нажать кнопку Add. Откроется окно, где пресету можно задать название и даже выбрать для него папку.

Сделаем пресет, с помощью которого будем готовить фотографии к публикации в интернете.

В поле Export Folder можно задать конкретную папку, где у нас хранятся фото, готовые к публикации.
Переименование файлов не используем.
В пункте File Settings выберем формат JPEG и Quality 95% (при таком качестве удастся свести на нет артефакты сжатия). Можно задать и максимальный объём файла, но у меня он и так сравнительно компактный при правильной настройке разрешения снимка в пункте File Sizing.
В File Sizing зададим ресайз по длинной стороне (Long Edge) и определим её длину (1600 пикселей).

Всё готово! Теперь самое время сохранить настройки. Нажмём кнопку Add и дадим пресету название.

Создание нового пресета

Если в будущем понадобится изменить настройки в пресете, выделите его, внесите правки и, щёлкнув правой кнопкой мыши по названию пресета, выберите пункт Update with Current Settings.

Обновление уже созданного пресета на текущие настройки

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

Теперь закроем окно Export, нажав Cancel.

После выделения файлов и нажатия на правую кнопку мыши в пункте контекстного меню Export появится наш пресет. Файлы можно экспортировать с нужными настройками в два клика.

При пакетном экспорте большого числа фотографий очевидны плюсы быстрого компьютера. Раньше такой процесс мог занимать часы, а ConсeptD 3 справляется за считанные минуты. Этому способствует шестиядерный процессор Intel Core i7-9750H с тактовой частотой 2,6 ГГц, мощная графическая видеокарта NVIDIA GTX 1650 (4 ГБ) и оперативная память DDR4 достаточного объёма (16 ГБ).

Мы начали описывать возможности Adobe Lightroom с экспорта, так как этот пример даёт хорошее представление о базовых особенностях работы с программой и RAW-файлами. До встречи на новых уроках по обработке изображений!

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

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

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

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

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

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

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

Загрузите это руководство в формате PDF для печати!

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

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

.
Перейдите в Изображение> Дублировать.
Photoshop откроет диалоговое окно «Дублирование изображения» с просьбой указать имя копии. Вы можете просто принять имя по умолчанию, которое Photoshop уже ввел (в моем случае это «blue_dress copy»), потому что мы можем легко переименовать изображение, когда мы пойдем, чтобы сохранить его позже.Нажмите OK в правом верхнем углу диалогового окна, чтобы принять имя по умолчанию и закрыть его:
Щелкните OK, чтобы принять имя по умолчанию.
Photoshop откроет идентичную копию изображения, включая все слои, добавленные вами в исходную версию, в отдельном окне документа:
Копия исходного документа появится в новом окне.
Шаг 2. Сгладьте изображение
Затем давайте сгладим копию нашего изображения до одного слоя, что может помочь дать нам лучшие результаты при изменении его размера, как мы это сделаем сейчас.Поднимитесь в меню Layer вверху экрана и выберите Flatten Image :
.
Перейдите в Layer> Flatten Image.
Если мы снова посмотрим на мою панель «Слои», то увидим, что все мои слои теперь сведены в один фоновый слой:
Панель «Слои», отображающая сведенное изображение.
Шаг 3. Измените размер изображения
Теперь, когда наше изображение выровнено, давайте изменим его размер до более подходящего для отправки по электронной почте или для отображения на веб-сайте.Поднимитесь в меню Image вверху экрана и выберите Image Size :
Выберите Изображение> Размер изображения.
Откроется диалоговое окно «Размер изображения». Как мы вскоре увидим, диалоговое окно Photoshop «Сохранить для Интернета и устройств» также дает нам возможность изменить размер изображения, но вы получите лучшие результаты, если измените размер изображения заранее с помощью команды «Размер изображения».
Если мы посмотрим на верхнюю часть диалогового окна, в разделе Pixel Dimensions , мы увидим, что моя фотография в настоящее время имеет ширину 1571 пикселей и высоту 2356 пикселей.Это слишком велико для большинства людей, чтобы уместить все изображение на экране, если я отправлю им фотографию по электронной почте, и, безусловно, слишком велик для отображения на большинстве веб-сайтов:
Текущая ширина и высота изображения в пикселях.
Вообще говоря, для электронной почты и просмотра в Интернете вы хотите ограничить размеры вашей фотографии до не более 800 пикселей на 600 пикселей, что означает, что ширина не должна превышать 800 пикселей, а высота не должна превышать 600 пикселей. Если вы загружаете фотографию на веб-сайт, веб-сайт может иметь другие, определенные размеры, которые вам необходимо придерживаться, но, как правило, сохранение размера в пределах 800 пикселей на 600 пикселей позволяет большинству людей удобно просматривать изображение на своем экране.
Прежде чем вводить новые размеры в пикселях, сначала убедитесь, что все три параметра в нижней части диалогового окна — Scale Styles , Constrain Proportions и Resample Image — все отмечены . Технически, когда изображение сглажено, нам не нужно беспокоиться о первом варианте, «Стили масштабирования», потому что у нас нет стилей слоя, примененных к изображению, но проще просто убедиться, что отмечены все три параметра. Затем установите для параметра Image Interpolation в самом низу диалогового окна значение Bicubic Sharper (лучше всего для уменьшения). Он нигде не говорит «Интерполяция изображения», но это то, что представляет собой этот нижний параметр, и он контролирует, как Photoshop обрабатывает пиксели во время процесса передискретизации. Установка его на Bicubic Sharper даст нам наилучшие результаты при уменьшении размера изображения для просмотра на экране:
Убедитесь, что отмечены первые три параметра, а для нижнего параметра установлено значение «Бикубическая резкость».
Затем вернитесь в раздел «Пиксельные размеры» в верхней части диалогового окна и введите новые размеры.Поскольку моя фотография находится в портретном режиме, то есть она выше, чем ширина, и я не хочу, чтобы высота превышала 600 пикселей, я введу 600 пиксель в опцию Высота . Когда в нижней части диалогового окна выбрана опция «Сохранить пропорции», Photoshop автоматически вводит новое значение ширины, чтобы сохранить соотношение ширины и высоты изображения таким же, как было изначально. В моем случае Photoshop ввел 400 пикселей для ширины :
Если выбрано «Сохранить пропорции», все, что нам нужно ввести, это новую ширину или высоту, а Photoshop введет другое значение за нас.
Обратите внимание, что я не внес никаких изменений в значение Разрешение в разделе Размер документа диалогового окна. Это связано с тем, что разрешение определяет размер изображения, которое будет напечатано на бумаге, и не имеет ничего общего с просмотром изображения на экране компьютера. Все, на чем нам нужно сосредоточиться при изменении размера изображения для отображения на экране, — это фактические размеры изображения в пикселях, которые можно найти в разделе Pixel Dimensions с соответствующим названием в верхней части диалогового окна.
После того, как вы ввели новые размеры, нажмите «ОК» в правом верхнем углу диалогового окна, чтобы закрыть его, после чего Photoshop снизит разрешение изображения до нового меньшего размера.
Шаг 4. Сохранить для Интернета
Мы продублировали, сгладили и изменили размер нашего изображения. Пришло время его оптимизировать и сохранить. Поднимитесь в меню File вверху экрана и выберите Save For Web & Devices :
Выберите «Файл»> «Сохранить для Интернета и устройств».
Это открывает очень большое диалоговое окно Photoshop «Сохранить для Интернета и устройств» с большой областью предварительного просмотра , занимающей большую часть места. Если вы посмотрите чуть выше верхнего левого угла области предварительного просмотра, вы увидите серию из четырех вкладок.По умолчанию выбрана вкладка Optimized , что означает, что вы не видите исходное изображение. Вместо этого вы видите предварительный просмотр изображения в реальном времени с примененными текущими настройками оптимизации (которые мы рассмотрим чуть позже):
Область предварительного просмотра по умолчанию настроена на режим оптимизированного просмотра.
Вы можете оставить режим просмотра оптимизированным или, чтобы просмотреть параллельное сравнение исходной и оптимизированной версий изображения, переключиться в режим просмотра 2-Up , щелкнув вкладку:
Переход в режим просмотра «2 изображения».
Если выбрано 2 варианта изображения, теперь мы можем видеть исходную версию изображения слева и оптимизированную версию справа (если ваше изображение находится в альбомном режиме, то есть оно шире, чем высота, вы увидите вертикальную превью с исходной версией вверху и оптимизированной версией под ней):
Исходная версия слева, оптимизированная версия справа.
Формат файла
В правой части диалогового окна находятся различные параметры оптимизации (если вы не видите ни одного из перечисленных параметров, убедитесь, что в области предварительного просмотра выбрана оптимизированная версия изображения).Первое, что нам нужно сделать здесь, это выбрать правильный формат файла для нашего изображения. Если вы впервые используете диалоговое окно «Сохранить для Интернета и устройств», вы увидите формат файла GIF , выбранный вверху (непосредственно под словом «Preset»). GIF — отличный формат для сохранения веб-графики, но для фотографий мы хотим использовать формат JPEG , поэтому измените параметр с GIF на JPEG, если он еще не установлен на JPEG:
Установите формат файла JPEG.
Качество изображения
Непосредственно под параметром формата файла находятся параметры качества изображения . Мы можем выбрать один из предустановленных параметров качества (Низкое, Среднее, Высокое, Очень высокое и Максимальное) слева или ввести конкретное значение в опцию Качество справа. Хотя может возникнуть соблазн выбрать самые высокие настройки качества для наших фотографий, чтобы каждый мог увидеть, насколько они действительно классные, оптимизация их для электронной почты или Интернета означает, что нам нужно сохранять размер файла как можно меньше, а это означает поиск середины разница между качеством изображения и размером файла.Предустановка качества High почти всегда является лучшим выбором, она дает нам лучшее из обоих миров — приемлемое качество изображения и относительно небольшие размеры файлов. При выборе предустановки «Высокое» для параметра «Качество» автоматически устанавливается значение 60 :
.
Выберите набор настроек «Высокое качество», в котором для параметра «Качество» установлено значение 60.
После того, как вы выбрали настройку качества, убедитесь, что выбран параметр Optimized , который может помочь немного уменьшить размер файла.Не устанавливайте флажок Progressive и не ставьте галочку рядом с Embed Color Profile , поскольку большинство веб-браузеров все равно не поддерживают цветовые профили:
Выберите «Оптимизированный» и оставьте флажки «Прогрессивная» и «Встраивать цветовой профиль» снятыми.
Цветовое пространство
Наконец, выберите опцию Convert to sRGB , если она еще не отмечена. Это обеспечит сохранение фотографии в цветовом пространстве sRGB, что, короче говоря, означает, что цвета на вашей фотографии будут правильно отображаться в Интернете или когда кто-то просматривает изображение в электронном письме:
Параметр «Преобразовать в sRGB» предотвращает тусклость и тусклость цветов ваших фотографий на экранах компьютеров других людей.
Размер изображения
Я упоминал ранее, когда мы рассматривали, как изменить размер фотографии с помощью команды «Размер изображения», которую диалоговое окно «Сохранить для Интернета и устройств» также дает нам возможность изменить размер изображения. Вы найдете параметры размера изображения в правом нижнем углу диалогового окна. В моем случае здесь диалоговое окно показывает, что моя фотография имеет ширину 400 пикселей и высоту 600 пикселей, так как я изменил ее размер ранее. Хотя может показаться удобным иметь возможность изменять размер изображения, пока вы настраиваете все другие параметры веб-оптимизации, вы получите лучшие результаты изменения размера, если проигнорируете эти параметры здесь и будете придерживаться фактической команды размера изображения:
Параметры размера изображения в правом нижнем углу диалогового окна.
Сравнение размеров файлов
На этом этапе мы сделали все, что нам нужно сделать, но прежде, чем мы закроем диалоговое окно «Сохранить для Интернета и устройств» и фактически сохраним изображение, давайте быстро взглянем на две версии ниже. фотографии в области предварительного просмотра, чтобы сравнить размер файла исходной версии с размером оптимизированной версии. В моем случае исходное фото (слева) было колоссальным размером 703 Кб , слишком большим для Интернета, особенно для людей с более медленной скоростью интернета, в то время как оптимизированная версия (справа), которая выглядит почти так же хорошо как оригинал, только 58.41 Кб :
Режим просмотра «2 варианта» позволяет сравнивать размеры файлов исходной и оптимизированной версий изображения.
Шаг 5. Сохраните изображение
Чтобы сохранить оптимизированную версию фотографии, нажмите кнопку Сохранить в нижней части диалогового окна. Photoshop откроет диалоговое окно «Сохранить оптимизировано как », в котором можно переименовать изображение, если это необходимо, а также перейти в каталог на жестком диске, в который вы хотите его сохранить. Я собираюсь переименовать свое фото в синее платье.jpg «, и я сохраню его в папке» web photos «на моем рабочем столе. Когда все будет готово, нажмите Сохранить , чтобы сохранить изображение и закрыть диалоговое окно:
Диалоговое окно «Сохранить оптимизированное как».
И вот оно! Теперь размер фотографии изменен, и она полностью оптимизирована, и ее можно отправить по электронной почте друзьям и членам семьи или загрузить в Интернет благодаря командам «Размер изображения» и «Сохранить для Интернета и устройств» в Photoshop CS5!
Эффективное сохранение и экспорт файлов Photoshop
Сохранить, экспортировать, создать… Photoshop предоставляет множество способов сохранения файлов.Как вы выполняете свою работу наиболее эффективно и результативно?
Параметры для сохранения и экспорта файлов в Photoshop представляют собой почти три десятилетия изменения требований, поэтому существует некоторое дублирование, которое может сбивать с толку. Давайте разберемся с вариантами, исходя из требований вашей работы.
Нужно ли сохранять слои?
Если вам необходимо сохранить слои Photoshop в доставляемом файле, выберите «Файл»> «Сохранить как», а затем выберите «Photoshop» во всплывающем меню «Формат».Сохранение слоев позволяет редактировать компоненты документа Photoshop, такие как корректирующий слой, символы в текстовом слое или эффекты, примененные к слою. Это также важно для приложений, которые могут манипулировать слоями Photoshop. Например, вы можете использовать Adobe InDesign для управления тем, какие слои документа Photoshop будут видны в макете страницы, и вы можете использовать Adobe After Effects для независимой анимации слоев Photoshop в композиции видео.
Параметры формата в диалоговом окне «Сохранить как» в Photoshop
Несмотря на то, что форматы TIFF и Photoshop PDF также могут сохранять слои и функции Photoshop, приложениям, которые могут управлять слоями Photoshop, обычно может потребоваться документ в формате Photoshop.
Больше после прыжка! Продолжайте читать ниже ↓
Члены бесплатной и премиальной версии видят меньше рекламы! Зарегистрируйтесь и войдите в систему сегодня.
Пойдет ли документ в печать?
Если вы готовите документ Photoshop к печати, вы, вероятно, найдете нужный формат в диалоговом окне «Сохранить как». Во всплывающем меню «Формат» в диалоговом окне «Сохранить как» представлены форматы файлов Photoshop и TIFF, обычно используемые для допечатной подготовки, а также менее распространенные форматы файлов Photoshop EPS и Photoshop DCS.
Формат Photoshop PDF в диалоговом окне «Сохранить как» предоставляет предустановки PDF / X, которые вы можете выбрать, если вам нужно привести документ Photoshop в соответствие со стандартом PDF / X.
Это документ для веб-страницы или мобильного устройства?
Многие пользователи изучают только один или два из множества способов получить веб-графику и мобильную графику из Photoshop. Знание полного набора опций может помочь вам решить больше задач с веб-графикой.
Сравнение экспорта как и сохранения для Интернета (устаревшая версия)
Adobe рекомендует диалоговое окно «Экспортировать как» (выберите «Файл»> «Экспортировать как») в качестве первого варианта для большинства веб-графики.Вы можете использовать «Экспорт как» для создания копии документа Photoshop в формате PNG, JPEG, GIF или SVG.
«Экспортировать как» — это новый способ сохранения веб-графики из Photoshop.
Давние пользователи Photoshop могут быть более знакомы с диалоговым окном, которое теперь называется «Сохранить для Интернета (устаревшая версия)» (выберите «Файл»> «Экспорт»> «Сохранить для Интернета (устаревшая версия)»).
Сохранить для Интернета (устаревший) — это старый способ сохранения веб-графики, но он по-прежнему полезен.
«Экспорт как» и «Сохранить для Интернета» (устаревшая версия) имеют много общего.Экспорт как основан на новом коде, который может обрабатывать большие документы. Он может экспортировать несколько разрешений, если вам нужно предоставить веб-разработчику стандартные разрешения устройства и разрешения HiDPI / Retina (например, масштабные коэффициенты 1x, 2x и 3x). Но «Сохранить для Интернета» (устаревшая версия) дает вам больше контроля над сжатием, предварительным просмотром и метаданными. А «Сохранить для Интернета» (устаревшая версия) может экспортировать временную шкалу видео Photoshop в виде анимированного файла GIF.
Команда «Быстрый экспорт» (выберите слои и выберите «Файл»> «Экспорт»> «Быстрый экспорт») похожа на экспресс-версию команды «Экспортировать как», поскольку вам не нужно останавливаться на диалоговом окне каждый раз, когда вы ее используете.Вместо этого вы настраиваете быстрый экспорт, выбирая «Файл»> «Экспорт»> «Настройки экспорта». Когда вы выбираете «Быстрый экспорт», выполняется мгновенный экспорт с использованием установленных вами настроек. Быстрый экспорт удобен, если вы несколько раз экспортируете с использованием одних и тех же настроек.
Понимание двух видов экспорта как
«Экспортировать как» также доступен в меню «Слой» и отличается от «Экспортировать как» в меню «Файл». Ключ к различию в том, где доступна каждая команда:
Выберите «Файл»> «Экспорт»> «Экспортировать как», чтобы сохранить копию всего документа в виде одного файла.
Выберите «Слой»> «Экспортировать как», чтобы сохранить выбранные слои или группы слоев в виде отдельных файлов. Обычно веб-графику и мобильную графику создают с кнопками, изображениями и другими компонентами на отдельных слоях, поэтому веб-разработчики и мобильные разработчики могут запрашивать эти слои как отдельные файлы. Быстрый экспорт также доступен в меню «Слой» для экспорта выбранных слоев или групп слоев.
Команда «Слой»> «Экспортировать как» также доступна в меню панели «Слои».
Автоматизация экспорта в Интернет с помощью генератора
Если вы веб-разработчик или разработчик приложений или тесно сотрудничаете с ним, вы можете автоматизировать экспорт веб-графики из слоев Photoshop с помощью генератора.То, как вы называете группы слоев и слои, определяет, как эти слои экспортируются. Например, если вы назвали слой…
728 x 90 banner.jpg80%
… он будет экспортирован как файл 728 x 90 пикселей с именем banner.jpg в формате JPEG с уровнем качества 80%.
Генератор экономит время тем, что вам не нужно выбирать слои или экспортировать их вручную. Каждый раз, когда вы редактируете документ, автоматически экспортируются все слои и группы слоев, названные с использованием синтаксиса генератора. Таким образом, экспорт всегда актуален.
Генератор обладает мощным синтаксисом. Например, если вы назовете слой или группу слоев…
100 x 100 logo1.png, 200 x 200 logo2.png, 300 x 300 logo3.png
… Генератор экспортирует три файла разного размера.
Выделенная группа слоев названа так, что она будет экспортировать три файла с помощью генератора.
Если вы хотите использовать «Генератор», откройте диалоговое окно «Настройки Photoshop» и на панели «Плагины» убедитесь, что выбран параметр «Включить генератор». Затем выберите «Файл»> «Создать»> «Активы изображения» и убедитесь, что эта команда включена.Дополнительные сведения об использовании и синтаксисе см. В разделе справки Adobe «Создание ресурсов изображения из слоев».
Параметры GIF и JPEG, которые могут вам не понадобиться
Вы можете увидеть следующие команды Photoshop, которые звучат как способы экспорта веб-графики, но они устарели или используются сегодня в специализированных целях:
(Сохранить как) CompuServe GIF. Другой способ экспорта в формате GIF — это выбрать «Файл»> «Сохранить как» и выбрать CompuServe GIF во всплывающем меню «Формат». Но это более старый метод, который вам может никогда не понадобиться, если параметры в диалоговых окнах «Экспорт как» или «Сохранить для Интернета (устаревшие)» соответствуют вашим требованиям.
(Сохранить как) JPEG. Параметр формата JPEG в диалоговом окне «Сохранить как» может быть полезен, если вы хотите сохранить файл в формате JPEG, предназначенный только для печати или не загружаемый на веб-страницу. Параметр JPEG в диалоговом окне «Сохранить как» обычно создает файлы большего размера, чем параметр JPEG в диалоговых окнах «Экспорт как» или «Сохранить для Интернета (устаревшая версия)», поскольку версия «Сохранить как» включает больше метаданных, таких как разрешение (ppi).
Zoomify. Если вы делаете покупки в Интернете, вы видели похожие приемы: Zoomify позволяет вам увеличивать изображение внутри прямоугольника определенного размера, так что увеличение не распространяется на всю веб-страницу.Для этого требуется не просто изображение, но и сопроводительный HTML-код. Это нормально, если вы кодируете свою собственную веб-страницу. Однако Zoomify может оказаться непрактичным, если вы публикуете изображение в социальных сетях или в конструкторе веб-сайтов на основе шаблонов.
Вам нужен файл PDF?
Вы можете быть удивлены, узнав, сколькими способами можно преобразовать документ Photoshop в файл PDF. Для создания:
Одностраничный PDF-файл. Выберите «Файл»> «Сохранить как» и выберите Photoshop PDF.При нажатии кнопки «Сохранить» открывается диалоговое окно «Сохранить Adobe PDF». Вы можете выбрать один из тех же пресетов Adobe PDF, что и другие приложения Adobe.
При выборе формата Photoshop PDF открывается диалоговое окно «Сохранить Adobe PDF», которое также имеется в других приложениях Adobe.
Монтажные области в многостраничном PDF-файле. Выберите «Файл»> «Экспорт»> «Монтажные области в PDF», чтобы каждый мог просматривать созданные вами монтажные области, например дизайн веб-сайта.
Композиции слоев в многостраничном файле PDF. Выберите «Файл»> «Экспорт»> «Компоновка слоев в PDF», чтобы каждый мог просматривать варианты документа, созданные с помощью панели «Композиции слоев».
Слайд-шоу из нескольких изображений. Выберите «Файл»> «Автоматизировать»> «PDF-презентация», чтобы создать многостраничный PDF-файл из выбранных вами файлов. Затем вы можете выбрать «Многостраничный документ» или «Презентация» (самозапускающееся полноэкранное слайд-шоу при открытии в Acrobat).
Знание своего выбора для доставки файлов Photoshop может помочь вам избавиться от запутанных вариантов, легче уложиться в сроки и более эффективно удовлетворить требования ваших клиентов и поставщиков услуг.
Оптимизация изображений для Интернета: пошаговое практическое руководство
Говорят, что изображение стоит тысячи слов, и это одна из причин, по которой изображения так важны в электронной коммерции. Поскольку покупатели не могут взять, потрогать и осмотреть продукт, они в значительной степени полагаются на изображения, чтобы понять цвет, качество и историю продукта.
Само собой разумеется, что ваши изображения должны быть четкими и с высоким разрешением. Но за это приходится платить. Большие изображения высокой четкости могут иметь огромные размеры файлов.Поместите несколько из них на свой сайт, и эта мгновенная навигация по вашему интернет-магазину может больше походить на плавание через патоку. Это не только приведет к отказу посетителей, но со временем это заметит и Google, и это может повлиять на ваше SEO.
В электронной коммерции очень важно найти хороший баланс между качеством изображения и размером файла изображения при сохранении изображения для своего сайта. В этой статье мы покажем вам, как это сделать.
Если вам приходилось делать фото продукта и загружать его прямо в свой магазин, это руководство для вас.Если у вас нет формальных знаний или процесса для сохранения изображений с учетом размера файла, это руководство для вас. Если на вашем сайте много изображений, и работа кажется вялой, это руководство для вас. Если вы еще не начали создавать свой интернет-магазин, это руководство специально для вас.
Готовы оптимизировать изображения?
Параметры типа файла изображения
Есть три основных типа файлов, на которых мы хотим сосредоточиться для сохранения изображений, оптимизированных для Интернета: GIF, JPG и PNG.У каждого типа файла есть свои сильные и слабые стороны, и очень важно знать и учитывать их при сохранении изображения.
Работа с JPG
JPG (также известный как JPEG) — самый популярный тип файлов для изображений в Интернете. JPG идеально подходят для фотографий или сложных изображений, содержащих много цветов, теней, градиентов или сложных узоров. JPG хорошо справляется с изображениями такого типа, потому что JPG имеет огромную цветовую палитру, с которой можно работать.
JPG также могут быть сохранены в высоком качестве, низком качестве или где-то посередине.Это позволяет настраивать и сохранять изображение именно так, как вы хотите, балансируя качество и размер файла.
Пример использования для предпринимателей в области электронной коммерции: JPEG-файлы являются наиболее популярным форматом файлов в Интернете и обычно используются для изображений продуктов, фотографий и баннеров / изображений главной страницы.
Работа с PNG
PNG — еще один популярный формат файлов в Интернете. В Adobe Photoshop у вас будет возможность сохранять PNG как PNG-8 или PNG-24.
PNG-8 имеет очень ограниченную цветовую палитру из 256 цветов.Хотя размер изображения меньше, это не лучший вариант для сложных изображений и фотографий.
PNG-24 обеспечивает гораздо более высокое качество изображения, но за счет большего размера файла.
Самое главное, PNG могут обрабатывать прозрачность. Это одно из самых больших различий между PNG и JPEG.
Пример использования для предпринимателей в области электронной коммерции: PNG обычно используются для логотипов, потому что они высокого качества и могут обеспечивать прозрачность. Это хорошо работает для логотипов, потому что логотипы почти всегда требуют прозрачности, вы, вероятно, хотите, чтобы они были высокого качества, и поскольку логотипы являются небольшой частью вашего сайта в целом, поэтому размер файла по-прежнему невелик.
Работа с гифками GIF-файлы
были более популярны много лет назад, но все еще остаются вариантом для изображений небольшого размера, когда требуется всего несколько цветов. Как и в случае с PNG-8, файлы GIF могут содержать только 256 цветов. По этой причине нельзя использовать GIF-файлы для фотографий товаров.
Пример использования для предпринимателей в электронной коммерции: GIF-файлы можно использовать для логотипов, но из-за их ограниченного количества цветов они не так популярны в большинстве случаев использования в электронной коммерции.
Правильное сохранение изображений
Как и следовало ожидать, загрузка больших изображений занимает больше времени.Когда мы говорим «большой», мы имеем в виду размер файла, а не размеры изображения, то есть значение в КБ, МБ, ГБ и т. Д. Видя, что 47% пользователей ожидают, что веб-страница загрузится менее чем за 2 секунды, а 40 % откажется от страницы, загрузка которой занимает более 3 секунд. Важно, чтобы ваши изображения были достаточно маленькими, чтобы сайт работал быстро.
Чтобы правильно оптимизировать изображения для своего интернет-магазина, вы можете сделать три вещи:
Сохраните правильные размеры
Вы должны открыть изображение в Photoshop и просмотреть его на 100%.Это позволяет просматривать изображение с точным размером, который будет отображаться на мониторе компьютера при сохранении изображения для Интернета.
Сохранить изображения для Интернета
Можно уменьшить размер файла без значительного снижения качества изображений. Наш любимый метод уменьшения размера файла без значительного снижения качества изображения — это использование функции Photoshop «Сохранить для Интернета». Откройте изображение в Photoshop и выберите «Файл»> «Экспорт»> «Сохранить для Интернета (устаревшая версия)…».Появится окно, в котором вы сможете выбрать качество экспорта. Мы обнаружили, что качество 60 работает лучше всего, потому что при этом размер файла уменьшается до менее мегабайта, и нет заметной разницы в качестве.
Сжать изображения для Интернета

Приложения для сжатия изображений — это самый простой способ уменьшить размер файлов изображений. Эти типы инструментов удаляют скрытые данные в файле изображения, такие как дополнительные цветовые профили и метаданные (например, геолокацию того места, где была сделана фотография), которые не нужны.Эти инструменты предоставляют быстрый и простой способ уменьшить размер файлов без потери качества изображения.
Приложения и службы сжатия изображений
Сохранение изображения для Интернета: пошаговый пример
Для начала давайте представим, что мы Stiff Salt (на самом деле принадлежит другу и разработчику Shopify), и мы хотели изменить изображение функции в нашем интернет-магазине.
Мы настраиваем сцену, заставляем нашу соль выглядеть совершенно невероятно и делаем снимок с помощью цифровой зеркальной камеры.Отлично, у нас есть фото. Как красиво!
Но… размер файла ОГРОМНЫЙ! 14,6 МБ, если быть точным. А размеры фото — 5184 × 3456 пикселей. Сейчас это совершенно непригодно для использования. Буквально он достаточно большой, чтобы напечатать плакат размером с фильм. При размере 14,6 МБ загрузка этого изображения на компьютер посетителя займет много времени. Это нехорошо.
Пора приступить к работе и значительно уменьшить размер изображения и размер файла.
Помните, мы собираемся сделать три вещи с изображением.
Уменьшить размер изображения: Это размеры фотографии
Правильное сохранение изображения для уменьшения размера файла: Это размер файла и сколько места он занимает на жестком диске вашего компьютера и / или веб-сервере
Сжать файл изображения: Чтобы избавиться от дополнительных скрытых данных, занимающих место
Уменьшить размер изображения
В зависимости от того, какую программу вы решите использовать, и личных предпочтений, вы можете:
Уменьшите размер изображения перед сохранением
Уменьшить размер изображения при сохранении изображения
Сохраните изображение, затем уменьшите его размер
Чтобы упростить задачу, сначала уменьшим размер изображения.Для этого мы собираемся открыть изображение в Photoshop (вы можете использовать любую программу обработки изображений, которая вам удобнее).
Чтобы выяснить, какой размер, мы рассмотрели рекомендуемый размер изображения для главной страницы темы. Это было 1600 x 800 пикселей (помните, что оригинал был 5184 x 3456 пикселей).
В Photoshop выберите «Изображение»> «Размер изображения».
Хорошо, мы уменьшили размер (размеры) изображения до более подходящего и рекомендованного разработчиком темы.
Правильное сохранение изображения (Сохранить для Интернета)
В Photoshop есть специальная команда под названием «Сохранить для Интернета», которая оптимизирует файл изображения для отображения в Интернете. Это важно, поскольку обычная команда «Сохранить» может привести к созданию файлов размером в 2-3 раза больше, чем команда «Сохранить для Интернета».
В поле «Сохранить для Интернета» нам нужно сделать несколько вариантов.
Тип изображения: Тип файла влияет на качество и размер выходного файла
Качество изображения: Это важно и может сильно повлиять на окончательный размер файла
Размеры: Мы уже сделали это на первом этапе, поэтому нет необходимости делать это снова, но если бы мы не сделали этого на первом этапе, мы могли бы просто изменить размеры изображения здесь
Основываясь на том, что мы узнали в начале этого поста, мы знаем, что JPEG — лучший тип файла для фотографий или любого изображения с большим количеством цветов и сложностью.Выберем JPEG.
Для качества изображения у вас есть шкала, которую вы можете выбрать из 5 предустановок в диапазоне от максимального до низкого. Давайте посмотрим на окончательный размер выходного файла для каждого из уровней качества (эта информация отображается в нижнем углу окна сохранения изображения):
Максимум: 1,38 МБ
Очень высокий: 611 КБ
Высокий: 339 КБ
Средний: 152 КБ
Низкий: 86k
Как видите, с каждым понижением уровня качества размер изображения уменьшается почти вдвое.В целом мы обнаружили, что для большинства изображений лучше всего подходит высокий уровень. На этом уровне человеческому глазу практически невозможно увидеть ухудшение качества изображения, а размер файла почти в 4 раза меньше, чем если бы мы просто выбрали максимум.
Если изображение является чрезвычайно важным изображением с большим количеством деталей, вы можете выбрать более высокий уровень и сохранить на Очень высоком.
По сути, сохранение для Интернета — это балансирующее действие: вы должны сбалансировать качество графики и размер файла мультимедиа в соответствии с вашими личными потребностями.
СОВЕТ ПРОФЕССИОНАЛА: Как правило, мы хотим, чтобы фотографии наших продуктов были не более 80–150 КБ, а для больших изображений главной страницы — не более 250–350 КБ. Это хорошие контрольные цифры, к которым вы тоже должны стремиться.
Сжать изображения для Интернета

Если вы использовали Adobe Photoshop, он уже проделал действительно большую работу по уменьшению размера изображения, однако вы все равно можете сократить еще 5-10% размера изображения с помощью приложения для сжатия, такого как ImageOptim и / или ShortPixel.
ImageOptim — это также самый простой способ быстро уменьшить размер файла изображения, если вы использовали другую программу для сохранения изображений, которая не так хороша, как Photoshop.
Перетащив каждый файл из предыдущего шага в ImageOptim, мы смогли еще больше уменьшить размер изображения еще на 5%. Небольшие, но опять же, они уже были оптимизированы с помощью Photoshop. В любом случае, каждый килобайт на счету.
Заключение
Напомним, наша фотография была безумно огромной, когда мы начинали, однако с помощью нескольких простых шагов мы уменьшили размер фотографии с 5184 × 3456 до 1600 x 800, чтобы она идеально подходила для нашей домашней страницы и, в то же время, взял с компа-грохот 14.4 МБ, до гораздо более разумных 336 КБ.
Сохранение изображений для Интернета — важный шаг, который нужно выучить на ранней стадии и неукоснительно применять. Даже если вы сэкономите всего 10-20% на каждом изображении, со временем, по мере роста вашего магазина и веб-сайта, каждый маленький КБ может дать значительную экономию, которая приведет к гораздо более приятным впечатлениям в целом для ваших посетителей, клиентов и Google.
Как оптимизировать изображения для Интернета: пошаговое видео

Как экспортировать изображения в Photoshop

Если вы экспортировали или сохранили в Photoshop несколько изображений, находящихся на одной монтажной области, вы знаете, что сохранять каждое изображение по отдельности утомительно.Вам нужно Сохранить как и затем назвать свой файл, а затем выбрать папку, в которую вы хотите сохранить изображение. Что ж, ничего страшного, но что, если у вас было несколько изображений, и вам приходилось сохранять каждое по отдельности? Для этого есть хитрость. Я покажу вам, как это сделать, ниже.
Инструмент для нарезки ломтиками
Если вы новичок в экспорте ресурсов для Интернета или экспорте нескольких изображений из монтажной области в Photoshop, этот учебник должен помочь вам в этом. Вот пошаговые инструкции по экспорту ресурсов из Photoshop.Я предполагаю, что у вас уже есть дизайн или макет с несколькими изображениями, которые вы хотите экспортировать, но не хотите экспортировать их одно за другим.
Шаг 1. Использование инструмента Slice Tool
Начните с выбора инструмента нарезки на панели инструментов. Инструмент Slice Tool — один из самых популярных и полезных инструментов для одновременного экспорта ресурсов веб-сайта. Также есть слои фрагментов, но в этом кратком руководстве мы сосредоточимся только на экспорте ресурсов.
ШАГ 2. Нарезка вашего произведения искусства
После выбора инструмента нарезки вам нужно будет нарезать изображения или области, которые вы хотите экспортировать и сохранить.Для этого просто щелкните и перетащите область, которую вы хотите превратить в фрагмент. Срезы позволяют легко выбирать области на монтажной области, даже если у вас есть несколько слоев. Это позволяет просто выбрать область и сохранить ее в виде фрагмента.
ШАГ 3: Присвоение имени вашим ломтикам
Теперь, когда вы нарезали свою иллюстрацию, пришло время дать названия вашим фрагментам, дважды щелкнув каждый фрагмент и присвоив своим фрагментам имена. Имя фрагмента в этом диалоговом окне будет именем вашего файла изображения.
ШАГ 4. Сохранение ломтиков
После присвоения имен вашим фрагментам вы получите Сохранить для Интернета , выбрав Файл> Экспорт> Сохранить для Интернета (устаревшая версия) (CC 2015.5.1). Затем появится окно Сохранить как .
ШАГ 5. Экспорт фрагментов
Этот следующий и последний шаг очень важен при сохранении для Интернета и правильном экспорте файлов. Вы собираетесь выбрать свои фрагменты с помощью инструмента Slice Select Tool , а затем выбрать опцию изображения PNG или любой другой формат файла, в котором вы хотите сохранить его.Затем вы выберете опцию внизу, где написано Slices, и выберите Selected Slices из раскрывающегося меню.
Затем диалоговое окно спросит, где вы хотите сохранить свои активы. Ресурсы «Сохранить для Интернета» ВСЕГДА сохраняются в папке под названием «Изображения» . Если вы еще не создали его, система автоматически создаст его для вас. Если вы уже создали папку с именем images, то ресурсы будут сохранены внутри этой папки.Не забудьте щелкнуть и сохранить за пределами папки изображений, если вы ее уже создали. Photoshop автоматически войдет в папку с изображениями и сохранит их там, но вам нужно будет находиться за пределами папки изображений, а НЕ внутри папки при сохранении ресурсов изображений.
Видеоурок
Я создал видео, которое может помочь вам лучше понять, как экспортировать ресурсы в Photoshop. Иногда видео помогают мне узнать что-то получше, чем чтение учебника.Надеюсь, это видео поможет вам в достижении вашей цели.

Оставить комментарий!
Оптимизация веб-изображений в Photoshop | Сделано в Sidecar
Есть два основных фактора, которые определяют, как изображения будут выглядеть в Интернете: качество и размер файла. Изображение низкого качества выглядит пиксельным, размытым или имеет видимые шумовые артефакты. Исправление? Используйте изображение более высокого качества.
Но это создает другую проблему.Изображение более высокого качества означает, что размер его файла больше. Для загрузки изображений большего размера требуется больше времени. А на мобильных устройствах, где пропускная способность ограничена, а скорость имеет значение, это становится еще более серьезной проблемой.
Так как же нам найти правильный баланс между качеством изображения и размером файла? Вот тут-то и появляется оптимизация изображений.
Начнем с этого изображения для веб-сайта цифрового агентства.

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

Посмотрите на этот размер файла. 10,6 МБ — это слишком много почти для любого случая использования в Интернете. Все зависит от вашего макета дизайна, но я стараюсь сохранять размеры файлов для самых больших изображений меньше 1 МБ, стремясь по возможности менее 500 КБ. Чем меньше вы можете сделать его (не жертвуя излишним качеством), тем лучше.
Совет для профессионалов: При оптимизации изображений для Интернета важно начинать с максимально возможного размера файла. Обычно это означает изображение большего размера. Вы всегда можете сделать его меньше, сохранив при этом качество. Но если вы начнете с маленького изображения и попытаетесь увеличить его, вы быстро потеряете качество изображения. И никакая оптимизация не сделает его лучше.
Вместо того, чтобы сначала изменять размер изображения (выбрав «Изображение»> «Размер изображения»), мы можем выполнить все изменение размера и оптимизацию в одном диалоговом окне.Ура сэкономили лишнюю ступеньку!
Photoshop имеет параметры экспорта, специально разработанные для веб-изображений. В более новых версиях Photoshop есть два разных способа сделать это. Один называется «Экспортировать как», а другой — «Сохранить для Интернета (устаревший)». В более старых версиях Photoshop это называется «Сохранить для Интернета и устройств». Мы рассмотрим оба варианта.
Перейдите в Файл> Экспорт> Экспортировать как …
Это окно состоит из трех основных частей.Левая сторона используется для экспорта изображений с одинаковым соотношением сторон для разных разрешений экрана. (Это тема для другой статьи.) А пока обратите внимание на размер файла исходного изображения: 11 МБ! Средняя часть — это область предварительного просмотра изображения. Вы можете увеличивать и уменьшать масштаб, чтобы проверить качество изображения. С правой стороны происходит волшебство.
В разделе «Параметры файла» выберите «JPG» в раскрывающемся меню «Формат». Мы немного поговорим о типах файлов.Для «качества» сделайте 100%. Мы вернемся позже и посмотрим, как это повлияет на качество и размер файла.
Следующий раздел — Размер изображения, и здесь вам нужно знать, насколько велико ваше окончательное изображение. Для целей этого урока это изображение должно быть не больше 1600 пикселей в ширину. Измените ширину на 1600 пикселей, и вы увидите, что высота и масштаб% автоматически устанавливаются с одинаковым соотношением сторон.
Изменение размеров изображения — отличный первый шаг к оптимизации.Посмотрите размер файла в левой части окна. Образ теперь весит менее 1 МБ, что является хорошим улучшением. Но помните, что чем меньше мы сможем сделать размер файла без потери качества, тем лучше.
Помните настройку «Качество»? Вернемся к этому параметру и посмотрим, сможем ли мы оптимизировать дальше. Во-первых, в среднем окне предварительного просмотра увеличьте масштаб до 100%, чтобы мы могли увидеть, как наши изменения влияют на качество. В разделе «Параметры файла» измените качество на 0% и просмотрите изображение для предварительного просмотра.
Возможно, мы зашли слишком далеко. Размер файла феноменальный (всего 54 КБ!), Но качество картинки ужасное. Заметили все блочные артефакты? Фу. Давайте изменим качество на 60% и посмотрим, как это выглядит.
О да, это намного лучше. Размер файла по-прежнему велик (294 КБ), а качество изображения фантастическое. Перетащите изображение для предварительного просмотра, чтобы проверить другие части изображения и убедиться, что все в порядке.Мне это кажется отличным, поэтому теперь выберите «Экспортировать все …» и назовите новое изображение.
Быстрое сравнение показывает, что мы уменьшили размер файла более чем на 97%! Это приводит к гораздо более быстрому (и приятному) онлайн-опыту.
Процесс почти такой же, как и для «Сохранить для Интернета», поэтому давайте посмотрим, как оптимизировать этот параметр.
Совет для профессионалов: Если у вас есть выбор, выберите «Экспортировать как» вместо «Сохранить для Интернета».«У вас есть не только опции для экспорта изображений для дисплеев Retina, но и диалоговое окно появляется быстрее, особенно при оптимизации больших изображений. Кроме того, Adobe пометила эту опцию как Legacy. Кто знает, как долго это продлится.
Выберите «Файл»> «Экспорт»> «Сохранить для Интернета (устаревшая версия)». В более старых версиях Photoshop выберите «Файл»> «Сохранить для Интернета и устройств». Посмотрим на это окно.
Как видите, в этом окне еще много чего можно увидеть и чем заняться.Не беспокойтесь о большинстве из них. Вот как оптимизировать изображения из этого окна.
Во-первых, убедитесь, что вкладка «Оптимизировано» выбрана из вкладок над изображением предварительного просмотра. В нижнем левом углу изображения предварительного просмотра обратите внимание на размер файла исходного изображения: 10,51 МБ.
В правом верхнем углу окна есть раскрывающийся список типов файлов. Убедитесь, что выбран JPEG. Для «Качество» установите значение 100. Мы вернемся к этому параметру в последнюю очередь, чтобы выбрать окончательное качество изображения.
В правом нижнем углу окна находится раздел «Размер изображения». Нам нужна ширина изображения 1600 пикселей, поэтому измените «W» на 1600, убедившись, что выбран значок «Ограничить части» (это связанная цепочка). «H» и «Percent» автоматически настраиваются на одно и то же соотношение сторон.
Изображение теперь весит менее 1 МБ, но давайте вернемся к параметру «Качество» и уменьшим его, чтобы получить еще меньший размер файла.Убедитесь, что окно предварительного просмотра увеличено до 100%, чтобы мы могли видеть, как наши изменения влияют на качество. Посмотрим, как выглядит качество 0% снова.
Ага, все еще плохо. Давайте повысим качество до 60% и посмотрим на изображение. В этом окне вы можете найти полезную вещь, выбрав вкладку 2-Up, вы можете сравнить исходное изображение рядом с оптимизированным изображением. Перетащите оптимизированное изображение, и исходное изображение будет отражать ваши движения.
Как и раньше, мы видим, что размер файла был уменьшен при сохранении хорошего качества изображения. Когда все станет хорошо, нажмите кнопку «Сохранить…» (а не кнопку «Готово») и назовите новое изображение.
В этом диалоговом окне есть еще пара параметров. Убедитесь, что в раскрывающемся меню «Формат» выбрано «Только изображения». В разделе «Настройки» вы можете выбрать «Другое», чтобы изменить способ именования файлов.
По умолчанию Photoshop заменяет пробелы дефисами. Вы можете изменить это и другие параметры здесь. Когда у вас есть вещи, которые вам нужны, нажмите кнопку «Сохранить …» в диалоговом окне «Сохранить оптимизированное как».
Другое сравнение показывает огромное уменьшение размера файла, даже немного больше, чем при использовании процесса «Экспортировать как».
Каждый метод оптимизации также позволяет выбрать тип файла.Мы использовали JPG для нашего примера изображения. В «Экспортировать как» мы получаем PNG, JPG, GIF и SVG. В «Сохранить для Интернета» мы получаем GIF, JPG, PNG-8, PNG-24 и WBMP. 100% изображений, которые я оптимизировал и экспортировал для Интернета, были в формате JPG, PNG или GIF. Давайте поговорим об этих типах файлов и о том, когда вы будете использовать каждый из них.
JPG (или JPEG)
JPG — самый популярный тип файлов для веб-изображений сегодня. Это тип файла со сжатием с потерями, что означает, что каждый раз, когда вы сохраняете JPG, он немного теряет качество.Это из-за сжатия. В нашем примере изображения мы экспортировали его как JPG с качеством 60% (или 40% сжатием). Кажется, это много, но поскольку нет большой разницы в визуальном качестве, я считаю, что сохранение с качеством 60% — это идеальный баланс между качеством и размером файла.
Можете ли вы заметить разницу в сжатии этих двух изображений? Одна сторона сохраняется в 100% качестве; другой — 60%. Может быть, если вы увеличите масштаб очень близко, вы сможете увидеть. Но как часто вы делаете это при просмотре страниц?
Для изображений с большим количеством цветов, градиентов и теней лучше всего подходит JPG.Примеры изображений — это фотографии пейзажей, людей и продуктов. Но JPG — не лучший тип файла для каждой ситуации.
GIF
GIF — это формат сжатия без потерь, то есть без потери качества. Звучит здорово; почему бы нам не сохранить все изображения в формате без потерь? Основным недостатком файлов типа GIF является ограничение максимальной цветовой палитры 256 цветами. Взгляните на тот же пример изображения, чтобы увидеть разницу.
Сначала это может быть трудно увидеть, но обратите внимание на точечную крапинку на стороне ее лица.Из-за ограниченной цветовой палитры GIF-файлы плохо справляются со сложной окраской и затенением.
Так чем же полезны GIF-файлы, кроме анимированных мемов? Их ограниченная цветовая палитра делает их идеальными для веб-изображений, таких как логотипы, однотонные иллюстрации и простые значки.
GIF-файлов также позволяют сохранять эти изображения с прозрачностью; JPG — нет. Однако края имеют тенденцию к пикселизации. В таких случаях лучше всего сохранить GIF в сплошном цвете того же цвета, что и фон вашего веб-сайта.Вот пример логотипа Sidecar, сохраненного в виде прозрачного GIF-изображения и помещенного на цветной фон.
Заметили грубые и неровные края? Нет буэно. Но не волнуйтесь. Позже для этого есть исправление.
Если вам не нужна прозрачность, вы, безусловно, можете использовать JPG. Но ничто не может сравниться с сочетанием качества и размера файла GIF, когда дело доходит до изображений такого типа.
Вот иллюстрация коляски, сохраненная как в формате JPG, так и в формате GIF.(JPG был сохранен со стопроцентным качеством, так как подобные изображения наносят ущерб сжатию JPG.)
Они выглядят одинаково, но давайте посмотрим на размер файла.
GIF и его качество без потерь являются здесь победителем, уменьшая размер файла более чем на 80% по сравнению с JPG.
Раньше мы шутили об анимированных GIF-файлах, но если вам нужна анимация, GIF — единственный тип файла, который ее поддерживает.
PNG
PNG — лучшее из обоих миров. Это дает вам сжатие без потерь GIF с неограниченной цветовой палитрой JPG. Но сжатие без потерь не делает его хорошим выбором для изображений с большим количеством цветов. Что касается размера файла, то лучшим выбором по-прежнему остается JPG.
Когда дело доходит до изображений в Интернете, вы захотите использовать PNG, как и GIF. Используйте его для логотипов, однотонных иллюстраций, штриховых рисунков и простых значков.Так почему бы всегда не использовать гифки? Если вам не нужна прозрачность, тогда GIF — отличный выбор.
Но помните, что GIF-файлы немного борются с прозрачностью. Если вам нужны чистые края для прозрачного изображения, выберите PNG (или PNG-24 при использовании параметра «Сохранить для Интернета»). Давайте снова посмотрим на логотип Sidecar, сохраненный как PNG и GIF.
Посмотрите, насколько красивее выглядят края. Теперь мы можем использовать этот логотип в сети на любом темном фоне.
PNG также имеет гораздо большие параметры прозрачности. В GIF-файлах прозрачным можно выбрать только один цвет (обычно белый). По этой причине GIF-файлы либо полностью прозрачны, либо полностью непрозрачны. Вот почему мы получаем эти неприятные углы.
В PNG есть разные уровни прозрачности. Вот почему края выглядят такими красивыми и гладкими, потому что пиксели имеют разный уровень прозрачности.
Есть много способов оптимизировать изображения для Интернета.Мы надеемся, что эта основа даст вам лучшее представление о том, как найти правильный баланс качества и размера файла. Хотя жестких правил оптимизации не существует, одно можно сказать наверняка: оптимизируйте всегда.
Экспорт изображений для Facebook, Instagram и вашего веб-сайта из Photoshop — Retouching Academy
На этой неделе мы рассмотрим один из наиболее часто задаваемых вопросов в сообществе фотографов в Интернете: Как лучше всего экспортировать изображения для социальных сетей и вашего веб-сайта?
Мы поговорим об оптимизации экспорта JPEG для Facebook и Instagram, а также о лучших настройках экспорта для отображения изображений на вашем веб-сайте.Прежде чем мы углубимся, обратите внимание, что в большинстве случаев мы можем выполнить простой экспорт, который может хорошо работать для всех трех пунктов назначения. Instagram — единственная платформа, которая требует определенных соотношений сторон, но вы можете использовать это соотношение и для других целей.
Все случаи, обсуждаемые ниже, имеют универсальное значение: размер экспортируемого файла JPEG будет играть большую роль в скорости загрузки вашего веб-сайта. Это очень важно, потому что это повлияет на его рейтинг в Google и видимость в поиске ( По состоянию на 9 июля 2018 г. обновление скорости официально доступно всем пользователям.В конце прошлой недели Google объявил о серьезном изменении факторов ранжирования мобильных устройств. Хотя скорость всегда была фактором… — Wordstream.com)
СВЯЗАННЫЕ: Форматы файлов изображений, разрешение и размер
Чтобы зрители могли видеть любой веб-сайт или страницы социальных сетей, контент загружается на их устройства через браузер или приложение. Чем больше медиафайлы на этих веб-страницах, тем больше времени требуется для их загрузки и тем больше времени требуется для просмотра страницы зрителем.Один отчет показал, что 53% посещений сайта прекращаются, если страница загружается более 3 секунд. . В большинстве случаев основной причиной увеличения времени загрузки было то, что изображения не были оптимизированы для Интернета и были слишком большими по размеру.
Таким образом, наша цель — экспортировать файл наименьшего размера при сохранении качества изображения, чтобы показать вашу работу в лучшем свете.
Давайте сначала рассмотрим требования к размеру файлов в Facebook и Instagram, а затем перейдем к оптимизации изображений для вашего собственного веб-сайта.И, наконец, какие настройки экспорта использовать в Photoshop для достижения наилучших результатов.
Facebook
Facebook использует алгоритмы для изменения размера и сжатия загруженных фотографий, чтобы поддерживать быструю загрузку на платформе. Для этого необходимо уменьшить размер больших изображений, что может значительно снизить их качество.
СВЯЗАННЫЙ: Оптимизируйте свои фотографии для Facebook
Вдохновение от @sadowskaphoto на странице Академии ретуширования в Facebook
Вот рекомендуемые настройки Facebook, которым следует следовать, чтобы поддерживать наилучшее качество в файлах меньшего размера:
На сегодняшний день, 24 июля 2018 г., указано:
Измените размер фотографии до одного из следующих поддерживаемых размеров:
Обычные фотографии: 720 пикселей, 960 пикселей, или 2048 пикселей, ширина
Фото на обложке: 851px x 315px
Чтобы избежать сжатия при загрузке обложки, убедитесь, что размер файла меньше 100 КБ
Сохраните изображение в формате JPEG с цветовым профилем sRGB
Если вы загружаете с помощью мобильного приложения Facebook, важно отметить, что по умолчанию оно загружает ваше изображение в низком качестве.Чтобы этого избежать, у Facebook есть то, что они называют настройкой «HD», которая по умолчанию отключена и должна быть включена. Просто перейдите в меню FB Mobile> Настройки> Настройки учетной записи> Видео и фото и переместите ползунок вправо. После включения все готово!
Instagram
Указанные выше размеры и размеры также подходят для загрузки в Instagram, за некоторыми исключениями.
Справочный центр Instagram: обмен фотографиями и видео
Когда вы публикуете фотографию в Instagram, независимо от того, используете ли вы Instagram для iOS или Android, убедитесь, что загружаете ее с максимально возможным разрешением (до 1080 пикселей по ширине).
Когда вы делитесь фотографией с шириной от 320 до 1080 пикселей, мы сохраняем исходное разрешение этой фотографии до тех пор, пока соотношение сторон фотографии составляет от 1,91: 1 до 4: 5 (высота от 566 до 1350 пикселей с ширина 1080 пикселей).
Если формат изображения вашей фотографии не поддерживается, она будет обрезана до поддерживаемого соотношения сторон. Если вы отправляете фотографию с более низким разрешением, увеличьте ее до ширины 320 пикселей. Если вы публикуете фотографию с более высоким разрешением, уменьшите ее до ширины 1080 пикселей. — Инстаграм
Лента для вдохновения в Instagram @retouchingacademy. Изображения @phnicolascuenca и @sadowskaphoto
Сайты
При экспорте изображений для своего онлайн-портфолио обязательно принимайте во внимание рекомендации по поисковой оптимизации (также известной как SEO).
Короче говоря, от правильного SEO зависит, насколько хорошо ваш сайт будет проиндексирован поисковыми системами. Поисковые системы (такие как Google, Bing, Yahoo) используют «поисковые роботы», которые индексируют ваш сайт и сравнивают его с сопоставимыми веб-сайтами.Таким образом, чем лучше ваше SEO, тем выше будет рейтинг вашей поисковой системы, что позволит большему количеству потенциальных клиентов найти ваш сайт при поиске ретушера (или фотографа) в вашем районе.
Пример веб-сайта онлайн-портфолио нашей собственной Кендры Пейдж
Чтобы оптимизировать изображения для поисковых систем, вы можете сделать две вещи:
Используйте очень информативные имена с ключевыми словами для каждого изображения, которое вы загружаете на свой веб-сайт. Ключевые слова SEO — это ключевые слова и фразы в вашем веб-контенте, которые позволяют людям находить ваш сайт через поисковые системы (Что такое ключевые слова SEO? От WordStream).Например, если ваше изображение — портрет женщины с голубыми глазами, имя файла может быть « professional_retouching_portrait_woman_blue_eyes.jpeg » или что-то в этом роде. Подумайте, как потенциальные клиенты могут использовать ключевые слова при поиске ваших услуг в Интернете и использовать их при именовании ваших файлов.
Не менее важно иметь «замещающий текст» (альтернативный текст) для сопровождения ваших изображений на вашем веб-сайте. Альтернативный текст изначально создавался как средство предоставления текстового дескриптора в случае, если веб-сайт не может загрузить изображение.Вместо изображения будет использоваться «Альтернативный текст», позволяющий зрителю понять то, что он в противном случае увидел бы. Главное — убедиться, что зрителям рассказывается как можно больше об изображении, используя как можно меньше слов. Сегодня альтернативный текст играет важную роль, помогая поисковым системам сканировать и индексировать ваш сайт и тем самым улучшая общий рейтинг вашего сайта. Итак, альтернативный текст для изображения, упомянутого выше, загруженного на веб-сайт, может быть: . И если ваш веб-сайт находится на WordPress, вы можете заполнить альтернативный текст в настройках загруженного изображения:
Экспорт изображений для Интернета с помощью Photoshop
В рамках данной статьи мы рассмотрим только настройки экспорта изображений в Photoshop, однако конечная цель будет одинаковой независимо от того, какой редактор изображений вы используете.
Теперь вы можете экспортировать изображения для социальных сетей и веб-сайтов в Photoshop несколькими способами: с помощью функций Export As и Save for Web .
Хотя Export Поскольку — новейшая опция, многие фотографы и ретушеры по-прежнему предпочитают использовать Save for Web method. Сохранить для Интернета был спрятан в меню в последних версиях Photoshop и помечен как « Legacy », что означает, что он все еще работает, но больше не поддерживается и не обновляется и в конечном итоге будет полностью заменен на Export As вариант.
Параметры экспорта для Экспорт как аналогичны параметрам Сохранить для Интернета , и вы также можете узнать больше о диалоговом окне Экспорт как здесь.
Чтобы быстро получить доступ к диалоговому окну «Экспорт из прежних версий в Интернет», выберите Файл> Экспорт> Сохранить для Интернета (устаревшие) или нажмите Option + Shift + Command + S (Mac) , Alt + Shft + Ctrl + S (Win) .
И пока он все еще выполняет свою работу, мы сохраняем кнопку Save for Web (под названием Web Size ) в нижней части нашей панели Beauty Retouch для удобного доступа одним щелчком к меню экспорта Save for Web :
Выберите следующие настройки, чтобы экспортировать файл JPEG меньшего размера с сохранением качества изображения для Интернета:
Формат файла: JPEG
Качество: 60-70% (снижение качества часто становится заметным ниже 60-70%)
Установите флажок Оптимизированный (при использовании диалогового окна Safe For Web )
Метаданные: сохраняйте свои авторские права и контактную информацию в изображениях (убедитесь, что они добавлены в Photoshop)
Проверить преобразование в sRGB
Размер изображения: 2048 (по длинному краю) или другие размеры файла, указанные выше.
После набора настроек вы можете сохранить набор настроек этих файлов для быстрого использования в диалоговом окне Сохранить для Интернета , а в диалоговом окне «Экспорт как » по умолчанию будут повторно использоваться последние использованные настройки.
В диалоговом окне Save For Web это можно сделать через раскрывающееся меню рядом с Presets, как показано ниже:
Посмотрите этот видеоурок для получения дополнительной информации по теме:

Источник: Facebook | Instagram | Shopify | Канал Михаила Волошиновича на YouTube | таралешер.com
Изображение: Pexels.com
ПРИСОЕДИНЯЙТЕСЬ К НАШЕЙ БЮЛЛЕТЕНЕ ДЛЯ ОБНОВЛЕНИЙ И ЭКСКЛЮЗИВНЫХ СКИДКОВ
Успех! Теперь мы на связи. Вскоре вы получите подтверждение нашей подписки.
Как изменить размер изображения в Photoshop и сохранить максимальное качество
В этом уроке я собираюсь затронуть некоторые вещи, о которых многие люди не знают. Как изменить размер изображения в фотошопе и сохранить наилучшее качество.Вот что я собираюсь рассказать.
Я использую Photoshop CC, однако основы применимы ко всем версиям Photoshop, хотя диалоговое окно и параметры изменения размера в CC немного новее. Не забудьте просмотреть видео, чтобы ознакомиться с полным обзором, и ознакомьтесь с письменной информацией ниже, чтобы получить более подробную информацию или конкретные темы.
Как изменить размер изображения в Photoshop для получения наилучшего качества. Лучшие настройки для изменения размера, увеличения и уменьшения размеров изображения в Photoshop. Полное руководство по изменению размера
Прежде всего, я создал тестовое изображение.Он содержит тонкие линии, более толстый текст, тонкие изогнутые линии, градиенты и изображение, чтобы вы могли видеть результаты на разных типах изображений. Возьмите изображение прямо здесь, чтобы проверить себя. (щелкните правой кнопкой мыши и сохраните изображение ниже).
Как изменить размер изображения в Photoshop
Изменить размер изображения очень просто. Выберите «Изображение»> «Размер изображения»
. Вы увидите это диалоговое окно.
Убедитесь, что ресамплинг включен
Включите звено цепи, если вы хотите, чтобы ширина и высота изменялись вместе.Если нет, отключите цепочку, чтобы вы могли установить свою ширину и высоту.
Выберите новый размер (вы можете выбрать другие единицы измерения, нажав на «дюймы»)
нажмите ОК
Это все, что вам нужно сделать, чтобы изменить размер изображений. Продолжайте читать, чтобы узнать больше о том, как добиться наилучших результатов, если вы готовы к этой информации.
Как на самом деле измеряется разрешение?
Без особого усложнения, разрешение — это то, что вы видите на экране или при печати.На экране вы видите пикселей света, а в печати вы видите точек чернил. Отсюда и термины DPI (точек на дюйм) и PPI (пикселей на дюйм). В чрезмерном упрощении вы можете думать о них как об одном и том же, однако точки относятся к печати, а пиксели — к цифровому дисплею. Многие люди ошибочно говорят о DPI на экране, это неверно, но теперь вы знаете, что они имеют в виду. DPI и PPI — это способ описания разрешения .
Вы слышали термины «высокое разрешение», «низкое разрешение» или «низкое разрешение». Это означает, насколько плотны пиксели (или точки). Больше плотности = больше разрешения или детализации. Если разрешения недостаточно (изображение недостаточно большое), вы увидите заметную мягкость изображения или даже неровности (также называемые пикселизацией). Слишком большое разрешение не повлияет на качество отображения изображения, у вас просто будет излишне большой файл. Итак, давайте найдем лучшее разрешение для ваших нужд.
Цель состоит в том, чтобы сохранить качество как можно ближе к оригиналу, и в этой статье будет показано, как это сделать.Это одна из главных особенностей, которая отличает профессионалов от любителей, — качество финальных изображений.
Объяснение цифрового разрешения
Каждый экран имеет собственное разрешение, может быть, 750 x 1334 пикселей или 326 пикселей на дюйм, как у iphone Retina. 326 — это 326 квадратных пикселей, которые умещаются на 1 квадратный дюйм дисплея, чтобы полностью соответствовать размеру экрана. Но лучший способ измерить разрешение экрана — это общее количество пикселей.
Например, многие мониторы (HD) имеют размер 1920 пикселей и высоту 1080 пикселей.1920 × 1080.
4K (Ultra HD) — 3840 x 2160.
Камера Canon 5d Mk4 имеет размер прибл. 30 мегапикселей (мегапикселей = миллион пикселей). 6720 x 4480 пикселей (6720 x 4480 = 30 105 600 пикселей).
Объяснение разрешения печати
Печать измеряется в точках на дюйм (DPI) (в коммерческой печати используются строки LPI на дюйм или линейный экран). Если у вас больше точек на квадратном дюйме, у вас будет больше разрешение или детализация на вашем отпечатке. Типичное разрешение печати составляет 300 точек на дюйм (например, некоторые струйные принтеры лучше печатают при разрешении 360 или 240 точек на дюйм, посмотрите свои характеристики).Это означает, что на квадратный дюйм или печатный материал приходится 300 точек чернил. Если ваше изображение меньше, оно будет выглядеть мягким, если оно больше, нет никакой пользы, поскольку принтер не может печатать сверх своего максимального разрешения. Хорошо, как определить правильный ли размер?
В Photoshop выберите «Изображение»> «Размер изображения»
Отключите пересчет.
Введите целевое разрешение в поле «Разрешение», в данном случае 300ppi (если вы ориентируетесь на 300 точек на дюйм, PPI является цифровым эквивалентом)
Теперь вы увидите, что изображение 939 x 932 пикселей можно напечатать с разрешением 3.13 x 3,1 дюйма и красиво смотрятся с разрешением 300 пикселей на дюйм / 300 точек на дюйм. Если вам нужно напечатать больше, вам нужно либо выбрать изображение большего размера, либо увеличить изображение (пересчитать).
Проблема с дискретизацией (увеличением) заключается в том, что вы потеряете качество изображения. Чем больше вы его сделаете, тем больше потеряете качества. Если вам нужно уменьшить масштаб изображения (уменьшить), тогда потеря качества не такая большая проблема, хотя вам может потребоваться повысить резкость изображения, если вы уменьшите его слишком сильно (подробнее об этом скоро).
Как описать размер изображения
Если кто-то просит изображение определенного размера, просто сказав «4 × 6 дюймов» или «с разрешением 300 точек на дюйм», вы не получите достаточно информации. Иногда люди даже заходят так далеко, что говорят «300 dpi на 12 Мб», это тоже не помогает, потому что размер файла на самом деле не влияет на физический размер изображения, потому что на это влияет сжатие файла и тип файла. Что вам нужно знать, это одно из двух:
Общие размеры в пикселях.Скажем, 3000, 4000 пикселей.
Укажите целевой размер И разрешение. Например, 4 × 6 дюймов при 300DPI / 300PPI. (Узнайте, как обрезать до точного размера и разрешения)
Изменение размера изображения и интерполяция в Photoshop
При изменении размера изображения Photoshop должен воссоздать пиксели. Photoshop должен знать, как склеить пиксели вместе, а какие выбросить при уменьшении масштаба. Также необходимо знать, как создавать пиксели при увеличении масштаба. Этот процесс называется передискретизацией .Когда вы масштабируете изображение даже на один пиксель, все изображение передискретизируется или перезаписывается. Вот почему создание изображения правильного размера в первую очередь — это здорово. Однако не бойтесь, Photoshop действительно отлично справляется с передискретизацией, и во многих случаях вы никогда не сможете увидеть разницу в качестве.
Чтобы выполнить повторную выборку, Photoshop должен вычислить, как воссоздать пиксели. Эта математика называется интерполяцией (интерполяция). Интерполяция важна, потому что определенные типы интерполяции дадут вам лучшие результаты для разных типов изображений.Я постараюсь сделать это простым языком, как нетехнический, и подскажу вам лучшие варианты. Изначально в Photoshop было 3 типа интерполяции (это ненаучный способ взглянуть на них).
Ближайший сосед — Думайте об этом как о просмотре ближайшего пикселя и сопоставлении его цвета и тона.
Билинейный — Думайте об этом, как если бы вы смотрели на 4 окружающих пикселя и находили среднее значение
Би-кубическое — как если бы смотрели на 16 окружающих пикселей и находили среднее.Но придавая больший вес 8 ближайшим пикселям.
Обычно двухлинейный лучше всего подходит для штриховой графики и простой графики, а двухкубический лучше всего подходит для фотографий и графики, содержащих градиенты, но подождите, на этом все не заканчивается.
Adobe добавила еще 2 типа бикубических (в Photoshop CS3). Они добавили:
BiCubic Smoother: сглаживает артефакты, созданные при увеличении
Bicubic sharper: повышается резкость, чтобы вернуть потерянные детали при уменьшении файла
(Посмотрите, какие функции были добавлены в какие версии Photoshop в наших бесплатных супергидах)
Есть еще 2 варианта какие они?
Автоматически (Photoshop CS6), при увеличении выбирается режим «Бикубическое сглаживание» (CS6) / «Сохранить детали» (CC), а при уменьшении изображений — «Бикубическая резкость».Автоматический — самый простой вариант в большинстве случаев, но продолжайте читать, потому что он может не всегда быть лучшим вариантом.
Интерполяция ступенек
Существует «секретное рукопожатие белки» для опытных пользователей Photoshop «в курсе». Этот секрет часто приписывают Фреду Миранде, открывшему интерполяцию ступенек. Это работает так, когда вы увеличиваете или уменьшаете изображение, а не просто переходите к окончательному значению, масштабируйте его вверх или вниз на 10% за раз. Вы увидите заметное улучшение резкости изображения и окончательного качества. IF вы используете CS6 или более старые алгоритмы интерполяции.
Однако при тестировании я обнаружил, что Preserve Details дает тот же результат, что и ступенька, и я рискну предположить, что некоторые из них встроены в новейший алгоритм. Это был один из незамеченных героев первого выпуска Photoshop CC.
Хорошо, Колин, хватит! Какой метод изменения размера лучше всего использовать?
Хорошо, вот где резина отправляется в путь, и сейчас самое время открыть тестовое изображение в Photoshop и проверить себя. Вы также можете увидеть, как я тестирую это на видео выше.
Я обнаружил, что для апскейлинга функция «Сохранить детали» очень хорошо работает для многих изображений, особенно для штриховых и графических изображений (хотя для простых штриховых рисунков иногда билинейные результаты дают лучшие результаты). Однако иногда для фотографий билинейное сглаживание может давать более естественные (хотя и более мягкие) результаты с меньшим количеством ореолов и артефактов. Вы всегда можете применить к результату некоторую резкость. Результаты зависят от того, насколько вы увеличиваете изображение, а также от того, насколько оно детализировано по сравнению с большими градиентными областями, такими как небо на фотографиях.Так что не тянитесь только за автомобилем. Попробуйте несколько вариантов, чтобы увидеть, сможете ли вы добиться лучших результатов в Photoshop, иногда это удается.
Общие сведения о разрешении
Прочтите эту статью, в которой объясняется разрешение. Это простое объяснение того, почему описание изображений как 300 точек на дюйм, 72 точек на дюйм и т. Д. Ничего не значит.
Советы по масштабированию изображений в Photoshop
Хорошо, если вы все еще читаете, вы либо немного более продвинуты, либо жаждете изучить все, что можете. Вот несколько советов, о которых следует помнить при увеличении или уменьшении масштаба изображения.
Всегда просматривайте изображения на 100%, нет другого способа определить истинное качество, так как это единственное увеличение, которое дает истинную обратную связь.
Попробуйте изменить размер изображения дважды: один раз для графики, а второй — для фотографий, а затем объедините результаты.
Используйте предустановки изменения размера, если вы часто масштабируете изображения до заданного размера
Вы можете использовать Image Processor pro для пакетной обработки большого количества изображений. Файл> Автоматизация> Image Processor Pro
Помните, что методы интерполяции доступны для Image Processor Pro, «Сохранить для Интернета», «экспортировать как», а также изменить размер.
Если вам нужно действительно увеличить изображение, посмотрите некоторые сторонние плагины, такие как Alien Skins Blow up или OnOne perfect resize (формально известные как Genuine Fractals), которые заявляют , они могут масштабировать изображения до 1000x, сохраняя при этом качество.
Спасибо за ознакомление с этим руководством / статьей. Не забудьте подписаться на нашу рассылку (в правом верхнем углу панели инструментов), чтобы получать информацию, когда я публикую новый учебник. Я обычно каждую неделю делаю учебник, в котором есть как письменный, так и видео компонент для вашего удовольствия от обучения.
Лучший способ изучить Adobe Photoshop
Если вы действительно хотите получить хорошее представление обо всех достоинствах Photoshop, не тратьте время на кучу разрозненных руководств от «экспертов», которые частично совпадают, а иногда и не согласуются друг с другом. . Ваше время — ВАШ самый ценный актив . Вот почему я собрал исчерпывающий курс Photoshop, который научит вас всему в одном месте.
No related posts.