Как сохранить фотку в фотошопе cs6. Как сохранить изображение в Фотошопе? Основные группы изображений в веб-дизайне

Работая с графическим редактором 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)

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

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

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

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

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

09.11.2018 09.11.2018

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На данном уроке мы рассмотрим форматы сохранения файлов в Photoshop , а так же, чем они отличаются друг от друга.

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

Формат документа в Photoshop отображается следующим образом. Посмотрим на рисунок, расположенный правее. «Без имени-2 » — это название документа. После точки идет расширение документа , в данном случае jpg .

Никогда не спешите сохранять результаты вашего труда в Photoshop.

В настоящее время существует более 20 форматов графических файлов , например, jpg, gif, png, bmp, tif …
От выбранного формата во многом зависит объем файла. Таким образом, создав любое изображение при помощи графического редактора Photoshop , мы должны сохранить его в виде файла. Главная задача при сохранении — это найти золотую середину между качеством изображения и объемом содержащего файла. Хотя даже фото плохого качества можно улучшить (пример смотрите по приведенной ссылке)

Рассмотрим самые распространенныe графические форматы сохранения файлов в Photoshop

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

Сохранение документа в Photoshop в формате psd

Мы заходим во вкладку ФАЙЛ и выбираем СОХРАНИТЬ КАК . В открывшемся окне вписываем имя, выбираем формат psd и нажимаем СОХРАНИТЬ .

Кроме того, PSD — это родной формат графического редактора Photoshop . Если мы сохраним наш документ с данным расширением, то открыть мы его сможем в любой, даже самой ранней версии Photoshop.

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

Сохранение документа в Photoshop в формате jpg

Формат JPG предназначен для компактного хранения многоцветных изображений с фотографическим качеством. Потеря графической информации при сохранении не очень существенна. Формат jpg в Photoshop лучше всего применять уже после окончательного результата обработки изображения.

Сохранение документа в Photoshop в формате gif

Формат GIF предназначен для сохранения растровых изображений в Photoshop с количеством цветов не более 256. Допустим, такой вот скриншот — скриншот вкладки ФАЙЛ . Имя документа подчеркнуто красным на рисунке, расширение — зеленым.

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

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

Формат GIF часто применяется в web-дизайне.

Сохранение документа в Photoshop в формате png

Формат PNG аналогичен формату GIF . Небольшое отличие заключается лишь в том, что png способен отображать бОльшее количество цветов. Позволяет сохранять изображение с глубиной цвета 24 и даже 48 bit.

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

Мы заходим во вкладку ФАЙЛ в Photoshop . Для сохранения изображения в файле существует несколько команд.

Если нам нужно задать другой формат файла, изменить его имя и местоположение, тогда лучше использовать ФАЙЛ-СОХРАНИТЬ КАК , т.е. мы здесь задаем имя, формат, указываем место для сохранения.

Если в дальнейшем наш файл попадет в интернет, то лучше для этого воспользоваться ФАЙЛ-СОХРАНИТЬ для Web устройств .

Открыв данную команду у нас появляется диалоговое окно, где мы видим наше изображение. В левом нижнем углу отображается размер данного изображения (на рисунке размер изображения показан в синем квадратике).

Что же мы можем сделать с нашим изображением?! Как нам поменять его параметры?!

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

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

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

Выбрав оптимальный вариант сохранения изображения, нажимаем СОХРАНИТЬ и выбираем папку для сохранения.

Adobe Photoshop - популярный многофункциональный графический редактор. С ним сталкиваются многие пользователи, особенно при обработке фотографий и картинок. Как сохранить в "Фотошопе" документ? Это одна из основных функций графического редактора. Далее будут рассмотрены все возможные методы сохранения картинок. Предложенные вниманию советы значительно облегчат процесс работы с "Фотошопом". Они легко осваиваются и применяются на практике.

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

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

1. Открыть фото и отредактировать его на свое усмотрение.
2. Нажать на кнопку "Файл". Она располагается на панели инструментов в верхней части экрана.
3. Щелкнуть по кнопке "Сохранить...".

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

Опция "Сохранить как..."

Второй способ сохранения графических файлов - это использование команды "Сохранить как...". Данный прием схож с ранее изученным алгоритмом действий. Он отличается разнообразием параметров сохранения. Метод прекрасно подходит для дублирования картинок.

1. Нажать на "Файл" после редактирования документа.
2. Выбрать в появившемся меню команду "Сохранить как...".
3. Указать имя сохраняемого документа.
4. Выбрать формат сохранения. Он находится в строке "Тип файла".
5. Осуществить указание места сохранения графического документа.
6. Кликнуть по "Сохранить".
7. Указать параметры фотографии. Обычно здесь выбирают качество изображения и разновидность формата. Можно указать стандартную или улучшенную оптимизацию или же с постепенным улучшением качества картинки по мере ее загрузки.
8. Щелкнуть по кнопке "Ок".

Дело сделано. Мы изучили еще один способ сохранения документов через "Фотошоп". Для быстрой активации опции можно нажать Ctrl + Shift + S.

С закрытием файла

1. Перейти во вкладку с выбранной картинкой.
2. Навести курсор на правый верхний угол вкладки с соответствующим документом.
3. Кликнуть по крестику левой кнопкой мыши.
4. Согласиться с сохранением документа, нажав на "Да".

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

Для Web-ресурсов

Часто "Фотошоп" используется при создании графики для Web-сайтов. Останется только правильно осуществить сохранение документа. Что для этого нужно?

1. Выбрать "Файл" - "Сохранить для Web...".
2. Указать графический набор и формат сохранения.
3. Выставить параметры фона.
4. Указать качество снимка и его размер.
5. Щелкнуть по кнопке "Готово".

Быстрый доступ к опции осуществляется при помощи сочетания клавиш Alt + Shift + Ctrl + S.

Сохранение фона и картинки без него

А как сохранить фон в "Фотошопе"? Это довольно простая задача. Дело все в том, что пользователь может в качестве фона использовать любое изображение. Останется только выставить его в качестве упомянутого элемента картинки.

Создание фона в "Фотошопе" осуществляется так:

1. Открыть или создать графический документ.
2. Нажать на кнопку "Добавить новый слой".
3. Скопировать изображение, используемое в качестве фона.
4. Вставить картинку на созданный новый слой.

Теперь остается провести необходимые корректировки с изображением, а затем перенести слой с фоном в самый низ.

Как сохранить в "Фотошопе" картинку без заднего фона? Для этого потребуется создать документ в формате.gif или.tiff. Предпочтительнее работать с первым вариантом. Для этого придется активировать опцию "Сохранить для Web...", а затем в параметрах сохранения поставить отметку около "Прозрачно".

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

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

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

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

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

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

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

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

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

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

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

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

Подложка

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

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

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

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

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

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

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

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

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

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

Сжатие

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

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

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

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

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

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

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

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

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

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