Программисты тоже


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

Хотя, рисовать понятие глубокое, как мне кажется. Но в целом, рисовать умеет каждый. Вопрос в том, кто как умеет. Кто-то лучше, кто-то хуже. Кто-то совсем никак. Так как я, занимаюсь разработкой игр, то могу смело сказать, что графика для игр прекрасна тем, что она может быть совсем простой. Особенно это касается казуальных игр. Но просто, не должно значить примитивно. У простоты, должен быть вкус. Так вот, к чему все это? А к тому, что я сделал урок, который нацелен в основном на программистов. Хотя просто для новичков он тоже подойдет. В уроке, я не стану вдаваться в технические подробности. Надеюсь что вы знакомы с основными функциями графических программ. А я буду рисовать в среде Flash CS5.5, но думаю описанный урок, подойдет для большинства программ. Хочу сразу сказать, что я не претендую на звание самого талантливого художника. Это вообще, мой первый полный урок. Я просто надеюсь быть полезным. И если я кому-то им буду, то это будет здорово. И так, мы не будем использовать навороченный техники, вся графика будет основана на простейших фигурах. Все что нужно, это графический редактор, мышь, руки и терпение. Походу урока, я покажу как «оживить» обычный квадрат.

1) Первым делом нарисуем квадрат. У меня вышел квадрат размером 80x80 px. Цвет я использовал такой — #7AAC1E

2) Далее, выделяем наш квадрат и копируем его (Ctrl+C). Затем вставляем в то место, где копировали (Ctrl+Shift+V).

3) Не снимая выделения, нажимаем клавишу (Q). Теперь, мы может изменять масштаб нашего квадрата. Зажимаем (Shift+Alt) и немного уменьшаем наш квадрат.

4) Не снимая выделения, идем в палитру и изменяем тон на более светлый.

5) Далее, снимаем выделение. Для этого можно щелкнуть по пустому пространству, или нажать (Ctrl+Shift+A).

6) Создаем группу (Ctrl+G). Теперь внутри этой группы, нарисуем круг. Цвет должен совпадать с цветом первого квадрата. У меня он был — #7AAC1E. Нарисовав круг, сгруппируйте его (Ctrl+G).

7) Затем просто дублируйте круги (перетаскивайте курсором с зажатой клавишей (Alt)) и меняйте масштаб, как душе угодно. И выстраивайте примерно как на картинке ниже.

8) Далее, нам нужно нарисовать глаз. Рисуем белый круг с обводкой. Обводка, должна быть немного темнее чем основной цвет. Затем, выделяем белую область, копируем и вставляем на тоже место (Ctrl+Shift+V). Не снимая выделения, меняем масштаб на более мелкий (зажимаем (Shift+Alt) и меняем масштаб). Напоминаю, для масштабирования, должен быть включен инструмент «свободное преобразование», клавиша (Q).

9) Не снимая выделения, окрашиваем наш выделенный круг в черный цвет. Затем группируем (Ctrl+G).

10) Заходим в группу глаза. Для этого, просто два раза кликните мышкой. В этой группе, создайте круг белого цвета и сгруппируйте его.

11) Затем придайте глазу блеск. Для этого, продублируйте белые круги и поменяйте им масштаб.

12) Теперь, сгруппируйте весь глаз.

13) Продублируйте его и примените к нашему квадрату.

14) Квадрату можно добавить обводку. Для этого, выберите инструмент «чернильница», клавиша (S), и кликните по нашему квадрату. Цвет обводки, должен быть такой же, как и у обводки глаза.

15) Далее, добавим тень глазам. Сгруппируйте еще раз глаз. Скопируйте его. Зайдите в группу глаза и вставьте скопированное, на то же самое место.

16) Нажмите несколько раз (Ctrl+B). Теперь мы разбили объекты и они оказались позади глаза.

17) Затем, не снимая выделения (после того, как мы разбили объект, он автоматически выделен, но его не видно, он позади) идем в палитру и выбираем черный цвет с прозрачностью 20%.

18) На клавиатуре, нажимаем несколько раз клавишу «ВНИЗ». Если нажимать с зажатой клавишей (Shift), то объект будет спускаться быстрее, пропуская больше пикселей.

19) Вот так должно выглядеть.

20) На очереди брови. Создаем прямоугольник.

21) Хватаем курсором верхний-правый угол и тянем до упора. До нижнего угла. Первая бровь готова.

22) Дублируем получившуюся бровь. И таким же методом, как и с первой бровью нужно потянуть вниз. Только не с угла, а с середины.

23) Две брови готовы. Далее, рисуем рот. Для этого, выбираем инструмент «прямоугольник со скругленными краями». Его можно выбрать в панели инструментов или нажав клавишу ®. Как правило при нажатии клавиши ®, выбирается обычный квадрат. Просто нажмите еще раз ®.

24) Нарисуйте прямоугольник. Если вы выбрали правильный инструмент, то на прямоугольнике будет фиолетовая обводка с маленькими кругами. Выберите обычный курсор (V) и схватите точку в углу и потяните до конца. Края округлятся. Разбейте объект (Ctrl+B).

25) Далее, выбираем курсор (V) и по середине хватаем обводку и тянем вверх нижнюю, вниз верхнюю.

26) Теперь, округляем острые углы. Если хватаем нижние углы, то тянем вверх и наоборот соответственно. Пример ниже.

27) По этому же принципу, создаем разные эмоции.

28) Можно применить все вместе и посмотреть что получилось. Не забудьте сделать тень ртам.

29) Вот и все. Хотя нет, есть интересный момент. Если выделить группу с зелеными кругами и затем пропорционально увеличить, то получится забавная амеба


На этом все. Урок окончен. Как видите, нет ничего сложного. Все делается самыми простыми методами. А такой персонаж, хорошо подойдет для очередного физ. пазла.
Конечно, это не идеал рисования и выглядит не сильно впечатляюще, но это всего лишь база, которую нужно применять на практике. Вам не нужно обладать огромным навыком рисования, можно обходится простыми средствами и делать несложные, но приятные глазу вещи. Особенно, когда программист занят кодом и потом приходит время подумать о графике. И в этом случае, есть два варианта, рисовать самому или заказывать. Чаще всего выбирают второе. Хотя большинству хотелось бы нарисовать самому. И если действительно ваши навыки рисования не самые лучшие, то просто ищите самые просты пути, наподобие того, что я показал.
Надеюсь был полезен.
Спасибо за внимание!
  • +31

Комментарии (43)

0
оцени по 10 бальной шкале финальный результат
0
Провокационный вопрос. Автор будет прав, если проигнорирует.
0
ну я всегда оцениваю свой результат в конце. Как вообще смотрится и как для моего уровня.
0
Так все делают. Вопрос от этого не перестает быть провокационным ;)
+3
Главное, чтобы в игре отлично смотрелось! FlashGamm доказал, что всё сделано на 10!:)
+1
Это я про Ookicookie:)
0
Вот только какой программист хочет делать игру про ожившх гомерических фигур?
+5

0
Точняк XD
0
Я этого и ждал)))
0
Немного воображения + минимум вариаций — и у нас имеется неплохой персонаж-кустик, который, скажем, убегает от лесного пожара в каком-то платформере.
+1
Вот только подумайте. Многие просто от скуки начинают что то рисовать(Делать определённые наброски содержания головы), из этого извлекают персонажа и окружение, далее немного фантазии и геймплей есть(Можно придумать исходя из каких либо искажений рисунка или иногда сразу что — то придумывается при виде изображения), далее можно разнообрзить графику, потом немного доработок и идея игры готова на пустом месте…
+2
Суть была не в персонаже-квадрате. А в простоте создания. Хотел показать, что минимум средствами, можно сделать простое, но не сильно примитивное. Данный пример, можно применить к чему угодно. В будущем, я буду развивать эту тему и одними квадратами не ограничусь.
+2
Результат напомнил
:)
0
Ну, собственно, да:)
0
Отличный урок, мно понравилось. Взял некоторые вещи к себе на вооружение.
Думаю суть урока в том, что всё гениальное просто :)
0
Приятно радует, когда программисты преуспевают в графике.
+1
Проблем с рисованием формы персонажей и объектов у меня нет. А жуткие «каляки» получаются потому, что с разукрашиванием объектов вобще беда: чтобы подобрать цвета и оттенки для более-менее приемлевого результата, приходится затрачивать очень много нервов и времени.
0
О, вот-вот! DiscoFish, спасибо за урок, круто! Хотелось бы про подбор цветов прочитать продолжение.
+4
А я вот тоже пытался порисовать) хотел как здесь gamedevblogs.ru/blog/results/687.html
вышло так

не думаю, что ужасно — но наверно такой арт уже не покатит — поэтому забил
все из примитивов
+1
Персики в левом верхнем — отл.!
0
спасибо, мне они казались плоскими — а блики и тени не получилось нарисовать (
хотел еще нарисовать тельца для регдолов… но руки не дошли
+1
Персики? :)

0
Даже не вспомню откуда прицепилось называть так персонажей =) давно это было.
0
очень, много, запятых, трудно, читать. Спасибо.
+2
интересный урок — но мне кажется если у главного квадрата-лица тоже закруглить углы — будет лучше!
0
Спасибо за урок!
+1
Урок отличный, но у меня, вот, проблемы скорее с фантазией. Не очень представляю, что и как я хочу нарисовать.
+1
а ты просто начни рисовать то, что уже умеешь и отталкивайся от этого. Я периодически занимаюсь рисованием абы чего, в итоге приходят разные мысли и вытекают интересные идеи. Как бы действие стимулирует мышление, мозг тоже начинает вовлекаться в процесс и давать какие-то иди.
+1
Спасибо за урок!
Кстати, как точка зрения: для меня не так сложно рисовать, как подбирать цвета.
+1
… люди.

Не в обиду программистам, не сдержался. =)
+1
Спасибо за пост! Мне кажется, что основная проблема многих программистов — преодолеть свой страх перед рисованием. А сделать это может помочь бумага. На ней можно быстро чирякать все, что приходит в голову, не боясь ошибок, и понравившиеся моменты затем развить и перенести в компьютер.
  • ABCpt
  • ABCpt
+6
Спасибо за пост.

Вообще, нарисовать «что-нибудь» обычно не проблема.


Вот нарисовать много «чего-нибудь», чтобы оно сочеталось друг с другом и давало цельную картинку в сумме гораздо сложнее. А анимация — это следующая проблема. Я, впрочем, практически не пробовал анимировать, не знаю даже как подойти к этому…
+5
Как мне сказал один знакомый художник, графика в играх — это скорее дизайн, а не рисунок.
+1
Урок классный!
Действительно, из серии «всё-гениальное-просто»…

Давно хотелось что-то эдакое попробывать, но руки не доходили, потому что не знал с чего начать, а теперь знаю =)

Спасибо автору.
+2
А мне карандаш понравился. D:
  • z3lf
  • z3lf
0
Всем большое спасибо! Если хоть одному будет полезно, то уже хорошо.
В следующие разы попробую рассказать про методы простейшей анимации. Используя несложные методы, будем оживлять происходящее на экране.
Еще попробую рассказать про подбор цветов. Хотя, это уже сложнее.
+3
Да, да, спасибо! :)
Подбор цветов это было бы круто…
0
Спасибо за урок! Надеюсь будет продолжение.
+4
Неправильно имхо поставлен вопрос — программист такое нарисует. Увидеть такой образ в голове это реально проблема. Я например умею в полной мере пользоваться инструментами как фотошопа так и флеша и увидев ваш рисунок без проблем его повторю- но вот самому стиль, образ (((((
+1
А у меня наоборот) в голове появляется, что- то интересно, а повторить либо не получается, либо не оправдывает фантазии)
+1
Да, это многим знакомо, даже тем кто умеет рисовать. Я например очень долго учился рисовать взрывы, а потом ещё дольше делать их анимацию. Но терпение и труд все перетерли, десятки изрисованных листов с различными взрывами дали свои плоды. Та же история с различными архитектурными сооружениями. Так что надо пробовать, пытаться и тем самым набивать руку, чтобы она училась работать вместе с головой.
+8
Чтобы был свой стиль, надо сперва научиться прилично копировать чужие работы, дабы руку набить и свободно творить, не думая КАК технически это нарисовать. Имхо.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.