Создаем макет страницы в фотошопе

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

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

Теперь, когда размеры макета выбраны, создайте новое изображение с требуемыми характеристиками при помощи команды Image > Image Size (Изображение > Размер изображения). Разрешающую способность укажите 72 dpi (пикселов на дюйм/pixels/inch), а цветовую модель – RGB. Готовые элементы страницы в макет файла можно переносить двумя способами – либо, выделив нужный графический элемент, скопировать его в буфер и вставить в файл макета, либо «перетаскивать» слои между одновременно открытыми документами с панели Layers (Слой) в окно нужного файла.

Когда все необходимые элементы собраны в одном файле, можно переходить к компоновке макета. При желании, в процессе монтажа можно дорисовывать некоторые элементы, при этом один из них можно использовать в качестве фона для остальных компонентов макета.

Довольно часто в процессе размещения графических элементов на странице появляется необходимость расположить их вдоль одной линии. В Adobe Photoshop имеется специальное средство для выравнивания элементов изображения по одной линии — Guides (Направляющие). Если в рабочем окне имеются направляющие линии, то, как только перемещаемые объекты (и текстовые слои, и графические элементы) оказываются на некотором расстоянии от этих направляющих, они к этим направляющим «прилипают». Любой «приклеившийся» элемент можно перемещать вдоль направляющей, при этом одна из координат (по горизонтали или по вертикали) будет оставаться неизменной. Как только фрагмент изображения отводят от направляющей дальше, чем на расстояние «прилипания», он отделяется от направляющей линии.

Способы получения и перемещения направляющих линий, а также другие приемы подготовки макета web-страницы при помощи Photoshop мы рассмотрим в следующий раз.