Новогодняя анимированная открытка

Доброго времени Вам, дорогие читатели. Сегодня я Вам предлагаю прочитать инструкцию по созданию анимированной открытки к Новому году в Photoshop. Эта статья из раздела дизайна и она участвует в конкурсе Сосновского «Новогодние картинки 2012»

Итак, что мы получим в итоге:

ROOKEE — удобный сервис продвижения сайтов — это один из полуавтоматических сервисов, о котором я упоминал в предыдущей статье.
Хороший контент это Kings Of Content — никогда не помешает уникальный контент.

Что нам понадобится:

  1. Компьютер и Photoshop CS4 (или другая версия, но название инструментов могут отличаться)
  2. Новогоднее настроение
  3. 70 мин. Времени

План действий:

  1. Рисуем фон
  2. Рисуем снег
  3. Звезды на небе
  4. Елка
  5. Игрушки
  6. Домики
  7. Человечек (можно поставить Деда Мороза или кого вздумается)
  8. Снег, заметающий весь экран (как в Google почти, если написать let it snow (https://www.google.com/search?q=let+it+snow)
  9. Поздравительный текст
  10. Ваш копирайт (страна должна знать своих героев)

Поехали! Открыли фотошоп и нажимаем Файл – Создать, и, в открывшемся окошке ,указываем 800 пикс — высота и 800 пикс – ширина и нажимаем ОК.

  1. Фон рисуем темно-синим цветом с помощью инструмента «Прямоугольник» (горячая клавиша U) – в левой панели. Сначала выберите инструмент  «Прямоугольник», а уже потом в верхнем меню нажмите по квадратику с цветом (он у вас может быть любой) и выберите темно-синий цвет, указав его мышкой на палитре. Теперь рисуйте темно-синие небо в верхней части картинки. Смотрим, как сделано на картинке внизу.

Новогодняя анимацияРис. 1

  1. Теперь рисуем снег. Берем тот же инструмент «Прямоугольник»  и рисуем прямоугольник под синим, а потом вверху выбираем белый цвет и он перекрасится в белый. Сделайте так, чтобы нижний прямоугольник где-то на 1 см заступал на верхний. Сохраняемся на всякий случай!Далее нам понадобится инструмент «Стрелка» (А), не путаем с самой верхней стрелкой! Кликаем этим инструментом по границе белого прямоугольника, в результате в его вершинах появились узлы. Теперь кликаем по верхнему ребру белого прямоугольника Правой Кнопкой Мыши (далее ПКМ) и выбираем «добавить опорную точку». У нас появился еще один узел, а по бокам от него управляющие элементики – квадратики. Если подвигать эти управляющий элементы вверх вниз, то ребро искривится, так мы добьемся холмов на снегу. Можно еще добавить несколько опорных точек и, играя управляющими элементами, добиться симпатичного рисунка.

Новогодняя анимация 2Рис. 2

 

  1. Рисуем звезды. Предлагаю Вам нажать в верхнем меню Окно – Слои. Этот элемент управления в Photoshop один из основных. В этом окне слои нажать кнопку создать слой. И если слой у Вас создался не в самом верху, то перетащите мышкой его вверх в окне слои. На этом слое мы будем рисовать звезды. Для этого предлагаю Вам скачать кисти Star Brushes , а потом распаковать и установить их. Для этого в фотошопе нажимаете инструмент «Кисть» и в верхнем меню рядом с фразой Кисть нажимаете на маленький черный треугольник, а в выпадающем окне – треугольник в кружочке справа и там уже выбираете пункт «Загрузить кисти» и указываете путь к скачанным кистям. Далее выбираете звездочку, которая Вам больше нравится, ползунком указываете размер где-то около 80 пикс и указываем белый цвет – это внизу под всеми инструментами слева. Далее вы можете варьировать видами звездочек и их размерами. Вот что у меня вышло:

Новогодняя анимация 3Рис. 3

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

Вот, какая форма у нас выходит:

Новогодняя анимация 4Рис. 4

На рисунке видно, что елка покрыта иголками. Этот достигнуто с помощью «галереи фильтров» в меню «Фильтр». Сначала выставляем цвета слева: верхний — зеленый, нижний — черный – это цвета елки и иголок. Потом в окне слои ПКМ по слою елки и нажать «растрировать слой». Далее в фильтр — галерея фильтров – тушь (длина штриха 13, тоновый баланс 62, направления штрихов по диагонали вправо или влево).

  1. Рисуем игрушки и гирлянды.  Для этого ПКМ кликаем по инструменту «Прямоугольник» и выбираем инструмент «Эллипс». С зажатой клавишей шифт рисуем круглые игрушки – нарисовали окрасили в нужный цвет. А гирлянда рисуется по принципу елки из прямоугольника с помощью узлов.

Далее добавляем объем нашим игрушкам. ПКМ по слою с любой игрушкой – параметры наложение – внутренняя тень (зеленая, непрозрачность 48%, угол 120, смещение 4, стягивание 16, размер 4, контур первый в нижнем ряду), далее галочка еще и на тисненее (стиль: внутренний скос, метод: плавное, глубина 368, размер 40, смягчение 6, режим подсветки: экран, режим тени: разница (цвет темно зеленый)).

Вот, что должно получиться, если скопировать стиль слоя на остальные шарики с помощью ПКМ в окне слои «скопировать стиль слоя » — «вклеить стиль слоя»

Новогодняя анимация 5Рис. 5

  1. Рисуем домики. Берем опять наш инструмент «Прямоугольник» и инструментом «Стрелка» и гнем узлы, добиваясь искривленной формы, как на рисунке 6. Учтите, что рисуется отдельно 2 стены и крыша. Каждому этом элементы задается свой цвет, чтобы одна стена была яркая, вторая -  в тени, а крыша – в снегу. Для крыши я дела параметры наложения слоя. К тем параметрам, что были на елочных игрушках, я добавил: внешнее свечение и обводка (цвет черная, размер 1 пикс).

Новогодняя анимация 6Рис. 6

Потом предлагаю сделать окошки. Тем же инструментом «Прямоугольник» и инструментом «Стрелка». Скопировать одно окошко в несколько рядов. Копированием или созданием делаем еще домики.

  1. Далее предлагаю Вам использовать своего личного героя или Деда Мороза. Вставьте его слева от елки.
  2. Далее создаем три слоя. На каждом из них рисуем снежинки, так чтобы на первом их было чуть-чуть, на втором много, а третий слой закрашивал весь экран в белый. Кисти снежинок можно поискать в сети или напишите мне я вышлю вам файл, он около 170 мб
  3. С помощью инструмента «Горизонтальный текст» пишем свое новогоднее поздравление. Шрифт выбираем сверху побольше. Под поздравлением укажите адрес своего сайта.
  4. А теперь самое интересное – делаем анимацию. Принцип такой: мы будем создавать кадры и для каждого кадра включать нужные нам слои. Начнем!

Перво-наперво посмотрите, чтобы у Вас стояла основная рабочая среда — это выставляется в правом верхнем углу. Далее нажимаем вверху Окно – анимация. Ищем в самом низу, в выскочившем окне для анимации, кнопочку «Преобразовать в покадровую анимацию». Далее выбираете первый кадр и настраиваете время отображения 1 или 2 сек, а также фразу Однократно меняем на навсегда. Идете в окно слои справа и отключаете все, кроме неба и поля. В следующем кадре включаете звезды, в следующем елку, игрушки и т.д. .. и так пока все не включите. Далее можно протестировать результат, нажав кнопку «Запуск воспроизведения анимации».

Готовую анимацию сохраните в файл GIF – это обязательно, именно он поддерживает анимированные картинки!

Новогодняя анимация 7Рис. 7

Думаю, вопросы будут, поэтому спрашивайте, я Вам обязательно помогу!

С наступающим, дорогие друзья! Всем здоровья!


Комментарии:

3 комментария: Новогодняя анимированная открытка

  • Mr.idea говорит:

    Класс, мастерски справились! Я не любитель фотошопа, но ради того чтобы попробовать нарисовать такое же произведение решился поковыряться) Такого же произведения не вышло:) Но я больше уважаю GIMP, там как то проще, я себя там чувствую более уверенно) да и вообще я больше 3D графику люблю) так как работаю с 3Ds max:)

    • Yocarlos говорит:

      работал и я с гимпом, но у меня с ним как раз туго! а фотошоп родной) тоже люблю 3д

  • Артемон говорит:

    а как фотошоп установить?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

طراحی سایتطراحی وب سایتسئوسئو سایتبهینه سازی سایتوکیل دادگستریوکیل پایه یکوکیل پایه یک دادگستریدوره mba