Пост N: 317
Зарегистрирован: 19.11.07
Откуда: Russia, Moscow
Рейтинг:
2
Отправлено: 05.01.08 17:34. Заголовок: Этот урок показался ..
Этот урок показался мне интересным.можно всегда попробывать. + это легко Трехмерная вращающаяся кнопка
Шаг 1: Создайте новое изображение размером 200х200 пикселей и нарисуйте трехмерную кнопку. Как это делается я уже описывал. Если все таки возникли с этим проблемы, скачайте исходник. В этом шаге я опишу только некоторые детали необходимые для аккуратного выполнения урока. Создайте горизонтальную и вертикальную направляющие(View>New Guide...) с координатоми 100 пикселей. Желтый овал рисуйте по середине полученного перекрестия.
Шаг 2: Можно добавить блик используя эффект градиента. В этом, я думаю, Вы тоже разберетесь самостоятельно. Только расположите этот блик поверх всех остальных слоев. Знак «осторожно радиация» будет находится под ним.
Шаг 3: Приступаем к рисованию самого знака. Создайте папочку между папкой с кнопкой и бликом. Создайте новый прозрачный слой. Выберите инструмент Elliptical Marquee Tool(M). Подведите курсор к перекрестию направляющих, зажмите левую клавишу мыши и зажав клавиши Alt+Shift сместите курсор. Залейте выделенное черным цветом(Alt+BackSpace), уменьшайте выделенное на 1 пиксел(Select>Modify>Contract...), удалите выделенное(клавиша Delete). У Вас должна получиться окружность толщиной в 1 пиксел. Эта окружность вспомогательная и нужна будет для правильного поворота знака. Затем мы ее будем удалять.
Пост N: 318
Зарегистрирован: 19.11.07
Откуда: Russia, Moscow
Рейтинг:
2
Отправлено: 05.01.08 17:36. Заголовок: Шаг 4: На том же сло..
Шаг 4: На том же слое нарисуйте вот такую баранку(см. рисунок слева). Уверен, что с этим Вы справитесь. Замете, что Диаметр круга чуть меньше ширины овала.
Шаг 5:Ну а теперь еще один кружок по центру. Рисуем его все на том же слое.
Шаг 6:Создайте новую папку, в ней новый слой и нарисуйте кранный прямоугольник. Для этого выберите инструмент Rectangular Marquee Tool(M). Подведите курсор к перекрестию направляющих, зажмите левую клавишу мыши и зажав клавишу Alt сместите курсор. Снимите выделение(Ctrl+D).
Шаг 7:Два раза продублируйте слой и поверните один на 60, а другой на -60 градусов. Чтобы это сделать просто выделите нужный слой и примените сочетание клавиш Ctrl+T. На верхней панели в поле set rotation укажите нужный угол.
Шаг 8:Теперь выделите эти полоски(Ctrl+щелчок левой клавиши мыши по каждому из трех слоев). Сделайте невидимой папочку с полосками, выберите инструмент Eraser Tool(E) с режимом «карандаш» (mode=pencil) и диаметром около 20 пикселей. Теперь сотрите некоторые области чтобы у Вас получился рисунок как у меня(см. рисунок справа).
Шаг 9:В ручную сотрите три не нужных уголка. Знак готов!
Шаг 10:Создайте папку «1» внутри папочки со знаком. «1» потому что это будет первый кадр нашей анимации. Продублируйте слой со знаком перетащив его на кнопку в окне слоев. Оригинал делаем невидимым. н нам еще понадобится для других кадров, а дубликат уменьшаем по вертикали. Для этого сделайте активным нужный слой и нажмите Ctrl+T. Вверху в поле Set vericale scale введите 88%. С помощью инструмента овального выделения Elliptical Marquee Tool(M) удалите не нужный круг как показано на рисунке(хотя Вы можете это сделать вручную с помощью ластика Eraser Tool(E)). Перетащите в папку «1» и продублируйте полученный слой.
Шаг 11:Итак у нас два слоя в папке «1». К верхнему примените эффект: Blending Options: Fill Opacity: 0% Drop Shadow: Blend Mode: Normal Цвет: черный Opacity: 100% Angle: 90 Distance: 1 Size: 0 Inner Shadow: Blend Mode: Normal Цвет: черный Opacity: 100% Angle: -90 Distance: 1 Size: 0 Gradient Overlay: Blend Mode: Normal Opacity: 25% Gradient: от черного к белому Style: Linear Angle: 90
К нижнему: Stroke Size: 3 Position: Inside Blend Mode: Normal Opacity: 100% Fill Type: Gradient
Пост N: 320
Зарегистрирован: 19.11.07
Откуда: Russia, Moscow
Рейтинг:
2
Отправлено: 05.01.08 17:40. Заголовок: Шаг 12:Приступаем к ..
Шаг 12:Приступаем к анимации. Сделайте невидимой папку «1» чтобы она нам не мешала. Выберите слой с оригинальным знаком и продублируйте его. Оригинал опять делаем невидимым, а дубликат поворочиваем на 10 градусов. Для этого делаем активным нужный слой и нажимаем Ctrl+T. На верху в поле Set Rotation указываем 6 градусов. Нажмите Enter для окончания работы с трансформацией слоя. Теперь произведите те же операции с этим слоем что и в 10 и 11 шагах, только в этот раз создайте папку «2».
Шаг 13:Продолжайте в том же духе. А именно создавайте папки с нумерацией и поворачивайте знак на 20, 30, 40,…, 110 градусов. Если Вы делали все правильно, то у Вас должно получиться 12 папочек. Переходим в Image Ready(нажмите кнопку в окне инструментов). В окне Animation создайте 12 кадров. На каждом должны быть видимыми папка с кнопкой и блик. А знак для каждого кадра свой. То есть для первого кадра видима только папка «1», для второго – «2» и т.д. Ну вот и все. Чтобы анимация была плавне можно уменьшить угол поворота знака, но тогда увеличится число кадров и времени Вам придется потратить побольше.
3. Откройте Слой>>Новый корректирующий слой>>Выборочная коррекция цвета. Задайте параметры: Красный: -100/-6/-15/0 Желтый: 100/100/-100/0 Нейтральный: 26/-46/-40/0 И сразу сделайте на первом слое Фильтр>>Размытие>>Размытие по поверхности. Это на свой вкус.
Пост N: 322
Зарегистрирован: 19.11.07
Откуда: Russia, Moscow
Рейтинг:
2
Отправлено: 05.01.08 18:15. Заголовок: Надо и самой попробы..
Надо и самой попробывать=) Внимание! Урок очень большой!
Создаем мини-фильмы
Мы научимся помещать кусочки из фильмов в аватары, а также делать капсы и эффективно уменьшать вес аватара. Не бойтесь размеров урока: всё это не трудно и, сделав всё один раз, вы легко будете делать анимацию потом. Урок состоит из трех этапов: «вырезания» нужного куска, затем изготовления аватары в Photoshop, а потом уже создание анимации в Image Ready. Скрытый текст
Часть 1: Фрагмент фильма — кадры. Для начала, чтобы создать движущийся фрагмент, вам потребуется момент из фильма, разделенный на кадры.
Вся анимация в Image Ready основана на кадрах (будь то кусок фильма или любое другое изменение с аватаром). Поэтому, «вырезать» момент — означает разбить этот кусок на кадры, а потом сделать так, чтобы эти кадры по-порядку сменяли друг друга.
Кадры из фильмов обычно называют скрикапсами (screencaps) или просто капсами (caps). 1-1: Способы получения капсов.
Способ 1: Для ленивых.
Можете брать готовые раскапсовки в специальных сообществах, сайтах и дневниках. Это удобно тем, что вам самим не нужно будет резать капсы. Но, вместе с тем, вы не имеете возможности всегда найти нужный вам момент фильма, да и фильм тоже.
Можно сделать капсы самостоятельно, это даже легче, чем искать их в интернете. Достаточно взять любую программу, которой вы располагаете и на которой можно сделать капсы (см. ниже) или же купить себе диск с ней или установить её, скачав из интернета.
Открываем Photoshop (Image Ready в последнюю очередь — ещё рано). Создадим новый документ под аватар (100 на 100, как всегда). Фон его зальём белым, а на новом слое, посередине, поставим кисть
Теперь открываем все капсы в Фотошопе. File >> Open, выбирайте все сразу. Нажмите Ctrl+A (Выделить все), потом Ctrl+C (Копировать), а потом Ctrl+V (Вставить) в файле с будующей аватаркой.
Перетащили изображение на наш аватар, для удобства переименовали слой цифрой кадра: 135. (для этого кликните по названию слоя два раза (Layer №) и переименуйте его, как вам нужно) Так будет легче потом выстраивать их по порядку (и удалять похожие, лишние), перенесли его под слой с рамкой. Повторите со всеми капсами, по очереди. Лучше, если слои с кадрами будут идти в правильном порядке, сверху-вниз, то есть вверху будет 136, ниже 136, ещё ниже 137 и так далее. Не забывайте нумеровать каждый перетащенный капс. И растяните лучше меню по максимому, чтобы вам было удобней: так всё видно. Вот, что у нас получилось. (некоторые слои я делала невидимыми, чтобы посмотреть, правильно ли я расположила кадры):
Затем выделите все слои с капсами, нажмите Ctrl+T (Трансформация) поставьте замочек и уменьшите до нужного размера — автоматически уменьшатся все слои.
Шаг 3: Выравниваем кадры.
Для начала расположим все кадры ровно. Для этого используем grids т.е. решетки/сетки.
Я приблизила нашу аватару до 500%, чтобы нам было удобней. Теперь, кликнув по вертикальной линейке слева, и удерживая клавишу мыши, перетащите мышь до нашей аватары. Отпустите. То же самое сделайте с горизонтальной линейкой. Ну вот, вы создали линии.
Теперь мы себе отметим ориентиры, по которым мы будем выравнивать все капсы. Это линия носа (2) и край изображения (1).
Чтобы перейти на следущий кадр, просто спрячте верхний кадр (нажав на глаз этого слоя в меню со слоями) и кликните по следущему слою, выбрав его. Нижние слои тоже сначала лучше сделать невидимыми — чтобы не мешали, выглядывая из-под редактируемого слоя.
Например, как я выравнила несколько последующих кадров:
Линии сетки можете убрать, просто щелкнув на них и, держа мышью, отвести обратно в линейкам с краёв.Теперь мы уменьшим все изображения сразу: объедините все слои друг с другом, сщелкая по второму квадрату на каждом слое. (он обведен кружком).
Я опять вернулась к 100% размеру изображения. Нажмите вверху галочку на старом-добром Show Bounding Box и уменьшите изображение. (убедитесь, что у вас всё ещё выбран один из сцепленных друг с другом слоёв, они уменьшатся все вместе) Вот что у меня вышло:
Шаг 4: Детали.
Создадим новый слой, перенесем его наверх. Выделим Rectangular Marquee Tool квадрат, который мы сделаем рамкой вокруг нашей будущей анимации. Лишние части мы потом ображем
Теперь удаллим ненужные части изображений. Жмем Select >> Inverse (Shift+Ctrl+I). Мы выделили теперь, наоборот, всю часть вне квадрата. Теперь на каждом слое с изображением жмите Delete, не снимая выделения. Всё ещё не снимайте выделения. Мы подчистили наши кадры. Теперь снова нажмите Select >> Inverse, вернувшись к начальному выделению квадрата. Сделаем рамку: правая клавиша мыши >> Stroke. Я взяла цвет #A19E9E.
Кривовато, подвинули изображения, на каждом кадре применю один раз фильтр Sharpen, сделав рисунок почётче:
Не забудем про текст. Все нижние слои я, для удобства, спрятала. Выделим Type Tool'ом наш квадрат и напишем в нём шрифтом Corinthia: «Алиса и яд» Я взяла размер 30 pt., а расстояние между строчками 9 pt.; расстоние мужду буквами - 50.
Если он у вас пишет тарабарщину на русском, напишите сначала надпись стандартным шрифтом (Times New Roman, например), а потом уже, выделив слова, перейдите к нужному шрифту.
Мне не нравится, что буквы „А“ и „л“ сильно друг от друга отдалены. Увеличьте масштаб, чтобы было удобней и выбирите только их, сделайте между ними расстояние в -100. Если нечаянно захватили „л“ и „и’, то выделите их и снова поставьте расстояние в -50. Также я отодвинула (просто поставьте лишние пробелы) слово «яд» немного вправо, а расстояние между строчкой „и“ и „яд“ уменьшила, оставив при этом то же расстояние между „Алисой“ и союзом и. Союз „и“ я уменьшила до 18 pt.
Часть 3: Работаем в Image Ready.
Шаг 1: Делаем анимацию в Image Ready.
Теперь, прежде чем переходить к анимации, сначала сохраним проект: Save as. Имя я взяла alice, формат .psd. (на всякий случай, чтобы потом можно было изменить аватар, при какой-нибудь ошибке).
И ещё одно: сделаем все рамки и фон одним слоем. Сцепите вместе белый фон и две наши рамки, а затем нажмите Layer >> Merge Linked. (Ctrl+E) Можете перевести этот слой в самый низ. Не закрывая нашего аватара, жмем кнопку “Edit in Image Ready” в Фотошопе:
Если у вас нет длинной горизонтальной панели анимации, то нажмите Window >> Animation.
Предратим каждый слой в отдельный кадр. На уже упомянутой панели анимации нажмите срелку в правом верхнем углу и в открышемся меню выберите “Make Frames From Layers”
Теперь все слои, в том числе слой с рамками и фоном, стали у нас отдельными кадрами. Сделаем фон фоном всех изображений, а рамку положим поверх. Убедитесь, что в меню слёв у вас выбран именно слой с фоном и рамкой (иначе ничего не выйдет). Жмём Layer >> Match (Ctrl+M) и ставим такие параметры:
Теперь наш слой с рамками стал фоновым для всех изображений. Удаляем его, переся его на кнопку с мусорным баком (т.е. кликните по нему и ведите мышь, удерживая клавишу):
Кадры анимации у меня, как всегда, пошли не в ту сторону, не считая первого 8) Я меняю их порядок, перемещая их по меню (слева-направо) и проверяю, всё ли идет друг за другом, прощелкивая их по одномуs вперед (1) и назад (2).
Сначала у Алисы должны быть открыты глаза, потом она должна открывать рот шире и шире, затем лицо исказится гримассой, потом мы увидим только её волосы, голова опустится вверх, а затем поднимится с закрытыми глазами назад. Я также удалила похожий кадр с Алисой с открытыми глазами. Лишний кадр — лишний вес. Нажимая на 0 sec. левой кнопкой, устанавливаю секунды показа кадра: загляни сюда
Теперь сделаем плавный переход от кадра к тексту: выбираем 14 кадр и жмем на обведенную красным кнопку (Tween...), параметры оставляем:
Нажам Play, вы можете просмотреть анимацию и сделать необходимые изменения. В 14 кадре я решила поменять время и выбрала Other, где выставила 0,3 секунды. В первой тоже решила сделать 2 секунды, вместо одной.
Всё! Если вес аватара вас не волнует, то жмём File >> Save Optimized as. Сохраняняем в формате gif. Если волнует — прочтите шаг 2. Шаг 2: Уменьшаем вес.
Вес имеет значение. Например, diary.ru не позволяют ставить аватары весом более 20 Кб, поэтому для пользователей diary, вес — больая тема. Здесь я дам несколько советов по сокращению веса.
Во-первых, откройте последнюю закладку в поле, где отображается ваш аватар. Посмотрите на вес оптимизированной анимации. Во-вторых, откройте меню оптимизации (Window >> Optimize). В меню с аватаром выберите вариант с меньшим весом, а в меню с оптимизацией выберите Gif и более подходящий по весу (и качеству) вид gif'а. Dither — анимация с дрожанием; no dither — без дрожания.
Вышло: (33 Кб.) (26 Кб)
Конечно, такое нам никуда не годится. Пробуем изменить другие настройки:
Я снизила color (цвета) до 16 и Lossy (потеря информации) до 32. 19 Кб.
Все даты в формате GMT
3 час. Хитов сегодня: 1
Права: смайлы да, картинки да, шрифты да, голосования нет
аватары да, автозамена ссылок вкл, премодерация откл, правка нет