Создать забавный иллюстрированный дизайн сайта игрушек в Photoshop — изучаем со всех сторон

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

Журнал NET 193


Журнал NET 193 Build Off

С полной проблемой сборки можно ознакомиться в выпуске 193 журнала NET , не забудьте проверить его!

Создание иллюстрированного детского веб-сайта в Photoshop

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

Создание иллюстрированного детского веб-сайта в Photoshop

Начните с открытия Photoshop и создания нового документа. Чтобы дать четкое представление о том, как дизайн будет выглядеть на широкоэкранном мониторе, я использовал большой холст размером около 1680 × 1050. Залейте фон голубым цветом и добавьте направляющие для имитации безопасной ширины в 960 пикселей в центре.

Создание иллюстрированного детского веб-сайта в Photoshop

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

Создание иллюстрированного детского веб-сайта в Photoshop

Внизу нарисуйте выделение по ширине холста и залейте его темно-синим цветом.

Создание иллюстрированного детского веб-сайта в Photoshop

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

Создание иллюстрированного детского веб-сайта в Photoshop

Используйте Pen Tool, чтобы нарисовать пару плавных холмов, залейте форму травянисто-зеленым. Расположите эти холмы за слоем моря так, чтобы они торчали из океана, как два острова.

Создание иллюстрированного детского веб-сайта в Photoshop

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

Создание иллюстрированного детского веб-сайта в Photoshop

Добавьте большой эффект Bevel and Emboss, используя синий в качестве цвета тени, чтобы придать облакам трехмерный вид.

Создание иллюстрированного детского веб-сайта в Photoshop

Закончите облака с большим мягким белым Outer Glow.

Создание иллюстрированного детского веб-сайта в Photoshop

Дублируйте облака и разместите их в нескольких местах по небу.

Создание иллюстрированного детского веб-сайта в Photoshop

Создайте простой логотип для сайта. На этом сайте, где есть множество персонажей-монстров, я выбрал случайное имя Chumbooga Monsters. Установите тип креативным шрифтом или создайте нарисованный вручную логотип с нуля.

Создание иллюстрированного детского веб-сайта в Photoshop

Добавьте эффект скоса и тиснения, чтобы добавить глубину к тексту, и тонкую тень, чтобы поднять его с экрана.

Создание иллюстрированного детского веб-сайта в Photoshop

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

Создание иллюстрированного детского веб-сайта в Photoshop

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

Создание иллюстрированного детского веб-сайта в Photoshop

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

Создание иллюстрированного детского веб-сайта в Photoshop

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

Создание иллюстрированного детского веб-сайта в Photoshop

Используйте параметр «Деформация» в инструменте «Преобразование», чтобы исказить форму уведомления, слегка согнув угол.

Создание иллюстрированного детского веб-сайта в Photoshop

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

Создание иллюстрированного детского веб-сайта в Photoshop

Используйте оставшееся место слева, чтобы ввести вступительное предложение о игрушках Chumbooga Monster. Поскольку сайт ориентирован на детей, большое значение имеет визуальный интерес, поэтому мы можем пожертвовать стандартными веб-шрифтами для стилизованного текста Photoshop, используя шрифт и все понравившиеся эффекты.

Создание иллюстрированного детского веб-сайта в Photoshop

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

Создание иллюстрированного детского веб-сайта в Photoshop

Завершите работу с помощью простой команды, такой как «Принять монстра»! Идея состоит в том, что принятие монстра, а не покупка игрушки делает сделку намного более желательной.

Создание иллюстрированного детского веб-сайта в Photoshop

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

Создание иллюстрированного детского веб-сайта в Photoshop

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

Создание иллюстрированного детского веб-сайта в Photoshop

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



Поделитесь в соц.сетях:

Оцените статью:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован.