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

В этом видео я показал как сделать мобильный макет под адаптивную версию лендинга.
Если вы хотите получить максимум от веб-дизайна, то приглашаю вас на мои обучающие программы:
💎 Программа наставничества по веб-дизайну лично со мной.
Большая база актуальных свежих видео уроков, доступных в любое время для просмотра
Групповые онлайн занятия
Проверка заданий и обратная связь лично от меня или от куратора
Эксклюзивы для каждого тарифа
Попасть можно через эту анкету Предзаписи ➡️ forms.gle/tDjs...
После заполнения анкеты, я свяжусь с вами, расскажу условия участия и отвечу на вопросы 👍🏻
...
👨‍💻 Обучающая программа по веб-дизайну.
Если вы хотите начать свой путь в веб-дизайне, прокачать умения и увеличить средний чек проектов, то я приглашаю вас на свою обучающую программу, где за 8 недель вы научитесь делать дизайн лендингов в Figma, верстать их, делать оформление для социальных сетей, находить клиентов на свои услуги + продавать их за дорого. ✅ Подробнее про обучающую программу: fire.hawk-styl...
...
✨ Курс по Нейросетям [NeuroXpert] со скидкой 50%: ai.hawk-style.com
...
🔔 Подписывайтесь на канал: / @hawkstyle1
Тут я постоянно выкладываю интересные видео на тему веб дизайна и заработка на этом виде деятельности.
...
Добавляйся ко мне в социальных сетях:
Я в ВК: hawkstyle
Блог ВК: hawksty...
Instagram: / hawkstyle
Telegram-канал: t.me/alexey_sa...
Facebook: hawkstyled
Сайт: hawk-style.com
Чат ВК, 900+ фрилансеров уже тут: vk.cc/abeuZ6
Скачать бесплатно мою книгу: book.hawk-style...
///
Также рекомендую посмотреть другие мои видео, которые будет полезны всем, кто работает с фотошопом или хочет научится веб-дизайну:
Как сделать дизайн первого экрана лендинга • Дизайн лендинга в фото...
Как сделать дизайн визитки в фотошопе • Дизайн визитки в фотош...
Дизайн баннера для ВК в фотошопе за 10 минут • Дизайн баннера ВК. Как...

[@HawkStyle1]

Адаптивный дизайн лендинга. Как сделать дизайн адаптивного лендинга в фотошопе? Присоединяйтесь в мой блог ВК: vk.com/hawkstyle_vkdesign

[@ИринаКочубей-я3ш]

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

[@katrinafedoroba4622]

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

[@HawkStyle1]

Отлично)

[@boykodmitriy]

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

[@Lucky.manifest]

Отличные уроки, спасибо!

[@AndreyPopov]

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

[@КоучЮлияГребенюк]

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

[@HawkStyle1]

1. Да, примерно 50 px в среднем 2. Обязательно заранее обсуждать это с клиентом, потому что это влияет на цену проекта. Я всегда даю на выбор 2 цены: с моб версией и без неё, чаще всего заказывают с моб., потому что сейчас более половины трафика на сайте идет с телефонов и важно чтобы она была. Спасибо за идеи для новых видео)

[@timurubaydullaev5282]

Бомба

[@lavalexse]

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

[@HawkStyle1]

Такой фон сохраняется в формате PNG (с прозрачным фоном) и без проблем интегрируется в верстку

[@andrTaylor]

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

[@HawkStyle1]

Я специально их не адаптировал, потому что верстальщик на основе одного окна может всё сделать сам

[@imeegogg6884]

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

[@HawkStyle1]

Можно не подгонять

[@Maresto1000]

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

[@HawkStyle1]

1. Я никогда не делаю макет для горизонтального моб.вида., это не нужно. 2. Под планшет не делаю макеты, на нем отображается также как в вебе. 3. Просто скрытыми слоями в psd оставить.

[@Maresto1000]

@@HawkStyle1 благодарю за ответ! Извините за назойливость, но помогите понять, как же тогда будет себя "вести" мобильная версия, если пользователь перевернет телефон горизонтально? И как планшет отобразит все как в вебе, если я делаю макет сайта размером 1170 px, а размер планшетной версии в 720 px? Ведь места по ширине станет намного меньше. Благодарю за внимание!

[@HawkStyle1]

@@Maresto1000 Если работать с нормальным верстальщиком, то он расставит всё ровно и для 720 и для 1170. Если верстальщик тугой, то лучше рисовать вообще все возможные размеры

[@Maresto1000]

@@HawkStyle1 спасибо, стало понятнее. Благодарю за ответы!

[@veronikan.121]

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

[@HawkStyle1]

А какой изначально размер фотографии в пикселях?

[@veronikan.121]

@@HawkStyle1 7760х10376, 4МБ, то есть фотка сама по себе хорошего качества, как и другие фотографии на макете, но при изменении размера через кнтрл+т (уменьшаю) все становится расплывчатым. Так и должно быть? Или при верстке берутся оригиналы фотографий? Где уверенность, что при заливке на сайт фотографии не потеряют своего качества и будут нормально видны. Спасибо заранее за ответ.

[@HawkStyle1]

@@veronikan.121 Такие большие фото в виде смарт объекта становятся расплывчитыми только в тот момент пока они трансформируются через CTRL+T, но когда трансформирование завершено и вы это подтвердили через ENTER - фото снова становится четким.

[@jaymahone9354]

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

[@HawkStyle1]

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

[@GoodmanAlexandr]

Фотошоп в 18 году для веб? Серьезно?

[@HawkStyle1]

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

[@МадиярСыздыков-м2м]

H2M а что еще есть? Я просто с поселка

[@nagoloe.r.a.5593]

Громко прокричи свое SKETCH!