Как нарисовать значки Warface

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

1.Вот логотип. Да, еще, кто не в курсе, картинки увеличиваются.

Надо нарисовать прямоугольник. Делаем так: рисуем прямую, делим ее пополам(опускаем вниз вертикальную линию), вниз от крайних точек отмеряем эту половину и чуть-чуть еще, проводим горизонтальную прямую, потом отступаем еще — это будет середина прямоугольника(отмечена маленькой прямой). Две прямые рисуете на глаз(я имею отступ от верха и низа прямоугольника соответственно), однако расстояние от середины справа и слева должны быть одинаковы. Можете всего этого не делать, а нарисовать на глаз.

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

Стираем все вспомогательные прямые, оставив только по середине, рисуем дальше.

Примитивно можно закрасить значок таким образом.

2.Значок, его разрешение очень небольшое. Хотела сделать несколько значков, но они такие маленькие, очень трудно разглядеть детали, так что имеем, что имеем. Начнем.

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

Рисуем зубы, язык и прямые, которые отходят от головы.

Рисуем гриву, если нарисованы тонкие линии, то тоже рисуете еле видно.

Мастер-класс "Создание эмблем для команд в программе PowerPoint2010"

Автор Ростова Наталья Сергеевна, воспитатель I категории, МБДОУ «Детский сад №155», г. Нижний Новгород.
Мастер-класс предназначен для воспитателей, педагогов и родителей.
Цель: использовать возможности программы PowerPoint2010 для создания эмблем.
Задачи:
- научить создавать эмблемы;
- повысить педагогическую компетентность;
- расширить возможности применения ИКТ технологий в работе.
Для создания эмблем необходимо:
- наличие ПК;
- картинки и фоны для эмблем определенной тематики;
- владение компьютером и программой PowerPoint2010.
Технологию создания эмблем легко освоить, используя возможности Microsoft Office Power Point2010.

Ход создания:
Открыть программу PowerPoint2010 и создать пустой слайд.
Эмблема будет круглой, поэтому на вкладке Вставить выбираем Фигуры - Овал.

Удерживая кнопку ctrl, растягиваем овал в идеальный круг. Размер регулируем согласно необходимым размерам.

Надпись в эмблеме должна располагаться по кругу, поэтому выбираем вкладку Вставить- Надпись. Затем щелкаем на фигуре и выбираем вкладку Средства рисования - Текстовые эффекты - Преобразовать -Траектория движения - Дуга вверх.

Вводим текст. У меня название детского сада.
Выбираем девиз. У меня "Лети(м) к победе!". Девиз также располагаем по кругу, но в нижней его части.
Выбираем снова вкладку Средства рисования - Текстовые эффекты - Преобразовать -Траектория движения - Дуга вниз.

Используя вкладку Главная - Шрифт , выбираем для надписей цвет, шрифт и размер шрифта.Теперь нам нужно заменить заливку круга:
Вкладка Средства рисования - Заливка - Нет заливки. Можно пропустить этот шаг и разу выбрать Заливка - Рисунок

Выбираем нужный рисунок. У меня звездное небо.
Теперь вставим рисунок, подходящий для названия команды. Наша команда называется "Ракета", поэтому у меня картинка ракеты, найденная на просторах интернета и измененная мною. Вкладка Вставить - Рисунок и выбираем его из нужной папки.

Регулируем размер картинки согласно размерам эмблемы, уменьшая ее размеры. У моей ракеты нет огня, поэтому выбираю нужную картинку и добавляю недостающий элемент. Обратите внимание, картинку огня ставим на задний план. Вкладка: Средства рисования - На задний план.

Эмблема почти готова. Переходим к ее окончательному дизайну. Работаем с контуром круга, выбираем его цвет и толщину. Средства рисования - Контур фигуры - Цвкта темы - Толщина - Другие линии -Тип линии - Ширина выбираю 10.

На созданную эмблему снова накладываем круг.

Регулируем его размер. Второй круг по размеру должен быть больше первого. На вкладке Средства рисования - Заливка фигуры - Нет заливки. Фигура станет прозрачной.

Теперь снова работаем с контуром второго круга, его цветом и толщиной. Толщина контура этого круга у меня 12.

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

Применяем группировку.

Эмблема после этого действия стала единым целом и передвигается целиком в любое место слайда.
Эмблему можно сохранить как рисунок. Щелкаем на эмблеме, нажимаем на правую кнопку мыши, выбираем сохранить как рисунок и выбираем место сохранения.

Эмблема готова. По аналогии создаем любые другие эмблемы на любую тематику.
У меня получились такие:

Дорогие коллеги, для создания эмблем нужно выбирать рисунки на прозрачном фоне. Если же необходимый рисунок наложен на фон, то нас выручит любая программа для фотошопа или же команда Работа с рисунками - Удалить фон . Спасибо. Желаю творческих идей!

В том случае, когда пиктограмма будет использоваться на экране. Если сразу делать растр, то при масштабировании линии размоются и перестанут попадать в пиксели. А рисовать ещё где-то нет смысла: всё равно потом импортировать в макет в фотошопе.

Начнём с того, что проблема «мягкой» обводки решается настройками контура:

Теперь можно нарисовать что-нибудь. Мне как раз нужна иконка газеты.

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

Особенности подмечаю на том, что есть под рукой:

Возьму для примера первую полосу из архива Нью Йорк Таймс. Сразу подгоняю размер под другие иконки. Тут важен визуальный вес, а не математические параметры:

Чтобы узловые точки прилипали к пиксельной сетке, нужно поставить галочку вот тут:

Cmd+k

Для линий объектов, повёрнутых на угол не кратный 45°, прилипание к сетке может оказаться вредным, поэтому клавиши и [k] могут быстро затереться:-)

Уже видно, что газета получается «тяжелей» остальных объектов. Немного уменьшаю:

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

Добавляю деталей. Проверяю, укладываются ли 6 колонок так, чтобы поля газеты были равными (У меня случайно получилось, что - да. Иначе пришлось бы сделать газету на пиксель шире.)

Вот тут линии противно склеиваются, образуя тёмное пятно. При увеличении этого не видно, а на предыдущем скриншоте сразу бросается в глаза:

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

Уменьшаю до нужного размера и каждую букву загоняю в пиксельную сетку:

Наполняю газету:

Почти готово. Меня смущает количество чернил. Иконка получилась сильно плотней своих соседей. Разряжаю строки, убираю Титаник.

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

Честно говоря, мне даже просто вот так нравится:

Я ещё подумаю какой вариант выбрать. На сегодня всё.

В этом уроке мы узнаем, как нарисовать красивую иконку телевизора в Adobe Photoshop.

Шаг 1.

Создайте новый документ (File > New) с показанными настройками

Шаг 2.

Залейте фон #FFFFFF цветом, а затем примените к нему следующие Эффекты слоя .

Шаг 3.

Используйте с радиусом 35px BODY , откройте Стили Слоя и примените следующие настройки.

Также добавьте Обводку с слою BODY со следующими настройками

Шаг 4.

Шаг 5.

Используйте инструмент Прямоугольник со скругленными углами (U) с радиусом 35px и создайте прямоугольник любого цвета. Назовите этот слой BODY_2 и после этого примените на этот слой следующие эффекты.

Также добавьте Обводку к слою BODY_2 со следующими настройками.

После этого добавьте Внутреннею тень к слою BODY_2 со следующими настройками.

Шаг 6.

Вы должны получить похожий результат.

Шаг 7.

BODY . Назовите этот слоя BASE . Используйте инструмент Прямоугольник со скругленными углами (U) с радиусом 35px

Для этого выберите слой BODY нажмите правой кнопкой мыши и выберите Скопировать стиль слоя и затем выберете слой Base нажмите на правую кнопку мыши и выберете Вставить стиль слоя .

После этого необходимо исправить толщину Обводки на 3px в слое BASE.

Шаг 8.

Вы должны получить похожий результат.

Шаг 9.

Создайте новый слой и поместите его под слой BODY . Назовите этот слой FOOT . Используйте инструмент Прямоугольник со скругленными углами (U) с радиусом 35px и затем примените к нему следующие эффекты слоя.

Примените также Внутреннюю тень к слою FOOT.

Шаг 10.

Вы должны получить похожий результат.

Шаг 11.

Теперь продублируйте слой FOOT и поместите его как показано на рисунке.

Шаг 12.

Создайте новый слой, назовите его GLOSSY и поместите его поверх всех слоев, затем выберите инструмент Кисть (B) и большой кистью с мягкими краями поставьте одно белое пятно.

Затем поменяйте Режим наложения на Перекрытие с уменьшите Прозрачность на 50%

Шаг 13.

Создайте новый слой назовите его SCREEN и поместите поверх всех слоев.

Используйте инструмент Прямоугольник со скругленными углами (U) с радиусом 35px , чтобы создать прямоугольник. Затем скопируйте Стиль слоя BODY_2 и примените его к слою SCREEN . Теперь исправьте толщину обводки на 10px в слое SCREEN .

Шаг 14.

Вы должны получить похожий результат.

Шаг 15.

В этом шаге мы сделаем сам экран. Создайте новый слой SCREEN_2 . Поместите его поверх остальных слоев. Используйте инструмент Прямоугольник со скругленными углами (U) с радиусом 35px , чтобы создать прямоугольник. Затем примените Градиент в Стилях Слоя со следующими настройками.

Затем примените Внутреннюю тень к слою SCREEN_2 .

Затем примените Внутреннее свечение к слою SCREEN_2 .

Затем Тень к слою SCREEN_2 .

Шаг 16.

Вы должны получить похожий результат.

Шаг 17.

Создаем новый слой и называем его SCREEN GLOSSY и помещаем его поверх остальных. Затем выбираем инструмент Перо (P) и рисуем контур как показано на рисунке. И заливаем его белым цветом #FFFFFF . Затем уменьшаем прозрачность до 20%

Шаг 18.

Создаем новый слой, называем его LIGHT DOT и помещаем поверх остальных слоем. После этого выбираем инструмент Кисть (B) и большим размером кисти, с мягкими краями ставим по центру экрана одно большое белое пятно.

Шаг 19.

В этом шаге вы сделаем кнопки. Возьмите инструмент Эллипс (U) и создайте круг и поместите его примерно так как на картинке, назовите этот слой BUTTON .

Теперь вернитесь к слою BODY_2 и скопируйте его Стиль слоя нажав по нему правой кнопкой и выбрав Скопировать стиль слоя . После этого примените скопированный стиль на слой BUTTON .

Шаг 20.

После этого мы применяем Стиль слоя как показано на картинке, к нашей копии круга.

Затем добавляем Тень .

Шаг 21.

Вы должны получить похожий результат.

Шаг 22.

Повторяем ранние шаги и применяем Стили слоя к прямоугольнику, но немного модифицируем настройки Тени .

Шаг 23.

Вы должны получить похожий результат.

Шаг 24.

Мы дублируем слой BUTTON помещаем его под первой кнопкой, затем немного поворачиваем его. Также редактируем Стиль слоя Градиент второй кнопки.

Шаг 25.

Теперь наши кнопки готовы.

Результат должен быть как на картинке.

Шаг 26.

Сделаем динамик. Нам надо создать прямоугольник со скругленными углами под кнопками, как на рисунке. Назовем этот слой SPEAKER .

Шаг 27.

Теперь откроем Стиль слоя и применим следующие настройки.

Применим Внутреннюю тень к слою SPEAKER.

Добавим Обводку к слою SPEAKER .

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

Если вы рисуете иконки под заказ, рисуйте скетчи, так избежите лишней работы при отрисовке, показав предварительно свои образы заказчику.

Шаг четвертый: Размер

Это вообще самое важное: определиться с минимальным размером.
Для чего это нужно? Если вы хотите, чтобы ваши иконки были с четкими краями, pixel perfect и масштабировались правильно, нужно определиться с размером и толщиной объектов в самом маленьком размере (x1). Рекомендую использовать четные размеры иконки.

Шаг пятый: Процес

Создайте документ со значениями

Где Spacing - расстояние между артбордами.

Width и Height - высота и ширина артборда.

Raster Effects - разрешение (ppi) для иконок подойдет 72

Align New Objects… - эта галочка отвечает за привязку точек к пиксельной сетке. Советую включать, но в ходе работы, ее всегда можно выключить.

Выберите первый артборд, в нем будет делать все иконки, а готовые будет вставлять на соседние артборды.
Создайте квадрат под размер рабочей области.
Расставьте направляющие, чтобы облегчить процесс рисования.
Используйте Pixel Preview
Отмечайте готовые иконки в списке образов, так наглядно можно следить за своим прогрессом.
Придерживайтесь советов и прошлой статьи о .
Не делайте свой первый сэт слишком большим, можно быстро устать и бросить это дело на половине. Нормальной скоростью будет около 20 иконок в день, потом они могут быстро надоесть…
Оформите исходник, и не забудьте навести порядок в слоях, подготовить файл для фотошопа и sketch например.
Подготовьте шот для dribbble и behance, оформите пост для социальных сетей. Это лучший пиар для ваших работ и выход на новые заказы. Не забудьте о хэштегах: #design #best #mamalubitmenya #kupiteikonky

Где можно продавать:

graphicriver.net - свободная площадка для торговли любым цифровым контентом.

creativemarket.com - что бы создать здесь аккаунт у вас попросят показать аккаунты на других магазинах и свое порфолио.

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

icons8.com - ничего не знаю про этот магазин, если у кого то есть опыт, поделитесь им в комментариях.