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

В этом уроке подробно описано и показано как можно создать отличный макет сайта, подходящий для сайтов знакомств. Основной цвет сайта –красный, как известно символизирует любовь и страсть. Сердечки и звезды на макете создают романтическую обстановку.  При просмотре сайта остается впечатление таинственности и романтики.  Ну что ж приступим.

Создаем основную область макета.

Создаем новый документ размером 900*900 пикселей с прозрачным фоном.

Далее инструментом Заливка добавляем цвет основного фона # 9d0409.

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

Создание верхней панели навигации.

Далее создаем выделение для верхнего меню и заполняем его цветом  # 99080c.

Чтобы навигационная панель выглядела немного поромантичнее добавляем к ней  наложение градиента. Настройки для градиента вы можете увидеть на рисунке ниже.

Далее добавляем к слою Внешнее свечение.

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

Добавляем логотип в левый верхний угол.

Далее создаем прямоугольную область на новом слое, заливаем ее цветом # 7f1413. Затем добавляем нашему прямоугольнику наложение градиента, настройки для градиента можно увидеть на рисунке. Цвета для градиента используйте следующие # 8c0b0e и # c72e2a.

Далее добавим несколько украшений на основную область , для этого используйте инструмент Кисти. Можно использовать любые кисти которые есть у вас в наборе.  Для данного инструмента  предпочтительно использовать цвета  # 4d0404, # 8f0411, # ff0000 и # 710303. Убедитесь в том что используете для каждой кисти новый слой.

Теперь добавим свечение. Выберите слой с сердцем  и добавьте к  нему Внешнее свечение. Убедитесь в том что цвет свечения # 917841 и режим смешивания Линейный затемнитель.

Следующим шагом добавим немного  ярких деталей на наш макет для этого используйте кисти звезды. Для таких кистей используйте маленький размер цвет белый.

Добавьте и звездам стиль слоя внешнее свечение в режиме Линейный затемнитель. Цвет свечения должен быть  # ffd178.

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

Создаем панель опции поиска для сайта знакомств.

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

Следующим шагом добавляем внутри нашего меню прямоугольную форму и добавляем к ней стиль слоя Наложение градиента. Цвета для данного градиента установите следующие  от # 5c5c5c, до # 111111.

Далее добавляем текст в наше окно для поиска для этого используем инструмент Текст. Ниже под текстом создаем линию. Вы можете создать ее инструментом Линия из панели инструментов , толщиной в 2 пикселя , цвет # 121212 и непрозрачностью до 25%.

Теперь мы создадим некоторые опции в меню поиска для этого также используем инструмент Прямоугольник и Текст. Убедитесь что цвет текста # 7b7b7b. Создайте небольшой прямоугольник рядом с текстом . Далее добавьте прямоугольнику стиль слоя Наложение градиента Для настроек градиента используйте  цвета # 808080 и # FFFFFF. На прямоугольнике создаем стрелочку для этого используем инструмент Свободная фигура.

Теперь осталось добавить только кнопку  «Поиск». Для этого воспользуемся инструментом Прямоугольник со скругленными углами  и создадим фигуру.

К данной фигуре добавляем Наложение градиента цветом от # 000000  и до # 545454. Теперь наше окно поиска полностью готово.

 Как сделать окно показа слайдов.

Создадим окно для показа слайдов для этого инструментом Прямоугольник со скругленными углами создаем фигуру в центре нашей основной области.

Теперь добавляем к фигуре Наложение градиента как показано на картинке. Цвет градиента  крайний цвет # 000000 и средний должен быть # 96070b.

Теперь добавим изображения для слайда. Каждому изображению добавим Внешнее свечение и обводку . Цвет обводки для мужского пола # 8d120e и для женского # ff9e7b.
Прозрачность 100% размер 7 пикселей диапазон 2%.

Далее к каждой фотографии добавим окно выбора Чат и Знакомство и Подробнее. Инструментом текст сделайте надпись . добавьте иконки Чат и сердечко. Для кнопки Подробнее создайте прямоугольную область и добавьте к нему градиент. Цвета градиента должны совпадать  # 99080c и # ce4e3b. Инструментом Текст нанесите необходимы надписи в наш макет. Далее продублируйте данные кнопки и расставьте их по макету.

Давайте теперь добавим стрелки для навигации к этому окну. Создайте сначала круг. Заполните его цветом # f68833. Добавляем стрелки. Вы можете создать стрелки с помощью инструмента  Перо и залейте его черным цветом. Добавьте слою со стрелочкой стиль наложения Внешнее свечение цвет свечения сделайте # fda352. Продублируйте эту стрелочку на другую сторону и все окно показа слайдо готово!

Следующим шагом создайте еще одну прямоугольную область  и заполните его # 6e0403. Используем кисть сердечки  с вариантами цветов # 4d0404, # 8f0411, # ff0000 и # 710303. Далее добавим градиент на наш прямоугольник . Настройки для градиента вы можете увидеть на картинке ниже. Цвета для градиента – левый цвет # fab49b, средний # bb191e и правый  # f37032. Измените  непрозрачность слоя до 90%.

Добавьте изображение в правую сторону фигуры.

Далее добавим текст . Для  заголовка текста используем цвет # b72a03. Основной текст  # ecebeb. Добавьте тексту внешнее свечение цвет  # fbfbc4. Режим наложения должен быть Линейный затемнитель. Внизу текста добавьте кнопку «Подробнее», можете скопировать ее из окна сверху, только залейте ее  цветом потемнее # 691f1c.

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

Вот приведен окончательный вариант макета , надеюсь урок  будет многим полезен.

Источник.