منتدى الابداع العربي

للإبداع لمسات ! ... ولمسـات الإبــداع إختصاصـنا !
 
الرئيسيةالرئيسية  المنشوراتالمنشورات  البوابةالبوابة  التسجيلالتسجيل  دخولدخول  


تصميم تأثير إعلان نيون ضوئي متحرك
 

 تصميم تأثير إعلان نيون ضوئي متحرك

اذهب الى الأسفل 
كاتب الموضوعرسالة
EL-LORD
عضو فعال 

EL-LORD

ذكر
الحمل
عدد المساهمات : 155
نقاط النشاط : 190
السٌّمعَة : 9
بلد العضو : تصميم تأثير إعلان نيون ضوئي متحرك Egypt10
العمر : 31

تصميم تأثير إعلان نيون ضوئي متحرك Empty
مُساهمةموضوع: تصميم تأثير إعلان نيون ضوئي متحرك   تصميم تأثير إعلان نيون ضوئي متحرك Emptyالخميس أغسطس 05, 2021 5:41 pm

شاهدت مؤخرًا العديد من التصاميم ثلاثية الأبعاد للافتات نيون إعلانية تم تصميمها باستخدام برامج التصميم ثلاثي الأبعاد. أميل أكثر للتّصاميم ثنائية الأبعاد لذلك أريد أن أنتج تأثير نيون مشابه باستخدام الإليستريتور وفوتوشوب ولكن مع إضافة الحركة بواسطة صيغة GIF المتحركة. اتبع هذا الدرس لتتعلم عملية تصميم لافتة إعلانية لكوكب البيتزا مُستخدمًا أدوات فكتور الإليستريتور لإنشاء التصميم الأوّلي للافتة ثم فوتوشوب لإضفاء الحيوية على التصميم عبر أنماط الطبقات المتنوعة وتشكيل الحركة للملف. m59
تصميم تأثير إعلان نيون ضوئي متحرك Pizza-Planet.thumb.gif.756c5d751987525945308e8062d30b0c

تأثير لافتة النيون سيتم إنشاؤه في الفوتوشوب باستخدام أنماط الطبقات عبر إنشاء توهجات نيون ملوّنة كما سيكون هناك طبقة قاتمة تكون عند إطفاء الأنوار والتي ستُضاف في إطار أثناء سير الحركة للملف لإضفاء الشعور بالواقعية على التأثير. لافتات النيون تعتمد على الأنابيب المنحنية لتشكيل أشكال التصميم لذلك سنستخدم الإليستريتور لصياغة مسارات فكتور بحيث لا تتقاطع الخطوط مع بعضها.
افتح برنامج الإليستريتور وابدأ ملفًّا جديدًا. ارسم دائرة على لوح الرسم باستخدام أداة القطع الناقص Ellipse tool، ثم ألغِ لون التعبئة واترك فقط الحدود السوداء ظاهرة. غيّر إعدادات الحدود إلى 5pt مع نهايات مستديرة وزوايا مستديرة أيضًا.
تصميم تأثير إعلان نيون ضوئي متحرك 1.thumb.jpg.f56c7fc3d84a86c50864c21809d75b4f
استخدم أداة النص Type tool لإضافة أي نص إلى لافتة النيون. أنا استخدمت خطًّا اسمه Darwin لكتابة Pizza Planet.
تصميم تأثير إعلان نيون ضوئي متحرك 2.thumb.jpg.5ca43a2eeeec86503e80b19bc9028856
اضبط حجم النص ليتوسط الدائرة ويتقاطع مع حدودها الخارجية ثم أمِلهُ بزاوية -10 درجة عموديًّا من القائمة:
Object > Transform > Shear option
تصميم تأثير إعلان نيون ضوئي متحرك 3.thumb.jpg.ba8fb700b5dc8d83e29c589d1b90a3f5
ألغِ لون التعبئة للنص وأضف حدودًا سوداء مستخدمًا ذات الحجم 5pt مع النهايات المستديرة والزوايا المستديرة أيضًا. بالزر الأيمن اختر Convert to Outlines.
تصميم تأثير إعلان نيون ضوئي متحرك 4.thumb.jpg.829fe93670a8ac1e2e53d9ea6ac65582
ارسم دائرة صغيرة وقصّ المسار باستخدام أداة المقص Scissors tool في الجزء العلوي الأيسر. استخدم أداة التحديد المباشر Direct Selection tool لحذف المسار من النقطة السفلية إلى هذا القطع الجديد.
تصميم تأثير إعلان نيون ضوئي متحرك 5.thumb.jpg.1e9306e2673c6bf7b6f1837ab14c4296
اصنع نسخًا عديدة من هذا الشكل الأخير مع تعديل أحجامها وذلك لتعبئة المساحات الفارغة داخل الدائرة لتكوين فوهات وفتحات الكوكب.
تصميم تأثير إعلان نيون ضوئي متحرك 6.thumb.jpg.2abac6f7efbb0ca3ca420c43b0eb36c0
حدّد الدائرة الرئيسية للكوكب وانسخها 

الكود:
CMD+C

 ثم ألصقها في المقدمة 

الكود:
CMD+F

. استمر بالضغط على 

الكود:
ALT

 أثناء تمديد وضغط الشكل لتشكيل الحلقة حول الكوكب. ضاعف هذا الشكل الأخير وصغّر حجمه قليلًا بشكل يوازي الأصلي.
تصميم تأثير إعلان نيون ضوئي متحرك 7.thumb.jpg.4518ce02670dbf8f7229315c9d4c4a6b
ارسم شكلًا بيضويًّا في مكان ما على لوح الرسم ثم اسحب النقطة العلوية للأعلى باستخدام أداة التحديد المباشر Direct Selection tool لتمديد الشكل.
تصميم تأثير إعلان نيون ضوئي متحرك 8.thumb.jpg.35b26b7149ece3b97f0db2b9b5822817
استخدم أداة Convert Anchor Point tool الموجودة ضمن أدوات القلم لإزالة مقابض البيزير وترك النقطة حادة.
تصميم تأثير إعلان نيون ضوئي متحرك 9.thumb.jpg.bcca9719672af79c804f1cdab97e4df9
أضف دوائر أخرى إلى الشكل لبناء شكل صاروخ بسيط. استخدم لوحة المحاذاة Align panel لتوسيط جميع العناصر مع جعل شكل جسم الصاروخ العنصر المفتاح عبر منحه نقرة إضافية.
تصميم تأثير إعلان نيون ضوئي متحرك 10.thumb.jpg.c4b95ddce52bc095e1548d3fa25c8841
اصنع نسختين من الصاروخ وعدّل حجمها ودوّر كل صاروخ وضعهُ في موقعه في مدارٍ حول الكوكب مع جعلها أكبر في كل مرّة.
تصميم تأثير إعلان نيون ضوئي متحرك 11.thumb.jpg.0621d96ddb1005595bf9721a58b571e0
التصميم يحوي العديد من المسارات المتداخلة فوق بعضها لذلك دعونا ننشئ المزيد من نماذج أنماط لافتة النيون. حدّد دائرة الكوكب الرئيسية ثم اذهب للقائمة:
Object > Path > Offset Path
ثم أدخل القيمة 3mm.
تصميم تأثير إعلان نيون ضوئي متحرك 12.thumb.jpg.be34ac9dc919b5a73956c7bd9c76e9c5
انقر بالزر الأيمن على المسار الإضافي الجديد واختر Make Guides. تأكد من ظهور الأدلة عبر الضغط على 

الكود:
CMD+;

 ومقفلة عبر الضغط على 

الكود:
CMD+Alt+;
تصميم تأثير إعلان نيون ضوئي متحرك 13.thumb.jpg.055c034a3ae40e9cf7749710b3efd498
استخدم أداة المقص Scissors tool لقص مسارات حلقات الكوكب في موقع تقاطعها مع الأدلة الجديدة. استخدم الأدلة الذكية Smart Guides عبر الضغط على 

الكود:
CMD+U

 لتُسهّل عملية مطابقة هذه المنطقة.
تصميم تأثير إعلان نيون ضوئي متحرك 15.thumb.jpg.c9406a69c0560c457b33c30e4f8e542a
على الجانب الآخر فإن حرف P يتقاطع مع حدود الكوكب أيضًا لذلك ألغِ تجميع النص Ungroup من أجل تحديد هذا الحرف فرديًّا ثم أضف مسار إضافي بقيمة 3mm.
تصميم تأثير إعلان نيون ضوئي متحرك 16.thumb.jpg.018f0abae5bdc5bbe8c2e7a7f9e80902
الحرف P بشكل خاص بحاجة لخطوة إضافية من أجل إنشاء الأدلّة. انقر بالزر الأيمن ثم اختر Release Compound Path ثم احذف الجزء الداخلي قبل تحويل الخطوط الرئيسية إلى أدلّة.
تصميم تأثير إعلان نيون ضوئي متحرك 17.thumb.jpg.89a09e8c8cacd8a71347d01d14bbffcc
قص حلقات الكوكب عند تقاطعها مع المسار الإضافي لحرف P ثم احذف الأجزاء غير المرغوبة من المسارات.
تصميم تأثير إعلان نيون ضوئي متحرك 18.thumb.jpg.ab7d63f13ac47061bdc7b02814923b1b
سنستخدم ذات التقنية في كل التصميم لإزالة جميع المسارات المتقاطعة ولكن بالنسبة للجزء السفلي من الحلقة فإن النص هو من يحتاج للتعديل للسماح للحلقة بالالتفاف حول الكوكب.
تصميم تأثير إعلان نيون ضوئي متحرك 19.thumb.jpg.a115770a76924bb1dacb2b1f1ae0d06a
ألغِ تجميع Ungroup عناصر النص الأخرى وأضف مسار إضافي للحرف الأول والأخير ثم أنشئ أدلّة من النتائج. تذكّر أن تحرر المسار المركب لحرف P ليصبح قابلًا للتحول إلى دليل.
تصميم تأثير إعلان نيون ضوئي متحرك 20.thumb.jpg.f3bbe12aa393fc9f3c94117a72ab66d7
استخدم هذه الأدلة الجديدة لقص أي مسارات متداخلة مع بعضها وأزِل التداخلات في كل أنحاء التصميم.
تصميم تأثير إعلان نيون ضوئي متحرك 21.thumb.jpg.2131ddd68159e304d6286fe76cc242f9
بالنسبة للمنطقة التي يتداخل فيها النص مع الحلقة سنحتاج إلى أدلة إضافية من مسارات الحلقة نفسها.
تصميم تأثير إعلان نيون ضوئي متحرك 22.thumb.jpg.f595ad66bf9e0c4edc516a1409187092
استخدم أداة المقص Scissors tool لقص وحذف مناطق تواجد الحروف تحت الحلقة عبر خطوط الأدلة.
تصميم تأثير إعلان نيون ضوئي متحرك 24.thumb.jpg.8304fd50c16d535e2e8aef51e895e354
من الضروري في بعض الأحيان تحرير المسارات المركبة للحروف من أجل تحديد وحذف الأجزاء غير المرغوبة من المسار.
تصميم تأثير إعلان نيون ضوئي متحرك 25.thumb.jpg.720e1a721cbc64cb6dee012d55b37101
بعد إزالة جميع المسارات المتداخلة سيكون التصميم قد أخذ شكلًا أكثر واقعية كلافتة نيون.
تصميم تأثير إعلان نيون ضوئي متحرك 27.thumb.jpg.98fb470592137b6a19ae99e98e3a35ff
حدّد المسارات التي تُشكّل جزءًا محددًا وامنحها ألوانًا برّاقة للحدود كالأزرق، الأحمر، الأصفر والأبيض.
تصميم تأثير إعلان نيون ضوئي متحرك 28.thumb.jpg.d931b11694c28146223ea0650d940feb
افصل الألوان المختلفة داخل طبقاتها الخاصة عبر استخدام القائمة:
Select > Same > Stroke Color
ثم انسخ التحديد وألصقه في المقدمة. وضع الأجزاء التي ستكون متحركة في طبقات خاصة بها كالعناصر التي تُكَوِّن الصواريخ الثلاثة.
تصميم تأثير إعلان نيون ضوئي متحرك 29.thumb.jpg.331c5aa4f059cd7baa97be89f7825a89
اذهب إلى القائمة:
File > Export
وضع نوعية الملف PSD Photoshop وتأكّد من تفعيل خيار Write Layers.
تصميم تأثير إعلان نيون ضوئي متحرك 31.thumb.jpg.0080903d00db33676657d39428be8694
افتح الملف الذي تم تصديره من برنامج الإليستريتور في برنامج الفوتوشوب ووسِّع حجم العمل قليلًا. لوِّن الخلفية بالأسود وأضف خامة جدار الطوب.
تصميم تأثير إعلان نيون ضوئي متحرك 32.thumb.jpg.61f499b39c8e5441e60678a7089fd61e
حدّد كل طبقات عناصر لافتة النيون ثم اضغط 

الكود:
CMD+J

 لمضاعفتها ثم اضغط 

الكود:
CMD+E

 لدمجها في طبقة واحدة. أعِد تسمية هذه الطبقة 'Off'.
تصميم تأثير إعلان نيون ضوئي متحرك 33.thumb.jpg.013647f9966de3215a1afd8e2c0e953f
أضف سلسلة من أنماط الطبقة لجعل هذه الطبقة تبدو كالأنابيب بدون إضاءة، أي (تراكب لوني) Color Overlay، (توهج داخلي) Inner Glow و (الظلال) Drop Shadow.
تصميم تأثير إعلان نيون ضوئي متحرك 36.thumb.jpg.071b0d9fcd9d072ad4c0a622ea37073b
ضع هذه الطبقة أسفل جميع الطبقات بحيث لن تكون ظاهرة أثناء إضاءة العناصر وستظهر أكثر في العناصر المتحركة حيث ستنطفئ هذه العناصر عدة مرات.
تصميم تأثير إعلان نيون ضوئي متحرك 37.thumb.jpg.7c0aabd467b04b7af3c4f56f3753a8a0
شَغِّل طبقة النيون الأولى عبر سلسلة من أنماط الطبقة. أضِف التوهُّج الداخلي لإضافة الأبيض البرّاق إلى المركز، والتوهُّج الخارجي لإطلاق الهالة الملونة، تليها المزيد من الظلال لتراكب التوهُّجات بأحجام مختلفة.
تصميم تأثير إعلان نيون ضوئي متحرك 42.thumb.jpg.bdc813dd1331b20235c194ad95b3ff7b
كل هذه الأنماط للطبقات تُنتِج تأثيرًا واقعيًّا إلى حد كبير مشابهًا لإضاءة النيون وتأثيرات التوهُّج والتفاعل مع خلفية جدار الطوب.
تصميم تأثير إعلان نيون ضوئي متحرك 43.thumb.jpg.9afba18e2147756647d9ca87476b3d15
انسخ وألصق نمط الطبقة إلى الطبقة التالية ثم عدّل إعدادات التوهُّج حتى تناسب لون العنصر.
تصميم تأثير إعلان نيون ضوئي متحرك 44.thumb.jpg.8e8f28b0c626fdf3ae00ebd2f073844e
وفّر الوقت عبر نسخ نمط الطبقة إلى باقي الطبقات التي تحمل ذات اللون.
تصميم تأثير إعلان نيون ضوئي متحرك 45.thumb.jpg.c6f6f90d77b7e26ae9395080caa600a2
لافتة النيون ستبدو رائعة عند الانتهاء من وضع كافة أنماط الطبقات ولكننا سنضيف بعض الحركة على التصميم.
تصميم تأثير إعلان نيون ضوئي متحرك 46.thumb.jpg.01e3a765867efc9e92ac6c626bfa5d55
اجمع عناصر كل صاروخ معًا بحيث سيكون من السهل تشغيل وإيقاف أي صاروخ أثناء الحركة.
تصميم تأثير إعلان نيون ضوئي متحرك 47.thumb.jpg.32eb338b00af951840737c53022bf33a
أظهر لوحة Timeline من قائمة Window ثم أنشئ إطار جديد New Frame Animation.
تصميم تأثير إعلان نيون ضوئي متحرك 48.thumb.jpg.c0c4347767c34816538f46c19f2676d4
في هذا الإطار الأول ستكون اللافتة متوقفة عن العمل لذلك سنُظهر فقط الطبقة الداكنة مع خلفية جدار الطوب. عدّل المدة الزمنية لهذا الإطار الأول إلى ثانية واحدة.
تصميم تأثير إعلان نيون ضوئي متحرك 49.thumb.jpg.4656b619be29353692a2f61994dc515c
أضف إطار جديد تظهر فيه أول طبقة نيون. لا تضف أي زمن لظهور هذا الإطار وبذلك سيظهر هذا الضوء على الفور.
تصميم تأثير إعلان نيون ضوئي متحرك 50.thumb.jpg.5660350e4c9f39a67bcafb865aa9ded1
أضف إطارين بعدها بدون مدة زمنية لإضافة الأضواء الحمراء والزرقاء بحيث ستضيئ اللافتة تباعًا بسرعة.
تصميم تأثير إعلان نيون ضوئي متحرك 51.thumb.jpg.7630200a030d12214f78f50967bd2e96
في الإطار التالي أظهر طبقة الصاروخ الأول مع جعل المدة الزمنية لعرض هذا الإطار ثانية واحدة.
تصميم تأثير إعلان نيون ضوئي متحرك 52.thumb.jpg.9d00c02801df2e7c794598d0bfa0202a
في الإطار التالي أخفِ الصاروخ الأول وأظهر الثاني لإعطاء الانطباع عن حركة الصاروخ.
تصميم تأثير إعلان نيون ضوئي متحرك 53.thumb.jpg.6e2333103e448500d0382d09376127cf
أضف إطار جديد للصاروخ الثالث من أجل إظهاره وإخفاء الصاروخ الثاني.
تصميم تأثير إعلان نيون ضوئي متحرك 54.thumb.jpg.30b85efdb3c38de357f4b6d71757a04a
ضاعف هذه الإطارات الثلاثة الأخيرة لتُطيل مدة الحركة. أو بدلًا من ذلك يمكن جعل هذه الطبقات الثلاثة تضيء باستمرار إلى ما لا نهاية بدون وجود الطبقة الأولى للافتة المتوقفة عن العمل.
تصميم تأثير إعلان نيون ضوئي متحرك 55.thumb.jpg.6760e1aecb2d434e77441d0d96684a47
قم بتصدير العمل كملف GIF من خلال Save for Web أو أرسله إلى برنامج تعديل فيديو لتصنع حركة مستمرة أفضل.
تصميم تأثير إعلان نيون ضوئي متحرك Pizza-Planet.thumb.gif.756c5d751987525945308e8062d30b0c

منقول


تصميم تأثير إعلان نيون ضوئي متحرك Aoia10
الرجوع الى أعلى الصفحة اذهب الى الأسفل
El Desha El Hlawany1
رئاسة فريق التصميم 

El Desha El Hlawany1

ذكر
القوس
عدد المساهمات : 803
نقاط النشاط : 942
السٌّمعَة : 52
بلد العضو : تصميم تأثير إعلان نيون ضوئي متحرك Egypt10
العمر : 24

تصميم تأثير إعلان نيون ضوئي متحرك Empty
مُساهمةموضوع: رد: تصميم تأثير إعلان نيون ضوئي متحرك   تصميم تأثير إعلان نيون ضوئي متحرك Emptyالأحد أغسطس 22, 2021 1:29 pm

تسلم علي الشرح :)
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://egyptian-cafe.123.st/ متصل
 
تصميم تأثير إعلان نيون ضوئي متحرك
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى الابداع العربي ::  أكاديمية الفنون ::  أكاديمية الفنون :: دروس الفوتوشوب-
انتقل الى:  
جميع الحقوق محفوظة لمنتدى الإبداع العربي 2020