Недавно я имел удовольствие создавать забавный дизайн сайта для серии сборок сайтов журнала NET. Темой конкурса были игрушечные сайты для детей, поэтому он, естественно, включал в себя все виды ярких и красочных элементов. Давайте посмотрим на процесс создания забавной иллюстрированной пейзажной сцены, которую я использовал для своего дизайна.
С полной проблемой сборки можно ознакомиться в выпуске 193 журнала NET , не забудьте проверить его!
Цель задачи состояла в том, чтобы разработать веб-сайт, который продвигает детскую игрушку до соответствующего возраста целевой аудитории с учетом передового опыта и этики. Мой дизайн включает в себя ряд ярких иллюстрированных элементов, чтобы создать воображаемую сцену, в которой можно потеряться.
Начните с открытия Photoshop и создания нового документа. Чтобы дать четкое представление о том, как дизайн будет выглядеть на широкоэкранном мониторе, я использовал большой холст размером около 1680 × 1050. Залейте фон голубым цветом и добавьте направляющие для имитации безопасной ширины в 960 пикселей в центре.
Выберите более темный оттенок синего и нарисуйте линейный градиент, бегущий вертикально через верхнюю половину холста.
Внизу нарисуйте выделение по ширине холста и залейте его темно-синим цветом.
Дважды щелкните слой, чтобы редактировать стили слоя. Добавьте градиент, бегущий от темно-синего моря к более светлому небесно-голубому.
Используйте Pen Tool, чтобы нарисовать пару плавных холмов, залейте форму травянисто-зеленым. Расположите эти холмы за слоем моря так, чтобы они торчали из океана, как два острова. Кстати, рекомендую скачать игру здесь https://the-forest-pc.ru про выживание на острове с каннибалами.
Нарисуйте несколько пушистых облаков, используя перекрывающиеся круги. Заполните их все белым и слегка уменьшите непрозрачность.
Добавьте большой эффект Bevel and Emboss, используя синий в качестве цвета тени, чтобы придать облакам трехмерный вид.
Закончите облака с большим мягким белым Outer Glow.
Дублируйте облака и разместите их в нескольких местах по небу.
Создайте простой логотип для сайта. На этом сайте, где есть множество персонажей-монстров, я выбрал случайное имя Chumbooga Monsters. Установите тип креативным шрифтом или создайте нарисованный вручную логотип с нуля.
Добавьте эффект скоса и тиснения, чтобы добавить глубину к тексту, и тонкую тень, чтобы поднять его с экрана.
Одним из основных направлений дизайна является большая область видео. Поместите большое облако с правой стороны дизайна, затем создайте снимок видео, используя милых пушистых монстров из предыдущего поста .
Поместите некоторый текст, призывающий к действию, чтобы привлечь внимание к видео, я использую дружественные округлые формы VAG Rounded, чтобы связать с детской темой.
Подчеркните текст, используя различные стили слоя, такие как белая заливка, синий контур и мягкая тень.
В дизайне также используется небольшое уведомление, спрятанное в углу. Чтобы создать это, нарисуйте белый прямоугольник, затем поверните в одну сторону.
Используйте параметр «Деформация» в инструменте «Преобразование», чтобы исказить форму уведомления, слегка согнув угол.
Нарисуйте тонкую полоску ленты и залейте оранжево-желтой. Удалите зазубренные края с каждой стороны, чтобы придать рваный вид. Целью этого уведомления является предоставление информации для родителей, поэтому установите шрифт в более серьезном верхнем регистре без засечек, чтобы он контрастировал с дружественным закругленным шрифтом основного дизайна.
Используйте оставшееся место слева, чтобы ввести вступительное предложение о игрушках Chumbooga Monster. Поскольку сайт ориентирован на детей, большое значение имеет визуальный интерес, поэтому мы можем пожертвовать стандартными веб-шрифтами для стилизованного текста Photoshop, используя шрифт и все понравившиеся эффекты.
Четкий призыв к действию на странице направит пользователя к достижению целей сайта. Чтобы обозначить область, по которой можно кликать, создайте крупный графический элемент с помощью инструмента «Прямоугольник со скругленными углами». Добавьте диапазон стилей слоя, таких как наложение градиента, обводка и мягкая тень, чтобы превратить кнопку в нечто заманчивое.
Завершите работу с помощью простой команды, такой как «Принять монстра»! Идея состоит в том, что принятие монстра, а не покупка игрушки делает сделку намного более желательной.
Продвигаемые игрушки также должны быть четко представлены на странице. Используйте графику из предыдущего поста, чтобы создать макет бумажных заметок. Всю линейку можно посмотреть с первого взгляда, что позволит вам быстро выбрать своего любимого!
Дизайн почти завершен. Он использует яркую графику, чтобы соблазнить пользователя, и лишен нескольких важных элементов, чтобы избежать потери интереса. Наблюдение за базовой сеткой также помогает выровнять элементы, чтобы обеспечить структурированный внешний вид, но, будучи сайтом, предназначенным для детей, ряд угловых углов помогает добавить волнения в дизайн.
Окончательный дизайн использует воображаемый мир голубого неба и травянистых островов, чтобы создать идеальную сцену со счастливым настроением. Яркие цвета помогают стимулировать ум, а информация отбрасывается назад, чтобы не перегружать пользователя. Несколько призывов к действию обеспечивают следующий шаг для пользователя. После просмотра видео и ознакомления с монстрами, большая короткая кнопка позволяет пользователю выбрать своего монстра.
 (Пока оценок нет) Загрузка... |
