значки приложений для срисовки
Как я иконки для телефонов начал рисовать (Часть 1).
Привет Пикабу! Мой первый пост будет простыней, поэтому вот в чем основная суть. Запилил и выложил в Google Play набор иконок в стиле Hearthstone для android телефонов и планшетов. Ищите по запросам Магические иконки Фэйтэла или Magic Faitel’s Icon Pack.
Ну а далее в посту, с чего это я решил вдруг их нарисовать, как это делал и с чем сталкивался в ходе рабочего процесса. По сути откровения о том, как проходит первый год освоения новой для меня специальности – графический дизайн.
Что было до начала работы над проектом:
Я можно сказать потомственный ИТ-инженер, получил образование в этой области и несколько лет проработал с отцом обслуживая компьютеры, сервера, сети и различную технику на предприятиях. Но в определенный момент, почувствовал, что пришло время заняться чем-нибудь другим. За полгода после отхода от этой деятельности, перечитал кучу книг по бизнесу, маркетингу и психологии (вещи интересные, но как их в жизни применять решительно не понятно), устроился на временную работу с гибким рабочим графиком и занимался созданием своих, а после и чужих веб-сайтов. В свободное от работы время брался вообще за всё что казалось интересным: пробовал учиться играть на разных музыкальных инструментах, учить различные языки, заниматься спортом,. Но неопределенность и туманность будущего все время давили на меня тяжким грузом.
Пока в один холодный декабрьский день не прочитал книгу, связанную с психологией (они все перемешались в моей голове, извините что нет названия), посыл которой был в том, что до 4-5 лет ребенок воспринимается все как новое и готов учиться всему на свете, но с возрастом окружающая среда и люди подавляют стремление развиваться и создают определённые комплексы. По рекомендации из книги, я выбрал область в которой считал, что совсем не силен и решил сломать внутренний стереотип, что я не могу этим заниматься. Этим делом оказалось рисование. “Какое к черту инженеру художество! Мама за меня все в школе рисовала!” – думал я.
Но всё-таки попробовал. Рисовал карандашом на бумаге по простеньким инструкциям, по типу всеми любимой – как нарисовать сову. Это было по-детски интересно и необычно, моя youtube подборка постепенно стала обрастать видео по рисованию и среди них оказались те самые, которые помогли мне расставить приоритеты на ближайшее будущее. Это Youtube канал нашего соотечественника Виталия Ивлева и посвящён он графическому дизайну и тому как сделать первые шаги в этой области. Вся прелесть этих видео, в том, что после всего что я попробовал и перечитал, этот человек предложил ясный и понятный путь как вступить и начать следовать по пути к новой профессии.
В следующие четыре месяца я изучал поэтапно азы рисования и тратил большую часть заработанных денег на готовые видео уроки и книги. Рисовать на бумаге весело, но мне вечно нахватало инструментов, которые рекомендовали в учебниках, поэтому я продал свои Xbox 360 и купил графический планшет Wacom Intuos Pen & Touch и полностью переключился на него. Все прочие занятия кроме 4 часов работы постепенно отвалились, ведь я тупо сидел и рисовал на планшете кружочки, палочки, кубы, сферы и учился накладывать на них цвет, свет и тень.
Все это по началу делать тяжело и не охота, но учебники и опыт в прошлой сфере подсказывали, что основы закладывают важный фундамент для всей дальнейшей деятельности.
Хотя естественно мне, как и всем хотелось сразу рисовать драконов. Я как-то нарисовал дракона с кривой пастью и змею с непонятной чешуёй ужаснулся и пошел дальше учить перспективу.
Небольшая заметка о методических материалах.
Я был приятно удивлен, можно сказать шокирован, насколько дизайнеры и художники открыты в желании поделится своими знаниями с другими. Иностранные материалы хорошо упрощены и кратко излагают суть, но можно также найти такие монументальные труды советских времен, в которых все разжевано до мельчайших деталей. Ресурсов конечно существует огромное количество, но не гоже новичку людей учить, вот лишь те что мне особенно понравились:
The Designer Starter Kit с сайта thedesignsketchbook.com – научили меня как карандаш держать и на стуле правильно сидеть, настолько оказывается все запущенно.
How to draw и How to render. Скотта Робертсона. – Просто о том, как рисовать и раскрашивать.
И снова к драконам
Вообще, мне всегда нравилась фантастика. Книги по вселенной ведьмака, властелина колец, хроник Амбера, несметное количество томов Забытых королевств и многие другие шедевры мировой литературы уже давно занимают почетное место на моих книжных полках.
Но больше всего места занимает World of Warcraft. Купив его в далеком 2005 году, для меня тогда еще школьника, книжные миры, приключения и истории внезапно стали вполне осязаемыми и заиграли новыми красками.
В 2006 году, конечно, 3D технологии сильно отставали от фантазии художников.
Когда пришло время закреплять рисование простых текстур и поверхностей, первым делом я попытался набросать иконку google chrome в стиле hearthstone.
Меня радовал, сам факт, что я смог нарисовать что-то в варкравтовском стиле после стольких месяцев рутиной учебы.
Друзьям набросок тоже понравился понравился, а я на него смотрел на него с характерным для Артаса выражением лица.
К этому времени я уже комфортно себя чувствовал, управляя пером и планшетом на компьютере, но моё воображение будоражили отзывы об Ipad Pro от блогеров (отрицательные) и художников (положительные). Поэтому сильно захотев, продал свои электронные барабаны и андроид планшет и уже через неделю Ipad попал в мои руки. Сказать, что я был в восторге это ничего не сказать.
Да, он слабо тянет рисование больших картин, но в пределах небольших картинок 2K, Full HD или меньше, пользоваться им это одно удовольствие. И рисовать можно где угодно. На вскидку, я комфортно рисовал: зажатый между бабушками в очереди в больнице, трясясь в поезде, в гостинице без коммуникации и даже послеоперационной (Все вокруг нервничают, толкаются, шумят, а ты сидишь рисуешь себе спокойно).
Возвращаясь к иконкам
Я все еще не был уверен, что смогу нарисовать остальные иконки в похожем стиле и следующим была иконка Facebook. Получилось как-то так.
В день на рисование уходило от 4-10 часов и в частности от 40 мин до 3 часов на одну штуку.
Таким образом в промежутке с середины мая и по июль месяц, было нарисовано 150 иконок из них 30 я вырезал из финальной версии, их надо частично или полностью переделывать.
Иконки готовы, но их еще надо перенести на телефон. Об этом в отдельном посте, если вам интересно конечно.
Как создать классную иконку для приложения Android и iOS
Современные люди проводят большую часть свободного времени в различных приложениях на смартфонах. Поэтому если вы решили создать свой продукт, следует выбрать привлекательную и интересную иконку для приложения. Как это сделать, расскажем в данной статье.
Создайте свой логотип онлайн. Более 50 тысяч брендов по всему миру уже используют логотипы от Турболого.
Что такое иконка приложения?
Иконкой мобильного приложения называют изображение, которое демонстрирует его пользователям. Именно эта небольшая картинка позволяет распознать ваш продукт среди похожих приложений на рынке. Кроме того, иконка способна привлечь внимание клиентов к вашему проекту.
Иконка и логотип: в чем разница?
Ошибочно думать, что иконка и логотип — одно и то же. Рассмотрим основные отличия данных составляющих фирменного стиля.
Иконка:
Логотип:
Советы по дизайну иконок
Пользователи могут удалять приложение со смартфона не только по причине его ненадобности, но и из-за эстетической непривлекательности иконки. Данный аспект следует учитывать при разработке изображения: любая деталь может оттолкнуть клиента. Мы собрали для вас 5 основных советов, которые помогут вам сделать эффективный дизайн иконки приложения.
1. Выбирайте простоту
Лаконичная иконка гораздо с большей вероятностью привлечет внимание пользователей. Простые и гармоничные изображения легко воспринимаются и при этом передают всю необходимую информацию о приложении.
2. Грамотно подберите цвета
Расцветка иконки имеет важное значение в ее привлекательности. Поэтому важно выбирать цветовую гамму изображения, опираясь на следующие советы:
3. Создайте гармоничный знак
Важно, чтобы иконка выглядела согласованно и целостно. Для этого учитывайте следующие аспекты выбора дизайна:
4. Избавьтесь от лишних элементов
Следует помнить, что иконка является значком, который будет отражаться в магазине в уменьшенном виде. Поэтому следует по максимуму убрать из картинки лишние детали. Также возьмите во внимание следующие советы:
5. Делайте ставку на уникальность
Обилие приложений создает постоянную конкуренцию компаний за клиентов. Именно иконка способна захватить внимание пользователя. Изображение, выбранное для вашего продукта, должно быть не только качественным и привлекательным, но и уникальным. Это позволит клиентам без труда идентифицировать ваше приложение среди сотни других.
Как создать иконку приложения: 3 способа
Существует 3 основных способа получения иконки для вашего приложения. Первый — нарисовать иконку самостоятельно в графическом редакторе. Второй — создать в онлайн-генераторе. Третий — обратиться за помощью к профессиональным дизайнерам. Рассмотрим особенности каждого способа.
1. Сделать иконку в графическом редакторе
Данный способ подойдет тем, кто имеет опыт работы в программах Photoshop и Illustrator. Для создания иконки потребуется изучить интерфейс редакторов хотя бы на уровне начинающего пользователя.
Плюс такого варианта разработки иконки — отсутствие материальных затрат. Однако при недостаточном опыте работы в графических редакторах и познаний в области дизайна сделать качественный продукт будет довольно сложно.
2. Разработать иконку в онлайн-сервисе
Создание иконки в онлайн-конструкторе логотипов — простой и доступный вариант. Вам не потребуется изучать никакие программы, а также разбираться в трендах дизайна иконок.
Вы можете использовать сервис Turbologo. Данный онлайн-конструктор логотипов поможет сделать уникальный логотип всего за 15 минут. Простой интерфейс и понятные инструкции позволят любому пользователю без труда разработать иконку. Также в сервисе доступна библиотека готовых шаблонов логотипов, разделенных по категориям. Вы точно сможете найти подходящий дизайн и переработать его под свои пожелания.
3. Заказать иконку у дизайнера
Если у вас нет опыта в разработке иконок приложений, вы можете обратиться к специалистам в данной сфере. Для этого потребуется потратить некоторый бюджет и время на поиск добросовестного дизайнера, но результат однозначно вас порадует.
Подведем итоги
Для разработки иконки приложения необязательно иметь познания и опыт в сфере дизайна. Современные технологии позволяют получить иконку в тот же день. А представленные в статье советы помогут вам выбрать качественный и интересный дизайн для вашего приложения.
Продуктовый и графический дизайнер с опытом работы более 10 лет. Пишу о брендинге, дизайне логотипов и бизнесе.
Проектируем классные иконки приложений
После моей нашумевшей статьи “Let’s talk about white app icons” (“Давайте поговорим о белых иконках приложений”), которая — признаю — написала слегка назидательным тоном, я решил написать еще одну более конструктивную и практическую статью о проектировании классных иконок. Эта статья подойдет любому: от новичка до профессионала. В ней я расскажу о магии иконок и о том, как сделать их дизайн еще лучше.
На видео выше я за 10 минут рассказываю о пяти основных аспектах дизайна иконок и привожу реальные примеры того, как я работаю с этими аспектами. В видео много историй, советов и пикселей, и я надеюсь, что интересно будет всем: и начинающим, и опытным дизайнерам. Если хотите чуть больше контекста, читайте дальше. Обещаю, будут булиты.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.
Для начала
Проектирование одного единственного предмета граф. дизайна, с которым пользователи будут взаимодействовать при каждом использовании продукта, может показаться пугающей задачей. Красивая, узнаваемая и запоминающаяся иконка может сильно повлиять на популярность и успех приложения. Но как именно спроектировать “хорошую” иконку приложения? Что это вообще означает? Не бойтесь, я собрал несколько советов, которые помогут ответить на эти вопросы. Эта статья — ваше руководство по проектированию классных иконок.
Что такое “иконка приложения”?
Первое, что вы должны понять, принимаясь за проектирование — это что такое “иконка приложения” и какую задачу она выполняет. Иконка приложения — это визуальный якорь вашего продукта. Можете рассматривать иконку как небольшой элемент брендинга, который должен не просто красиво выглядеть и выделяться, но еще и предавать основную суть вашего приложения.
Словом “логотип” сегодня разбрасываются очень легкомысленно. Иконка приложения — это не логотип. Хотя иконки и обладают некоторыми “брендинговыми” качествами, для них существует множество особых ограничений. Дизайнер должен понимать разницу: логотип — это масштабируемый векторный элемент брендинга, который используется на бланках и рекламных щитах. Иконки — обычно растровые изображения квадратной формы, которые подстраиваются под конкретные размеры и определенные контексты использования. Так что между логотипами и иконками множество различий: в подходе к работе, в инструментах, в процессе проектирования и, следовательно, в критериях успешности.
С практической точки зрения, под иконкой приложения понимается комплект из PNG-файлов разных размеров — от небольших (29х29) и до крупных (1024х1024) — которые нужно связать с приложением. Операционная система будет использовать этот комплект иконок в различных контекстах: в App Store и Google Play, на панели настроек устройства и на домашнем экране.
Можно создавать иконки в любом редакторе, который поддерживает создание растровых файлов. Обычно для этого используют Photoshop, Illustrator и Sketch. Бесплатные инструменты типа appicontemplate.com предлагают удобные PSD шаблоны, которые станут отличным подспорьем на начальном этапе.
5 ключевых аспектов
Теперь давайте изучим некоторые лучшие практики проектирования иконок приложений. Мы рассмотрим каждый из пяти ключевых аспектов в отдельности, и по каждому я дам несколько советов и приведу примеры. Большинство примеров — это мои собственные работы. Это не означает, что мои работы самые лучшие, просто, создавая их, я опирался именно на ту информацию, которую изложил в этой статье. Когда будете читать про каждый из аспектов, попробуйте представить свои любимые иконки и увидеть в них то, о чем я буду говорить. Ну что ж, давайте приступим.
1. Масштабируемость
Один из самых важных аспектов иконки — это масштабируемость. Иконка будет использоваться в разных разделах платформы и отображаться в разных размерах — поэтому важно, чтобы она всегда оставалась уникальной и четкой. Иконка должна хорошо выглядеть и в App Store, и на ретина-дисплее, и на панели настроек.
Слишком сложные иконки, перегруженные деталями, как правило, плохо масштабируются.
В процессе проектирования иконки приложения большую долю внимания стоит уделить тому, насколько изящно масштабируется выбранный вами дизайн.
2. Узнаваемость
Иконка приложения — как песня: очень важно, чтобы ее было легко узнать среди других мелодий в магазине (то есть других иконок на домашнем экране). И точно так же, как мелодия песни затрагивает душу слушателя, формы, цвета и идея иконки должны цеплять пользователя.
Дизайн должен передавать запоминающийся и логически связанный образ как на функциональном, так и на эмоциональному уровне.
Ваша иконка будет бороться за внимание пользователя с тысячами других иконок такого же размера, которые тоже несут свой замысел и стараются привлечь внимание.
Для узнаваемости большую роль играет не только масштабируемость, но и новизна. Главная сложность при проектировании иконки — найти баланс этих качеств.
3. Согласованность
Важно также добиться согласованности между процессом взаимодействия с иконкой и процессом взаимодействия с приложением.
Мне кажется, что хорошая иконка — это продолжение идеи приложения. Если иконка и интерфейс будут согласованы, приложение лучше запомнится пользователю.
Нужно сформировать в сознании пользователей единый, целостный образ приложения — это повышает общую удовлетворенность от использования продукта, а также способствует удержанию существующих клиентов и привлечению новых.
Короче говоря, если ваша иконка гармонично дополняет идею, функциональность и дизайн приложения — можете считать это большой победой.
4. Уникальность
Это в общем-то очевидно: постарайтесь создать нечто уникальное. Ладно, вы можете использовать какой-то существующий стиль или тренд, но сделайте это по-своему!
Ваша иконка будет соревноваться за внимание пользователя с другими иконками — и оригинальный дизайн может стать отличным преимуществом.
Уникальность — это коварный аспект дизайна: здесь играют роль не только ваши навыки, но и дизайнерские решения остальных “игроков” на рынке, которые стараются решить ту же задачу.
5. Не используйте слова
Это самая больная тема всех времен. Только в очень редких случаях в иконках допускаются слова. Я считаю, что если дизайнер прибегает к использованию слов, значит он не в полной мере использует свой арсенал образов.
Слова и изображения — это совершенно разные инструменты представления. Иконка должна служить графическим представлением приложения, а если в ней намешаны слова и образы, то результат получается перегруженным и расфокусированным — и пользователю сложнее уловить идею такой иконки. Ну неужели не нашлось лучшего способа изобразить идею приложения, чем просто сказать словами? Когда я вижу иконки со словами, мне всегда кажется, что дизайнер просто не смог передать свою задумку более понятно.
Создание своей метки
В App Store и Google Play есть масса скучных и банальных иконок. Ваша иконка — это ваша самая сильная связь с пользователем. Именно с нее начинается знакомство с приложением в App Store. Именно с ней пользователь взаимодействует всякий раз, когда открывает приложение. Когда у приложения непродуманная, некрасивая или неподходящая иконка, оно теряет свой самый важный визуальный актив. Иконка приложения — это не довесок, о котором вспоминают в последнюю очередь, а важная часть всего процесса разработки приложения.
Иконка приложения — это небольшой кусочек концентрированного дизайна. Если вы хотите создать хорошую иконку, есть набор аспектов, которые нужно продумать. Масштабируемость, узнаваемость, согласованность и уникальность — все эти аспекты есть и в других областях дизайна. Если научитесь создавать классные иконки — повысите свой общий дизайнерский уровень.
У всех иконок — детализированных и упрощенных, креативных и обыкновенных — есть нечто общее: одинаковые по размеру, все они стараются выделиться на фоне конкурентов и привлечь внимание пользователя. Это непростая задача, и решение всегда лежит в пределах все того же фиксированного количества пикселей.
Конечно, дизайнер может чувствовать себя неуверенно: шутка ли — разработать графическое представление всего приложения! Но я надеюсь, что мои советы помогут вам обрести уверенность и смело взяться за работу. А теперь вперед — создайте фантастическую иконку для своего приложения!
Вау, вы дочитали до конца!? Хотите еще информации об иконках? Вот мое выступление на Adobe MAX в Лос-Анджелесе. В этом видео я рассказываю о своих работах, о концепциях, которые я упоминал в этой статье, и, наконец, прямо на сцене улучшаю одну из иконок. Думаю, что я сказал об иконках все, что хотел.