Шаблон сайта по недвижимости 0

Шаблон сайта по недвижимости - уроки фотошоп



Сегодня вы узнаете, как из разных несложных элементов создать интересный макет для сайта недвижимости.
Навыки для «прокачки»:
- создание шаблона сайта, WEB-кнопок
- работа с векторными формами в Фотошоп
- «горячие клавиши» Фотошоп
- работа со стилями слоя

Шаблон сайта по недвижимости - уроки фотошоп

Шаг 1. Уроки Вэб дизайна часто начинаются с создания нового документа. Вам нужен лист размером 760x770 пикселей. Фон: белый
Дублируйте фоновый слой нажав CTRL + J
Перейдем в Фильтр-> Шум-> Добавить шум (Filter-> Noise-> Add Noise), и используйте те же настройки, как на картинке ниже.

Шаблон сайта по недвижимости - уроки фотошоп

Шаг 2. Затем нажмите Ctrl + U, и также используйте следующие параметры:

Шаблон сайта по недвижимости - уроки фотошоп

У нас получился хороший фон для нашего макета.

Шаблон сайта по недвижимости - уроки фотошоп

Шаг 3. Активируйте Прямоугольник со скругленными углами (Rounded Rectangle Tool) и создайте форму, как на изображении ниже.

Шаблон сайта по недвижимости - уроки фотошоп

Шаг 4. Теперь скачайте фотографию дома.

Шаблон сайта по недвижимости - уроки фотошоп

И поместите его на макете.

Шаблон сайта по недвижимости - уроки фотошоп

Шаг 5. Убедитесь, что выделен этот слой в палитре слоев, затем инструментом Вертикальная строка (Single Column Marquee Tool) создайте выделение, как на изображении ниже.

Шаблон сайта по недвижимости - уроки фотошоп

Шаг 6. Затем нажмите Ctrl + J (копия этой части будет создана на новый слой выше слоя с домом). Выберите этот (новый слой) в палитре слоев, затем нажмите V на вашей клавиатуре или выберете инструмент перемещения, а затем нажмите Ctrl + T . На изображении ниже вы можете увидеть преобразование.

Шаблон сайта по недвижимости - уроки фотошоп

Теперь перемещайте его влево, пока у вас на получится такой же результат.

Шаблон сайта по недвижимости - уроки фотошоп

Шаг 7. Выберите Прямоугольник со скругленными углами (Rounded Rectangle Tool) и создайте несколько форм. Вы видите, что на картинке ниже создано 6 маленьких фигур белого цвета на вершине нашего макета. Эти формы будут кнопками.

И еще одна форма с левой стороны синим цветом.

Шаблон сайта по недвижимости - уроки фотошоп

Шаг 8. Для слоя с синей формой добавьте следующие стили слоя (Add a layer style).

Шаблон сайта по недвижимости - уроки фотошоп

Шаблон сайта по недвижимости - уроки фотошоп

Шаблон сайта по недвижимости - уроки фотошоп

Шаблон сайта по недвижимости - уроки фотошоп

Шаблон сайта по недвижимости - уроки фотошоп

Шаг 9. Теперь вы можете добавить на кнопках текст и поместить логотип.

Шаблон сайта по недвижимости - уроки фотошоп

Шаг 10. После этого поместите некоторые формы и текст на эту оранжевую форму.

Шаблон сайта по недвижимости - уроки фотошоп

Шаг 11. Также добавим какой-то текст на теле этого макета. В то же время добавим некоторые изображения.

Шаблон сайта по недвижимости - уроки фотошоп

Если у вас есть небольшие иконки, можете разместить их в правой части макета.

Шаблон сайта по недвижимости - уроки фотошоп

Шаг 12. Теперь выберите инструмент Линия (Line Tool) в 1 пикс. и создайте 2 маленькие линии, как на картинке ниже.

Шаблон сайта по недвижимости - уроки фотошоп

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

Шаблон сайта по недвижимости - уроки фотошоп

Сайт: designlessons.ru

Виджет на Яндексе: yandex.ru/?add=111794

Мы ВКонтакте: vk.com/designlessons

И в Твиттере: twitter.com/DesignLessons

Информация
Автор / Разработчик
Автор не указан
Перевел
Артеменко Люба
Сложность
Легкая
Источник
Добавил
Lubashka
Дата
8-09-2019, 13:12
Метки:  еще статьи

Поделиться ссылкой

Прямая ссылка:
BB-code ссылка:
HTML ссылка:

Комментарии (0)

Имя
Эл. почта
Комментарий
Вопрос: 6 + 4 =

Для активации данной функции необходимо зарегистрироваться и авторизоваться на сайте.

Ваш IP: 204.236.235.245
Последние уроки
Вконтакте
Архив сайта
.