Подготовка изображений для сайта в Photoshop

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

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

Приступим. Открываем изображение, которое будем подготавливать к публикации на сайте. Чтобы подогнать размер, переходим в настройки размера («Изображение» → «Размер изображения»). Здесь нас интересуют параметры ширины и высоты, которые находятся в области «Размерность». Чтобы при изменении размера не потерять пропорции изображения, необходимо проследить наличие галочек на параметрах «Масштабировать стили» и «Сохранить пропорции».

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

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

Создаем три папки:

  • Animals («животные» по англ.);
  • Flowers («цветы» по англ.);
  • Birds («птицы» по англ.).

Для названия папок я выбрал переведенные на английский язык названия категорий галереи, однако можно назвать папки транслитом (пишем английскими буквами русские слова), главное — чтобы было понятно при эксплуатации. С названиями папок мы определились, а для названия изображений возьмем название папки и добавим к нему порядковый номер изображения. Например, в папке «Birds» будут содержаться изображения с названиями:

  • birds001;
  • birds002;
  • birds003

Такая организация хранения изображений впоследствии сохранит вам уйму времени.

Создание миниатюрных изображений в Photoshop

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

Начнем. Открываем исходное изображение в Photoshop, создаем новый холст («Файл» → «Новый») с размерами миниатюрного изображения, которое нам нужно получить, например 100 на 100 пикселей.

Далее открываем настройки размера исходного изображения, на моем примере ширина равна 1024 пикселя, а высота равна 683 пикселя, из этих двух величин выбираем меньшую, следовательно, высоту. Изменяем размер по высоте на 100 пикселей (размер миниатюры по высоте в моем примере, у вас свой размер), ширина изменится сама по пропорции (необходимо чтобы стояли галочки на «Масштабировать стили» и «Сохранить пропорции»), нажимаем кнопку «Да», чтобы сохранить изменение размера.

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

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

После чего копируем выделенную область, выбрав в меню «Редактирование» пункт «Скопировать», переходим на холст миниатюрки и вставляем («Редактирование» → «Вклеить»).

Миниатюра почти готова, теперь нужно удалить задний план, если таковой имеется и сохранить изображение («Файл» → «Сохранить для Web или устройств…»). Называть миниатюру лучше так: берем название исходного изображения и добавляем, какой-либо знак, который будет обозначать миниатюру, я обычно использую английскую букву «s» (от слова «Small»).

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

Пожалуйста, зарегистрируйтесь для комментирования.

Войти
Рейтинги

Рейтинг@Mail.ru
Рейтинг@Mail.ru Rambler's Top100