الإعلانات المتحركة - التقنية رقمية 2 - ثاني ثانوي

... رابط الدرس الرقمي الدرس الثالث الإعلانات المتحركة www.ien.edu.sa تستخدم اللافتة الإلكترونية المتحركة Animated Web Banner في الحملات الإعلانية وبكثرة في مواقع الإنترنت حيث أصبحت جزءًا من تصميمها؛ لإضافة لمسات جمالية للمواقع. ويمكن تعريفها على أنها عبارة عن إعلان يتم إيصاله من خلال خادم إعلانات عبر الشبكة العنكبوتية العالمية، ويحتوي على مجموعة من الصور المتحركة. في هذا الدرس، ستتعلم كيفية إنشاء إعلان متحرك باستخدام برنامج جمب GIMP). لتصميم إعلان متحرك، ستنشئ لافتة إلكترونية متحركة تتضمن الشعار الذي أنشأته سابقًا بواسطة برنامج إنكسكيب (Inkscape)، بعد ذلك وباستخدام برنامج جمب، ستضيف بعض التأثيرات المتحركة إلى صورة التمور الموجودة في الشعار. إنشاء الطبقات في برنامج إنكسكيب ستعرض الصورة المتحركة الشعار ( صورة التمور الذي يتم تكبيره تدريجيًا. وهذا يعني أن عليك إنشاء أربع صور مختلفة من الشعار تكون فيها صورة التمور بحجم صغير (Small) ومتوسط (Medium) وكبير ( Large)، وكبير جدًا (Extra Large) ، بينما يظل نص الشعار ثابتًا بنفس الحجم. ويمكن تنفيذ ذلك بواسطة برنامج إنكسكيب، عن طريق إنشاء أربع طبقات مختلفة بما في ذلك الشعار الحالي الذي أنشأته في الدرس السابق. D لتكرار الطبقة > من قائمة Layer (الطبقة اختر Layers and Objects الطبقات والعناصر). 2 4 > من علامة التبويب Layers and Objects الطبقات والعناصر، 6 اضغط ضغطة مزدوجة على اسم الطبقة الموجودة واكتب Extra Large" كبيرة جدًا). > اضغط بزر الفأرة الأيمن على الطبقة المحددة واختر Duplicate Layer تكرار الطبقة > ستظهر الطبقة المكررة في قائمة الطبقات. © في تصميم الرسومات، تعتبر الطبقات هي المستويات المختلفة التي يمكن فيها وضع عنصر أو ملف صورة وفي برنامج إنكسكيب، يمكن إنشاء طبقات مختلفة عند تكوين صورة رقمية. رارت التعليم New document 1.svg - Inkscape Ministry of Education 2024-1446 +- 10.000 Y:- Shift+Ctrl+L Shift+Ctrl+N ® 10 20 30 40 1 Help Extensions Filters Text Path Object Layer View Edit File 2 Layers and Objects..... Ctrl+Page Up Ctrl+Page Down Shift+Page Up Shift+Page Down Add Layer... Rename Layer... Show/Hide Current Layer Lock/Unlock Current Layer Switch to Layer Above I Switch to Layer Below Move Selection to Layer Above Move Selection to Layer Below Move Selection to Layer.... 30 ୭ 196

C D Ր *New document 1.svg - Inkscape t III + 9 1:1 X Help Extensions Filters Text Path Object Layer View Edit File 10.000 Y: +- 29.712 X: 10 20 30 [40 50 60 70 80 90 مهرجان التمور 4 3 * Layers and Objects k +1 Extra Large image16843 text23 T 0.00 R: +- 158% Z: 141.46 X: Hold ALT while hovering over item 71.40 Y: to highlight, hold SHIFT and click. | Extra Large 100 O: Unset Fill: 1.00 Unset Stroke: Filters Text Path Object Layer View Edit File 90 × Layers and Objects= 6 Extra Large copy Extra Large D X Help Extensions Filters Text Path Object Layer View Edit File 29.712 X: 10.000 Y: +- 40 50 60 70 80 مهرجان التموت * Layers and Objects Shift+Ctrl+N Add Layer... 5 Duplicate Layer +1 Extra large D 3 回 3 T Shift+Ctrl+Page Up Shift+Ctrl+Page Down Delete Layer ₤3 Rename Layer.... Layer to Group Raise Layer Lower Layer Hide/show other layers Hide all layers Show all layers Lock/unlock other layers Lock all layers Unlock all layers Unset Fill: Stroke: X: Layer of 2 objects in group svg5 Y: (layer Extra Large). Click selection Extra Large +100 0: 945 tra Large copy + 100 0: 1.00 Unset وزارة التعدو 197 Ministry of Education 2024-1446 O & 5 Unset Fill: 1.00 Unset Stroke:

C *New document 1.svg - Inkscape لتغيير حجم الصورة: 1 > أعد تسمية الطبقة واكتب الاسم Large (كبيرة) ، ثم اضغط بزر الفأرة الأيمن على صورة الطبقة 2 > في القائمة التي تظهر اختر Image Properties خصائص الصورة). 3 4 > من علامة التبويب التي تظهر اكتب البعد 35 في المربع : X ، و "15" في المربع : و 30 في المربع : Width: العرض) و "30" في المربع : Height .((الارتفاع) ستلاحظ أن أبعاد الصورة قد تغيرت 5 > اضغط على أيقونة رؤية الطبقة Extra Large كبيرة جدًا) لجعل الطبقة غير مرئية. © Help Extensions Filters Text Path Object Layer View Edit File +- 10.000 Y: +- 30.000 X: 1:1 10 20 30 40 50 60 70 80 90 + - وزارة التعليم Ministry of Education 2024-1446 0.00° R: +- 158% Z: Ctrl+X | Ctrl+C Ctrl + V | Ctrl+D | Shift+Ctrl+O Layers and Objects 1 Large 2 image375 E Cut text373 T Copy Extra Large D Paste Duplicate Delete W Object Properties... 3 Image Properties... | Shift+Alt+B مان التمور | Ctrl+G Trace Bitmap... Extract Image... Select Same Move to Layer.... Create anchor (hyperlink) Group Set Clip Group Hide Selected Objects Lock Selected Objects 66.88 X: Image 230 x 232: embedded in layer 80.95 Y: Large. Click selection again to toggle sc... * | Large + - 1000: Unset 1.00 Unset k A Fill: Stroke: هذه الأيقونة تدل على أن الطبقة Visible (مرئية). 198

*New document 1.svg - Inkscape Ր t 15,000 Y: +- ☐ Help Extensions Filters Text Path Object Layer View Edit File 35.000 X: 餅 20 30 40 50 60 70 [80 +- 5 مهرجان التمور تبدو الصورة غير واضحة بسبب وجود الطبقة Extra Large كبيرة جدًا مرئية أسفل الطبقة Large (الكبيرة). x Object attributes 30 4 55 35 X: A 15 30 Width: Height: +. - 0.00 R+ 158% Z: 100.40 X: Image 230 x 232: embedded in layer 20.95 Y: Large. Click selection again to toggle sc... s | Large -- 100 0: Unset Fill: 1.00 Unset Stroke: *New document 1.svg - Inkscape D Ր t وزارة التعوو Ministry of Education 2024-1446 Help Extensions Filters Text Path Object Layer View Edit File +- 15.000 Y: +- 29.712 X: 10 20 30 40 50 60 70 80 90 6 x Layers and Objects = Large D Extra Large هذه الأيقونة تدل على أن الطبقة Invisible (غير مرئية). مهرجان التمور يُمكنك جعل الطبقة Extra Large (كبيرة جدًا) غير مرئية، حتى لا تبدو الطبقة Large (الكبيرة) غير واضحة. + 0.00 R+- 158% Z: 100.40 X: Layer of 2 objects in group svg5 (layer 20.95 Y: Large). Click selection again to toggle s... Unset Fill: | Large 100 0: 1.00 Unset Stroke:

+- بعد ذلك، ستنشئ الطبقتين الأخريين المتوسطة (Medium) والصغيرة (Small) عن طريق تكرار طبقة كبير جدًا Extra Large) وتعيين الأبعاد التالية أبعاد الطبقة المتوسطة : 40 : X و 7:20 ، والعرض 20 20 :Width)، والارتفاع 20 20 :Height). > أبعاد الطبقة الصغيرة: 45 : X و 7:25 ، والعرض 10 10 :Width) ، والارتفاع 10 10 :Height). وفي النهاية، ستصدّر كل طبقة للحصول على أربع صور مختلفة. للحصول على الأربع صور من الطبقات المربع : كرّر الطبقة Extra Large (الكبيرة جدًا، وأعد تسميتها بـ "Medium" (متوسطة)، واكتب البُعد "40" . و "20" في المربع : ۷ ، و "20" في المربع : Width: العرض) ، و "20" في المربع : Height .((الارتفاع) كرّر الطبقة Extra Large (الكبيرة جدًا)، وأعد تسميتها بـ "Small صغيرة)، و اكتب البُعد "45" في المربع : و 25 في المربع : Y ، و "10" في المربع : Width: العرض)، و 10 في المربع : Height (الارتفاع). > الآن بعد أن أنشأت جميع الطبقات الأربع ، اختر الطبقة Small (الصغيرة). © > صدر الطبقة من Export options خيارات التصدير)، واختر Export Selected Only تصدير المحدد فقط). © > صدر باقي الطبقات بنفس الطريقة. > يمكنك فتح الصور الأربع باستخدام برنامج Photos الصور) © Help Extensions Filters Text Path Object Layer View Edit File 45.000 X: 50 60 70 [80 مهرجان ال 10 × Object attributes 2 45 X: 25 Y: 75 10 10 Width: Height Help Extensions Filters Text Path Object Layer View Edit File 40.000 X: 50 60 70 80 مهرجان | 20 × Object attributes 1 40 20 20 Y: 20 Width: Height: 230 × 232: embedded in layer ❘ Small 100 O: Click selection again to toggle sca... Unset Fill: 1.00 Unset Stroke: 30 x 232: embedded in layer .. Click selection again to tog.... . & | Medium 100 O: Unset Fill: 1.00 Unset Stroke: وزارة التعليم Ministry of Education 2024-1446 4 c 200

: New document 1.svg - Inkscape Ր t . "New document 1.svg - Inkscape T + J E ☐ Help Extensions Filters Text Path Object Layer View Edit File 29.712 X: 25.000 Y: +- 20 30 40 50 60 70 80 مهرجان التمور * Layers and Objects 3 Small D D Medium D Large D Extra Large X Help Extensions Filters Text Path Object Layer View Edit File +- 25.000 Y: +- 29.712 X: 20 30 40 50 60 رجان التمور تأكد من أن الطبقات مرتبة بهذا الترتيب قبل التصدير، وفي حالة وجود خطأ يُمكنك الضغط على الطبقة ثم سحبها ووضعها في الترتيب الصحيح. × Export▸ Batch Export Single Image 100.000 Bottom +- 100.000 Right Unset 1.00 Unset 100.000 Height +- 100,000 Width mm Units Image Size Height Width 378 +- 378 (px) (px) +- 96.00 DPI First Page Export Selected only 4 Hide Export Settings JPEG (*.jpg) Extra Large.jpg Export - 92.02 0.00° R: +- 158% Z: 79.78 X: Layer of 2 objects in group svg5 (layer Small 100 O: Y: Small). Click selection again to toggle sc... Unset 1.00 Unset Fill: Stroke: %6100 Smillas وزارت السعر 20 Ministry of Education 2024-1446 مهرجان التمر %100 Mcdumps 16100 Langsing 16100 5 Extra Langsing مهرجان التمور مهرجان التمور مهرجان التمور Fill: Stroke: من المهم الانتباه إلى تسمية الصورة عند التصدير في كل مرة.

إنشاء رسم متحرك باستخدام برنامج جمب بمجرد تصدير صور الشعار الأربع من برنامج إنكسكيب، ستدرج الآن هذه الصور في برنامج جمب كطبقات، وذلك لإنشاء الرسوم المتحركة وبالتحديد تنسيق التبادل الرسومي (Graphics Interchange Format - GIF). لفتح صور الشعار كطبقات في برنامج جمب > من قائمة File (ملف)، اختر Open as Layers فتح كطبقات). > من مجلد Pictures الصور اختر صور الشعار الأربع 3 اضغط على Open .(فتح) 0 تم إدراج كل طبقات الشعار. © 1 GNU Image Manipulation Program File Edit Select View Image Layer Colors Tools Filters Windows Help New... Ctrl+N Create Open... Ctrl+0 Open as Layers..... 2 Ctrl+Alt+O Open Location... Open Recent Save... Save As... Save a Copy... Revert Export... Export As... Create Template... Page Setup... Print... Copy Image Location Ctrl+S Shift+Ctrl+S واجهة برنامج جمب (Gimp) X alter 2. Hardness 050 (51 x 51) Basic, Spacing 10.0 Ctrl+E Shift+Ctrl + E Mode Opacity Lock: / + Normal 100.0 Ctrl+P Show in File Manager Ctrl+Alt+F × Close View Close All Quit Ctrl+W Shift+Ctrl+W Ctrl+Q وزارة التعليم Ministry of Education 2024-1446 อ Open an image file as layers 202

Open Image as Layers < Pictures Places Name 3 Size Modified Preview Search Extra Large.jpg 11.1 kB 12:27 Recently Used Large.jpg 8.8 kB 12:27 Pictures Documents Medium.jpg Small.jpg 6.7 kB 12:26 5.0 kB 12:25 O Show All Files Select File Type (Automatically Detected) Help **[Extra Large] (imported)-4.0 (RGB color 8-bit gamma integer, GIMP built-in sRGB, 4 layers) 378x378-GIMP File Edit Select View Image Layer Colors Tools Filters Windows Help P. A 100 10 Move Move: 000 Tool Toggle (Shift) Pick a layer or guide Move the active laye 100 200 300 1400 203909 Ministry of Education 2024-1446 ☑ ว X Small.jpg 5.0 kB 378 x 378 pixels RGB, 1 layer 4 Open Cancel Alter 2. Hardness 050 (51 x 51) 100 200 300 4.00 a px مهرجان التمور 100% Small.jpg (2.6 MB) Basic, Spacing EZ تأكد من وجود الصور الأربع بهذا الترتيب المحدد. × 10.0 ☑ с Layers Channels Paths Mode Opacity Lock: + Normal 100.0 E £ Small.jpg 0 Medium.jpg Large.jpg Extra Large.jpg 5 区

سيتم إنشاء الرسوم المتحركة في شكلها الأخير عن طريق تحديد كل الطبقات، وتعيين التأخير بين إطارات (Frames الرسوم المتحركة. لا يجب أن يتحرك الشعار بسرعة كبيرة ، لذلك عليك ضبط التأخير على 200 مللي ثانية عند التصدير النهائي للعمل. لإنشاء الرسوم المتحركة بتنسيق التبادل الرسومي (GIF) من قائمة Filters ) عوامل التصفية)، اختر Animation الرسوم المتحركة). 2 > ومن قائمة Animation) الرسوم المتحركة)، اختر Playback (تشغيل ) > من نافذة Animation Playback تشغيل الرسوم المتحركة، اختر Cumulative layers الطبقات التراكمية)، و 1x ، و 10fps (10) إطارات في الثانية)، و100.0 %. **[Extra Large] (imported)-4.0 (RGB color 8-bit gam 1 eger, GIMP built-in sRGB, 4 layers) 378x378 - GIMP File Edit Select View Image Layer Colors Tools Filters Windows Help Repeat "Optimize (for GIF)" Ctrl+F +4814 A -100 10 Re-Show "Optimize (for GIF)" Recently Used Alter Shift+Ctrl+F >400a 2. Hardness 050 (51 x 51) Reset all Filters Blur 0 Enhance Move Move: Tool Toggle (Shift) Pick a layer or guide Distorts > Light and Shadow > Basic, Move the active laye Noise > HOO 200 300 Spacing Edge-Detect > Z 10.0 区 с Generic > Layers Channels Paths Combine Mode Artistic > Onacity Normal V 100.0 Blend... Decor Map Render > Burn-In... > pg > Rippling... n.jpg Spinning Globe... Web > Waves... pg Animation 2 Optimize (Difference) arge.jpg 101 Python-Fu Optimize (for GIF) Script-Fu Playback... 3 Goat-exercise Unoptimize 区 f px 100% Small.jpg (2.6 MB) 221 区 وزارة التعليم Ministry of Education 2024-1446 204

Animation Playback: [Extra Large] (imported) Cumulative layers (combine) v 1x وزارة التع205 Ministry of Education 2024-1446 مهرجان التمور 4 X 10 fps y 100.0 % Frame 1 of 4 التكبير. معدل عرض الإطارات الافتراضي. سرعة التشغيل. خيار الرسوم المتحركة على أساس الطبقات. GIF ترتيب الطبقات المستخدمة في الرسوم المتحركة بتنسيق التبادل الرسومي (GIF) الطبقة الصغيرة (Small) . الطبقة المتوسطة (Medium) الطبقة الكبيرة (Large) - الطبقة الكبيرة جدًا Extra Large

لتصدير الرسوم المتحركة بتنسيق التبادل الرسومي (GIF) > دون إغلاق نافذة Animation Playback تشغيل الرسوم المتحركة)، انتقل إلى قائمة File (ملف)، ثم اختر Export As تصدير باسم 2 II > اكتب اسم ملف تنسيق التبادل الرسومي Logo.gif" ، ثم حدد مجلد Pictures (الصور). 6 > اضغط على Export .(تصدير) 5 > من نافذة Export image as GIF تصدير الصورة بتنسيق التبادل الرسومي، اختر As Animation كرسوم متحركة . 7 في مربع : Delay between frames where unspecified) التأخير بين الإطارات عند عدم تحديدها اكتب "200" مللي ثانية، ثم اضغط على Export (تصدير). > يمكنك فتح الملف logo.gif باستخدام برنامج Photos الصور) 0 "I 1 [Extra Large] (imported)-4.0 (RGB color 8-bit gamma integer, GIMP built-in sRGB, 4 layers) 378x378 - GIMP File Edit Select View Image Layer Colors Tools Filters Windows Help New... Ctrl+N 1lter Create 2. Hardness 050 (51 x 51) 100 200 300 4.00 a Open... Ctrl+o Open as Layers... Ctrl+Alt+O Open Location.... Open Recent Save... Ctrl+S Save As... Shift+Ctrl+S Save a Copy... Revert Overwrite Extra Large.jpg Export As... Create Template.... - Page Setup... Print... Copy Image Location Shift+Ctrl+E 2 Ctrl+P Show in File Manager Ctrl+Alt+F Ctrl+W × Close View Close All <-Quit ☑ وزارة التعليم Ministry of Education 2024-1446 G مهرجان التمور Shift+Ctrl+W Ctrl+Q px | 100 % 7 Export the image to various file formats such as PN... Basic. Spacing X 10.0 ☑ C 望 Layers Channels Paths Mode Opacity Lock: / + Normal 100.0 | Small.jpg Medium.jpg Large.jpg Extra Large.jpg > X 206

Export Image Name: 3 Logo.gif Save in folder: <Pictures 4 Places • Search عليك وضع الامتداد الصحيح أثناء تسمية الملف. Create Folder Name Size Extra Large.jpg Modified 11.1 kB 28/12/43 Preview Recently Used Large.jpg Pictures Documents Export Image as GIF GIF Options Interlace * GIF comment: Medium.jpg Small.jpg 8.8 kB 28/12/43 6.7 kB 28/12/43 5.0 kB 28/12/43 ? No selection Created with GIMP * As animation 6 Animated GIF Options 7 * Loop forever Delay between frames where unspecified: 200 milliseconds Frame disposal where unspecified: I don't care Use delay entered above for all frames Use disposal entered above for all frames وزارة التعلم 2 207 Ministry of Education 2024-1446 Help 8 Х Export Cancel 5 Export Cancel X %100 Q Logo.gif 9 مهرجان التمور

208 لنطبق معًا تدريب 1 اشرح المقصود بتنسيق التبادل الرسومي (GIF)، ومتى يُفضّل استخدامه كوسيلة إعلانية؟ تدريب 2 اعكس ترتيب الطبقات الأربع في إنشاء الرسوم المتحركة بتنسيق التبادل الرسومي (GIF)، ثم ناقش مدى اختلافها مع تلك التي أنشأتها خلال الدرس. تدريب 3 اشرح المقصود بالملصق الإعلاني، وما أوجه الاختلاف الأساسية بينه وبين الشعار؟ تدريب 4 . صمّم شعارًا متحركا عن اليوم الوطني السعودي. وزارة التعليم Ministry of Education 2024-1446