Создаем интересный шаблон для сайта недвижимости 1

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



Из этого урока вы узнаете, как создать потрясающий дизайн сайта недвижимости.
Навыки для «прокачки»:

- работа с инструментами выделения
- работа с Пером
- трансформация объектов
- работа со Штампом
- работа с Градиентом

Шаг 1. На самом деле уроки веб дизайна - это сложный творческий процесс, но даже в этом бывают исключения, и выполняя этот простой но красивый урок, думаю, вы сами в этом убедитесь.
Ну что? Приступим? Создайте новый документ размером 1024*700 пикселей и белым фоном.
Теперь вам понадобиться изображение, которое вы можете скачать здесь (http://www.sxc.hu/photo/696482 ). Откроем изображение в фотошоп и, используя Изображение-> Размер изображения (Image-> Image Size) (Alt + Ctrl + I) изменим ширину картинки на 650px. Теперь переместим изображение в наш основной документ.

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

Шаг 2. Далее используя инструмент Перемещение (Move Tool (V)) переместим это изображение, как на картинке ниже (чтобы часть неба находилась вне документа), используя инструмент Прямоугольная область (Rectangular Marquee Tool (M)) выделите часть снизу и нажмите Delete (слой с изображением должен быть активным).

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

Шаг 3. Создадим новый слой и, используя инструмент Прямоугольная область (Rectangular Marquee Tool (M)), сделаем выделение как на картинке ниже. Заполните это выделение цветом # fae5c8. Затем снимите замочек слоя, и используя Выделение-> Трансформировать выделенную область (Select-> Transfrom Selection), поверните его на 45 °, и поместите в левый угол, далее нажмите Delete. Теперь снимаем выделение с помощью Выделение-> Отменить выделение (Select -> Deselect) или (Ctrl + D).

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

Шаг 4. Теперь дублируем этот слой (Ctrl + J), затем перейдем Редактирование-> Трансформирование-> Отразить по горизонтали (Edit-> Transform-> Flip Horizontal) и переместите этот слой, чтобы получить форму, как на картинке ниже. Затем выделим эти два слоя (клик правой кнопкой мышки на слое и перейдем Объединить слои (Marge Dow)).

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

Шаг 5. Активируйте инструмент Эллипс (Elliptical Marquee Tool (M)) и создайте выделение 18*18 пикселей. Заполните это выделение цветом # 916047. Теперь перейдем Выделение-> Модификация-> Сжать (Select-> Modify-> Contract), поставьте значение 3px, нажмите ОК, а затем Delete.

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

Шаг 6. Убедитесь, что ваш слой с формой активен и зате,м с помощью Редактирование-> Свободное трансформирование (Edit-> Free Transform) или (Ctrl + T), поместите его как на картинке ниже.

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

Шаг 7. Теперь давайте нарисуем веревочку. Создадим новый слой, выберите Кисть (Brush Tool (B)) и установите размер 2px. Используем # 612915 для основного цвета. Активируем инструмент Перо (Pen Tool (P)) и нарисуем нашу веревочку. Затем щелкните правой кнопкой мыши и выберите Выполнить обводку (Stroke Patch). Следующее что мы сделаем, это активируем инструмент Ластик (Eraser) и сотрем не нужную часть нашей веревочки. С помощью этого же инструмента Ластик (Eraser) сотрите некоторые части неба, чтобы смешать его с белым фоном (используйте, мягкий ластик - большого размера).

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

Шаг 8. Теперь давайте сделаем небольшой блок с правой стороны. Это будет очень просто. Просто возьмите инструмент Прямоугольная область (Rectangular Marquee Tool (M)) с фиксированным размером 205x675 пикс. и сделайте выделение с правой стороны. Затем создадим новый слой и заливаем это выделение цветом # eef1d9. На этом пока все, мы можем заполнить это пространство содержанием позже.

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

Шаг 9. На каждом сайте обязательно должно быть меню – именно его мы сейчас и сделаем. Активируем инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (U)), установим радиус на 5 пикс, создадим новый слой и нарисуем первую кнопку (цвет не важен). Поместите этот слой под слой с нашим домом. Теперь, удерживая клавишу Ctrl, кликните на миниатюре слоя нашей будущей кнопки - это создаст выделение.

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

Шаг 10. Выберите инструмент Градиент (Gradient Tool (G)) с настройками, как на картинке ниже, и перетащите градиент на нашем слое к кнопке.

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

Шаг 11. Добавим стиль слоя (Add a layer style) для этой кнопки.

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

Шаг 12. Дублируйте слой с вашей кнопкой (Ctrl + J) и переместите его вправо. Сделайте их, в два раза больше.

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

Шаг 13. Теперь давайте сделаем так, чтобы наши кнопки выглядели лучше. Создайте новый слой над вашим слоем с кнопками, затем активируйте Штамп (Clone Stamp Tool (S)) и используйте эти настройки.

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

Шаг 14. Затем, удерживая клавишу Alt , нажмите где-нибудь на траве, это будет наш источник. Теперь просто нарисуйте траву, как показано на изображении ниже. Вы можете увеличить немного изображение, если хотите.

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

Шаг 15. Создадим новый слой, и на новом слое с помощью инструмента Прямоугольник со скругленными углами (Rounded Rectangle Tool (U)) и радиусом 5 пикс. нарисуйте форму, как на картинке ниже.

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

Шаг 16. Далее с помощью этого же инструмента нарисуйте еще одну фигуру внизу.

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

Шаг 17. Пришло время для небольшого содержания.

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

Шаг 18. Теперь давайте создадим панель поиска.

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

Шаг 19. Не знаете как? Не переживайте, уроки веб дизайна не только этому вас научат!
Здесь нет ничего сложного – просто нарисуйте прямоугольник.

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

Шаг 20. Теперь Добавим эти стили слоя (Add a layer style) .

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

И вот наш конечный результат.

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

Сайт: Stadion-Kuban.ru

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

Мы ВКонтакте: vk.com/Stadion-Kuban

И в Твиттере: twitter.com/Stadion-Kuban

Информация
Автор / Разработчик
Автор не указан
Перевел
Артеменко Люба
Сложность
Средняя
Источник
Добавил
Lubashka
Дата
4-08-2020, 09:28
Метки:  еще статьи

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

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

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

Имя
Эл. почта
Комментарий
Вопрос: 2 * 1 =

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

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