С помощью наших фото и видеоуроков по фотошопу вы станите уверенным пользователем программы Adobe Photoshop, научитесь делать различные эффекты в фотошопе. Так же на сайте вы найдете дополнения для фотошопа.
» » » Создание дизайна сайта знакомств в Фотошопе

Создание дизайна сайта знакомств в Фотошопе

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

 

Каждая составляющая этого макета может быть использована для всех типов скриптов (движков) посвященных сайтам знакомств (информационный бюллетень, поисковая система, и т.д.).



Ресурсы для работы

 

Я приобрёл лицензии на изображения отображаемые в карусели на сайте Fotolia.com. Это означает, что вы не имеете право их использовать (в архиве этих изображений нет). Вы с вашей стороны можете также приобрести эти или другие изображения по своему вкусу на сайте Fotolia.com.

 

Прежде чем приступить к уроку, посмотрите  ниже на конечный результат нашей работы. Вы также можете бесплатно скачать пакет иконок на этой странице.

 

Создание дизайна сайта знакомств в Фотошопе

 

Теперь мы можем приступить к созданию шаблона.

 

Шаг 1: Создание нового документа

 


Откройте программу Adobe Photoshop и перейдите в меню Файл> Новый (File>New) и введите имя, ширину и высоту для вашего документа. Для подтверждения нажмите кнопку ОК.

 

Создание дизайна сайта знакомств в Фотошопе

 

Ваш документ отобразится на экране. Если вы не видите панель слоёв на экране, то перейдите  в меню Окно> Слои (Window> Layers).

 

Создание дизайна сайта знакомств в Фотошопе

 

Установите направляющую линию на отметке в 10 пикселей и в 20 пикселей от верхней границы изображения. Используйте инструмент Прямоугольная выделенная область (Rectangular Marquee Tool (M)), чтобы создать выделение с размером 1000 на 10 пикселей. Создайте новую группу и назовите ее «лозунг» (для создания группы перейдите в меню Слои> Новый> Группа (Layer> New> Group)). Затем создайте новый слой в этой группе и назовите его BG (чтобы создать новый слой, перейдите в меню Слои> Новый> Слой (Layer> New> Layer)). Заполните выделение цветом # a40000 с помощью инструмента Заливка (Paint Bucket Tool (G)).

 

Создайте выделение справа выше группы, размером в 20 пикселей и залейте выделение  цветом # 850000.

 

Создание дизайна сайта знакомств в Фотошопе

 

Чтобы закончить с этой частью, используйте инструмент Горизонтальный текст (Text Tool (T)), чтобы добавить ваш первый лозунг. Добавьте тень к тексту (для этого перейдите в меню Слои> Стили слоя> Тень (Layer> Layer Style> Drop Shadow)).

 

Создание дизайна сайта знакомств в Фотошопе

 

Создание дизайна сайта знакомств в Фотошопе


 

Шаг 2: Создание логотипа

 

Прежде чем приступать к созданию логотипа, создайте новую группу и назовите ее «логотип». С помощью инструмента Горизонтальный текст (Text Tool (T)) добавьте название сайта (используемый шрифт: Androgyne *), а так же слоган под логотипом (используемый шрифт: Helvetica).

 

Создание дизайна сайта знакомств в Фотошопе

 

Используемый шрифт Вы можете загрузить с сайта: http://www.dafont.com/androgyne-tb.font

 

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

 

Создание дизайна сайта знакомств в Фотошопе

 

Шаг 3: Первое меню

 

Справа от логотипа разместим небольшое горизонтальное меню с очень важными ссылками. Создать это меню очень легко. Создайте сначала новую группу и назовите её «меню». Используйте инструмент Горизонтальный текст (Text Tool (T)) для написания текста ссылок. Что касается эффекта наведения на пункт меню, то для этого используйте инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool (U)) с радиусом в 4 пикселя, чтобы создать прямоугольник под последним пунктом меню (заполните этот прямоугольник цветом # eee4e4).

 

Создание дизайна сайта знакомств в Фотошопе

 

Шаг 4: Второе меню

 

Теперь создадим второе меню и расположим его под логотипом на всю ширину макета. Данное меню будет использоваться для навигации по сайту. Создайте новую группу и назовите ее «навигация». С помощью инструмента Прямоугольная выделенная область (Rectangular Marquee Tool (M)) создайте активное выделение размером в 1 000 на 40 пикселей. Создайте новый слой и заполните выделение цветом # eee4e4.

 

Создание дизайна сайта знакомств в Фотошопе

 

Еще раз выберите инструмент Прямоугольная выделенная область (Rectangular Marquee Tool (M)), чтобы создать прямоугольник над группой, и границу шириной в 2 пикселя под группой (см. рисунок ниже). Заполнение эти элементы цветом # a40000. И в заключении используйте инструмент Горизонтальный текст (Text Tool (T)), чтобы добавить первую ссылку.

 

Создание дизайна сайта знакомств в Фотошопе

 

Еще ​​раз используйте инструмент Горизонтальный текст (Text Tool (T)), чтобы добавить другие ссылки.

 

Создание дизайна сайта знакомств в Фотошопе

 

Шаг 5 Создание кнопки

 

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

 

Создание дизайна сайта знакомств в Фотошопе

 

1. Создайте прямоугольник с закругленными углами с радиусом в 40 пикселей (для этого используйте инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool (U)) и цвет # a40000).

 

2. Примените к слою два стиля: Внутреннее свечение (Inner glow) и Наложение градиента (Gradient Overlay) (для этого перейдите в меню Слои> Стили слоя> Внутреннее свечение (Layer> Layer Style> Inner glow)).

 

Создание дизайна сайта знакомств в Фотошопе

 

Создание дизайна сайта знакомств в Фотошопе

 

3. Продублируйте прямоугольник с закругленными углами (щёлкните правой кнопкой мыши на слое и в контекстном меню выберите команду Дублировать слой (Duplicate layer)) Затем измените цвет заполнения на белый. Уменьшите теперь его размер с помощью инструмента свободной трансформации (нажмите Ctrl / Cmd + T, чтобы создать красную рамку вокруг прямоугольника).

 

4. Перейдите в меню Слои> Слой-маска> Показать всё (Layer> Layer Mask> Reveal All), затем используйте градиент от цвета переднего плана к прозрачному на маске слоя, чтобы создать отражение.

 

5. Добавьте текст на кнопку с помощью инструмента Горизонтальный текст (Text Tool (T)). Далее добавить стиль слоя Тень (Drop shadow) на текст кнопки.

 

Создание дизайна сайта знакомств в Фотошопе

 

6. Чтобы закончить с кнопкой, импортируйте изображение с вишней из скачанного пакета иконок.

 

Смотрите конечный результат:

 

Создание дизайна сайта знакомств в Фотошопе

 

Шаг 6: Создание слайдера изображений

 

Создайте новую группу и назовите ее «слайдер». Добавьте изображения (изображения должны занять всю ширину вашего документа). С помощью инструмента Прямоугольная выделенная область (Rectangular Marquee Tool (M))  обрежьте свои изображения, чтобы сделать их высотой в 670 пикселей.

 

Создание дизайна сайта знакомств в Фотошопе

 

Используйте инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool (U))с цветом # a40000, чтобы создать прямоугольник размером в 900 на 230 пикселей. Чтобы создать прямоугольник нужного размера, Вы можете использовать в помощь направляющие или изменить размер прямоугольника используя свободную трансформацию и ввести правильные значения размера.

 

Создание дизайна сайта знакомств в Фотошопе

 

Используя инструмент Произвольная фигура (Custom form) создайте форму сердце над прямоугольником и цветом # 820000.

 

Создание дизайна сайта знакомств в Фотошопе

 

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

 

Создание дизайна сайта знакомств в Фотошопе

 

Добавьте маску слоя на слой (перейдите в меню Слои> Слой-маска> Показать всё (Layer> Layer Mask> Reveal All)), и закрасьте черным цветом всё, что выступает за границы красного прямоугольника.

 

Создание дизайна сайта знакомств в Фотошопе

 

Используйте инструмент Горизонтальный текст (Text Tool (T)), чтобы добавить новый лозунг, а также описание сайта.

 

Создание дизайна сайта знакомств в Фотошопе

 

Шаг 7: Поиск анкет

 

Для создания области поисковой системы сайта создайте для начала новую группу и назовите её «форма поиска». С помощью инструмента Горизонтальный текст (Text Tool (T)) добавьте несколько значений для поиска. Что касается формы, используйте для их создания инструмент Прямоугольная выделенная область (Rectangular Marquee Tool (M)). Добавьте обводку, чтобы эти прямоугольники были немного заметнее (перейдите в меню Слои> Стили слоя> Обводка (Layer> Layer Style> Stroke)).

 

Создание дизайна сайта знакомств в Фотошопе

 

Создание дизайна сайта знакомств в Фотошопе

 

В каждом белом прямоугольнике справа создайте квадрат, используя тот же инструмент. Добавьте два стиля слоя на этот квадрат: Обводка (Stroke) и Наложение градиента (Gradient Overlay).

 

Создание дизайна сайта знакомств в Фотошопе

 

Создание дизайна сайта знакомств в Фотошопе

 

Поместите стрелку на прямоугольник (вы можете найти стрелку на этой странице: http://www.iconfinder.com/icondetails/43221/128/arrow_black_go_monotone_right_solid_icon.

 

Добавить два стиля слоя на этот значок: Наложение цвета (Color overlay) и Тень (Drop Shadow).

 

Создание дизайна сайта знакомств в Фотошопе

 

Создание дизайна сайта знакомств в Фотошопе

 

Вот, что должно у вас получиться на данный момент.

 

Создание дизайна сайта знакомств в Фотошопе

 

Дублируйте форму и поместите дубликат справа.

 

Создание дизайна сайта знакомств в Фотошопе

 

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


Иконку для кнопки ищите вот тут: http://www.iconfinder.com/search/?q=zoom.

 

Создание дизайна сайта знакомств в Фотошопе

 

Шаг 8: Создание навигации по слайдеру

 

Чтобы зациклить слайдет, вам нужно добавить навигацию страниц в левой части ранее добавленных изображений. Создайте новую группу и назовите ее «навигация по слайдеру». Создайте три круга размером а 12 на 12 пикселей (два из них залейте красным # 850000 и один белым цветом # FFF).

 

Создание дизайна сайта знакомств в Фотошопе

 

Вот, что должно у вас получиться на данный момент.

 

Создание дизайна сайта знакомств в Фотошопе

 

Шаг 9: Создание содержимого страницы

 

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

 

Создайте сначала новую группу и назовите её «девушки». На новом слое создайте прямоугольник с размером в 440 на 250 пикселей и заполните его цветом # eee4e4.

 

Создание дизайна сайта знакомств в Фотошопе

 

С помощью инструмента Горизонтальный текст (Text Tool (T)) добавьте название блока. 

 

Создание дизайна сайта знакомств в Фотошопе

 

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

 

Создание дизайна сайта знакомств в Фотошопе

 

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

 

Создание дизайна сайта знакомств в Фотошопе

 

Скопируйте группу «девушки» и переименуйте ее в «мужчины». Поместите эту группу с правой стороны от группы «девушки». Найдите фотографии и добавьте их.

 

Создание дизайна сайта знакомств в Фотошопе

 

Смотрите результат с двумя блоками.

 

Создание дизайна сайта знакомств в Фотошопе

 

Шаг 10: Вторая часть содержимого страницы

 

Что касается этой части, то не нужно ничего усложнять. Создайте новую группу, которую назовите просто «описание». Создайте новый слой и задайте ему красную границу в 2 пикселя высотой и импортируйте иконки. С помощью инструмента Горизонтальный текст (Text Tool (T)) добавьте текст. Чтобы закончить с блоком, добавьте две кнопки с тем же стилями, как для других кнопок.

 

Создание дизайна сайта знакомств в Фотошопе

 

Шаг 11: Подвал сайта

 

Что касается нижней части сайта, создайте сначала новую группу, затем с помощью инструмента Прямоугольная выделенная область (Rectangular Marquee Tool (M)) заполните нижнюю часть вашего холста (используйте красный цвет # a40000). Используйте тот же инструмент, чтобы создать прямоугольник с размерами в 1 000 на 40 пикселей, и поместите его внизу первого (заполните этот прямоугольник тёмно-красным цветом # 820000).

 

Создание дизайна сайта знакомств в Фотошопе

 

Создайте новую группу под названием «бокс 1». С помощью инструмента Горизонтальный текст (Text Tool (T)) добавьте заголовок (шрифт Androgyne, цвет белый, размер 20 пикселей).

 

Создание дизайна сайта знакомств в Фотошопе

 

Используйте еще ​​раз инструмент Горизонтальный текст (Text Tool (T)), чтобы добавить список ссылок.

 

Создание дизайна сайта знакомств в Фотошопе

 

Создайте новый слой и, используя кисть с формой стрелки (загрузить можно по этой ссылке: http://www.grafpedia.com/vip-downloads/325-bullet-icons-pixel-arrows) добавьте стрелки к ссылкам как показано ниже.

 

Создание дизайна сайта знакомств в Фотошопе

 

Дважды дублируйте группу «бокс 1. С помощью инструмента Перемещение (Move Tool (V)) разместите копии в нужные места.

 

Создание дизайна сайта знакомств в Фотошопе

 

Что касается последнего блока, в нём мы создадим регистрационную форму на рассылку новостей. Чтобы это сделать, добавьте название и описание, как делали это для других блоков.

 

Создание дизайна сайта знакомств в Фотошопе

 

Создайте прямоугольник с помощью инструмента Прямоугольник (Rectangle Tool (U)) и добавьте три стиля слоя: Внутренняя тень (Inner shadow), Наложение цвета (Color overlay), Обводка (Stroke). См. настройки ниже:

 

Создание дизайна сайта знакомств в Фотошопе

 

Создать новую кнопку (технологию создания кнопки см. в шаге 5).

 

Создание дизайна сайта знакомств в Фотошопе

 

Шаг 12: Добавьте копирайтов и ссылок на социальные сети

 

Последний шаг будет заключаться в добавлении авторских прав на веб-сайте, а также некоторых ссылок на социальные сети, такие как Twitter и Facebook. Создайте новую группу и назовите ее «копирайты». С помощью инструмента Горизонтальный текст (Text Tool (T)) добавьте копирайты в левой часть холста.

 

Создание дизайна сайта знакомств в Фотошопе

 

Добавьте три иконки справа, заполните эти значки цветом # d72626.  Я нашел эти значки на этом сайте: http://www.iconfinder.com/search/?q=iconset%3Asocial.

 

Создание дизайна сайта знакомств в Фотошопе

 

На этом урок закончен. Всё ли вам было понятно?

 

Создание дизайна сайта знакомств в Фотошопе

 

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



Автор урока: Команда сайта grafpedia.com


Переводчик урока: Ирина Шипилова 

Ссылка на источник



Если Вам понравился наш сайт, выразите свое "спасибо" нажатием на кнопочки ниже. Расскажите друзьям. Спасибо :)


  • 11.05.2012
  •   Просмотров: 4341
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по After Effects на русском!

Все о МАСКАХ

Полный курс по Cinema 4D на русском!

Создание профессиональных видеоуроков!

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

WebMoney
Z280416942189
R894500715826

Яндекс Деньги:
410012466071950

Все деньги пойдут на развитие сайта (оплату хостинга, оплату авторам уроков т.д.)

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

С уважением администрация сайта.
http://of-law.ru/iskovye-zayavleniya/ - Of-law.ru-судебные решения, исковые заявления, образцы жалоб, судебная практика, юридическая консультация бесплатно,нет ничего проще
Популярное на сайте
Следите за нами

Кроссовки дешево!
http://mykrosovkii.ru/catalog/nike.html - Уцененные кроссовки со всего мира,кроссовки Nike, Adidas, Converse кеды, Reebok Classic,New Balance
Партнерские ссылки