В этом посте я постараюсь ответить на вопросы, которые получил от читателей блога по почте. А именно:
- На что обращать внимание?
- В каком размере делать?
- Как подбирать изображения в один пак?
В ответах я буду исходить из того, что цель, которую вы ставите перед собой, берясь за иконки – это прибыль. Или чужая польза. Так как самые полезные файлы (а не самые красивые, самые сложные и т.д.) продаются лучше всего. Собственно, поставить себя на место своего покупателя – самое важное умение, которое необходимо для заработка на микростоках. Итак, начнем.

Тип иконок и контекст

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

Моя собственная классификация иконок проста. Я различаю два типа иконок: интерфейсные и концептуальные. Большинство иконок на стоках – интерфейсные. Такими иконками иллюстрируются пункты меню, кнопки, иногда – длинные списки преимуществ и возможностей. Вот хороший пример интерфейсных иконок:

Рядом с такой иконкой легко представить надписи вроде «о нас», «контакты», «профиль пользователя» и т.д.

Концептуальные же иконки иллюстрируют сложные абстрактные идеи, вроде «прибыль», «креативность», «новое», «интеграция», «гармония», «простота». Такие иконки представляешь не в паре с управляющим элементом или кнопкой, но рядом с каким-то фрагментом текста, к которому автор хочет привлечь внимание. Вот пример концептуальных иконок:

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

Качество

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

Иконок больше, чем в первом примере, но они объективно хуже. Автор поленился. Поторопился. А первый мастер использовал больше цветов, больше деталей, скругленные формы и подчеркнул достоинства своих иконок черным фоном и отражением.
Если превосходное качество пока тормозиться вашими техническими навыками, используйте overdelivering. Делаете, как все? Тогда делайте больше всех. Пакуйте не по 15, а по 50 иконок в один файл. Поверьте, он будет продаваться много больше и много лучше, чем 3 по 15. Вот пример-бестселлер:

Размер

Размер иконок тесно связан с качеством. Если вы делаете детализированные, несхематичные иконки, вам нужно показать их достоинства. Следовательно, формат 50 иконок в одном файле, вам не подходит. Сочетание размеров, на мой взгляд, тоже хорошо работает (детализированные иконки укрупняем, более простые – показываем мельче, располагаем иконки не ровно в ряд, а псевдо-хаотично, в шахматном порядке).

Подача

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

Лично мне – на первом наборе. Максимум – на втором, а иконки с 3-го по 5-й наборы я даже не просмотрю.

Подбор изображений в набор

Я обычно поступаю так: создаю свои наборы и смотрю на продажи. По результатам через несколько недель – рекомбинирую. Угадать, что будет продаваться очень сложно. Только опытным путем. Например, я решил создать «убийственный» набор иконок на кофейную тему. Думал, у этого файла будут хорошие продажи:

 
Но опыт показывает, что я ошибался. Поэтому, через какое-то время я создам новый набор на тему кофе или «кофе и чай» и сравню его эффективность с первым.

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

Реалистичность

«Нарисованная на компьютере» вода почти никогда не бывает в строгом смысле слова реалистичной. Она подчеркивает те или иные свойства реальной воды, на которые мы хотим, чтобы зритель обратил внимание. Если мы изображаем горное озеро, мы концентрируемся на отражающей способности воды и, естественно, откажемся от всякой текстуры, изобразим его таким гладким и прозрачным, каким оно никогда не бывает. Важно концентрироваться на эмоциях зрителя. Если горное озеро выглядит «кристально чистым», а море – сплошной девятый вал, они будут казаться реальными.
Отсюда важный вывод: вода, изображенная не фотореалистично, может выглядеть более реальной, чем «настоящая». Посмотрите, например на морской бой, нарисованный Tomasz Jebruszek

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

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

Способы текстурирования

1. Наложение обесцвеченной водной текстуры на градиент в одном из режимов наложения (overlay, soft light и т.д.)

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

2. Генерация моря в 3D

Самое простое – в программе Vue, которая специально заточена под изображения ландшафтов. Этот способ я считаю наихудшим, вода выглядит как смятый целофановый пакет. Подходит для ситуаций, когда реалистичность текстуры – некритична. При этом, например, на моем компе рендер картинки небо+море нормального качества занимает не менее получаса. Альтернативный способ (без 3д, но с тем же результатом) – это использование displacement map, как описано в этом туторе. Кроме того, этим способом проблематично (только с помощью спец. плагинов) можно добиться всяких там барашков, пены, взлетающих брызг и пр. 

3. Нарисованное с нуля вручную море.

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

4. Текстурирование градиента «кусочками» реальных фотографий.

При этом способе, вода сохраняет не только текстуру, но и блики. Несколько моментов, которые нужно учитывать:
- фотка водной текстуры должна быть «не мутной», со множеством мелких деталей
- основная проблема, которую придется «побороть» – это цветовой шум, зернистость фотографии. Для этого я инструментом color balance (ctrl+b) «вытягиваю» нужную мне группу оттенков (например усиливаю цвет морской волны). А после еще несколько раз расскрашиваю различные участки моря различными оттенками большой мягкой кистью в режиме наложения color. Особо заметные зернистые участки разглаживаются инструментом «палец».  После этой первичной обработки, нужно заняться мелкими деталями. В картинке ниже, вы увидите все, что у меня расположено «над» слоем с фотографией водной текстуры.

 
Красным цветом отмечена область, которую я зарисовал мягкой белой кистью (соблюдая очертания волн) в режиме overlay. Это – светлое пятно, в котором отражается яркий участок неба.
Розовым цветом омечены штрихи, нарисованные «поверх» фотки, чтобы дополнительно акцентировать или сделать более резкими какие-то волновые формы.
Оранжевым отмечены нарисованные вручную отражения под объектами (корабль, чайка, камень на пер. плане). Вот, собственно, и весь алгоритм. Конкретные инструменты, которыми вы будете пользоваться неважны, важен алгоритм:
- использование реальной фотографии
- подавление цветового шума
- усиление контраста, выделение освещенных мест поверх фотки
- добавление мелких деталей (брызг, отражений)