Adobe Photoshop: как пользоваться для оптимизации изображений на сайте

 Графический редактор Adobe Photoshop.
Обновлено:

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

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

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

Использование Adobe Photoshop для  оптимизации изображений на сайте

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

Чтобы познакомиться с Фотошопом, необходимо рассмотреть основные инструменты программы. Так как без них вы не сможете проводить даже простейшие операции. Средств для редактирования изображения достаточно, но можно выделить 4 группы инструментов:   

  1. Инструменты для выделения. Огромное количество операций, проводимых в программе Photoshop, происходят при помощи этой группы средств. Производить выделение можно по-разному. Например, произвольным образом при помощи инструмента «лассо» (горячая клавиша L) отделить небольшую область. Для более точных выделений рекомендуется использовать «перо» (Р). 
  2. Инструменты для рисования. Чтобы произвольным образом нарисовать рисунок, использовать «карандаш» или «кисть». Если надо стереть ненужный вам фрагмент, то  используйте «ластик».
  3. Для восстановления утраченного фонового изображения применяется «архивная кисть». Инструменты для коррекции это различные средства для размытия, увеличения резкости, уменьшения яркости и т. д. Данные инструменты позволяют производить самые различные операции и эффекты.
  4. Дополнительные инструменты. В эту категорию можно включить средства для заливки, точечного восстановления, подбора цвета, набора текста и т. д. 

Загрузка и установка Adobe Photoshop

Для установки программы Photoshop, компьютер должен обладать определенными системными требованиями. Современная версия фотошопа установится и будет нормально работать на компьютерах, у которых:

  • минимум 2 ГБ оперативной памяти;
  • процессор с частотой не менее 2 Ггц;
  • операционная система Windows 7,8 или 10.

Если не получится, то можно установить старую версию, она работает даже на  Windows XP. Ссылки на загрузку фотошопа:

Для загрузки нажмите “Скачать” и распакуйте архив на компьютере. 

Для установки новой версии:

  1. Отключите антивирус, иначе установка может не завершиться, поскольку некоторые антивирусы неверно воспринимают установочный файл.
  2. Запустите один из установочных файлов (32 бита или 64 бита) в зависимости от разрядности вашей системы.
  3. Следуйте простым инструкциям по установке и ожидайте ее окончания.
  4. Перезагрузите компьютер и запускайте программу.

Как оптимизировать картинки для статей в Adobe Photoshop 

Выбор шаблона для изображения.

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

Для этого нажмите на кнопку "Создать" и выберите нужный шаблон из списка размеров (для тизера 1920 х1080, для картинки 730 х 410 ). Если такого размера нет, пропишите в отмеченных полях размеры, убедитесь, что выставлены единицы измерения пикселы и выбрана альбомная ориентация, нажмите кнопку "Создать".

Размещение картинки на рабочем полотне.

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

Не забудьте нажать кнопку "Сохранение пропорции", чтобы избежать искажения картинки. Картинка должна заполнить рабочее полотно полностью. Для фиксации нажмите "Enter". Нажимаем кнопку "Перемещение" слева вверху и в открывшемся окне - "Переместить".

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

Полученный тизер загрузите на компьютер. Для этого вызовите соответствующее окно через раздел "Файл" в левом верхнем углу. В открывшемся окне находим "Экспортировать" и "Сохранить для web". 

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

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

Завершение работы с файлом.

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

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

Основные инструменты Photoshop

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

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

Размещение основных инструментов настройки.

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

Вывод

Трудно ли освоить программу? Чтобы ответить на вопрос, надо понимать, для чего нужен этот инструмент. Если требуется просто отредактировать изображение: изменить размер, обрезать, сделать надпись, обесцветить, то достаточно понять, как пользоваться Adobe Photoshop.

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

ВСЕ КУРСЫ ОНЛАЙН подобрали лучшие бесплатные видео уроки по работе в фотошоп для самостоятельного изучения программы с нуля. Уроки Adobe Photoshop для начинающих: бесплатные видео для домашнего обучения.

Следующий шаг девятый: "Subscribe.ru: обзор сервиса для увеличения трафика сайта".  Желаю всем творческих успехов! 

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

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

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

Сообщение