Создаем макет сайта о звездах и знаменитостях.

Tags: дизайн сайта | Уроки Photoshop | уроки веб дизайна

41-1

 

 

При помощи этого урока вы сможете создать макет сайта, который сможет использоваться в дальнейшем  для веб-сайта о звездах, и шоу-бизнесе. Это яркий, стильный макет , на изготовление которого потребуется не так много времени и сил, но  не оставит равнодушным ни одного посетителя.


Создайте новый документ 1200*1500 пикселей.

41-2


Создайте новую группу слоев , назовите их «Заголовок» или что-то в этом роде. Создайте при помощи инструмента Прямоугольное выделение  область, размером примерно 1000*110 пикселей. Это будет фон Заголовка , используя инструмент Заливка , залейте на новом слое выделенную область. Добавьте новому слою следующие стили, как показано на рисунке ниже:

41-3

41-4


Добавьте в верхнюю часть логотип.

41-5

Далее создадим окно поиска , для этого инструментом Прямоугольник со скругленными углами , радиусом 10 пикселей создадим область, как показано на рисунке ниже. Добавим на область иконку поиска и текст.

41-6

Применим к кнопке «Поиск» следующие стили:

41-7

41-8

41-9

41-10

Далее создайте новую группу слоев и назовите его «Меню». Инструментом Прямоугольник со скругленными углами и радиусом 4 пикселя создайте прямоугольную форму по всей ширине макета.

41-11

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

41-12

Далее нанесем текст на меню навигации. Добавим в тексте белые тени, шириной в 1 пискель.

41-13

41-14

Следующим шагом создайте прямоугольную форму, при помощи инструмента Прямоугольник. Далее перейдите в меню Редактирование – Трансформация –Перспектива. Трансформируйте прямоугольник, добавьте ему такой же тип градиента как и для кнопки поиска.

41-15

Применяя тот же метод создайте еще один небольшой прямоугольник и добавьте к нему градиент:

41-15

41-17

Используя инструмент Перемещение разместите прямоугольник, как показано на рисунке ниже:

41-18


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

41-19

41-20

41-21

Теперь воспользуйтесь ссылкой для добавления значка Твиттер  http://www.iconfinder.com/, затем добавьте значок в наш макет  и добавьте ему три стиля слоя: внутренняя тень, тень и наложение цвета. Выполните настройки, указанные ниже:

41-22

41-23

41-24

41-25

Вот что должно у вас получиться:

41-26

Следующий шаг – создаем окно контента.
Наш сайт будет включать в себя две колонки , которые будут отображать новости, интервью и галерею фотографий.
Создаем прямоугольник со скругленными углами (510*350 пикселей) и радиусом округления 10 пикселей , темно красного цвета # 860609.

41-27

Далее добавим в наш прямоугольник картинку. Для того, чтобы придать изображению округленные углы нажмите на эскизе прямоугольник, затем перейдите на слой с изображением. Перейдите в меню Выделение – Инверсия  и удалите ненужные области.

41-28

Скопируйте красный прямоугольник , а затем трансформируя уменьшите его на 20%. Добавьте наложение градиента на это прямоугольник.

41-29

Заполните текстом нижнюю часть прямоугольника в нашем случае это будет название и краткое описание новости, опубликованной на сайте.

41-30


Создайте новую группу слоев. Используя Прямоугольник со скругленными углами создайте форму  размером 100*100 пикселей.

41-31

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

41-32

Добавьте изображение на созданную область.

41-33

В завершении работы над этим объектом – нанесите текст  - название и описание.

41-34

Скопируйте несколько раз этот блок , чтобы получилась у нас новостная группа, расположенная в двух колонках.

41-35

Далее создаем следующий элемент – заголовок списка новостей.
Заголовок списка новостей должен  быть ровно под предыдущим блоком. Поэтому создаем новый  прямоугольник  с закругленными углами  510*40 пикселей. Цвет  тот же , что использовался раннее.

41-36

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

41-37

41-38

Далее наносим текст, добавляем к нему стиль:

41-39

41-40

Скопируйте красный прямоугольник, на копии залейте его желтым цветом  # ee931a. Используя маску слоя и Полигональное лассо для того, чтобы заместить половину прямоугольника желтым цветом.

41-41

Для того чтобы создать тени используйте новый слой , на котором примените градиент от черного к прозрачному и расположение как показано на рисунке ниже. Измените режим наложения на Перекрытие и уменьшите прозрачность до 50%. Нанесите текст на эту область.

41-42

Используйте инструмент Текст для нанесения ссылок под заголовком.

41-43


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

41-44

Создаем подвал сайта.

Для подвала создайте прямоугольную форму  с закругленными углами 980*80 пикселей.

41-45

При помощи инструмента Текст добавьте в прямоугольник  самые важные ссылки на вашем веб-сайте, знак копирайта, контакты.

41-46

Продублируйте логотип с верхней части и разместите копию в нижней правой части макета.

41-47

41-48

Добавим иконки Twitter, Facebook и / или RSS.

41-50

Вот и закончен наш макет.

41-51

Думаю этот урок может пригодится как начинающим веб-дизайнерам, так и людям, которые давно работают в этой области. Новые пособия всегда наводят на новые мысли, идеи и реализацию ваших задумок.
Если вам понравился урок и он был вам полезен не забывайте подписываться на ленту RSS.

Источник.

AddThis Social Bookmark Button