ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

На этом уроке мы рассмотрим принцип создания макета сайта, который в дальнейшем можно использовать для практической работы в веб-дизайне (вопросы верстки веб-страниц на основе макета сайта, рассматриваются в другом разделе сайта). Макет состоит из отдельных элементов или блоков. Как создавать некоторые из них мы уже рассматривали на страницах раздела. Методика создания данного макета взята на одном из интернет-ресурсов и воспроизведена с некоторыми изменениями. Но тем, кто собирается профессионально заниматься веб-дизайном, главное методы и приемы создания изображений. Этому мы и будем учится.

Создадим новый документ Файл ⇒ Создать с белым фоном и параметрами указанными на рисунке.

Теперь установим две вертикальные направляющие Просмотр ⇒ Новая направляющая, которые позволят нам контролировать ширину макета.

Таким образом, общая ширина макета сайта составит 850 пикселей.

Теперь изменим фон нашего рисунка. Заменим его на радиальный градиент с параметрами указанными на рисунке.

Протащим его с верхней половины холста до середины.

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

Например, "Компания АВС консалтинговые услуги". Шрифт, его размер и цвет подберите самостоятельно.

Создадим новый слой и с помощью инструмента Прямоугольная область создадим прямоугольное выделение с параметрами 160 на 30 пикселей, которое будет служить полем для поиска и зальем его любым цветом.

Создадим еще один слой и с помощью того же инструмента выделим прямоугольник 30 на 30 пикселей и также зальем его тем же цветом.

Добавим в слой Слой 1 с большим прямоугольником стили слоя.

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

С помощью инструмента Горизонтальный текст добавим надписи в поле поиска и кнопку.

Выберем инструмент Прямоугольник со скругленными углами и настроим параметры как показано на рисунке.

Создадим новый слой и нарисуем прямоугольник высотой 215 пикселей, согласно изображению.

Щелкнем правой кнопкой мыши по прямоугольнику. Откроется контестное меню. Выберем пункт Образовать выделенную область.

Выбираем инструмент Градиент с радиальным градиентом и устанавливаем параметры градиента как показано ниже.

Перетащим градиент с верхней середины выделенного прямоугольника вниз.

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

Теперь рисунок примет следующий вид.

Выделим прямоугольник Ctrl +клик. Откроем меню Выделение ⇒ Модификация ⇒Сжать и настроем параметры диалогового окна как показано на рисунке.

Рисунок примет следующий вид.

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

Добавим на новый слой Слой 4 стили слоя с параметрами указанными на рисунке.

Рисунок примет следующий вид.

Теперь создадим для внутреннего прямоугольника эффект Боке. Для этого создадим новый документ Файл ⇒ Создать с параметрами указанными на рисунке.

Далее, используя инструмент Овльная область, создадим круг и зальем его черным цветом.

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

Теперь сохраним новую кисть Редактирование ⇒ Определить кисть. Появится диалоговое окно Имя кисти.

Пишем имя кисти и нажимаем ОК. Закроем документ.

Вернемся к рисунку с макетом сайта. Выберем инструмент Кисть и установим параметры согласно рисунка.

Вызовем на экран панель Кисть Окно ⇒ Кисть и установим для нашей кисти следующие параметры.

Теперь наша кисть готова к использованию. Создадим новый слой Слой 5 над внутренним прямоугольником Слой 4. Выделим внутренний прямоугольник на слое Слой 4 Ctrl + клик, оставляя при этом активным Слой 5. Установим для нашей кисти белый цвет и проведем по выделенной области слева направо.

Мы получим что-то похожее на это.

Применим к слою Слой 5 фильтр размытие по Гауссу Фильтр ⇒ Размытие ⇒ Размытие по Гауссу с параметрами показанными на рисунке.

Создадим новый слой Слой 6 выше слоя Слой 5. Пройдемся еще раз кистью по выделенному прямоугольнику. Установим непрозрачность слоя 50% и установим стиль слоя Внешнее свечение с параметрами по умолчанию.

Рисунок примет следующий вид.

Создадим новый слой Слой 7 выше слоя Слой 6. Пройдемся еще раз кистью по выделенному прямоугольнику. Установим непрозрачность слоя 75% и установим стиль слоя Внешнее свечение с параметрами по умолчанию.

Рисунок будет выглядеть так.

На этом эффект Боке завершен. Напишем поверх прямоугольника какой-то текст, используя инструмент Горизонтальный текст.

Теперь приступим к созданию простой навигации. Выберем инструмент Прямоугольник со скругленными углами и установим радиус 10 пикселей. Высота прямоугольника должна быть в пределах 54 пикселей.

Создадим новый слой Слой 8 и нарисуем прямоугольник как показано на рисунке.

Щелкнем правой кнопкой мыши внутри прямоугольника. Появится контекстное меню. Выберем пункт Образовать выделенную область и зальем выделение любым цветом.

Добавим к слою Слой 8 стили слоя с параметрами указанными на рисунке.

Рисунок будет выглядеть так.

С помощью инструмента Горизонтальный текст нарисуем ссылки на панеле и с помощью инструмента Кисть разделители между ссылками.

Создадим новый слой Слой 10 и перейдем к созданию блоков страницы. Для этого инструментом Прямоугольник со скругленными углами создадим контур блока размером примерно 280 пикселей в ширину и 180 пикселей в высоту.

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

Добавим к новому слою Слой 10 стили слоя с параметрами указанными на рисунке.

Теперь создадим эффект загиба одного из углов прямоугольника. Выберем инструмент Прямолинейное лассо и выделим уголок в правом верхнем углу.

Вырезаем угол Ctrl + X и затем и создаем для вырезанной области новый слой Ctrl + V.

Активируем слой с уголком и повернем его на 180° используя для этого Редактирование ⇒ Трансформирование ⇒Поворот на 180°.

Так как угол потерял все стили слоя, применим к нему стили, которые применялись к прямоугольнику. Для этого щелкнем правой кнопкой мыши по слою Слой 10 с прямоугольником. Появится контекстное меню. Выберем пункт Скопировать стиль слоя.

Далее активируем слой Слой 11 с треугольником, правой кнопкой мыши щелкнем по слою и в контекстном меню выберем пункт Вклеить стиль слоя.

С помощью инструмента Перемещение установим угол так, чтобы он встал на прямой край прямоугольника.

Объединим слои Слой 10 и Слой 11 нажав Ctrl + E. Получим новый слой Слой 11. Продублируем слой Слой 11 с блоком несколько раз и установим скопированные блоки примерно так, как показано на рисунке.

Под группой блоков, создадим еще два блока шириной примерно 425 пикселей и высотой 200 пикселей, применив к ним точно такие же стили слоя, которые применялись к маленьким блокам.

Теперь используя инструмент Горизонтальный текст сделаем надписи в блоках.

Для завершения макета нехватает нижнего колонтитула. Для его создания сделаем дубликат слоя с меню Слой 8 и перетянем его в самый низ макета.

Используя инструмент Горизонтальный текст, создадим соответствующие надписи.

Удалим направляющие Просмотр ⇒ Удалить направляющие.

В итоге у нас получился вот такой макет сайта. Можно установить на каждый блок иконки в соответствии с тематикой. Но я не стал этого делать, так как создание иконок — это тема отдельного урока или даже уроков.