Как картинку сохранить для web

Интернет стремительно завоёвывает нашу страну, число пользователей растёт с каждым днём. У многих появились свои любимые сайты и социальные сети, где они проводят время часами. Многие размещают свои картинки и фотографии на этих публичных ресурсах. И тут встаёт вопрос, как правильно изменить фотографию (сохранить для web), чтобы её приняли на соответствующем сайте, ведь очень часто по правилам интернетовских ресурсов, загружать картинку можно только определённых размеров и определённого веса в килобайтах. В этом небольшом уроке по работе с фотошопом мы научимся изменять размеры фото формата Jpeg и уменьшать её вес для размещения в Интернете. Мы будем использовать только одно окно "Сохранить для web и устройств". Так как сохранить фото для web?

Окно "Сохранить для WEB и устройств"

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

Откроем исходную фотографию. Эту картинку будем размещать в Интернете.

Девочка

Для начала посмотрим, какие она имеет размеры. Для этого нажимаем сочетание клавиш Ctrl+Alt+I. Появится окно "Размеры изображения". Мы видим, что размер фото составляет 2480 х 3602 пикселей, а вес 25,6 Мб. С таким огромными размерами картинку не примет ни один сайт. Необходимо уменьшить все размеры.

Окно "Размеры изображения"

Перейдём в "Файл - Сохранить для Web и устройств", а проще и быстрее нажать сочетание клавиш Shift+Ctrl+Alt+S.

Файл - Сохранить для Web и устройств

Из-за того, что файл большого размера, фотошоп нас спрашивает, продолжить ли работу, так как будет снижена производительность работы. Нажимаем "Да".

Предупреждающее окно фотошопа

Появится окно "Сохранить для Web и устройств". Рассмотрим его параметры. Вверху Вы видите 4 варианта отображения картинки в окне предварительного просмотра: оригинальное изображение, оптимизированное изображение, показ сразу оригинального и оптимизированного изображений (2 варианта) и показ оригинального и 3-х оптимизированных изображений (4 варианта). На практике используют или 2 варианта или 4 варианта. Я использую 2 варианта, мне так кажется удобнее. Внизу каждой картинки (на скриншоте выбран способ - 4 варианта) Вы видите её параметры в зависимости от установленного качества. Чем меньше последний параметр, тем меньше вес картинки, но и соответственно уменьшается качество фотографии. При 60% качестве, вес фото 797,6 Кб, при  30% качестве, вес фото 389,3 Кб, при  15% качестве, вес фото 259,5 Кб. В нижнем левом углу можно уменьшить или увеличить масштаб фотографии.

Окно "Сохранить для WEB и устройств"

Для начала мы должны уменьшить размеры фотографии, для этого в правой части окна есть вкладка "Размер изображения", делаем её активной (щёлкаем по ней левой клавишей мыши). Мы видим размеры нашей картинки - 2480 х 3602.

Вкладка "Размер изображения"

Уменьшаем размеры, к примеру, ширину - до 500 пикселов, так как установлена галочка "Сохранить пропорции", то в поле автоматически подставится новое значение, в данном примере - 726 пикселов. Нажимаем "Применить".

Вкладка "Размер изображения"

И обратите внимание, как значительно уменьшился вес картинок. К примеру, где раньше стояло 797,6 Кб, теперь установлено значение 69,74 Кб. Что уже позволяет размещать картинку для Web. Т.е. взаимосвязь между шириной и высотой картинки и её весом прямо пропорциональная, чем меньше размеры, тем меньше вес картинки. Очень часто бывает, что достаточно уменьшить размеры фото и её уже можно размещать в Интернете, так как её вес всего составляет десятки килобайт и удовлетворяет всем требованиям.

Окно "Сохранить для WEB и устройств"

Теперь давайте научимся выбирать качество фотографии. Для этого в верхнем правом углу окна щёлкаем по чёрной стрелочке и выбираем нужное качество: низкое (10%), среднее (30%), высокое (60%), очень высокое (80%) или максимальное (100%).

Окно "Сохранить для WEB и устройств"

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

Окно "Сохранить для WEB и устройств"

Теперь посмотрим, для чего нужны другие параметры. При работе с этим окном всегда должна стоять галочка "Оптимизированный" (её название говорит само за себя). Не стоит ставить галочку в поле "Постепенно", установка здесь галочки приведёт к тому, что изображение не смогут просмотреть пользователи, имеющие более старые версии оборудования и программ. Установка галочки "ICC-профиль" приводит к тому, что вид фотографии на экране монитора другого пользователя, будет точно таким же, как и на Вашем. Неплохая опция, но она приводит к увеличению веса картинки. Ползунок "Размытие" применяется для того, чтобы размыть артефакты, которые получаются при выборе маленького значения качества фотографии, при этом вес картинки уменьшается.

Окно "Сохранить для WEB и устройств"

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

Окно "Сохранить для WEB и устройств"

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

Окно "Сохранить для WEB и устройств"

 

Скачать урок (303 Кб) в формате PDF можно здесь.

 

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

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

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

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


Защитный код
Обновить

Кто на сайте

Сейчас один гость и 4 зарегистрированных пользователей на сайте

  • fsergej688
  • OlegNakroshaev
  • West2611
  • zyulka

Помощь сайту

Понравился сайт? Внесите вклад в его развитие, пожертвовав любую сумму

Деньги пойдут на оплату серверов и на развитие сайта.

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

Администрация сайта.

Пользователи, внесшие вклад

Вход на сайт



 Начните свой путь в мир ФОТОШОПА сейчас!

Соглашение

 

 

 

 

PhotoshopSunduchok

В контакте

 

 

PhotoshopSunduchok

на You Tube

You Tube

PhotoshopSunduchok

в Instagram

 

 

PhotoshopSunduchok

в Twitter

Поиск по сайту

Что в сундучке?

  • Текстовых уроков - 1100
  • Видеоуроков - 744
  • Вебинаров и тренингов - 66
  • Практических советов - 163
  • Программ - 7
  • Шаблонов, обоев и клипартов - 357
  • Наборов кистей, фигур - 306
  • Календарей - 114
  • Наборов рамок - 546
  • Книг, журналов - 125
  • Текстур, узоров и фонов - 37
  • Наборов иконок - 28
  • Наборов логотипов - 3
  • Наборов стилей - 48
  • Шрифтов - 78
  • Разное - 64