Меню

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


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

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

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



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

Направляющие помогают рисовать макет по сетке. Это важный элемент при создании макета с ровной версткой.

Создать направляющие линии можно двумя способами:

1. Через меню View - New Guide (Просмотр - Новая направляющая)

И теперь в этом окне вводите параметры: положение (вертикальной или горизонтальное) и позиция относительно начала макета в пикселяй.

Например: если ввести Horizontal и 100 px., то направляющая будет горизонтальной и с отступом с верха 100 пикселей.

2. Вызвать линейку нажав CTR+R, она появится по краям документа.

Теперь просто мышкой с нее можно перестакивать направляющие. Горизонтальный и вертикальные.

Я советую активировать линейку в обоих случаях (CTRL+R). В таком случае всегда видны координаты.



Не пропустите новые уроки по Photoshop:

Подпишитесь на обновления сайта

Ваш E-mail:



Напишите комментарий

comments powered by HyperComments

Похожие материалы: