|
0 Всего найдено: 53
stre_kaza
Сообщение
14/07/2008 03:52
Копия темы
урок: пиксельарт. простая анимация шарика (имитация вращения) делать буду онлайн) и выкладывать тут результаты с объяснениями. для начала: я работаю в фотошопе и вам того же желаю, хотя есть много различного софта для работы с пикселем. но меня полностью устраивает Photoshop CS3, потому что анимационный пакет в него уже встроен и не нужно прыгать между двумя прогами, как было в CS2. дальнейшее описание под катом я закончила =) вот мои шарики крутятся вэлкам за вопросами и своими идеями))) для энтузиастов: урок не тырим, ага? 1. создаем документ примерно 500х500 72dpi (потом я обычно увеличиваю рабочую площадь через canvas size, так как делаю много дублей с различной нюансировкой и смотрю, что лучше) 2. выбираем инструмент карандаш (дважды shift+B), назначаем прозрачность 100% и размер – 1 пиксель. все настройки кисти нужно снять. 3. сразу же настраиваем ластик. выбираем его, а затем на верхней панели в выпадающем списке выбираем pencil. все настройки с кисти снимаем, размер 1 пиксель, все показатели на 100% 4. еще потребуется немного покрутить настройки на инструментах выделения, например, снять галку с anti-alias для лассо, волшебной палочки и эллиптического выделения ура) мы готовы рисовать =)
stre_kaza
Сообщение
14/07/2008 03:56
Копия темы
выбираем эллиптическое выделение и, зажав шифт, выделяем желаемую область. не стоит делать слишком крупный кружочек (для урока хватит и 20-30 пикселей в диаметре. кстати это можно назначить в настройках инструмента выделения) затем берем карандашик и обводим по внутреннему контуру выделение. НЕ НУЖНО ДЕЛАТЬ "ЛЕСЕНКИ" – это очень уродует линию. пиксели, при переходе в следующий ряд, должны соприкасаться уголками, а не сторонами. зы: я тут специально увеличила рисунок, чтобы было видно, как идет линия ЗЗЫ: это не пять кружочков в одном слое) это пять слоев) это важно.
stre_kaza
Сообщение
14/07/2008 03:59
Копия темы
заливаем выбранным цветом область внутри кружочка. затем берем другой цвет (не обязтельно делать как я – серым) и рисуем полоски на будущем мячике, учитывая форму шара. рисуем пока два положения: когда строго по центру полоса одного цвета, и строго по центру полоса другого цвета
stre_kaza
Сообщение
14/07/2008 04:06
Копия темы
теперь откроем либо окно animation frames (в CS3), либо загрузим Image Ready (в CS2) и там тоже откроем animation frames и документ с кружочками
stre_kaza
Сообщение
14/07/2008 04:07
Копия темы
теперь наложим эти два слоя один на другой чтобы ничего нигде не торчало))) то есть ровно один над другим (сорри путаюсь уже в словах)
stre_kaza
Сообщение
14/07/2008 04:12
Копия темы
в animation frames жмем на стрелочку рядом с цифрами ( 1 ) обозначающими длительность будущего кадра и выбираем 0,1 секунды после жмем на кнопку с изображением квадратика ( 2 ), призванную создать новый кадр
stre_kaza
Сообщение
14/07/2008 04:15
Копия темы
возвращаемся к первому кадру и с смотрим на наши слои. в кадре 1 будет виден слой 1, в кадре 2 – слой 2. соотвественно в первом кадре мы отключаем второй слой, а во втором первый.
stre_kaza
Сообщение
14/07/2008 04:17
Копия темы
так же под первым кадром есть выпадающий список, в котором можно выбрать, сколько раз будет проигрываться анимация, при просмотре. я всегда ставлю Forever (остановить всегда можно кнопкой "стоп") а при сохранении в веб, чаще всего требуется именно постоянное проигрывание анимации
stre_kaza
Сообщение
14/07/2008 04:19
Копия темы
после всех этих манимуляций жмем кнопочку плей (это, я думаю, найдут все ^__^ ) и смотрим как играется анимация. даже невооруженным глазом видно, что все плохо =) зы: тут я поставила не 0,1сек, а 0,2сек (от 0,1 при таком малом количестве кадров глаза в кучу)
stre_kaza
Сообщение
14/07/2008 04:24
Копия темы
теперь для того, чтобы наша анимация стала более плавной и красивой, нужно добавить промежуточных кадров. для этого возвращаемся в фотошоп (ну или, например, Gas13 рисует сразу в Имейжд Реди – кому как удобнее), придумываем эти кадры и рисуем их. в случае с мячиком – ничего сложного нет: я рисую один промежуточный кадр, когда средняя полоска слегка сместилась вправо. дублирую слой и отражаю его – получился кадр, когда средняя полоска появляется слева =) все гениальное просто
stre_kaza
Сообщение
14/07/2008 04:29
Копия темы
смотрим в какой последовательности пойдут кадры (я всегда располагаю в линеечку, заодно сверяю по направляющим все важные моменты типа глаз, рук, ушей и прочего, чего нет на нашем мячике))))) в этой же последовательности располагаем и именуем слои (этого можно не делать, но при большом количестве кадров и сложных комбинаций кадров будет дикая путанница)
stre_kaza
Сообщение
14/07/2008 04:32
Копия темы
переходим к анимации и совершаем описанные ранее манипуляции, только теперь с четырьмя кадрами. жмем на кнопочку "плей" и видим вот такую картинку:
stre_kaza
Сообщение
14/07/2008 04:33
Копия темы
крутица, да? =) на самом деле, чем плавнее и реалистичнее вы хотите сделать анимацию, тем больше кадров придется отрисовать. не всегда это требуется и не всегда разумно тратить кучу времени и сил на это) мы обойдемся четырьмя кадрами
stre_kaza
Сообщение
14/07/2008 04:35
Копия темы
но шарик еще совсем не шарик))) поэтому я снова останавливаю анимацию, очищаю animation frame (чтобы дальнейшей работе не мешали скачующие кадры) и расставляю слои опять же в линеечку ну или ряд (как вам удобнее гвоорить =))
stre_kaza
Сообщение
14/07/2008 04:38
Копия темы
ишь ты =) обратил внимание))) потому что я поленилась и не стала подгонять перемещение полосок, по идее, при четном количестве кадров, крайние левая и правая полоски должны быть одинаковыми по ширине, а они разные) плюс тайминг – 0,2 при 0,1 выглядит более гладко, хотя скачок все равно заметен
stre_kaza
Сообщение
14/07/2008 04:48
Копия темы
оу) щас еще одна мысля блеснула) проверю ее и вернусь) оке?
stre_kaza
Сообщение
14/07/2008 04:53
Копия темы
короче смотри!!! нашла косяк свой) ведь думала еще об этом) делаем не 4, а 6 кадров, промежуточные дублируем инвертируем окраску и располагаем так, как на картинке и вот что получается) тайминг 0.1
stre_kaza
Сообщение
14/07/2008 04:53
Копия темы
кружочки, расположенные парами – просто для того, чтобы было понятно, что я дублировала и инвертировала, ага?
stre_kaza
Сообщение
14/07/2008 04:54
Копия темы
ой-ой-ой. я сразу вообще-то сказала, что не заморачивалась на точность, ты зря пиксели считал ^__^
stre_kaza
Сообщение
14/07/2008 05:13
Копия темы
как сделала объем рассказывать не буду ^__^ присмотритесь сами все видно) сразу скажу – прозрачностями не пользовалась, это кагбэ признак ламерства что ли =)
stre_kaza
Сообщение
14/07/2008 05:14
Копия темы
уже сделала) только не надо придираться к полосатости) большое количество цветов в пикселе крайне редко бывает оправдано и, как правило, убивает прелесть пиксельарта, БЛЁРЯ картинку. удаче =)
Himikadze
Сообщение
14/07/2008 05:52
Копия темы
Пораньше бы (на 2,5 месяца), а то методом тыка изучал анимацию =) А я нашел таки достаточно легкий способ объединения нескольких десятков гифок в одну =)))
stre_kaza
Сообщение
14/07/2008 06:01
Копия темы
уроки – прекрасная возможность поделиться свои новыми знаниями ;)
pankixoi2113
Сообщение
14/07/2008 06:02
Копия темы
Вот думаю специально для ТАКИХ уроков можно создать и раздел "Уроки"... было бы оч интересно... мне как нубу в фотошопе стало аж интересно... вечером буду юзать
Himikadze
Сообщение
14/07/2008 06:06
Копия темы
талантом доходчиво объяснять меня природа обделила =( но все равно, как набью руку, выложу пару обретенных хитростей
Irina_Gureeva
Сообщение
14/07/2008 09:02
Копия темы
:) понравилось, буду пробовать не с шариками, а с чем-то живым:) спасибо за урок
DAdes1gn
Сообщение
14/07/2008 13:27
Копия темы
рельеф поверх с нулевой заливкой , сейв фор веб и уменьшаем количество цветов до 4-5 ?
stre_kaza
Сообщение
14/07/2008 16:27
Копия темы
ээээ нет... все рисуется. в пиксельарте все рисуется =) потом расскажу про шейдинг, значит
DAdes1gn
Сообщение
14/07/2008 17:59
Копия темы
0
Сори, просто не так прочел предложение – думал делалось именно быстрым ламерским способом -) |
|
Выразить восторг, поругаться или предложить что-нибудь можно на форуме |
Для обсуждения этого сервиса так же есть темы на фрилансе по поиску , флудотопу ,и по удалённым сообщениям ,и по Актуальным/популярным темам , и по топу "кто кому больше наотвечал" |