Преглед на урок

Анимиран интерфейс

Анимиран интерфейс




Две от новите неща във Photoshop CS3 са smart objects и video layers.

1. Първо ще създадете двойка патерни, които ще са необходими по-нататък в работата ви. Ако погледнете финалното изображение, ще видите, че авторът е използвал ефект на диаманта за вратата. Това може да се направи и с опорно изображение (stock изображение), но авторът е решил да направи патерн за постигане на същия ефект.
Създайте нов документ с размери 40×40px. Изберете Edit>Preferences>Grids. В отворилия се прозорец Preferences, в полето Gridline every поставете стойност 40, а за subdivisions поставете стойност 8 и кликнете върху Ок. Ако мрежата не е видима, изберете View>Show>Grid.
Създайте нов слой (Layer>New>Layer). Ще създадете пунктирна линия за патерна.
Изберете line tool в режим Shape Layer. В лентата с опции за инструментите, в полето Weight въведете стойност 1px. Под ъгъл 45° изтеглете линии, както е показано на изображението по-долу:



2. Изберете инструмента brush tool. Изберете твърда четка с диаметър 8px. Натиснете клавиш F5 (или изберете Window>Brushes), за да се отвори прозореца Brushes. Направете следните настройки:



3. Създайте нов слой. Изберете инструмента Pen tool в режим Path. Кликнете върху началната точка на линията в средата и след това върху крайната, за да очертаете пътечка. Кликнете с десен клавиш на мишката върху пътечката и от контекстното меню изберете Stroke Path. В появилия се прозорец, поставете отметка пред Simulate pressure. Отново кликнете с десен клавиш на мишката и изберете Delete Path.
Същото направете и с останалите две линии.



4. Кликнете двукратно върху слоя в палитрата Layers, за да се отвори прозореца Layer Style.









5. Дублирайте слоя (Layer>Duplicate Layer). Изберете Edit>Transform>Flip Vertical. Създайте нов слой под дублирания. Кликнете върху дублирания слой и натиснете клавишната комбинация Ctrl+E, за да обедините двата слоя . Изберете Filter>Other>Offset и направете настройките от изображението по-долу (може да се наложи да експериментирате, за да получите резултата на автора).
Командата Offset е една от полезните команди при създаване на патерн.



6. Обединете последните два слоя. Изключете видимостта на слоя Background и слоевете с пунктирните линии. Изберете Edit>Define Pattern и дайте наименование на патерна diamond plate. Вече можете да затворите документа.



7. Сега ще направите патерн, който да изглежда като малка, нагъната метална пластинка. Създайте нов документ с размери 10×10px. Променете настройките за Grid, като за subdivisions поставите стойност 10. За Foreground изберете черен цвят. Изберете инструмента Rectangle tool в режим Shape Layer и начертайте правоъгълник, като на изображението по-долу:



8. Кликнете двукратно върху слоя, за да се отвори прозореца Layer Style и приложете стила Gradient Overlay със следните настройки:



9. Ще създадете background-а (фона, задният план на изображението), част от който се вижда при отваряне на вратите. Създайте нов документ с размери 600×250px.
Причината, поради която авторът работи с малък размер на документа е, че добавятето на видео изисква голяма компютърна памет. За Foreground изберете цвят #000000. Изберете инструмента Paint Bucket Tool и запълнете с черен цвят.
Създайте нов слой. Изберете инструмента Gradient tool. В лентата с опции за инструментите изберете Radial Gradient. Изтеглете градиента, като започнете от средната част на документа (бяло) и завършите в един от ъглите му (черно). В палитрата Layers, променете Opacity на слоя на 10% (по този начин средната част на документа ще изглежда малко по-светла).



10. Сега ще добавите нагънатият метален ефект.
Създайте нов слой и го запълнете с черен цвят. В палитрата Layers, намалете Opacity на слоя на 50%, а Fill, поставете на 0%. Изберете Layer>Layer Style>Pattern Overlay. Направете следните настройки:



11. Изберете инструмента Horizontal Type Tool и напишете някакъв текст в средата на документа. Авторът е използвал шрифт Helvetica Bold Italic, размер 72pt и цвят #505050 за текста.



12. Ще добавите видео към изображението. Видеофайла, използван в урока е на GoMedia’s Arsendl . Авторът е ползвал Tech Shape Motion Pack, който свободно можете да изтеглите от този адрес.
Разархивирайте пакета. Изберете Layer>Video Layers>New Video Layer from File. Авторът е избрал видеофайла techshape8.mov. Сега от лентата с менютата изберете Window>Animation. Ще се появи прозореца Animation. В лявата част на прозореца се намират слоевете, а в дясно е времевата линия (timeline). Всички слоеве, които са различни от видеослоя са безкрайни по продължителност. Преместете времевия плъзгач малко преди края на видеослоя. По този начин ще можете да видите разположението на формата.



13. За да работите с обекта от видеофайла, като с обикновен обект, който вие сте нарисували или начертали, е необходимо да го преобразувате в Smart Object. За тази цел, кликнете с десен клавиш на мишката върху видеослоя, в палитрата Layers. От контекстното меню изберете Convert to Smart Object.

Цитат
„Smart Objects (умните обекти) съдържат растерни или векторни изображения . Смарт обектите запазват изображенията- източници с всички тяхни оригинални характеристики.
Какво можете да правите със смарт обектите?
- Можете да извършвате различни трансформации без това да променя оригиналния обект. Върху смарт обектите не можете да прилагате трансформациите Perspective и Distort.
- Можете да работите с вектори от Illustrator без да се налага да ги растеризирате.
- Можете да прилагате филтри.
Не можете да прилагате операции обаче, които променят пикселните данни (Dodge Tool, Burn Tool и т.н.). За да приложите подобни действия върху смарт обект, който съдържа векторно изображение, е необходимо първо да го растеризирате. В тези случаи, за да не променяте векторното изображение, можете просто да дублирате слоя, да растеризирате дублирания слой и да приложите промените върху него.
Когато прилагате командата Transform върху смарт обект, върху който има приложен смарт филтър, фотошоп изключва филтърните ефекти, докато трансформациите не бъдат приложени. „
от Photoshop Help

За да можете да обработите файловете, съдържащи се в един смарт обект, е необходимо да кликнете върху миниатюрата на слоя (trumbnail).
Кликнете върху миниатюрата на слоя на смарт обекта. Ще се покажат файловете, които изграждат смарт обекта. Ако сега приложите, например Hue/Saturation, след това затворите смарт обекта, като при това съхраните промените, тогава при внасянето на този смарт обект в друг документ, промените ще бъдат запазени.
Когато прилагате филтър към обикновен слой, не можете да се върнете и да го промените. Когато обаче прилагате филтър към смарт обект, можете да се върнете по-късно и да промените настройките му.
Натиснете клавишната комбинация Ctrl+T (Edit>Free Transform). Преоразмерете, преместете и ако е необходимо завъртете изображението от видеослоя.



14. Ще промените цвета на видеослоя. Има два начина, за да направите това. Единият е да приложите стила Color overlay, другият е да създадете нов слой над видеослоя и да приложите изрязваща маска. Авторът предпочита да създаде нов слой.
Създайте нов слой и го запълнете със същия цвят, с който изписахте текста. При задържан клавиш Alt, кликнете точно на границата между двата слоя, за да добавите изрязваща маска (clipping mask).



15. Авторът е дублирал слоя с видеофайла, преоразмерил го е, ротирал го е и го е поставил на ново място в документа. Вие можете да използвате друг видеофайл. Чувствайте се свободни да експериментирате. В панела Animation ще видите всички видеофайлове, които сте добавили. Ако не искате тези видеофайлове да стартират незабавно с пускането на анимацията, е необходимо да ги преместите малко надясно, например около 2:00f маркера.



16. Намерете си изображение на ръждива повърхност. Копирайте го в документа в слой, разположен над видеослоя. Поставете blending mode на този слой на Overlay, а Opacity на 40%.
Създайте нов слой. Дайте наименование на слоя black. Запълнете го с черен цвят. Поставете Opacity на този слой на 0%. Този слой ще ви послужи като основа за добавяне на мигаща светлина.



17. Ще създадете ефект на мигаща светлина. Отворете панела Animation и изберете слоя black. Кликнете върху триъгълничето, което стои пред наименованието му. Слоят black има три характеристики: position, opacity и style. За да се пресъздаде мигащ ефект ще използваме свойството opacity (по време на възпроизвеждане на видеофайла, ще се променя прозрачността на обекта, което ще създава впечатление, че обекта премига). Преместете времевия плъзгач в началото на фрейма (натиснете бутона Selects first frame, който се намира в долната част на панела Animation). Кликнете върху бутона със секундомера, който се намира пред opacity. Това автоматично ще създаде ключова точка във фрейма (keyframe- ключова точка, в която се прави промяна на някое от свойствата на обектите). Преместете времевия плъзгач на позиция 1:00f. Кликнете върху Add or remove keyframe at current time, за да създадете друга точка (keyframe).
Opacity за всички тези точки сега е 0%. Преместете времевият плъзгач малко. В палитрата Layers, променете Opacity на слоя на 60%. Отново преместете времевия плъзгач и поставете Opacity на слоя на 0%. Повторете тези действия 5-6 пъти.



Цитат
„Photoshop интерполира данните между две keyframe във времевата линия.
Например, ако искате графичният обект да се премести 5px наляво по екрана в 15 фрейма, вие не променяте 15 пъти позицията на обекта, а задавате началната и крайната точка и фотошоп прави плавната промяна на свойството между двете точки.
Във фотошоп съществуват два вида интерполация: линейна(такава, каквато е използвал авторът на урока) и hold интерполация. Прилагайки hold интерполация, вие можете да направите внезапна промяна в някое от свойствата на обекта.
За да приложите hold интерполация, селектирайте една или повече keyframe.Кликнете с десен клавиш на мишката и от контекстното меню изберете Hold Interpolation.”
от Photoshop Help

Ако деселектирате хронометъра (в случая пред свойството Opacity на слоя black), тогава всички създадени от вас keyframe за това свойство, ще бъдат премахнати.

18. Ще добавите червена, алармена светлина.
Внесете изображението в документа, преоразмерете го и го поставете, както е показано на изображението:



19. Дайте наименование на слоя light. Ъглите на изображението са много остри, поради което ще добавим маска на слоя и ще скрием излишното. Натиснете бутона Add layer mask. Изберете мека четка с диаметър около 40px. За Foreground изберете черен цвят. Натиснете клавиш 3, за да се промени Opacity на четката на 30%. Рисувайте, докато скриете излишното от изображението.



20. Ще направите светлината да проблясва и да блещука. Изберете Layer>Layer Style>Color Overlay и приложете следните настройки:



21. За да премигва светлината, ще използвате метода, по който работихте в стъпка 17, но сега вашата променлива ще бъде стила, който приложихте към слоя. За да затъмните, повишете Opacity на стила Color Overlay. Отворете отново панела Animation. Изберете слоя light, отворете го, за да се покажат свойствата му и изберете style, като кликнете пред хронометъра пред наименованието му. Поставете keyframe, като за всяка точка променяте Opacity на стила Color Overlay. Поставете keyframe за цялото време на възпроизвеждане на файла, т.е. последната ви точка трябва да бъде поставена около 5:00f (за по-продължителни видеофайлове се изисква голяма RAM памет на компютъра, ако все пак успеете да съхраните файла, то при недостатъчна RAM той няма да може да се възпроизведе докрай).



Необходимо е промяната на Opacity на слоя black да се синхронизира с промяната на Opacity на стила Color Overlay за слоя light (можете едновременно да поставяте keyframe за двата слоя).
22. Създайте нов слой. Изберете инструмента Brush Tool. От лентата с опции за инструментите изберете мека (soft) четка с голям диаметър и Opacity 100%. За Foreground избирайте ярки цветове и нанасяйте щрихи върху слоя, както е показано на изображението по-долу:



23. Към този слой трябва да добавите филтър. Преди това преобразувайте слоя в Smart Object, за да можете да правите по всяко време промени на филтрите, които прилагате.
Изберете Filter>Blur>Gaussian Blur с радиус 100px. Поставете blending mode на слоя на color и opacity на 60%. Вече имате напълно завършен заден фон и можете да възпроизведете анимацията, за да видите как изглежда.



24. Преди да продължите нататък селектирайте всички слоеве, които имате до момента и ги обединете в една група, с наименование Background.
Създайте нова група (Layer>New>Group) и я наименовайте diamond plate.
Създайте нов слой и незабавно го конвертирайте в смарт обект. Добавете стила Color Overlay със следните настройки:



25. Сега към този слой ще добавите някои смарт филтри. Натиснете клавиш D от клавиатурата, за да може цветовете ви за Foreground/Background да станат съответно черен/бял.
Изберете Filter>Render>Clouds.
Изберете Filter>Noise>Add Noise с настройки: Amount- 50%, Distribution: Gaussian, поставете отметка пред опцията Monochromatic.
Приложете Filter>Blur>Gaussian Blur с радиус 2px.



26. Дублирайте слоя (Layer> Duplicate layer). Изберете Layer>Layer Style>Pattern Overlay.



27. Изберете Layer>New Adjustment Layer>Levels. Преместете сивия плъзгач към стойност 3.



28. Изберете Layer>New Adjustment Layer>Hue/Saturation. За Hue изберете стойност около 20, а за Saturation около 45. Можете да добавите и други корекционни (Adjustment) слоеве, просто експериментирайте.
Включете Grid. Поставете стойности за gridline:100px , а за subdivisions: 10.
Изберете инструмента Rectangular marquee tool и направете правоъгълна селекция от долния ляв ъгъл до горната средна точка (необходимо е да разделите слоя на два еднакви правоъгълника). В палитрата Layers, изберете групата diamond plate и кликнете върху бутона Add layer mask, който се намира в долната част на палитрата.



29. Създайте нов слой. За Foreground изберете черет цвят. За да направите дръжка, изберете Rounded rectangle tool с радиус около 8px, в режим Shape Layer.
Можете да изключите видимостта на групата background за сега.



30. Върху слоя приложете следните стилове:











31. Създайте нов слой. Изберете инструмента Rectangular marquee tool. Изтеглете правоъгълна селекция по граничната повърхност. В лентата с опции за инструментите изберете режим Subtract from selection (или задръжте клавиш Alt) и изтеглете още една селекция, една грид-линия по-навътре. Запълнете селекцията с черен цвят (Edit>Fill).



32. Върху слоя приложете следните стилове:









33. Изберете инструмента Rectangle Tool в режим Shape layer, за да създадете два цилиндъра, разположени на различни слоеве.



34. Върху първия цилиндър добавете следните стилове:





Кликнете с десен клавиш на мишката върху слоя и от контекстното меню изберете Copy layer style. Изберете слоя с другият цилиндър, кликнете с десен клавиш на мишката върху него и изберете Paste layer style.
35. Създайте нов слой и начертайте правоъгълниче и кръг за всеки цилиндър, както е показано на изображението по-долу:



36. Към слоевете с кръгчетата добавете следните стилове:





Към слоевете с малките цилиндърчета можете да добавите стиловете, приложени върху слоевете с големите цилиндри, като премахнете стила Drop Shadow.



37. В палитрата Layers, слоевете от дръжката до кръгчето обединете в една група, заедно с групата diamond plate. Дайте наименование на новата група: moving. Създайте нова група над предходната, наречете я stationary.
До този момент би трябвало да имате три групи със слоеве: background, moving и stationary.
Създайте елементите от изображението по-долу. След това можете да им приложите стиловете на елементите, които създадохте преди това.





38. Преобразувайте групата moving в Smart object. Същото направете и с групата stationary. Ако сега искате да редактирате някой от двата обекта, просто кликнете върху миниатюрата му в съответния слой. Обединете тези два обекта в нова група, наречена door1.





39. Изберете Edit>Transform>Flip Horizontal. Вече имате две врати. Изберете инструмента Move Tool и разположете втората врата симетрично на първата.



40. Отворете панела Animation. В лявата част на панела, изберете door1, след това смарт обекта moving. Кликнете върху хронометърчето пред свойството Position. По този начин ще създадете стартираща keyframe, когато вратата ще е затворена.



41. Ще създадем друга точка около 5.00f, когато вратата ще е също затворена. Кликнете върху бутона Select the first frame, за да преместите времевия плъзгач в началото на кадъра. Сега преместете времевия плъзгач около маркера 3.00f. Изберете смарт обекта в палитрата Layers. Изберете инструмента Move Tool. При задържан клавиш Shift, преместете вратата наляво. Забележете, че след като направите преместването, keyframe ще се създаде автоматично.





42. Повторете стъпките 41 и 42 за door2. Можете отново да възпроизведете анимацията.
Преместете плъзгача Work Area End до последната поставена от вас keyframe, за да намалите времето за възпроизвеждане на анимацията.



43. Ще е добре, ако ви се наложи да използвате това видео, то да бъде във вид, който може да се редактира, за да можете да направите желаните от вас промени. Селектирайте всички папки и слоят Background. Създайте нова група с наименование video. Натиснете бутона Add layer mask и тогава я преобразувайте в Smart Object. Маската се поставя, за да нямате проблеми, когато вмъквате анимацията в документи с по-големи размери.



44. Сега можете да копирате или да премествате създадения от вас умен обект, в който документ си пожелаете.
Създайте нов документ с размери 500×380px. На изображението по-долу е показано, че в този документ авторът е поставил 6 слоя с различни Blending mode и Opacity. Слоят най-отдолу е Background и е запълнен с черен цвят. Върху следващият е приложен филтъра Clouds и прозрачността му е 5%.
Следващият слой е текстура с трева.
Авторът е добавил малко грапавина към изображението.
Следващият слой е текстура с ръжда. Авторът е приложил маска към този слой, за да го съчетае с останалите.
Следващият слой е с мек теракотен цвят.



45. Внесете видео смарт обекта в този документ. Авторът е добавил няколко стила, за да подобри качеството на фона. (виж изображенията по-долу)
Можете да съхраните готовия файл в .gif формат като изберете File>Save for Web and Devices. Другата възможност е да експортирате файла като movie file (.mov), като изберете File>Export>Render Video.









Финално изображение:



Моят опит:



Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




Урокът е добавен от: poli1111
Източник: http://psdlearning.com/

Коментари

gagoweb

Бравоооооооооо Яко.

krapsi

Супер готин урок!

t0k

http://i50.tinypic.com/5l78t3.gif

t0k

Моя грешка!

http://i50.tinypic.com/5l78t3.gif

avi

Моят опит:

http://i319.photobucket.com/albums/mm462/avidesign/anime.gif

the_flamer

Този урок не става за PS3 май!Имам впредвид че при CS3 я няма опцията за импортиране на "video layer"

h3tr1k

има много по лесен начин да се направи the_flamer е прав аз го правих много по различно на CS3 версиата ....

ето моят резултат на cs3

http://prikachi.com/files/1259945y.gif

CBETJIb0

Само при мен ли animation процореца е такъв:

http://store.picbg.net/thumb/18/0B/8ed119cc23db180b.JPG

този от скриинoвете в уреока е като на after effect.... :?

h3tr1k

на урока се ползва версия CS4 а твоята е cs3 като моята затова нямаш такива :)

CBETJIb0

Еми ок, значи това в първия ред не е вярно.

h3tr1k

еми може да има такъв фотошоп CS3 с тия екстри но специално моя няма ...

pavkaman

Някой ще може ли да ми прати патерна си на ламарината че не ми излиза :(

2 часа си играх да наглася патерна като в урока не успях.

murito

Здр,първо изобще не се водих по урока :D така че ето и мойта простотия :D

http://prikachi.com/users/just_xxx/247k.gif

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.