Как сделать прелоадер в фотошопе
Решил написать этот урок у себя в блоге и продублировать тут в связи с частыми просьбами друзей нарисовать юзербар на форум. Надеюсь урок окажется полезным хабросообществу.
В этом уроке мы рассмотрим приемы создания анимациии в фотошопе на примере юзербара.
Итак, приступим!
Сразу скажу, что урок ориентирован на новичков. Гуру фотошопа могут постоять, покурить и посмотреть мельком (а вдруг пропустили чего интересного =))
Часть 1. Создание юзербара
Для начала необходимо создать заготовку для создания анимации.
Шаг 1. Создание документа
Создаем новый документ. Я взял размеры 350х20.
Шаг 2. Градиент.
Берем Gradient Tool (G) и заливаем градиентом наш будущий юзербар.
Результат:
Шаг 3. Текстура
Далее я решил добавить нашему юзербару текстуру.
Рисуем текстуру карбона
Для этого нарисуем текстуру карбона которую мы сможем использовать в дальнейшем.
Создаем новый документ размером 8х8 пикселей и закрашиваем его следующим образом. Можно брать произвольные оттенки серого. Главное здесь — порядок.
Далее идем в Bleding Options слоя с юзербаром.
Результат:
Шаг 4. Текст.
Осталось добавить текст. Для этого нам понадобится шрифт Visitor.
Берем Visitor TT1 BRK устанавливаем размер в 10 пунктов. Я написал “Adobe Photoshop CS4 User”.
Шаг 5. Рамка.
Добавим рамку. Для этого выделим весь юзербар с помощью Rectangular Marquee Tool. Заходим в Edit -> Stroke и ставим там:
Результат:
Часть 2. Анимация юзербара в фотошопе
Шаг 1. Добавление иконки к анимации.
Теперь добавим иконку и перейдем к анимации.
Я добавил классическую иконку четвертого фотошопа и провел масштабирование.
Шаг 2. Разбираемся с палитрой анимации.
Заставим ее двигаться.
Для это настроим сначала наше рабочее место выбрав Window > Workspace > Video или просто включив палитру Animation.
Перейдем в режим покадровой анимации.
Разберемся с палитрой анимации.
Шаг 3. Анимируем юзербар.
Что дальше? Теперь я выделяю слой с иконкой и двигаю ее немного вверх, после этого создаю новый кадр (смотри шаг 2). И повторяю пока не прокрутится вся иконка. Это основной принцип создания анимации в фотошопе.
При ошибках вы можете удалить не понравившийся кадр кнопкой удаления (корзина).
Также выставим нужную задержку. Я поставил 0,1 секунду на все кадры кроме последнего. У него стоит задержка 2 секунды.
Шаг 4. Сохранение в Gif – анимацию.
Когда анимация готова мы должны сохранить ее. Выбираем File > Save for Web & Devices… (Alt+Shift+Ctrl+S). Выбираем формат файла GIF.
Заключение
Итак, мы создали стильный юзербар. Затем на основе него мы создали gif – анимацию. И все это средствами великого и могучего фотошопа. Не правда ли круто?
Очень часто во время работы со всяческими приложениями, виджетами и прочими плюшками необходимо дождаться загрузки этого приложения, либо подождать пока обработается информация и т.п. Для таких моментов в приложениях необходимо делать прелоадеры, дающие пользователю понять, что приложение работает и нужно немного подождать. Программную часть описать будет тяжело, так как в каждом языке программирования, в каждой технологии это будет по-своему, поэтому сегодня пойдет речь только о создании его визуальной стороны.
Сегодня мы будем создавать анимированный gif прелоадер, который можно использовать во всяческих видждетах, во время ожидания загрузки ajax данных или во время загрузки файла, в общем, везде, где вы захотите его видеть.
Вот главные три части с которыми мы будем работать:
- Рисование прелоадера;
- Cтилизация прелоадера;
- И его анимация;
Часть 1: Рисование прелоадера
Для создания нам понадобится Photoshop CS3 либо старше.
Начнем с создания нового листа и указания его фонового цвета:
Сейчас мы для красоты создадим паттерн для фона и займемся самим прелоадером.
Итак, создадим еще один документ 7px на 7px и нарисуем на нем диагональную линию с верхнего левого угла в правый нижний.
Определим это изображение как паттерн (Edit menu > Define Pattern)
Возвращаемся к основному документу и создаем для единственного слоя стиль “Pattern Overlay”: (Layer menu > Layer Style > Pattern Overlay). Выбираем наше созданное изображение и снижаем прозрачность где-то до 20%.
Далее мы нарисуем направляющие для нашего прелоадера.
Для этого выбираем инструмент Line белого цвета шириной в 1px, рисуем вертикальную линию приблизительно по центру фона.
Чтобы выровнять ее точно по центру выбираем инструмент Move выделяем оба слоя и в на верхней панели нажимаем кнопку Align horizontal centers.
Поворачиваем линию на 45° градусов (Select Edit menu > Transform > “Transform Again”)
Повторяем данную операцию, пока не получим вот такой результат:
Используя вышеописанную технику мы сделаем отметки на каждой нарисованной линии.
Добавим несколько направляющих там, где будет наша первая отметка. Убедитесь, что направляющие находятся точно на пикселях, а не на их разделении (оригинал: make sure your guides are on whole pixels, don’t split pixels).
Рисуем по направляющим прямоугольник со скругленными углами в 1px.
Используя инструмент Direct Selection смещаем нижние углы внутрь прямоугольника, чтобы получить форму перевернутой трапеции.
Используя ‘Transform Again’ мы продублируем и повернем нашу нарисованную отметку (Так же как мы делали с направляющими. Перед поворотом убедитесь, что, точка поворота находится на пересечении нарисованных направляющих, а не в центре отметки. Чтобы изменить ее положение во время трансформации зажимаем Alt кликаем в центр пересечения линий).
После всех операций получаем подобную картину:
Удаляем лишние слои и приводим их к вот такому виду:
Часть 2: Стилизация
Итак, мы закончили рисовать прелоадер и теперь пора придать ему приличный вид.
Добавляем эффекты для слоя с маркерами
После добавления всех эффектов прелоадер должен выглядеть примерно так:
Создаем еще четыре копии слоя с маркерами и удаляем с них лишние маркеры. В общем, добиваемся эффекта, как на картинке ниже (так же переименуйте слои как на изображении):
Выбираем слой Shine-Active и добавляем ему эффекты как на изображениях ниже
Drop Shadow оставляем без изменений
Убираем Inner Shadow
Для слоя Shine-Fading1 делаем то же самое, только не добавляем Outer Glow.
Слою Shine-Fading2 изменяем Inner Shadow
На этом рисование и стилизация завершены. Если вы все делали правильно, то получится у вас что-то похожее.
Часть 3: Анимация
Уф… Большая часть работы проделана, осталась самая малость.
Группируем получившиеся слои (выделяем их + Layer menu > Group Layers)
Теперь дублируем группу и поворачиваем ее на 45° градусов, затем дублируем новую группу и снова поворачиваем на 45° градусов. И так до тех пор, пока у нас не получится 8 групп.
А на листе мы получим что-то подобное.
Далее мы открываем окно анимации (Window > Animation, чтобы переключиться в «покадродвый» режим нажимаем кнопку внизу слева).
Должно получиться вот так:
В конце выбираем File > Save for Web & Devices и устанавливаем настройки для сохранения нашего .jpg
Очень часто во время работы со всяческими приложениями, виджетами и прочими плюшками необходимо дождаться загрузки этого приложения, либо подождать пока обработается информация и т.п. Для таких моментов в приложениях необходимо делать прелоадеры, дающие пользователю понять, что приложение работает и нужно немного подождать. Программную часть описать будет тяжело, так как в каждом языке программирования, в каждой технологии это будет по-своему, поэтому сегодня пойдет речь только о создании его визуальной стороны.
Сегодня мы будем создавать анимированный gif прелоадер, который можно использовать во всяческих видждетах, во время ожидания загрузки ajax данных или во время загрузки файла, в общем, везде, где вы захотите его видеть.
Вот главные три части с которыми мы будем работать:
- Рисование прелоадера;
- Cтилизация прелоадера;
- И его анимация;
Часть 1: Рисование прелоадера
Для создания нам понадобится Photoshop CS3 либо старше.
Начнем с создания нового листа и указания его фонового цвета:
Сейчас мы для красоты создадим паттерн для фона и займемся самим прелоадером.
Итак, создадим еще один документ 7px на 7px и нарисуем на нем диагональную линию с верхнего левого угла в правый нижний.
Определим это изображение как паттерн (Edit menu > Define Pattern)
Возвращаемся к основному документу и создаем для единственного слоя стиль “Pattern Overlay”: (Layer menu > Layer Style > Pattern Overlay). Выбираем наше созданное изображение и снижаем прозрачность где-то до 20%.
Далее мы нарисуем направляющие для нашего прелоадера.
Для этого выбираем инструмент Line белого цвета шириной в 1px, рисуем вертикальную линию приблизительно по центру фона.
Чтобы выровнять ее точно по центру выбираем инструмент Move выделяем оба слоя и в на верхней панели нажимаем кнопку Align horizontal centers.
Поворачиваем линию на 45° градусов (Select Edit menu > Transform > “Transform Again”)
Повторяем данную операцию, пока не получим вот такой результат:
Используя вышеописанную технику мы сделаем отметки на каждой нарисованной линии.
Добавим несколько направляющих там, где будет наша первая отметка. Убедитесь, что направляющие находятся точно на пикселях, а не на их разделении (оригинал: make sure your guides are on whole pixels, don’t split pixels).
Рисуем по направляющим прямоугольник со скругленными углами в 1px.
Используя инструмент Direct Selection смещаем нижние углы внутрь прямоугольника, чтобы получить форму перевернутой трапеции.
Используя ‘Transform Again’ мы продублируем и повернем нашу нарисованную отметку (Так же как мы делали с направляющими. Перед поворотом убедитесь, что, точка поворота находится на пересечении нарисованных направляющих, а не в центре отметки. Чтобы изменить ее положение во время трансформации зажимаем Alt кликаем в центр пересечения линий).
После всех операций получаем подобную картину:
Удаляем лишние слои и приводим их к вот такому виду:
Часть 2: Стилизация
Итак, мы закончили рисовать прелоадер и теперь пора придать ему приличный вид.
Добавляем эффекты для слоя с маркерами
После добавления всех эффектов прелоадер должен выглядеть примерно так:
Создаем еще четыре копии слоя с маркерами и удаляем с них лишние маркеры. В общем, добиваемся эффекта, как на картинке ниже (так же переименуйте слои как на изображении):
Выбираем слой Shine-Active и добавляем ему эффекты как на изображениях ниже
Drop Shadow оставляем без изменений
Убираем Inner Shadow
Для слоя Shine-Fading1 делаем то же самое, только не добавляем Outer Glow.
Слою Shine-Fading2 изменяем Inner Shadow
На этом рисование и стилизация завершены. Если вы все делали правильно, то получится у вас что-то похожее.
Часть 3: Анимация
Уф… Большая часть работы проделана, осталась самая малость.
Группируем получившиеся слои (выделяем их + Layer menu > Group Layers)
Теперь дублируем группу и поворачиваем ее на 45° градусов, затем дублируем новую группу и снова поворачиваем на 45° градусов. И так до тех пор, пока у нас не получится 8 групп.
А на листе мы получим что-то подобное.
Далее мы открываем окно анимации (Window > Animation, чтобы переключиться в «покадродвый» режим нажимаем кнопку внизу слева).
Должно получиться вот так:
В конце выбираем File > Save for Web & Devices и устанавливаем настройки для сохранения нашего .jpg
Из этого урока вы узнаете, как создать стильный gif прелоадер в фотошопе. Для справки: Прелоадер - отображает процесс загрузки приложений, сайтов и тп. Например, прелоадер можно поставить пока грузится сайт или его отдельная часть.
Шаг 1: Подготавливаем прелоадер
Создайте новый документ желаемых размеров, для урока я использовал 750х300 px
Возьмите инструмент произвольная фигура, на верхней панели откройте палитру "Произвольная фигура" и выберете фигуру "Круглая рамка". Если такой нет, ее можно добавить щелкнув по значку шестеренки -> Фигуры
Затем выбирете темно-серый цвет, зажмите Shift и начертите овальную область по центру документа
Шаг 2: Создаем стиль анимации
Анимацию будем создавать с помощью стиля слоя и шкалы времени. Для начала зайдите в стиль слоя, кликнув два раза по слою с фигурой и перейдите в пункт " Наложения градиента ". Далее создайте новый градиент, следую скриншотам ниже
Затем перейдите в пункт "Внутренние свечение" и установите такие настройки
Нажимаете ОКей. У вас должно получится как на скриншоте ниже
Шаг 3: Делаем анимацию
Теперь самая главная задача, нужно анимировать наш стиль. Для начала зайдите во вкладку
"Окно -> Шкала времени", что бы открыть панель создания анимации.
Пункты 1 и 2 думаю понятны (раскрываете "Фигура 1" и активируете стиль. Дальше самое интересное.
Под цифрой 3 я поставил стрелочку в право, то есть. При активации параметра "стиль" у вас появился желтый ромбик это наш стиль фигуры на момент активации.
Для анимации нам нужно передвинуть красную полоску в право примерно на расстоянии как показано выше.
Затем снова зайдите в стиль слоя фигуры и установите такие параметры
Теперь еще раз передвиньте красную полосу примерно на такое же расстояние, зайдите в стиль слоя и установите такие параметры
Затем обрежьте временную шкалу, подтянув за ползунок к последнему стилю, как показано на скриншоте
Что бы анимация повторялась, поставьте галочку у "Цикл воспроизведения"
Вот и все! Наш анимированный прелоадер полностью готов к использованию. Для просмотра анимации нажмите кнопочку "Выполнить ►".
Шаг 4: Сохраняем gif прелоадер
Зайдите " Файл -> Сохранить для Web " Выберете формат .jpg и жмите сохранить.
Поздравляю! Теперь вы можете пройти по адресу сохранения, и насладиться простым но стильным анимированным веб прелоадером. Вот такой результат получился у меня:
В заключение
В данном уроке вам был показан один из простых способов создания gif прелоадера в web стиле. Для использования его в верстке конечно размеры должны быть намного меньше. Если был непонятен какой либо шаг или момент, обязательно пишите в коментариях, а также нам будет очень интересно увидеть, что получилось у Вас. Не забывайте подписаться на новые уроки по фотошопу в форме ниже.
--> Добавить инструкцию Главная → Уроки по фотошоп → Уроки фотошопа на русском - Photoshop tutorials free →
Всем привет! Сегодня я покажу как можно очень просто и быстро конвертировать большое количество фотографий из Raw формата в Jpeg. Более подробно о пакетной конвертации и автоматизации работы, мы рассмотрим внутри. А также рассмотрим плюсы и минусы ручной и автоматической конвертации.
Всем привет. Сегодня первый урок из категории Анимация, в котором я покажу вам как сделать анимационный прелоадер в Фотошопе. Прелоадер - отображает процесс загрузки приложений, сайтов и тп. Например, прелоадер можно поставить пока грузится сайт.
Привет всем фотошоперам, сегодня покажем Вам как вставить отсутствующий зуб в фотошопе. Это очень просто и займет минимум одну минуту у более опытных, и максимум четыре - пять минут у новичков. Показывать будем на детской фотографии с девочкой у которой выпал зубик.
Привет, всем и в первой шкатулке я хочу показать Вам несколько просто удивительных фотоманипуляций из портфолио Йоханссона. Хочется отметить, что Erik Johansson - профессиональный фотограф из Швеции. Постарайтесь уделить минуту своего внимания, что бы посмотреть эти прекрасные работы.
Урок банален как два пальца, но не все новички умеют делать, этот простой и полезный трюк. Сегодня я покажу дорогие, начинающие пользователи как создать зеркальный текст в фотошоп всего за 3 шага. Это делается очень быстро и просто. Следуйте за мной.
Сегодня мы научимся создавать прикольный портрет к верх ногами. С помощью слоев и инструмента прямолинейное лассо вы можете с легкостью сделать любое лицо к верх ногами. Если вы хотите применить эту веселую технику на своих друзьях, то читайте дальше. Мы покажем как просто делается этот трюк.
Читайте также: