Как создать посадочную страницу для сайта портфолио с помощью Adobe Muse

Ознакомившись с этой статьей, вы сможете:

• Оптимизировать графику для сайта с помощью Adobe Illustrator.
• Отображать контент в перспективе с помощью Photoshop.
• Создать профессиональную посадочную страницу с помощью Adobe Muse.

Ресурсы:

• Перейдите по ссылке и загрузите изображение для заголовка. Его размеры должны составлять 1400 на 750 пикселей. Вот скриншот с сайта.

• Перейдите сюда и сюда, и загрузите пакет социальных иконок и иконку стрелки вниз.
• Скачайте векторное изображение экрана iMac 27'', которое будет использоваться для отображения проекта«дизайн сайта».
• Откройте стационарное приложение creative cloud и загрузите мини-макеты iPhone и iPad. Они будут автоматически добавлены в библиотеку Photoshop.

Шаг № 1: Как оптимизировать графику для сайта с помощью Adobe Illustrator:

1. Откройте eps файл социальных иконок в Illustrator. Выберите иконку Facebook (квадратная версия) и нажмите Ctrl + Shift + G, чтобы разгруппировать эти иконки.

2. Кликните за пределами холста и снова выберите иконку Facebook. Затем перейдите к панели «Преобразования», расположенной вверху, задайте W = 19,5, H = 19,5 и нажмите Enter.

3. Нажмите Ctrl + C, а затем Ctrl + N. В диалоговом окне введите 'static_facebook_icon' в поле «Название», W = 20 и H = 20. Убедитесь, что в раскрывающемся списке выбраны пиксели. Нажмите «ОК».

4. Нажмите Ctrl + V, чтобы вставить иконку Facebook и правильно выровнять ее.

5. Перейдите в меню Файл> Сохранить для веб (Alt + Shift + Ctrl + S). Выберите из раскрывающегося списка, расположенного в правом верхнем углу, PNG-24. Нажмите «Сохранить» и сохраните файл в нужном месте. Кроме этого сохраните файл в Illustrator (Ctrl + S)

6. Повторите шаги 2 - 5 для иконок Twitter, Google Plus, LinkedIn, Behance и сохраните их для веб.
Примечание. Формат PNG лучше подходит для иконок и векторной графики.

7. Аналогичным образом оптимизируйте пять иконок для изображения заголовка. На этот раз измените цвет на белый. Для этого выберите иконку, откройте раскрывающийся список «Заливка», расположенный в левом верхнем углу мен. Выберите белый цвет и сохраните для веб. Теперь у вас есть 10 иконок - 5 серых и 5 белых.

8. После этого оптимизируйте иконку стрелки вниз (цвет: белый, документ W = 30px, H = 20px) и сохраните его для веб в формате PNG-24.

9. Создайте новый документ размером 1400 на 750 пикселей и назовите его "header_image".

10. Перейдите в меню Файл> Поместить и найдите изображение, загруженное с сайта pexels.com. Кликните по холсту, чтобы настроить изображение внутри холста.

Подсказка: Нажмите на клавишу «Z», удерживайте нажатой клавишу Alt и дважды кликните по холсту, чтобы уменьшить масштаб и видеть сразу весь холст.

11. Выберите инструмент «Прямоугольник». Создайте прямоугольник и преобразуйте его размеры в W = 1400, H = 750px. Затем перетащите этот прямоугольник на открытое изображение.

12. Выбрав этот прямоугольник, откройте список меню выбора библиотек образцов, расположенный в нижнем левом углу. В этом списке перейдите в раздел «Градиенты», «Earthtones».

13. Выберите «earthtone 30», как показано на скриншоте ниже, и закройте панель.

14. При выделенном прямоугольнике перейдите на вкладку «Градиент», расположенную в правой части окна. Если ее там нет, нажмите Ctrl + F9. Нажмите на средний ползунок градиента и перетащите его в крайнее левое положение.

15. В поле «Непрозрачность» (расположенном вверху) выставьте87% и нажмите клавишу Enter.

16. Сохраните это изображение для веб в формате JPEG (качество 86%). Кроме этого сохраните файл и в Illustrator.

Шаг №2: Подготовка ресурсов в Photoshop:

17. Откройте Adobe Photoshop CC. Перейдите в меню Файл> Новый. Задайте имя «ecommerce_design», W = 619px и H = 310px.

18. В панели «Библиотеки» (расположенной с правой стороны) выберите ipad mini mockup, которую мы скачали, и перетащите на холст.

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

Примечание. Чтобы переключаться между инструментами масштабирования и выбора, используйте клавиши «Z» и «V». Если вы не можете найти панель библиотек, перейдите в меню Окно> Библиотеки.

20. Выберите инструмент «Прямоугольник» и создайте внутри холста прямоугольник любого размера. Задайте W = 1024px и H = 768px и убедитесь, что иконка цепи не активна.

21. Кликните по иконке цепи, чтобы выбрать ее. Задайте W = 290px и нажмите Enter. Сверните эту панель.

22. В палитре «Слои» выделите Rectabgle 1, кликните правой кнопкой мыши и выберите пункт«Преобразовать в смарт-объект».

23. Перейдите в меню «Редактирование», «Произвольная трансформация». Снова откройте меню Редактирование> Трансформация и выберите пункт «Скос».

24. Захватите один угол прямоугольника и перетащите его на один из углов экрана ipad. Сделайте это для всех четырех углов и нажмите Enter. При необходимости используйте инструмент «Масштабирование».

25. Удалите фоновый слой. Кроме этого сделайте слой Rectangle 1 невидимым, кликнув по иконке глаза, расположенной слева от него.

26. Повторите шаги 18-22, чтобы создать еще один прямоугольник, преобразовать его в смарт-объект и сделать каждый его угол совпадающим с углами экрана ipad.

27. Сделайте слой rectangle 1 видимым, а слой ipad невидимым.

28. Кликните правой кнопкой мыши по слою rectangle 1и выберите пункт «Редактировать содержимое». Откроется новая вкладка. Перейдите в меню Файл> Поместить встроенные, найдите «screen1.png», который находится в папке «Logos». Выберите файл и нажмите Enter, а затем Ctrl + S. Это изменение будет применено кrectangle 1в основном файле.

29. Сделайте то же самое для rectangle 2, только на этот раз используйте файл "screen2.png". Переместите слои вверх или вниз в палитре слоев по своему усмотрению. Удалите слой ipad.

30. Кликните правой кнопкой мыши по любому слою прямоугольника и выберите пункт «Параметры смешивания». Выберите стиль «Тень» и задайте значения, показанные на рисунке.

31. В этом диалоговом окне, рядом с режимом смешивания, есть поле «Цвет». Кликните по нему и задайте следующие значения цвета.

32. Примените тот же эффект тени ко второму слою. Нажмите Alt + Ctrl + Shift + S. Выберите PNG-24 и нажмите «Сохранить».

Примечание. Таким образом, вы сможете размещать сайт или любое изображение в перспективе. Просто нужно будет знать точное разрешение устройства. Сделайте это для макетов iPhone и iMac для отображения проектов «Дизайн логотипа» и «Дизайн сайта».

Шаг № 3: Настройка рабочего пространства в Muse:

33. Откройте Adobe Muse CC. В разделе «Создать новый» выберите «Новый сайт». Откроется следующее диалоговое окно.

Примечание. Еще один способ создать новый сайт – перейти в меню Файл или воспользоваться клавиатурной комбинацией Ctrl + N.

34. В диалоговом окне откройте меню «Гибкая ширина». Выберите пункт «Фиксированная ширина», измените значение ширины страницы и количества столбцов, как показано ниже. Значение поля «Зазор» изменится автоматически.

35. Откройте раздел «Дополнительные настройки» и установите флажок для опции «Липкий футер». Убедитесь, что сайт выровнен по центру окна браузера. Нажмите «ОК». Adobe Muse перейдет в режим PLAN.

36. Нажмите Ctrl + S и сохраните сайт в нужном месте.

Примечание. Параметр «Гибкая ширина» предназначен для создания адаптивного макета. Мы выбрали фиксированную ширину, потому что создадим эффект прокрутки, который не работает с адаптивными сайтами.

37. Дважды кликните по A-master, который расположен внизу в серой области. В панели инструментов, расположенной в левой части окна, выберите «Инструмент текст».

38. Создайте на холсте текстовое поле. Нажмите Ctrl + T, чтобы открыть панель текста. В раскрывающемся списке шрифтов найдите «Веб-шрифты» и выберите пункт «Добавить веб-шрифты».

39. Появится новое окно. Выберите вкладку ‘edge web fonts’, скачайте перечисленные ниже шрифты:

• Monoton;
• Telex;
• Numans;
• Raleway;
• Lato;

После загрузки шрифтов удалите текстовое поле.

40. Откройте панель «Слои», расположенную с правой стороны, или перейдите в меню Окно> Слои. Нажмите на иконку папки, расположенную внизу справа. Дважды нажмите на нее, чтобы создать еще два слоя.

41. Дважды кликните по «layer 1». Появится окно параметров слоев. В поле имени введите «home_header» и нажмите «ОК». Повторите этот процесс для двух других слоев. Назовите их «static_header» и «content».

42. Расположите слои в порядке, показанном на рисунке ниже, перетащив их вверх или вниз. Сохраните внесенные изменения.

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

43. Выберите слой «static_header» и скройте панель.

Шаг № 4: Создание статического заголовка:

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

45. Выберите инструмент «Прямоугольник». Создайте на холсте небольшой прямоугольник и убедитесь, что цвет его границы «красный». Это указывает на то, что он находится внутри слоя «static_header».

46. ​​Перейдите в раздел «Изменить размер» («Преобразовать»в более старых версиях Adobe Muse) и задайте H = 80.

47. Перетащите прямоугольник и поместите его внутри области заголовка так, чтобы он привязывался к направляющим «верх страницы» и «заголовок».

48. Увеличим ширину прямоугольника и зададим для нее 100%, чтобы сделать ее масштабируемой для каждого размера экрана. Растяните прямоугольник в обе стороны, чтобы он примыкал к краям страницы. Когда достигнете края, на направляющей оранжевого цвета появится сообщение о том, что объект был привязан. Также в сообщении будет указано W = 100% или W = 1400.

49. При выделенном прямоугольнике нажмите на «Заливка» в меню приложения и выберите белый цвет.

50. Нажмите на пункт «Обводка», который располагается рядом с «Заливка». Нажмите на иконку цепи, чтобы деактивировать ее. Введите «1» в поле ширины нижнего края обводки.

51. Откройте выпадающее меню «Обводка»и задайте для каждого из значений R, G и B - 235. Затем кликните по иконке папки с загнутым краем, чтобы создать новый образец. Появится окно параметров образца. Нажмите «ОК» и сохраните изменения.

52. Перейдите в меню Файл> Поместить. Найдите файл «static_logo.png» и нажмите «Открыть». Указатель курсора изменит свой внешний вид.Кликните по холсту, чтобы поместить в него загруженный файл.

53. Затем переместите это изображение на прямоугольник заголовка, выровняйте его по вертикали и привяжите к левой границе.

54. Снова перейдите в меню Файл> Поместить и выберите все статичные иконки социальных сетей, которые мы оптимизировали с помощью Illustrator. Нажмите «Открыть». Вы увидите, что указатель курсора будет содержать цифру 5 (количество загруженных изображений). Если хотите переключиться на другую иконку, чтобы поместить ее первой, используйте клавиши со стрелками на клавиатуре.

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

56. Введите 11 в поле, расположенное ниже параметра «Распределить интервал». Выберите параметры A и B.

57. Выберите пункт «Сгруппировать» или нажмите Ctrl + G. Переместите эту группу на прямоугольник заголовка и привяжите ее к правой границе.

58. Создайте текстовое поле и введите в него HOME. Нажмите Ctrl + T и выберите:

Шрифт: Telex;
Размер: 13;
Цвет: Черный;
Выравнивание: по центру;
Интерлиньяж: 120%.
Отрегулируйте ширину и высоту текстового поля в соответствии с размером шрифта.

59. Создайте еще четыре текстовых поля WORK, SERVICES, CONTACT и ABOUT. Выделите их, перейдите в панель «Выравнивание». Повторите то, что мы сделали с иконками социальных сетей. На этот раз измените значение «Распределения интервалов» на 50. Сгруппируйте и переместите текстовые поля на прямоугольник заголовка.

60. Привяжем эти объекты к верхней части окна браузера, что сделает наш заголовок статичным. Он всегда будет отображаться в верхней части окна браузера, независимо от прокрутки. Чтобы сделать это, выберите прямоугольник заголовка, перейдите в раздел «Привязать», расположенный в правом верхнем углу, и кликните внутри него по верхнему среднему квадрату.

61. Аналогично закрепите логотип в левом верхнем углу, группу меню посередине вверху, а группы иконок социальных сетей - вверху справа.

Шаг № 5: Установка футера:

62. Внизу вы увидите три направляющих: футер, низ страницы и низ окна браузера. Перетащите направляющую «низ окна браузера» и установите ее с помощью линейки на отметке 770 пикселей. Затем перетащите направляющую «футер» и привяжите ее к направляющей «низ страницы». Это наш подвал.

63. Создайте прямоугольник внутри этой области H = 270 и W = 546 так, чтобы его верхняя и нижняя стороны совпадали с направляющими футера и низа окна браузера.

64. Выбрав прямоугольник, кликните по слову «Обводка». Примените только верхнюю обводку шириной 1 (значения цвета: R = 235 G = 235 B = 235). Перейдите в панель «Выравнивание» и выберите пункт «Выровнять горизонтально по центру» (это второй вариант).

65. Откройте static_logo.png и добавьте текст внутри этого прямоугольника.

Шрифт текста: Arimo;
Размер: 14;
Цвет: R = 37 G = 37 B = 37;
Выравнивание: по центру;
Интерлиньяж: 120%.

66. Символ авторского права можно добавить с помощью панели «Глифы», расположенной в правой части окна приложения. Если ее нет, перейдите в меню Окно>Глифы. Наш футер готов.

Шаг №6: Создание заголовка главной страницы и эффекта прокрутки

67. Закройте главную страницу и вернитесь в режим PLAN.

68. Откройте страницу «Home», дважды кликнув по ней. Откройте панель слоев, выберите слой home_header и скройте панель.

69. Создайте небольшое пространство, перетащив с помощью линейки нижний слой до отметки 4000 пикселей.

70. Теперь создайте прямоугольник шириной 100%. Полноэкранную ширину можно задать, растянув боковые стороны прямоугольника и совместив их с краями страницы.

71. Разверните прямоугольник вверх и привяжите его к верхней части направляющей страницы.

72. Перейдите в панель «Изменение размера», введите H = 750px.

73. При выбранном прямоугольнике кликните по слову «Заливка» (не выпадающее меню) и нажмите «Добавить изображение». Выберите изображение «header_image.jpg», которое мы скачали с Pexels и оптимизировали в Illustrator. В раскрывающемся списке «Подгонка» выберите пункт «Шкала для заполнения» и расположите изображение в левом верхнем углу.

74. В панели «Заливка» есть параметр «Прокрутка». Откройте его и введите 0 в поля начальной и конечной точек движения.Благодаря этому изображение останется неподвижным, и контент будет перемещаться, создавая эффект прокрутки.

75. Создайте текстовое поле и введите в него «ABOUT OUR TEAM».

Шрифт: Telex;
Размер: 13;
Выравнивание: по левому краю;
Цвет: Белый;
Интерлиньяж: 120%.
Переместите его в левый верхний угол изображения.

76. Разместите социальные иконки, которые мы оптимизировали для изображения заголовка. Расположите их на равном расстоянии друг от друга, как это было сделано для статичного заголовка. Сгруппируйте и поместите их в правом верхнем углу изображения.

77. Создайте текстовое поле. Задайте для него размеры W = 944, H = 92. Введите в поле«WE DESIGN THE WEB».

Шрифт: Monoton;
Размер: 72;
Выравнивание: по центру;
Интерлиньяж: 120%.
Задайте для слова «WEB» цвет: R = 41 G = 171 B = 226 и белый цвет для всех остальных слов.

78. Создайте три небольших текстовых поля для SERVICES, CONTACT и BLOG.

Шрифт: Telex;
Размер: 13;
Цвет: белый;
Выравнивание: по центру;
Интерлиньяж: 120%.

79. Откройте изображение 'header_logo.png'. Разместите логотип и эти четыре текстовых блока следующим образом.

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

81. Выделите маленький круг внутри этой кнопки и нажмите «Удалить».

82. Дважды кликните мышью внутри текстового поля Lorem Ipsum, выберите весь текст, удалите его и введите «PORTFOLIO».

83. Активируйте инструмент выбора в панели инструментов. Перейдите в панель «Текст» (Ctrl + T) и измените форматирование текста «portfolio» следующим образом.

84. Выберите кнопку состояния и измените ее размеры на: W = 177, H = 43. Отрегулируйте текстовое поле внутри кнопки.

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

86. При активной кнопке надпись «Кнопка состояния» написано жирным шрифтом. Это называется «текущая область выбора». Данное выделение позволяет узнать, что вы выбрали.

87. Нажмите на надпись «Нормальное» и вы получите четыре разных состояния.

88. Для нормального состояния измените цвет заливки на «Нет» и цвет обводки на «Белый».

89. Выберите состояние «Обратное», измените цвет заливки и обводки на R = 41 G = 171 B = 226.

90. Для состояния «Наведение мыши» и «Активное» необходимые изменения будут применены автоматически.

91. Еще раз выберите состояние «Нормальное», разверните панель «Переход», расположенную внизу. Установите флажок «Затухание» и введите значения, как показано на рисунке ниже.

92. Поместите изображение «down_arrow.png» под кнопкой. У вас должен получиться следующий результат.

93. Заголовок главной страницы готов. Перейдите в меню Файл> Предварительный просмотр страницы в браузере (Ctrl + Shift + E) и проверьте, все ли в порядке.

Шаг № 7: Добавление контента:

94. Вернитесь в Adobe Muse, откройте панель слоев, выберите слой content и сверните панель.

95. Прокрутите страницу вниз до белого пространства и создайте текстовое поле W = 464, H = 60. Введите «OUR RECENT WORK».

Шрифт: Raleway light;
Размер: 46;
Цвет: черный;
Выравнивание: по центру;
Интерлиньяж: 120%.
Выберите слово «RECENT» и измените его шрифт на Raleway Bold.

96. Создайте еще два текстовых поля. Одно с размерами W = 376, H = 165, второе - W = 376, H = 363.

97. Дважды кликните внутри первого поля и введите «WEBSITE DESIGN».

Шрифт: Raleway Extra Light;
Размер: 77;
Цвет: черный;
Выравнивание: по левому краю;
Интерлиньяж: 100%.

98. Дважды кликните внутри второго поля и вставьте какой-нибудь тестовый текст с lipsum.com:

• Для основного заголовка - шрифт: Lato Bold, размер: 30, цвет: R = 33 G = 42 B = 52, выравнивание- по левому краю, интерлиньяж - 120%.
• 
• Для основного абзаца - шрифт: Lato light, размер: 21, Цвет: R = 57 G = 57 B = 57, выравнивание - по левому краю, интерлиньяж - 120%.
• Для заголовка «Client’s Testimonial» - то же, что и для основного заголовка, но размер - 21.
• Для абзаца отзыва - то же, что и для основного абзаца, но шрифт Lato Light Italic

99. Выберите кнопку состояния «portfolio», скопируйте и вставьте ее под текстовым полем, которое создали на предыдущем шаге. Измените текст на «VIEW SITE»:
Для нормального состояния - заливка: нет, цвет обводки и текста: черный.
Для обратного состояния - цвет заливки и обводки: R = 41 G = 171 B = 226, цвет текста: белый.

100. Откройте изображение «imac with website mockup». Расположите изображение, текстовые поля и кнопки следующим образом.

101. Прокрутите страницу вниз до белого пространства и создайте прямоугольник с размерами W = 1200, H = 5. примените верхнюю обводку с шириной 1 и цветом R = 235 G = 235 B = 235. Разместите прямоугольник следующим образом. Он будет выполнять роль разделителя.

102. Скопируйте текстовые поля и кнопки, которые создали в шагах с 92 по 95 и вставьте их под разделителем. Измените текст первого поля на «LOGO DESIGN», а текст кнопки на «VIEW LIVE».

103. Откройте изображение «iphone with logo mockup» и расположите его следующим образом.

104. Скопируйте и вставьте ниже разделитель.

105. Аналогичным образом скопируйте и вставьте текстовые поля и кнопку ниже этого разделителя. Измените текст первого поля на «E-COMMERCE».

106. Откройте изображение «ecommerce_design.jpg», которое мы создали и оптимизировали в шагахс 15 до 30 с помощью Photoshop. Разместите все элементы, как показано на рисунке ниже:

107. Создайте прямоугольник с размерами W = 1004, H = 363, Заливка - нет, ширина обводки - 1, цвет обводки: R, G, B = 235.

108. Внутри прямоугольника создайте два текстовых поля. В первое введите «WHAT WE BELIEVE IS» (шрифт: Raleway light, размер: 35, Цвет: R, G, B = 37, выравнивание - по центру,интерлиньяж - 100%). Выделите слово «BELIEVE» и измените шрифт на «Raleway bold».

109. Во втором текстовом поле введите цитату Мильтона Глейзера: шрифт: Lato Light Italic, размер: 70, цвет: R, G, B = 37, выравнивание - по центру, интерлиньяж - 100%.

110. Скопируйте и вставьте любую из кнопок состояния, измените текст на «SEE OUR WORK». Распределите элементы, как показано на рисунке:

Шаг № 9: Ссылки

111. В панели инструментов выберите «Анкор ссылки» или нажмите клавишу «А» на клавиатуре. Курсор изменит свой внешний вид на указатель с якорем. Поместите этот якорь над текстовым полем «OUR RECENT WORK».

112. Появится диалоговое окно с параметрами анкора. В поле «Имя» введите «recent_work».

113. Выберите изображение стрелки, направленной вниз, расположенное под кнопкой портфолио. Откройте выпадающий список «Гиперссылки» и выберите «recent_work». Сохраните изменения и просмотрите сайт (Ctrl + Shift + E).

Шаг № 9: Добавление альтернативного текста, метаданных, тегов уровней и favicon:

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

115. Появится диалоговое окно свойств изображения. Здесь вы увидите два поля. Одно из них- «подсказка», а второе - «alt текст». Основные различия между ними заключаются в следующем:

Подсказка

ALT текст

• Это заголовок, который появляется, когда вы наводите курсор мыши на изображение.
• В HTML она задается тегом <title> .
• Это информация о содержимом изображения.
• В HTML это задается тегом <alt>.

Альтернативный текст должен быть информативным.

• Он не отображается в браузере, но автоматически вставляется в код.

116. Чтобы добавить метаданные, вернитесь к представлению Plan, кликните правой кнопкой мыши по главной странице и выберите пункт «Свойства страницы». Появится новое окно, содержащее три вкладки: «Макет», «Метаданные» и «Параметры». Переключаясь между этими вкладками, добавьте релевантные ключевые слова.

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

118. Выберите текст, перейдите в панель «Текст» (Ctrl + T). Выберите соответствующие теги и сохраните внесенные изменения.

119. Перейдите в меню Файл> Свойства сайта. На вкладке «Контент» последним вариантом будет «Фавикон» (в старых версиях Adobe Muse этот пункт находится на вкладке «Макет»). Когда наведете курсор мыши на слово "Фавикон", появится подсказка. Рекомендуется добавлять фавикон, поскольку он позволяет сделать ваш бренд и сайт легко узнаваемым.

Шаг № 10: Экспорт сайта:

120. Перейдите в меню Файл> Экспортировать как HTML (Ctrl + E). Выберите место, куда вы хотите экспортировать сайт. Нажмите «ОК». Теперь посадочная страница готова. Вы можете просмотреть ее (файл index.html) в любом браузере.

Конечный результат:

Заключение

Использование дополнительных приложений, таких как Illustrator, Photoshop, Fireworks, Fuse и Animate для создания качественных ресурсов позволяет достичь замечательных результатов. Мы рассмотрели лишь один из возможных подходов к разработке сайта с помощью Adobe Muse. Не останавливайтесь на этом и исследуйте другие возможности.

Пожалуйста, опубликуйте ваши мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, лайки, дизлайки, отклики, подписки!