Адаптивный дизайн лендинга. Как сделать дизайн адаптивного лендинга в фотошопе

В этом видео я показал как сделать мобильный макет под адаптивную версию лендинга.

Если вы хотите получить максимум от веб-дизайна, то приглашаю вас на мои обучающие программы:

💎 Программа наставничества по веб-дизайну лично со мной.
- Большая база актуальных свежих видео уроков, доступных в любое время для просмотра
- Групповые онлайн занятия
- Проверка заданий и обратная связь лично от меня или от куратора
- Эксклюзивы для каждого тарифа

После заполнения анкеты, я свяжусь с вами, расскажу условия участия и отвечу на вопросы 👍🏻
...

👨‍💻 Обучающая программа по веб-дизайну.
...

...

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

Добавляйся ко мне в социальных сетях:

///

Также рекомендую посмотреть другие мои видео, которые будет полезны всем, кто работает с фотошопом или хочет научится веб-дизайну:

[HawkStyle]

Адаптивный дизайн лендинга. Как сделать дизайн адаптивного лендинга в фотошопе?

[zwihljo]

Алексей, спасибо за видео. Все очень четко, понятно объяснили. Да еще и лайфхаками с нами поделились, полезное видео получилось!)

[katrinafedoroba]

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

[AndreyPopov]

Спасибо ! Узнал много нового для себя !

[boykodmitriy]

Крутой прием по работе в десктопной версии, обязательно попробую. Спасибо.

[kcbpqnd]

Спасибо за видео, все понятно. Алексей, подскажите:
1. Расстояние между блоками для мобильной версии делать лучше где-то в 2 раза меньше, чем для веб-версии? Примерно 50 рх
2. Мобильную версию дизайнер отрисовывает по умолчанию или это надо обсуждать с заказчиком? Или заказчик говорит: надо вот это. И ты уже по умолчанию рисуешь и для мобилки, и для планшета. Или все-таки все форматы обсуждаются с заказчиком и есть доплата за еще один формат? Интересен этот вопрос ценообразования.

Хотелось бы увидеть видео, как вы передаете свою работу верстальщику: в каком формате, какие приписки делаете.

Еще интересны видео, в котором рассказывается, как сделать какие-то эффекты в фотошопе
Спасибо)

[lavalexse]

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

[veronikan.]

Добрый день. Спасибо за видео. Меня измучал вопрос, как уменьшать фотографии (smart objects) через crtl+t, если при сжатии лезут пиксели и фотография все-равно выглядит отвратно при приближении....
Спасибо большое, заранее

[imeegogg]

В том блоке, где 6 шагов к новому дому, нужно ли остальные 5 шагов редактировать и подгонять под размеры первого шага?

[Maresto]

Здравствуйте! Спасибо за полезное видео. У меня к вам вопрос, помогите, пожалуйста, разобраться в таких нюансах:
1. Если я делаю мобильную версию в 320 px, то получается, что это вертикальная версия отображения сайта в мобильном, под какой размер мне нужно ориентироваться, чтобы сделать также горизонтальную?
2. Слышала версию, что макет под планшет размером в 720 px (портрет) делать необязательно, что он просто может в данном случае отображаться как мобильная версия (альбом). Правда ли это или лучше сделать две отдельные версии? И нужно ли, чтобы эта версия была похожей на мобильную (я имею ввиду нужно ли делать уже на данном этапе слайды в один ряд, карточки из нескольких рядов в один и т.д.)
3. Как мне правильно передать верстальщику работу мобильной версии в тех моментах, где я делаю слайды в один ряд. Нужно ли мне все карточки наложить друг на друга в фотошопе и скрыть все ненужные слои? Тоже самое касается кнопки «Смотреть все проекты». Мне нужно также отрисовать отдельно каждый «скрытый» проект или ленту всех «скрытых» проектов и также отключить эти слои в макете?

[jaymahone]

Приветствую, Алексей!
Вопрос такой- почти везде, при создании моб. версии дизайнеры не уменьшают блоки, картинки и текст. И говорят что нельзя уменьшать так. Они стараются удалять не нужные блоки или смещают их вниз. Короче говоря делают все, что бы главная часть контента осталась, но не в коем случае не уменьшают текст, блоки итд.. И я увидел как работаете Вы, и это проще, да. Но можно ли так делать? Не будет ли верстальщик потом "ругаться?" ( особенно если вы- с ним не работали ранее) И вообще, будет ли потом это смотреться на мобильном все?

Спасибо!

[andrTaylor]

Алексей, вы забыли адаптировать pop up 1 и 2) в целом справился сам на основе предъидущих адаптаций)