Реклама на сайте

вход на сайт

Имя пользователя :
Пароль :

Восстановление пароля Регистрация
Рисуем яркий и насыщеный дизайн для сайта
Рисуем яркий и насыщеный дизайн для сайта


Шаг 1
Создайте новый документ (Ctrl+N) 1200х750 px. Выберите Gradient Tool (G) и примените линейный градиент сверху вниз от #792700 к #000000.

Рисуем яркий и насыщеный дизайн для сайта



Шаг 2
Создайте новый слой, выберите Brush Tool (В), установите мягкую кисть диаметром 300 px и добавьте цвета на ваш макет. Автор использовал красный, оранжевый и голубой. Назовите слой "color".

Рисуем яркий и насыщеный дизайн для сайта



Шаг 3
Откройте изображение с листьями и вставьте его в ваш документ. Кликните правой кнопкой мыши на слое и выберите Convert to Smart Object. Затем Filter > Artistic > Film Grain, установите параметры, указанные на картинке ниже. Далее Filter > Pixelate > Mosaic. Измените режим наложения слоя на Difference, уменьшите opacity до 30% и переименуйте слой в "texture".

Рисуем яркий и насыщеный дизайн для сайта

Рисуем яркий и насыщеный дизайн для сайта



Шаг 4
Создайте новый слой, выберите Rounded Rectangle Tool (U), установите радиус 3 рх и нарисуйте черный прямоугольник с круглыми углами. Дважды кликните на слое и примените параметры для Drop Shadow, указанные ниже. Уменьшите opacity слоя до 70% и назовите его "black shape".

Рисуем яркий и насыщеный дизайн для сайта

Рисуем яркий и насыщеный дизайн для сайта



Шаг 5
Выберите все слои и сгруппируйте их. Назовите группу "background".

Рисуем яркий и насыщеный дизайн для сайта



Шаг 6
Создайте новую группу и назовите ее "home". Создайте еще одну группу внутри "home" и назовите ее "logo".

Рисуем яркий и насыщеный дизайн для сайта



Шаг 7
Создайте слой в группе "logo". Выберите Type Tool (T) и напишите логотип сайта (цвет #f4f4f4). Дважды кликните на слое и примените параметры, указанные ниже. Создайте новый слой и добавьте теглайн (цвет #eeeeee).

Рисуем яркий и насыщеный дизайн для сайта

Рисуем яркий и насыщеный дизайн для сайта



Шаг 8
Создайте нову группу, назовите ее "Sign up | Login". Выберите Rounded Rectangle Tool (U) и нарисуйте прямоугольник как на картинке. Дважды щелкните на слое и примените параметры, указанные ниже. Установите белый цвет foreground и с помощью Type Tool (T) напишите на кнопке "Sign up | Login". Уменьшите opacity текстового слоя до 75%.

Рисуем яркий и насыщеный дизайн для сайта

Рисуем яркий и насыщеный дизайн для сайта



Шаг 9
Создайте новую группу "Navigation". Добавьте новый слой, выберите Single Row Marquee Tool и создайте выделение высотой 1 px. Залейте выделение #406f94 цветом и удалите области, находящиеся вне черного прямоугольника, используя Rectangular Marquee Tool (M). Уменьшите opacity слоя до 40% и назовите его "Line".

Рисуем яркий и насыщеный дизайн для сайта



Шаг 10
Создайте новый слой. С помощью Rectangular Marquee Tool (M) создайте выделение как у автора (заметка: можете использовать направляющие для точности). Возьмите Gradient Tool (G) и примените градиент снизу вврех от #35423e к прозрачному. Снимите выделение. Затем Filter > Noise > Add Noise и установите параметры, указанные на картинке. Назовите этот слой "gradient" и установите расстояние между линией и градиентом в 1 px.

Рисуем яркий и насыщеный дизайн для сайта

Рисуем яркий и насыщеный дизайн для сайта



Шаг 11
Выберите Type Tool (T) и напишите названия страниц на навигационной панели. Дважды щелкните на текстовом слое и примените параметры, указанные ниже. Автор использовал шрифт Greyscale Basic.

Рисуем яркий и насыщеный дизайн для сайта



Шаг 12
Чоздайте новый слой, выберите Single Column Marquee Tool и щелкните один раз на макете. Затем выберите Rectangular Marquee Tool (M), кликните на кнопке "Intersect with selection" на панели опций и создайте выделение как на картинке. Залейте выделение белым, снимите выделение.

Рисуем яркий и насыщеный дизайн для сайта

Рисуем яркий и насыщеный дизайн для сайта



Шаг 13
Дважды щелкните на слое, созданном в предыдущем шаге, установите параметры, указанные ниже. Назовите слой "line 1".

Рисуем яркий и насыщеный дизайн для сайта



Шаг 14
Продублируйте слой "line 1" и назовите копию "line 2". Выберите Move Tool (V) и нажмите один раз на правую стрелку на клавиатуре, чтобы сдвинуть линию на 1 рх вправо. Дважды кликните на слое, примените параметры, указанные ниже.

Рисуем яркий и насыщеный дизайн для сайта



Шаг 15
Выделите слои "line 1" и "line 2", кликните на них правой кнопкой мыши и выберите Convert to Smart Object. Назовите объект "separator".

Рисуем яркий и насыщеный дизайн для сайта



Шаг 16
Создайте новый слой под "separator". Выберите Rectangular Marquee Tool (M), создайте выделение как на картинке, залейте его #35423e цветом. Кликните правой кнопкой мыши на слое и выберите Convert to Smart Object. Затем Filter > Blur > Gaussian Blur, Filter > Noise > Add Noise (для обоих фильтров установите параметры, указанные ниже). Установите opacity слоя 60% и назовите его "highlight".

Рисуем яркий и насыщеный дизайн для сайта

Рисуем яркий и насыщеный дизайн для сайта

Рисуем яркий и насыщеный дизайн для сайта



Шаг 17
Выберите слой "separator", затем Layer > Layer Mask > Reveal All. Выберите Gradient Tool (G) и примените градиент снизу к середине от черного к прозрачному.

Рисуем яркий и насыщеный дизайн для сайта



Шаг 18
Выделите слои "separator" и "highlight". Выберите Move Tool (V), удерживая клавиши Alt и Shift, кликните в документе и потяните мышку. Теперь у вас есть копии выделенных слоев. С помощью Move Tool (V) сдвиньте слои вправо. Повторите этот шаг и создайте столько разделителей, сколько нужно.

Рисуем яркий и насыщеный дизайн для сайта



Шаг 19
Выберите все слои "separator" и "highlight" и сгруппируйте их. Назовите группу "separators".

Рисуем яркий и насыщеный дизайн для сайта



Шаг 20
Выберите Rectangle Tool (U) и создайте прямоугольник. Поместите слой под всеми слоями с названиями страниц. Дважды кликните на слое и установите следующие параметры для Gradient Overlay. Назовите слой "active menu", установите opacity 50%.

Рисуем яркий и насыщеный дизайн для сайта



Шаг 21
Создайте новую группу, назовите ее "search" и расположите ее под группой "navigation". Выберите Rounded Rectangle Tool (U), установите радиус 3 рх и создайте прямоугольник, как показано ниже (используйте #104f59 цвет). Назовите этот слой "text field" и установите opacity 80%.

Рисуем яркий и насыщеный дизайн для сайта



Шаг 22
Выберите Rectangle Tool (U) и создайте прямоугольник. Поместите его справа на панели поиска. Дважды щелкните на слое и установите параметры, указанные ниже. Кликните правой кнопкой мыши на слое и выберите Create Clipping Mask.

Рисуем яркий и насыщеный дизайн для сайта



Шаг 23
Выберите Type Tool (T) и напишите "search" белым цветом. Установите opacity слоя 75%.

Рисуем яркий и насыщеный дизайн для сайта



Шаг 24
Выберите Line Tool (U) и нарисуйте вертикальную линию (используйте цвет #123036). Назовите слой "line", расположите его под слоем "button" и с помощью Move Tool (V) разместите его между панелью поиска и кнопкой.

Рисуем яркий и насыщеный дизайн для сайта



Шаг 25
Создайте новую группу и назовите ее "Showcase". Создайте еще одну группу внутри этой группы и назовите ее "background". Выберите Rectangle Tool (U) и создайте прямоугольник (используйте цвет #219aad). У автора ширина прямоугольника 983 рх, высота 273 рх. Установите opacity слоя 55% и назовите его "bg4".

Рисуем яркий и насыщеный дизайн для сайта



Шаг 26
Откройте изображение с пиксельным голубым прямоугольником, вставьте его в документ и расположите его над слоем "bg4". Установите opacity 55%, назовите слой "bg3".

Рисуем яркий и насыщеный дизайн для сайта



Шаг 27
Удерживая Ctrl, кликните на маске слоя "bg4", затем создайте новый слой, выберите Gradient Tool (G) и примените градиент снизу вверх от #56b8e5 к прозрачному. Снимите выделение.

Рисуем яркий и насыщеный дизайн для сайта



Шаг 28
Создайте новый слой, выберите Rectangular Marquee Tool (M) и создайте выделение. Возьмите Gradient Tool (G) и примените градиент снизу вверх от #0f2b42 к #2a607f. Снимите выделение и назовите слой "bg1".

Рисуем яркий и насыщеный дизайн для сайта



Шаг 29
Создайте группу "sign up button". Выберите Rounded Rectangle Tool (U), установите радиус 2 рх и нарисуйте прямоугольник. Дважды кликните на слое и примените параметры, указанные ниже. Выберите Type Tool (T) и напишите "sign up"белым цветом.

Рисуем яркий и насыщеный дизайн для сайта

Рисуем яркий и насыщеный дизайн для сайта



Шаг 30
Повторите предыдущий шаг и создайте другую кнопку, но теперь напишите на кнопке "learn more". Создайте новый слой, выберите Custom Shape Tool (U) и нарисуйте белую стрелку.

Рисуем яркий и насыщеный дизайн для сайта



Шаг 31
Создайте группу "left arrow". Выберите Ellipse Tool (U) и создайте окружность цвета #406f94. Дважды кликните на слое и установите указанные параметры.

Рисуем яркий и насыщеный дизайн для сайта



Шаг 32
Создайте новый слой, выберите Custom Shape Tool (U) и нарисуйте белую стрелку. Дважды кликните на слое, установите указанные параметры. Установите opacity слоя 50%.

Рисуем яркий и насыщеный дизайн для сайта



Шаг 33
Повторите предыдущий шаг и создайте вторую стрелку на правой стороне голубого прямоугольника.

Рисуем яркий и насыщеный дизайн для сайта



Шаг 34
Создайте новую группу "image". Вставьте небольшое изображение в эту группу и назовите слой "image". Дважды кликните на слое и установите указанные параметры.

Рисуем яркий и насыщеный дизайн для сайта



Шаг 35
Далее Layer > Layer Style > Create Layer, затем Layer > Layer Mask > Reveal All. Выберите Gradient Tool (G) и примените градиент от низа картинки к середине от черного к прозрачному. Назовите слой "shadow".

Рисуем яркий и насыщеный дизайн для сайта



Шаг 36
Создайте новую группу, выберите Type Tool (T) и добавьте текст. Назовите слой "text".

Рисуем яркий и насыщеный дизайн для сайта



Шаг 37
Создайте группу "content". Создайте еще одну группу в этой группе и назовите ее "shadows". Выберите Rectangle Tool (U) и нарисуйте прямоугольник белого цвета. Назовите слой "white shape" и установите opacity 90%.

Рисуем яркий и насыщеный дизайн для сайта



Шаг 38
Удерживая Ctrl, кликните на маске слоя "white shape". Создайте новый слой, выберите Gradient Tool (G) и примените градиент от #8f8f8f к прозрачному. Установите opacity 50% и назовите слой "top shadow". Выберите Move Tool (V) и дважды нажмите на стрелку "вниз".

Рисуем яркий и насыщеный дизайн для сайта



Шаг 39
Создайте новый слой. С помощью Rectangular Marquee Tool (M) создайте выделение. Затем используя Gradient Tool (G), примените градиент от #8f8f8f к прозрачному. Добавьте маску и с помощью большой черной кисти замаскируйте центр тени. Установите opacity 30% и назовите слой "vertical shadow 1". Продублируйте слой, назовите его "vertical shadow 2" и сдвиньте вправо.

Рисуем яркий и насыщеный дизайн для сайта

Рисуем яркий и насыщеный дизайн для сайта



Шаг 40
Выберите Line Tool (U) и создайте горизонтальную линию шириной 1 рх (используйте цвет #aebcc7). Назовите слой "line".

Рисуем яркий и насыщеный дизайн для сайта



Шаг 41
Выберите Type Tool (T) и добавьте содержание. Вы также можете использовать изображения.

Рисуем яркий и насыщеный дизайн для сайта



Шаг 42
Создайте группу "footer". Создайте новый слой внутри группы, выберите Rectangular Marquee Tool (M) и создайте выделение. Установите цвет foreground #555555, возьмите большую мягкую кисть и рисуйте ей на верхнем краю выделения. Установите opacity слоя 50% и назовите его "gradient".

Рисуем яркий и насыщеный дизайн для сайта



Шаг 43
Создайте новый слой, выберите Single Row Marquee Tool и кликните в документе. Залейте выделение белым, снимите выделение. Затем Layer > Layer Mask > Reveal All, возьмите большую мягкую черную кисть и рисуйте на маске. Установите opacity 15% и назовите слой "line".

Рисуем яркий и насыщеный дизайн для сайта



Шаг 44
Выберите Type Tool (T) и добавьте текст на колонтитул.

Рисуем яркий и насыщеный дизайн для сайта



Рисуем яркий и насыщеный дизайн для сайта



Автор:Ciursă Ionuţ
Перевод:Trinity_

Теги:
 (голосов: 0)
Новость опубликована 16-02-2011, 05:36, её прочитали 573 раз(а).
Понравилась тема? Посмотрите эти:
Комментарий #2 написал: booblervokzal (16 января 2012 15:46)
Публикаций: 0, комментариев: 11, группа: Посетители
Фото
Комментарий #4 написал: booblervokzal (19 января 2012 12:43)
Публикаций: 0, комментариев: 11, группа: Посетители
Фото
Комментарий #5 написал: franacol1988 (30 апреля 2012 04:24)
Публикаций: 0, комментариев: 1, группа: Посетители
Фото
Вот xbox 360 скачать sports kinect и подружка для Агилеры.torrent 1 6 1 Сейчас там одни руины!Вследствие плохой экологии средняя продолжительность жизни человека рулонные шторы купить киев там 45 лет!
Комментарий #8 написал: HelloBullet (14 января 2013 15:31)
Публикаций: 0, комментариев: 1, группа: Посетители
Фото
Комментарий #9 написал: umexyrasy (22 марта 2016 17:40)
Публикаций: 0, комментариев: 1, группа: Посетители
Фото
Poker Turniere 2015 Poker Tipps Deutsch
Написать комментарий
Ваше Имя:


Ваш E-Mail:



Код:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Введите код: