Обработка фотографий для сайта — Уменьшаем размер

Последнее обновление 15.03.2018

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

Вас все еще пугает Adobe Photoshop? Тогда мы идем к вам :)

PhotoshopCS3

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

В работе я использую программу Photoshop версии CS3. Я настоятельно рекомендую вам не заморачиваться с новейшими версиями программы и использовать эту. Причины следующие:

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

Начнем!

Уменьшаем размер фотографий

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

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

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

  1. Просто перетаскиваем фотографию в рабочее пространство программы.
  2. Через меню программы File – Open – выбрать нужный файл.
  3. При помощи «горячих клавиш» Ctrl+O – выбрать нужный файл.

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

Сделать это можно при помощи полезной функции — Actions.

Обработка фото в фотошопе — Уменьшаем размер

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

Вот как это делается. Когда вы открыли первый файл, то на панели Actions вам нужно создать новый экшен. Сначала создадим папку, в которую этот экшен будет добавлен. На панели Actions, внизу кликаем по изображению папки (Create new set) и задаем имя этой папки. Например, Web.

Обработка фото в фотошопе — Уменьшаем размер

Далее кликаем по картинке правее (Create new action) и задаем имя новому экшену, скажем Landscape.

Обработка фото в фотошопе — Уменьшаем размер

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

Обработка фото в фотошопе — Уменьшаем размер

Работая над следующими снимками, вам нужно всего лишь выделить этот экшен и нажать на кнопку воспроизведения (Play selection).

Обработка фото в фотошопе — Уменьшаем размер

Окей! С этим разобрались, теперь можно переходить непосредственно к правильному уменьшению фотографий. Почему я акцентирую ваше внимание на слове правильный? Дело в том, что если сразу тупо уменьшить большой исходный снимок до нужного размера, то можно потерять массу интересных деталей. Уменьшать фотографию необходимо последовательно. То есть, сначала на 50%, затем еще раз на 50%, а уже в конце до того размера в пикселях, на который рассчитан ваш блог. Такой способ позволяет более корректно сжать снимок и сохранить большинство деталей.

Делается все это элементарно. Напомню: у нас все еще включен режим записи экшена, так что старайтесь не делать лишних телодвижений.

Заходим в меню Image – Image size – в окошке Width ставим значение 50, а единицы измерения выбираем Проценты (percent):

Обработка фото в фотошопе — Уменьшаем размер

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

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

Окей! С горизонтально ориентированными фотографиями мы разобрались. Но что делать с вертикально ориентированными, или иначе — портретными? Да все то же самое! Открываем такой снимок, записываем для него новый экшен (в той же папке, где лежит первый экшен), например, с именем Portrait, и вуаля! Вертикальные снимки уменьшаются точно по такому же принципу, только на последнем шаге вы выставляете другие размеры в пикселях, чтобы снимок не получился слишком крупным.

С размерами все. Если что-то было не понятно, спрашивайте в комментариях.

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

Вэлкам!

12.11.2015

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5,00 out of 5)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

6 комментариев

  1. Елена Олейникова
    http://crochet.olejnikova.ru/
    13.11.2015

    Действительно «на пальцах» все объяснили, спасибо! А как вы относитесь к онлайн-сервисам обработки фотографий? Они правильно это делают?

  2. Ирина Широкова
    http://fusion-of-styles.ru/
    14.11.2015

    Спасибо за урок. У меня тоже есть фотошоп, но я обрабатываю снимки при помощи другой программы FastStone Image Viewer. Уже привыкла к ней. Она проста в использовании и там есть самые необходимые функции. Пока для простой обработки хватает. А при необходимости пользуюсь и Фотошопом.)

  3. Игорь Квентор
    http://www.websovet.com/
    14.11.2015

    @Елена, на счет «правильности» не скажу, так как сам такими сервисами не пользуюсь. Это скорее дело вкуса. В каждом из них свои технологии. Все зависит от того, нравится ли вам результат.

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

    @Наталья, особой необходимости именно в фотошопе нет, подходит любая программа для обработки, в том числе и онлайн-сервисы. Главное — не лениться это делать :)

  4. Наталья
    http://aristocratka.ru/
    14.11.2015

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

  5. Оксана
    http://laskovaya-mama.ru/
    16.11.2015

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

  6. Игорь Квентор
    http://www.websovet.com/
    16.11.2015

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

Оставить комментарий:




^