Cyber Monday Sale Save up to 40% off unlimited courses, tutorials and creative assets. Cyber Monday Sale! Save Now
Advertisement
  1. Web Design
  2. Kids

تصميم مواقع الانترنت للاطفال (مبدتئين): الصور

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: CSS Layout
Web Design for Kids: Design Basics

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

مرحبا بكم في الجزء السابع من سلسلة تصميم مواقع الانترنت للاطفال(مبدتئين) الصور كل ما تريد ان تعرفه

لقد اضفنا عدة صور الى موقع (tuts+ town) "المدينة"  خلال هذه السلسلة لكننا لم نعطى الشرح المفصل للموضوع بعد  في هذا الدرس سنضيئ على اكثر انواع الصور انتشارا على الانترنت و بعض تقنيات التعديل عليها

لا تنسى بامكانك طرح اي سؤال علينا في قسم التعليقات اسفل المقال

الصور على الانترنت

جميعنا نستعمل الصور خلال تصفحنا مواقع الانترنت في موقعنا (tuts+ town) "المدينة"  لقد استعملنا اربع صور خلال الدورة بامكاننا اضافة الصور في ملف (html) "هتمل"  و تحديد االحجم و الموضع باستعمال (css) "سي اس اس"

هناك العديد من الامور للتفكير بها خلال استعمال الصور في مواقع الانترنت مثل اي صيغة اي هي الافضل للاستعمال , من اين احصل على الصور المناسية و كيف استعمل الصور بالشكل الانسب

خلال هذا الدرس سنطبق التاثيرات و الامثلة على الصورة التالية "خريطة للمدينة"(map of tuts+ town)

"خريطة المدينة" (tuts+ town map)

انواع الًصور

اكثر انواع الصور شيوعا على الانترنت (jpeg) " جي بيغ ", (png) "بي ان جي" ,و (svg) "اس في جي" لنتحدث عن هذا الانواع بالتفصيل

(jpeg) "جي بيغ"

(jpeg) "جي بيغ" هي صورة تنتهي باحد الصيغ التالية (.jpeg) او (.jpg) هذه الصور هي الاكثر استعمالا على الويب

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

(png ) "بي ان جي "

(png) "بي ان جي" هي صورة تنتهي بالصيغة التالية (.png) في حين صور (jpeg) "جي بيغ"  ستتيح لك جحم ملف صغير صور (png) "بي ان جي" ليست كذلك الصور بهذه الصيغة تبدو واضحة و محددة التفاصيل و مشابهة للصورة الاصلية لكن في مقابل جودة الصورة حجم الملف سيكون اكبر من مثيله في صور (jpeg) "جي بيغ"

 تعتبر صور (png) "بي ان جي" جيارا جيدا للصورة الصغيرة المدمجة, النصوص و الايقونات ذات الحجم  الصغير في الاساس  و تتيح صور (png) "بي ان جي" خاصية الخلفية الشفافة على عكس صور (jpeg) "جي بيغ"

(svg) "اس في جي"

(svg) "اس في جي" هي صور يمكن تغيير حجمها الى الاكبر او الاصغرمن دون  خسارة في دقة الصورة و جودتها كما هي الحال في صور (jpeg) "جي بيغ" و (png) "بي ان جي" . صور (svg) "اس في جي" تحفظ بصيغة (.svg) وتستعمل بشكل خاص في رسوم  التصميم الجرافيكي و تصاميم الشعارات

جميع صور مشروع (tuts+ town) "المدينة"  هي من نوع (svg) "اس في جي" ! بالعودة الى ملف (css) "سي اس اس" الخاص بمشروعنا و نغيير ال widthلاي صورة الى 1000px سيجعل الصور كبيرة و واضحة المعالم

الصورة على اليمين هي صورة (svg) "اس في جي"  وتبدو اكثر وضوحا

من اين احصل على الصور المناسبة

هناك العديد من الصادر المفيدة على الانترنت للحصول على صور مجانية للاستخدام

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

من الضروري دائما التحقق من تصريح الاستخدام (الاذونات) , للان سنتكلم عن بعض الخيارات التي تقدم صور محانية و متاحة للاستخدام .

  •  cupcake : يتيح مجال واسع من الصور المعدة بشكل جيد  عندما تجد طلبك انقر رابط (download high res) "التنزيل بجودة عالية" قس بتسمية الملف وحفظه على حاسوبك
  • fancycrave : موقع اخر يقدم خدماته بشكل مجاني بالكامل ويحوي على مجموعة صور رائعة للاختيار منها للحصول على الصور ببساطة اضغط رابط (download) "تنزيل" و قم بالحفظ في مجلد المشروع
  • للحصول على صور (svg) "اس في جي" موقع icomoon يحوي العديد من الصور للاختيار منها قم بتحديد الصورة بالضغط عليها واختر (cenerate svg) "توليد" من اسفل وايسر الصفحة ثم اضغط (download) "تنزيل"

تعديل الصور

العديد من المصممين يستعملون ادوات تعديل على الصور  مئل (photoshop) "فوتوشوب" للقيام بتغيير صورهم قبل استعمالها في مواقع الانترنت التعديلات ممكن ان تشمل تعديل الالوان التخلص من الظلال او اقتصاص الصورة

معظم انظمة التشغيل تملك برنامج بامكانه القيام بتعديلات بسيطة على الصور  (preview) هو مثال جيد اذا كنت من مشغلي نظام (Mac) "ماك" حيث يتيح تغيير حجم الصورة الاقتصاص و تغيير صيغة الصورة للوصول للبرنامج يمكنك القيام بالبحث على جهاز الحاسب باستعمال (magnifying glass) "عدسة التكبير" في اعلى و ايمن الشاشة او فتح الصورة بالضغط عليها مرتين ومن المرجح ان يكون (preview) هو برنامج العرض الافتراضي للصور

في نطام تشغيل (windows) "ويندوز" برنامج (photo viewer) "عارض الصور" او (paint) "الرسام" يستعملان لعرض الصور والقيام بتعديلات بسيطة عليها

الاقتصاص

 الاقتصاص  يعني ازالة الاجزاء الخارجية الغير ضرورية  للصورة

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

التعديل مع (css) "سي اس اس"

تمكن (css) "سي اس اس" من القيام بعدد من التعديلات مثل تعديل حجم الصورة او تطبيق عدد من التاَثيرات مثل جعل الصورة باللون الاسود او الابيض او جعل الصورة ذات شفافية او نعديل مستويات الاضاءة و غيرها 

التدرج الرمادي

لتحويل الصورة الى ابيض و اسود باستعمال ال "سي اس اس" (css) نطبق خاصية (filter)

ضمن الخاصية (filter) نختار (grayscale) "تدرج رمادي" و نحدد نسبة مئوية للتاُثير

لناخد نظرة سريعة على (css) "سي اس اس" سيحول الصورة بشكل كامل الى ابيض او اسود

الشفافية

الشفافية تعني جعل شيئ شفاف او يمكن النظر من خلاله  خاصية الشفافية تاخد القيم من 0  الى  1  حيث  0  تعني شفاف بالكامل -غير مرئي-  و 1  تعني غير شفاف نهائيا القيم بين 0  و  1 تعطي قوة مختلفة من الشفافية

على سبيل المثال تطبيق شفافية  opacity : 0.5  على صورة سيعطي التأثير التالي

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

الضبابية

بالامكان اضافة تاثير الضبابية الى الصورة باستخدام (css) "سي اس اس" ضمن خاصية (filter) ادخل (blur) متبوعة بقيمة ب (pixel)

كلما ازدادت القيمة المدخلة ازدادت ضبابية الصورة

ملاحظة : للاطلاع على كامل تاثيرات (css) "سي اس اس"   تابع هنا فقط اضغط على رابط ال (css) "سي اس اس" لاي تعليمة لمعرفة المزيد

الخاتمة

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

في الدرس القادم سنناقش اساسيات التصميم حيث سنتحدث عن استعمال العناصر التي قمنا بوضعها على الصفحة

نراكم قريبا !

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.