Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Дизайн веб-сайта


Дизайн веб-сайта

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

Шаг 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

 

 

Дизайн веб-сайта

 

 

Дизайн веб-сайта

 

Шаг 15

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

 

 

Дизайн веб-сайта

 

Шаг 16

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

 

 

Дизайн веб-сайта

 

Шаг 17

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

 

 

Дизайн веб-сайта

 

Шаг 18

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

 

 

Дизайн веб-сайта

 

Шаг 19

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

 

 

Дизайн веб-сайта

 

 



Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.