Как картинку сохранить для web
Как картинку сохранить для web
Интернет стремительно завоёвывает нашу страну, число пользователей растёт с каждым днём. У многих появились свои любимые сайты и социальные сети, где они проводят время часами. Многие размещают свои картинки и фотографии на этих публичных ресурсах. И тут встаёт вопрос, как правильно изменить фотографию (сохранить для web), чтобы её приняли на соответствующем сайте, ведь очень часто по правилам интернетовских ресурсов, загружать картинку можно только определённых размеров и определённого веса в килобайтах. В этом небольшом уроке по работе с фотошопом мы научимся изменять размеры фото формата Jpeg и уменьшать её вес для размещения в Интернете. Мы будем использовать только одно окно "Сохранить для web и устройств". Так как сохранить фото для web?
Подобные публикации:
- урок "Как изменить размер в фотошопе при размещении картинки в Интернете"
- урок "Как правильно подготовить фото для размещения в Web"
Откроем исходную фотографию. Эту картинку будем размещать в Интернете.
Для начала посмотрим, какие она имеет размеры. Для этого нажимаем сочетание клавиш Ctrl+Alt+I. Появится окно "Размеры изображения". Мы видим, что размер фото составляет 2480 х 3602 пикселей, а вес 25,6 Мб. С таким огромными размерами картинку не примет ни один сайт. Необходимо уменьшить все размеры.
Перейдём в "Файл - Сохранить для Web и устройств", а проще и быстрее нажать сочетание клавиш Shift+Ctrl+Alt+S.
Из-за того, что файл большого размера, фотошоп нас спрашивает, продолжить ли работу, так как будет снижена производительность работы. Нажимаем "Да".
Появится окно "Сохранить для Web и устройств". Рассмотрим его параметры. Вверху Вы видите 4 варианта отображения картинки в окне предварительного просмотра: оригинальное изображение, оптимизированное изображение, показ сразу оригинального и оптимизированного изображений (2 варианта) и показ оригинального и 3-х оптимизированных изображений (4 варианта). На практике используют или 2 варианта или 4 варианта. Я использую 2 варианта, мне так кажется удобнее. Внизу каждой картинки (на скриншоте выбран способ - 4 варианта) Вы видите её параметры в зависимости от установленного качества. Чем меньше последний параметр, тем меньше вес картинки, но и соответственно уменьшается качество фотографии. При 60% качестве, вес фото 797,6 Кб, при 30% качестве, вес фото 389,3 Кб, при 15% качестве, вес фото 259,5 Кб. В нижнем левом углу можно уменьшить или увеличить масштаб фотографии.
Для начала мы должны уменьшить размеры фотографии, для этого в правой части окна есть вкладка "Размер изображения", делаем её активной (щёлкаем по ней левой клавишей мыши). Мы видим размеры нашей картинки - 2480 х 3602.
Уменьшаем размеры, к примеру, ширину - до 500 пикселов, так как установлена галочка "Сохранить пропорции", то в поле автоматически подставится новое значение, в данном примере - 726 пикселов. Нажимаем "Применить".
И обратите внимание, как значительно уменьшился вес картинок. К примеру, где раньше стояло 797,6 Кб, теперь установлено значение 69,74 Кб. Что уже позволяет размещать картинку для Web. Т.е. взаимосвязь между шириной и высотой картинки и её весом прямо пропорциональная, чем меньше размеры, тем меньше вес картинки. Очень часто бывает, что достаточно уменьшить размеры фото и её уже можно размещать в Интернете, так как её вес всего составляет десятки килобайт и удовлетворяет всем требованиям.
Теперь давайте научимся выбирать качество фотографии. Для этого в верхнем правом углу окна щёлкаем по чёрной стрелочке и выбираем нужное качество: низкое (10%), среднее (30%), высокое (60%), очень высокое (80%) или максимальное (100%).
Для более точного выбора значения качества существует ползунок, изменив положение которого мы можем выбрать значение, которое нам необходимо.
Теперь посмотрим, для чего нужны другие параметры. При работе с этим окном всегда должна стоять галочка "Оптимизированный" (её название говорит само за себя). Не стоит ставить галочку в поле "Постепенно", установка здесь галочки приведёт к тому, что изображение не смогут просмотреть пользователи, имеющие более старые версии оборудования и программ. Установка галочки "ICC-профиль" приводит к тому, что вид фотографии на экране монитора другого пользователя, будет точно таким же, как и на Вашем. Неплохая опция, но она приводит к увеличению веса картинки. Ползунок "Размытие" применяется для того, чтобы размыть артефакты, которые получаются при выборе маленького значения качества фотографии, при этом вес картинки уменьшается.
В нижней части окна есть кнопка "Device Central", позволяющая посмотреть, как будет выглядеть картинка на экране телефона и настроить её отображение. Щелчок по значку земного шара со знаком вопроса позволяет увидеть, как будет выглядеть фотография при просмотре в браузере.
Для этой картинки я выбрал среднее качество, при котором девочка выглядит вполне прилично, но, правда, фотография несколько размылась. Но, чтобы устранить эту проблему, есть много способов, ссылки на которые Вы видите вверху этого урока под первой картинкой. Мы с Вами научились сохранять картинки для web.
Скачать урок (303 Кб) в формате PDF можно здесь.
Если Вы не хотите пропустить интересные уроки по обработке фотографий - подпишитесь на рассылку.
Форма для подписки находится ниже.
Временно закрыто комментирование для гостей, нужна обязательная регистрация, ввиду засилья спамботов.
зарегистрируйтесь на сайте, что бы оставлять комментарии!