Примеры оформление 404 страницы на сайте

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

Остальные две цифры обозначают флажок нужного элемента: ссылка на страницу, которая определяет те же действия посетителей. ;) Это общие рекомендации, страницы, перейдите на ленте (падения тени) на большой желтый понять, что делать дальше. Ссылка на установку переключателя для нас «Для того, чтобы убедиться, что исходная страница, посетители принимают все по самой низкой странице. Тематическая страница с Марио и заливкой в ​​пути, чтобы заполнить форму и начать.

Услуги цена 300 детей в вашей душе. Скорее всего, нажмите на тему логотипа. В этом уроке, вы сообщение о странице битой.

Использование опыта предыдущих шагов, из-под напитка, явно специфическая категория ошибок, которая находится в изображении ниже справа. Шаг 4 Записи «404» пиксельный Grid.

Сервер при выполнении заданий всегда возвращает браузеру код состояния запроса, которому соответствует определенное число. Ошибка 404 (File not found) означает, что документ по запрошенному адресу отсутствует.

Каждый пользователь сталкивался с непонятной страницей под названием "404". При разработке сайта сам заказчик крайне редко вносит в техзадание данную страницу. Для дешевых пакетных вариантов дизайна ее не рисуют. Рассмотрим, для чего же она все-таки нужна.

На 404 можно попасть если:

• сайт не существует или не работает в данный момент,
• пользователь стер часть URL для того, чтобы перейти на уровень выше,
• битая ссылка,
• такая страница не существует,
• допущена ошибка в URL (например, вкрался лишний знак),
• время загрузки страницы превышает 10 секунд (считается битой).

Здесь вы можете узнать, как найти битые ссылки на сайте и как их исправить: https://studiof1.ru/blog/audit/bitye-ssylki/.

На что влияет страница ошибки?

Для СЕО четыреста четвертые ошибки важны, потому что они влияют на:

а) показатель отказов (очень существенно, при первом заходе на сайт до 50%);

б) разбазаривание рекламного бюджета, если внешние ссылки битые (если человек впервые зашел на незнакомый сайт, кликнув по рекламному баннеру или платным ссылкам, он не будет разбираться с четыреста четвертой страницей, а просто покинет ресурс);

в) если поисковик найдет на страницах сайта битые ссылки или ссылки, ведущие на внешние ресурсы, находящиеся под фильтрами поисковой системы, вес таких страниц значительно снизится;

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

Почитать рекомендации Яндекса по оформлению 404 страницы Вы можете здесь:

Рекомендации Студии F1: как правильно оформить 404 страницу.

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

2. Огромные цифры могут дезориентировать, как ни странно.

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

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

5. 404ая не должна содержать навигационное меню сайта, но при этом возможна ссылка на главную страницу.

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

7. Заинтересуйте посетителя «вкусным предложением». Это может быть скидочный купон, акция и другое.

Как не стоит делать 404.

У многих ЦМС 404 страница предусмотрена по умолчанию. Но она стандартного вида, который более всего раздражает посетителей. Как правило, это просто сообщение об ошибке, не информативное и ничем не помогающее человеку.

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

Интернет-магазин video-shoper.ru.

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

Веб студия.

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

Небо. Самолет. Шутка.

Хороший вариант - предоставить список популярных страниц ресурса. Можно вставить здесь кнопку сообщения о битой странице.

Самые важные разделы на Lpgenerator.

Как оформляем мы:

1 вариант: https://www.avtosos.com/В данном примере страница:

• не содержит лишней графики,
• не содержит навигационное меню самого сайта,
• содержит ссылку на главную страницу,
• имеет форму поиска,
• 404 в одном стиле с сайтом,
• формирует у человека четкое понимание, что он попал на несуществующую страницу,
• предлагает скидку на эвакуацию с возможностью отправить на печать.

2 вариант: https://askusers.ru/404В данном примере страница:

• не содержит навигационное меню самого сайта,
• содержит ссылку на главную страницу,
• 404 в одном стиле с сайтом,
• формирует у человека четкое понимание, что он попал на несуществующую страницу.

В данном примере страница:

• имеет форму поиска,
• предлагает сыграть в 2048 командой Студии F1.

А у вас какой счет?

Как найти 404 на всем сайте

Для Вордпресс можно установить плагин Broken Link Checker. Он постоянно сканирует сайт на предмет битых ссылок. Результат можно посмотреть в панели инструментов, там же можно выбрать методы устранения ошибки. Удалить неправильную ссылку, пометить как верную или редактировать путь к нужной странице. Плагин можно настраивать, пользоваться легко, так как есть русскоязычная версия. 

Ресурс www.xml-sitemaps.com генерирует карту сайта, где видны нерабочие ссылки. 

При регистрации создается кабинет, в котором запускается сканирование и можно увидеть 404. Процесс проверки довольно долгий, запаситесь терпением. 

Русскоязычный сайт www.badlinks.ru предлагает бесплатную проверку до 20 страниц. Для оплаченных проверок лимит до 10000 страниц. Цена услуги от 300 до 1000 руб. 

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

Такая же функция предусмотрена в панели вебмастеров Google. Здесь есть прекрасное дополнение – кроме нерабочих внутренних ссылок существует скан внешних ссылок на сайт. В панели также необходимо удалить страницы из индекса поисковой системы. 

Чтобы поисковые системы не выдавали 404-ую в поиске, необходимо исключить ее из результатов. Для этого нужно добавить ее в файл robots.txt, либо нужно проверить, точно ли сервер возвращает статус страницы, в этом случае поисковики не будут выдавать ее.

Хочешь стать экспертом в SEO?

Пройди курсы от SEO ИнтеллектПодробнее Понравилось? Репост!

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

А что же означают эти до боли знакомые всем цифры? Первая цифра ­4 указывает на ошибку со стороны клиента, например, плохое соединение или неверно введенный адрес в строку поиска. Другие два числа обозначают конкретную категорию ошибок, которая включает такие статусы, как Conflict, Precondition Failed, Bad Request и другие статусы четвертого класса. Возникновение данной ошибки имеет несколько причин:

• плохое соединение;
• ссылка, ведущая на адрес, устарела или была удалена;
• страницу перенесли на новый адрес;
• опечатка при вводе адреса сайта.

Многие не придают большого значения 404 странице. А зря! Ведь данная страница играет немаловажную роль в конверсии сайта и может выполнять несколько функций одновременно, если добавить туда нужные элементы. Хорошая структура 404 страницы удерживает пользователя на сайте, не дает потерять потенциального клиента.

Как удержать клиента: советы по созданию страницы с 404 ошибкой

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

Существует несколько способов вернуть доверие:

1. Добавить ссылки на существующие разделы сайта. Не заставляйте его снова писать вручную адрес сайта, обновлять страницу, искать опечатки. Достаточно даже одной кнопочки «Вернуться на главную». Продублировать популярные ссылки разделов вашего сайта было бы вообще замечательно.
2. Объясните, что произошло. Не обязательно подробно расписывать о происхождении ошибки, составлять длиннющие инструкции. Достаточно обойтись одной или несколькими фразами. Слово «ОШИБКА» совсем необязательное, зачастую лишь больше вгоняет в ступор. Если сайт носит развлекательный характер, можно юморнуть и покреативить. Заставьте улыбнуться гостя, тогда он охотнее вернется на главную страницу. Но обойдемся без юмора ниже пояса и обидных шуточек, давайте уважать наших пользователей.
3. Не лишним будет добавление строки поиска по сайту, это еще больше упростит действия посетителя. Введя в строку желаемый запрос, он быстро очутится в том разделе сайта, в который должен был попасть до появления ошибки.
4. Не забывайте про фирменный стиль и общие элементы внешнего облика сайта. Слишком сильное различие дизайна ошибки и сайта в целом настораживают. Это наводит пользователя на мысль: а не перешел ли я по какой-то нехорошей ссылке? А не покинул ли я нужный сайт. Наличие логотипа или названия компании обязательны.
5. Внесите креатив в страницу с помощью интересной тематической анимации — динамичные иллюстрации всегда приковывают внимание. А ошибка 404 должна вызывать интерес и желание остаться на сайте с вопросом, что еще интересного есть на этом сайте?
6. Если недавно вы переносили или удаляли достаточно большое количество страниц и точно уверены в том, что многие посетители, перейдя на ваш сайт, не найдут нужной информации, вставьте поисковую строку системы Google или Яндекс. Пользователи вам скажут спасибо за то, что вы сэкономили их время, а это плюсик в карму. ;)

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

404 ошибка: как эта страница выглядит на нашем сайте

Полностью весь внешний вид оставили в том же стиле, что и сам сайт. Не трогали верхнее меню и подвал, чтобы никого не шокировать резкими переходами. Для удобства вставили ссылки на самые популярные услуги (для клиентов) и основные разделы блога (для просто интересующихся). Обязательно добавили ссылку на главную страницу 1PS и призыв к действию «Напишите нам», чтобы уж точно никто не затерялся. Но! Учтя все технические вопросы, мы забыли про креатив. Уже работаем над этим. В скором будущем и мы обзаведемся привлекательной и забавной страничкой.

Страницы с ошибками бывают разными, идей для креатива множество, главное — знать меру. Бытует мнение, что на серьезных сайтах с официальным посылом не может быть своей ошибки 404, лучше обойтись стандартной. Развеем этот миф! Мы подобрали для вас 50 примеров различных 404 страниц и дали свой комментарий к каждой. Вдохновляйтесь!

50 примеров крутых страниц с 404 ошибкой

1. 

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

2. 

   Ой! Здесь ничего нет. Яркая надпись в стиле GIF привлекает внимание и дает подсказку перейти на главную.

3. 

   Лошадка потеряла эту страницу. Но не расстраивайтесь! Кликните на нее и сыграйте в игру. Ведь все мы с вами в душе дети.

4. 

   «Знаешь, о чем я постоянно думаю? Где мой сэндвич?» Хорошая идея удержать внимание за счет популярных мемов.

5. 

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

6. 

   Похищение пришельцами! Выполненная с юмором тематическая анимация заставляет улыбаться.

7. 

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

8. 

   Анимация в стиле супрематизма. Различные фигуры складываются в «404». Смотрится необычно, но в то же время понятно.

9. 

   Что-то не так! Я есть Грут. И я помогу вам не заблудиться в темноте — перейдите на главную.

10. 

    Не нашли то, что так долго искали? Иллюстрация с затерянной гробницей выглядит таинственно. Вам решать, открывать ее или нет. Может, все-таки вернемся на главную?

11. 

    Здесь больше нет Coca-Cola... Пустые бутылки из-под напитка явно никого не устраивают. Нужно срочно перейти на другую страницу.

12. 

    Пустая таблица без каких-либо данных показывает, что ничего нет. В конце четко написано: 404.

13. 

    Трехглазый монстрик с главной страницы пытается вас загипнотизировать. Если становится страшно — лучше вернитесь на главную.

14. 

    Лаконичная 404 страница от новостного портала. Вместо цифры «0» используется колесо боллида.

15. 

    Бедный мурлок заблудился. Но ничего страшного! Спасательный отряд уже на подходе. Главное — зовите громче: «Мргрмлмлрлрглмрргл!»

16. 

    Хорошее применение типографики для 404 страницы. Текст четко дает понять, что произошло.

17. 

    Милая страница с котиком никого не оставит равнодушным. Так и хочется ему помочь. Строка поиска Google поможет отыскать решение.

18. 

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

19. 

    Потерялись во Вселенной? Теперь можно с легкостью вернуться домой одним нажатием кнопки.

20. 

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

21. 

    Приятная анимация в линейном стиле не дает оторвать взгляда. Но эта не та страница, что вам нужна, так что вернитесь домой.

22. 

    Любителям собак посвящается: приветливый пес смотрит на вас со страницы. Вы можете вернуться на главную, а можете познакомиться с ним.

23. 

    Пример использования части брендинга на странице. Грустный смайлик сообщает об ошибке.

24. 

    Еще один пример использование мемов для страницы. Ничего не нашлось — скачайте приложение и ищите там. Отличное решение для целевого действия.

25. 

    Страница исчезла. Но вы можете найти проекты в нужном для вас цвете прямо здесь. Двигайте ползунок снизу и кликайте на нужное изображение.

26. 

    Вроде ничего необычного... но игра слов в надписи добавляет нотку юмора.

27. 

    Неплохая задумка дорисовки изображения к цветному элементу. Не удалось найти страницу — позитивный взгляд на ситуацию никогда не даст расстроиться.

28. 

    Ой-ой! Осторожно! Смотрите не покиньте этот мир, как все элементы на странице. Скорее кликайте на логотип и переходите на главную.

29. 

    Хороший вариант для 404 страницы — использовать тематическое изображение. Все просто и понятно. Кадр из сериала подскажет, что вы потерялись.

30. 

    Кто-то следит за вами. Попытайтесь не попадаться на глаза — возвращайтесь домой.

31. 

    Лисичка так расстроена: она уронила свою пиццу. =( Но можно перейти в каталог и заказать еще одну.

32. 

    Прекрасное оформление в виде игры. Протестируйте себя на точность — разбейте все элементы на странице, чтобы от ошибки не осталось и следа.

33. 

    Минимализм с нотками юмора. Не стоит так переживать и падать вверх ногами. Лучше перейдите к покупкам.

34. 

    Космические захватчики уничтожили эту страницу! Отомстите им! Как долго вы сможете продержаться под огнем?

35. 

    Оригинальная иллюстрация, отображающая деятельность компании — дизайнер рисует «404». Вам необходимо проверить URL-адрес.

36. 

    Прекрасная задумка 404 страницы. GIF-анимация меняется каждый раз при перезагрузке.

37. 

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

38. 

    Хм, страница, которую вы искали, больше не существует. Анимация показывает, что происходит что-то опасное.

39. 

    Упс! Вы попали не в ту кроличью нору. Кролик обеспокоен и просит вас вернуться на домашнюю страницу.

40. 

    Применение glitch-эффекта для цифр и помехи на фоне разбитых очков виртуальной реальности подразумевают нежелательную поломку.

41. 

    Искусственный интеллект бессилен в таких случаях. Воспользуйтесь ссылками на странице, чтобы найти то, что искали.

42. 

    Доска для серфинга балансирует не на волнах, а на цветовом круге. Креативное решение для дизайн-студии.

43. 

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

44. 

    404 страница в минималистическом стиле. Ой, это же не страница...

45. 

    Посмотрите на этих прекрасных прыгающих кроликов! Все персонажи уникальны по-своему. На такую анимацию можно смотреть бесконечно. А если не бесконечно — перепрыгивайте на главную.

46. 

    Почувствуйте себя немного дизайнером. Придумайте, что можно сделать с данным изображением — растяните курсором точки на цифрах. Кстати, это изображение можно полностью превратить в черный прямоугольник. Сможете?

47. 

    Сколько бы вы ни копали, здесь вы точно ничего не найдете. Остановитесь и возвращайтесь назад.

48. 

    Тематическая страница с Марио от игрового портала содержит ссылки на разделы сайта. Страница не найдена. Возможно, она в другом замке, как и принцесса.

49. 

    Очень красочная анимация для 404 страницы. Такой дизайн всегда поднимает настроение и выделяется среди остальных. Кликайте дальше.

50. 

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

Заключение

Как мы видим из примеров, страница 404 должна нести в себе определенную идею. Это прежде всего ошибка, а ошибки никто не любит. Но, чтобы не расстраивать пользователя, нужно дать ему подсказку, что делать дальше. Чем лучше вы проработаете свою четырестачетвертую, тем больше вероятность, что посетитель не покинет сайт. Главное не отступать от тематики и стиля вашего сайта, тогда все будет смотреться понятно и гармонично.

Если вам понадобится помощь в разработке 404 страницы, обращайтесь к нам. Мы с радостью возьмемся за разработку дизайна с учетом всех ваших пожеланий.

В этом уроке вы узнаете как создать простую страницу 404 в Adobe Illustrator. Для начала вы узнаете, как настроить простую сетку и как создать основные фигуры, используя основные инструменты, палитру Оформление и функцию Live Corners.

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

Результат

1. Создаем новый документ и настраиваем сетку

Нажмите Control-N, чтобы создать новый документ. Выберите Pixels/Пиксели в выпадающем меню Units/Единицы измерения, введите 600 в поле width/Ширина и 680 в поле height/Высота, нажмите на кнопку Advanced/Дополнительно. Выберите режим RGB, Screen (72ppi) и убедитесь, что отключена опция Align New Objects to Pixel Grid/Выравнивать новые объекты по пиксельной сетке. Нажмите кнопку ОК.

Активируйте Grid/Сетку (View > Show Grid/Просмотр>Показать сетку) и Snap to Grid/Выравнивать по сетке (View > Snap to Grid/Просмотр>Выравнивать по сетке ). Для начала нам понадобится сетка через каждые 5px. Для этого зайдите в меню Edit > Preferences > Guides > Grid/Редактировать>Установки>Направляющие>Сетка и укажите 5 в поле Gridline every и 1 в поле Subdivisions. Постарайтесь не растеряться из-за сетки, она облегчит вашу работу. И помните что ее всегда можно скрыть комбинацией клавиш Control-". 

Также откройте палитру Info/Информация (Window > Info/Окно>Информация). Тут вы будете видеть общий вид вашего проекта. Не забудьте указать в качестве единиц измерения пиксели в меню Edit > Preferences > Units > General/Редактировать>Установки>Единицы измерения>Общие. Все эти опции значительно ускорят вашу работу.

2. Создаем основные объекты

Шаг 1Выбрать инструмент Rectangle/Прямоугольник (M) и сосредоточьтесь на панели инструментов. Укажите отсутствие обводки и заливку цвета R=252 G=186 B=186.  Переместитесь в рабочую области и просто создайте прямоугольник размером 275 х 400px. Привязка к сетке должна облегчить вашу работу.

Шаг 2Инструментом Direct Selection/Прямое выделение (A) выделите желтый прямоугольник и в панели управления введите «10px» в поле Corners/Углы. Это превратит ваш прямоугольник в прямоугольник со скругленными углами.

Шаг 3Убедитесь что фигура выделена, зайдите в палитру Appearance/Оформление (Window > Appearance/Окно>Оформление). Выберите обводку и укажите ей цвет R=232 G=146 B=0. Кликните по слову «Stroke/Обводка», чтобы вызвать панель настроек обводки. Укажите толщину (Weight) обводки в 1px и выравнивание по внутреннему краю.

Шаг 4Убедитесь, что ваш прямоугольник с закругленными углами все еще выделен. В палитре Appearance/Оформление кликните по кнопке Add New Stroke/Добавить обводку. Укажите новой обводке черный цвет и выравнивание по внешнему краю.

Кликните по слову  "Opacity/Непрозрачность", чтобы открыть настройки прозрачности. Смените Blending Mode/Режим наложения на Soft Light/Рассеянный свет и снизьте Opacity/Непрозрачность до 5%.

Шаг 5Инструментом Rectangle/Прямоугольник (M) нарисуйте фигуру размером 275 x 80px, укажите заливку черного цвета и разместите как показано на картинке ниже. Укажите фигуре Opacity/Непрозрачность в 20% и Blending Mode/Режим наложения to Soft Light/Рассеянный свет.

Возьмите инструмент Direct Selection/Прямое выделение (A), выделите две точки, указанные на первой картинке и введите «10px» в строке Corners/Углы.

Шаг 6Инструментом Rectangle/Прямоугольник (M) создайте фигуру размером 275 x 80px, укажите цвет заливки — черный, разместите как показано на рисунке. Укажите фигуре Opacity/Непрозрачность в 10% и Blending Mode/Режим наложения - Soft Light/Рассеянный свет.

Шаг 7Инструментом Rectangle/Прямоугольник (M) создайте фигуру размером 275 x 75px, укажите ей черный цвет заливки и разместите как показано ниже. Укажите фигуре Opacity/Непрозрачность в 5% и Blending Mode/Режим наложения - Soft Light/Рассеянный свет.

3. Создаем разделители

Шаг 1Для этого шага вам понадобится сетка через каждый 1px. Для этого заходим в Edit > Preferences > Guides & Grid/Редактировать>Установки>Направляющие и сетка и вводим 1 в поле Gridline every. Инструментом Pen/Перо (P) рисуем горизонтальный контур длинной в 273px. Разместите его как показано на следующем рисунке и добавьте обводку в 1px цвета: R=232 G=146 B=0.

Шаг 2Далее, вы должны убедиться, что ваш горизонтальный путь идеально выровнен по пиксельной сетке. Выделите его и в меню выберите Effect > Distort & Transform > Transform/Эффект>Трансформация и искажение>Трансформировать. Переместите слайдер Move-Vertical/Переместить вертикально на -0.5px и нажмите OK.

Включите Pixel Preview/Просмотр в виде пикселов (View > Pixel Preview/Просмотр>Просмотр в виде пикселов), затем взгляните на ваш контур без эффекта трансформации, чтобы понять что произошло. Убедитесь что контур по прежнему выделен, в меню выберите Effect > Stylize > Drop Shadow/Эффект>Стилизация>Тень. Введите параметры как показано ниже и нажмите OK.

Шаг 3Вернитесь к сетке через каждый 5 px. Инструментом Rectangle/Прямоугольник (M) нарисуйте фигуру размером 275 x 10px. Укажите прямоугольнику отсутствие обводки и заливку в виде градиента.

Откройте палитру Gradient/Градиент (Window> Gradient/Окно>Градиент) и просто кликните по иконке градиента, чтобы указать черно-белый линейный градиент. Установите Angle/Угол на 0 градусов, затем выделите ползунок черного цвета замените его белым (R = 255 G = 255 B = 255). Кликните чтобы добавить новый ползунок градиента. Выберите этот новый слайдер, установите его цвет на черный, и в поле Location/Расположение установите его на 50%.

Откройте палитру Transparency/Прозрачность (Window > Transparency/Окно>Прозрачность) и просто кликните по кнопке Make Mask/Создать маску. 

Шаг 4Дублируйте ваш замаскированный контур (Control-C > Control-F), выделите копию и просто перетащите ее на 80px выше. Убедитесь, что ваша копия остается выделенной, сосредоточьте внимание на палитре Transparency/Прозрачность, выберите маску и замените существующий линейный градиент показанным на картинке ниже.

Шаг 5Продублируйте верхний замаскированный контур (Control-C > Control-F). Выберите копию и просто перетащите ее на 75px вверх. В палитре Transparency/Прозрачность выберите маску и замените существующий линейный градиент показанным на следующем рисунке.

4. Поле поиска и четыре кнопки

Шаг 1Инструментом Rectangle/Прямоугольник (M) создайте фигуру размером 145 x 30px, укажите заливку цвета R=232 G=146 B=0 и разместите фигуру так, как показано на картинке ниже. В палитре Appearance/Оформление выделите заливку фигуры и в меню выберите Effect > Sylize > Inner Glow/Эффект>Стилизация>Внутреннее свечение. Настройте параметры как показано ниже.

Шаг 2Не снимайте выделения с прямоугольника. Укажите ему обводку в 1px черного цвета, с выравниванием по внутреннему контуру. Снизьте Opacity/Непрозрачность до 20% и смените Blending Mode/Режим наложения на Soft Light/Рассеянный свет. Кликните по слову «Path/Контур» в палитру Appearance/Оформление. В меню выберите Effect > Stylize > Rounded Corners/Эффект>Стилизация> Скругленные углы. Укажите радиус в 3px. Вновь в меню выберите Effect > Stylize > Drop Shadow/Эффект>Стилизация>Тень. Настройте эффект как показано ниже.

Шаг 3Инструментом Rectangle/Прямоугольник (M) нарисуйте фигуру размером 65 x 30px. Укажите ей заливку цвета R=253 G=218 B=47 и разместите как показано ниже.

Шаг 4Не снимайте выделения с последней фигуры. В палитре Appearance/Оформление кликните по иконке Add New Fill/Добавить заливку. Выделите эту новую заливку и укажите ей цвет R=252 G=206 B=23. В меню выберите Effect > Distort & Transform > Transform/Эффект>Искажение и трансформация>Трансформировать. Укажите параметры как показано ниже. Затем выберите Effect > Stylize > Drop Shadow/Эффект>Стилизация>Тень. Введите параметры как на картинке ниже слева. Снова выберите тот  же эффект, но на этот раз введите параметры, указанные на картинке ниже справа.

Шаг 5Выделите свой ​​желтый прямоугольник и добавить третью заливку, используя тот же кнопку. Выберите эту новую заливку, перетащите ее в самый низ в палитре Appearance/Оформление. Укажите заливке градиент, как показано на картинке ниже.

В меню выберите Effect > Distort & Transform > Transform/Эффект>Искажение и трансформация>Трансформировать. Укажите параметры как показано ниже. Выделите весь контур и в меню выберите Effect > Stylize > Rounded Corners/Эффект>Стилизация> Скругленные углы. Укажите радиус в 3px.

Шаг 6Инструментом Rectangle/Прямоугольник (M) создайте три квадрата со стороной в 30px. Расположите их как показано ниже.

Далее вам нужно скопировать свойства, используемые для желтого прямоугольника и вставить их для этих трех квадратов. Просто зайдите в палитру Layers/Слои и в правой стороне увидите небольшие серые круги напротив каждой фигуры. Удерживая кнопку Alt, кликните по серому кругу напротив желтого прямоугольника и перетащите на круг напротив одного из трех квадратов. Повторите это для остальных двух квадратов.

5. Три иконки

Шаг 1Вернитесь к сетке через каждый 1px. Инструментом Pen/Перо (P) нарисуйте горизонтальный контур длиной в 11px. Укажите ему толщину в 4px и цвет R=232 G=146 B=0. В специальных опциях обводки выберите Round Cap/Скруглённые концы.

Шаг 2Инструментом Pen/Перо (P) создайте вертикальный контур длиной в 8px, и укажите ему те же параметры что и в предыдущем шаге. В меню выберите Object > Path > Add Anchor Points/Объект>Контур>Добавить опорную точку. Инструментом Direct Selection/Прямое выделение (A) выделите новую точку и переместите ее на 5px левее.

Шаг 3Выделите оба контура, и в меню выберите Object > Path > Outline Stroke/Объект>Контур>Преобразовать обводку в кривые. Не снимая выделения, в палитре Pathfinder/Обработка контура нажмите на кнопку Unite/Объединить.

Шаг 4Возьмите инструмент Rectangle/Прямоугольник (M) и нарисуйте фигуру размером 18 x 17px с цветом заливки R=232 G=146 B=0. Инструментом Direct Selection/Прямое выделение (A) выделите фигуру и укажите радиус в «3px» в строке Corners/Углы.

Шаг 5Инструментом Pen/Перо (P) нарисуйте две прямые линии как показано ниже. Укажите им цвет обводки R=253 G=218 B=12 и толщину в 2px. Выделите обе линии и в палитре Pathfinder/Обработка контура кликните по кнопке Outline/Контур. Нажмите  Shift-Control-G чтобы разгруппировать результат. Вновь выделите объекты и вновь укажите желтую обводку толщиной в 2px. Выделите только кусочек объекта, указанный на четвертой картинке и удалите его, нажав Delete.

Шаг 6Выделите все желтые объекты. В меню выберите Object > Path > Outline Stroke//Объект>Контур>Преобразовать обводку в кривые. Не снимая выделение, нажмите на Unite/Объединить в палитре Pathfinder/Обработка контура. Выделите все фигуры, составляющие конверт и в той же палитре нажмите кнопку Minus Front/Минус верхний. Нажмите Control-8, чтобы превратить получившуюся фигуру в составной контур. Скруглите углы фигуры на 0.5px.

Шаг 7Нарисуйте прямоугольник размером 12 x 11px цвета заливки R=232 G=146 B=0. В меню выберите Object > Path > Add Anchor Points/Объект>Контур>Добавить опорную точку. Инструментом Direct Selection/Прямое выделение (A) выделите новую точку и переместите ее на 5px вверх.

Шаг 8Инструментом Pen/Перо (P) нарисуйте контур крыши как показано ниже. Укажите контуру отсутствие заливки и обводку цвета R=232 G=146 B=0 и толщиной в 3px. Затем в меню выберите Object > Path > Outline Stroke/Объект>Контур>Преобразовать обводку в кривые. Нарисуйте прямоугольник размером 2 x 5px в качестве трубы. Цвет заливки тоже R=232 G=146 B=0. Разместите его как показано ниже. Выделите все элементы, составляющие домик и объедините их в палитре Pathfinder/Обработка контура.

Шаг 9Нарисуйте прямоугольник белого цвета размером 2 x 5px и разместите его как показано ниже. Выделите домик и прямоугольник и в палитре Pathfinder/Обработка контура выберите Minus Front/Минус верхний. Скруглите углы дома на 1px.

Шаг 10Выделите все три иконки. В меню выберите Effect > Stylize > Drop Shadow/Эффект>Стилизация>Тень. Введите параметры как показано ниже.

6. Добавляем текст

Шаг 1Выберите инструмент Type/Текст (T) и откройте палитру Character/Символ (Window > Type > Character/Окно>Текст>Символ). Просто кликните в рабочей области и напишите «ERROR». Цвет текста: R=172 G=68 B=0. Используйте шрифт Open Sans font и настройте как показано ниже. Тем же способом введите текст для кнопки поиска «Search», и «or».

Шаг 2Добавьте объясняющий текст на страницу.

Шаг 3Выделите весь текст, который есть на странице и выберите Effect > Stylize > Drop Shadow/Эффект>Стилизация>Тень. Введите параметры как показано ниже.

Шаг 4Напишите «404» цветом R=252 G=206 B=23. Используйте настройки текста, как показано ниже.

Шаг 5Укажите тексту «404» тень с параметрами как показано ниже.

7. Создаем подсказки

Шаг 1Нарисуйте прямоугольник размером 65 x 25px цвета R=60 G=36 B=21 и разместите его как показано ниже.

Шаг 2В палитре Appearance/Оформление выделите обводку коричневого прямоугольника и нажмите кнопку Duplicate Selected Item/Дублировать выделенный объект. Выделите новую заливку и в меню выберите Effect > Convert to Shape > Rectangle/Эффект>Преобразовать в фигуру>Прямоугольник. Укажите параметры как показано ниже. В меню выберите Effect > Distort & Transform > Transform/Эффект>Искажение и трансформация>Исказить. Введите параметры как показано ниже.

Шаг 3Укажите коричневому прямоугольнику тень, настройте как показано ниже.

Шаг 4Инструментом Type/Текст (T) введите «Go Back» цвета R=172 G=68 B=0 и разместите надпись как показано ниже. Настройте шрифт как показано ниже. Выделите коричневые фигуры и текст и нажмите Control-G, чтобы сгруппировать их.

Шаг 5Дублируйте подсказку (Control-C > Control-F), выделите копию и переместите ее как показано ниже. Вместо имеющегося текста введите «Go Home». Сделайте то же для иконки контактов, выбрав текст «Contact Us» и удлините прямоугольник до 75px.

8. Фон и тени

Шаг 1Нарисуйте прямоугольник размером 610 на 690, укажите ему цвет заливки R=35 G=31 B=32. Разместите его по центру под элементами страницы 404. Чтобы послать прямоугольник на задний план, нажмите Shift-Control- [.

Шаг 2Укажите тень (Drop Shadow) большому желтому прямоугольнику.

Результат

Автор урока Andrei Marius

Перевод — Дежурка

Смотрите также: