ترجمة درس كيفيه تصميم الايقونات لاصدارات وندوز الذي طلبه the gladiator

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

مقدمه:
ان ذهذه الصفحات لا يمكننا ان نعتبرها درسا بمعنى الكلمه و لا تعتبروا ايا مما سيرد لاحقا بمثابه قواعد عليكم اتباعها حرفيا عند القيام بالتصميم بل هي اشبه ما تكون بخطوات اوليه يمكنكم اخذها بعين الاعتبار عند تصميم الايقونات الخاصه بكم.
الخطوة الاولى:
اولا عليكم القيام بعمل سكتش او رسم اولي على الورق للتصميم الذي تريدونه حيث يساعدكم هذا المخطط البسيط في تطبيقه و رسمه على الكمبيوتر.
لكن هناك امور يجب الانتباره اليها قبل البدء بالتصميم :
1- علينا ان نحدد نوعيه الايقونات او الازرار التي نريد تصميمها فهل ستكون عباره عن ايقونات بحجم 16*16 على شكل glyphs : اي بها صور رمزيه مثل تلك القريبه من زر البدء في الوندوز؟
start هل ستكون هذه الايقوانت او الازرار بمثابه مجموعه كامله ام انها ازرار مختلفه لشاشه الكمبوتر
(desktop) ان كنتم على وشك البدء بعمل مجموعه كامله عليكم تحضير انفسكم لتصميم 40-50 ايقونه على الاقل . اما ان كانت فقط لشاشه الكمبوتر او desk top فكل ما سيهمكم هنا هو ايقونات التاليه:
my computer
Recycle bin و يهمنا زر تعبئه و تفرغه المهملات من السله
Network neighborhood
My document
وهذه كلها ايقونات تظهر على شاشه الكمبيوتر

الخطوه الثانيه:
بعد الانتهاء من الخطوة الاولى و نكون هنا قد حددنا نوع الايقونات و عددها ننتقل الى التصميم الفعلي للايقونات او الازرار كبدايه عندما نقوم بالتصميم علينا نجعل حجم اللوحه 128*128 بكسل

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

على اي حال يجب ان نراعي عدم المبالغه باضافه التفاصيل ان القياس الذي نعمل عليه
وهو 128*128 بكسل يعتبر كبيرا جدا بالنسبه للازرار و الايقوانت بحيث نجد انفسنا نغرق باضافه التفاصيل الى التصميم لكن علينا ان نتذكر اننا سنغير حجم التصميم الى الاصغر بعد الانتهاء من التصميم وبالتالي فان اغلب التفصيلات التي اضفناها سيتم حذفها او انها ستتلاشى مع عمليه التصغير خاصه اذا كان التصميم لايقونه رمزيه مثل التي تكلمنا عنها في البدايه glyphs .
علينا ايضا ان نراعي اننا لن نستخدم نصوصا في الايقونات حيث ان اغلب النصوص لا يمكنها ان تتأقلم مع عمليه التصغير وذلك ينطبق عل اغلب انواع الخطوط و الحاله التي يمكننا معها استخدام النصوص هي عندما نقوم بعمل تنعيم للحواف او ما يسمى antialiasing حيث نقوم فيها بازاله حواف الرسم فتبدو في نهايه المطاف كل الحواف ناعمه بلا نتوءات. لكننا لن نرغب بعمل تنعيم الحواف لو رفنا ان الايقونات يجب ان تكون شفافه و ان القيام بتنعيم حوافها سيجعلها تبدو ذات اطراف غير واضحة على طول حواف الايقونه بمعنى اخر فان كل حوافها ستبدو و كانها غير مقصوصه جيدا و غير واضحة مما سيسيء الى التصميم ككل.

لاحظوا الرسم للايقونات و لاحظوا حجمها :
سنلاحظ ان العديد من التفاصيل قد بدأت تختفي عندما قمنا بتصغير الحجم فمثلا ان الخلفيه الزرقاء في البداي كانت تشبه القماش المخطط مثل الشبك عندما تم تصغيرها الى حجم 32*32
بينما انه في حجم 16*16 اصبح من الصعب ان نعرف ماهيه الايقونه او التفاصيل التي بها كنوعيه هذه الخلفيه الزرقاء

و هنا مثال على النص حيث يبدأ النص يبدو بشكل ضبابي غير واضح عند حجم 32*32 و مع بعض انواع الخطوط فان الاحرف ستبدو متشابه اما عندما وصلنا الى حجم 16*16 فان النص اصبح ضابابيا جدا بحيث تصعب قرائته.

الخطوة الثالثه:
على الرغم من ان هذه الخطوة قد تؤدي الى الحد من مهاراتكم و لا تترك لكم حريه الابتكار كثيرا الا انه علينا ان نسأل انفسنا نسأل انفسنا ماذا ستمثل هذه الايقونه؟ و هل من الممكن ان نعرف من النظر اليها ما الذي تمثله؟ هل سيعرف المستخدم فورا ما تمثله ايقوناتكم عندما يراها؟

في الصورة A في الاسفل نلاحظ وجود قرص CD بامكان هذا الرمز ان يعبر عن اي نوع من الاقراص او السيديات حتى انه بامكانها ان تعبر عن CD drive او مشغل الاقراص .
بينما في الصورة B نلاحظ وجود سماعات الاذن و بالامكان ان نستخدم هذا الرمز لاعداد الاصوات او التحكم بالاصوات في الكمبيوتر volume
الان لدينا الصورة C و بامكاننا الان ان نقول ان هذه الايقونه تمثل شيئا يتعلق بالموسيقى او اقراص اغاني وما شابه.

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

بالنسبه للايقونات ذات الرموز او ما اطلقنا عليه glyphs
1- فنقترح ان يكون حجم التصميم 16*16 بكسل
2- ان ترسم بكسل تلو البكسل
3- و لا ينصج بعمل تنعيم لها Anti alias لان حجمها صغير جدا بحيث ان اي عمليه تنعيم sستؤدي الى جعلها ضبابيه او غير واضحه .
نرى في الاسفل glyphs ايقونه رمزيه تم تكبيرها لم نقم بعمل تنعيم لها و تم رسمها بكسل تلو بكسل لهذا فهي واضحه و نظيفه الحواف عندما نراها بحجمها الحقيقي .
لو شعرتم انكم بحاجة لعمل التصميم بحجم اكبر ثم القيام بعمليه تصغيره في النهايه فاستعملوا اعاده تحديد حجم البكسل من البرنامج و بهذه الطريقه تبقى الصورة مقسمه الى بكسلات.

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

اتمنى ان يكون الدرس سهل وواضح و خفيف على المعده وان اكون قد افدتكم به
لا تنسونا من دعائكم
اختكم
Moon Ray

مشكوووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووورة .. فعلاً هذا ما أردته واستفدت كثيراً من الشرح السهل والواضح وبارك الله فيك والله ييسر لك أمورك إن شاء الله ولكن عندي سؤال ..

هل يشترط أن تكون الصورة بإمتداد gif?

وجزاك الله خير

السلام عليكم
مشكور يا موون راي على الترجمة الحلوة
وزي ما قلت درس خفيف وحلو

جزاك الله خير اخت moon ray على هالشرح الوافي ...

مشكوره اختي Moon Ray على الترجمه
و الشرح اكثر من رائع :أفكر:
و جزاج الله خيرا و نتمنى انشوف دروس ثانيه

=-- تحياتي --=