Хочу предоставить вам ещё один урок по созданию макета, теперь макет торговой тематики.
Итак начнём:
Создаём холст с размерами 950 x 1100 и заливаем его цветом "#f8f8f8". После выбираете инструмент "Прямоугольная область" и создаёте прямоугольник в верхней части сайта ( то есть там будет ваша шапка сайта ) Высота должна быть не более 120 Пикселей.

Добавьте стили слоя в прямоугольную область:


Ниже шапки, делаем линию в 1 пиксель и проводоим горизонтально слева на право.

Под белой линией создайте ещё одну прямоугольную область, чуть больше самой белой линии и заполните её любым цветом

После создания сделайте эти стили слоя:


у вас получится что-то похожее на это:

Прямоугольным выделением, под шапкой снова выдилите площадь холста, не более чем 65пикселей в высоту и добавьте след. градиент:

У вас должно получиться примерно такое чудо:

Теперь берём инструмент прямоугольник с округлыми углами и создаём прямоугольник с округлыми углами с радиусом 15 пикселей в любой части макета, это даст прямоугольнику интересные, закругленные углы.

Дублируйте прямоугольник, сделайте это несколько раз и так же заполните всё, это будут наши будущие кнопки.

Рядом выставьте копию и заполните его любым цветом рядом с прямоугольником.

Выбирите дублированный слой удерживая клавишу CTRL. Убедитесь, что сток слоя всё-ещё в окне слоёв. Должно получится что-то вроде этого:

Делаете то же самое и с другой стороны. С Помощью Ctrl+T можно изменить размер.



Получиться у вас должно примерно такое:

Копируйте это выделение и сделайте ещё пару копий и расставьте их в нужном количестве

Под вкладки создаём прямоугольник и заливаем его белым цветом

Под прямоугольником создаём 2 линии в 1 пиксель и делаем их такого цвета как на картинке:

Создаём чёрный прямоугольник чтобы он находился на тёмных вкладках и был за светлой, как здесь:

Чёрный прямоугольник должен быть на весь холст, сделайте непрозрачность 2%.

Теперь на вкладках напишите 'Главная' 'Меню' и так далее..

В пустом месте справа добавляем 'Поиск по сайту'

В шапке пишем название сайта ну и саму картинку выставляем продоваемого товара или прочего.

Автор хотел сделать 1 часть текста другого цвета и это он делал так:




Название выглядит теперь:

Для второй части слова ставим такие стили:


Получится такое:

В правой стороне шапки создаём округлым прямоугольником область и вставляем туда товар, как здесь:

Теперь создаём при помощи прямоугольника с округлыми сторонами примерно такое поле:

В верхней части меню добавляем более тёмную область для названия раздела.

Добавляем под это тёмное поле линию в 1 пиксель.

Внутри прямоугольника пишем список содержимого и делаем линии между ними в 1 пиксель, рисуем стрелочки.

После копируем себе меню и ставим ещё 1 вниз и 2 с правой стороны, по середине выставляем товар.

Создаём мини-рекламу, чтобы завлечь покупателей

Внизу сайта пишем информацию о создателе сайта, о самом сайте и на каком хостинге он находится.

Итог: