الخميس، 30 مايو 2013

تقنية التصميم بالفكتور (vector)



لفهم الفيكتور يجب ان نفهم البكسل.فما هو البكسل؟
     البكسل هي كلمة انجليزية (pixel) وفي الاصل مكونة من كلمتين صورة=picture وعنصر=element اي عنصر الصورة او وحدة الصورة لان وضوح الصورة تقاس بالبكسل فكلما كان عدد البكسل كبير كانت الصورة اكثر وضوحا والعكس صحيح اي ان الصورة تبدأ بفقدان ملمحها وتضهر على شكل مربعات صغير.وهناك برامج تعديل الصور تحت وحدة البكسل مثل photoshop ، gimp ...
وتوجد عدة صيغ لحفظ صورة البكسل منها png,jpg,tiff,gif.......

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


وقد اصبح للبكسل فن قائم بذاته ويسمى فن البكسل(pixel art) الذي ابدع فيه هوات التصميم فاخرجوا لوحات فنية رائعة.

    الان وبعد ان عرفنا معنى البكسل ناتي الى معرفة تقنية التصميم  بالفكتور(vector).فماهي تقنية الفكتور؟
    تم تطوير تقنية الفكتور او ما تسمى بالعربية رسم المتجهات بعد المشاكل الكثير التي واجهت المصممين في تقنية البكسل. تقنية الفكتور تعطي ثبات في الدقة حتى لو كبرنا الصورة مئات المرات حيث تكون المنحنيات و الاشكال  ككائنات رياضية اي ان الحاسب يقوم بمعادلات رياضية على الاحداثيات (y,x) فالمتجهات تصف الصورة حسب عناصرها الهندسية بناء على ذلك، يمكن تغيير حجم ولون وموقع الصورة المتجهة أو تغيير حجمها تكبيراً أو تصغيراً، دون أن تتأثر جودة التفاصيل أو الوضوح.ومن مميزات الفكتور التعديل في التصاميم بسيط للغايه وترجع هذه البساطه إلي سهولة التعديل في خصائص الخطوط والكائنات المستخدمه في التصميم وتكون اكثر بساطه وسهوله من التعديل في الصور النقطيه عن طريق البكسل.

مجالات استعمال التصميم بتقنية الفكتور 
تعتبر تقنية الفكتور من احسن التقنيات لتصميم و رسم الشعارات (logo) و الانفوجرافيك   
وانشاء الصور المتحركة كالمنغا

صورة توضيحية تبين الفرق بين البكسل و الفكتور


ثلاثة اعمال رائعة بتقنية الفيكتور


سيارة  
فنجان قهوة

منزل 

صورة فتاة تبتسم مصمم بواسطة برنامج inkscape غاية في الدقة

صورة فتاة تبتسم مصمم بواسطة برنامج inkscape 
لقد ابدع المصمم في تجسيدها
https://vk.com/wall-21398398?owners_only=0&q=%23Modeling
مصدر https://vk.com/wall-21398398?owners_only=0&q=%23Modeling

الأحد، 26 مايو 2013

ما هو برنامج inkscape؟



   هل انت مولع بالرسم التقني ؟هل انت من هواة التصميم و الجرافيك؟هل تعبت من البرامج التجارية ومن اثمانها الباهضة؟ تحب تصميم الشعرات والايقونات وتبحث عن برنامج غير مكلف مع مزايا رائعة وقدرة عجيبة في الرسم هل هل هل ...

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

برنامج inkscape ؟

   بكبست زر تسطيع ان تصمم كل مايجول بخيالك عن طريق هذا البرنامج.inkscape برنامج مفتوح المصدر ومجاني له قدرات عجيبة في الرسم بتقنية الفيكتور و الجرافيك بصورة رائعه و مشابه لحد كبير الى برامج Illustrator, CorelDraw, or Xara X ومنافس كبير لها لكثرة استعماله من طرف المصميمين و هواة الجرافيك لسهولة العمل عليه حيث يجد المصمم كل مايحتاجه للعمل على تصاميمه والتعديل عليها .

بعض مزايا برنامج inkscape

- مفتوح المصدر اي انه مجاني بالكامل
-يستعمل تقنية الفكتور بنسق(svg:scalable vector graphics) في انشاء الرسومات والتصاميم
- يشمل غلى واجهة مستعمل(user interface) واضحة وسهلة الاستعمال مع ادواة رسم بسيطة مثل(رسم الاشكال كالمربعات والدوائر،رسم كل انواع الخطوط والتعديل عليها،الكتابة على الرسومات بكل الخطوط...الخ)
- يشمل على تاثيرات رائعة تسمح لك بإنشاء تصاميم و رسومات بشكل اسرع
- يمكن استراد و توريد تنسيقات مثلPOSTSCRIPT، PNG،JPEG،EPS،TIFF والكثير من التنسيقات
- يدعم تقنية XML و CSS بشكل افضل
    كل هذا واكثر فان البرنامج يعمل على اكثر من بيئة اي انه متوفر لكل من انظمة التشغيل التالية windows,mac,linux

واحهة برنامج Inkscape



 اطلق العنان لخيالك وابدأ التصميم.

من الموقع الرسمي للبرنامج يمكنك تحميل برنامج Inksacpe 

الجمعة، 10 مايو 2013

ماهي خطوات تصميم انفوجرافيك ناجح؟

       اسئلة عديدة ومناقشات كثيرة ودراسات في تفسير كيفية اخراج التصاميم الإنفوجرافيكية سواء كانت تفاعلية أم صورية ثابته , في دراسة مبسطة و شرح تقديمي قامت بها شركة Cloumn Five Media عن المراحل و الخطوات الصحيحة في تصميم انفوجرافيك ناجح , الجدير بالذكر ليس هناك خطوات او مراحل محددة في اخراج التصاميم الإنفوجرافيكية لماذا ؟.. ذلك لإختلاف المشاريع المنجزة و الاهداف المرجوة عن طريق هذه التصاميم . 

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

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

2- البحث 
بعد التوصل إلى "الفكرة" ستحتاج إلى مواد تساعدك في بناء تلك الفكرة ومنها استخدام محركات البحث ك ( جوجل , ياهو , ام اس ان , التافيستا ) للوصل إلى اكبر عدد من البيانات و المعلومات الداعمة لفكرة المشروع, ما يتوجب عليك مراعاته اثناء عملية البحث هو حدوثية المراجع ومدى مصداقيتها , تحديد الروابط المرجعية للصفحات أو الدراسات المستخدمة و المستنبط منها البيانات التي سيتم استخدامها في بناء بند معين في التصميم مثال : " اعداد مستخدمي الانترنت في دول شرق اسيا وافريقيا لعام 2011 " .

3- البيانات
ادعم التصميم الانفوجرافيكي ببيانات موثقه في دراسات أو كتب منشوره مسبقاً مع مراعاة مدى مصداقية المرجع وحداثته لدعم الفكرة بارقام و احصائات مدروسة بشكل موثق , ابحث عن المواقع التي تستخدم مفهوم البيانات المفتوحة ومنها Data.org  Data.gov , data.worldbank.org أو opendatafoundation.org .

4- الفلترة
بعد الانتهاء من توفر المواد البيانية و المعلومات المستخدمة قم فلترة البيانات واستخراج فقط المطلوب و الاساس حتى لا تشكل لك اي حشو أو طمس للفكرة , استخدم فقط البيانات المتعلقة بالمشروع و المتج النهائي و اجعل منها اساس بناء الفكرة .

5- التنسيق
قم باستخدام البرامج المجانية المتوفرة سواء عبر الانترنت أو في جهازك كبرنامج ( اكسل , بوربوينت , وورد ) وغيرها من البرامج التي تساعد في بناء المحتوى بشكل منسق و مرتب . 


6- التخطيط
قم بعمل تخطيط مبدئي عن المشروع , باستخدام برامج عديدة عبر الانترنت كموقع DIGRAME.LY أوMINDMAP , ان لم تستطع استخدام هذه البرامج قم باستخدام الورقة و القلم ورسم التصور المراد عمله حتى وان كنت ضعيف في الرسم , الفكرة هي وضع التصور الصحيح و السليم لإبراز و عرض الفكرة في مضمون سهل و مبسط , أيضا قم باستخدام مواد فعلية في رسم التصور كاستخدام التصوير الضوئي لمبنى أو صور متوفرة عبر الانترنت لدمج الأفكار و التصور في قالب واحد ليتم التعامل مع المحتوى في الإخراج الفني لاحقاً .      

7- الأدوات
في هذه المرحلة سيتم تحديد الادوات المستخدمة في الاخراج الفني واستخدام برامج التصميم كـ الفوتوشوب وغيرها من برامج التصميم , اثناء اختيار الأدوات يتوجب عليك دراسة المشروع ككل و اختيار الوجهة النهاية وذلك يندرج في الخطوة السابقه " التخطيط " يجب تحديد لأي وجه ستقوم باخراج التصميم الانفوجرافيكي سواء كان الانترنت أو مطبوع ( بوستر , رول آب ) . يندرج ايضا في قائمة الأدوات التقنيات البرمجية المستخدمة في تطوير تصاميم تفاعلية ذكية ومنها يتم مراعاة اللغات البرمجية المستخدمة ومنهاHTML5 و  D3للمواد التفاعلية الديناميكية و CSS3 في تحديد جهوزية تصميم قالب متوافق مع المتصفحات بشكل عام  . تحتوي المواد التفاعلية الذكية على رواج أكبر من غيره ويستخدم في التدريب و التطوير واعطاء لمحه عامه ليشارك بذلك تفاعل المستخدم النهائي , فهي تعد أحد أقوى المواد الانفوجرافيكية الهادفه ولها اصداء اكبر عن غيرها في اخراج البيانات بشكل مرئي تفاعلي هادف .     

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


 المصدر

الاثنين، 6 مايو 2013

انفوجرافيك يوضح معنى الانفوجرافيك


ماهو الانفوجرفيك infographicM؟


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



وهذه بعض الاعمال في الانفوحرافيك


انفوجرافيك متحرك
ولمشاهدة الانفوجرافيك اليك الرابط التالي

Brazilian Smoke Squadron