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

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

Хотя, рисовать понятие глубокое, как мне кажется. Но в целом, рисовать умеет каждый. Вопрос в том, кто как умеет. Кто-то лучше, кто-то хуже. Кто-то совсем никак. Так как я, занимаюсь разработкой игр, то могу смело сказать, что графика для игр прекрасна тем, что она может быть совсем простой. Особенно это касается казуальных игр. Но просто, не должно значить примитивно. У простоты, должен быть вкус. Так вот, к чему все это? А к тому, что я сделал урок, который нацелен в основном на программистов. Хотя просто для новичков он тоже подойдет. В уроке, я не стану вдаваться в технические подробности. Надеюсь что вы знакомы с основными функциями графических программ. А я буду рисовать в среде 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) Вот и все. Хотя нет, есть интересный момент. Если выделить группу с зелеными кругами и затем пропорционально увеличить, то получится забавная амеба


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