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