«Методика обучения графического редактора Adobe Photoshop в профильном курсе информатики»

2.3 Создание дизайна макета сайта
Открываем Photoshop и выбираем File > New. Используем следующие настройки:

Обратите внимание: мы задали ширину документа равной 1400px. Ширина нашего сайта будет равна 1000px. Чтобы правильно расположить сайт, нам понадобится установить некоторую разметку.
Для этого переходим в раздел View и проверяем, включены ли Rulers (направляющие). Если с ними все в порядке, то щелкаем по направляющей, расположенной с правой стороны экрана, и перетаскиваем ее в левую сторону.

Первую направляющую оставляем на отметке «200», если смотреть по верхней линейке, а вторую направляющую — на отметке «1200». В итоге мы получим необходимые нам 1000px рабочего пространства.

Пустой веб-шаблон создан, теперь мы можем приступить непосредственно к дизайну.

Создание текстурированного фона

Для начала просто заполним слой цветом #555f6e. После этого выбираем пункт Filter > Noise > Add Noise. Используем следующие настройки для шума:

Таким образом мы получим неплохой текстурированный фон.

Создаем новый слой и выбираем кисть (B). Кисть берем с мягкими краями, меняем используемый цвет на белый и устанавливаем диаметр равным приблизительно 1200px. Щелкаем левой кнопкой мыши в левой верхней области документа. У вас должно получиться что-то подобное:

В окне со слоями, которое обычно находится в правом нижнем углу, выставляем непрозрачность (opacity) на 25% – 35% и выбираем стиль слоя «Перекрытие» (Overlay). Тем самым мы получим хороший эффект освещения для текстурированного фона.

Создаем область контента

Создаем новый слой и нажимаем клавишу U, чтобы активировать инструмент «Форма» (Shape). Из панели инструментов, находящейся в верхней части экрана, выбираем прямоугольник с закругленными углами (rounded rectangle) и меняем его радиус на 6px. Щелкаем мышью прямо на левой направляющей и выполняем перетаскивание вплоть до правой направляющей, до тех пор пока не будет создан прямоугольник, похожий на следующий:

Примечание: пустое пространство сверху и снизу от прямоугольника будет использоваться для создания хэдера и футера.
Давайте добавим к текущему слою некоторые простые стили. Чтобы получить доступ к панели со стилями, достаточно сделать двойной щелчок по требуемому слою в окне слоев (или выбрать пункт Layer > Layer styles в меню).
Добавим следующие эффекты: