Дизайн ландшафтного сайта в фотошопе. Урок №3 — «Начало работы над композицией»

Приступаем к прорисовке нашей композиции и для начала мы нарисуем вот такую вот область, на которой все у нас и находится. Для этого мы берем инструмент «Овальная область» и рисуем вот такую вот область. Заходим в «композиции», создаем новый слой, назовем «земля», после этого берем «Градиент» и зальем коричневым цветов. Берем инструмент «Перемещение», зажимаем Alt и копируем слой, смещаем его вниз до нашей направляющей. Верхний слой мы сделаем чуть светлее, для этого нажимаем Ctrl+L и перенесем этот слой наверх. Теперь создадим еще один слой, увеличим масштаб, берем инструмент «Прямолинейное лассо» и сейчас мы соединим две наших области, что бы это была одна целостная область. После того, как мы соединили, выбираем опять «Градиент» и заливаем точно таким же цветом. Сейчас у нас она поверх своей землей, поэтому мы перенесем ее вниз и у нас края стали ровными. Так, объединим эти слои, что бы их не было слишком много и теперь сделаем такой вот чернозем и травку. Для этого нам понадобятся, опять же, наши исходники, выбираем землю, вот у нас земля. Сейчас мы уберем эту руку с этим прибором. Для этого опять берем инструмент «Прямолинейное лассо» и выделяем этот инструмент. После того, как выделили, нажимаем правую кнопку мыши и выбираем «Выполнить заливку», здесь выбираем «С учетом содержимого» — эта функция доступна, только если у вас версия фотошопа CS5, в более низких данной функции нет, поэтому сделать данную операцию можно только если у вас последняя версия фотошопа. Нажимаем «Ок», снимаем выделение, нажимая Ctrl+D и точно также сделаем вот здесь, где травка. Теперь мы уменьшим размер, примерно до 400 пикселей по ширине, берем инструмент «Перемещение» и переносим на наш макет. Нажимаем Ctrl+T и уменьшаем в размерах, оставляем примерно так, нажимаем Alt и дублируем наши картинки. После этого идем в слои и все слои с названием «слой 3» объединяем в один. Зажимаем Alt и прикрепляем к слою с землей. Отлично.

Теперь добавим травку. Так, идем в исходники, выбираем картинку с названием «небо» и переносим ее на наш макет. Зажимаем Alt и прикрепляем к слою с землей. После этого дублируем картинку, зажимая Alt, нажимаем трансформацию Ctrl+T и отражаем по горизонтали. Двигаем сюда, берем ластик и удаляем дорогу. Так, трава у нас практически готова, теперь нам необходимо сделать данную область более реальной. Во-первых, выделим наш слой, где у нас земля, создаем еще один слой, зажимаем  Alt, прикрепляем, берем черный цвет, кисточку примерно такого размера, ставим жесткость на 0, непрозрачность на 100 и по краям проходимся. После этого идем в «Фильтр – Размытие – Размытие по Гауссу» и ставим примерно на 4 пикселя. Как мы видим, у нас здесь ровная трава, а нужно, что бы был плавный переход. Для этого берем «Ластик», здесь выбираем «Сухие кисти», берем вот такую вот кисточку, переходим в слои, выделяем слой с землей и проходимся по контурам с нашей травой, что бы сделать края более рваными и реальными. Если будет ровно, то не будет похоже на реальность. Ну, теперь отлично, похоже на реальную траву и землю.

Теперь мы составим наш коллаж, разместим все наши картинки и приступим к их обработке. В полный размер мы видим, что наш логотип уехал направо, поэтому выделяем нашу папочку, берем инструмент «Перемещение», зажимаем Shift и двигаем направо, выравнивая по центру. Отлично. Логотипчик у нас немного больше, нажимаем Ctrl+T и уменьшаем примерно до таких размеров. Так, теперь берем наши исходники, пойдем по порядку, с самых больших начнем, выбираем домик, берем инструмент «Волшебная палочка», допуск ставим 25. После того как выделилось, нажимаем Ctrl+Shift+I, что бы сделать инверсию и перетаскиваем на наш макет в папку «композиция». Слой с домиком мы сразу переименуем и для этого создадим отдельную папку, нажимаем Ctrl+G, потому что мы в дальнейшем будем этот домик обрабатывать и создавать для него отдельные слои. Нажмем Ctrl+T, немножко уменьшим его размер и разместим приблизительно, где он должен быть.

Так, теперь берем нашу беседку, точно так же выделяем, делаем инверсию и переносим к нам на макет. С помощью трансформации уменьшаем размер и ставим справа. Подпишем сразу, вынесем наверх и создадим отдельную папку, нажав Ctrl+G.

Так, дальше идем. Пруд, его мы вырезаем с помощью инструмента «Прямолинейное лассо». Сейчас мы выделяем просто его контуры вместе с мостиком. После того, как выделили, берем инструмент «Перемещение» и переносим на наш макет, опять же переносим макет с помощью трансформации и размещаем приблизительно здесь. Переименуем слой и создадим для них отдельную папку.

Так, теперь добавим нашу растительность, вырезаем так же с помощью инструмента «Прямолинейное лассо», берем инструмент «Перемещение», переносим, уменьшаем, ставим примерно здесь.

Теперь добавим дорожку и фонарики. Сначала уменьшим картинку, к примеру до 800 пикселей по ширине, заново выделим и перенесем. Отразим по горизонтали, изменим перспективу, сделаем искажение, пока примерно так.

Так, все основные элементы мы добавили. Кустарники, деревья, фонари мы добавим позже.

На этом данный урок мы заканчиваем и в следующем уроке мы будем обрабатывать нашу такую вот композицию, доводить ее до ума, до такого вот красивого вида.

На этом данный урок закончен. Сохраните данный макет, нажмите Ctrl+S и можете переходить к следующему видео-уроку. Спасибо за внимание и до встречи!

Пройдите курс "Профессия веб-дизайнер" за 10 дней бесплатно:



Понравилась статья?
Сделайте доброе дело — поделись ей со своими друзьями и коллегами, кликнув по всем кнопкам соц.сетей:

Нравится
comments powered by HyperComments