Создание дизайна веб-сайта с нуля
Мы создадим дизайн домашней страницы. В этом уроке мы используем бесплатный шаблон и бесплатную иллюстрацию с Templates.com
Как видите, это очень симпатичный дизайн, с яркими цветами и не перегруженный элементами. Одна из главных черт дизайна – это то, что он являет собой переплетенную с одной стороны книгу. Готовы? Давайте начнем!
Приблизительное время выполнения: 20 минут
Шаг 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
Теперь переместите иллюстрацию на две тени – но соблюдайте порядок слоев. Тени должны быть под первоначальным слоем с иллюстрацией.
Вуаля! Вот и все – при помощи нашего урока дизайн веб-сайта готов!
Источник: Creating a Website Design From Scratch
