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

Итак, мы приступаем к заключительной части рисования нашего дизайна и сейчас мы с вами нарисуем наш контент и подвал.

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

Теперь слой коррекции пока отключим, что бы свободно перемещаться по слоям, эти 2 слоя объединяем, так, уменьшим непрозрачность у них до 60% и добавим текст. Так, здесь мы чуток растянем, примерно так. Здесь у нас будет текст с примерно таким цветом, с таким кодом, подчеркнут, так как это будут ссылки, а здесь активная страница будет такого цвета и не подчеркнута. Далее у нас пойдет заголовок, шрифт Times New Roman, размер 40 пикселей и цвет с таким кодом. Отлично, далее мы добавим такой текст. Текст у нас будет с таким кодом, цвет текста будет с таким кодом. Теперь мы добавим примеры работ, они находятся так же в исходниках, называются пример 1, пример 2, 3, 4. Берем инструмент «Прямоугольная область», здесь ставим заданный размер ширину и высоту по 400 пикселей. Когда выделили, берем инструмент «Перемещение» и переносим сюда. Здесь мы уменьшим размер и делаем то же самое с остальными фотографиями. Как мы видим, эта фотография у нас не квадратная, как все остальные, мы ее сейчас обрежем. Берем инструмент «Прямоугольная область», здесь ставим «обычный» и обрезаем лишнее. Так, сейчас у нас получилось, что картинки немного выходят за рамки нашего контента, мы их все выделяем, нажимаем Ctrl+T и уменьшаем размер. После этого делаем примерно одинаковое расстояние между ними и сейчас добавим им рамки. Щелкаем по первой картинке, добавляем «обводку», она у нас будет коричневого цвета, темно-коричневого ближе к черному, будет 2 пикселя и не снаружи, а внутри. Отлично. Эти слои мы просто скопируем для всех картинок, зажимая Alt и перетаскивая.

Теперь мы добавим глянец на каждую картинку. Создаем новый слой, берем инструмент «Перо» или лучше возьмем инструмент «Прямолинейное лассо» и сделаем такой вот треугольник. После этого берем «Градиент» от белого к прозрачному, линейный градиент и здесь не должно стоять инверсии. Проводим наш градиент, снимаем выделение, нажимая Ctrl+D и привязываем с помощью Alt к нашему слою. Копируем данный слой, зажимая Alt, так же привязываем, нажимая Ctrl и переносим с помощью трансформации. Переносим сюда, здесь слой наверх и так же привязываем, и к последнему слою. Отлично. Сейчас только немножко убавим непрозрачность до 70%.

Так, дальше добавим оставшийся текст. Так, вставляю текст. Как мы видим, он немного не поместился, это из-за того, что у нас слишком большие картинки. Картинки выделим, объединим в одну группу, нажав Ctrl+G и еще немножко уменьшим. Так, отлично. Передвигаем. Вот теперь отлично.

Осталось нам нарисовать футер. По стилю точно такой же, как наше меню, поэтому мы просто скопируем данную текстуру. Щелкаем по текстуре дерева, зажимаем Alt и переносим в подвал. В композиции включаем корректирующий слой, здесь нажимаем Ctrl+T и переносим вниз, нам его необходимо сдублировать, еще раз нажимаем Ctrl+T и переносим опять вниз. Отразим по вертикали, что бы была симметрия. Отлично. Объединяем, даем название. Он у нас явно там темнее, поэтому мы с помощью уровней сделаем его потемнее, примерно так и добавим оставшийся текст. Так, ООО «LD» название компании и «все права защищены». Здесь мы сдублируем наше меню. Для того, что бы заново не писать, просто копируем текст и здесь вставляем. Так, размер здесь 14 пикселей и здесь у нас стоят разделители.

Далее номер телефона единой справочной. Номер телефона сделаем побольше, 18 пикселей. Включим линейку, нажав Ctrl+R и выровняем наш текст.

Так, здесь у нас небольшой косяк, небо не стерли, поэтому стираем, что бы было чисто.

Отлично. Вот и все, дизайн сайта наш готов и его уже можно сверстать, запустить и принимать первых клиентов.

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

На этом все. Спасибо за внимание и до встречи в следующих наших видеоуроках!

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



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

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