- Joined
- Nov 15, 2009
- Messages
- 2,234
- Reaction score
- 819
Ето и крайният вид,на този анимиран банер:Намалено до 79% (от728 x 90) - Щракнете за да увеличите
За този урок,аз използвах панела Animation (Timeline), който е достъпен само в Adobe Photoshop Extended.Тоест,ако нямате Extended версията,този урок не е за вас.Да започваме:
Стъпка 1:Създаваме нов документ в Photoshop с размери,като табло(728 на 90px).Взимате Paint Bucket Tool (G) и запъвате фона с цвета # 2f2f2f.
Намалено до 96% (от600 x 568) - Щракнете за да увеличите
Стъпка 2
Отиваме в началото(отгоре) на началната страница на Grafpedia и правим снимка на екрана(PrtScn)Намалено до 49% (от1181 x 945) - Щракнете за да увеличите
(или копирайте изображението). Искаме да снимаме звездите в нашето изображение,за да можем да ги използваме във банерите.
Отваряме нов документ в Photoshop и поставяне снимката на екрана (Ctrl/Cmd + V). След това вземимаме Rectangular Marquee Tool (M) и селектираме звездите като на следващата снимка. Натискаме Ctrl/Cmd + C за да копираме това, което сме избрали. Намалено до 96% (от600 x 693) - Щракнете за да увеличите
Стъпка 3
Връщаме се в първият документ и натискаме Ctrl / Cmd + V,за да поставите звездите. Името на този слой да бъде"stars",щракаме с десния бутон върху него и избираме Convert to Smart Object. След това отиваме на Edit> Free Transform (Ctrl / Cmd + T) и променяме размера на този слой, да я завъртаме и я слагаме в лявата страна на изображението.
Намалено до 96% (от600 x 247) - Щракнете за да увеличите
Стъпка 4
Дупликираме слоя "stars"(Ctrl / Cmd + J). След това отиваме на Edit> Transform> Flip Horizontal и преместваме слоя в дясната част на банера. Намалено до 96% (от600 x 240) - Щракнете за да увеличите
Стъпка 5
Избираме Type Tool (T) и пишем "Find only on",в средата на изображението с цвят # aca6a6 и шрифт-Myriad Pro. Кликаме два пъти върху слоя с текста и въвеждаме настройките от изображението за "Drop Shadow". Натискаме Ctrl/Cmd + G,за да сложим този слой в група,наречена "info". Намалено до 96% (от600 x 405) - Щракнете за да увеличите
Стъпка 6
Използваме Type Tool (T),за да напишем думата "Grafpedia" под първия ред на текста с цвят # ebe5e5. Кликаме два пъти върху този слой с текст и използвайте настройките от изображението отдолу.
Намалено до 96% (от600 x 1331) - Щракнете за да увеличите
Стъпка 7
Избираме Rounded Rectangle Tool (U) с радиус 6px. и правим правоъгълник със заоблени краища,който се намираща под текста с цвят # 413e3e. Кликаме два пъти върху този слой и въвеждаме настройките от изображението отдолу. Намалено до 96% (от600 x 876) - Щракнете за да увеличите
Стъпка 8
Избираме Type Tool (T),копираме следния текст и го поставяме в Photoshop документа. Задаваме цвета на този слой-# dad5d5 и го центрираме в правоъгълника. След това отваряме панела (Window> Character) и въвеждаме настройките от изображението отдолу. Аз използвах шрифта Myriad Pro Semibold Italic с размер 20px и разстояние между редовете от 30px.
27000 Photoshop Gradients
30000 Photoshop Layer Styles
1000 vector files + vector icons
PSD layouts for each tuturial
Stock images + textures
Swatches + 1000 PS Brushes
Използваме Move Tool (V),за да преместим текста на първия ред в средата на правоъгълника с заоблени краища. Сега, ако задръжим, клавиша Shift натиснат и натиснем стрелка нагоре три пъти, текстовете ще се движат с по 30px и втория ред на текста ще бъде в средата на правоъгълника със заоблени краища.
Намалено до 96% (от600 x 380) - Щракнете за да увеличите
Стъпка 9
Когато създадем анимацията,ще направим текста,който е вътре в правоъгълника със заоблени краища да се движи нагоре. Въпреки това, ние искаме текстът да се показва,само вътре в правоъгълника.
За да направим това,първо натискаме Ctrl/Cmd + G,за да сложим слой вътре в групата. Името на групата "text". След това задръжте натиснат клавиша Ctrl/Cmd и кликнете на тази векторната маска на слоя "Shape 1", за да изберете правоъгълника със заоблени краища. Уверете се, че групата "text" е активна.Следтова отидете на Layer> Layer Mask> Reveal Selection. Сега ако преместите слоя с текста ще забележите, че той не се появява извън правоъгълника със заоблените краища.
Уверете се, че първата линия от текста е в средата на правоъгълника. Намалено до 96% (от600 x 338) - Щракнете за да увеличите
Стъпка 10
Скриваме групата "info" за момента.След това правим нова група с име "call-to-action".
Избираме Type Tool (T) и напишем текст,който съдържа покана към действие с помощта на цвета # f1eaea. Добавяме сянка към този слой, като използваме настройките от изображението.
Намалено до 96% (от600 x 405) - Щракнете за да увеличите
Стъпка 11
Избираме Rounded Rectangle Tool (U) и правим заоблен правоъгълник с цвят # 82b437. Кликаме два пъти върху този слой и използваме настройките от изображението. Името на този слой да бъде"button".
Намалено до 96% (от600 x 1689) - Щракнете за да увеличите
Стъпка 12
Избираме Type Tool (T) и пишем върху този бутон "Click here now", с цвят # e7f3d5. Кликнаме два пъти върху този слой,съдържащ текст и използваме настройките от изображението.
Намалено до 96% (от600 x 1100) - Щракнете за да увеличите
Стъпка 13 - Анимиране на банера
Сега,имаме готови всички слоеве на банера.Mожем да започнем,със създаването на анимацията.
Първо, отворете панела Animation (Window> Animation). Ще използвам Timeline Animation panel (а не рамката за анимация). Той е достъпен само в Photoshop Extended,както казах в началото на урока. След това се уверете, че двете групи от слоеве панел са видим,настройте прозрачност на 0%.
В изображението по-долу обясних някой от характеристиките на панела Animation.
Намалено до 96% (от600 x 857) - Щракнете за да увеличите
Стъпка 14
Отидете в групата"info",от панела Animation и натиснете хронометъра,след това Opacity,за да добавите първия ключов кадър.Прозрачността на групата "info" е 0% в момента. Сега преместете времевият индикатор,на 00:15 е и задайте прозрачността на групата"info" на 100% от панела Layers. Нов ключов кадър ще бъде добавен автоматично, тъй като променихме настройките на този.
Сега, ако пуснем тази анимация,прозрачността на групата "info" постепенно ще премине от 0%към 100%.
Намалено до 96% (от600 x 786) - Щракнете за да увеличите
Стъпка 15
Сега преместете времевият индикатор,след 01:00f(fraps) и кликнете върху хронометъра, за да добавите нов ключов кадър.Неговата позиция е в слоя с текст от групата"text".
Намалено до 96% (от600 x 586) - Щракнете за да увеличите
Стъпка 16
Преместваме индикаторът за времето,в 01:10f. След това се уверяваме, че текстът слой от групата "text" е активен. Избираме Move Tool (V), задръжаме клавиша Shift натиснат и натискаме стрелка нагоре три пъти,за дада се движи текста с по 30px нагоре. Нов ключов кадър ще бъде добавен автоматично.
Намалено до 96% (от600 x 712) - Щракнете за да увеличите
Стъпка 17
Искаме текста да не мърда за определен период от време, преди да се движи отново. За да направим това,местим времевия индикатор на 02:00f и кликаме бутона,съдържащ ключов кадър(keyframe) от лявата страна на хронометъра, за да добавите нов ключов кадър. Сега позицията на текст няма да се промени между 01:10f и 02:00f.
Намалено до 96% (от600 x 623) - Щракнете за да увеличите
Стъпка 18
Повтаряме предишните три стъпки за промяна на позицията на слоя с текст,докато не стигнем до последния ред на текста. Можете да видите как изглежда анимирания ми панел досега,в следващата снимка .
Намалено до 96% (от600 x 331) - Щракнете за да увеличите
Стъпка 19
Преместваме времевия индикатор на 06:10f и кликаме на бутона за ключов кадър(keyframe) от поздраздела Opacity на групата "info",за да добавим нов ключов кадър. След това преместваме времевия индикатор на 06:20f и задаваме прозрачност на групата "info" на 0%.
Намалено до 96% (от600 x 704) - Щракнете за да увеличите
Стъпка 20
Сега ние искаме да направим групата"call-to-action" видима.Трябва да се уверим, че е момент на 06:20f и кликнете на хронометъра до Opacity, за да добавим нов ключов кадър.
Преместваме времевия индикатор в 07:00f и задаваме прозрачността на групата "call-to-action" на 100%.
Намалено до 96% (от600 x 607) - Щракнете за да увеличите
Стъпка 21
Преместваме времевия индикатор на 09:20f и кликаме на бутона за ключов кадър(keyframe) на групата"call-to-action". Коефициентът на прозрачност на тази група ще си остане 100%, докато достигне до този ключов кадър.
Сега преместваме времевия индикатор на 10:00f и задаваме прозрачността на групата"call-to-action" на 0%.
Намалено до 96% (от600 x 705) - Щракнете за да увеличите
Стъпка 22 - Съхраняване на анимацията
Вече имаме нашата готова анимация. Можем да кликем върху бутона за възпроизвеждане за да я видим.
За да запазим нашия банер и да го използвате в интернет на адрес ,отиваме на File> Save за Web & Devices. След това използваме настройките от следните изображения и кликаме върху бутона Save.
Намалено до 96% (от600 x 648) - Щракнете за да увеличите
Взето от : http://www.grafpedia.com
Превел:Крис
За този урок,аз използвах панела Animation (Timeline), който е достъпен само в Adobe Photoshop Extended.Тоест,ако нямате Extended версията,този урок не е за вас.Да започваме:
Стъпка 1:Създаваме нов документ в Photoshop с размери,като табло(728 на 90px).Взимате Paint Bucket Tool (G) и запъвате фона с цвета # 2f2f2f.
Намалено до 96% (от600 x 568) - Щракнете за да увеличите
Стъпка 2
Отиваме в началото(отгоре) на началната страница на Grafpedia и правим снимка на екрана(PrtScn)Намалено до 49% (от1181 x 945) - Щракнете за да увеличите
(или копирайте изображението). Искаме да снимаме звездите в нашето изображение,за да можем да ги използваме във банерите.
Отваряме нов документ в Photoshop и поставяне снимката на екрана (Ctrl/Cmd + V). След това вземимаме Rectangular Marquee Tool (M) и селектираме звездите като на следващата снимка. Натискаме Ctrl/Cmd + C за да копираме това, което сме избрали. Намалено до 96% (от600 x 693) - Щракнете за да увеличите
Стъпка 3
Връщаме се в първият документ и натискаме Ctrl / Cmd + V,за да поставите звездите. Името на този слой да бъде"stars",щракаме с десния бутон върху него и избираме Convert to Smart Object. След това отиваме на Edit> Free Transform (Ctrl / Cmd + T) и променяме размера на този слой, да я завъртаме и я слагаме в лявата страна на изображението.
Намалено до 96% (от600 x 247) - Щракнете за да увеличите
Стъпка 4
Дупликираме слоя "stars"(Ctrl / Cmd + J). След това отиваме на Edit> Transform> Flip Horizontal и преместваме слоя в дясната част на банера. Намалено до 96% (от600 x 240) - Щракнете за да увеличите
Стъпка 5
Избираме Type Tool (T) и пишем "Find only on",в средата на изображението с цвят # aca6a6 и шрифт-Myriad Pro. Кликаме два пъти върху слоя с текста и въвеждаме настройките от изображението за "Drop Shadow". Натискаме Ctrl/Cmd + G,за да сложим този слой в група,наречена "info". Намалено до 96% (от600 x 405) - Щракнете за да увеличите
Стъпка 6
Използваме Type Tool (T),за да напишем думата "Grafpedia" под първия ред на текста с цвят # ebe5e5. Кликаме два пъти върху този слой с текст и използвайте настройките от изображението отдолу.
Намалено до 96% (от600 x 1331) - Щракнете за да увеличите
Стъпка 7
Избираме Rounded Rectangle Tool (U) с радиус 6px. и правим правоъгълник със заоблени краища,който се намираща под текста с цвят # 413e3e. Кликаме два пъти върху този слой и въвеждаме настройките от изображението отдолу. Намалено до 96% (от600 x 876) - Щракнете за да увеличите
Стъпка 8
Избираме Type Tool (T),копираме следния текст и го поставяме в Photoshop документа. Задаваме цвета на този слой-# dad5d5 и го центрираме в правоъгълника. След това отваряме панела (Window> Character) и въвеждаме настройките от изображението отдолу. Аз използвах шрифта Myriad Pro Semibold Italic с размер 20px и разстояние между редовете от 30px.
27000 Photoshop Gradients
30000 Photoshop Layer Styles
1000 vector files + vector icons
PSD layouts for each tuturial
Stock images + textures
Swatches + 1000 PS Brushes
Използваме Move Tool (V),за да преместим текста на първия ред в средата на правоъгълника с заоблени краища. Сега, ако задръжим, клавиша Shift натиснат и натиснем стрелка нагоре три пъти, текстовете ще се движат с по 30px и втория ред на текста ще бъде в средата на правоъгълника със заоблени краища.
Намалено до 96% (от600 x 380) - Щракнете за да увеличите
Стъпка 9
Когато създадем анимацията,ще направим текста,който е вътре в правоъгълника със заоблени краища да се движи нагоре. Въпреки това, ние искаме текстът да се показва,само вътре в правоъгълника.
За да направим това,първо натискаме Ctrl/Cmd + G,за да сложим слой вътре в групата. Името на групата "text". След това задръжте натиснат клавиша Ctrl/Cmd и кликнете на тази векторната маска на слоя "Shape 1", за да изберете правоъгълника със заоблени краища. Уверете се, че групата "text" е активна.Следтова отидете на Layer> Layer Mask> Reveal Selection. Сега ако преместите слоя с текста ще забележите, че той не се появява извън правоъгълника със заоблените краища.
Уверете се, че първата линия от текста е в средата на правоъгълника. Намалено до 96% (от600 x 338) - Щракнете за да увеличите
Стъпка 10
Скриваме групата "info" за момента.След това правим нова група с име "call-to-action".
Избираме Type Tool (T) и напишем текст,който съдържа покана към действие с помощта на цвета # f1eaea. Добавяме сянка към този слой, като използваме настройките от изображението.
Намалено до 96% (от600 x 405) - Щракнете за да увеличите
Стъпка 11
Избираме Rounded Rectangle Tool (U) и правим заоблен правоъгълник с цвят # 82b437. Кликаме два пъти върху този слой и използваме настройките от изображението. Името на този слой да бъде"button".
Намалено до 96% (от600 x 1689) - Щракнете за да увеличите
Стъпка 12
Избираме Type Tool (T) и пишем върху този бутон "Click here now", с цвят # e7f3d5. Кликнаме два пъти върху този слой,съдържащ текст и използваме настройките от изображението.
Намалено до 96% (от600 x 1100) - Щракнете за да увеличите
Стъпка 13 - Анимиране на банера
Сега,имаме готови всички слоеве на банера.Mожем да започнем,със създаването на анимацията.
Първо, отворете панела Animation (Window> Animation). Ще използвам Timeline Animation panel (а не рамката за анимация). Той е достъпен само в Photoshop Extended,както казах в началото на урока. След това се уверете, че двете групи от слоеве панел са видим,настройте прозрачност на 0%.
В изображението по-долу обясних някой от характеристиките на панела Animation.
Намалено до 96% (от600 x 857) - Щракнете за да увеличите
Стъпка 14
Отидете в групата"info",от панела Animation и натиснете хронометъра,след това Opacity,за да добавите първия ключов кадър.Прозрачността на групата "info" е 0% в момента. Сега преместете времевият индикатор,на 00:15 е и задайте прозрачността на групата"info" на 100% от панела Layers. Нов ключов кадър ще бъде добавен автоматично, тъй като променихме настройките на този.
Сега, ако пуснем тази анимация,прозрачността на групата "info" постепенно ще премине от 0%към 100%.
Намалено до 96% (от600 x 786) - Щракнете за да увеличите
Стъпка 15
Сега преместете времевият индикатор,след 01:00f(fraps) и кликнете върху хронометъра, за да добавите нов ключов кадър.Неговата позиция е в слоя с текст от групата"text".
Намалено до 96% (от600 x 586) - Щракнете за да увеличите
Стъпка 16
Преместваме индикаторът за времето,в 01:10f. След това се уверяваме, че текстът слой от групата "text" е активен. Избираме Move Tool (V), задръжаме клавиша Shift натиснат и натискаме стрелка нагоре три пъти,за дада се движи текста с по 30px нагоре. Нов ключов кадър ще бъде добавен автоматично.
Намалено до 96% (от600 x 712) - Щракнете за да увеличите
Стъпка 17
Искаме текста да не мърда за определен период от време, преди да се движи отново. За да направим това,местим времевия индикатор на 02:00f и кликаме бутона,съдържащ ключов кадър(keyframe) от лявата страна на хронометъра, за да добавите нов ключов кадър. Сега позицията на текст няма да се промени между 01:10f и 02:00f.
Намалено до 96% (от600 x 623) - Щракнете за да увеличите
Стъпка 18
Повтаряме предишните три стъпки за промяна на позицията на слоя с текст,докато не стигнем до последния ред на текста. Можете да видите как изглежда анимирания ми панел досега,в следващата снимка .
Намалено до 96% (от600 x 331) - Щракнете за да увеличите
Стъпка 19
Преместваме времевия индикатор на 06:10f и кликаме на бутона за ключов кадър(keyframe) от поздраздела Opacity на групата "info",за да добавим нов ключов кадър. След това преместваме времевия индикатор на 06:20f и задаваме прозрачност на групата "info" на 0%.
Намалено до 96% (от600 x 704) - Щракнете за да увеличите
Стъпка 20
Сега ние искаме да направим групата"call-to-action" видима.Трябва да се уверим, че е момент на 06:20f и кликнете на хронометъра до Opacity, за да добавим нов ключов кадър.
Преместваме времевия индикатор в 07:00f и задаваме прозрачността на групата "call-to-action" на 100%.
Намалено до 96% (от600 x 607) - Щракнете за да увеличите
Стъпка 21
Преместваме времевия индикатор на 09:20f и кликаме на бутона за ключов кадър(keyframe) на групата"call-to-action". Коефициентът на прозрачност на тази група ще си остане 100%, докато достигне до този ключов кадър.
Сега преместваме времевия индикатор на 10:00f и задаваме прозрачността на групата"call-to-action" на 0%.
Намалено до 96% (от600 x 705) - Щракнете за да увеличите
Стъпка 22 - Съхраняване на анимацията
Вече имаме нашата готова анимация. Можем да кликем върху бутона за възпроизвеждане за да я видим.
За да запазим нашия банер и да го използвате в интернет на адрес ,отиваме на File> Save за Web & Devices. След това използваме настройките от следните изображения и кликаме върху бутона Save.
Намалено до 96% (от600 x 648) - Щракнете за да увеличите
Взето от : http://www.grafpedia.com
Превел:Крис
