Обучение веб дизайну или как создавать адаптивный дизайн сайта Уроки для начинающих веб дизайнеров

Автор Denis Lisitsin
Обучение веб дизайну или как создавать адаптивный дизайн сайта  Уроки для начинающих веб дизайнеров

друзья привет.

С вами проиграй в дизайн гору и. Атая несмелов. Кирилл сегодня мы будем создавать мобильную адаптацию для второго сайта гринмани.

А вот в садике.

В принципе довольно-таки простые, но нам больше для начальных начального обучения веб дизайну как бы и непосредственно и непосредственно самому самое мобильная адаптация нам больше и не надо значит, но перед этим как обычно маленькая рекламка. Давайте быстренько пробежимся. У нас есть группа. ВКонтакте называется она Porsche Design Guru называется номер Design Guru обучение веб-дизайну. А зачем вам вступать неё частый. Вопрос такой бывает смотрите друзья помимо того, что есть обучение нас выкладывается очень много полезной информации. Плюс вы можете встретить тут единомышленников потому, что у нас уже 7309 человек также у нас есть библиотека для веб-дизайнеров помимо этого кто не сидит. ВКонтакте может перейти на ссылку на телеграм в стене под вина Tab плюс ко всему же мы проводим стримы. А где я непосредственно также я приглашаю очень часто друзей своих которые занимаются кто смеётся над дизайном от ближайший. Надеюсь мы еще привлечем иллюстратора который зарабатывает непосредственно тем, что логотипы технический дизайн делает для шаттерстока D2 вот. Он зарабатывает этими деньги. Он поделится с вами своим опытом. А вот помимо этого нас. Ну вот сейчас я уже думаю, что вы не успеете, но на следующий поток курса. Вы успеете у нас будут, а групповые занятия где ну по минимальной цене вы сможете купить двухмесячный курс. Вот и у нас есть VIP Design Guru. У нас есть портал на YouTube где я непосредственно выкладывайте уроки. Кто смотрит этот видео не с YouTube. Кто смотрит с. Контакта пожалуйста переходите всё есть всё отдала и так давайте будем начинать. Значит первое должны с вами понять мы с вами же сразу создаем мобильную сеточку давайте я сейчас создам на этой значит ширина 320 пикселей — это стандартная минимальное разрешение для Mobilluck так 3000 пикселей в высоту и для того чтобы нам надо какие-то отступы сделать какую-то сетку я буду делать — это благодаря просмотр новый макет направляющей — это встроенная функция в. Фотошопе — это у меня у кого. Этой функции нет как же делать. Давайте разберёмся всё легко и просто берете в прямоугольник вот нажимайте левой кнопкой ставите 15 пикселей и 15 пикселей направляющие у кого не включена эта контроллер включаем. Это не первый раз и второй раз вот после этого перевод перемещение и пацан тем же самым образом выставляем для следующей направляющие. Как видите друг от друга. Ничем не отличается — это немного более трудозатратно, но у кого нету просмотр новый макет направляющей хну для вас — это вариант хороший и так давайте будем начинать для того чтобы мне быстрее было работать я всё-таки — это коммерческий работы я все работы буду вставлять справа себе чтобы я чтобы побыстрее немножко всё делал извиняюсь значит делаем сначала Huter опять же как видите всё выстраиваем в сеточку всё выравниваем вот у нас в хадере очень много информации, но я предлагаю сейчас всё сделать бургер значит, что такое бургеры мы будем прятать вот — это вот всё меню которая у нас есть так значит первое, что мы делаем первое мы с вами же. Ага тут со скругленными углами у нас на четырём прямоугольник со скругленными углами вот тут вот радиус выставлено допустим 3. Сталин Итак 1 — это у нас будет меню 2 — это у нас будет, а наш личный кабинет личный кабинет поставить. Каким образом значит 1 2. Так Личный кабинет от. Личного кабинета. Я предлагаю использовать иконку у меня — это всё находится в библиотеке находится в библиотеке потому, что у меня просто лицензия. Друзья у кого нет лицензии смелым перетаскивать из папки. Ну, а сейчас я лучше покупать лицензию у кого есть возможность. У кого есть денежка покупать лицензию вы не пожалеете значит вот то, что у нас есть начисто там User — это у нас меню. Да у нас Huter желательно на английском называют для того чтобы программистом было легче потом работать с этими файлами. Значит так следующее следующее, что мы должны сделать сделать слайдер вот у нас будет значит слайдер мы делаем простой аккуратный у нас вся картиночки уже заданы нас полностью всё готово сейчас просто подробно. Витя и тут есть какая-то надпись для того чтобы лучше начиталась я предлагаю поставить 20 пикселей и допустим поставить её болт так смотрим в принципе всё нормально всё отлично. Так теперь нам надо сделать. Как подписывать сразу же — это слайдер. Так, что нам надо нам надо срочно онлайн займ в три шага получить деньги выравниваем так хорошо. Так тут три поля и 3 только 1000. Так значит, что нам сейчас надо сделать нам надо во-первых ребят вот этих уменьшить немножечко понять теперь фон для семьи ещё зачем я — это делаю я — это делаю для того чтобы вот тут ещё разместилось поместилось у нас кнопка. Так теперь давайте полностью совсем от работы поля все так — это это — это ведь 1818 сильно большой. Давайте поставим 15 отлично меня устраивает. И всё так и получить получить получить деньги. Так значит, что ещё нам надо сделать поле два поле два. Значит там 3:00 на минуточку значит для того чтобы двигаться. Ведь я сейчас поставил замочек 3 сегодня поставлю замочек если меня надо выбрать я нажимаю левый. Контрол и выбирая тот или иной элемент если надо выбрать группу я просто беру эту вот таким вот образом, но как видите у меня серый фон для того чтобы не хватает у тебя телефон я нажимаю замок. Всё я его просто не могу выбрать и. Как видите я спокойно себе выделяю всё, что мне надо так. Отлично отлично так тут я переношу кнопку.

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

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