Создание шаблона для WordPress (часть 5)

Важно!

Имена изображений пишите английские и без пробелов!

Правильно: bg-header, bg_header, bgheader.

Неправильно: bg header, бг-хедер.

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

Лирическое отступление:

Рекомендую всем рисункам давать понятные и подходящие имена. Так как эта картинка шапки у нас будет играть роль фона у блока header, то и имя она получает соответствующее — bg-header. Кроме того, при сохранении (разумеется «для веб» — Save for Web) всегда выбирайте наиболее подходящий формат изображения. Например, все шрифтовые, шейповые картинки, а также плавный 2-цветный градиент более качественно и чисто сохраняется в формате GIF. Можно и в PNG, но вес будет довольно приличным. Все полупрозрачные картинки — однозначно в PNG, ибо «полупрозрачный» GIF выглядит безобразно. Многоцветные градиенты и фотографии лучше сохранять в формате JPG.

И еще пару слов о так называемом «качестве сохранения» — Quality. При сохранении в GIF не всегда обязательно в окошке Colors оставлять, стоящее там по-умолчанию, число 56. Если рисунок однотонный, то можно без видимых потерь уменьшить количество цветов до 128, а то и до 64. Вес картинки существенно уменьшится. В формате JPG также лучше придерживаться качества High. В формате PNG-24 качество не выставляется. В любом случае, в окне предварительного просмотра увеличьте картинку до 400 – 800% и пробуйте переключать форматы. Вы сразу заметите, как меняется качество рисунка, как появляется или исчезает мусор в виде разноцветных одиночных пикселов.

Теперь нам нужно сохранить лого — рисунок с перчиком. Точно также выделяем инструменом Crop Tool участок шапки с лого и нажимаем клавишу Enter. По высоте это изображение лучше сделать равным высоте шапки, чтобы потом не мудрить с его расположением.

Лого

Ширина же не критична. Вообще что касается линейных размеров: мы с вами делаем довольно простой по графике шаблон. Это означает, что точными размерами картинок, его составляющих, вполне можно пренебречь. Ну согласитесь, нет особой нужды вымерять то же самое лого по ширине, вылавливая буквально по пикселу границы. Именно потому, что тесных границ между изображениями нет. Это когда в макете присутствует довольно много разных элементов: всяких скругленных уголков, вертикальных и горизонтальных линий, то да, там придется очень четко разрезать макет на части и пользоваться уже инструментом Slice Tool   , а не Crop Tool