Учимся делать свой лендинг за час без знания языков (Adobe Muse)

[Pattony]

Итак приступим... Сразу скажу, что дизайнер из меня так себе, да и сделал я все это чисто для демонстрации возможностей (причем далеко не всех)) Потратив немного времени на изучение этой проги можно научиться самому клепать неплохие лендинги и не только) Всё зависит от вашей фантазии и конечной цели. В гайде я очень подробно постарался показать основные инструменты проги, по этому, да, многа букав... Для создания лендинга нам понадобится старый, добрый Adobe Muse. Устанавливаем, открываем.


Жмем создать, выбираем гибкое значение ширины (под разрешения адаптировать проще) в ширине страницы пишем своё разрешение экрана (у меня 1920 на 1080), что бы было проще сделать начальный макет, который потом мы адаптируем под все нужные разрешения экрана. Количество столбцов выбирайте на своё усмотрение, эт просто сетка для удобства (рекомендую 10).

Нажимаем "ок". "Домашняя" - эт собственно наш лендинг, там мы будем работать, название потом измените. Тыкаем два раза по ней.

Попадаем сюда.

Го чуть уменьшим масштаб и удлиним рабочее поле для удобства работы. Масштаб можно поменять зажав альт и покрутив колёсиком мыши в нужную сторону, ну или сверху вон там процентики, ставь 75 или 50. Удлинить страницу можно потянув за синенький ползунок снизу, смотри скрин.

Теперь давай замутим фон.
Я просто залью всё серым цветом, ибо у меня будет лендинг из нескольких секций, но можно залить и изображением, для редактирования фона тыкни на белое поле и нажми на верхней панели "заливка"

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

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

Дальше будем мутить меню.
В моём случае, оно будет состоять всего из трёх пунктов, но у тебя же фантазии побольше) Для этого мы создадим кнопки, при нажатии на которые, страница будет автоматически прокручиваться до нужного блока.
Для этого нажми на кнопочку "Инструмент "текст"" в левой панели, зажми ЛКМ в рабочей зоне и тяни, создавая небольшой прямоугольник. Ну и напиши название кнопки, в моём случае, " Почему мы ? ", это будет второй блок лендинга, но к нему позже..

Зальём кнопку норм градиентом.
Для этого на той же левой панельке тыкаем на кнопку "выделение" и нажимаем в верхней панели "заливка", ставим флажок на градиентную и играемся, или делаем как у меня на скрине. Кнопку кста, как и любой элемент, в режиме выделения можно перемещать по рабочему пространству.

Округлим её немного.
Для этого на верхней панели тыкаем по 1 разу на каждый уголочек и играемся с числовым значением, смотри скрин.

Теперь займемся выравниванием текста.
Для этого тыкаем на правой панели "Текст" и ровняем по центру, меняем цвет, размер, сам шрифт и опускаем его на центр с помощью "Отступ перед" обвел на скрине в кружочек.

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

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

Пойдет, теперь возвращаемся к меню текстового фрейма и нажимаем "Нажата кнопка мыши"

Сделаем так, чтоб свечение в момент нажатия на миг становилось интенсивнее (Моргнуло).
Для этого возвращаемся к эффектам и выкручиваем ползунки посильнее, не перебарщивая.

Посмотреть, как у тебя на данный момент все работает на практике, можно нажав кнопку "Просмотр". Анимация свечения пока будет работать только при на ведении конкретно на текст, но после добавления ссылки, все будет норм, но об этом позже.

Теперь просто снова кликни на кнопку и нажми ctrl + C, после этого жмем на рабочее пространство выделяя фрейм и нажимаем ctrl + V, оттягиваем появившуюся кнопку в сторону и повторяем операцию столько раз, сколько нужно кнопок, затем на левой панельке снова кликаем на "Инструмент текст" и переименовываем кнопки.

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

Ну и заполняем контентом свободное пространство основного блока, всему для этого вы научились из описанного выше, я же этого делать не буду, я займусь вторым блоком) "Почему мы ?" Создаём ещё один прямоугольный фрейм, под основным блоком, делаем фон с помощью "заливки" и что то тип названия блока, ну и напишем сами причины с помощью инструмента "текст". (Дизайн топ :spain: )

А теперь добавим видео с ютуба)
Заходим на ютуб, ищем нужный видосик и копируем ссылку на него.

Затем возвращаемся к эдобе, на панели справа тыкаем в "миниприложения", затем, в открывшемся меню "социальная сеть", и там находим "ютуб", зажимаем на нем ЛКМ и тянем в рабочее пространство, выравниваем, убираем лишние галочки в настройках миниприложения (рекомендую самим подробнее изучить меню миниприложений, там много полезных штучек, если что то не понятно обращаемся к ютубу или ко мне))

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

Пойдет, теперь мы можем демонстрировать гигантские возможности нашего продукта)). Теперь сделаем так, чтоб при нажатии кнопки "Почему мы?" в меню на первом блоке в страница прокручивалась на второй блок.
Для этого кликаем на левой панельке, почти в самом низу на якорь и ставим его в самом верхнем левом углу второго блока, даём название.

Затем выделяем нашу кнопку "Почему мы ?" и в верхней панели ищем графу "гиперссылки", "добавить или фильтровать" и выбираем наш якорь. (после этих действий можете посмотреть как все будет работать нажав в самой верхней панели "просмотр". Штатный просмотр программы может подтормаживать, в браузере все работает плавно.)

Теперь по-резкому создадим блок с контактами. (можно обойтись и без него указав контакты в первом блоке). Для этого заходим на сайт с бесплатными png иконками и ищем (вк, ютуб, дис, телега и т. д.), создаем третий блок, делаем там небольшие квадратные фреймы изображения, заливаем их скачанными иконками, выделяем иконку и в верхней панели открываем выпадающее меню раздела "гиперссылки" и вставляем ссылку на вашу страницу, проделываем это со всеми иконками. Так же я добавил в блок слайдшоу из миниприложений, там могут быть скрины с отзывами, демонстрация софта и т. д. настраивается слайдшоу очень гибко, там разберётесь... Так же, иконкам можно добавить анимацию свечения или изменения прозрачности, вы научились это делать с кнопками меню. И не забываем поставить на блок якорь и привязать его к кнопке "Контакты".

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

Ну все, в целом все готово, ровняем все элементы как вам нужно и приступаем к предпоследнему шагу, а именно - адаптации под разрешения. Для этого используем вот эту табличку. (эт только под компудахтеры).
Для адаптации сверху, справа рабочего поля есть ползунок, зажимаем на нем ЛКМ и тянем вправо или влево изменяя ширину. При достижении нужной ширины перестаем тянуть и сверху на шкале нажимаем "+" "создать точку остановки. и он создаст нам макет под это разрешение. Шаблон у нас гибкий, и ничего слетать не должно, но если что то слетело, поправляй ручками и все будет норм.


Желательно адаптировать под все разрешения. (первый столбец и первое число в таблице разрешений эт ширина в пикселях, по ней делай точки остановки). А так все, лендинг готов. Осталось залить его на хостинг, чтоб мамонты могли переходить на него по ссылке. Желательно иметь платный, но и бесплатная версия сойдет, таких много, поищешь.

Если ты закончил с редактированием лендинга нажимай на самой верхней панели справа выпадающее меню кнопки "опубликовать" и тут есть два варианта. Первый эт передача по FTP в личном кабинете вашего хостинга вы можете найти данные для ввода и залить сайт на хостинг прямо с проги (смотри скрин). ну и второй вариант, "экспорт в формате HTML. Сайт будет в папке и вы можете залить его на хостинг самостоятельно, ну или посмотреть, как он будет выглядеть в браузере открыв файл "index.html".

 

[Drake3221]

ну как минимум на лайк вроде заработал

 

[restore9]

я даже со знанием языка не очень ебу как вариться в этом