1. Design & Illustration
  2. Animation

إنشاء واجهة الرسوم المتحركة GIF في Adobe Photoshop

by
Read Time:11 minsLanguages:
This post is part of a series called Animation in Adobe Photoshop.
Make an Animated Pumpkin Icon Using Pixel Art in Adobe Photoshop
Create a Run Cycle Animation From Scratch in Adobe Photoshop

Arabic (العربية/عربي) translation by Muhlis Tirowali (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

يريد من أي وقت مضى لتشغيل واجهة تطبيق مديرية الأمن العام في عرض الرسوم متحركة تماما للعملاء أو الموقع الخاص بك؟ يتحول بها، يمكنك استخدام Photoshop لذلك، أيضا.

في هذا البرنامج التعليمي، ونحن سوف تصميم على تطبيق فون أخبار بسيطة، ثم تحريكه لعرض العميل وتصديره كملف GIF. عليك أن تتعلم كل ما تحتاجه للانتقال من فكرة لعرض الرسوم المتحركة، الجميع داخل أي النسخة الأخيرة من فوتوشوب.

دروس الأصول

لقد استخدمنا Photoshop CC في هذا البرنامج التعليمي ، ولكن CS5 أو 6 سيعملان أيضًا لمتابعة ذلك. سوف تحتاج أيضا صور التالية لإتمام هذا البرنامج التعليمي. يرجى تحميلها قبل أن تبدأ، أو استبدال بصورة مماثلة وتعديل الخطوات تبعاً لذلك:

1-تصميم أي فون "التطبيق واجهة المستخدم الرسومية"

الخطوة 1

أولاً، سوف نبدأ في تصميم واجهة التطبيق. جعل ملف جديد (التحكم-N) مع حجم قماش 640 px مقصف 1136، ثم انقر فوق موافق.

إذا كنت تمتلك واجهة تطبيق مصممة بالفعل ، فيمكنك فتحها في Photoshop ثم الانتقال إلى قسم النقر في هذا البرنامج التعليمي.

new docnew docnew doc

الخطوة 2

انقر فوق عرض > "دليل جديد" لجعل الدليل الجديد، الذي سوف يساعدنا في وضع عناصر واجهة المستخدم الرسومية بدقة. تعيين إلى عمودي مع موقف 15 px.

guideguideguide
guide in placeguide in placeguide in place

الخطوة 3

إضافة دليل آخر عمودي على كل جانب من اللوحة القماشية مع 15 px المسافة بين كل دليل.

15px guides15px guides15px guides

الخطوة 4

رسم دليل آخر، هذه المرة أفقياً في 40 مقصف، 128 بيكسل، و 220 مقصف.

horizontal guideshorizontal guideshorizontal guides
all guides in placeall guides in placeall guides in place

الخطوة 5

إضافة شريط المعلومات في الجزء العلوي معظم من القماش. إذا كنت بحاجة إلى توجيهات تفصيلية حول ذلك ، فراجع قسم شريط الحالة في البرنامج التعليمي السابق الخاص بنا كيفية تصميم تطبيق البريد الإلكتروني iOS 7 في Photoshop.

ثم ، قم بإنشاء طبقة جديدة ثم حدد القسم الثاني ثم قم بتعبئته بلون رمادي ، # 2c3137.

status barstatus barstatus bar

الخطوة 6

إضافة نص عنوان التطبيق في الجزء العلوي من الواجهة.

titletitletitle

الخطوة 7

إضافة شعار للعنوان. وجهت فقط بعض المستطيلات بسيط للشعار، ولكن إذا كان لديك رمز تطبيق القائمة، يمكنك فقط استيراد فإنه إلى طبقة جديدة.

logologologo

الخطوة 8

رسم رمز مكبر باستخدام مزيج من اثنين من الأشكال دائرة ومستطيل مستدير الزوايا، باستخدام نفس اللون كشعار التطبيق. وضعه على الجانب الأيمن من التطبيق.

search iconsearch iconsearch icon

الخطوة 9

على الجانب الآخر، رسم المستطيلات مستدير الزوايا الأربعة لرمز الخيار.

optionsoptionsoptions

الخطوة 10

جعل طبقة جديدة مع مقطع مستطيل الذي يناسب تحت عنوان. تعبئة المقطع التالي بلون رمادي، مثلما في المقطع السابق.

next barnext barnext bar

الخطوة 11

إضافة قناع طبقة على الطبقة ثم قم بإضافة أسود إلى التدرج الأبيض حتى الأسفل تﻻشى.

gradientgradientgradient

الخطوة 12

إضافة قائمة باستخدام "أداة الكتابة"، التي تحتوي على فئات الأخبار. تعيين القائمة الأولى — في هذه الحالة، الخيار كافة – أن تكون جريئة، للإشارة إلى أن الفئة النشطة. تكرار ذلك (السيطرة-ي) ثم قم بتعيين قائمة أخرى – الرياضة في هذه الحالة، — إلى التحلي بالجرأة، مرة أخرى للإشارة إلى الفئة التي يتم تحديد.

الآن، في لوحة الطبقات، تعيين الرياضة القائمة العتامة إلى 0% لإخفائه، كما أننا نريد كل فئة إلى التحلي بالجرأة أولاً.

menusmenusmenus

الخطوة 13

إضافة سهم رقيقة للملاحة القائمة، مصنوعة من المستطيلات مستدير الزوايا.

nav arrownav arrownav arrow

الخطوة 14

إضافة سهم آخر على الجانب الآخر.

matching nav arrowmatching nav arrowmatching nav arrow

الخطوة 15

ملء باقي الواجهة باللون الرمادي. تأكد من وضع هذه الخلفية تحت كافة عناصر واجهة المستخدم الرسومية.

backgroundbackgroundbackground

الخطوة 16

رسم مستطيل رمادية خفيفة لخلفية قسم الأخبار الفردية.

lighter backgroundlighter backgroundlighter background

الخطوة 17

تطبيق السكتة الدماغية، التوهج الداخلي، والتوهج الخارجي لإضافة المزيد من التباين إلى مجال الأخبار. انقر نقراً مزدوجاً فوق الطبقة ثم ثم استخدم الإعدادات التالية من الصور أدناه:

strokestrokestroke
inner glowinner glowinner glow
outer glowouter glowouter glow

الخطوة 18

رسم مستطيل مستدير الزوايا بيضاء في الجزء العلوي من الشكل السابق. وسوف نضع صورة الأخبار هنا.

news elementnews elementnews element

الخطوة 19

تطبيق "التوهج الداخلي" في الشكل الأبيض مع الإعدادات التالية:

news entry glownews entry glownews entry glow

الخطوة 20

حدد صورة من "ألبوم الصور" Tuts + مجموعة قمت بتنزيلها مسبقاً، أو غيرها من الصور التي ترغب في استخدامها، ووضعه على تغطي الشكل الأبيض مستطيل مستدير الزوايا.

photo in newsphoto in newsphoto in news

خطوة 21

ضرب مراقبة-G-Alt تحويل الصور المحددة طبقة في "قناع القطع". سوف تذهب الصورة تلقائياً داخل طبقة وراء ذلك. وهنا ما كنت انظر: A مثالي الصور على رأس منطقة الأخبار الفردية.

photo placementphoto placementphoto placement

خطوة 22

إضافة نص للمحتوى الإخباري. تأكد من إضافة التباين إلى نص الأخبار للحصول على أفضل تجربة قراءة باختلاف نوع الخط واللون والحجم.

styled textstyled textstyled text

الخطوة 23

دعونا إضافة الرموز إلى تصميم عنصر الأخبار. ارسم مستطيلين دائريين صغيرين بدون ملء وسكتة دماغية بيضاء.

iconsiconsicons

الخطوة 24

انقر نقراً مزدوجاً فوق الطبقة ثم قم بإضافة نمط طبقة "تراكب اللون". استخدام #708196 للونة.

add color overlayadd color overlayadd color overlay

خطوة 25

كرر العملية السابقة، ولكن هذه المرة يستخدم مزيجاً من مستطيل مستدير الزوايا ومستطيل.

another iconanother iconanother icon

الخطوة 26

قم بإضافة شكل دائرة صغيرة. الآن، لدينا رمز علامة. حلوة!

tag and link iconstag and link iconstag and link icons

وحتى الآن، وهذا لدينا تصميم التطبيق تكبير 100%.

100 magnified app UI100 magnified app UI100 magnified app UI

الخطوة 27

إضافة مقالات الأخبار الفردية الأخرى في التطبيق بتكرار الطبقات عنصر الأخبار، تخصيص لهم على نحو ملائم.

filled articlesfilled articlesfilled articles

الخطوة 28

إضافة ناحية الأخبار أكبر. وهذا سيظهر عند تحديد أخبار فردية.

larger news arealarger news arealarger news area

الخطوة 29

وضع جميع العناصر الفردية الأخبار والقصص الإخبارية الكبرى في مجموعات طبقة منفصلة. كنت تريد أن أؤكد لكل طبقة يوضع بعناية في مجموعة طبقة وفقا للعنصر الخاص به.

على سبيل المثال، تريد كل طبقة بقسم الأخبار الفردية الأولى وضعها معا في مجموعة طبقة، والعناصر للمقالات الإخبارية ملء الشاشة في المجموعات الأخرى. هذا وسوف تساعدك على العمل أسهل حين جعل الرسوم المتحركة.

layer groupslayer groupslayer groups

الآن، ونحن لن تستخدم هذا القسم الأخبار الكبيرة. لذلك، تعيين التعتيم على إلى 0%.

2. اضغط على المؤشر

الخطوة 1

نحن بحاجة الآن تصميم المؤشر الحنفية. جعل مجموعة طبقة جديدة واسم من الحنفية. وبعد ذلك، رسم شكل دائرة بيضاء. تعيين في العتامة إلى 50%.

tap sectortap sectortap sector

الخطوة 2

تكرار الشكل دائرة بالضغط على عنصرضبط J. تجعل من السكتة الدماغية أكبر، وتعيين إلى نقطة 3 بلون أبيض، وإزالة لون التعبئة.

tap bordertap bordertap border

الخطوة 3

إضافة شكل دائرة آخر، هذه المرة أرق. تعيين حجم السكتة الدماغية إلى 2 pt.

thinner circlethinner circlethinner circle

إخفاء كل الطبقات داخل مجموعة طبقات الحنفية أحرزناه فقط، كما لن تريد الصنابير لتظهر عندما يتم أولاً تحميل واجهة المستخدم، ولكن بدلاً من ذلك سيتم فقط عرض لهم عندما يتم تحديد الرسوم المتحركة للانتقال إلى عنصر محدد.

3. التمرير التطبيق

الخطوة 1

الآن ، نحن مستعدون في النهاية لبدء إنشاء واجهة المستخدم الرسومية. افتح لوحة الخط الزمني وثم جعل إطار جديد.

timelinetimelinetimeline

الخطوة 2

جعل إطار جديد آخر.

another new frameanother new frameanother new frame

الخطوة 3

الآن حان الوقت للكشف عن مجموعة طبقات الحنفية. عند عرض مشهد تمرير، إخفاء في الدائرتين المحدودة، ونحن ذاهبون إلى استخدام هذا الشرط للإشارة إلى إيماءة التمرير. وسوف تظهر أكثر السكتة دماغية مستمرة، بينما الدوائر المحدودة الخارجي تعطي مظهر تموج أكثر اتساقا مع الاستفادة من واحدة لتحديد عنصر.

scrolling circlescrolling circlescrolling circle

الخطوة 4

تغيير المدة إلى 1 ثانية للإطار الأول و 0.2 ثانية للإطار الثاني.

durationdurationduration

الخطوة 5

إضافة إطار آخر.

another new frameanother new frameanother new frame

الخطوة 6

تنشيط مجموعة طبقة الصنبور وكل طبقات الشبكة الإخبارية. استخدام "أداة نقل" لنقل لهم أعلى في قائمة الطبقات.

move layer groupsmove layer groupsmove layer groups

الخطوة 7

لجعل رسم متحرك سلس بين الإطار الحالي والسابق تلقائياً، انقر فوق توين من قائمة لوحة الخط الزمني.

tweentweentween

الخطوة 8

تعيين توين إلى 5 لإضافة الإطار.

tween of 5tween of 5tween of 5

ويتعين علينا الآن، للرسوم متحركة من شبكة أخبار التحرك إلى أعلى في كل إطار.

auto-generated news grid animationauto-generated news grid animationauto-generated news grid animation
news grid animation 2news grid animation 2news grid animation 2

الخطوة 9

إذا كنت تعتقد أن الرسوم المتحركة سريعة جداً، يمكنك جعلها أبطأ بتحديد كل الإطارات وتحديد المدة إلى 0.2 ثانية.

slower animationslower animationslower animation

اختبار الحركة بالنقر على أيقونة اللعب في لوحة الخط الزمني. لا تنسى أن تعيين الحركة الأبد؛ هو يحلق بهذه الطريقة الرسوم المتحركة.

playplayplay

الخطوة 10

الرسوم المتحركة الحالية تحتوي على أخبار الشبكة تتحرك نحو الأعلى. في الإطار التالي، نحن بحاجة لوضعها مرة أخرى إلى حالته السابقة حيث أنها سوف تستمر بسلاسة مع الإطار الأول. للقيام بذلك، نسخ الإطار الثاني وقم بلصقه في الموضع الأخير باختيار "لصق بعد اختيار" في مربع الحوار.

copy framecopy framecopy frame
paste framepaste framepaste frame
paste after selectionpaste after selectionpaste after selection

الخطوة 11

تطبيق أمر توين مرة أخرى جعل الرسوم متحركة جديدة بين إطارات الماضي و next-إلى-الأخير.

tween againtween againtween again
5 frame tween5 frame tween5 frame tween

إضافة إطار جديد وإخفاء المؤشر الحنفية.

hidden taphidden taphidden tap

وحتى الآن، هذا هو الرسوم المتحركة نحصل، مما يعطينا واجهة المستخدم تمرير أساسية.

animated UI scroll

4. اضغط على الرابط

الخطوة 1

الآن حان الوقت لتحريك التحديد لارتباط في القائمة. أولاً، جعل إطار جديد. في هذا الإطار، تعيين القائمة نص عتامة مع البديل جريئة مختارة من كل من القائمة تعيين إلى 0% والشفافية البديل المحدد للرياضة لتعيين إلى 100%.

bold sportbold sportbold sport

الخطوة 2

تنشيط مجموعة طبقة الصنبور وتكشف عن جميع طبقات. تغيير مدة الإطار إلى 0.2 ثانية.

add a tapadd a tapadd a tap

الخطوة 3

جعل إطار جديد لمدة 0.1 ثانية. يخفي هذا الوقت نحافة دائرة محدودة.

hide outer circlehide outer circlehide outer circle

الخطوة 4

إضافة إطار آخر وإخفاء المقبل دائرة محدودة.

hide next circlehide next circlehide next circle

الخطوة 5

إضافة إطار جديد وإخفاء مجموعة طبقات الحنفية.

hide taphide taphide tap

الخطوة 6

أنشئ إطارًا جديدًا ثم اضبط عتامة كل خبر في الشبكة بدون علامة الرياضة إلى

hide non-sport storieshide non-sport storieshide non-sport stories

الخطوة 7

لا يزال في هذا الإطار، اسحب الأخبار الرياضية الفردية التصاعدي في الشبكة، ملء المساحات الفارغة فوقها.

filled sport story sectionsfilled sport story sectionsfilled sport story sections

الخطوة 8

توين بين الإطار الحالي والسابق. للرسوم المتحركة أسرع، تعيين الإطارات إضافة إلى 3.

animate changeanimate changeanimate change

الخطوة 9

تعيين المدة في الإطار الأخير إلى 2 ثانية.

2 second last frame2 second last frame2 second last frame

للاستفادة من هذا، هذا هو الرسوم المتحركة لدينا.

sport animation

6-الاستفادة من أخبار

الخطوة 1

وبعد ذلك، نحن ذاهبون لتحديد إحدى المقالات الإخبارية وتكشف عن أنه في وضع ملء الشاشة. أولاً، إجراء الإطار الجديد مع مدة 0.2 ثانية وثم تكشف عن كل الطبقات داخل مجموعة طبقات الحنفية.

tap news starttap news starttap news start

الخطوة 2

إضافة إطار جديد ثم قم بتعيين المدة إلى 0.1 ثانية. إخفاء أنحف دائرة السكتة الدماغية.

hide thin circle againhide thin circle againhide thin circle again

الخطوة 3

إضافة إطار آخر ثم قم بإخفاء المقبل دائرة محدودة.

hide second circle againhide second circle againhide second circle again

الخطوة 4

إضافة إطار آخر مع مدة 0.1 ثانية. إخفاء مجموعة طبقة برنامج المشورة التقنية، وجعل إطار جديد. وتكشف عن قسم الأخبار الكبيرة قدمنا سابقا في الباب 28 الخطوة 1 بالإعداد لها عتامة بنسبة 100%. إخفاء الشبكة الإخبارية الصغيرة بإعداد التعتيم إلى 0%.

show large storyshow large storyshow large story

الخطوة 5

إضافة الرسوم المتحركة توين بين الإطار الحالي وسابقيه.

tween news storytween news storytween news story
finished full news storyfinished full news storyfinished full news story

وهذا ما لدينا لهذه الحركة.

finished news animation

7-تحويل طبقات الرسوم المتحركة لإطارات

الخطوة 1

من لوحة المخطط الزمني، انقر فوق "إطارات تتسطح إلى طبقات".

flatten layers into framesflatten layers into framesflatten layers into frames

سيتم تحويل كل إطار في طبقة مسطحة. إذا كان لديك إطارات 33، سوف تحصل أيضا على طبقات مسطحة 33: طبقة 1 الإطار مأخوذة من محتوى الإطار 1، طبقة 2 الإطار مأخوذة من الإطار 2، وهلم جرا.

new framesnew framesnew frames

الخطوة 2

حدد كل إطار الطبقات في لوحة الطبقات.

select allselect allselect all

الخطوة 3

اسحب الطبقات إلى الصورة فون التي قمت بتنزيلها مسبقاً.

iphone piciphone piciphone pic

الخطوة 4

في لوحة الخط الزمني، حدد "إنشاء الرسوم المتحركة الإطار" وثم انقر فوق زر "الإطار الجديد".

create frame animationcreate frame animationcreate frame animation

الخطوة 5

تأكد من تحديد كل الطبقات ما زالت. ضرب التحكم-T لإجراء تحويل. عقد عنصر التحكم ثم اسحب كل ركن ومكان لهم على زاوية الشاشة.

place news animation into iPhone screenplace news animation into iPhone screenplace news animation into iPhone screen
fit edgesfit edgesfit edges
againagainagain
and againand againand again
and yet againand yet againand yet again
and now its goodand now its goodand now its good

الخطوة 6

جعل إطار جديد لكل طبقة. وضع طبقة الإطار 1 في الإطار الأول، طبقة الإطار 2 في الإطار الثاني، والطبقة 3 الإطار في الإطار الثالث، وهلم جرا. تحتاج أيضا إلى تطابق مدة كل من الإطار. تأكد من تعيين الحلقة إلى الأبد، حيث سيتم إبقاء حلقات الرسوم المتحركة على.

animate everythinganimate everythinganimate everything

انظروا إلى الصورة أدناه للحصول على مثال. وكشف طبقة الإطار 23 في الإطار 23. وكشف طبقة الإطار 25 في الإطار 25، وهلم جرا. مواصلة هذا العمل لكل إطار.

keep animatingkeep animatingkeep animating

الخطوة 7

لقد حان الوقت لتصدير النتيجة كملف GIF متحرك. حدد حفظ لصفحة ويب في القائمة ملف، وحدد GIF كنوع الملف. يتلاعب الإعدادات المتوفرة للحصول على حجم الملف الأمثل. اختبار نتيجة الرسوم المتحركة عن طريق النقر على زر التشغيل. تأكد من تعيين "الخيارات" الخاصة به حلقات الأبد.

save as gifsave as gifsave as gif

وهذا كل شيء: لقد مصممة على تطبيق عرض واجهة المستخدم والرسوم المتحركة ووضع الرسوم المتحركة داخل أي فون صورة لجعل الحركة تبدو وكأنها قيد التشغيل على جهاز حقيقي.

الاستنتاج

أرجو أن وجدت هذا البرنامج التعليمي المفيد. يمكنك قرص الخطوات المدرجة للعمل مع أي نوع من التطبيق التي قد ترغب في عرض، ويمكن استخدام صورة جهاز مختلف لعرض، أقول، على قرص التطبيق أو الموقع. يمكنك أيضا محاولة أنواع أخرى من التفاعل اللمس المتعدد في العرض النهائي، مثل الميل إلى التمرير أو قرصه للتكبير، إذا قمت بتعديل الرسوم المتحركة.

إذا قمت بإجراء الحركات عرض التطبيق الخاص بك باستخدام هذا البرنامج التعليمي، كنا نحب أن نراهم في التعليقات أدناه!

One subscription.
Unlimited Downloads.
Get unlimited downloads