Разное

Как сохранить для web в фотошопе: Команда фотошопа «Сохранить для Web и устройств»

Содержание

Как правильно подготовить фото для размещения в Web

Автор: NON. Дата публикации: . Категория: Обработка фотографий в фотошопе.

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

Подобные публикации:

Откроем исходное изображение.

Посмотрим, какие оно имеет размеры. Для этого нажмём сочетание клавиш Ctrl+Alt+I, появится окно «Размер изображения». Ширина и высота изображения составляет 4320х3240, что очень много для размещения в Интернете.

Уменьшим ширину фото до 600 пикселов, в связи с тем, что стоит галочка «Сохранить пропорции», то в поле «Высота» автоматически подставится числовое значение, в данном случае 450 пикселов. Щёлкаем по чёрной стрелочке в самом низу окна и выбираем метод интерполяции «Бикубическая, чётче (наилучшая для уменьшения)». Нажимаем «Да».

Сразу заметно, что картинка «поплыла». Устраняем эту проблему.

Создаём дубликат слоя, для чего перетаскиваем основной слой на вторую справа иконку в палитре «Слои».

Переходим в «Фильтр — Другие — Цветовой контраст».

В окне фильтра ставим такое значение, что бы проступили контуры цветов. У меня это 2 пиксела.  Нажимаем «Да».

Обесцвечиваем изображение — Shift+Ctrl+U.

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

Сливаем слои вместе — Ctrl+E.

В результате получили резкое изображение с нужным размером, которое смело можно размещать в Web.

 

Если Вы не хотите пропустить интересные уроки по обработке фотографий — подпишитесь на рассылку.

Форма для подписки находится ниже.

 

Понравилось? Поделитесь:

Facebook

Twitter

Вконтакте

Одноклассники

Добавить комментарий

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

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

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

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

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

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

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

Покажу, как сохранить изображение в формате JPEG на примере рисунка, созданного в Photoshop.

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

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 битканал» («8BitsChannel»), то выбираю «16 битканал» («16bitsChannel»). Увеличение глубины цвета желательно, чтобы конвертация из одного цветового профиля в другой прошла аккуратно. Визуально на исходном и итоговом изображениях изменение глубины цвета едва ли отразится.

Затем выбираю в главном меню «Редактировать» («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»). Окно «Преобразовать в профиль» исчезает.

Снова открываю окно «Сохранить как» и проделываю действия 2-ого шага.

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 пикселей.

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

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

1 шаг

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

2 шаг

В появившемся окне «Сохранить для Веб» («Save for Web») в ниспадающем списке в верхней части окна выбираю значение «JPEG».

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…»).

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

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

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

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

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

  1. Прошу Вас поделиться в х результатами упражнений.
  2. Упражнения
  3. Скачайте архив (объём ~ 36 Mb) с изображениями-примерами.
  1. Подготовьте фотографию «Пример1.jpg» для публикации в электронном портфолио. Для этого создайте три JPEG-изображения максимального, насколько это возможно, качества. Пусть объём каждого (место, занимаемое в памяти компьютера) не превышает 100. При этом, пусть высота первой картинки будет равна 800 пикселам, второй – 500 пикселам, и третьей – 50 пикселам.  Какое значение параметра «Качество» Вам потребовалось установить в каждом из трёх случаев? При каком минимальном значении параметра «Качество» третья картинка выглядит приемлемо?  
  2. Подготовьте рисунок «Пример2.psd» к печати в местной фотолаборатории, которая не принимает -файлы, сохранив изображение в максимальном качестве в формате JPEG. Каков фактический объём получившейся JPEG-картинки?  
  3. Подготовьте фотографию «Пример1.jpg» к отправке на фотоконкурс. Организаторы конкурса хотят оценить не только смысловое содержание фотографии, но и её техническое качество. Поэтому они установили требования к принимаемым произведениям: объём – не более 300, размер – не менее 2048 пикселей по длинной стороне. Какая пара чисел «значения параметра “Качество” – размер по длинной стороне в пикселах» будут наиболее эффективно удовлетворять указанным требованиям?  
  4. Сохраните рисунок «Пример2.psd» в формате JPEG в 7-10 вариантах, отличающихся лишь значением параметра «Качество» на 10-15%. Например, «Пример2_10.jpg» сохраните со значением параметра «Качество» равным 10, «Пример2_20.jpg» – со значением параметра «Качество» равным 20 и так далее. При этом, размер всех вариантов уменьшите вчетверо относительно размера исходного изображения. Затем последовательно, начиная от картинки наилучшего качества, покажите в одном и том же масштабе все варианты двум-трём людям и попросите их выбрать варианты приемлемого качества. Начиная с какого значения параметра «Качество», картинка перестаёт быть визуально приятной (укажите среднее значение)?  
  5. Сохраните фотографию «Пример3.tif» в формате JPEG в трёх вариантах максимального, насколько это возможно, качества так, чтобы каждый вариант пользователь мог загрузить не более, чем за 1 секунду при скорости доступа в Интернет равной 1 Mbits. В первом варианте уменьшайте размер за счёт параметра «Качество», во втором варианте – за счёт параметра «Размер изображения» (или «Процент»), в третьем варианте – за счёт комбинирования и первого, и второго параметров. Покажите все варианты двум-трём людям и попросите их выбрать вариант наилучшего качества. Какой подход позволяет получить изображение наилучшего технического качества?

Примечание:

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

Многие из присылаемых картинок, мягко говоря, огромны «не по назначению»: как по объёму в килобайтах, так и по размеру в пикселах. Требуется время, чтобы скачать изображения.

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

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

Сортировать: Новые Комментируемые Просматриваемые

В этом уроке вы познакомитесь с самыми основами Photoshop. Это команды автоматической коррекции: Автотон, Автоконтраст и Автоматическая цветовая коррекция. Вы узнаете алгоритмы…

Читать дальше →

12/12/2019. Обработка фото — Photoshop и Lightroom. Евгений Карташов

7 582

7

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

Источник: https://photo-monster.ru/postobrabotka/read/sohranyaem-izobrajenie-v-formate-jpeg-gibko.html

Как сохранить картинку в Фотошопе, способы

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

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

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

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

Как сохранить изображение в Фотошопе

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

Например, как обратился ко мне один подписчик:

Как сохранить фото в Фотошопе? Кое-что исправил на фотографии. А файл сохранить не получается, выскакивает какое-то предупреждение. Я новичок – скажите, как закончить работу с готовым изображением?

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

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

Тогда будет понятно, что спрашивает у тебя программа, при сохранении фотографии.

Как бы то ни было, я сегодня покажу все способы сохранения.

Варианты сохранения изображений

В программе есть несколько вариантов сохранения фотографий или изображений:

  1. Сохранить;
  2. Сохранить как…;
  3. Сохранить для Web.

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

Остановлюсь на каждом способе сохранения.

Сохранить

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

Для того, чтобы сохранить изображение, проверьте, что вы объединили все созданные слои, иначе, картинка сохранится в формате PSD.

А ваша исходная фотография останется без изменений. Чтобы объединить слои, установите курсор на верхний слой и нажмите правую кнопку мышки. Из списка выбирайте объединить видимые – если слоёв много, объединить с предыдущим – если их только два. Если у вас есть скрытые слои, то можно выбрать – выполнить сведение.

То есть, в итоге должен остаться только один слой. Для формата JPG – слой с замочком и названием “фон”, для формата PNG без замка – называется “Слой 0”. Кажется – что всё это мелочи, на самом деле это очень важно для дальнейшего сохранения файла.

После того, как вы убедились, что лишних слоёв нет, нажмите “файл – сохранить” или “Ctrl+S”.

Если ваша картинка в формате jpeg, то, перед сохранением появится такое окно настроек.

Здесь вы можете указать программе в каком качестве сохранять фото.

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

Я вот думаю, что возможно моему подписчику именно такое “предупреждение” вышло, только на английском.

Теперь рассмотрим, как сохранить картинку в PNG формате.

Сохранить картинку в PNG

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

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

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

Сохранить как

К пункту сохранить как мы прибегаем в случаях:

  1. Когда нудно поменять формат изображения, к примеру jpeg заменить на png или на gif файл, то есть конвертировать.
  2. Когда нужен дубликат изображения, к примеру вы хотите оставить исходную картинку и обработанное изображение. Тогда нажимайте сохранить как, выбирайте папку, куда хотите сохранить и замените название картинки, если сохраняете в ту же папку, где находится исходник.

Процедура сохранения такая же, как я описывал в предыдущем разделе.

Сохранить для Web

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

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

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

Но, если такую картинку распечатать – она потеряет практически всё – резкость, качество, цвет и так далее. Наилучшее разрешение картинок для печати – 300 пикселей на сантиметр в квадрате. Для Интернета такие фотографии слишком тяжёлые, занимают много места.

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

При этом неважно, сколько слоёв, свели их или нет, есть замочек или нет. Для этого сохранения программа автоматически считывает только видимые слои, временно объединяя их в одно изображение.

В специальном окне программа предложит указать в каком формате желательно сохранить картинку.

Если это jpeg, то указать качество.

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

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

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

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

Советую прочитать:

  • Как выделить объект в Фотошопе и отделить от фона;
  • Как сделать водяной знак в Фотошопе;
  • Изменить размер изображения в Фотошопе;
  • Как вставить фото в фото в Фотошопе;
  • Как перенести объект в Фотошопе (Photoshop).

P.S. Прикладываю скриншот моих заработков в партнёрских программах. И напоминаю, что так зарабатывать может каждый, даже новичок! Главное – правильно это делать, а значит, научиться у тех, кто уже зарабатывает, то есть, у профессионалов Интернет бизнеса.


Заберите список проверенных, особенно актуальных, Партнёрских Программ 2018 года, которые платят деньги!

Скачайте чек-лист и ценные бонусы бесплатно

=>> «Лучшие партнёрки 2018 года»

Источник: https://ingenerhvostov.ru/photoshop/kak-sohranit-kartinku-v-fotoshope-sposobyi.html

Как настроить цветопередачу для публикации фото в интернете?

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

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

Adobe Lightroom

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

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

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

Размер фотографии стоит выбирать исходя из простой логики, чтобы при просмотре и с мобильного телефона, и с компьютера она сохранила свою резкость. Оптимальным размером для интернета сейчас являются значения от 1400 пикселей по длинной стороне, до 2100. В частности для «ВКонтакте» идеальным будет 1680 пикселей по длинной стороне.

Резкость вывода. Для интернета – чем больше, тем лучше. В разумных пределах. В лайтруме ставим «сильная».

После этих настроек ваша фотография готова к публикации в интернете.

Adobe Photoshop

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

И в появившемся окне выбрать настройки «универсальные настройки для Европы 3».

Если в вашем фотошопе нет предустановок для Европы, то просто выставите в поле RGB – «sRGB IEC61966-2.1», там всегда будет один профиль sRGB.

Кликаем ok, идем дальше.

«Просмотр» – «варианты цветопробы» – и ставим интернет-стандарт sRGB.

  • А также при открытии RAW-файла в фотошопе обратите внимание и выставите профиль sRGB.
  • Теперь ваш фотошоп правильно воспроизводит и сохраняет все цвета фотографии.

Сохранение фотографии для интернета в Adobe Photoshop

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

Уменьшаем через «изображение» – «размер изображения»:

Выставляем единицу измерения «пиксели» и в поле «ширина» указываем необходимый нам размер. Ресамплинг оставляем автоматический или ставим «бикубическая (с уменьшением)».

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

Обязательно делаем новый слой и заходим в «фильтр» – «усиление резкости» – «умная резкость».

Уменьшение шума ставим на 0. Радиус для уменьшенной фотографии находим в диапазоне от 0,3 до 1. Для фотографии размером 1680 пикселей по длинной стороне подойдет радиус 0,4 – 0,5. Эффект также находим в диапазоне от 70 до 150.

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

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

Поделиться в социальных сетях 5770

Источник: https://www.blenda.by/blog/kak-nastroit-cvetoperedachu-v-lightroom-i-photoshop-i-sohranit-fotografii-dlya-publikacii-v-internet/

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

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

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

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

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

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

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

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

Допустим, средняя скорость загрузки страницы 3 секунд, где 2 из них приходятся на загрузку изображений.

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

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

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

Скорость соединения с Московским сервером ~53 Мбит/сек — seogadget.ru/internet

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

Скорость загрузки страницы сайта upages. io ~300 Мбит/сек — seogadget.ru/sitespeedСколько изображений в день вы просматриваете?

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

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

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

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

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

Неправильный способ сохранения изображения ~360 Кбайт

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

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

Правильный способ сохранения изображения ~160 Кбайт

JPEG или PNG?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник: https://upages.io/nahodki/kak_pravilno_sokhranyat_izobrazheniya_v_photoshop

Сохранить для web или save for web в photoshop

Для многих вебмастеров оптимизация изображений для WEB-среды представляет собой обработку картинок и сохранение их в разных форматах: gif (1-256 цветов), png-8 (1-256 цветов), png, jpeg. После оптимизации картинок их вес должен быть наименьшим. Обычно страница сайта вместе с картинками не должна быть более 600 Кбайт. Размер картинок напрямую зависит от её качества. Чем меньше вес картинки, тем хуже её качество и наоборот. Если картинка содержит в себе 2-3 цвета, то её можно сохранить в форматах: gif, png-8. Если сайт содержит в себе много не оптимизированных картинок, то происходит большая нагрузка на сервер и пользователь с медленным интернетом может так и не дождаться загрузки страницы. В таких случаях пользователь уходит на другой сайт с “лёгкими” страницами. Одной из главных целей любого вебмастера является удержание посетителя на своём сайте.

окно “Сохранить для web и устройств”

Можно настроить качество изображения и количество цветов. Чем меньше цветов, тем меньше вес картинки. Но не увлекайтесь. Фотографии не стоит сохранять в gif и png-8 форматах. Для них подойдет jpeg c алгоритмами сжатия и png-24 с поддержкой прозрачных областей. Сохраним картинку для веб-среды. В строке меню выберем пункт “Сохранить для WEB и устройств” или “save for web”.

пункт “Сохранить для web и устройств”

В выпадающем списке выберем “jpeg”. Поставим галочку у режима “Прогрессивный”. В поле качество поставим значение 80%. Для сайтов хорошо подойдёт такая оптимизация. Алгоритмы сжатия jpeg портят качество картинки, но именно они позволяют уменьшить вес картинки.

При оптимизации внимательно смотрите на то, как будет выглядеть ваша картинка с алгоритмами сжатия. Для этого в окне найдите вкладку “2 варианта”.

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

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

Тут придётся искать золотую середину между качеством и весом картинки. Форматы gif, png-8, png-24 позволяют использовать прозрачность. Формат jpeg не поддерживает прозрачность.

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

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

Источник: http://egorch.ru/post/save-image-web-photoshop/

Сохранение изображений в Adobe Photoshop

Начиная с версии Photoshop CC 2015, параметр Файл > Сохранить для Web перемещен в пункт Файл > Экспорт > Сохранить для Web (старая версия) вместе с новыми параметрами экспорта.

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

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

  1. Выберите «Файл» > «Сохранить».

    Файл остается в текущем формате.

  1. Выберите команду «Файл» > «Сохранить как…».

    Примечание.

    С помощью внешнего модуля Camera Raw изображения Camera RAW можно сохранять в другом формате файла, например в формате Digital Negative (DNG).

  2. Выберите формат в меню «Типы файлов».

    Примечание.

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

  3. Укажите имя и местоположение файла.
  4. В диалоговом окне «Сохранить как…» выберите параметры сохранения.
  5. Нажмите кнопку «Сохранить».

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

    Примечание.

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

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

Сохраняет копию файла, оставляя текущий файл открытым на рабочем столе.

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

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

Сохраняет комментарии к изображению.

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

Использовать параметры цветопробы, ICC-профиль (Windows) или встроенный профиль (Mac OS)

Создает документ с цветовым профилем.

Примечание.

Следующие параметры просмотра изображения и расширения файла доступны только в случае, если значение «По заказу» выбрано для параметров «Просмотры изображений» и «Добавлять расширение» (в Mac OS) в диалоговом окне «Установки обработки файлов».

Сохраняет данные миниатюры для файла.

Для расширения файла используйте нижний регистр (в Windows)

Обеспечивает начертание расширения файла строчными буквами.

Параметры просмотра изображений (Mac OS)

Сохраняет данные миниатюры для файла. Миниатюры отображаются в диалоговом окне «Открыть».

Параметры расширений файлов (Mac OS)

Задает формат для расширений файлов. Установите флажки «Добавить», чтобы добавить расширение формата к имени файла, и «Строчными буквами», чтобы расширение отображалось строчными буквами.

  1. Выполните одно из следующих действий.
    • (Windows) Выберите «Редактирование» > «Установки» > «Обработка файлов».
    • (Mac OS) Выберите «Photoshop» > «Установки» > «Обработка файлов».
  2. Определите значения для следующих параметров.

    Выберите параметр для сохранения просмотров изображений: «Никогда» для сохранения файлов без просмотров, «Всегда» для сохранения файлов с указанными просмотрами или «По заказу», чтобы назначать просмотры для каждого файла отдельно. В Mac OS можно выбрать один или несколько типов просмотра. (См. раздел Параметры просмотра изображений в Mac OS.)

    Расширение файла (Windows)

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

    Добавлять расширение (Mac OS)

    Расширения необходимы для файлов, используемых или переносимых на компьютер под управлением Windows.

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

    Сохранить как в исходную папку

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

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

    Автоматическое сохранение информации о восстановлении

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

В Mac OS можно выбрать один или несколько из следующих типов просмотра (для ускорения процесса сохранения файлов и минимизации размера файлов выбирайте только необходимые типы просмотра).

Использует просмотр в виде значка файла на рабочем столе.

Сохраняет версию файла 72 ppi для использования в приложениях, в которых можно открывать изображения Photoshop только в низком разрешении. Просмотр PICT используется для файлов не в формате EPS.

Отображает просмотр в диалоговом окне «Открыть».

Сохраняет просмотр, который может быть отображен системами Windows.

Photoshop поддерживает документы размером до 300 000 пикселов в любом измерении и предлагает три формата файлов для сохранения документов с изображениями любого размера и более чем 30 000 пикселов.

Имейте в виду, что большинством других приложений, включая более ранние версии Photoshop, чем Photoshop CS, не могут обрабатываться файлы, размер которых превышает 2 ГБ, либо изображения любого размера и более чем 30 000 пикселов.

  1. Вызовите команду «Файл» > Сохранить как и выберите один из следующих форматов файла.

    Формат больших документов (PSB)

    Поддерживает документы с любым размером файла. В файлах PSB сохраняются все возможности Photoshop (хотя некоторые фильтры внешних модулей недоступны, если ширина или высота документа превышает 30 000 пикселов). В настоящее время файлы PSB поддерживаются только в Photoshop CS и более поздних версиях.

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

    Поддерживает файлы размером до 4 ГБ. Документы, размер которых превышает 4 ГБ, не могут быть сохранены в формате TIFF.

Можно экспортировать и сохранять слои как отдельные файлы с использованием множества различных форматов, включая PSD, BMP, JPEG, PDF, Targa и TIFF. Слои именуются автоматически по мере сохранения. Можно задать параметры для управления генерацией имен.

  1. Выберите «Файл» > «Экспорт» > «Экспортировать слои в файлы».

  2. В диалоговом окне «Экспорт слоев в файлы» в разделе «Выходная папка» нажмите кнопку «Обзор», чтобы выбрать место сохранения для экспортируемых файлов. По умолчанию создаваемые файлы сохраняются в той же папке, где хранится исходный файл.
  3. Введите имя в текстовом поле «Префикс имени файла», чтобы задать общее имя для файлов.
  4. Выберите параметр «Только видимые слои», если необходимо экспортировать только те слои, для которых включена видимость на панели «Слои». Используйте этот параметр, если нет необходимости экспортировать все слои. Отключите видимость для слоев, которые экспортировать не нужно.
  5. В меню «Тип файла» выберите формат файла. Задайте необходимые параметры.
  6. Выберите параметр «Включить ICC-профиль», если необходимо встроить профиль рабочего пространства в экспортируемый файл. Этот параметр важен для рабочих потоков с цветовым профилем.
  7. Нажмите кнопку «Выполнить».

Источник: https://helpx.adobe.com/ru/photoshop/using/saving-images.html

КАК: Как использовать Photoshop Save for Web Tool

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

В этом уроке вы сохраняете изображения JPEG. Инструмент «Сохранить для Интернета» также создан для сохранения файлов GIF, PNG и BMP.

Что делает графическую Web-Ready?

Большинство готовых к использованию в Интернете графических изображений имеют общие характеристики:

  • Разрешение — 72 dpi.
  • Цветовой режим — RGB.
  • Файлы уменьшаются в размерах для более быстрой загрузки веб-страниц.
01 из 07

Открыть изображение

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

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

Измените размер фотографии на небольшой размер, который вы можете использовать на веб-сайте. Для этого нажмите Образ> Размер изображения, введите новую ширину в поле Ширина и выберитеПиксели, В этом случае введите 400 пикселей и нажмите Хорошо.

02 из 07

Откройте инструмент «Сохранить для Интернета»

Предположите, что кто-то попросил вас поставить фотографию шириной 400 пикселей, готовую к публикации на веб-сайте.

Нажмите файл > Сохранить для Интернета для открытия Сохранить для Интернета диалоговое окно. (В более поздних версиях Photoshop путь файл > экспорт > Сохранить для Интернета.)

Просмотрите различные настройки и инструменты в окне.

03 из 07

Настроить сравнение

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

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

04 из 07

Установить предварительный просмотр

Нажмит

КАК СОХРАНИТЬ ИЗОБРАЖЕНИЯ ДЛЯ ИНТЕРНЕТА В PHOTOSHOP

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

Зачем это использовать? Хотя вы можете просто сохранить файл стандартным способом, такойФайл / Сохранить какфункция Save for Web / Devices выполняет три важные вещи.

  • Он оптимизирует размеры файла (например: 150 px X 150 px), позволяя ему вписываться в веб-страницы и выглядеть лучше и менее искаженным.
  • Он оптимизирует размер файла (например, 23 КБ), что позволяет загружать его быстрее.
  • Сохраняется в формате RGB (или монитора), а не в формате CMYK (печать).

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

01 Откройте ваш исходный файл

Снимок экрана Брайан Хейнс

Для начала вам нужно перейти на Файл / Открыть открыть свой файл. Это может быть в любом формате — JPG, GIF, PSD, PNG или другие. Пока Photoshop может открыть его, вы можете вывести его для Интернета.

02 Сохранение вашего файла для Интернета

Снимок экрана Брайан Хейнс

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

Перейти к Файл / Сохранить для Web / Устройства и нажмите. Это примерно на полпути вниз выпадающего меню.

Этот процесс не меняет ваш оригинальный файл вообще. Вы создаете новый файл. После завершения этого урока и возврата к исходному изображению в Photoshop вам необходимо сохранить этот файл, если вы внесли в него какие-либо изменения. Важно назвать ваше новое изображение отличным от вашего исходного. Часто просто добавляя _web к имени файла будет хорошо работать. (пример: filename_web.jpg)

03 Отрегулируйте сравнительный вид до 2-Up

Снимок экрана Брайан Хейнс

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

Если вы посмотрите вверху окна, вы увидите следующие опции: Оригинал, Оптимизированный, 2-вверх, 4-вверх. Для большинства целей 2-Up — это то, что вам нужно.

04 Установите размер просмотра на 100%

Снимок экрана Брайан Хейнс

Чтобы убедиться, что вы просматриваете на 100%, отметьте опцию в левом нижнем углу экрана.

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

05 Выберите размер файла

Снимок экрана Брайан Хейнс

Размеры для Интернета почти всегда в пикселях (px). Важно соблюдать правильные пропорции. Рядом с окном изображения находится небольшое изображение звена цепи. То, что это делает, масштабирует ширину, когда вы регулируете высоту. Например, изображение размером 600 на 400 пикселей. Если вы уменьшите ширину до 300 пикселей, файл автоматически масштабируется до высоты 200 пикселей. Если этот флажок снят, изображение будет искажено.

У вас также есть возможность масштабировать изображение в процентах.

06 Выберите тип файла для экспорта

Снимок экрана Брайан Хейнс

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

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

Наиболее распространенным является jpg для Интернета — это наименьший формат файла, который означает, что он быстрее загружается для посетителей вашего сайта. Если у вас есть прозрачность, выберите png-24. Если вы не знаете, что означает прозрачность, вы должны выбрать jpg.

07 Выберите качество изображения

Снимок экрана Брайан Хейнс

Каждый из трех вариантов jpg (Высокий, Средний, Низкий) имеет предустановленные настройки качества, которые можно настроить вручную. Если вы просматриваете на 100%, вы можете решить, какое качество вам нужно. Чтобы настроить уровень масштабирования, см. Шаг 5. Изображение будет выглядеть так же онлайн, как и в окне предварительного просмотра.

Если вы выбрали что-то кроме JPG, вы можете пропустить этот шаг.

08 Сохраните ваш файл

Снимок экрана Брайан Хейнс

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

Поздравляем! Ваш новый файл готов к использованию в Интернете.

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

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 приводит к безвозвратной потере качества.

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

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

Подготовка изображение и размер изображения для Веб

Цель: изучение алгоритма подготовки графических элементов веб-страницы

Требования к иллюстрациям для ВЕБ

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

  • Графические элементы должны быть представлены в формате GIF или PNG.
  • Фотографии должны быть представлены в формате JPEG.
  • Обеспечьте показ изображений с малым разрешением, пока идет загрузка больших изображений.
  • Используйте GIF-изображения с чересстрочным форматом.
  • Укажите атрибуты height и width элемента img.
  • Сократите количество анимации.
  • По возможности используйте пиктограммы изображений.
  • Обязательно создавайте «альтернативный» текст (атрибут alt)

Градиент на фон в Photoshop

При размещении градиента на фон, подбирается либо горизонтальный либо вертикальный градиент, и, в зависимости от этого, вырезается лишь тонкая линия данного градиента. При размещении в CSS устанавливаются соответствующие свойства фона (см. рис. 1.1)

Рис. 1.1. Градиент на фон в Photoshop

Диалоговое окно Сохранить для Интернета и устройств

Прежде чем использовать файл изображения в веб-странице, необходимо в графическом редакторе подготовить его для размещения. При этом важно не только определить в photoshop размер изображения, но и правильно сохранить: используя диалоговое окно Сохранить для Веб и устройств (см. рис. 1.2):

Рис. 1.2. Диалоговое окно Сохранить для Интернета и устройств

Устанавливаем настройки диалогового окна Сохранить для Интернета и устройств:

Рис. 1.3. Настройки диалогового окна Сохранить для Интернета и устройств

Оптимизация и сжатие до заданного размера файла:

Рис. 1.4. Оптимизация и сжатие до заданного размера файла

Лабораторная работа Photoshop 1_1:
  1. Откройте изображение в Photoshop и выберите «Файл» -> «Сохранить для Интернета и устройств».
  2. В диалоговом окне «Сохранить для Интернета и устройств» щелкните вкладку «Оптимизированный».
  3. В меню «Стиль» выберите «Низкое качество JPEG».
  4. Щелкните вкладку «Размер изображения».
  5. Убедитесь, что установлен параметр «Сохранить пропорции» и введите ширину. Для электронной почты подходит размер 400 пикселов.
  6. Нажмите кнопку «Сохранить». Введите имя файла и путь для сохранения файла. Убедитесь, что в меню «Формат» выбран вариант «Только изображения». Нажмите кнопку «Сохранить».

Установка параметров оптимизации JPEG

Для размещения качественных фото, необходимо подготовить в Photoshop изображение в формате JPEG:

Рис. 1.5. Параметры оптимизации JPEG

Установка параметров оптимизации для форматов GIF и PNG

Рис. 1.6. Параметры оптимизации для форматов GIF и PNG

Лабораторная работа Photoshop 1_2: JPEG-сохранение
  • Откройте в редакторе изображение jpg формата (или скачайте изображение желтого цветка) и вызовите диалог «Сохранить для Веб и устройств» (Save for Web & Devices) в меню File.
  • Выберите вкладку «Оптимизированный» (Optimized)
  • Откройте список «Наборы параметров» (Preset) и выберите один из 12 предлагаемых вариантов – JPEG Medium (средний)
  • Оцените качество изображения и размер итогового файла
  • Уровень качества, можно грубо задать в меню, а можно точно настроить ползунком «Качество» (Quality): передвиньте ползунок на 70.
  • Включите флажок опции «Оптимизированный» (Optimized): позволяет чуть уменьшить размер файла в обмен на ограничение совместимости со старинными браузерами.
Лабораторная работа Photoshop 1_3: GIF-сохранение
  • Скачайте файл для работы.
  • Из «списка форматов» выберите пункт «GIF».
  • Выберите (или впечатайте) количество оттенков в поле «Цвета» (Colors) и посмотрите, как это отразилось на изображении и размере итогового файла (установите 90)
  • Для уменьшения исходной гаммы картинки до заданного количества, можно воспользоваться одним из 9 доступных методов редукции цвета. Выберите одну из четырёх верхних опций: установите «Ограниченная» (Restrictive)
  • Смешение цветов (Dithering) отчасти компенсирует узость гаммы, «конструируя» отсутствующие цвета из набора имеющихся. Выберите «Диффузия» (Diffusion) и передвиньте ползунок Dither (степень количества полутонов) на 80.
  • В таблице цветов выберите один из цветов (желтый), дважды щелкнув по цвету, и замените его другим оттенком. Для выбора можно воспользоваться Пипеткой в левой части экрана.
  • Щелкните кнопку Done, чтобы сохранить параметры оптимизации в исходный документ
Лабораторная работа Photoshop 1_4: Взвешенная оптимизация
  • Скачайте файл для работы.
  • Откройте файл в редакторе. Выделите фрагмент картинки (цветок) Прямолинейным Лассо или любым другим инструментом.
  • Сохраните выделение в альфа-канал (Select → Save Selection (Выделение → Сохранить выделение)). Дайте ему имя (введите в поле Имя).
  • Откройте диалог «Сохранить для Веб и устройств», выберите «JPEG» в качестве формата на выходе и, если нужно, настройте уровень качества.
  • Щёлкните кнопку «маска» по соседству с полем «Качество» (Quality). Открывается диалоговое окно.
  • Выберите в меню «Канал» (Channel) только что сохранённый альфа-канал. Настройте «Минимальное» и / или «Максимальное» значения по вкусу и нажмите Ok.
Лабораторная работа Photoshop 1_5: Настройка параметров вывода
  • В диалоговом окне «Сохранить для Интернета и устройств» в раскрывающемся меню «Оптимизация» выберите пункт «Изменить настройки вывода» (Edit output settings).
  • Отметьте флажок Вывод XHTML: При экспорте создаются web-страницы, соответствующие стандарту XHTML.
  • Щелкните по кнопке Следующая и настройте параметры в группе «Фрагменты».
  • Настройте вывод фона щелкнув по Следующая.
  • Щелкните ОК и сохраните оптимизированный файл.
  • Просмотрите HTML-код результирующего файла.

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

У вас есть дополнительная опция сохранения файлов, которая есть в Photoshop, если вы хотите сохранять файлы специально для Интернета. Вы найдете параметр «Сохранить для Интернета» в меню «Файл». Когда вы выбираете эту опцию, появляется окно, показанное выше.

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

Вверху вы увидите, что выбран «PNG-24». Это предустановка, которую вы обычно используете для поддержания прозрачности документа. Под ним также есть опция «Прозрачность», которую вы можете выбрать, чтобы убедиться, что прозрачность сохраняется. Если вы установите для предустановки значение «JPEG», фон будет удален, а параметр прозрачности больше не будет доступен.

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

GIF 128 Dithered, вы могли бы заметить, что этот пресет также дает вам возможность прозрачности.

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

В нижнем правом углу вы обнаружите, что программа действительно показывает вам полный размер файла. На картинке выше текущий размер файла 84.8К. Этот размер файла изменится, если вы измените формат. Например, если бы вы переключили его на «JPEG High», размер файла теперь был бы 19,8 КБ. С другой стороны, если вы измените его на â € ˜GIF 128 Dithered, это будет 22.08. Итак, PNG определенно является более крупным форматом файла, но это потому, что вы сохраняете больше данных о цвете без сжатия.

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

Создание веб-страницы с помощью Photoshop

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

Вот созданный мной курс, в котором я покажу вам, что именно я делаю для создания визуального оформления веб-сайта для клиента в Photoshop. Углубленное обучение Photoshop здесь: Создание веб-сайта в Photoshop и Illustrator

Начало работы

Создайте большой документ Photoshop, не менее 1200 пикселей в ширину на 900 пикселей в глубину (это можно увеличить позже с помощью Canvas Size), RGB с разрешением 72 dpi.

Затем я обычно центрирую дизайн в пределах холста шириной 1200 пикселей, рисуя пару направляющих. (Домашняя мозоль: веб-сайты, которые выровнены по левому краю окна браузера.) Нарисуйте вертикальные направляющие, перетаскивая их за вертикальную линейку по бокам документа. Если вы не видите линейки, нажмите Cmd (Mac) / Ctrl (PC) -R.

Вы можете сделать это на глаз, хотя я обычно хочу, чтобы ширина веб-сайта была ровно 1024 пикселя. Увеличьте масштаб [Cmd (Mac) / Ctrl (PC) -plus] для большей точности.Вы можете просмотреть / скрыть направляющие, выбрав Cmd (Mac) / Ctrl (PC) — ;.

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

Использование векторов, фигур и смарт-объектов

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

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

Еще одно преимущество смарт-объектов в Photoshop заключается в том, что вы можете дважды щелкнуть их значок в палитре слоев и отредактировать графику в Illustrator после сохранения обновлений смарт-объекта в документе Photoshop. Если этот смарт-объект был скопирован и многократно использовался в дизайне (стрелка, значок, графическое устройство), то все экземпляры этого смарт-объекта будут обновлены.Это круто!

Слои имен и группы слоев, чтобы все было организовано

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

Так что сгруппируйте все ваши слои в группы слоев основных областей страницы (верхний колонтитул, нижний колонтитул, боковая панель и т. Д.). Это упростит задачу, если клиент внезапно скажет: «Можно ли разместить боковую панель на противоположной стороне?»

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

Стили слоя для тени текста

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

Для темных текстовых теней , например {1px 1px # 000}, используйте эффект Drop Shadow по умолчанию, изменяя только расстояние и размер на 1 пиксель.

Для светлых теней текста , например {1px 1px # 000}, используйте эффект Drop Shadow по умолчанию, изменяя только цвет с черного на белый, режим наложения с Mulitply на Normal, а расстояние и размер на 1 пиксель ( Смотри ниже).

Захватите свой цвет с помощью пипетки

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

Затем вы получаете HEX-версию цвета, которую можете использовать в своей разметке CSS. Нажмите «Добавить в образцы», если вы хотите легко получить доступ к этому точному цвету в другом месте дизайна.

Представление дизайна веб-страницы клиенту

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

Также неплохо добавить любые состояния наведения или раскрывающиеся списки на странице, чтобы клиент точно знал, что он получает.

Вот HTML-код, который я использую для отображения большого JPG-файла по центру веб-страницы:





Визуальный номер главной страницы 1




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

Сохраните его как «home-1.html» вместе с JPG в папке на вашем веб-сайте (я использую / dev / client-name) и отправьте ссылку клиенту. Когда клиент возвращается с комментариями, просто повторно сохраните файл HTML как «home-2.html» и не забудьте изменить имя и заголовок изображения.Это позволяет легко ссылаться на более ранние версии.

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

Углубленное обучение : Создание веб-сайта в Photoshop и Illustrator

А ты?

Какие маленькие хитрости вы применяете при создании визуального вида веб-сайта в Photoshop? Или вы используете Fireworks или какой-нибудь другой инструмент? Пожалуйста, оставьте свои отличные предложения и любые вопросы в разделе комментариев ниже.

Когда использовать каждый тип файла

Думаете, GIF — самый вкусный вид арахисового масла? И AI был тем странным научно-фантастическим фильмом с Хейли Джоэл Осмент в главной роли? Что ж, вы не ошиблись. Но сегодня мы говорим о форматах изображений и обо всех тех надоедливых маленьких файлах, которые мы используем для создания визуального контента для печати и Интернета.

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

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

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

Различные типы форматов файлов изображений

  1. Растровые форматы файлов
  2. Векторные форматы файлов

Растровые форматы файлов

Что такое растровое изображение

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

Фотографии предоставлены автором.

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

CMYK по сравнению с RGB

Все растровые изображения можно сохранить в одной из двух основных цветовых моделей: CMYK и RGB.

CMYK — четырехцветный процесс печати, обозначающий c yan, m agenta, y ellow и k ey (черный). Эти цвета представляют четыре краски, которые будут сочетаться в процессе печати.Файлы, сохраненные в этом формате, будут оптимизированы для физической печати.

RGB — это цветовая модель на основе света, обозначающая r ed, g reen и b lue. Это три основных цвета света, которые в сочетании дают другие цвета. Файлы, сохраненные в этом формате, будут оптимизированы для Интернета, мобильных телефонов, фильмов и видео — всего, что появляется на экране.

С потерями и без потерь

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

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

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

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

JPEG / JPG

JPEG — это растровый формат с потерями, обозначающий Joint Photographic Experts Group, техническую группу, которая его разработала. Это один из наиболее широко используемых форматов в Интернете, как правило, для фотографий, графики электронной почты и больших веб-изображений, таких как баннерная реклама.У изображений JPEG есть скользящая шкала сжатия, которая значительно уменьшает размер файла, но увеличивает артефакты или пикселизацию по мере сжатия изображения.

Без сжатия Высокая компрессия
Вы должны использовать JPEG, когда…
  • Вы имеете дело с фотографиями и / или произведениями искусства в Интернете . JPEG обеспечивает максимальную гибкость при редактировании и сжатии растров, что делает их идеальными для веб-изображений, которые необходимо быстро загружать.
  • Вы хотите напечатать фотографии и / или иллюстрации .Файлы в формате JPEG с высоким разрешением и низким сжатием идеально подходят для редактирования и последующей печати.
  • Вам необходимо отправить изображение для быстрого предварительного просмотра клиенту. Изображения JPEG могут быть уменьшены до очень маленьких размеров, что делает их идеальными для отправки по электронной почте.
Не используйте JPEG, если…
  • Вам нужна веб-графика с прозрачностью. JPEG-файлы не имеют канала прозрачности и должны иметь сплошной цвет фона. GIF и PNG — ваши лучшие варианты прозрачности.
  • Вам нужно многослойное редактируемое изображение.JPEG — это формат плоского изображения, что означает, что все изменения сохраняются в одном слое изображения и не могут быть отменены. Рассмотрим файл PSD (Photoshop) для полностью редактируемого изображения.

GIF

GIF — это растровый формат без потерь, который расшифровывается как Graphics Interchange Format. Большой вопрос: как это произносится? Создатель GIF говорит «JIFF» как арахисовое масло. Этот писатель (и многие в мире) говорит «GIFF», потому что графика начинается с «гу». В любом случае, мы оставим это вам. GIF также является широко используемым форматом веб-изображений, обычно для анимированной графики, такой как рекламные баннеры, изображения для электронной почты и мемы в социальных сетях.Хотя GIF-файлы не содержат потерь, их можно экспортировать с помощью ряда настраиваемых параметров, которые уменьшают количество цветов и информации об изображении, что, в свою очередь, уменьшает размер файла.

Вы должны использовать GIF, когда…
  • Вы хотите создать веб-анимацию . Изображения в формате GIF содержат все кадры анимации и информацию о времени в одном файле. Редакторы изображений, такие как Photoshop, позволяют легко создавать короткие анимации и экспортировать их в формате GIF.
  • Вам понадобится прозрачность .Изображения в формате GIF имеют «альфа-канал», который может быть прозрачным, поэтому вы можете разместить свое изображение на любом цветном фоне.
  • Вам понадобится небольшой напильник . Методы сжатия в формате GIF позволяют значительно уменьшать файлы изображений. GIF — лучший формат файлов изображений для очень простых значков и веб-графики.
Не используйте GIF, когда…
  • Вам нужно изображение фотографического качества. Хотя GIF-файлы могут иметь высокое разрешение, они имеют ограничение в 256 цветов (если вы не знаете несколько трюков).Фотографии обычно имеют тысячи цветов и будут выглядеть плоскими и менее яркими (а иногда и странно из-за цветовых полос) при преобразовании в GIF.
  • Вам нужно распечатать изображение. Из-за ограничений по цвету большинству напечатанных фотографий не хватает глубины. Если вам нужно распечатать фотографии, посмотрите TIFF, PSD и JPG.
  • Вам нужно многослойное редактируемое изображение. GIF — это формат плоского изображения, означающий, что все изменения сохраняются в одном слое изображения и не могут быть отменены. Рассмотрим файл PSD (Photoshop) для полностью редактируемого изображения.

PNG

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

Наклейки-единороги от _ELM_
Вы должны использовать PNG, когда…
  • Вам нужна качественная прозрачная веб-графика .Изображения PNG имеют переменный «альфа-канал», который может иметь любую степень прозрачности (в отличие от изображений GIF, которые имеют только включение / выключение прозрачности). Кроме того, с большей глубиной цвета вы получите более яркое изображение, чем в случае с GIF.
  • У вас есть иллюстрации с ограниченным количеством цветов . Хотя подойдет любое изображение, файлы PNG лучше всего использовать с небольшой цветовой палитрой.
  • Вам понадобится небольшой напильник . Файлы PNG могут уменьшаться до невероятно крошечных размеров, особенно изображения простых цветов, форм или текста.Это делает его идеальным типом файла изображения для веб-графики.
Не используйте PNG, если…
  • Вы работаете с фотографиями или произведениями искусства. Благодаря высокой глубине цвета PNG, формат позволяет легко обрабатывать фотографии с высоким разрешением. Однако, поскольку это веб-формат без потерь, размеры файлов, как правило, становятся очень большими. Если вы работаете с фотографиями в Интернете, выберите JPEG.
  • Вы имеете дело с проектом печати. Графика PNG оптимизирована для экрана. Вы определенно можете распечатать PNG, но лучше использовать файл JPEG (с потерями) или TIFF.

TIFF / TIF

TIFF — это растровый формат без потерь, который расшифровывается как Tagged Image File Format. Из-за чрезвычайно высокого качества формат в основном используется в фотографии и настольной издательской деятельности. Скорее всего, вы столкнетесь с файлами TIFF при сканировании документа или фотографировании с помощью профессиональной цифровой камеры. Обратите внимание, что файлы TIFF также могут использоваться в качестве «контейнера» для изображений JPEG. Эти файлы будут намного меньше традиционных файлов TIFF, которые обычно очень большие.

Вы должны использовать TIFF, когда…
  • Вам потребуется высококачественной графики для печати. Наряду с RAW файлы TIFF относятся к числу графических форматов высочайшего качества. Если вы печатаете фотографии, особенно огромных размеров, используйте этот формат.
  • Вы выполняете сканирование в высоком качестве . Использование TIFF для сканирования документов, фотографий и иллюстраций гарантирует, что у вас будет самый лучший исходный файл для работы.
Не использовать в TIFF, если…
  • Вы работаете с веб-графикой.Хотя многие веб-браузеры поддерживают его, файлы TIFF оптимизированы для печати. Выбирайте JPEG или PNG, когда вам нужно отображать высококачественные изображения в Интернете.

RAW

Необработанный формат изображения содержит необработанные данные, полученные цифровой камерой или сенсором сканера. Обычно изображения обрабатываются (корректируются по цвету, балансу белого, экспозиции и т. Д.), А затем преобразуются и сжимаются в другой формат (например, JPEG или TIFF). Необработанные изображения хранят необработанные и обработанные данные в двух отдельных файлах, поэтому у вас остается изображение максимально высокого качества, которое вы можете редактировать без разрушения с помощью приложения для редактирования фотографий, такого как Photoshop.Существуют десятки и десятки необработанных форматов, но некоторые из типичных форматов — это CRW (Canon), NEF (Nikon) и DNG (Adobe).

через Adobe
RAW следует использовать, когда…
  • Вы снимаете и редактируете фото . Убедитесь, что ваша камера настроена на RAW, чтобы вы могли снимать наиболее универсальные изображения. Затем используйте совместимое приложение для редактирования фотографий, чтобы настроить изображение.
Не использовать RAW, если…
  • Вы работаете с веб-графикой. RAW создан для редактирования фотографий.Когда вы будете готовы представить свои фотографии в Интернете, конвертируйте их в формат JPEG.
  • Вы готовы печатать фотографии. Многие принтеры не поддерживают необработанные форматы, поэтому сначала преобразуйте их в JPEG или TIFF.

PSD

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

Вам следует использовать PSD, когда…
  • Пришло время отретушировать фотографии. Нужно исправить цвет фотографии? Или добавить слой текста? PSD = фотографии.
  • Вам необходимо отредактировать иллюстрацию для цифровой или печатной печати. Это может быть фотография, картина, рисунок или что-нибудь еще. Photoshop — правильный инструмент, чтобы убедиться, что каждая линия, тень и текстура на месте.
  • Вам нужно цифровых изображения для Интернета , например изображения в социальных сетях, рекламные баннеры, заголовки электронных писем, видео и т. Д. Создание этих изображений в Photoshop обеспечит их правильный размер и позволит оптимизировать их для Интернета.
  • Вы должны создать макет веб-сайта или приложения . Слои позволяют легко перемещать элементы пользовательского интерфейса.
  • Вы хотите проявить фантазию с анимацией и видео. Photoshop позволяет легко вырезать простые видеоклипы и добавлять графику, фильтры, текст, анимацию и многое другое.
Не используйте PSD, если…
  • Нужно выложить фото в интернет или отправить превью клиенту. Интернет поддерживает формат JPEG. Сначала выполните преобразование, чтобы аудитория могла видеть ваше изображение (и чтобы его загрузка не занимала несколько минут).
  • Вы готовы печатать фотографии. Многие принтеры не поддерживают формат PSD, поэтому сначала преобразуйте его в JPEG или TIFF.

Векторные форматы файлов

Что такое векторное изображение

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

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

PDF

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

Вам следует использовать PDF, когда…
  • Вы готовы к печати . Как мы уже упоминали, многие принтеры предпочитают PDF в качестве основного формата доставки, поскольку он широко распространен. Уточните у своего принтера, как они хотят, чтобы вы подготовили файл.
  • Вы хотите отобразить документа в Интернете . Вы не будете использовать PDF-файл для одного значка или логотипа, но он отлично подходит для плакатов, листовок, журналов и буклетов. PDF-файлы сохранят весь ваш дизайн в одном пакете, что упростит просмотр, загрузку или печать.
Не использовать PDF, если…
  • Вам нужно отредактировать свой дизайн. PDF-файлы — отличные контейнеры, но для их содержимого используйте другие приложения. Вы можете редактировать растровые изображения в Photoshop и векторную графику в Illustrator.Когда вы закончите, вы можете объединить их в PDF-файл для удобного просмотра.

EPS

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

Вам следует использовать EPS, когда…
  • Вам необходимо отправить векторный логотип клиенту, дизайнеру или типографии.С файлом EPS вам не нужно беспокоиться о том, где будет размещен или напечатан логотип. Независимо от размера, он всегда будет отображаться с правильным разрешением.
Не используйте EPS, если…
  • Вы имеете дело с фотографиями или произведениями искусства. EPS может обрабатывать растровые изображения, но этот тип файлов изображений предназначен в первую очередь для векторных изображений. Работайте с PSD, TIF или JPEG, когда у вас есть фотопроект.
  • Вам необходимо отобразить изображение в Интернете. Сначала экспортируйте в JPEG, PNG или GIF.

SVG

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

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

AI

AI — это собственный формат векторных изображений, который расшифровывается как Adobe Illustrator.Формат основан на стандартах EPS и PDF, разработанных Adobe. Как и эти форматы, файлы AI в основном являются векторным форматом, хотя они также могут включать встроенные или связанные растровые изображения. Файлы AI можно экспортировать как в файлы PDF, так и в EPS (для удобного просмотра и печати), а также в JPEG, PNG, GIF, TIFF и PSD (для использования в Интернете и дальнейшего редактирования).

Вам следует использовать AI, когда…
  • Вам нужно отредактировать векторный дизайн . Файлы AI позволяют перемещать и изменять каждый элемент в вашем дизайне одним или двумя щелчками мыши.
  • Вам необходимо создать логотип , значок или талисман бренда . Каждую векторную фигуру и линию, созданные в Illustrator, можно увеличивать до любого размера, что делает его идеальным для изображений, которые необходимо использовать по-разному.
  • Вы хотите одностраничный образец для печати . Illustrator идеально подходит для плакатов, визиток, флаеров и заметок, которые можно комбинировать с другими растровыми изображениями.
  • Вам необходимо установить тип для логотипа. Возможности набора в Illustrator невероятно мощные, они позволяют растягивать, наклонять и преобразовывать любой текст любым возможным способом.
Не используйте ИИ, если…
  • Вам нужно отредактировать изображения. Если в композиции используется растровое изображение (фотография или иллюстрация), Illustrator имеет ограниченное количество инструментов для непосредственного редактирования этого изображения. Photoshop (файлы PSD) может выполнять более обширные настройки, такие как цвет, контраст и яркость.

Хотите найти дизайнера, который сможет создать все нужные типы файлов?
Наши дизайнеры могут это сделать!

Что такое смарт-объект? Как использовать смарт-объект в Photoshop?

  • Home
  • Testing

      • Back
      • Agile Testing
      • BugZilla
      • Cucumber
      • Database Testing
      • ETL Testing
      • Jmeter
      • Jmeter Backing Jmeter
      • Jmeter Load
      • Ручное тестирование
      • Мобильное тестирование
      • Mantis
      • Почтальон
      • QTP
      • Назад
      • Центр качества (ALM)
      • RPA
      • SAP Testing
      • Selenium 9013

        9013I Тестирование 9013I

      • Selenium 9013I Тестирование
    • SAP

        • Назад
        • ABAP
        • APO
        • Начать er
        • Basis
        • BODS
        • BI
        • BPC
        • CO
        • Назад
        • CRM
        • Crystal Reports
        • FICO
        • HANA
        • 9013 9013 9018 MM Назад
        • PI / PO
        • PP
        • SD
        • SAPUI5
        • Безопасность
        • Solution Manager
        • Successfactors
        • SAP Tutorials
    • Назад 9000 Ang2 Web
    • 9045 9045 Apache 9000 Ang2 Web
    • 9045
    • ASP.Net
    • C
    • C #
    • C ++
    • CodeIgniter
    • СУБД
    • JavaScript
    • Назад
    • Java
    • JSP
    • Kotlin
    • Linux
    • Kotlin
    • Maria
    • Kotlin
    • Linux 90Dec Linux. js
    • Perl
    • Назад
    • PHP
    • PL / SQL
    • PostgreSQL
    • Python
    • ReactJS
    • Ruby & Rails
    • Scala
    • SQL
    • 9013 SQL Server 9018 9018 SQL 9019 9018
    • UML
    • VB.Net
    • VBScript
    • Веб-службы
    • WPF
  • Обязательно учите!

      • Назад
      • Бухгалтерский учет
      • Алгоритмы
      • Android
      • Блокчейн
      • Business Analyst
      • Создание веб-сайта
      • Облачные вычисления
      • COBOL
      • 9019 9019 9019 9019 9019 9019

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

        • Новости технологий
        • ПК и мобильный
          • Windows
          • Mac
          • Linux
          • Android
          • iPhone и iPad
          • Интернет
          • Безопасность
          • Программирование
        • образ жизни
          • Развлечения
          • Продуктивность
          • творческий
          • Игры
          • Социальные медиа
        • Оборудование
          • Объяснение технологии
          • Руководства покупателя
          • Умный дом
          • Сделай сам
          • Обзоры продуктов
        • Бесплатные вещи
          • Бесплатные электронные книги
          • Подарки
          • Лучшие списки
          • Бесплатные чит-листы
        • Видео
        • Около
          • О MakeUseOf
          • Рекламировать
          • Связаться с нами
          • Конфиденциальность
          • Магазин
          • Напишите нам
        Подписывайтесь на нас
        Следуйте MakeUseOf.
  • Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *