Шаг 3. Добавляем текст

Автор: Александр Двораковский. Опубликовано в разделе Лендинг пейдж

Здравствуйте, дорогие друзья. В прошлом уроке мы с Вами начали создание Landing Page, или страницы подписки, задним фоном которой служит видео. Пример для создания такой страницы Вы увидите в этом видео уроке. А это, заготовка той страницы, которую мы создали в прошлом уроке. Ее Вы также увидите в этом видео уроке.

Заданием сегодняшнего урока будет создание текста рекламной акции в верхней части страницы на фоне темной полосы. А также создание фона для вставки формы подписки и верхних рекламных заголовка и подзаголовка.

Начнем мы с создания текста рекламной акции.

Создание Landing Page. Добавляем текст


Подпишитесь на мой YouTube канал

 

Для этого переходим в программу Muse, выбираем инструмент «Текст» в виде буквы Т и зажав левую кнопку мыши обозначаем контуры для ввода текста. Как Вы видите, внутри контура появился моргающий курсор и это значит, что мы может писывать необходимый нам текст – Каждому VIP партнеру такая страница в подарок.

После ввода текста выделяем его и меняем его размер и цвет.

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

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

Как Вы видите, текст у нас появился, но на фоне падающих золотых денежных символов его почти не видно.

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

Возвращаемся в программу Muse, активируем инструмент «Прямоугольник» и зажав левую кнопку мыши обозначаем контуры для подложки текста. Обратите внимание. Контур должен располагаться по всей ширине экрана, поэтому начинаем обводку от левого края и тянем до правого края до тех пор, пока Вы не увидите появление красной вертикальной направляющей, или подсказку в сплывающем окне, указывающее ширину 100 процентов.

Почему это так важно? Давайте уменьшим размер, зальем черным цветом созданный прямоугольник и посмотрим результат в браузере. Минуточку, слишком большой размер. Как Вы видите, темная полоса имеет отступ между своим краем и концом экрана.

Я немного уменьшу размер показа. Сейчас хорошо видно, что полоса не занимает весь экран.

Выставляю размер ширины 100 процентов и в результате фон обложки растянут во всю ширину экрана.

Возвращаемся в Muse и располагаем обложку в том месте, где она должна быть. Так как она перекрыла текст, то правой кнопкой мышки нажимаем на нее, и в выпавшем списке выбираем «Упорядочить» И «Переложить назад». Текст теперь на переднем плане.

Уменьшаю высоту контура и, чтобы фон не был сплошным, задаю ему непрозрачность в районе 60 процентов.

Проверим, что получилось. Отлично. Текст теперь виден хорошо и фон подложки стал прозрачным.
Сравним с примером. Здесь цвет текста более насыщенный высота фона немного меньше.

Вернемся в программу и подкорректируем.

Сравним еще раз. Такой цвет мне даже больше нравиться. Оставлю его таким.

Что дальше? Теперь необходимо создать фон для вставки формы подписки. Возвращаемся в программу, активируем уже знакомый нам инструмент «Прямоугольник» и, зажав левую кнопку мыши, обозначаем контуры для вставки формы подписки. Размещаем его по средине холста. Размеры не имеют значения, так как по ходу работы мы его неоднократно будем регулировать.

Заливаем его черным цветом и также устанавливаем непрозрачность в районе 60 процентов. Проверяем. Отлично.

Сравним с образцом. Здесь, как видно, нижние края углов закруглены. Как нам сделать точно также?

Вернемся в программу и выберем инструмент «Включить/отключить радиус скругления». Выбираем указатели нижних углов и нажимаем на них. Система автоматически закругляет углы со значением 10. Меня это полностью устраивает.

Проверяю. Теперь углы закруглены. Сравним с образцом. На образце я вижу, что по краям контура идет еле заметная цветовая обводка желтого цвета. Чтобы создать такой же эффект вернемся в программу, выберем инструмент «Эффекты» и в нем найдем инструмент «Свечение». Нажимаем, и поставив галочку вот здесь, активируем его. Выбираю цвет свечения желтый. Чтобы увеличить размер обводки выбираю инструмент «Размытие» и устанавливаю значение 13.

Смотрим результат. Все работает.

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

Возвращаемся в программу и проделываем знакомые действия. Инструмент прямоугольник, цвет, закругляю все углы и задаю непрозрачность в районе 70 процентов.

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

Вернемся в программу и уменьшим непрозрачность до 60 процентов.

Смотрим результат. Теперь более-менее. Сравниваем с образцом. Похоже. Но на образце, как мы видим края контура выпуклые, а у нас прямые.

Возвращаемся в программу, опять выбираем инструмент «Эффекты» и в нем найдем инструмент «Скос». Нажимаем, и поставив галочку вот здесь, активируем его. Выставим угол скоса 90 процентов.

Сравним с примером. Очень даже похоже.

Теперь нам осталось вставить верхние рекламные заголовок и подзаголовок.

Для этого нам понадобиться программа «Photoshop». Если она у Вас не установлена, то установить ее тридцатидневную пробную версию Вы можете, точно также, как и программу Muse, используя Creative Cloud. О Creative Cloud я подробно говорил в первом видео.

Итак. Образцы изображений рекламных заголовка и подзаголовка Вы найдете в папке с материалами, которую должны были скачать после просмотра второго урока. Папка будет называться «Рабочие изображения». Вот как они выглядят.

Для того, чтобы изменить их текст, откройте «Photoshop», нажав на изображение в формате PSD.

Активировав инструмент «Текст» в виде буквы Т Вы можете редактировать текст и вписать все, что необходимо Вам. Для примера я впишу «Ваш текст заголовка». Отключаю ненужные слои, выравниваю текст и сохраняю изображение.

Для сохранения в пункте «Файл» выбираю «Save for Web» и обязательно формат PNG24, чтобы фон изображения был прозрачным.

Сохраняю в ту же папку с рабочими изображениями и даю ему название тест 1.

Точно такие же действия можно провести и с вторым изображением поменяв текст на свой.

Когда изображения будут готовы, в пункте «Файл» выбираем пункт «Поместить» и из папки с рабочими изображениями выбираем необходимый нам рисунок. Вставляем его на холст, размещаем в необходимом месте и задаем необходимый размер.

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

Посмотрим, что у нас получилось. Все, как и было задумано.

Точно те же действия проделаем со вторым изображением.

Немножко увеличим размеры фона для подписки. Передвинем внутренний фон ниже и тоже изменим его размер.

Смотрим результат. Мне кажется, что очень даже похоже на страницу с образцом. Осталось добавить несколько штрихов.

Отцентрировать внутренний фон и немножко поднять вверх текст рекламной акции вместе с фоном.

Центрируем

Для того, чтобы поднять и текст, и слой с контуром одновременно, нажимаем клавишу «Шифт», выделяем слои и стрелками на клавиатуре двигаем их в необходимое место.

Проверяем. Все отлично. Задание выполнено и нам остается теперь вставить форму подписки на страницу. Но об этом мы поговорим в следующем уроке.

Задайте вопрос или оставьте свой комментарий:

"Мне искренне жаль тех людей, которые инвестируют деньги в проекты мошенников и тут же их теряют!"

Поэтому считаю своей задачей показать Вам инвестиционную компанию в которой я зарабатываю КРИПТОВАЛЮТУ уже больше года!

Вложил я всего 130 Евро!
За это время заработал больше 10000 Евро!

Друзья мои, я со спокойной душой могу сказать – это то, что Вы так долго искали!