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

Добро пожаловать в серию бесплатных видео уроков! И в этом небольшом курсе видео уроков вы нарисуете вот такой вот симпатичный дизайн для компании, занимающейся ландшафтным дизайном. Структура здесь довольно простая. Вверху идет логотип, потом идет композиции, которые характеризуют деятельность компании. Далее идет меню, затем идет контент и как обычно — подвал.

Ну что ж, давайте приступим к реализации данного проекта. Заходим в программу фотошоп, создаем новый документ. Шириной он у нас будет 1280 пикселей, а высотой 1385 пикселей. Давайте сразу же его сохраним. Создайте где-нибудь у себя на компьютере папочку «ландшафтный дизайн» туда зайдите и сохраните наш макет. Обязательно убедитесь, чтобы расширение было PSD, иначе потом вы не сможете редактировать данный макет. Сохраняем. Теперь мы сделаем разметку дизайна нашего сайта, чтобы никакие элементы не заезжали и не съезжали друг под друга. Первое, что нам необходимо будет сделать — это включить линейку. Это можно сделать 2 способами. Первый: заходим в меню — просмотр и ставим галочку, где линейка. Вот у нас появилась линейка. То же самое можно сделать, нажав сочетание клавиш ctrl+r.

Идем дальше. Сначала мы сделаем вертикальную разметку и поставим первые направляющие. Берем инструмент перемещение, зажимаем здесь, на вертикальной линейке, и переносим первые направляющие на 128 пикселей. Сейчас мы ставим направляющую на ширину макета.  Стандартная ширина монитора 1024 пикселя, мы как раз их и отмечаем.

Вторая направляющая у нас будет на 1152 пикселя. Вот сюда.

Следующая направляющая будет у нас будет разграничивать контент, ширину контента. Он у нас будет чуть поменьше, чем сам макет. И первая направляющая у нас здесь будет на 160 пикселей, вторая направляющая на 1116 пикселей. Отлично.  Вот мы с  разметкой и приступаем к горизонтальной.

Первое, что мы сделаем — это разметим наш логотип. Он у нас будет высотой 45 пикселей. Ставим вот сюда направляющую. Следующее.  Мы отметим область, на которой у нас вся композиция. Она у нас будет начинаться на высоте 295 пикселей. Так, примерно здесь. Да, совершенно верно. И вторая направляющая будет на 485 пикселей, где-то здесь. Вот сюда. Отлично. Теперь мы отметим наше меню. Первая направляющая у нас будет на 500 пикселей, вторая на 550.

Отлично.  Далее мы отметим, так называемые хлебные крошки наши. Первая направляющая на 570 пикселей, вторая на 605.

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

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

Отлично. Все что нам осталось сделать — это поменять структуру у фона. Сейчас у нас белый фон, а необходимо сделать текстуру бумаги. Все исходные материалы, которыми мы будем пользоваться в процессе рисования дизайна сайта, вы сможете скачать на той же страничке, где и само видео. Итак, открываем исходники и находим текстуру бумаги. Немного обрежем ее, выбирая инструмент «рамка» и немного уменьшим ее, зажимая сочетание клавиш Ctrl+Alt+I. Ширину ставим 1300 пикселей. Переходим на инструмент перемещение и перетаскиваем на наш макет текстуру бумаги. Заходим в слои и уменьшаем непрозрачность до 70%. Это слой переносил вниз и даем ему название «текстура бумаги». Отлично, как мы видим, у нас получилась такая же структура, как на нашем исходнике.

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

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

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



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

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