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

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

Сегодня вы узнаете, как из разных несложных элементов создать интересный макет для сайта недвижимости. Сложность: низкая Время: до 1 часа Навыки для «прокачки»: - создание шаблона сайта, 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 маленькие линии, как на картинке ниже. Шаблон сайта по недвижимости - уроки фотошоп Вот мы и закончили, у нас получился очень интересный результат. Если вы повторите урок, то пополните свое портфолио хорошим примером Вэб дизайна сайта. Шаблон сайта по недвижимости - уроки фотошоп Автор/Переводчик: Артеменко Люба Ссылка на источник: http://www.talk-mania.com/web-layouts/37447-real-estate-layout.html

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

Кликните на изображение чтобы обновить код, если он неразборчив
  • Яндекс.Метрика