Как создать потрясающую целевую страницу для веб-сайта портфолио с помощью Adobe Muse
Список того, что можно и чего нельзя делать для веб-сайта-портфолио, бесконечен. Тем не менее, из этих списков я нашел две общие вещи: избегать заполнения одной страницы всем и сохранять целевую страницу и навигацию максимально простыми, привлекательными и легкодоступными.
Этому вы научитесь с помощью этого урока. Помимо этого, вы:
- Узнайте, как оптимизировать графику для веб-сайта Muse с помощью Adobe Illustrator (это необходимо для ускорения загрузки содержимого сайта).
- Уметь отображать содержимое в перспективе с помощью Photoshop.
- Узнайте, как создать профессиональную целевую страницу с помощью Adobe Muse.
ТРЕБОВАНИЯ ЭТОГО РУКОВОДСТВА:
Для правильного понимания и создания именно того, что показано в этом руководстве, вам необходимо загрузить определенные ресурсы с различных бесплатных ресурсов. Тем не менее, вы все еще можете следовать без них.
-
Перейдите на https://goo.gl/KVL9r1 и скачайте этот образ для шапки. Его размеры должны быть 1400 x 750 пикселей. Вот скриншот с сайта. Поместите этот размер в поля нестандартного размера и загрузите его.
-
Перейдите на http://goo.gl/ZeHxOF и http://goo.gl/BASRSP и загрузите пакет значков социальных сетей и значок со стрелкой вниз.
-
Логотипы, использованные в этом руководстве, можно скачать здесь (гиперссылка — файл «assets.rar» прилагается к электронному письму)
-
Перейдите на http://goo.gl/mzw1Xh и загрузите этот вектор экрана iMac 27", который будет использоваться для отображения проекта «дизайн веб-сайта».
-
Откройте творческое облачное настольное приложение и загрузите мини-макеты iPhone и iPad, как показано ниже. Они будут автоматически добавлены в вашу библиотеку Photoshop.
![]()
ШАГ № 1: КАК ОПТИМИЗИРОВАТЬ ГРАФИКУ ДЛЯ ИНТЕРНЕТА В ADOBE ILLUSTRATOR:
1. Откройте файл eps со значками социальных сетей в иллюстраторе. Выберите значок 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 из раскрывающегося списка, расположенного в правом верхнем углу. Нажмите «Сохранить» и сохраните его в нужном месте. Также сохраните файл иллюстратора (Ctrl+S)
6. Повторите шаги со 2 по 5 для значков Twitter, Google Plus, LinkedIn и Behance и сохраните их для Интернета.
ПРИМЕЧАНИЕ. Мы выбрали формат PNG, потому что он имеет большую прозрачность, сравнительно меньший размер и лучше всего подходит для значков и векторов.
7. Аналогичным образом оптимизируйте эти пять значков для изображения заголовка. На этот раз измените их цвет на белый. Для этого выберите значок, перейдите в раскрывающийся список «Заливка», расположенный в левом верхнем углу под меню приложения, выберите белый цвет и сохраните для Интернета. Теперь у вас есть 10 иконок — 5 серых и 5 белых.
8. После этого оптимизируйте значок стрелки вниз (цвет: белый, документ W= 30px, H=20px) и сохраните его для Интернета как PNG-24.
9. Теперь создайте новый документ размером 1400 x 750 пикселей и назовите его header_image. Нажмите «ОК».
10. Перейдите в меню «Файл» > «Поместить» и найдите изображение, загруженное с pexels.com. Нажмите на холст, чтобы поместить его и настроить внутри холста.
СОВЕТ: Нажмите «Z» на клавиатуре, удерживайте клавишу «Alt» и несколько раз щелкните по холсту, чтобы немного уменьшить масштаб, чтобы все было видно сразу.
11. Выберите инструмент «Прямоугольник» в наборе инструментов, расположенном в левой части окна приложения. Создайте прямоугольник и трансформируйте его в W=1400, H=750px. Затем перетащите этот прямоугольник на размещенное изображение.
12. Выбрав этот прямоугольник, перейдите в раскрывающийся список «Заливка», выберите меню «Библиотеки образцов», расположенное в левом нижнем углу. В этом списке перейдите в «Градиенты» и выберите «Земные тона».
13. Выберите Earthtone 30, как показано на скриншоте ниже, и закройте эту панель.
14. Не снимая выделения с прямоугольника, перейдите на вкладку градиента, расположенную в правой части окна приложения. Если его там нет, нажмите Ctrl+F9. Нажмите, удерживайте и перетащите средний ползунок градиента в крайнее левое положение.
15. Затем в поле «Непрозрачность» (расположенном вверху) поставьте 87% и нажмите Enter.
16. Сохраните это изображение для Интернета. На этот раз выберите JPEG и качество = 86%. Также сохраните файл иллюстратора.
ШАГ №2: ПОДГОТОВКА АКТИВОВ В PHOTOSHOP:
17. Откройте Adobe Photoshop CC. Перейдите в «Файл»> выберите «Создать». Введите имя «ecommerce_design», W=619px и H=310px.
18. На панели «Библиотеки» (расположенной справа) выберите загруженный макет ipad mini и перетащите его на холст.
19. Удерживая клавишу Shift, увеличьте его размер, перетащив углы и отрегулировав его внутри холста, как показано ниже.
ПРИМЕЧАНИЕ. Возможно, вы захотите использовать инструмент масштабирования. Чтобы переключаться между инструментами масштабирования и выделения, нажимайте клавиши «Z» и «V» на клавиатуре. Кроме того, если вы не можете найти панель библиотек (или любую другую панель), просто перейдите в меню «Окно» > выберите «Библиотеки».
20. Выберите инструмент «Прямоугольник» и создайте прямоугольник любого размера внутри холста (не беспокойтесь о его цвете заливки). Появится окно свойств. Внутри установите W=1024px и H=768px и убедитесь, что значок цепи не выбран.
21. Теперь щелкните значок цепочки, чтобы выбрать ее. Поставьте W=290px и нажмите Enter. Свернуть эту панель свойств.
22. На панели «Слои», расположенной справа, выберите «Прямоугольник 1», щелкните его правой кнопкой мыши и выберите «Преобразовать в смарт-объект».
23. Затем перейдите в меню редактирования > выберите «Свободное преобразование». Снова откройте меню редактирования > трансформировать > выберите «исказить».
24. Держите один угол прямоугольника так, чтобы он совпадал с одним углом экрана айпада. Сделайте это для всех четырех углов и нажмите Enter. Вы получите следующий результат. При необходимости используйте инструмент масштабирования.
25. На панели «Слои» щелкните правой кнопкой мыши фоновый слой и удалите его. Кроме того, сделайте слой «Прямоугольник 1» невидимым, щелкнув значок маленького глаза слева от него.
26. Повторите шаги с 18 по 22, чтобы создать еще один прямоугольник, преобразовать его в смарт-объект и сделать так, чтобы каждый его угол совпадал с углами экрана iPad, и нажмите Enter.
27. Сделайте слой ‘прямоугольник 1’ видимым, а слой ‘ipad’ невидимым.
28. Щелкните правой кнопкой мыши слой «Прямоугольник 1» и выберите «Редактировать содержимое». Он откроется в новой вкладке. Перейдите в «Файл»> «Поместить встроенный», найдите «screen1.webp», который можно найти в папке «Логотипы», которую вы скачали. Нажмите место и нажмите Enter. Нажмите Ctrl+S. Это изменение будет обновлено для прямоугольника 1 в нашем основном файле. Закройте эту вкладку.
29. Аналогичным образом сделайте это для прямоугольника 2 с ‘screen2.webp’ и сохраните его. Переместите слои вверх или вниз на панели слоев в соответствии с вашими предпочтениями. Удалите слой iPad.
30. Щелкните правой кнопкой мыши любой прямоугольный слой и выберите «Параметры наложения». Появится окно стиля слоя. Выберите последнюю опцию «Тень» и введите значения, как показано ниже.
31. В этом диалоговом окне рядом с режимом наложения есть поле цвета. Нажмите на нее и выберите следующие значения цвета.
32. Примените тот же эффект тени ко второму слою. Нажмите Alt+Ctrl+Shift+S. Выберите PNG-24 и нажмите «Сохранить». Вы получите следующий результат.
ПРИМЕЧАНИЕ. Таким образом вы можете разместить веб-сайт или любое изображение в перспективе. Вам просто нужно знать точное разрешение устройства, на котором вы собираетесь его разместить. Сделайте это для макетов iphone и imac для отображения проектов «дизайн логотипа» и «дизайн веб-сайта», как показано ниже.
ШАГ № 3: НАСТРОЙКА РАБОЧЕЙ ОБЛАСТИ В MUSE:
33. Откройте Adobe Muse CC. Вас встретит экран приветствия. В разделе «Создать новый» щелкните сайт, и появится диалоговое окно нового сайта.
ПРИМЕЧАНИЕ. Другой способ создать новый сайт — выбрать «Файл» > «Новый сайт» или Ctrl+N.
34. В этом диалоговом окне есть раскрывающееся меню с надписью «резиновая ширина». Откройте его, щелкнув по нему, и выберите «Фиксированная ширина» и измените значения ширины страницы и столбцов, как показано ниже. Значение поля «желоб» изменится автоматически.
35. Разверните параметр дополнительных настроек и убедитесь, что установлен флажок «липкий нижний колонтитул». Кроме того, убедитесь, что сайт «выровнен по центру» в области браузера. Нажмите «ОК». Muse перенесет вас в режим PLAN.
36. Нажмите Ctrl+S и сохраните свой сайт в нужном месте. Я рекомендую вам создать отдельную папку для вашего сайта и сохранять ее каждый раз, когда вы вносите изменения.
ПРИМЕЧАНИЕ. Свободная ширина предназначена для создания адаптивного макета. Мы выбрали фиксированную ширину, потому что будем создавать эффект прокрутки, который не работает с изменчивыми сайтами.
37. Дважды щелкните «A-master», расположенный внизу в серой области. В панели инструментов, расположенной в левой части окна приложения, выберите «Текстовый инструмент».
38. Создайте текстовое поле на холсте. Нажмите Ctrl + T, чтобы открыть текстовую панель, и в раскрывающемся списке шрифтов найдите веб-шрифты и выберите «добавить веб-шрифты».
39. Появится новое окно. Выберите вкладку «edge web fonts», найдите и загрузите следующие шрифты один за другим:
- Монотонный
- Телекс
- Числа
- Ралуэй
- Сторона
- вопросы
После загрузки этих шрифтов удалите текстовое поле.
40. Откройте панель «Слои», расположенную справа, или перейдите в меню «Окно» > выберите «Слои». Щелкните маленький значок согнутой бумаги, расположенный в правом нижнем углу. Щелкните дважды, чтобы создать еще два слоя.
41. Дважды щелкните «слой 1». Появится окно параметров слоя. Под именем поместите «home_header» и нажмите «ОК». Повторите этот процесс для двух других слоев и назовите их «static_header» и «content» соответственно.
42. Расположите слои в порядке, показанном ниже, просто перетащив их вверх или вниз, и сохраните изменения.
ПРИМЕЧАНИЕ. Мы разместили слои в таком порядке, потому что хотим, чтобы наш заголовок был поверх всего остального. Слои — это эффективный способ организации и укладки содержимого сайта, особенно когда макет становится сложным.
43. Выберите слой ‘static_header’ и сверните эту панель.
ШАГ №4: СОЗДАНИЕ СТАТИЧЕСКОГО ЗАГОЛОВКА:
44. Вверху страницы вы видите две направляющие. Первый — это руководство «в начало страницы», а второй — «руководство по заголовку». Нажмите, удерживайте и перетащите направляющую заголовка ниже и установите ее на 80 пикселей. Сделать это можно с помощью линеек. Это наша область заголовка.
45. Выберите инструмент «Прямоугольник» или нажмите «M» на клавиатуре. Создайте небольшой прямоугольник на холсте и убедитесь, что цвет его границы «красный», что указывает на то, что этот объект находится внутри слоя «static_header».
46. Перейдите к пункту «Изменить размер» (или «Преобразовать» в старых версиях Muse), расположенному в правом верхнем углу, щелкните его и установите H=80.
47. Перетащите этот прямоугольник и поместите его в область заголовка таким образом, чтобы он зафиксировался с направляющими «верх страницы» и «заголовок».
48. Теперь мы увеличим ширину прямоугольника и сделаем его равным 100%, чтобы сделать его масштабируемым для любого размера экрана. Разверните прямоугольник к обоим краям и убедитесь, что он защелкивается с краями страницы. Когда вы дойдете до края, появится оранжевая направляющая, указывающая, что объект был захвачен, и появится сообщение W=100% или W=1400.
49. Выделив прямоугольник, щелкните раскрывающийся список «Заливка» под меню приложения и выберите белый цвет.
50. Щелкните слово «мазок» рядом с заливкой. Щелкните значок цепочки, чтобы разорвать ее, и поставьте «1» в нижнем поле веса штриха.
51. После этого щелкните раскрывающийся список цвета обводки, установите значения для R, G и B, равные 235 каждому. Затем щелкните значок бумаги со сложенным краем, чтобы создать новый образец. Появится окно параметров образца. Нажмите «ОК» и сохраните изменения.
52. Выберите «Файл» > «Поместить». Найдите «static_logo.webp» и нажмите «Открыть». Курсор изменит свой вид на пистолет с изображением. Нажмите на холст, чтобы разместить его.
53. Затем переместите это изображение в прямоугольник заголовка и выровняйте его по вертикальному центру (синяя линия укажет, когда оно центрировано) и привяжите его к левой границе, как показано ниже.
54. Снова перейдите в «Файл» > «Поместить» и выберите все статические значки социальных сетей, которые мы оптимизировали с помощью Illustrator. Щелкните Открыть. Вы увидите, что у пистолета места будет цифра (5), указывающая на пять загруженных изображений. Если вы хотите переключиться на другой значок, чтобы разместить его первым, вы можете использовать клавиши со стрелками на клавиатуре. Поместите их один за другим.
55. Выберите все значки и перейдите на панель «Выровнять», расположенную рядом с «Изменить размер» в правом верхнем углу. В раскрывающемся списке «Выровнять по» выберите «Выровнять по ключевому объекту».
56. Затем введите 11 в поле под опцией «Распределить интервал». Выберите параметры «A» и «B», как показано на скриншоте ниже.
57. Выделив эти значки, щелкните правой кнопкой мыши и выберите «Группировать» или Ctrl+G. Переместите эту группу на прямоугольник заголовка и привяжите его к правой границе, выровняв логотип, как показано ниже.
58. Создайте текстовое поле и введите в нем ДОМ. Нажмите Ctrl+T и выберите «Шрифт: телекс», размер: 13, цвет: черный, выравнивание по центру и интерлиньяж 120%. Отрегулируйте ширину и высоту этого текстового поля в соответствии с размером шрифта.
59. Аналогичным образом создайте еще четыре текстовых поля для РАБОТЫ, УСЛУГ, КОНТАКТА и О ИНФОРМАЦИИ. Выберите их все, перейдите на панель выравнивания и повторите то, что мы сделали с иконками социальных сетей. На этот раз измените интервал распределения на 50. Сгруппируйте и переместите их в прямоугольник заголовка, как показано ниже.
60. Теперь мы закрепим эти объекты в верхней части браузера, что сделает наш заголовок статическим. Это означает, что он всегда будет отображаться в верхней части браузера независимо от прокрутки. Для этого выберите прямоугольник заголовка, перейдите к пункту «Закрепить», расположенному в правом верхнем углу, и щелкните внутри его верхнего среднего квадрата, как показано ниже.
61. Аналогичным образом прикрепите логотип вверху слева, группу меню вверху посередине и группу социальных иконок вверху справа. Наш статический заголовок готов.
ШАГ № 5: СОЗДАНИЕ ФУТЕРА:
62. Внизу вы увидите три направляющих, а именно: нижний колонтитул, нижнюю часть страницы и нижнюю часть браузера. Нажмите, удерживайте и перетащите направляющую «нижняя часть браузера» и установите ее на 770 пикселей с помощью линеек. Затем перетащите направляющую нижнего колонтитула и привяжите ее к направляющей нижней части страницы. Это наша область нижнего колонтитула.
63. Создайте прямоугольник внутри этой области H=270 и W=546, совместите его верхнюю и нижнюю стороны с нижним и нижним колонтитулом направляющих браузера соответственно.
64. Выделив этот прямоугольник, щелкните слово «обводка» и примените только верхнюю обводку толщиной «1» (значения цвета обводки: R=235 G=235 B=235). Перейдите на панель «Выровнять» и в разделе «Выровнять объекты» выберите «Выровнять горизонтальные центры» (это второй вариант).
65. Поместите static_logo.webp и добавьте текст внутри этого прямоугольника, как показано ниже. (Шрифт текста: Arimo, размер: 14, цвет: R=37 G=37 B=37, выравнивание по центру и интерлиньяж 120%).
66. Символ авторского права, который вы видите до 2016 года, можно добавить из панели «Глифы», расположенной в правой части окна приложения. Если его там нет, перейдите в «Окно» > «Глифы». Наш нижний колонтитул готов.
ШАГ № 6: СОЗДАНИЕ ЗАГОЛОВКА ДОМАШНЕЙ СТРАНИЦЫ И ЭФФЕКТА ПРОКРУТКИ:
67. Закройте мастер-страницу и вернитесь в режим плана.
68. Откройте «Главную» страницу, дважды щелкнув ее. Откройте панель слоев, выберите слой «home_header» и сверните панель.
69. Освободите здесь немного места, перетащив слой нижнего колонтитула до 4000 пикселей с помощью линеек.
70. Теперь создайте прямоугольник шириной 100%. Полной ширины, как мы делали ранее, можно добиться, расширив прямоугольник от его левого и правого края и привязав его к обоим краям страницы.
71. Разверните прямоугольник вверх, перетащив его верхний край и привязав его к верхней части направляющей страницы, как показано ниже.
72. Перейдите к панели изменения размера, установите H=750px.
73 Выделив прямоугольник, нажмите слово «Заливка» (не раскрывающийся список цветов) и нажмите «Добавить изображение». Найдите «header_image.webp», который мы скачали с Pexels и оптимизировали в Illustrator. В раскрывающемся списке «Подгонка» выберите «Масштаб для заполнения» и поместите его в верхний левый угол.
74. В самом поле параметров «Заполнить», рядом с заполнением, есть параметр «Прокрутка». Нажмите на нее и поставьте 0 в полях начального и конечного движения. Это означает, что изображение останется неподвижным, а содержимое будет двигаться, создавая красивый и визуально привлекательный эффект прокрутки.
75. Создайте текстовое поле и введите в нем «О НАШЕЙ КОМАНДЕ». Шрифт: телекс, размер: 13, выравнивание по левому краю, цвет: белый, интерлиньяж: 120%. Переместите его и поместите в верхний левый угол изображения следующим образом.
76. Разместите все социальные иконки, которые мы оптимизировали, для нашего изображения заголовка. Выровняйте их с одинаковым интервалом, как мы делали для статического заголовка. Сгруппируйте и разместите их в правом верхнем углу изображения следующим образом.
77. Создайте текстовое поле. Он должен быть Ш=944, В=92. Введите в нем «WE DESIGN THE WEB». Шрифт: монотонный, размер: 72, выравнивание по центру, интерлиньяж 120%. Измените цвет слова «WEB» на R=41 G=171 B=226 и белый для остальных.
78. Создайте еще три небольших текстовых поля для УСЛУГ, КОНТАКТ и БЛОГ. Шрифт: телекс, размер: 13, цвет белый, выравнивание по центру и интерлиньяж 120%.
79. Поместите изображение «header_logo.webp». Настройте логотип и эти четыре текстовых поля следующим образом.
80. Перейдите в библиотеку «Виджеты», расположенную справа. Разверните раздел «Кнопки». Выберите кнопку «Состояние» и перетащите ее на холст. Закройте панель виджетов.
81. Аккуратно выберите маленький кружок внутри этой кнопки и нажмите «Удалить».
82. Дважды щелкните внутри текстового поля Lorem Ipsum, выделите весь текст, удалите его и введите «ПОРТФОЛИО».
83. Выберите инструмент выделения (инструмент со стрелкой) из панели инструментов. Перейдите на панель текста (Ctrl+T) и измените форматирование текста «портфолио» следующим образом.
84. Теперь выберите кнопку состояния и измените ее размер на W=177, H=43. Правильно отрегулируйте текстовое поле внутри кнопки.
85. Выберите кнопку. Перейдите к опции «Радиус угла» (расположен рядом с обводкой). Нажмите на все четыре угла, чтобы сделать их плоскими.
86. Выбрав кнопку, посмотрите в верхний левый угол под меню приложений. Вы заметите, что «кнопка состояния» написана жирным шрифтом. Это известно как «текущая область выбора». Это позволяет вам узнать, что вы выбрали.
87. Рядом с ним «Нормальный». Нажмите на нее, и у вас будет четыре состояния.
88. Для нормального состояния измените цвет заливки на «нет» и цвет обводки на белый.
89. Выберите состояние «ролловер», измените цвет заливки и обводки на R=41 G=171 B=226.
90. Для состояния «мышь нажата» и «активно» необходимые изменения будут применены автоматически.
91. Снова выберите его нормальное состояние, разверните панель «Переход», расположенную внизу. Установите флажок с надписью «Fade» и введите значения, как показано ниже. Сохраните изменения.
92. Поместите изображение «down_arrow.webp» под кнопкой. У вас должен получиться следующий результат.
93. Наша домашняя шапка готова. Перейдите на страницу Файл > Предварительный просмотр в браузере (Ctrl+Shift+E) и посмотрите, все ли работает правильно.
ШАГ № 7: ДОБАВЛЕНИЕ КОНТЕНТА:
94. Вернитесь в Muse, откройте панель слоев, выберите слой «content» и сверните панель.
95. Прокрутите вниз до пустого места ниже и создайте текстовое поле W = 464, H = 60. Введите «НАШИ ПОСЛЕДНИЕ РАБОТЫ». Шрифт: Raleway light, размер: 46, цвет: черный, с выравниванием по центру и интерлиньяжем 120%. Теперь выберите слово «НЕДАВНИЕ» и измените его шрифт на «Raleway Bold».
96. Сделайте еще два текстовых поля. Один с Ш=376, В=165 и другой с Ш=376, В=363.
97. Дважды щелкните внутри первого и введите «ДИЗАЙН ВЕБ-САЙТА». Шрифт: 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%.
- Для заголовка «Отзыв клиента» — то же, что и основной заголовок, но размером 21.
- Для абзаца отзыва — то же, что и для основного абзаца, но шрифт «Lato Light Italic».
99. Выберите кнопку состояния «портфолио», скопируйте и вставьте ее под текстовым полем, которое мы создали на предыдущем шаге. Измените текст с портфолио на «ПРОСМОТРЕТЬ САЙТ».
- Для нормального состояния — Заливка: нет, цвет обводки и текста: черный.
- Для состояния ролловера — цвет заливки и обводки: R=41 G=171 B=226 и цвет текста: белый.
100. Разместите изображение «imac с макетом веб-сайта». Расположите изображение, текстовые поля и кнопки следующим образом.
101. Прокрутите вниз до пустого пространства и создайте прямоугольник W=1200, H=5. Примените верхнюю обводку толщиной 1 и цветом R=235 G=235 B=235. Разместите его следующим образом. Это будет работать как разделитель.
102. Скопируйте текстовые поля и кнопки, которые мы создали на шагах с 92 по 95, и вставьте их под разделителем. Измените текст первого поля на «ДИЗАЙН ЛОГОТИПА», а текст кнопки на «ПРОСМОТР В ПРЯМОМ ВИДЕ».
103. Поместите «iphone с макетом логотипа» и расположите их следующим образом.
104. Скопируйте и вставьте разделитель после этого.
105. Аналогичным образом скопируйте и вставьте текстовые поля и кнопку под этим разделителем. Измените текст первого поля на «ЭЛЕКТРОННАЯ КОММЕРЦИЯ».
106. Поместите «ecommerce_design.webp», который мы создали и оптимизировали в шагах с 15 по 30 с помощью Photoshop. Расположите все следующим образом.
107. Теперь создайте прямоугольник W=1004, H=363 без заливки и верхней обводки толщиной 1 и цветом: R,G,B=235 каждый.
108. Внутри этого прямоугольника создайте два текстовых поля. В первом введите «ЧТО МЫ ВЕРИМ» (Шрифт: Raleway light, размер: 35, цвет: R, G, B = 37 каждый, выравнивание по центру и 100% интерлиньяж). Выберите слово «ВЕРИТЬ» и измените шрифт на «Жирный Raleway».
109. Во втором текстовом поле введите известную цитату Милтона Глейзера, как показано ниже (Шрифт: Lato Light Italic, размер: 70, цвет: R, G, B = 37 каждый, выравнивание по центру и 120% интерлиньяж.
110. Скопируйте и вставьте любую из вышеуказанных кнопок состояния и измените ее текст на «ПОСМОТРЕТЬ НАШУ РАБОТУ». Расположите все следующим образом.
ШАГ № 8: СВЯЗЫВАНИЕ:
111. В панели инструментов выберите «Привязка ссылки» или нажмите «А» на клавиатуре. Курсор изменит свой вид на пистолет, заряженный якорем. Поместите этот якорь над текстовым полем «НАША ПОСЛЕДНЯЯ РАБОТА», как показано ниже.
112. Появится диалоговое окно с параметрами привязки. Внутри поля имени введите «recent_work».
113. Выберите место изображения со стрелкой вниз под кнопкой портфолио. Перейдите в раскрывающийся список «Гиперссылки», расположенный вверху, и выберите «recent_work». Сохраните изменения и просмотрите сайт (Ctrl+Shift+E).
ШАГ № 9: ДОБАВЛЕНИЕ АЛЬТЕРНАТИВНОГО ТЕКСТА, МЕТАДАННЫХ, ТЕГОВ УРОВНЯ И FAVICON:
114. Альтернативный текст — это способ заставить поисковые системы понять значение материала, содержащегося в изображении, и он должен быть предоставлен к каждому изображению, которое вы добавляете на свой сайт. Для этого щелкните правой кнопкой мыши любое из трех изображений, которые мы разместили, и выберите «Редактировать свойства изображения».
115. Появится диалоговое окно свойств изображения. Здесь вы увидите два поля. Один из них — «подсказка», а другой — «альтернативный текст». Основные различия между ними заключаются в следующем:
| СОВЕТ ИНСТРУМЕНТА | ВЕСЬ ТЕКСТ |
|
|
ПРИМЕЧАНИЕ. Вам следует поискать в Интернете методы и важные соображения по добавлению замещающего текста и метаданных, поскольку они являются ключевыми аспектами для улучшения SEO.
116. Чтобы добавить метаданные, вернитесь к представлению «План», щелкните правой кнопкой мыши домашнюю страницу и выберите «Свойства страницы». Появится новое окно, содержащее три вкладки, а именно — макет, метаданные и параметры. Переключайтесь между этими вкладками, изучайте параметры и добавляйте релевантные ключевые слова.
117. Еще один важный фактор, который следует учитывать перед размещением сайта в сети, — это изменение некоторых свойств текста для добавления тегов уровня.
ПРИМЕЧАНИЕ. Обычно, когда вы добавляете письменный контент на веб-сайт, заголовки выделяются жирным шрифтом и крупнее абзацев (или другого текста), чтобы проиллюстрировать разницу между ними. Мы, как люди, можем распознать эту разницу. Но проблема в том, что браузер не понимает, какая часть вашего текста является заголовком, а какая абзацем, если только вы не назначите теги назначенного уровня для каждого из них.
Конечно, он будет представлять вашу страницу онлайн в том виде, в котором вы ее создали, независимо от того, применили вы теги или нет (из-за CSS), но для создания SEO-дружественного сайта необходимо использовать эти описательные теги.
118. Для этого выделите текст, перейдите на текстовую панель (Ctrl+T) и внизу вы увидите раскрывающийся список, содержащий все теги. Выберите их соответствующим образом и сохраните изменения.
119. Выберите Файл > Свойства сайта. На вкладке «Содержимое» последним параметром является «Favicon» (в более старых версиях Muse он находится на вкладке «Макет»). Когда вы наводите курсор на слово «Favicon», появляется всплывающая подсказка, описывающая, что это такое и каковы должны быть его соответствующие размеры. Выгодно добавить фавикон, поскольку он позволяет выделить ваш бренд и сделать ваш сайт легко узнаваемым, если пользователи добавили его в закладки.
ШАГ № 10: ЭКСПОРТ САЙТА:
120. Наконец, перейдите в Файл > Экспортировать как HTML (Ctrl+E). В поле URL-адрес сайта введите www.squaremaze.com и выберите место, куда вы хотите экспортировать сайт. Нажмите «ОК». Наша целевая страница готова. Вы можете предварительно просмотреть его (файл index.html) в любом браузере и протестировать его внешний вид и производительность.
КОНЕЧНЫЙ РЕЗУЛЬТАТ:
ВЫВОД
Использование других приложений, таких как Illustrator, Photoshop, Fireworks, Fuse и Animate, для создания качественных ресурсов для сайта Muse всегда оказывалось полезным и приводило к исключительным результатам. Это был всего лишь один из подходов к дизайну с помощью этого замечательного инструмента. Идите вперед и исследуйте больше. Благодарю вас.