1. Теперь за форумную активность начисляются биткоины и другие криптоденьги. Подробнее.
    Скрыть объявление
  2. Появилась архивная версия форума arhiv.xaker.name, где собраны темы с 2007 по 2012 год.
    Скрыть объявление

Рисуем и Анимируем Батарейку. Урок от VecktorZona

Тема в разделе "Графика", создана пользователем VecktorZona, 17 ноя 2008.

  1. VecktorZona
    VecktorZona Продвинутый
    Симпатии:
    185
    Рисуем и Анимируем Батарейку

    Приветствую вас дорогие Друзья!!!! В этом уроке мы научимся рисовать и анимировать батарейку в стиле Web 2.0!!!!:) Урок думаю очень простой, и эффект получается отличный!!! Надеюсь, что вам понравится!!!!

    Этап 1: Рисуем.

    Итак приступим рисовать нашу батарейку, для этого открываем фотошоп, и создаем новый документ «Файл -> Новый» или горячи клавиши «Ctrl+N» (далее будут указываться горячи клавиши в скобках), и задаем параметры как на рисунке:

    [​IMG]
    Рис 1.​

    И жмем «Да» или «Ok». Далее выбираем инструмент «Прямоугольная область» (M) ([​IMG]) на панели инструментов, далее задаем параметры на панели настройки инструмента, как показано на рисунке:

    [​IMG]
    Рис 3.

    Затем сбрасываем цвета переднего и заднего плана (D), выбираем инструмент заливка (G) и заливаем фон нашего изображения, потом меняем цвет переднего плана на белый (ffffff) ([​IMG]), теперь создаем новый слой (Shift+Ctrl+N) или в окне «слои» жмем на кнопку «Создать новый слой»

    [​IMG]
    Рис 5

    Далее жмем на гор.клавишу «M» и щелкаем в рабочей области нашего документа (убедитесь что выбран новый созданный слой) появляется и у нас в рабочей области фиксированное выделение, затем жмем гор.клавишу «G» и заливаем выделенную область и снимаем выделение с помощью «Ctrl+ D» или «Выделение -> Отменить выделение». Теперь создаем новою направляющую «Просмотр -> новая направляющая» и задаем ей параметры как на рисунке:

    [​IMG]
    Рис 6.

    Дальше выбираем инструмент «Перемещение» (V), и перемешаем наш слой так чтобы он оказался по середине направляющей.Теперь создаем новый слой (ранее было описано как это сделать) выбираем инструмент «Прямоугольная область» (M), затем на панели инструментов задаем высоту в 10 пикселей

    [​IMG]
    Рис 7

    Щелкаем в рабочей области нашего документа (убедитесь что выбран новый созданный слой) появляется и у нас в рабочей области фиксированное выделение, затем жмем гор.клавишу «G» и заливаем выделенную область и снимаем выделение с помощью «Ctrl+ D» или «Выделение -> Отменить выделение». Дальше выбираем инструмент «Перемещение» (V), и перемешаем наш второй слой так, чтобы он оказался по середине направляющей и был ниже слоя первого с не большим просветом примерно в 2 пикселя. Затем повторяем дважды выше описанную операцию, но для третьего слоя задаем параметры как на рисунке:

    [​IMG]
    Рис 8.

    А для четвертого следующие параметры:

    [​IMG]
    Рис 9.

    Только 4-й слой ставим так чтобы, не было просвета между 3-м слоем ,и стоял по середине направляющей. Далее создаем новый слой (ранее было описано как это сделать) выбираем инструмент «Прямоугольная область» (M), затем на панели инструментов задаем следующие параметры:

    [​IMG]
    Рис 10.

    Далее жмем на гор.клавишу «M» и щелкаем в рабочей области нашего документа (убедитесь что выбран новый созданный слой) появляется и у нас в рабочей области фиксированное выделение, затем жмем гор.клавишу «G»
    меняем цвет на черный ( #000000) и заливаем выделенную область и снимаем выделение с помощью «Ctrl+ D» или «Выделение -> Отменить выделение». Дальше выбираем инструмент «Перемещение» (V), и перемешаем наш 5-й слой так чтобы он был по середине направляющей, и по середине 1-го слоя (середина нашей батарейки). Все шаблон готов у нас должно получится так:

    [​IMG]
    Рис 11.

    [​IMG]
    Рис 12.

    Этап 2:Эффекты

    Итак у нас есть шаблон батарейки, теперь будем добавлять эффекты, значит выбираем первый наш слой, и кликнем два раза левой кнопкой мыши по нем или жмем в окне «Слои» кнопочку «добавить стиль слоя» ([​IMG]) у нас появляется окно «Стиль слоя», А далее по рисункам:

    [​IMG]
    Рис 14.
     
    17 ноя 2008
    2 пользователям это понравилось.
  2. VecktorZona
    VecktorZona Продвинутый
    Симпатии:
    185
    [​IMG]
    Рис 15.

    [​IMG]
    Рис 16.

    Что бы создать такой градиент, надо щелкнуть два раза во вкладке «Наложение градиента» параметр «Градиент» и указать параметры как на рисунке:

    [​IMG]
    Рис 17.

    Далее жмем по первому слою правой кнопкой мыши и вы выбираем параметр «Скопировать стиль слоя»

    [​IMG]
    Рис 18.

    затем выбираем 2-й слой, кликнем правой кнопкой мыши, и выбираем параметр «Вклеить стиль слоя». Точна такую же операцию проделываем со слоями: 3 и 4.Затем выбираем 4-й слой, и удерживаем левую кнопку мыши, и перетаскиваем его под 3-й слой.Теперь создаем новый слой (смотрим чтобы у нас был выбран 5-й слой, и новый слой был по верх него, то есть 6-й ), удерживаем «Ctrl» и кликнем левой кнопкой мыши по 5-му слою, у нас появилось выделение пятого слоя, далее выбираем инструмент «Прямоугольная область» (M) и удерживая клавишу «Alt» обрезаем выделенное по направляющей ( в настройках можно убрать «Фиксированный размер»), затем жмем гор.клавишу «G» меняем цвет на белый (#ffffff) и заливаем нашу выделенную область (смотрим чтобы у нас был выбран 6-й слой) и во вкладке «Слои» в параметре «Непрозрачность» восстанавливаем положение бегунка в 30% (или вписываем значение в поле).

    [​IMG]
    Рис 19.

    И применяем к этому слою 5 стиль как на рисунке 16 (как это можно было сделать описано выше).

    Этап 3: Анимация

    Ну теперь Анимируем (с чем то созвучно это слово?:) ), Надеюсь что не надоела моя подробная роспись каждого шага!!!!:) Для анимации конечно же нам чего то не хватает? Вы не догадываетесь? Конечно же делений!!! Итак нам надо их нарисовать, выбираем инструмент «Прямоугольная область» (M) и задаем параметры:

    [​IMG]
    Рис 20.

    Выбираем слой номер 5 в окне «Слои» и там же жмем кнопочку «Создать новую группу».

    [​IMG]
    Рис 21.

    Появилась папка, теперь создаем новый слой (Shift+Ctrl+N) или в окне «слои» жмем на кнопку «Создать новый слой», и у нас получается что слой 7 лежит в папке, и он уже выбран, далее жмем в рабочей области, появляется выделение, потом жмем гор.клавишу «G» ( убедитесь что выбран белый цвет за основной) и заливаем нашу выделенную область, теперь выбираем инструмент «Перемещение» (V) (Не забываем снять выделение с помощью «Ctrl+ D»), и перемешаем наш 7-й слой так чтобы он был по середине направляющей, и по середине 5-го слоя (сердцевина нашей батарейки!:) ). Теперь самое опасное дело …Это «Копи-Паст»!!!:). Жмем быстренько «Ctrl + J» (смотрим чтобы был выбран 7-й слой в папке) и перемешаем его с помощью мыши или кнопки «вверх», и делаем так, чтобы было у нас было одинаковое расстояние между делениями, получается вот так:

    [​IMG]
    Рис 22.

    [​IMG]
    Рис 23.

    Теперь применяем стиль к делениям, кликнем два раза по слою номер 7, у нас появится окно «Стиль слоя», переходим во кладку «Наложение градиента» и устанавливаем значения как на рисунке:
    [​IMG]
    Рис 24.Как создать градиент было описано выше, и не забываем нажимать на кнопку «Новый»

    [​IMG]
    Рис 25.
     
    Последнее редактирование: 17 ноя 2008
    17 ноя 2008
  3. VecktorZona
    VecktorZona Продвинутый
    Симпатии:
    185
    [​IMG]
    Рис 26

    Затем включаем Окно анимации («Окно -> Анимация»), мы видим там первый кадр, теперь отключаем видимость слоев с 7 по 7 (копия 4):

    [​IMG]
    Рис 27.

    [​IMG]
    Рис 28.

    Теперь жмем в окне кнопку «Дублируем выделенные кадры» ([​IMG]), у нас появляется там новый кадр, и мы во вкладке «Слои» включаем 7-й слой, и так потом опять создаем новый кадр и включаем 7-й слой(Копия 1) и т.д. пока у нас закончатся деления, затем выбираем первый слой зажимаем на клаве кнопку «Shift», и щелкаем по последнему кадру (все кадры у нас выделились) и устанавливаем время в 0,5 сек.

    [​IMG]
    Рис 30.

    Теперь идем в «Файл -> Сохранить для Web» и жмем кнопочку готова!!!! Все готова наша Анимация!!!!

    Результат (15 кб):[​IMG]
    Hidden Content:
    **Hidden Content: To see this hidden content your post count must be 1 or greater.**
    З.Ы: Данный урок написан не для подражания, а для показания как нарисовать батарейку!!! Экспериментируйте, методом проб и ошибок у вас ВСЁ получится!!!! И еще: На вкус и цвет Фломастеры Разные!!!

    З.Ы 2: При копировании данного материала ОБЕЗАТЕЛЬНО УКАЗЫВАТЬ ИСТОЧНИК И АВТОРА СТАТЬИ!!!

    З.Ы 3: Коменты Приветствуются!!!!

    (с) VecktorZona​
     
    17 ноя 2008
    1 человеку нравится это.
  4. Dr3ammy
    Dr3ammy Продвинутый
    Симпатии:
    113
    Урок СУПЕР:idea:
    Вот что у мну плучилось))
    [​IMG]
     
    17 ноя 2008
  5. de3zor
    de3zor }~~(0o)~~{ Новичок
    Симпатии:
    307
    Я бы посоветовал использовать на делениях стиль ВЕб 2.0,да и с подборкой цветов бы покрутился...
    Урок норм..но для начинающих....мутите...используйте в своих целях...совершенствуйтесь...а результаты выкладывайте....как д\буду в сети-попробую немного подкоректиовать урок))
     
    1 дек 2008
    2 пользователям это понравилось.
  6. amfetamin
    amfetamin Продвинутый
    Симпатии:
    25
    Не плохо.
    Но больше напоминает "полоску загрузки" если перевернуть.
     
    15 янв 2009
    1 человеку нравится это.
  7. SKIN-BRAIN
    SKIN-BRAIN Новичок
    Симпатии:
    2
    обожаю веб 2.0
    урок очень понравился =)

    только былоб лучше еслиб
    нижняя полосочка была красным потом когда добавлялись бы 2 средние все становилось бы желтым ну а когда она полностью заряженна был бы зеленый =)
    но это уже тем кто делать будет заморочка =)
     
    7 июл 2009

Поделиться этой страницей

Загрузка...