Как оптимизировать изображения в программе Adobe Photoshop

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

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

Запускаем программу:

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

В главном меню выбираем File - Open (). Открывается окно Open ():

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

С помощью этого окна находим на диске изображение, которое хотим разместить на сайте и которое нужно оптимизировать; жмём Открыть:

как оптимизировать изображение в Adobe Photoshop
Рис. 3

Для показа я специально выбрал очень "тяжёлое" изображение - 1,8 Мб. Кроме того, оно и по размеру довольно большое - 1290х858 пикселей:

как оптимизировать изображение в Adobe Photoshop
Рис. 4.

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

Итак, кликаем в главном меню File - New:

как оптимизировать изображение в Adobe Photoshop
Рис. 5.

Открывается диалог New, в котором можно задать нужные размеры изображения. В моём случае это будет 250 пикселей по ширине и 150 по высоте:

как оптимизировать изображение в Adobe Photoshop
Рис. 6.

Жмём ОК. Откроется окно нового документа:

как оптимизировать изображение в Adobe Photoshop
Рис. 7.

Теперь располагаем окна с открытыми файлами так, чтобы оба были доступны:

как оптимизировать изображение в Adobe Photoshop
Рис. 8.

На открытом изображении кликаем левой кнопкой мыши и, не отпуская кнопки, "переносим" рисунок на чистое поле нового файла. После этого в новом файле появится фрагмент перенесённого изображения (ведь исходный и конечный рисунки разного размера):

как оптимизировать изображение в Adobe Photoshop
Рис. 9.

Разворачиваем новый файл во весь экран, жмём комбинацию клавиш Ctrl + T. Изображение стало выделенным в рамку, по углам и сторонам которой есть маленькие светлые квадраты:

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

Подводим курсор к этим квадратам и, нажимая и удерживая левую кнопку мыши, уменьшаем изображение до размеров белого поля (можно перемещать и всё изображение, кликая левой кнопкой и, разумеется, не отпуская, в любом месте изображения):

как оптимизировать изображение в Adobe Photoshop
Рис. 11. После того как изображение подогнано до нужного размера, кликните на значок, обведённый красным кружком.

После того какразмер подогнан, нажмите в панели инструментов на значок курсора (см. рис. 11).

Откроется диалог:

как оптимизировать изображение в Adobe Photoshop
Рис. 12.

Кликаем по кнопке Apply.

Всё, с размером изображения разобрались. Осталось оптимизировать файл по "весу".

В меню File кликаем на Save for Web & Devices:

как оптимизировать изображение в Adobe Photoshop
Рис. 13.

Откроется окно Save for Web & Devices:

как оптимизировать изображение в Adobe Photoshop
Рис. 14.

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

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

как оптимизировать изображение в Adobe Photoshop
Рис. 15. Наиболее оптимальный вариант справа вверху; под изображением - его параметры; в панели справа можно изменить форматы изображений.

Устанавливая формат рисунка, имейте в виду, что в нашем примере - фотография, а для фотографий предпочтительней формат JPEG (см. статью Оптимизируем графику для сайта ) .

Определившись с необходимым качеством и размером файла, жмите Save. Откроется диалог Save Optimized As, в котором выбираем место на жёстком диске, где будут храниться оптимизированные файлы:

как оптимизировать изображение в Adobe Photoshop
Рис. 16.

Сохранить.

Надеюсь, обошлось без затруднений.

Успеха.

Автор: Андрей Чернобай

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

Как оптимизировать изображения в программе Adobe Fireworks

Оставьте свой отзыв о статье:



Введите цифровой код с картинки*:

Новое на сайте

Другие статьи...

Видеокурсы

Рассылки

"Вокруг Сайта"
подпишитесь и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

"PHP-песочница"
- PHP для начинающих: уроки с подробным анализом скриптов, необходимых для вашего сайта:

PHP-песочница
Подписаться письмом

Разделы Сайта