قراءة الالوان والمقاسات للاستخدام فى الكود

الدرس الاول : قراءة الالوان والمقاسات للاستخدام فى الكود

التصميم لشكل الموقع

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

نسخ الالوان من التصميم

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

قراءة المقاسات من التصميم 

لقراءة المقاسات والابعاد نستخدم اداة Ruler Tool ويمكن استخدامها كما فى الصوة
 
 
وتسخدم عن طريق الضغط على بداية المسافة المراد قياسها والسحب حتى نهاية المسافة 
ويتم قراءة القياسات كما بالصورة
 
 
اذا كنت تقيس بشكل افقى تقوم بقراءة Wعلى انها المسافة
واذا كنت تقيس بشكل رأسي تقوم بقراءة ال H على انها المسافة
لا حظ ان المسافات هنا بالبكسل 
اذا كانت غير ذلك قم بالضغط على CONTROL + K
ثم Units & Rulers
واجعل Ruler بوحدة Pexels
 
 

اشترك فى القائمة البريدية

عن الكاتب

شارك على وسائل التواصل

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

1 + 3 =