0 Пользователей и 1 Гость просматривают эту тему.

*

Оффлайн LIETOАвтор темы

  • Я крутой
  • ***
  • 25
  • +4/-1
  • Я крутой!!!
Мы создадим дизайн домашней страницы. В этом уроке мы используем бесплатный шаблон и бесплатную иллюстрацию с 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

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

P.S. устал два раза ошибся место кнопки Предварительный просмотр нажал сохранить!?
Все сегодня хватит завтра еще что то добавлю
« Последнее редактирование: 24 Ноябрь 2008, 21:31:01 от LIETO »
Незабываем про +