2 replies to this topic

[Doc]

Использование фоторошопа для создания меню в Adobe Encore

Для начала несколько условий:

1.Версия фотошопа 9 (CS2). Можно и 8, но некоторые кнопочки и их сочетания
могут либо вообще не работать, или работать несколько иначе.
2.Для файлов, имеющих расширение PSD в свойствах приложением должен быть фотошоп. Если это не так, то щелкние на любом файле с таким расширением правой кнопкой
мышки - свойства- приложение - изменить ... и выбираем фотошоп..
3. Что бы в телевизоре все цвета просматривались так же как на монитрое для работы с растровыми изображениями используйте в настройках Adobe Encore PAL safe color или NTSC safe color (обычно стоит по умолчанию).

Часть 1. Редактирование шаблонов Adobe Encore

1. Открываем Adobe Еncore. File-New Project-PAL. В окне проекта нажимаем
закладочку Menu. Далее Windows-Library (в общем ничего нового) в открышемся
окне выбираем менюшкус названием - Blue Grid Menu.psd - и пертаскиваем
его левой кнопкой мышки в окно проекта - получаем следующую
картинку (рис.1)
 EncorePS01.png   66.2K   254 Number of downloads
2. Далее Menu - Edit in Fotoshop. При этом, если все сделано правильно
файл с изображением меню открывается в фотошопе, если будут всплывать
окна с вопросами - смело жмем update ))). Для работы у вас должны
быть открыты следующие окна - (открываются через Windows) - Рис.2
 EncorePS02.png   73.74K   190 Number of downloads
3. Теперь смотрим на закладку Слои (Layers). Как мы видим, наше меню состоит
из 6 слоев, причем на последнем слое (фоне) стоит замочек, который не снимается.
С этого слоя и начнем. Щелкаем на нем правой кнопкой мышки - выбираем Duplicate Layer и
сохраняем его как - Background copy. Затем щелкаем правой кнопкой мышки
на таком же слое с замочком и delete layer... Рис.3
 EncorePS03.png   19.41K   157 Number of downloads
4. Замочек исчез и теперь мы можем применить к этому слою любой из фильтров фотошопа
(на самом деле их огромное множество), но мы будем использовать "шататные".
Например: заходим в Filter-Artistic-Watercolor, далее выбираем Distort-Glass. Выполняем
необходимые настройки и жмем ОК. рис.4
 EncorePS04.png   29.44K   133 Number of downloads
5.Теперь заходим в Filter-Render-Lighting Effects и меняем месторасположения источника света
Как видим, наше меню заметно преобразилось. (рис.5). Здесь количесвто плагинов (фильтров к фтошопу),
как и полет вашей фантазии не имеют границ. Экспериментировать можно бесконечно.....
 EncorePS05.png   140.47K   148 Number of downloads
6. Теперь давайте заменим надпись наверху, для этого левой кнопкой мышки переходим в другой слой под
названием titl (самый верхний) и жмем на треугольничек и дважды щелкаем левой кнопкой на буковке Т...
При этом выделяется надпись наверху меню и актиируется текстовый инструмент "Т". Меняем текст, затем
открываем окно Windows - Character и дальше можем менять цвет текста и шрифт и еще много чего..
(рис.6)
 EncorePS06.png   104.9K   133 Number of downloads
7. Затем щелкаем правой кнопкой на нашем слое открываем Blending Option выбираем Styles и дальше начинаются
настоящие извращения.... мого кнопок... много настроек... Можно даже сделать и добавить свой стиль ))
Рис.7.
 EncorePS07.png   81.41K   126 Number of downloads
Так что пока экспериментируйте... После этого не забудьте сохранить ваше
меню в фотошопе как PSD save as... только не как ...temp, и посмотрите
как оно выглядит в Adobe Encore. Не забываем также включать встроенный плейер (ctrl-alt-space)

Продолжение следует...

Edited by Azat, 11 Nov 2005 - 23:18.

[Doc]

Часть 2. Редактируем "казенные" надписи и кнопки.

8. Теперь точно также отредактируем надписи (кнопки). Обратите внимание, что слои с текстом вложены в папки. Для того что бы ее открыть, нужно щелкнуть левой кнопкой мышки на треугольничек (выделен красным кружочком), открыть вложенные слои, выделить слой с буквой Т, затем выбрать текстовый инструмент и изменить текст в меню. Так мы можем менять текст на всех кнопках меню. (рис.8)
 8.png   123.09K   123 Number of downloads

9. Теперь сохраняем меню в фотошопе (file - save as - …NB!!! Не как temp) и переходим в Adobe Encore. Убираем три кнопки-надписи и оставляем только «смотреть весь фильм». Для этого щелкаем на соответствующей надписи правой кнопкой и выбираем Clear. Затем открываем Windows – Library и добавляем две кнопки Angled Box Button.psd. У Вас должно получиться следующее (рис.9)
 9.png   101.38K   134 Number of downloads
10. Если теперь это меню посмотреть во встроенном плеере (Ctrl-Alt-Space) и подвигать мышкой с кнопки на кнопку, то вокруг них будет меняться цвет рамки, проверьте!!!. Если все в порядке, тогда открываем снова наше меню в фотошопе Menu- Edit in Photoshop… Теперь изменим цвет рамки в меню при наведении на нее мышкой или выделении на ПДУ стационарного проигрывателя. Для этого в слоях фотошопа находим папку с названием (+) angled box, открываем эту папку (нажимаем на треугольничек). Как мы видим кнопка состоит из трех слоев (причем два из них – это векторные макски, но об этом несколько позже, когда будем сами рисовать такие кнопки), щелкаем на слое с названием текст (Т) и, вышерписаным способом меняем надпись под кнопкой на «Эпизод 1». Далее два раза щелкаем правой кнопкой мышки на верхнем слое, который называется (=1) highlight (лучше всего щелкать на значке f) и в открывшемся окне выделяем закладку stroke (на рисунке, обведено красной рамкой) и в соответствующем окошке меняем цвет рамки. (рис.10)
 10.png   94.43K   129 Number of downloads
11. Тоже самое делаем и со второй кнопкой. Если все сделано правильно, то рамка вокруг кнопок становится красного цвета. Теперь сохраняемся в фотошопе, и смотрим что получилось в Adobe Encore. При просмотре плеером должно получиться примерно следующее: (рис.11).
 11.png   154.24K   107 Number of downloads

В следующей части будем создавать в фотошопе свое меню с кнопками без использования шаблонов Adobe Encore.

Edited by Azat, 14 Nov 2005 - 22:40.

[Doc]

Создание кнопок для Adobe Encore

1.В фотошопе открываем новый файл. Как было описано выше, дублируем background (щелкаем на нем правой кнопкой мышки, выбираем (Duplicate Layer), старый слой удаляем (затаскиваем в корзину левой кнопкой мышки). Затем в окошке слоев нажимаем кнопку create a new group – на рисунке обведено красным, (для кнопки все слои должны быть вложены в одну папку). В окошке слоев должна получиться следующая картинка (рис.1)
 1.jpg   45.35K   173 Number of downloads
2.Теперь выбираем любой из векторных (не растровых!!!) инструментов и рисуем маску кнопки. К ним относятся 4 инструмента (выделены красным) и для тех кто умеет хорошо рисовать проблем с рисованными кнопками не возникает. Если Вы плохо рисуете, то выбираем правую нижнюю кнопку – Custom Shape Toll (U) нажимаем ее и наверху в закладке Shape появляется огромна библиотека инструментов и шаблонов, выбирайте и рисуйте. (рис.2).
 2.jpg   78.37K   176 Number of downloads
3.Так как у нас на форуме многие монтируют свадьбы будем рисовать кнопку в виде сердечка. В свойствах слоя обязательно устанавливаем Fill – 0%, а Opacity – 100 %. (рис.3)
 3.jpg   43.43K   148 Number of downloads
4.Щелкаем правой кнопкой на этом же слое, выбираем Blinding Options и в открывшемся окне обязательно!!! ставим галочку на Stroke (рис.4). Можно добавить и другие эффекты, на Ваш вкус.
 4.jpg   79.13K   136 Number of downloads
5.Теперь два раз щелкаем на названии слоя (или в закладке Layer – Layer properties) и называем этот слой (=1) highlight

6.Добавляем новый слой Layer – New - Layer, называем его % video. В свойствах слоя должно быть обязательно 100% Fill и 100% - Opacity. !!! Дальше выбираем инструмент выделения (обязательно растровый – обведен красным кружком), им рисуем рамочку больше!!! чем наша кнопка и заливаем ее например зеленым цветом. (рис.5).
 5.jpg   62K   177 Number of downloads
7.В этом же слое добавляем векторную маску . Layer – Vector Mask – Reveal All. Если все сделано правильно, то в свойствах слоя появился значок векторной маски.

8.Переходим в верхний слой ((=1) highlight), щелкаем левой кнопкой мышки на значку векторной маски ( в серединке зеленого квадратика должно появиться сердечко) затем копируем эту маску Edit – Copy. (Рис.6).
 6.jpg   76.41K   140 Number of downloads
9.Теперь переходим в слой % video, точно также выделяем значок векторной маски жмем Edit – Past (Рис.7)
 7.jpg   71.95K   116 Number of downloads
10.Если необходимо, то можно добавить слой с текстом Layer – New - Layer, называем его text. И подписываем нашу кнопку.
 8.jpg   44.3K   111 Number of downloads
11.Теперь в окошке слоев удаляем слой background copy. (!!! Обязательно проверьте что бы все слои были вложены в папку. Для этого используйте треугольничек рядом с ней). Затем два раза щелкаем на названии папки и переименовываем ее в (+) angled box. Кнопка готова (рис.9).
 9.jpg   57.59K   142 Number of downloads
12.Сохраняем ее в формате psd. Можно в Library Adobe Encore.

13.Открываем Adobe Encore, создаем новый файл, вытаскиваем любой background для меню и добавляем две наши кнопки. Теперь включаем встроенный плеер и смотрим что происходит на экране при наведении мышки на наши кнопки. Если все правильно, то рамка вокруг кнопки должна выделяться красным цветом. (рис.10). Вся анимация будет внутри нашей кнопки, а фреймом, тот зеленый квадрат, который мы рисовали в нижнем слое.
 10.jpg   89.13K   158 Number of downloads
14.Попробуйте отстроить размер рамки, ее цвет, объем и т.д используя в слоях blending options. Думаю, что теперь это будет не сложно. УДАЧИ.

Edited by Azat, 17 Nov 2005 - 13:43.