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

[@HawkStyle1]

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

[@samidinmustafin1515]

Не подскажите как дальше продолжить 2 страницу

[@АлимжанАбдурахманов-п6з]

@Sapolsky Ссылка на psd-макет сетки: goo.gl/BH25YT

[@far_from_under]

Самый полезный урок во всем ютубе по созданию дизайна сайта в PS!!

[@cgzver]

Хмм. Рад что начал освоение лендингов с ваших уроков. Это прям доставялет!

[@bystrovbiz]

Толково, спасибо! продолжай развивать канал!

[@serenartix]

Большое спасибо! Замечательный урок

[@fody2029]

Как убирать и возвращать направляющие линии?

[@HawkStyle1]

ctrl + ;

[@Leonfeedb]

Привіт, ці розміри ПСД-файлу та висота 800 пікс. ще актуальні на 2024 рік для лендінгу?

[@HawkStyle1]

Так

[@ReplicantV]

Можно узнать по направляющим? Скачал, спасибо. Но что с соотношениями сторон? У меня показыапет что ширина 1920. Это что то нестандартнле или как? Для каких это мониторов? Оно на мониторах будет урезаться? Фотошоп обычно предлагает разрешение 1366 на 768.

[@HawkStyle1]

Это стандарт веб версии, есть контентная часть, есть фоновая

[@ReplicantV]

@@HawkStyle1 спасибо

[@maksmans123]

Странно, вроде ж контент располагается обычно в пределах колонок, а не крайних гутеров. И по краям в оригинальной сетке отступ по 15пкс а не 30.

[@musslim_808]

Как можно получить ссылку на скачивание материалов для урока?

[@HawkStyle1]

В описании под видео ссылка на сетку. Материалы я не отправляю

[@НиганНиганов-ъ4г]

@@HawkStyle1 почему?

[@natel824]

Большое спасибо за урок. У меня есть один вопрос: шрифты и фигуры почему-то нечеткие получаются. Разрешение стоит 72px

[@bloodycasserole3608]

там вкладка есть типа какой шрифт , мягкий четкий и прочее

[@Маркетолог05]

Алекс а как вы настроили фотошоп что он автоматически открывает загружаемые файлы?

[@HawkStyle1]

Какие загружаемые файлы?

[@MirotVorec-jb2cn]

Как вы в начале видео поменяли масштаб макет сетки?

[@HawkStyle1]

Окно > навигатор > ставите ползунок на 100%

[@topKinorezka]

переходи на фигму или скетч, не стоит мучать себя фотошопом.

[@appleipad4348]

Thanks a lot 👍

[@sergekurchenko]

Алексей, вы в дизайне сколько лет? Работаете быстро и качественно.

[@HawkStyle1]

8й год уже

[@mr.goodman9309]

8 лет - это скорее только навыки ФШ. Гляньте "дизайн" его сайта по обучающему курсу. Тексты пляшут. Выравнивание по центру? Серьезно?! Типографика просто на 0. На сайте ни какого юзабилити (UI/UX) - абсолютно неудобная навигация (ее просто нет). В 2020 листать огромную простыню без липкого меню или хотя бы кнопки наверх? Сразу видно "профи" веб-дизайна. "За июнь 2018 сделал более 300 лендингов" - это что же, более 10 лендингов в день??! Люди - не ведитесь на этих горе учителей. Настоящий веб-дизайнер - это не тот человек, который хорошо знает фотошоп и умеет в нем рисовать, а тот, который знает как должны работать сайты (в плане продаж и подачи контента), знает цель сайта, знает для кого он делает этот сайт (не для заказчика, а для целевой аудитории) и может это все подать - грамотно, аккуратно и стильно упакованным в дизайн, правильно расставляя акценты. Автору стоит назвать свой курс "Обучение по фотошопу" - тогда вопросы отпадают. И кому нужен ваш сертификат? Таких сертификатов от таких же "Алексеев Савченко" можно нарисовать сотни. Толку то от них. И еще: в партнерах бизнес молодость?! Лего????))) Ну да конечно)) И Сбербанк тоже? - карточкой то пользуетесь. А Яндекс и Ютуб тоже партнеры. Смешно.

[@ohmyorion]

@@mr.goodman9309 человек, которого вы описали ( про цель сайта, продажи и все такое) - это маркетолог-прототипировщик, и уж никак не дизайнер )

[@mr.goodman9309]

@@ohmyorion веб-дизайн это не просто рисование картинок.

[@tonikaalive]

Скажите пожалуйста размер холста

[@HawkStyle1]

Под видео есть ссылка на psd-макет сетки. Ширина рабочей области 1920 px

[@mickeyrourke5234]

Подкажи какой версией фшопа пользуеш ,?

[@HawkStyle1]

photoshop cc

[@kirilpetko]

Привет. Ты используешь сетку 1500+px по ширине, почему именно такая ширина? У меня в скетче бутстраповская сетка 1440 - макет, 1170 с отступами 15px - рабочая область. И еще, у меня экраны лендинга получаются где-то 800 по высоте с рабоче областью 600-650. на мониторе 1440 все хорошо. Я что-то не правильно делаю? Ведь на мониторах 1920 на 1080 экраны лендинга не на всю высоту... и совсем иначе все смотрится.

[@HawkStyle1]

Привет. Я использую сетку 1140 px, 1500 там нет. Высота экрана лендинга берется за основу самый маленький размер 650px, но не обязательно все экраны делать именно в таком размере, только самые важные 1-2й экраны. Остальные можно и выше

[@Smartooth]

братюнь какую версию фотошопа используешь?

[@HawkStyle1]

Photoshop cc

[@АлександрТимощенко-ч1е]

Как у Вас направляющие при перемещении появляются на весь документ? У меня появляются через раз, и по 3 мм только, а у Вас через весь документ. Как сделать? ) Я про быстрые направляющие, которые при перемещении помогают центрировать объект с другим

[@HawkStyle1]

CTRL+H

[@HowEverything]

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

[@HawkStyle1]

Можно всегда эксперементировать) Мы тестируем разное размещение элементов на лендинге уже в сверстанном варианте исходя из данных вебвизора.

[@arsensuleimenov3403]

какова высота прямоугольника? (не та что 650)

[@HawkStyle1]

Какого именно?

[@ТораКрыма]

Неплохо конечно. Жаль, что они все такие однообразные делаются. Ты сделал, другой до тебя похожий сделал, потом ещё кто-то подобное нарисовал. Дизайну конец.

[@larson43]

Как это на хостинг залить, кто знает, может ссылку дадите?!

[@Maxim3540]

когда сверстаешь сам код тогда можно и залить

[@КлимКуприянов-б4ч]

Не понятно какой же размер у страниц. В первом уроке ты говорил что 650 пикселей, а в итоге больше)

[@HawkStyle1]

Размер первого экрана 650-900 в среднем

[@ДОИПОСЛЕ-э7о]

Скажите название шрифта

[@HawkStyle1]

Gotham pro

[@darkdreamdeathcore]

а как верстать потом?

[@HawkStyle1]

На коде, weblofw, wordpress

[@darkdreamdeathcore]

@@HawkStyle1 на Tilda можно?

[@HawkStyle1]

@@darkdreamdeathcore на любом конструкторе

[@darkdreamdeathcore]

@@HawkStyle1 а есть видео?

[@semdevmaster]

Нет баланса, перевес на левую сторону. А за градиентную обводку в рамке у кнопки многие верстальщики проклянут тебя) Во многих студиях такой дизайн не пройдёт этап передачи на вёрстку. И только истинные гуру возьмутся за такую красоту.

[@HawkStyle1]

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

[@romanit9107]

Дизайн сайта готов что дальше?

[@МалашинськийДенис]

12:25 у меня нету такого, что делать?

[@SimpleGlance]

Привет, что-то не могу разобраться в psd-макетом сетки, как ею пользоваться-то?

[@69hp_pubg]

Ctrl+H включит сетку

[@РоманДегтярь-м3с]

Как убрать убрать сетку и заново вернуть

[@HawkStyle1]

CTRL+;

[@АйнурСприд]

После 9 класса получится стать веб дизайнером? Очень нравится эта работа.

[@HawkStyle1]

Да

[@ainuryusupov8622]

@@HawkStyle1 А что за программа в которой делался этот лендинг?

[@HawkStyle1]

@@ainuryusupov8622 Фотошоп

[@АйнурСприд]

Алексей Савченко По белой теме сначала и не понял, у самого на пиратке стоит темная )

[@ХитрыйЕврей-ф3щ]

Только что посмотрел видео про сетку бутстрап, где говорят, что нельзя вылазить за пределы колонок, у тебя наоборот за пределами. Так как ей пользоваться правильно?

[@HawkStyle1]

За пределы сетки не должен выходить контент, но фоновые картинки блоков могут выходить за сетку.

[@ХитрыйЕврей-ф3щ]

Я не про пределы сетки говорю, а про колонки. Сетка состоит из 12 колонок (широкие колонки) и промежутков (узкие колонки). Контент должен начинаться именно в широких колонках, а у тебя заголовок начинается в первом промежутке, где должен быть отступ. Вот я и хочу разобраться где я не прав.

[@HawkStyle1]

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

[@ХитрыйЕврей-ф3щ]

Спасибо большое, Алексей, успехов тебе!

[@geezy9458]

спсссс

[@user-cl1ev1oz9d]

Что-то напоминает hello, brand

[@HawkStyle1]

В каком месте напоминает..?

[@JavoxPro]

Ты всё слишком быстро делаешь Я не успею даже не знаю Зай что к чему Ты хорошо объясняешь но слишком быстро

[@est_kz]

А за 5 лет особо ничего не поменялось)

[@HawkStyle1]

Основы единые