Beauty – ретушь для начинающих при помощи Photoshop.

Beauty – ретушь для начинающих при помощи Photoshop.

Эффект голограммы на фотографии.

Эффект голограммы на фотографии.

Создание портрета при помощи шрифтов.

Создание портрета при помощи шрифтов.

Создаем красивую оригинальную шапку для блога.

Создаем красивую оригинальную шапку для блога.

Необычный эффект глаз при помощи Photoshop.

Необычный эффект глаз при помощи Photoshop.

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

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

Создание текстового логотипа в стиле Ретро при помощи фотошоп.

Создание текстового логотипа в стиле Ретро при помощи фотошоп.

Урок ретуши фото. Создаем потрясающий портрет в Photoshop.

Урок ретуши фото. Создаем потрясающий портрет в Photoshop.

Урок по созданию летнего водного макета сайта в Photoshop.

Урок по созданию летнего водного макета сайта в Photoshop.

Урок по созданию футуристического логотипа в фотошоп.

Урок по созданию футуристического логотипа в фотошоп.

Создаем дизайн телефона на Android в Photoshop.

Создаем дизайн телефона на Android в Photoshop.

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

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

Как создать пиксельную кнопку в фотошопе

Как создать пиксельную кнопку в фотошопе

Создаем макет сайта для службы знакомств.

Создаем макет сайта для службы знакомств.

Создание RSS иконки.

Создание RSS иконки.

Урок по созданию простого  и современного  макета для сайта.

Урок по созданию простого и современного макета для сайта.

Графика для сайта.  Рисуем иконку на сайт.

Графика для сайта. Рисуем иконку на сайт.

Урок по созданию зимнего текста.

Урок по созданию зимнего текста.

Урок по созданию красивого новогоднего макета в фотошоп.

Урок по созданию красивого новогоднего макета в фотошоп.

Псевдо HDR.

Псевдо HDR.

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

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

Создание эффекта рисунка на фотографии.

Создание эффекта рисунка на фотографии.

Создаем макет сайта, продающий програмное обеспечение.

Создаем макет сайта, продающий програмное обеспечение.

Урок по созданию макета сайта-портфолио при помощи текстуры "джинс".

Урок по созданию макета сайта-портфолио при помощи текстуры "джинс".

Урок по созданию макета сайта для гостиниц и ресторанов.

Урок по созданию макета сайта для гостиниц и ресторанов.

Создаем креативный макет для продажи косметических средств с помошью Photoshop.

Создаем креативный макет для продажи косметических средств с помошью Photoshop.

Урок по созданию фотореалистичного макета сайта для его дальнейшей верстки CSS/XTML.

Урок по созданию фотореалистичного макета сайта для его дальнейшей верстки CSS/XTML.

Урок по созданию яркого красочного дизайна сайта.

Урок по созданию яркого красочного дизайна сайта.

Создание простого и стильного макета сайта.

Создание простого и стильного макета сайта.

Создаем макет блога в фотошоп.

Создаем макет блога в фотошоп.

Создаем оригинальный чистый стиль для сайта.

Создаем оригинальный чистый стиль для сайта.

Создаем профессиональную панель навигации для сайта.

Создаем профессиональную панель навигации для сайта.

Рисуем милую девчушку-смайл.

Рисуем милую девчушку-смайл.

Урок по рисованию прохлаждающегося солнца.

Урок по рисованию прохлаждающегося солнца.

Фантастический эффект фотографии.

Фантастический эффект фотографии.

Создание приятного макета сайта портфолио.

Создание приятного макета сайта портфолио.

Создание макета сайта для портфолио в стиле Веб 2.0

Создание макета сайта для портфолио в стиле Веб 2.0

Урок по созданию стильного рекламного банера с помошью Photoshop.

Урок по созданию стильного рекламного банера с помошью Photoshop.

Урок по созданию профессионального бизнес-шаблона сайта с помощью фотошоп.

Урок по созданию профессионального бизнес-шаблона сайта с помощью фотошоп.

Урок рисования реалистичного динамика.

Урок рисования реалистичного динамика.

Создаем стильный коллаж.

Создаем стильный коллаж.

Урок по созданию макета дизайна сайта в стиле Веб 2.0

Урок по созданию макета дизайна сайта в стиле Веб 2.0

Урок создание эффекта металлического текста

Урок создание эффекта металлического текста

Небесный коллаж

Небесный коллаж

Создаем макет сайта для службы знакомств.

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

32-1

 

 

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

 

 

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

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

 

32-2


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

32-3


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

32-4

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


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

32-5


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

32-6


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

32-7


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

32-8


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

32-9


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

32-10


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


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

32-12


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

32-13


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

32-14


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

32-15

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


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

32-16


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

32-17

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

32-19


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

32-20


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

32-21


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

32-22

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


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

32-23


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

32-24


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

32-25


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

32-26


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

32-27


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

32-28


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

32-29


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

32-30


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

32-31


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

32-1

 

Источник.

AddThis Social Bookmark Button
 

Добавить комментарий


Защитный код
Обновить

поиск
RSS
Интересная подборка креативных вещей.

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

кол-во просмотров9294
Подробнее...

Стили сайтов. Стиль Веб 2.0

       Стиль Веб 2.0 многогранен и разнообразен. Существует множество статей на тему "как нарисовать дизайн в стиле Веб 2.0", но...

кол-во просмотров11355
Подробнее...

Играем в "Песочнице" Google.

  Само понятие "песочница" появилось совсем недавно (2004г.), но это понятие уже стало хорошо известно многим оптимизаторам, задачей которых является продвижение...

кол-во просмотров7137
Подробнее...

Что такое релевантная страница?

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

кол-во просмотров14887
Подробнее...

Стили сайтов. Американский бизнес стиль.

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

кол-во просмотров12580
Подробнее...