Создание дизайна веб-сайта с нуля

Мы создадим дизайн домашней страницы.

Как видите, это очень симпатичный дизайн, с яркими цветами и не перегруженный элементами. Одна из главных черт дизайна – это то, что он являет собой переплетенную с одной стороны книгу. Готовы? Давайте начнем!

Шаг 1

Создайте в Photoshop новый документ с белым фоном. Для этого зайдите в File => New или нажмите “Ctrl+N”.

Шаг 2

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

Шаг 3

Создайте серый градиент с помощью Gradient tool и непрозрачностью 13% - теперь верхняя часть сайта слегка темнее.

Шаг 4

Затем мы нарисуем желтый эллипс и, наложив на него маску, мы поместим нужную секцию этого эллипса в прямоугольник.

Шаг 5

Примените подходящий стиль к слою с эллипсом: простой Stroke размером 3 пикселя и такой Outer Glow:

Шаг 6

Далее мы создадим меню. Создайте кнопки меню, нарисовав прямоугольник с закругленными углами и стерев некоторые его участки  (инструмент select и затем клавиша DEL). Не забудьте для этого растеризовать слои.

Шаг 7

Продублируйте слои с кнопками столько раз, сколько вы хотите кнопок. Затем расположите вертикальную панель подобным образом - прямоугольник с закругленными углами с удаленной левой стороной. Меню почти готово.

Шаг 8

Затем добавьте к кнопкам надписи и маркеры справа (это просто прямоугольники с небольшим outer glow).

Шаг 9

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

Шаг 10

Теперь нарисуйте места переплета для книги. Линия с двумя кружочками будет над кнопками меню и будет как бы зашнуровывать ваш шаблон наподобие электронной книги. Отверстия для шнуровки простые – просто кружочек (ellipse shape tool) плюс inner shadow.

Шаг 11

Теперь сам шнурок. Он рисуется при помощи эллипса и отрезания лишнего (при помощи маски), оставляя только нужный изгиб.

Затем измените цвет и разместите его на месте, между двумя отверстиями.

Шаг 12

Добавьте текст в заголовок и внизу страницы (и логотип, если хотите). Это все делается при помощи Text tool.

Шаг 13

Теперь нужно встроить иллюстрацию. Откройте скачанный файл в формате PSD и выберите группу слоев номер 7 (это группа в файле, который мы использовали в примере – группа слоев, содержащих здание).

Шаг 14

Перетащите слой на нарисованный вами дизайн и произведите слияние слоев в одну группу – так вам будет удобнее с ними работать. Выделите группу и нажмите Ctrl+E.

Шаг 15

Но подождите – работа ещё не окончена. Нам ещё понадобится добавить небольшую тень к зданию, так оно будет выглядеть более реалистично. Продублируйте слой с иллюстрацией дважды, выберите один из слоев и поставьте их Hue и Saturation на 100 (эти настройки вы найдете в опции “Adjustments of Layer”). Этот слой будет содержать тень для здания.

Шаг 16

Затем выберите верхнюю часть слоя и удалите её

Шаг 17

Примените “Gaussian Blur” (размером 1.7 пикселей) и измените layer fill на 33% - теперь действительно похоже на тень.

Шаг 18

Примените те же шаги ко второму слою, за исключением вырезания верхней части. Этот слой должен быть полностью затенен. Поставьте его непрозрачность на 22%. Это будет вторая тень. Вы также должны трансформировать и исказить вторую тень немного для того, чтобы она выглядела более реалистичной.

Шаг 19

Теперь переместите иллюстрацию на две тени –  но соблюдайте порядок слоев. Тени должны быть под первоначальным слоем с иллюстрацией.

Вуаля! Вот и все – при помощи нашего урока дизайн веб-сайта готов!