Сегодня вы узнаете, как из разных несложных элементов создать интересный макет для сайта недвижимости.
Навыки для «прокачки»:
- создание шаблона сайта, 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 маленькие линии, как на картинке ниже.



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