|
Уроки фотошопа. Суперкурс для новичков
|
|
| WitaLiy | Дата: Пт, 27.05.2011, 23:00 | Сообщение # 1 |
 Проводник
Ночные сталкеры
Сообщений: 2680
| Уроки фотошопа.
Суперкурс для новичков
(небольшие уроки работы в Фотошопе...)
По многочисленным просьбам попытаюсь научить делать анимацию в Фотошопе.
Дня начала нам нужно установить прогу (я пользуюсь русифицированной Photoshop CS5).
Удачи в освоении! Надеюсь понятно написано  Если возникнут вопросы - оставляйте их в теме, будем совместно решать. И когда есть комментарии (вопросы) то понятно - что есть и заинтересованные в продолжении уроков 
Кураторы темы: Malik & WitaLiy
Сообщение отредактировал WitaLiy - Чт, 21.11.2013, 12:44 |
| |
|
| Эти 0 пользователя(ей) поблагодарили WitaLiy за это полезное сообщение: |
|
|
| Vladislav111 | Дата: Ср, 22.06.2011, 10:14 | Сообщение # 106 |
|
Удаленные
| Ого, все оказалось сложнее... Надо учиться. 
|
| |
|
| Эти 0 пользователя(ей) поблагодарили Vladislav111 за это полезное сообщение: |
|
|
| M@ster | Дата: Ср, 22.06.2011, 17:54 | Сообщение # 107 |
 Ботан
Пользователи
Сообщений: 662
| Ура! Я всё-таки разобрался с проблемами на компе и с первичным диском.
Вот урок №2.
[cut noguest=ололо]
[/cut]Добавлено (22.06.2011, 17:54)
---------------------------------------------
Ой, немножко с размером перебрал)
|
| |
|
| Эти 0 пользователя(ей) поблагодарили M@ster за это полезное сообщение: |
|
|
| WitaLiy | Дата: Ср, 22.06.2011, 20:22 | Сообщение # 108 |
|
Проводник
Ночные сталкеры
Сообщений: 2680
| Quote (M@ster) немножко с размером перебрал
да размерчик великоват особенно для анимации... грузит долго Добавлено (22.06.2011, 20:22)
---------------------------------------------
Quote (Vladislav111) Надо учиться
было бы желание научишься
|
| |
|
| Эти 0 пользователя(ей) поблагодарили WitaLiy за это полезное сообщение: |
|
|
| M@ster | Дата: Чт, 23.06.2011, 14:45 | Сообщение # 109 |
|
Ботан
Пользователи
Сообщений: 662
| Вот, уменшил.
[cut noguest=картинка]
[/cut]
Ну как?
|
| |
|
| Эти 0 пользователя(ей) поблагодарили M@ster за это полезное сообщение: |
|
|
| WitaLiy | Дата: Чт, 23.06.2011, 15:06 | Сообщение # 110 |
|
Проводник
Ночные сталкеры
Сообщений: 2680
|
теперь намного легче грузится... молодец! учись дальше
|
| |
|
| Эти 0 пользователя(ей) поблагодарили WitaLiy за это полезное сообщение: |
|
|
| Vladislav111 | Дата: Пт, 24.06.2011, 13:48 | Сообщение # 111 |
|
Удаленные
| Свой гиг сделал, использую три программы. Вначале обработал качество, цветовую гамму, резкость, тон, создал коллаж и рамку с помощью своей любимой Picasa 3, размеры с помощью FastStone Image Viewer , а буквы побежали с программы от Виталия.
|
| |
|
| Эти 0 пользователя(ей) поблагодарили Vladislav111 за это полезное сообщение: |
|
|
| WitaLiy | Дата: Пн, 27.06.2011, 19:49 | Сообщение # 112 |
|
Проводник
Ночные сталкеры
Сообщений: 2680
| Кому то еще интересны мои уроки?
Вот сделал еще два урока
[cut noguest=Урок №11: Течение времени.. анимация плывущих облаков ]
Урок посвящён несложной, но довольно реалистичной анимации, которая по мнению автора символизирует течение времени.
Ну что, приступим?  Поехали 
1. Начнём с того, что откроем выбранное изображение неба (можно вырезать из любого понравившегося изображения).
2. Применяем «Свободное трансформирование» и растягиваем изображение в обе стороны на примерную ширину картинки. Потом сдвигаем изображение до конца вправо (1) и жмем «Применить» (2)
3. Отключаем на время слой с облаками и вставляем новым слоем изображение часов . Берем «ластик» (3) и удаляем лишний фон, что бы остались только часы.
4. Теперь берем инструмент «Быстрое выделение» (4) и выделяем стрелки часов, копируем их на новый слой (5)
5. Кистью (6) или штампиком (7) закрашиваем вырезанный участок на циферблате.
6. Меняем режим смешивания слоя с часами на «линейный затемнитель» (8) По желанию можно немного уменьшить прозрачность (9)
7. Переходим на слой со стрелкой. Дублируем его. Используем «свободное трансформирование»… передвигаем точку-центр вращения трансформируемой области в центр стрелки (10) и поворачиваем стрелку на 60° (11). Жмем «Применить»
8. Повторяем операцию из п.7 еще четыре раза… до получения такого результата
9. У нас получилось 6 слоев со стрелками, значит нам нужно 6 кадров анимации. Приступим:
10. Включаем на первом кадре облака, циферблат и первый слой со стрелкой (12).
11. Делаем дубль кадра (13), слой облаков немного сдвигаем (14) влево и включаем видимость второго слоя со стрелкой (15)
12. Повторяем пункт 11 еще 4 раза, на каждом новом кадре сдвигая слой с облаками и включая новый слой со стрелкой.
13. Выставляем время на всех кадрах 0,2 сек. Проверяем. Сохраняем. В итоге должно получиться такое:
[/cut]
[cut noguest=Урок №12: Песчаный текст]
1. Создаём документ любого размера. Как фон используем любую текстуру.
2. Выбираем шрифт, цвет (так как у нас песочный текст – берем ближе к нему). Пишем любой текст, например, «Пески времени». Находясь в слое с текстом, переходим Слой->Эффекты слоя->Настройки смешивания (1) и выставляем следующие настройки:
3. Должно в итоге получиться что-то вроде этого
4. Возвращаемся в Настройки смешивания:
5. Красной линией подчёркнут Основной слой. С ним мы и будём сейчас работать. (Чёрный треугольник слева при перемещении направо затеняет текст. Белый треугольник при перемещении влево осветляет текст). Мы будем перемещать чёрный треугольник вправо.
Но для начала решите, сколько кадров вы хотите использовать. Мы будем использовать 10 кадров. Потому для получения нужного эффекта будем перемещать чёрный треугольник вправо на 25-26 (255 поделенное на 10 = 25,5).
6. Дублируем слой с текстом. В Настройках смешивания передвигаем чёрный треугольник вправо. Скрываем слой. Дублируем его ещё раз и проделываем тоже самое, но треугольник перемещаем чуть дальше вправо. Скрываем слой. И так продолжаем, пока не получим нужное количество слоёв.
7. Решите, что вы хотите, чтобы песок ПОКРЫВАЛ или ОТКРЫВАЛ текст. Вы можете использовать любой и вариантов. Использует первый вариант, т.е песок покрывает текст.
8. Переходим в окно анимации. Найдите кнопку нового кадра. Если вы хотите покрыть ваш текст песком, то первым
кадром ставьте текст ясный на 100%. Создайте новый кадр и скройте слой, где текст виден на 100% и сделайте видимым слой, где текст чуть менее ясный. И так до последнего кадра, пока ваш текст не исчезнет.
9. Выставляем время, проверяем, сохраняем. Должно получиться так:
10. Если повторить дальше в обратном порядке можно добиться появления и исчезания текста.
[/cut]
|
| |
|
| Эти 0 пользователя(ей) поблагодарили WitaLiy за это полезное сообщение: |
|
|
| коля71 | Дата: Вт, 28.06.2011, 12:28 | Сообщение # 113 |
|
Удаленные
| WitaLiy, с уроками 11 и 12 разобрался спасибо.
Некоторые новые моменты для себя запомнил.
Я рад, что они оказались полезными  WitaLiy
|
| |
|
| Эти 0 пользователя(ей) поблагодарили коля71 за это полезное сообщение: |
|
|
| WitaLiy | Дата: Пт, 01.07.2011, 18:08 | Сообщение # 114 |
|
Проводник
Ночные сталкеры
Сообщений: 2680
| [cut noguest=Урок №13: Еще одни плывущие облака…]
В данном уроке мы рассмотрим еще один вариант добавления облаков на изображение, только теперь изображение будет статическим…
1. Открываем изображение, куда будем добавлять облака.
2. Добавляем новый пустой слой (1), идем в «фильтр-рендеринг-облака» (3) и применяем его к нашему пустому слою (2)
3. Применив «свободное трансформирование» помещаем слой на небо, и растягиваем его в обе стороны по ширине… примерно на ширину изображения (4). В настройках изображения выставляем «жесткий свет» (5)
4. Становимся на первый кадр и сдвигаем слой с облаками, чтобы он начинался от левого края изображения. Делаем копию кадра (6) и на ней сдвигаем немного слой (7) влево. Повторяем операцию до тех пор, пока правый край не окажется на краю изображения (8)
5. Выставляем одинаковое время на всех кадрах, проверяем, сохраняем
Должно получиться так:
[/cut]
Добавлено (28.06.2011, 17:38)
---------------------------------------------
[cut noguest=Урок №14: Не знаю как назвать, пусть будет - собирающийся текст…]
1. Сознаем новый документ , пишем свой текст.
2. Теперь растрируйте слой и дублируйте его (20 раз, таким образом, Вы получите 21 слой)
3. Скрываем все слои, кроме первого и применяем к этому слою «Фильтр-Искажение-Волна», с такими настройками:
4. Скроем первый слой и сделаем видимым второй слой. Теперь на слое 2 применяем «Фильтр-Искажение-Волна». Мы будем только изменять «Число генераторов» устанавливающий для остальной части слоев, другие параметры настройки мы не меняем. Измените «Число генераторов» до (950) – будем менять с шагом 50
5. Повторяем эти действия с остальными слоями, только не забывайте уменьшать «Число генераторов» на 50 для каждого из слоев. Не забудьте выключать слои. Постарайтесь не запутаться.
6. Открываем окно анимации. Скрываем все слои кроме 1. Дублируем окно анимации, скрываем слой 1 и делаем видимым слой 2
7. Так же повторяем с остальными слоями.
8. В последнем окне анимации (21) выставляем время задержки 2 секунды
9. Проверяем, сохраняем, получаем:
[/cut]
Добавлено (01.07.2011, 18:08)
---------------------------------------------
[cut noguest=Урок №15: Делаем gif-анимацию из видео]
В этом уроке я расскажу как сделать gif-анимацию из видео. Урок достаточно простой.
1. Для начала определитесь с видео, из которого будем делать анимацию. Выбрали? Замечательно. Нам нужно, что бы ролик был в формате *.MOV. Воспользуемся программой Format Factory . Кстати в ней не обязательно перекодировать весь файл видео, можно взять только небольшой кусочек. Выставляем время начала и конца отрезка в «настройках» и перекодируем нужный фрагмент. Это займет считанные секунды. Но можно воспользоваться любым редактором, поддерживающим перекодировку в данный формат.
2. Теперь открываем Фотошоп (он очень хорошо работает с форматом *.mov, но не поддерживает больше никаких видео-форматов), и грузим наш файл, получившийся в п.1, использовав следующие настройки:
3. В итоге получаем много кадров и слоев
4. Удаляем лишние кадры, оставив только то, что нам нужно
5. Изменяем размер изображения на нужное. Я к примеру сделаю для авы…
6. Проверяем, сохраняем, получаем:
на этом и все с уроком, но я предлагаю пойти немного дальше и еще «поизгаляться»
7. Становимся на последний кадр и выделяем слой, видимый на этом кадре (слои я не
удалял) и добавляем выше слой фона. Выделяем все используемые слои (в нашем случае с 10 по 54) и применяем к ним «свободное трансформирование»
8. Сохраняем, получаем:
[/cut]
|
| |
|
| Эти 0 пользователя(ей) поблагодарили WitaLiy за это полезное сообщение: |
|
|
| Тигра | Дата: Вт, 05.07.2011, 07:47 | Сообщение # 115 |
|
Удаленные
| WitaLiy, преогромное спасибо за уроки! Что-то как будто даже начинает получаться. )))) По крайней мере, суть я, по-моему, уловила. ))
[cut noguest=Колобок]
[/cut]
[cut noguest=Наш Барри]
[/cut]
Сообщение отредактировал Тигра - Вт, 05.07.2011, 07:49 |
| |
|
| Эти 0 пользователя(ей) поблагодарили Тигра за это полезное сообщение: |
|
|
| WitaLiy | Дата: Вт, 05.07.2011, 12:09 | Сообщение # 116 |
|
Проводник
Ночные сталкеры
Сообщений: 2680
| Тигра, молодец!!!
|
| |
|
| Эти 0 пользователя(ей) поблагодарили WitaLiy за это полезное сообщение: |
|
|
| коля71 | Дата: Ср, 06.07.2011, 16:37 | Сообщение # 117 |
|
Удаленные
| Вырезал картинку по синему фону, способом уменьшения зделал анимацию.
И вот вопрос как можно избавится от белых ореалов по кругу.
[cut=картинка] [/cut]Добавлено (06.07.2011, 16:37)
---------------------------------------------
Слушай а вот из видео делать анимацию очень эфективно и легко. Огромное спасибо.
Сообщение отредактировал коля71 - Ср, 06.07.2011, 16:35 |
| |
|
| Эти 0 пользователя(ей) поблагодарили коля71 за это полезное сообщение: |
|
|
| WitaLiy | Дата: Ср, 06.07.2011, 23:58 | Сообщение # 118 |
|
Проводник
Ночные сталкеры
Сообщений: 2680
| Quote (коля71) как можно избавится от белых ореалов по кругу.
Проблема возникает из-за того, что gif не поддерживает полупрозрачности.
Поэтому если в том же photoshop подготовить нужное изображение, отделив его от какого-либо фона (как обычно вырезают какие-либо объекты), а потом сохранить в gif и указать в настройках gif`а поддержку прозрачности, часто образовывается белый ореол (если же края объекта изначально никак не будут сглажены и не будут иметь полупрозрачных областей, то ореола не будет), т.к. прозрачной остается только та область изображения, которая была на 100% прозрачна в самом фотошопе, у всех остальных полупрозрачных областей автоматически образуется белая подложка.
Один из вариантов, который применяют – это просто взять и сохранить нужное изображение со всем куском фона в виде подложки. Иногда это действительно единственный выход (к примеру, если вырезанный объект состоит из многих градаций цветов, и не допустимо, чтобы все эти цвета были ограничены рамками в 256 цветов). При таком решении есть два минуса, во-первых, размер файла увеличивается, так как вынужден содержать излишнюю информацию в виде фона, а во-вторых, есть большая вероятность того, что края этого изображения не будут стыковаться с фоном сайта.
Ну а если кратно - сделать слой фона
[cut noguest=второй вариант]
нашел еще одно решение проблемы в нете
[/cut]
|
| |
|
| Эти 0 пользователя(ей) поблагодарили WitaLiy за это полезное сообщение: |
|
|
| коля71 | Дата: Чт, 07.07.2011, 21:36 | Сообщение # 119 |
|
Удаленные
| WitaLiy, А откуда эта красная картинка или это какая то программа?
|
| |
|
| Эти 0 пользователя(ей) поблагодарили коля71 за это полезное сообщение: |
|
|
| WitaLiy | Дата: Пт, 08.07.2011, 00:11 | Сообщение # 120 |
|
Проводник
Ночные сталкеры
Сообщений: 2680
| Quote (коля71) А откуда эта красная картинка
картинка в инете найдена, лень было свой скрин с переводом делать
|
| |
|
| Эти 0 пользователя(ей) поблагодарили WitaLiy за это полезное сообщение: |
|
|
|
