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

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

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

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

Создание макета сайта

Создание макета сайта

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

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

Параметры нового документа

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

Параметры вертикальной направляющей Параметры вертикальной направляющей

Таким образом, общая ширина макета сайта составит 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 и перетянем его в самый низ макета.

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

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

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

Макет сайта