РусскийEnglish

Подготовка графики в Adobe Photoshop

Соколов В.

Открываем графический файл в Photoshop. Обычно в контекстном меню, при щелчке по файлу правой кнопкой мыши, есть строка «Открыть в Photoshop». Если нет, кликаем строку «Открыть с помощью» и выбираем нужную программу. *

1) Сразу обрезаем ненужные области картинки. На панельке «Инструменты» щелкаем инструмент «Рамка». (У меня эта кнопка на панельке третья сверху, слева. Если у Вас в окне не отображается панель инструментов (по умолчанию она стоит у левой границы окна), то щелкаем меню «Окно» => «Инструменты» – ставим галочку). Выделяем мышью (ведём при нажатой кнопке) нужную область, двигаем её. Изменяем размеры, захватывая мышью узелки в середине стороны выделенной области или по углам. После чего жмем на клавиатуре «Enter». Если передумали обрезать – нажмите кнопку «Esc» (на клавиатуре в левом верхнем углу).

2) До того, как мы уменьшили разрешение изображения, нужно отрегулировать яркость и контрастность, а при необходимости и цвет. Для этого щелкаем меню «Изображение» => «Коррекция» => «Автоконтраст» или «Яркость/Контрастность». В открывшемся окошке двигаем ползунки, добиваясь нужного результата (должна стоять «галочка» в опции «Просмотр»). Жмем «ОК». Аналогично можно подстроить цвета и т.п. В случае неудачного шага, ни в коем случае не возвращаемся к прежнему значению при помощи той же настройки – будет редактироваться уже испорченное изображение. Для возврата применяем меню «Редактирование» => «Отменить». Или сочетание клавиш «Ctrl» + «Z».

В Photoshop есть удобная возможность: повторное нажатие сочетания клавиш «Ctrl + Z» возвращает на шаг вперёд, т.е. есть возможность быстро сравнивать два варианта и остановиться на нужном.

Для возврата на несколько шагов назад или вперёд удобно использовать палитру «История» (которая по умолчанию отображается в правой колонке. Если ее не видно, щелкаем меню «Окно» => «История» – ставим галочку). Просто кликаем в ту строку, к которой хотим вернуться.

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

3) Следующий шаг – уменьшить размеры, т.е. разрешение изображения. Если на сайте ширина колонки с текстом статьи составляет 800px, нет никакого смысла загружать на сервер изображение больше 800px по горизонтали. Редкие случаи, когда на фотографии изображено 40 человек и нужно показать лицо каждого, мы пока не рассматриваем.  А чаще, картинка занимает не всю ширину колонки, и достаточно 500–600px по горизонтали. Если нужно загрузить большое изображение, расположенное вертикально (например, титульный лист документа), лучше ограничиться размером не более 768px по вертикали – такое разрешение монитора стоит у 15% посетителей нашего сайта.

Для этого щелкаем меню «Изображение» => «Размер изображения». Устанавливаем нужное количество пикселей. Должна стоять галочка «Сохранить пропорции». Жмём «ОК».

4) Полученное изображение необходимо сжать. При этом достигается значительное уменьшение размеров файла при незначительной, незаметной на глаз потере качества. В новых версиях Photoshop*** это делается в меню «Файл» => «Сохранить для Web…». Откроется окно, справа содержащее опцию выбора формата оптимизированного файла (всплывающая подсказка при наведении мыши на верхнюю кнопку в левом столбце). Для фотографий нужно брать формат JPEG.

Чуть ниже находится опция для выбора качества сжатия (среднее или высокое). Когда набьёте немного руку, качество лучше устанавливать опцией правее, у меня она отображается по-английски Quality: кликаем по синей стрелочке, появляется ползунок, двигаем его, постепенно уменьшая процент качества, пока не увидим, что качество оптимизированного изображения в окне резко уменьшилось (появился «снег» на ровных участках). Так, потаскав ползунок туда-сюда, выбираем оптимальный вариант.

Обратите внимание на левый нижний угол окна оптимизации: там отображается размер оптимизированного файла. Для Кондинского района на сегодня предпочтительно ограничиваться 80–120 КБ, в крайнем случае – 200, в самом крайнем – 300 КБ. Но такая картинка может загружаться несколько минут.

Жмем кнопку «Сохранить» (Save). В открывшемся диалоговом окне вводим имя файла обязательно латинским шрифтом без пробелов. Даже если вы ввели всё по-английски, может появиться предупреждение о несоответствующих символах – это из-за названия папок на русском языке. Жмем «ОК».

Старайтесь давать файлам названия со смыслом – их будут видеть посетители сайта и анализировать поисковые роботы. Например, название вашей организации и очередную цифру через дефис: nazvaniye-1.jpg, nazvaniye-2.jpg и т.д.

5) Иногда, отсканированные черно-белые документы занимают меньше места в формате GIF. Когда будете свободно пользоваться оптимизацией, можете попробовать ввести этот формат. Тут решающим для уменьшения размера файла является количество используемых цветов – опция Colors. Для черно-белого текста, который никто, надо полагать, читать не собирается, достаточно 2–4. Остальное аналогично.

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


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

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

***В старых версиях формат JPG оптимизируем в меню «Файл» => «Редактировать в ImageReady»

Оглавление              Далее…

Автор: Соколов В., 29.10.2012
Рубрика: WordPress

Добавить комментарий

 


       

Главная    Карта сайта    Контакты          © 2009–2017 S-konda.ru