Сделать стартовой  |  Добавить в избранное  |  RSS 2.0
О нас  |  Статистика  |  Обратная связь
Поиск по сайту: Расширенный поиск по сайту
Регистрация на сайте
Забыли пароль?

Навигация

Календарь
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 



» Яркий web-дизайн
8-06-2013, 00:05 | Уроки Photoshop » Графика для сайта | автор: Natali | Просмотров: 1108
Конечный результат:

Яркий web-дизайн

1. Создайте новый документ размером 800х800 пикселей с белым фоном. Инструментом Прямоугольник (Rectangle Tool) создайте фигуру в верхней части холста на всю его ширину и перейдите в меню Стилей слоя (Layer Style - Blending Options), настройте так:

Наложение градиента (Режим – Нормальный, Стиль – Линейный):

Яркий web-дизайн

Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):

Яркий web-дизайн

Яркий web-дизайн

2. Тем же инструментом создайте ещё один прямоугольник под предыдущим и примените к нему эти стили слоя:

Наложение градиента (Режим – Нормальный, Стиль – Линейный):

Яркий web-дизайн

Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):

Яркий web-дизайн

Яркий web-дизайн

3. Скопируйте синий прямоугольник и поместите его в нижнюю часть холста:

Яркий web-дизайн

4. Инструментом Горизонтальный текст (Horizontal Type Tool) напишите разделы меню цветом #88763d, а также заголовок сайта и слоган белым цветом. 

Яркий web-дизайн

5. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте фигуру, как показано ниже. Потом установите Непрозрачность слоя -60%. 

Яркий web-дизайн

6. Примените к нему следующие стили слоя:

Отбрасывание тени (Режим – Умножение):

Яркий web-дизайн

Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):

Яркий web-дизайн

7. Добавьте ещё несколько навигационных ссылок с иконками. 

Яркий web-дизайн

8. Найдите какое-нибудь изображение, подходящее теме вашего сайта и вставьте его, как показано ниже:

Яркий web-дизайн

9. Создайте регистрационную область:

Яркий web-дизайн

10. Разделите оставшуюся область на 3 части:

Яркий web-дизайн

11. Заполните эти области контентом:

Яркий web-дизайн

12. К каждой части контента я хочу добавить кнопки. Для этого нужно создать прямоугольник и применить к нему такие стили слоя:

Зелёная кнопка:

Наложение цвета (Режим – Нормальный):

Яркий web-дизайн

Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):

Яркий web-дизайн

Синяя кнопка:

Наложение цвета (Режим – Нормальный):

Яркий web-дизайн

Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):

Яркий web-дизайн

Яркий web-дизайн

13. Осталось только заполнить область футера нужной информацией:

Яркий web-дизайн

Финальный результат:

Яркий web-дизайн
 
| Комментарии (0) | Распечатать
 
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Другие новости по теме:

  • Светлый дизайн бизнес сайта
  • 3D текст в стиле Super Mario
  • Создай акварельный дизайн для сайта в Фотошоп
  • Открытка со снежинками в Фотошоп
  • Создаём дизайн летнего флаера в Фотошоп
  • 577: Яркий web-дизайн8 июня 2013: Яркий web-дизайн!
    Яркий web-дизайн.
    Яркий web-дизайн
     

    Популярные
    статьи


    Опрос

    Лучший из новостных
    Неплохой движок
    Устраивает ... но ...
    Встречал и получше
    Совсем не понравился




    Главная страница  |  Регистрация  |  Добавить новость  |  Новое на сайте  |  Статистика  |  Обратная связь
    Яндекс.Метрика