Из этого урока вы узнаете, как создать потрясающий дизайн сайта недвижимости.
Навыки для «прокачки»:
- работа с инструментами выделения- работа с Пером- трансформация объектов- работа со Штампом- работа с ГрадиентомШаг 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) .
И вот наш конечный результат.
