Уроки веб-дизайна | Дизайн сайта Nike в Adobe XD

Автор Lyubov Stishevskaya
Уроки веб-дизайна | Дизайн сайта Nike в Adobe XD

Всем привет.

Сегодня мы с вами создадим концерт вот такого главного экрана и. Давайте сразу приступим и так для начала создадим новый аэропорт кликаем отсюда и создаём налларбор вот выбираем профиль в единственном нужно сделать у него высоту не 800 пикселей вернее пунктов a720 viewport тоже можно сделать 720 на всякий случай дальше этот arbor. Давайте чуть-чуть под.

Примерно куда-то вот сюда и начнём делать наш экран и так, что вам может понадобиться вам может понадобиться кроссовок шрифты и логотип кроссовок и шрифты.

Вы можете найти в описании к видео кроссовок я взял после официального autotravel в. Фотошопе A6 ты взял Google fonts, что — это как я уже говорил можете найти в описании к видео и так первом на. Первом Мы поместим наш логотип нажимаем конвенция логотип. Я искал в интернете. Поэтому если хотите поискать в. Интернете либо взять также как я их документы которые вы опять же найдете описание к видео так вставляем наши логотипы и мы будем использовать тот раз не колоночная сетка. А вот такую вот квадратно где она там скоро вообще вот такой вот квадрат, а её не видно потому, что у меня тут белый цвет на него чёрненький и можно сделать в нём прозрачности на этом 5 или даже. Наверное мы сделаем таким образом чтобы у нас тут с краю со всех сторон был. Остапа 80. Я — это буду делать с помощью. Вот таких вот заготовленных отступов то есть я оставлю этот прямоугольник. Примерно вот перемещая логотип и. Как видите у меня тут всё по клеточкам в принципе выстроена то есть логотип занимает там высоту 5 клеточек там и так далее дальше нам нужно сделать вот такие вот точечки которые будут показывать на каком наверное на какой части страницы мы находимся потому, что вот — это будет переключать слайды. Вот это. Верхнее странице. А давайте — это сделаем делается — это в принципе в Adobe где — это делается очень просто с помощью вот берём эллипс рисуем допустим вот 16 на 16 пикселей пунктов. Круг героини убор. Что делаем чёрным дальше нам нужно выбрать отель в нажать repeat Grid. И вот так вот просто-напросто потянуть за вот этот вот. Ну вот эту штуку сделать расстояние между ними у меня там сделано по 60 пунктов делаем. И у нас их должно 5 штук быть так раз-два-три-четыре-пять фонда этой штуковины. Ну так вот уменьшаем всё — это вот в принципе готова единственное, что осталось — это разгруппировать Grid angular Grid всё в принципе готовы осталось. Вот в этих четырёх точек убрать заливку сделать бордовую сделать чёрный сделать четыре пункта. Ну, а водки до внутри. А вот эту оставим чёрную всё в принципе осталось сгруппировать выделяем команды и назовём — это в слоях как-нибудь не знаю там да ты допустим. Ну давайте по-русски будем писать точки и размещаем центру. Шварцбурда Ну и дальше заканчиваю вот этот вот ряд так скажем. Давайте ещё сделаем тут copyright дела очень просто берём инструмент текст кликом один раз так надо было скопировать там вот — это всё же мамка. МФЦ переходим отсюда и берём инструмент текст нажимаем комнат в так нас должно быть размер 14 пунктов потом Regular шрифт вот такой как я говорю шрифт вы найдете описание к видео и сделаем его чёрным цветом всё единственном нужно вот этот вот так вот сюда переместить чтобы видеть где он тут и вот сюда вот стоим. Наш текст всё в принципе левый край. Мы закончили. Теперь давайте сделаем, что давайте сделаем для начала вот такую вот как оно называется там общем такой вот подложку как она делается вообще тут как вы видите ещё есть такие вот линии всё — это сделано как то есть у меня вот ширина 1200 эту 1280. Как сделать 1280 разделил на четыре получается 320 получается вот — это 320 — — это 320 320 320. Мне нужно во-первых сделать прямоугольник. Вот такой у него Border делаем. Ну давайте сразу зальем зелененьким мы делаем у него номер 320 перемещаемого вправо сюда и ещё. Давайте сразу сделаем такие вот background линии делаются они с помощью repeat Grid. Да в принципе очень просто берём вот line рисую такую линию. Давайте опять же сразу зальем её подводка вот таким вот цветом так и заедем и. Нет что-то нифига не залили. Вот вот вот здесь ещё плохо работает пипетка. Поэтому придётся копировать вас берём вот эту линию берём у неё цвет. Тут нужно hex переключиться копируем этот код цвета так выбираем теперь вот эту линию Border и вставляем тебе всё. Теперь мы закрасили так отключить сетку можно с помощью горячих клавиш команд и русская буква э ну или ковычки тут английский. Отключайся закрасили вот как вывести вот эту линию. Теперь эту линию мы тупо вот сюда вот перемещаем нажимаем repeat Grid. И вот так вот продолжаем вот. Ну вот да вот этих вот. Парк сколько 960 и теперь нам надо расстояние между ними сделать сколько там говорил 320 по-моему. Да вот 320. Единственное у нас она стала. Ну Слишком длинное надо уменьшить так потянем уменьшился в каких пор для чего — это делается для удобства то есть. Нам бы сейчас пришлось 130 какие-то прямоугольнике либо как-то там отсчитывать по-другому. А с помощью рипида. Как вы делаете. Как вы видите делается всё просто. То есть вы делали перед потом разгруппировать или вот эту линию удаляем вот тут по-моему тоже линия или нет. Да нет всё нормально. Вот так получилось у нас две линии они там где они не должны быть всё группируем их нажимаем background. А мы же договорились по-русски писать. У нас живём просто линии.

0 комментариев
0

Читайте также