Карандашный рисунок в фотошопе и его анимация. Урок фотошопа

Карандашный рисунок в фотошопе и его анимация. Урок фотошопаКарандашный рисунок в фотошопе и его анимация. Урок фотошопа

Сегодня мы будем учиться преобразовывать наш карандашный рисунок, сделанный в фотошопе в 1 части урока в нечто живое и сделаем его анимацию.
Повторяю, что я делала анимацию фото карандашного рисунка опубликованного в сообществе на Mail.ru «Фотошоп, уроки, тренинг, объяснения!». Первый автор этого урока Ольга Бор.

Процесс анимирования несколько длительный и требует внимания, и только поэтому я разделила один урок на 2 части, но поверьте, это стоит того, и когда вы увидите свой результат, вы не пожалеете о потерянном времени.



Ну что, я думаю, что можно начинать. Итак мы делаем анимацию карандашного рисунка

1. Ищите свой файл в формате PSD и открываете его в своем фотошопе.

Фото в карандашный рисунок. Урок фотошопа

2. Сначала будем создавать слои с частями рисунка, а потом с их помощью мы и выполним анимацию рисования. Для этого мы будем использовать инструмент «Архивная кисть» (есть и другие способы создания частей рисунка, например, инструментом Ластик). Архивная кисть должна запомнить ваши последние действия. Так как мы разделили этот урок на 2 части, и потом сохранили документ, ваша история будет отсутствовать. Поэтому попробуем ее создать искусственно. Для чего топаем в меню — изображение — коррекция — яркость/контрастность и сдвигаем ползунок яркости всего на единичку, от этого ваша картинка не изменится, а история будет сохранена для дальнейшей работы. А у тех героических личностей, кто решит проделать все действия первой части урока и второй одновременно, будет эта позиция.

2.1. Активируем архивную кисть в панели инструментов.

2.2. Определяем источник для вашей архивной кисти. Для этого в панели «история» жмём около (в нашем случае искусственно созданного) последнего действия.

Карандашный рисунок в фотошопе и его анимация. Урок фотошопа

Попробую объяснить для чего нужно определять источник для инструмента Архивная кисть? Инструмент запоминает изображение, которое было сохранено на этом действии (в нашем случае — яркость/контрастность) и потом она сможет воспроизвести (нарисовать) на любом другом слое. Посмотрим так ли умна наша кисточка.

3. Создаём новый слой и заливаем его белым цветом. Чтобы создать новый слой кликаем по маленькой иконке с отогнутым уголком в нижнем правом углу под вашими слоями. Надеюсь, что вы также знаете, как сделать заливку прозрачного фона. Повторюсь, что мы заливаем белым цветом, и с помощью этого слоя мы увидим работу нашей архивной кисти.

Карандашный рисунок в фотошопе и его анимация. Урок фотошопа

4.Отключим видимость слоя с белой заливкой, создадим новый слой и на нём проводим архивной кистью
(размер кисти регулируете по своему изображению, я  рисовала мягкой с жесткостью 20%)

Карандашный рисунок в фотошопе и его анимация. Урок фотошопа

5. Я начала рисовать с глаза. Вспомните, с чего мы начинали рисовать в детстве: глазки, носик и так далее. Открываем видимость белого слоя и видим, что наша кисть работает…

Карандашный рисунок в фотошопе и его анимация. Урок фотошопа

Ура, наша кисть работает… Продолжаем создавать части рисунка каждый раз на новом слое. Я на новом слое нарисовала другой глаз, потом на другом — нос, на следующем — рот, потом я смогла немного увеличить мои мазки, и делала это я уже с открытым белым слоем, только иногда отключая его видимость, чтобы вспомнить свою картинку и куда идти.  Знаете ли, мне нравилось, и я делала это с энтузиазмом.

6. Так вдоволь нарисовавшись, я получила  62 слоя с частями моей картинке. То есть подготовительные работы к анимации карандашного рисунка в фотошопе закончены.

Карандашный рисунок в фотошопе и его анимация. Урок фотошопа

7. Инструментом «рамка» обрезаем нашу картинку по вашему вкусу, например, по границам видимости рисунка.

Карандашный рисунок в фотошопе и его анимация. Урок фотошопа

Жмем на клавишу Enter для обрезки картинки.

Теперь у нас все готово для анимации.
8. Но сначала, чем приступать к ней можно сделать рамочку. вы можете ее сделать любым вам известным способом. Я покажу один из них: идем  в меню — изображение — размер холста и увеличиваем размеры вашей картинки по ширине и высоте на зо пк, просто исправляя их значения там, после чего жмем ОК. Обратите внимание какая размерность стоит в ваших окошках, если там см, то жмите на стрелочку и в выпавшем меню ищите пиксели.
Карандашный рисунок в фотошопе и его анимация. Урок фотошопа

После проведенный манипуляций получаем такую картинку

Карандашный рисунок в фотошопе и его анимация. Урок фотошопа

Инструментом «Прямоугольное выделение» обводим вашу основную картинку (слой 0) и инвертируем его, для чего идем в меню — выделение — инверсия, и возле вашей картинки образуется рамка из пунктирных линий.

Дальше создаем новый слой наступаем туда, подбираем цвет заливки вашей рамки при помощи пипетки, и инструментом заливка красим рамку в новом слое. Получаем такую картинку.

Карандашный рисунок в фотошопе и его анимация. Урок фотошопа

Теперь вы можете применить к своей рамочке любой стиль, который у вас имеется, или изменить параметры слоя рамки используя тень, внутреннее свечение, тиснение, обводку, прежде сняв выделение  в меню — выделение — снять выделение.

Или последовать моему примеру,  и проделать следующее:

я создала новый слой и не снимая выделения сделала внутреннюю обводку 2 пк тем же цветом, сменив режим с «обычного» на «умножение»

Карандашный рисунок в фотошопе и его анимация. Урок фотошопа

Теперь снимаем выделение (меню — выделение — снять выделение). Далее я применила к слою с обводкой стандартный фильтр фотошопа «Пунктирные линии». Для этого идем в правый верхний уголок окна со стилями, жмем на стрелочку и выпадающем окне находим Пунктирные линии. Как  на моей картинке.

Карандашный рисунок в фотошопе и его анимация. Урок фотошопа

Кликаете туда и у вас появляется окошко с вопросом: заменить имеющиеся стили на пунктирные? Жмете на кнопку добавить, и выбираете любую из пунктирного на ваш вкус. Я взяла третий по счету сверху.

Все. Объединяем все слои с рамкой и обводкой в один слой и перемещаем в самый вех панели слоев. Рамка готова. На этом этапе вы можете подписать свою картинку или поставить свой логотип о том, что анимация картинки сделана вами.

Карандашный рисунок в фотошопе и его анимация. Урок фотошопа

9. Анимация. Открываем панель анимации. Чтобы ее открыть топаем в меню — окно и ставим галочку около анимации. В панели слоев закрываем видимость всех слоев с рисованием. Простите за корявую фразу.

Карандашный рисунок в фотошопе и его анимация. Урок фотошопа

10. Создаем второй кадр и открываем видимость первого слоя с рисованием, в моем случае слой 2. Для создания второго кадра нажимаем на иконку в нижней панели слоев с кадрами. Посмотрите на верхний скрин. Иконка выделена красным квадратом.

Карандашный рисунок в фотошопе и его анимация. Урок фотошопа

Обратите внимание и запомните, что кадр 2 совпадает со слоем 2.  На 1 кадре устанавливаем время задержки 1 сек, на 2-ом -0,1 сек. Чтобы установить время задержки на иконке кадра жмем на стрелку и в выпавшем меню ищем подходящее время.

11. В дальнейшем ваша работа становится чисто механической. Добавляем кадр 3 — открываем слой 3, кадр4-слой 4 и так далее. Таким образом продвигаясь от одного кадра к другому, создаем всего 62 кадра анимации (это в моем случае), и на 62 кадре у нас открыты все слои и мы видим наше изображение полностью, здесь же на 62 кадре устанавливаем время задержки — 5 сек.

Карандашный рисунок в фотошопе и его анимация. Урок фотошопа

Вот и все, наша анимация готова, нажимаем на кнопочку просмотр в ленте кадров, думаю, что вы ее легко найдете, стрелка, как в магнитофоне. Просматриваете, и если все нравится, то сохраняем картинку в формате GIF.

Идете в меню — файл — сохранить как или меню — файл — сохранить для Web и устройств.

Надеюсь, что вы сможете преобразовать карандашный рисунок, выполненный в фотошопе и сделать его анимацию.

У меня получилась вот такая картинка.

Карандашный рисунок в фотошопе и его анимация. Урок фотошопа

Желаю вам приятного творчества и успехов в освоении фотошопа.

Понравилась статья? Поделись с друзьями!




Понравилась публикация !?
Хотите получать новые статьи в свой почтовый ящик ?
Нет ничего проще !

Booking.com

Форма поддержки блога может не отображаться в браузере Internet Explorer!
Хотите поддержать, откройте сайт в другом браузере... Спасибо!

Уроки фотошоп ,
Отзывов к Карандашный рисунок в фотошопе и его анимация. Урок фотошопа уже: 46...
  • Елена Картавцева

    Не знаю, смогу ли освоить такую премудрость, как карандашный рисунок, потому что с фотошопом на ВЫ, причем, с большой буквы. Можешь смеяться,Оля, но я для себя, изучив урок, сделала открытие, что можно обрезать фото прямо в фотошопе, а я ведь ни когда эффектом «рамка» не пользовалась! :laugh:

    Ответить
    • Ольга Коновалова

      Привет, Леночка! Было бы желание и время, а освоить можно все. В фотошопе функций обрезки фотографий несколько, Можно и «рамкой», я чаще пользуюсь «прямоугольным выделением», тем более, если картинка не моя и нужно изменить диагональ и так далее… Есть еще куча способов. Вот сайт доведу до ума, и будем учится. :-)

      Ответить
  • Елена

    Ух ты…. Здорово. Люблю ковыряться в фотошопе и творить. Попробую сотворить по вашему уроку. Уж очень понравилось. Долго… н стоит этого. Наши вам твит и плюс с лайком )))

    Ответить
    • Ольга Коновалова

      Я рада, если мой урок Вам пригодится

      Ответить
  • Ольга Черныш

    Трудно. Это был рисунок, а потом его нужно было разделить, чтобы он по очереди элементы показывал? не, мне не понятно. Сложно.
    Я вообще давно заметила,что я не могу разобраться.
    Я почему-то понимаю, когда наугад что-то делаю.

    Ответить
    • Ольга Коновалова

      Если Вы посмотрели первую часть урока и он Вам понятен, то здесь просто делаются слои именно частями и потом они открываются в анимации поочереди

      Ответить
  • Анна

    У меня стояла slideshow creator. А сейчас, после того, как сын установил мне новый Windows, я не могу ее установить.

    Ответить
    • Ольга Коновалова

      Значит, если он переустановил Windows, то и программы совсем нет, а значит и ее хвостов, тогда непонятно, почему не можешь установить.
      Пока разберемся с твоей прежней программой поищи у себя во всех программах Windows Movie Maker, это стандартная программа для всех Windows. Это тоже программа для создания видео. Она достаточно простая.

      Ответить
  • Анна

    Ясненько. Начну с того, что попроще. Я раньше пользовалась простой программкой, но сейчас она у меня не хочет устанавливаться на компе.

    Ответить
    • Ольга Коновалова

      Ты о какой говоришь? Может у меня есть? Или ее надо удалить с компа до конца, чтобы хвостов не осталось, тогда переустановится.

      Ответить
  • Анна

    Оля, у меня к тебе один вопрос. Видео-ролики ты делала. Из фотографий. Какой программой ты это делала? И удобна ли она для новичков?

    Ответить
    • Ольга Коновалова

      Аня, в основном для своих видео я использую Ulead VideoStudio 11, у меня она есть и могу тоже тебе выслать ее для установки. Естественно, что теперь она для меня стала любимой, но раньше трудности были, но на майл ру в альбоме у меня есть уроки, так что разобраться и помочь тебе смогу. После курсов установила Камтасию, как советовали наши учителя, но после переустановки винды я так ее и не переустановла, так она мне не особо приглянулась… А может просто не разобралась… Вообще я попробовала много программ, но отдала предпочтение Ulead VideoStudio 11.
      Но самая быстрая, это Picasa… Когда нет времени, то там очень просто все можно сделать…

      Ответить
  • Надежда

    Урок замечательный и очень оригинальная анимация. Спасибо.

    Ответить
    • Ольга Коновалова

      На радость! Удачного вам творчества!

      Ответить
  • Серге

    Замечательный урок,спасибо! А можно ли увидеть предыдущие уроки как то я всё пропустил.

    Ответить
    • Ольга Коновалова

      Здравствуйте, Сергей! Вообще-то у меня пока написано всего четыре урока, смотрите их в рубрике «Уроки фотошопа», там и 1-ая часть этого урока. А вообще в последствие открою новый сайт, где буду публиковать все, что связано с фоошопом

      Ответить
      • Серге

        С не терпением жду.Спасибо.

        Ответить
  • Мария

    Здравствуйте,Ольга!Я только начинаю обучаться фотошопу.По Вашему уроку сделала анимацию,может подскажете можно поставить анимацию как главное фото в Мой мир? И как это сделать?

    Ответить
    • Ольга Коновалова

      Маша, я ответила Вам на майл.ру в нашем Мире

      Ответить
  • Андрей

    Спасибо за подробный урок , обязательно попробую сделать анимированную картинку в Фотошопе.

    Ответить
    • Ольга Коновалова

      Попробуйте, это интересно

      Ответить
  • Александр

    С фотошопом знаком, но анимацию делать не разу не пробовал. Теперь обязательно попробую, вдохновили, спасибо, Ольга:)

    Ответить
    • Ольга Коновалова

      Обязательно надо попробовать. Это интересно. Спасибо, Александр

      Ответить
  • Светлана

    Замечательно!Надо попробовать.Вот что значить современные IT-технологии.
    Огромное спасибо за урок!

    Ответить
    • Ольга Коновалова

      Стоит попробовать, мне было интересно

      Ответить
  • Александр

    ОК! Вчерашнее творчество я уже сохранил в папке. Сделаю новое кино и попробую использовать это волшебное слово » Постоянно». И вот тогда , если опять не получится, а я верю что получится, буду обращаться за помощью. И даже скрин покажу:)
    Всего доброго Вам :)
    и с Первым Вас апреля :)

    Ответить
    • Ольга Коновалова

      И вас с 1 апреля, Саша! А давайте на ты? Судя по цифирке в Вашем адресе, вы только чуть-чуть меня моложе, да и душой-то мы молоды. да и общаться легче. Буду рада, если анимация у Вас получится…

      Ответить
  • Александр

    Ольга, Спасибо !
    Урок супер! Все получилось!
    Анимация работает в ФШ. Но сохранить в GIF не получается. хотя все сделал как Вы писали.
    Сохраняется просто неподвижная картинка
    В чем может быть проблема?
    Спасибо :)

    Ответить
    • Ольга Коновалова

      Здравствуйте, Александр, чтобы понять в чем проблема, я хотела бы посмотреть Ваш скрин, на этапе сохранения картинки, но, возможно, что все дело в том, что у вас анимация выполнена с функцией однократно, посмотрите на панели кадров анимации в левом нижнем углу какой цинк выбран у вас, нужно Постоянно. Присылайте скрин. Разберемся

      Ответить
  • Александр

    Замечательный урок!
    Просто супер!
    Завтра буду пробовать.
    Это же так интересно:)

    Ответить
  • Надежда Бабец

    А я в таких случаях привыкла ластиком работать…надо будет как-то и архивной кисточкой помазать…..пасибки тебе,Олечка!

    Ответить
    • Ольга Коновалова

      Попробуй, здорово получается… Я тебе в скайпе сообщение оставила, а ты не отвечаешь

      Ответить
  • Татьяна

    Оленька, спасибо за урок. грандиозная работа!!!

    Ответить
    • Ольга Коновалова

      Спасибо, Танечка! Я старалась

      Ответить
  • Svetli

    Срочно нужно найти время,чтобы сделать

    Ответить
    • Ольга Коновалова

      Попробуй, интересно

      Ответить
  • Людмила

    Большое спасибо за продолжение!А что будет дальше?

    Ответить
    • Ольга Коновалова

      А что бы Вы хотели?

      Ответить
  • Александр

    Ваша статья актуальна для большого количества людей. Спасибо за интересную информацию. Приходите в гости
    Прекрасный сайт, интересная и полезная статья. Желаю успехов.

    Ответить
    • Ольга Коновалова

      Спасибо, приятно, и я Вам желаю успехов, и уже иду

      Ответить
  • Вера

    Большое спасибо за такую ценную статью. Я не очень хорошо умею рисовать, но думаю, что с помощью ваших уроков научусь рисовать смешные карикатуры для своего сайта. Я на личном опыте убедилась, что оригинальные авторские картинки на своем сайте поднимают PR сайта. Я думаю ваша уроки помогут многим интернет-предпринимателям успешно продвигать свои сайты.

    Ответить
    • Ольга Коновалова

      Буду только рада, если Вы воспользуетесь моими уроками. Спасибо

      Ответить
  • Людмила

    Очень талантливо, может есть урок или плагин как сделать блики воды на карте на моем сайте, я знала но забыла.

    Ответить
    • Ольга Коновалова

      Написала Вам на Вашем сайте, там ссылка. Спасибо за комментарий

      Ответить
  • Никита

    Самостоятельно изучаю фотошоп, так что Ваша статья мне пригодилась! Спасибо!

    Ответить
    • Ольга Коновалова

      Ну и замечательно, значит пригодится

      Ответить

Ваш email не будет опубликован. Обязательные поля отмечены *
Имя *
Email *
Сайт
Ваш комментарий
:-) 
;-) 
:bye: 
:good: 
:negative: 
:scratch: 
:wacko: 
:yahoo: 
B-) 
:beach: 
:rose: 
:heart: 
:kiss: 
:yes: 
:whistle: 
больше...