البحث في الموقع

يُدرك كل مصمّم جرافيك أنّ مهمّة اختيار تركيب ومزج الألوان وتناسقها هي واحدة من أهم أجزاء عمليّة التّصميم، سواء أكان ذلك التّصميم موجّه للطّباعة أم للعرض على شبكة الويب. لا يوجد أي تركيبة ألوان عالميّة وموحّدة بإمكانها أن ترضي جميع العملاء. بالنّسبة لبعض المصمّمين فإنّ عمليّة تركيب الألوان هي مسألة التّجربة وتحديد الأخطاء ثم التجربة مجدّدًا وهكذا، إلى غاية الحصول على التّركيبة المناسبة، ولكن اعتماد هذه الطّريقة يعني إهدار الكثير من الوقت الثمين. الوقت الذي يُعتبر سلعةً هامة في عالم تصميم الجرافيك والذي يسير بخطوات متسارعة. إلاّ أنّه يُمكن التّقليل من ذلك الوقت عن طريق الاعتماد على بحوث ودراسات متخصّصة ومناسبة، وكذلك من خلال استخدام الذّوق الذي تتمتّع به كمصمّم أو حدسك السّليم تجاه الأنماط. كيف تفهم أساسيات عجلة الألوان Color Wheel قبل كلّ شيء، من المهم أن تعرف أساسيّات عجلة الألوان، ويجب على كلّ مصمّم أن يطّلع عليها عن ظهر قلب. الضّوء الأبيض هو مزيج من كل ألوان الطّيف، والتي تنقسم إلى ثلاث مجموعات أساسيّة هي: الأحمر، الأزرق والأصفر، ومن خلال المزج بين تلك الألوان الثلاثة بإمكانك أن تركّب أي لون تتخيّله ويمكن للعين البشرية أن تراه. وحتّى تكون قادرا على خلق تركيبات ألوان جميلة وجذّابة يجب عليك أوّلا أن تعرف عجلة الألوان Color Wheel، حيث سأحاول شرحها لك بطريقة سهلة خالية من التّعقيدات. الألوان الأحادية monochromatic colors تجعلك تستخدم لون واحد من مجموعة ألوان مختلفة، على سبيل المثال: بإمكانك استخدام تركيبة هذه الألوان لتصميم موقع معيّن : الّلون الأساسي الذي قمنا باستخدامه في الصورة السابقة هو الّلون الأخضر، الأخضر الفاتح (50% أبيض) والأخضر الغامق (50% أسود). واستخدام الألوان الأحادية monochromatic colors في التصاميم يضيف لها رونقًا واحترافية، فيكون التصميم بسيطًا لا تعقيد فيه (خاصة إذا كان التصميم يستخدم قليلا من الإضافات والتأثيرات إلا أن ذلك قد يجعل منه تصميما مملًا ومنفرًا. الألوان المكملة Complementary colors من أكثر تركيبات الألوان جاذبيّة هي تلك التي تُظهر التّناقض وتلفت الانتباه. وتنتج تلك النّوعية من خلال المزج بين الألوان التي تكون متقابلة في الدّائرة اللّونيّة، حيث تتميز بكونها ألوانا جريئة، مثيرة للاهتمام وجذّابة بصريا. تأكّد خلال تركيبك للألوان الخاصة بتصاميم عملائك أن تختار تلك التي تظهر بشكل جميل حين تقوم بمزجها، بعض التّركيبات سينتج عنها ألوانا جدّ صارخة، حاول أن تتجنّبها. الألوان التماثلية Analogous colors الألوان التّماثلية Analogous colors هي الألوان التي تصطف بجانب بعضها البعض علي عجلة الألوان الأساسية، وهي شبيهة بالألوان الأحادية monochromatic colors في كونها مناسبة جدا للتّصاميم المهنية والتّجارية، كما أنّها ملفتة للانتباه باعتبارها تضيف نوعا من التباين والجاذبية على التّصميم. الألوان التّماثلية سهلة الاستخدام ودائما تظهر بشكل جميل. الألوان المثلثية Triadic colors الألوان المثلّثية Triadic colorsهي ألوان مستقلة موجودة على العجلة والتي تشكل مثلّثا بمجرد الربط فيما بينها، ويتميز هذا النمط من الألوان في كونه يخلق نوعا من الجماليّة والتوازن. إرضاء العملاء باستخدام تركيبات لونية صحيحة ومناسبة كما ذكرنا سابقا فإنّه لا يمكننا إقناع جميع العملاء باستخدام نموذج ألوان معيّن، يجب أن تعرف أولا مؤسّسة عميلك (إذا كان التصميم مثلا خاص بمؤسّسته)، وقبل أي شيء آخر يجب أن تعرف ما تقوم به الشركة والمنتجات أو الخدمات التي تقدّمها، ذلك سيعطيك فكرة أولية حول نوعيّة الألوان التي ستختارها، وأيضا لا تنسى أن تطلع على مجموعة من تصاميم لشعارات ناجحة. المطاعم، الوجبات السريعة والمنتجات الغذائية بالنّسبة للشّركات التي تركّز على الغذاء والطعام، حاول أن تستخدم اللّونين الأحمر والأصفر بكثرة، لأنها تعتبر ألوانًا جذّابة وسهلة الالتصاق بذهن المتلقي (الشخص الذي يراه)، بالإضافة إلى أنه يُنصح باستخدام الألوان الحارة والصّلبة، لأن اللونين الأصفر والأحمر يحفزان على الشعور بالجوع من خلال تسريع عمليّة الأيض، الأمر الذي يؤدّي إلى فتح الشهية ورفع من نسبة الطلب على الأكل أكثر مما ينبغي، تجنب استخدام اللون الأزرق والأرجواني للمطاعم نهائيا، لأنها تعمل على التخفيف من شهية الأكل لا شعوريا. أجسامنا تتفاعل سلبيا مع اللون الأزرق والأرجواني، أما الأخضر والبني فهما لونين مناسبين للاسترخاء و الأطعمة غير الرسمية (casual) كالمقاهي مثلا، كذلك جرّب أن تستخدم الألوان المكمّلة والألوان المثلثية. هذه مجموعة من لوحات الألوان الجذابة والتي يمكن استخدامها للمطاعم، الوجبات السريعة والمنتجات الغذائية: مساحيق التجميل ومواد التنظيف هنا نختار الألوان التي تعبر عن الأنوثة، النعومة والنّظافة. ألوان الباستيل مثل الأبيض، الأرجواني، الأزرق الفاتح، والزهري الفاتح هي اختيار رائع يمكنك استخدامه. تجنّب الألوان الحارّة وغير الناعمة، كما بإمكانك استخدام الألوان الأحادية والألوان الحيادية لأنها تدل على النظافة والبساطة. هذه مجموعة من لوحات الألوان الجذابة والتي يمكن استخدامها لمساحيق التّجميل ومواد التّنظيف: المؤسسات الحكومية، المؤسسات العامة، المنظمات الحكومية وغير الحكومية عند قيامك بتصميم لإحدى المؤسّسات الحكومية، أو المؤسسات العامة أو لإحدى المنظمات، عليك أن تأخذ بعين الاعتبار أنها يجب أن تظهر كمؤسسات محترمة، جديرة بالثقة وذات كرامة. لذا اختر ألوانا تكون إيجابية وجميلة في نفس الوقت، كاللون الأخضر والأزرق. تمنح هذه الألوان الجميلة نوعا من الإيجابية وتعطي صورة عن المؤسسة أنها صلبة، قوية وجديرة بالثقة. المنظّمات الحكومية وغير الحكومية تفضل أن تستخدم الأحمر، الأبيض والأزرق في تصاميم شعاراتها مثل ما هو مستخدم في العلم الأمريكي وهي أيضا علامة على القومية والنزاهة. حاول استخدام الألوان الأحادية والتماثلية وقلل من استخدام الألوان المتباينة (الألوان المكملة). هذه مجموعة من لوحات الألوان الجذابة والتي يمكن استخدامها للمؤسّسات الحكومية، المؤسسات العامّة، المنظّمات الحكومية وغير الحكومية: الشّعارات أو التّصاميم الجرافيكية الخاصّة بالمؤسّسات التّعليمية، شركات التّأمين والمستشفيات أيضا تتبنّى ذات القاعدة. الفنادق، المنتجعات ومنشآت الضيافة الأخرى عند قيّامك بتصاميم تخص الفنادق والمنتجعات ركز على الشعور بالراحة، الاسترخاء والضيافة واختر الألوان الترابية والطبيعية. اللون البني، الأخضر والأزرق هي من أكثر الألوان التي توحي بالاسترخاء والهدوء، تجنب الألوان الصّارخة كما بإمكانك استخدام الألوان الأحادية monochromatic colors. لكن حاول أن تستخدم الألوان بحد أدنى. الأسود، الأبيض، الفضي والذهبي هي الأخرى اختيارات رائعة لتصاميم الفنادق والمنتجعات، خاصة إذا كانت من تصنيف خمس نجوم وكانوا يرغبون في الاستفادة من الترف والرقي. الخلاصة تعتبر الألوان طريقة جيدة لجذب انتباه المشاهدين، إلا أن استخدام الكثير منها سيصرف القرّاء، لذلك حاول التقليل قدر الإمكان من استخدامها واكتف فقط باستخدام من 2-4 ألوان. عمليّة مزج وتركيب الألوان ليست مجرّد عملية تتم حسب مزاج المصمم، وإنما تتم من خلال البحث والدراسة المتأنية، وكذلك من خلال معرفة أساسيات عجلة الألوان والتركيب، كلّ ذلك سيمكنك من إنشاء الآلاف من تركيبات الألوان الرّائعة والمبهرة. ترجمة -وبتصرّف- للدّرس Guide to Choosing Color Combinations When Building Sites For Clients لصاحبه James Richman. حقوق الصورة البارزة: Designed by Freepik.

يبدو الروبوت الخاص بك بشكل جيّد، لكن لونه الرمادي الافتراضي رتيب. في هذا الفصل ستتعلّم كيفيّة تطبيق خامات بلندر ومفاتيح الشكل لإظهار الروبوت. أرجوا متابعة السلسلة من بدايتها لفهم عملية تصميم هذا الروبوت منذ البداية. خامات بلندر بلندر لديه نوعان من الرندر أو التصيير (وهي عمليّة إخراج ومعالجة الصورة النهائية) مدمجين بداخله، الأوّل الرندر الداخلي الأساسي والرندر المسمى Cycles. عملية الرندر في بلندر هي تحويل المشهد ثلاثي الأبعاد إلى صورة أو فيديو ثنائي الأبعاد. في أعلى شاشة العرض 3D، تنقّل بين رندر بلندر ورندر Cycles. الآن لنضِف الخامات. في بلندر، الخامات تخلق صورة تخيّليّة عن عنصر ما بأنه مصنوع من مادة محددة. اختر Materials tab من Properties panel، ثمّ اضغط على زر New. اضغط على حقل Color لفتح قائمة اختيار الألوان color picker. غيّر اللون إلى أزرق جميل. أو وردي. أو بنفسجي. أو برتقالي. كما تحب! ثمّ افتح Settings واسحب اللون الأزرق إلى حقل لون العرض Viewport Color. الروبوت سيظهر الآن بالأزرق في شاشة العرض 3D. اضغط TAB للتعديل، ثمّ اضغط L لاختيار العينين، الرقبة، الذراعين واليدين. في قائمة الخامات، اضغط + وأشر لإضافة خامة جديدة إلى الروبوت. ثمّ اضغط على زر New. اختر الرمادي الغامق من color picker. اختر Assign لتعيين اللون على العناصر المختارة. أخيرًا، اسحب اللون الجديد من مجموعة الألوان إلى لون العرض Viewport Color الموجود أسفل Settings. قرّب المشهد إن احتجت. واختر دائرة العين. اضغط على + مرة أخرى، واضغط New. احتفظ باللون الأبيض واضغط Assign. اسحب اللون إلى لون العرض Viewport Color. اضغط مع الاستمرار على ALT + SHIFT واضغط RMB لاختيار طوق الرقبة وقاعدتها. اضغط + في قائمة الخامات ثمّ اضغط New. اختر الرمادي الفاتح ثم Assign. اسحب اللون إلى لون العرض Viewport Color. اضغط Tab لـ object mode. أيبدو جيدًا! مفاتيح الشكل Shape Keys سنقوم الآن بإضافة مفاتيح الشكل لتحريك الفم والرقبة. مفاتيح الشكل تَستَخدم نقاط عنصر لتعديل شكله. اختر قائمة Object Data من لوحة Properties. تحت Shape Key، اضغط +. هذا ينشئ مفتاح شكل جديد يسمى Basis. سنقوم بترك هذا وننشئ مفتاح شكل آخر بضغط + مرة أخرى. لقد أنشأنا الآن مفتاح شكل جديد، واسمه Key 1"". أعد كتابة اسمه إلى “Mouth”. اضغط Tab لتعديل الوضع واضغط Z. اضغط CTRL + TAB واختر حافة. من خلال الضغط مع الاستمرار على عجلة الفأرة، حرّك الفم ليكون ثلاثة أرباع منظور العنصر. ثمّ انقر RMB لتحديد أعلاه، آخر حافة للفم. اضغط NUM3 للتحويل إلى الرؤية الجانبية. ثمّ اضغط SHIFT + S واختر Cursor to selected، لتحريك المؤشر إلى الحافة المحددة. في أسفل قائمة 3D View يوجد قائمة Pivot Point. اختر 3D Cursor. اضغط L لاختيار الفم بالكامل. ثمّ قم بتدوير الفم على المؤشر 3D بضغط R، وX لتقييد حركته على محور X وادخل 20، ثمّ اضغط ENTER للتأكيد. اضغط TAB لتعديل الوضع واضغط Z للتحويل إلى العرض المصمت. حاول تجربة مفتاح الشكل الجديد بتحريك شريط Value الموجود تحت Shape Keys. اختر Basis، ثمّ اضغط + لإضافة مفتاح شكل جديد. واعد كتابة اسمه إلى Head"". اضغط TAB لتعديل الوضع واضغط L لاختيار الرأس، الرقبة، الفم والعينين. اضغط G للإمساك بالعناصر المحددة وZ لتقييد الحركة على محور Z فقط، ثمّ ادخل .2، واضغط ENTER للتأكيد. اضغط TAB للعودة إلى وضع العنصر، وقم بتحريك شريط Value في الاتجاهين لرؤية الرأس يتحرك للأعلى والأسفل. رائع، أليس كذلك؟ في الفصل القادم سنقوم بتحريك الذراعين. ترجمة – وبتصرّف – للمقال How to Model and Animate a Robot, Part 2: Blender Materials & Shape Keys لصاحبه Jared

ما نحتاجه لرسم شعار زهرة عن طريق برنامج إنكسكيب هو أداة الدائرة وأداة النص Text tool وأداة التحرير Node tool من شريط الأدوات، وأوامر قائمة المسار Path من الشريط العلوي وكلا من لوحة التعبئة والتلوين Fill and stroke ولوحة المحاذاة والاصطفاف Align and distribute والأمر Duplicate لنخرج بهذه النماذج المختلفة للشعار. خطوات رسم شعار الزهرة من شريط الأدوات الأيسر سنرسم دائرة بأبعاد متساوية بالضغط على Ctrl أثناء الرسم ونقلل شفافيتها Opacity من لوحة التعبئة والحدود. ملاحظة: إن لم تكن لوحة التعبئة والحدود موجودة في يمين الشاشة يمكنك إظهارها عن طريق الاختصار Shift+Ctrl+F أو من قائمة Object في الشريط العلوي. كرر الدائرة عن طريق تحديدها ثم بالزر الأيمن نختار Duplicate أو من لوحة المفاتيح نضغط الاختصار Ctrl+D، ثم نحرك الدائرة المكررة أفقيا مع الضغط على Ctrl أثناء التحريك للمحافظة على اتجاهها، إلى أن تتكون لنا بتلة الزهرة في شكل التقاطع بين الدائرتين. من قائمة المسار Path نختار الأمر Intersection لنحصل على شكل البتلة، مع كون البتلة محددة سنضغط عليها مجددا لتظهر أسهم التدوير وليظهر مركزها في وسطها، سنسحب المركز + إلى الطرف السفلي للبتلة مع الضغط على Ctrl أثناء السحب للمحافظة على اتجاهها. نكرر البتلة وندورها عن طريق أسهم التدوير إلى اليمين مرتين مع الضغط على Ctrl أثناء التدوير، ثم نكرر البتلة الجديدة وندورها مرتين مجددا، ثم نفعل الشيء نفسه مع جهة اليسار. حصلنا على الزهرة الأساسية من خمس بتلات، عن طريق التعديل عليها سنحصل على النماذج الخمسة للشعار. النموذج الأول نختار البتلة الأولى مع الثانية ونكررهما ثم من قائمة المسار سنختار الأمر Intersection لتنشأ لنا بتلة صغيرة نلونها بلون مخالف لنميزها عن غيرها. سنكرر نفس العملية مع بقية البتلات حيث سنختار البتلة الثانية مع الثالثة ونكررهما ومن قائمة المسار نختار أمر Intersection وهكذا نفعل الشيء نفسه مع البتلة الثالثة والرابعة، والرابعة والخامسة؛ حتى تنشأ لنا بقية البتلات الصغيرة. بعد أن حصلنا على شعار الزهرة المطلوب سنلونها حسب رغبتنا ليكتمل الشعار، وقد اخترنا هنا هذه القيم اللونية للبتلات الأساسية على ترتيبها من الأولى إلى الخامسة بعد جعل قيمة الشفافية 100: 9e9d24ff b9b82aff e0df79ff b9b82aff 9e9d24ff وهذه القيم اللونية للبتلات الصغيرة على ترتيبها من اليمين إلى اليسار: bd0026ff 9d0020ff 89001bff bd0026ff يمكنك نسخ القيمة التي تريدها ثم لصقها في خانة RGBA في تبويب التعبئة Fill من لوحة التعبئة والحدود أو اختيار القيمة اللونية التي ترغب بها. باستخدام أداة النص Text tool سنكتب اسم الشعار الذي نرغب به تحت الزهرة ثم سنحاذيها مع البتلة الثالثة (الوسطى) من لوحة المحاذاة والاصطفاف عاموديا، وبهذا نكون انتهينا من النموذج الأول. النموذج الثاني نحدد جميع أجزاء النموذج الأول عن طريق سحب مؤشر الفأرة حولها، ثم نكررها ونسحب النسخة المكررة إلى أحد جانبيه، ثم نتخلص من البتلات الصغيرة ذات التدرج الأحمر. نكرر البتلة الأولى ثم من قائمة المسار نختار الأمر Outset ثلاث مرات لتوسيع البتلة بنفس الشكل والأبعاد، ويمكننا تطبيق الأمر عن طريق الاختصار Ctrl+)، ثم مع بقاء التحديد للبتلة المكررة نختار البتلة الثانية ثم من قائمة المسار نختار Difference. سنفعل نفس الأمر مع البتلة الثانية والثالثة حيث سنكرر البتلة الثانية ونوسعها ثلاث مرات كالسابق ثم نختار المكررة مع البتلة الثالثة (الوسطى) ونتبع الأمر Difference. نفعل الشيئ نفسه مع البتلة الأخيرة مع البتلة الرابعة وكذلك بين البتلة الرابعة مع الثالثة (الوسطى). ستبقى زوائد للبتلة الوسطى، وسيظل هناك تقاطع بين البتلتين الثانية والرابعة في جزئيهما السفليين، وحتى نزيل القطعة الزائدة من البتلة الوسطى سنختارها ثم من قائمة المسار نختار الأمر Break apart لتجزئة البتلة ثم نحدد القطع الزائدة في الأسفل ونحذفه من زر الحذف في لوحة المفاتيح. للتخلص من التقاطع بين البتلتين الثانية والرابعة سنكرر البتلة الرابعة ونوسعها عن طريق الأمر Outset ثلاث مرات كما فعلنا مع سابقاتها ثم نختارها هي والثانية ومن قائمة المسار نختار الأمر Difference. سنكرر البتلة الأولى ونوسعها كسابقاتها ثم نختارها هي والبتلة الرابعة ونختار الأمر Difference للتخلص من القطعة الزائدة أسفلها وحتى تكون الفراغات بين جميع البتلات متساوية. بهذا نكون حصلنا على شكل النموذج الثاني، ويبقى تلوينها وسنختار هنا تلوينها بالتدرج الخطي Linear gradient من لوحة التعبئة والحدود. قيمة لوني التدرج هي: b3ffabff 12fff7ff يمكنك وضع القيمة التي ترغب بها ولا تنس تحريك شريط A من لوحة التعبئة والحدود إلى أقصى اليمين للتخلص من شفافية اللون في حال كنت ترغب بذلك. النموذج الثالث سنكرر النموذج الأول مجددا ونضعه على الجانب الأيمن، ثم سنقوم بتحديد البتلات الأساسية الخضراء فقط عن طريق الضغط على Shift أثناء التحديد لتحديدها معا، ثم من قائمة المسار نختار الأمر Unionلنوحدها. نختار البتلة الحمراء الأولى ونكررها ثم نوسعها مرتين عن طريق الاختصار Ctrl+) ثم نحددها هي والبتلات الخضراء التي صارت قطعة واحدة ثم نختار الأمر Difference. وسنكرر الأمر نفسه مع بقية البتلات الحمراء. سنقوم بتكرار البتلة الحمراء الأولى مجددا وتوسعتها عن طريق الاختصار Ctrl+) مرتين كالسابق ثم نحدد البتلة المكررة مع البتلة الحمراء الثانية ومن قائمة المسار نختار Difference. ونفعل الشيء نفسه مع البتلة الثانية والثالثة، ثم نكرر البتلة الرابعة ونوسعها ثم نختارها هي والثالثة ونختار الأمر Difference. نكرر البتلة الحمراء الأخيرة مجددا ونوسعها مرتين كالسابق ثم نختارها هي والبتلة الثانية ونطبق الأمر Difference للحصول على فراغات متساوية بين جميع البتلات. وبهذا نكون حصلنا على النموذج الثالث للشعار، وسنقوم بتجزئة البتلات الخضراء لنتمكن من تلوين كل قطعة على حدة عن طريق الأمر Break apart من قائمة المسار. القيم اللونية التي اخترناها للبتلات الأساسية بترتيبها من الأولى إلى الخامسة: 800026ff bd0026ff e31a1cff bd0026ff 800026ff القيم اللونية للبتلات الصغيرة مرتبة من اليمين إلى اليسار: fd8d3cff feb24cff feb24cff fd8d3cff النموذج الرابع نكرر النموذج الأول مجددا ونقوم بحذف البتلات الصغيرة جميعها. نكرر البتلة الأولى ونلونها بلون أفتح واخترنا له القيمة f4f4d4ff ونجعل لها حدا من تبويب رسم الحد Stroke paint (تجد القيمة اللونية للحد في الصورة). نختار من شريط الأدوات أداة التحرير Node tool ثم نحذف العقدة node في الطرف الملاصق للبتلة الثانية ونسحب بمؤشر الفأرة طرف البتلة إلى الداخل. نضغط مجددا على البتلة المكررة ليظهر لنا مركزها ثم نقوم بتحريك المركز إلى طرف البتلة حتى يتم تدوير بقية النسخ التي سنكررها حول نفس المركز. لحذف الزوائد من البتلات الأصلية، سنكرر البتلة الثانية ثم نختار النسخة المكررة مع البتلة الأولى ونختار Difference من قائمة المسار، ثم نفعل الشيء نفسه مع البتلة الثالثة والثانية حيث نكرر البتلة الثالثة ونختار النسخة المكررة مع البتلة الثانية ونتبع نفس الأمر، وبهذا نكون حصلنا على النموذج الرابع وسنتركه هنا بنفس اللون. النموذج الخامس والأخير سنقوم هذه المرة بتكرار النموذج الثالث وكل ما علينا فعله للحصول على شكل النموذج الخامس، هو إزالة التعبئة باختيار علامة x في تبويب التعبئة، وإضافة حدا باللون الذي نرغب به عن طريق تبويب رسم الحد. وبهذا نكون حصلنا على النماذج الخمسة لشعار الزهرة

في هذا الدّرس من سلسلة تعلّم CSS؛ سنشرح كيفيّة تحديد الألوان في أوراق الأنماط، وسنتدرّب على ذلك بتغيير لون الخلفيّة. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Selectors) في CSS. كيفية كتابة تعليمات CSS يسهل قراءتها. تنسيق نصوص صفحات الويب باستخدام CSS. التعامل مع الألوان في CSS. (هذا الدرس) إضافة محتوى إلى صفحة ويب باستخدام CSS. تنسيق القوائم (Lists) في CSS. تعرف على الصناديق (Boxes) في CSS. رصف العناصر (Layout) في CSS. الجداول (Tables) في CSS. التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS. الألوان استخدمنا في الدّروس السّابقة مجموعة محدودة من الألوان المُسمّاة. تدعم css في مجملها 17 لونًا مُسمّىً، قد تبدو لك بعض هذه الأسماء غريبة: الألوان الأساسية black: الأسود silver: الفضّيّ white: الأبيض red: الأحمر lime: الزيزفونيّ blue: الأزرق الألوان الثانوية yellow: الأصفر aqua: المائيّ fuchsia: الفوشيّ maroon: الأجرّيّ orange: البرتقالي olive: الزيتوني purple: البنفسجيّ green: الأخضر navy: النيلي teal: تركواز تفاصيل أكثر قد يدعم متصفّحك ألوانًا مُسمّاة أكثر مثل: dodgerblue peachpuff firebrick aquamarine لتفاصيل أكثر عن هذه القائمة الموسّعة، اطّلع على كلمات ألوان SVG في وحدة ألوان CSS3. انتبه عند استخدام أسماء ألوان قد تكون غير مدعومة في متصفّحات جمهورك. لاستخدام ألوان أخرى، يمكن تحديد المكوّنات الثلاثة الرئيسيّة لأيّ لون، الأحمر والأخضر والأزرق، باستخدام إشارة الرّقم (#) متبوعة بثلاثة أعداد بنظام العدّ الستّعشري (hexadecimal) والّتي يُرمز لها بالرّموز بين 0 و9 ثمّ بين a وf، حيث تُشير الحروف بين a وf إلى القيم 10-15: الأسود: #000‎‎‏ ‎‎ ‎ الأحمر الخالص: #f00 الأخضر الخالص: ‎ #000‎ الأزرق الصّافي: ‎ #00f‎ ‎ الأبيض: ‎#000‎ يمكن أيضًا استخدام عددين ستّعشريّين لكلّ جزء من اللّون لتنوّع أكبر: الأسود: ‎ #000000‎‎‏‎ ‎ الأحمر الخالص: #ff0000 الأخضر الخالص: ‎ #00ff00‎ ‎ الأزرق الصّافي: ‎ #0000ff‎ ‎ الأبيض: ‎ #ffffff‎ ‎ مثال يمكنك بشيء من المِران تعديل قيم أرقام الألوان الثّلاثة يدويًّا لشتّى الاستخدامات: ابدأ بالأحمر الصّافي: ‎#f00 ثم اجعله أكثر شحوبًا، بإضافة بعض الأخضر والأزرق: ‎#f77 ثم اجعله أميل للبرتقالي بإضافة مزيد من الأخضر: ‎#fa7 ثم اجعله داكنًا بتخفيض كلّ مكوّناته: ‎#c74 ثم خفّض إشباعه بجعل مكوّناته أقرب في القيمة إلى بعضها: ‎#c98 وإذا جعلتها متساوية تمامًا فإنك تحصل على الرّماديّ: ‎#ccc للحصول على لون شاحب مائل للأزرق: ابدأ بالأبيض الصّافي: ‎#fff ثم خفّض المكوّنات الأخرى قليلًا: ‎#eef تفاصيل أكثر بإمكانك تحديد الألوان باستخدام أعداد بنظام العد العشريّ مستخدمًا قيمًا بين 0 و255، أو نسبًا مئويّة: مثلًا: هذا اللّون أحمر آجري: rgb(128, , ) لمزيد من التفاصيل عن كيفيّة تحديد الألوان، اطّلع على الألوان في معيار CSS. لمعلومات أكثر عن كيفية مطابقة ألوان القوائم والأزرار مع ألوان النّظام، اطّلع على ألوان النظام في CSS2 في معيار CSS. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن خصائص الألوان استخدمنا الخاصّة color سابقًا لتغير لون النّصّ. يمكن استخدام الخاصّة background-color لتغير خلفيّة العناصر. يمكن تعيين هذه الخاصّة إلى transparent في حال رغبنا بالنّص صراحةً على جعل الخلفيّة شافّة، ممّا يؤدّي إلى إظهار لون خلفيّة العنصر الأب. تدريب: استخدام رموز الألوان حرّر ملف CSS الّذي تتدرّب عليه. طبّق التغيّير المعروض أدناه لجعل الحروف الأولى ذات خلفيّة زرقاء شاحبة (قد يختلف أسلوب الكتابة والتّعليقات في ملفّك عمّا تراه هنا، لا بأس، أبِقها كما تحبّ). <p id = "first"> <strong>C</strong>ascading <strong class="spinach">S</strong>tyle <strong class="spinach">S</strong>heets </p> <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> /*** CSS Tutorial: Color page ***/ /* page font */ body { font: 16px "Comic Sans MS", cursive; } /* paragraphs */ p { color: blue; } #first { font-style: italic; } /* initial letters */ strong { background-color: #ddf; color: red; font: 200% serif; } .spinach { color: green; background-color: #ddf; } احفظ الملفّ وحدّث المتصفّح لترى النّتيجة: تمرين غيّر أسماء الألوان إلى الرّموز الثّلاثيّة التي توافقها في ملفّ CSS لديك دون أن تغيّر النّتيجة. (قد لا يمكن مطابقة الألوان بالضّبط، ولكن يمكن الوصول إلى ألوان مقاربة، لأنّ مطابقة الألوان تمامًا تتطلّب الرّموز السّداسيّة، وهذا يحتاج مراجعة معيار CSS أو استخدام أداة تنتقي اللّون). شاهد الحل القيم التالية هي تقريب معقول للألوان المُسمّاة: strong { color: #f00; /* red */ background-color: #ddf; /* pale blue */ font: 200% serif; } .carrot { color: #fa0; /* orange */ } .spinach { color: #080; /* dark green */ } p { color: #00f; /* blue */ } ما التالي؟ المحتوى والتنسيق منفصلان تمامًا في ملفّين، سنطّلع في الدّرس التّالي على كيفيّة عمل استنثاء لهذه القاعدة من خلال إضافة محتوى إلى صفحة ويب باستخدام CSS. ترجمة -وبتصرف- للمقال Color من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.

إذا كنت من المصمّمين و تريد القيام بأعمال في هذا المجال فإنّ Adobe Illustrator سيكون برنامجك المفضّل، مع إعداد بعض الأدوات وتقنيات يمكنك استعمال ما يقدّمه لك Illustrator من أدوات إنشاء وتعديل الأشكال للقيام برسوم رائعة لكلّ شيء. في درس اليوم، سأطلعكم على طريقتي في كيفيّة قيامي برسم مسدّس مائيّ بسيط. كلّ التصميم قائم على استعمال أدوات Illustrator البسيطة ثمّ التّلوين، سأريكم أيضا بعض تقنيات الفعّالة للحصول على تأثيرات مشهورة وذلك لمجارات الرّسوم المشهورة أيضا. الموضوع الذي سأتطرّق إليه في هذا الدّرس هو رسم مسدّس مائيّ، لا لشيء إلّا لأنّه رائع، وهذا من الأشياء المدهشة في Illustrator وهو أنّه لا حدود لما يمكنك عمله ورسمه، كلّ الرّسم مبنيّ على أشكال بسيطة مثل المستطيل ذي الزوايا المدوّرة، والدّوائر ثمّ إضافة الألوان بــ Live paint tool. افتح Adobe Illustrator وانشئ ملفّا جديدا، خذ أداة Rounded Rectangle ثمّ ارسم أشكالا مختلفة لأحجام مختلفة لتكوين شكل فوّهة مسدّس المياه، استعمل مؤشّر الفأرة لتعديل الزّوايا المدوّرة ثمّ تأكّد من أنّ كلّ الأشكال مصطفّة أفقيّا باستخدام الزرّ المناسب في Align panel. كبّر حجم الزّاوية حتّى يصير الشّكل شبيها بالنّقانق ثمّ اجعلها فوق الفوّهة، ثمّ اضغط على Alt+Shift واسحب الشّكل لمكان آخر حتّى تحصل على نسخة منه، ثمّ اضغط على Ctrl+D مرّات عديدة لزيادة التّعديل والحصول على مجموعة من الأشكال متباعدة بشكل متساو. حدّد كلّ الأشكال التي هي على شكل نقانق ثم اضغط على Ctrl+G لضمّها معا جميعا، ثمّ حدّد المستطيل الكبير مع الأشكال ثمّ اضغط على Alt ثمّ اضغط على الزّوائد بـأداة Shape builder لمحوها. حدّد المستطيل الكبير حتّى يكون Key object، ثمّ استعمل أداة Align panel للتّأكّد من أنّ الأشكال مصطفّة عموديّا. ارسم مستطيلا طويلا ليكون فوّهة البندقيّة ثمّ أضف مستطيلا مدوّرا، وارسم منطقة محدّدة Selection حول النّقاط السّفلى باستخدام Direct selection tool، ثمّ عدّل النقاط لتطابق شكل الزّاوية، وإذا لم تظهر تلك النّقاط فأضف خاصّية Live corner في: View > Show Corner Widget menu ارسم دائرة صغيرة لإضافة شيء من التّفاصيل، ثم انسخها وغيّر مكانها في آخر المستطيل. استعمل Align panel لجعلهما في الوسط ولا تنس تحديد المستطيل قبل ذلك ليكون Key object. حدّد المستطيل والدّائرتين ثم اضغط على Alt+Shift واسحب بعض النّسخ أسفل الفوّهة. ارسم مستطيلا مدوّرا كبيرا بينهما ليكون مقبض المضخّة، ثمّ حدّد هذه الأشكال وادمجها بالضغط على Unite من Pathfinder panel. اضغط على ]+Ctrl أو اختر: Arrange > Send Backward لجعل العنصر خلف الدّوائر ثمّ حدّد الدّائرتين السّفليتين واحذفهما. كبّر حجم الزّاوية عند رسم مستطيل مدوّر مصوّرا شكل النقانق بحيث يكون متداخلا مع الجزء السّفلي من المقبض. شغّل Smart Guides عن طريق: View > Smart Guides ثمّ استعن بـ green tooltips لتصفيف الأشكال التي تنسخها بالضغط على Alt+Shift ثمّ اسحب الشكل. اضغط على Ctrl+D مرّات عديدة للحصول على نسخ عديدة ثمّ انقر Shift+Click وصوّر مستطيلا كبيرا. حدّد هذا الشّكل مجدّدا لجعله Key Object وكذلك لتصفيف الأشكال في الوسط بأداة Align Panel. اجعل كلّ الأشكال محدّدة، ثم استعمل Shape Builder لإزالة الأجزاء الزّائدة، وتذكّر أن تبقي Alt مضغوطا إذا أردت إزالة شيء ما. بجانب نهاية الفوّهة ارسم مستطيلا عاديّا، ثم استعمل Direct Selection لسحب الزّاوية السفلى إلى الدّاخل، واضغط على Shift للحفاظ على استقامة الحافة السّفلى. انقر في وسط الشّكل لإظهار نقاط التحكم بالزّوايا ثمّ عدّل في انحنائها، عندما تكون الزّوايا محدّدة فإنّ التّغيير سيلحقها، ثمّ اضغط في مكان بعيد عن الأشكال في لوحة الرسم لإزالة التّحديد عن الأشكال Deselect ثمّ حدّد نقطة من الزّاوية السفلى على اليسار لتضخيم تلك الزاوية فقط كما يظهر في الرّسم. ارسم مستطيلا مدوّرا رقيقا مع توسيع زواياه فوق الفوّهة، بحيث يكون متقاطعا مع الأجزاء الأخرى، ثمّ اجعل هذا العنصر في الخلف. أضف شيئا من التّفاصيل في جسم الشّكل برسم مستطيل مدوّر،ثمّ قم بإمالته حتى يكون مطابقا في الانحناء مع الشكل الكبير كما هو ظاهر في الصّورة، ثم اضغط Alt+Shift واسحب نسخة من هذا المستطيل، ثمّ اضغط على Ctrl+D مرّات عديدة للحصول على مجموعة من نفس الشّكل. ارسم مجموعة من الدّوائر متّحدة المركز داخل جسم المسدّس في مكان خال من الرّسوم عبر الضّغط على Ctrl+C للنسخ و Ctrl+F للصق في الأمام، ثمّ عدّل أحجام الدّوائر المنسوخة ضاغطا على Alt+Shift ثمّ أضف مستطيلا يتقاطع مع الدائرتين المركزيتين ثم استعمل Shape Builder لحذف بعض الأجزاء ليبقى شكل قوس في الأخير. استعمل أداة Polygon لرسم مثلّث وذلك بتقليص أحد أجزائه عند سحب الفأرة أثناء الرّسم، ثمّ حرّك أعلى نقطة نحو الأعلى بـ Direct Selection tool وأنت ضاغط على Shift، ثمّ حدّد النقطتين السفليّتين لتعديل الزّوايا لتصير مدوّرة. عدّل حجم الشّكل وأدره وضعه في مكانه ليكون ملائما عند إضافته لرسم المسدّس المائيّ. استعمل نفس الطرق لمواصلة رسمنا للمسدّس المائيّ، فإنّه كلّما ازدادت عناصر الرّسم كلّما صار الرّسم مركّبا وجيّدا ودقيقا. ارسم مستطيلا مدوّرا كقاعدة للمقبض ثم استعمل أداة Shear لتعديل الزّاوية، وأبق Shift مضغوطا عليه عند الرّسم للحفاظ على الحواف الأفقيّة مضمنة. ضع المستطيل في مكانه على الرّسم، ثمّ استعمل مجموعة من الأشكال لتكوين منطقة الزّناد والمقبض، هذه الأشكال يمكن أن تُدمج بــ Pathfinder panel أو عن طريق الضّغط والسّحب بأداة Shape Builder. حدّد رأس الزّاوية اليمنى بـDirect Selection ثمّ عدّل حافة زاوية المقبض للحصول على حافة مستديرة. ارسم مستطيلا عاديّا ليشكّل أمان الزّناد، ثمّ حرّك النّقطة في أعلى اليمين إلى الدّاخل لتتناسب مع زاوية القبضة، ثمّ أضف استدارة في كلّ الزّوايا. حدّد رسم الزّناد والقبضة ثمّ اضغط على Alt ثمّ مدّدهما مستخدما Shape Builder. ارسم دوائر متداخلة لتشكيل الزّناد ثم استعمل Shape Builder لإزالة الزّوائد وإبقاء الشّكل نظيفا ثمّ اجعلهما في الخلف بالضغط على ]+Ctrl+Shift أو انقر باليمين ثمّ اختر: Arrange > Send to Back أضف بعض التّفاصيل للزّناد مستعملا في ذلك أداة Arc، استعمل Smart Guide tooltip لرسم الشّكل من رأس الزّاوية إلى أسفل الزّناد. ارسم دائرة واسعة بحيث تكون متداخلة في بعض المستطيلات، ثمّ ادمج كلّ هذه الأشكال معا بــ Pathfinder أو بــ Shape Builder. واصل عملك في رسم عناصر مخزّن الماء مستعملا نفس الطّرق التي تعلّمناها، وتذكّر أن تستخدم Align Panel كي يكون كلّ شيء سليمَ الاصطفاف. املأ بعض الأشكال الثّانويّة بالألوان لتكوين مجموعة من الألوان لرسمك. حدّد (Selection) كلّ الرّسم ثمّ فعّل أداة Live paint ثمّ انقر في مكان العمل لتشكيل مجموعة قابلة للتّلوين. الغ تعيين كلّ شيء (Deselect) ثمّ خذ أوّل لون في الأشكال الثانويّة التي جهّزناها لاقتناء الألوان بــ Eyedropper، ثمّ ارجع إلى Live Paint tool وانقر على الفراغات التي تريد تلوينها بذلك اللّون، وقم بنفس الطّريقة لتغيير اللّون وتلوين الفراغات في الرّسم. إنّ طريقتنا في تكوين الرّسم تجعل بعض الأشكال والعناصر لا يبلغها التّلوين بنقرة واحدة لذلك قم بنقرات متعدّدة لتلوين كلّ العناصر. عند إتمامك تلوين كلّ الرّسم اذهب إلى: Object > Expand ثم اختر Object، هذه الخطوة ستحوّل المنطقة الملوّنة أشكالا ممتلئة، وهكذا يمكننا إنهاء الدّرس عند هذه الخطوة، ولكن دعنا نضيف بعض التأثيرات المشهورة. انقر بيمين الفأرة واختر Ungroup مرّات عديدة حتّى تصبح "Ungroup” غير قابلة للنّقر وذلك من أجل تفكيك كلّ أجزاء الرّسم. اضغط على أحد عناصر الرّسم ثمّ: Select > Same > Fill Color لتحديد كلّ العناصر التي لها نفس اللّون. اضغط على زرّ Unite في أداة Pathfinder لتوحيد كلّ هؤلاء مجموعين حسب اللّون. اضغط على Ctrl+8 لتكوين مسار مركّب (Compouned path) أو اذهب إلى: Object > Compound Path > Make هذه خطوة حاسمة عند استخدام Pathfinder مع أشكال متعدّدة. أعد نفس الخطوات من تحديد للّون وتوحيد الأجزاء وتكوين المسار المركّب (Compound path) لكلّ أجزاء الرّسم ثمّ حدّد جزءا من الخط الخارجيّ للرّسم واختر: Select > Same > Stroke Color أبق الخطّ الأسود محدّدا واذهب إلى: Object > Expand واختر Stroke لتحويلهم إلى أشكال مليئة. اضغط على زرّ الدّمج من Pathfinder لدمج كلّ الخطوط الخارجيّة وجعلها شكلا واحدا، ثمّ قم بنسخ هذا الشّكل لذاكرة الحاسوب لأنّنا سنحتاجه بعد لحظات. انقر على واحد من الأشكال الملوّنة ضاغطا على Shift لجعل جميعها محدّدة ثمّ اختر Minus Front من Pathfinder لقصّ الخطّ الخارجيّ عن الأشكال. اضغط على Ctrl+F للصق الشكل ذي الخطّ الخارجيّ الأسود ثمّ أعد ذات الخطوات مع الأشكال الملوّنة المتبقّية. بعد تخلّصنا من الخطّ الخارجيّ الأسود ستظهر بعض الفراغات في رسمنا ممّا يجعل أيّ لون غير الأبيض على الخلفيّة يمكنّنا من النّظر من خلاله وهذا يجعله رائعا. انتهى عملنا مع Illustrator الآن، نفس هذه تقنيات يمكن استعمالها لرسم تصاميم جميلة لأيّ شيء آخر، إنّ مظهر الرّسم المسطّح يبدو جيّدا بيد أنّي أحبّ أضافة لمسات أخيرة ببرنامج Photoshop. قم بنسخ العمل إلى Photoshop في ملفّ جديد ثمّ حمّل نماذجي المجّانيّة Halftone Patterns. انقر على الصورة المصغّرة لرسمنا في Layers ضاغطا على Ctrl لتحديده ثمّ املأه بــ halftone pattern في layer جديد. اعكس الألوان بالضغط على Ctrl+I ثمّ غيّر الـ Blending mode إلى Screen لجعل الخلفيّة السّوداء شفّافة وبروز بعض الّنقاط قريبة إلى البياض. في بعض المناطق في الرّسم أين ثمّة ضوء خافت لنّقاط القريبة إلى السّواد تكون أجمل، استعمل أداة Magic Wand لتحديد بعض المناطق في الرّسم ثمّ املأها في Layer جديد بنموذج halftone pattern ثمّ غيّر Blending mode إلى Multiply. هذا ينهي درسنا وأرجو أن تكون التقنيات والمهارات التي ذكرت نافعة لإنتاج رسوم جديدة في مواضيع أخرى. بتعديلات بسيطة على بعض الأشكال مع قوّة Illustrator واتّساعه كلّ شيء يصير ممكنا. ترجمة -وبتصرف- للدرس How to create a vector illustration from start to finish.

غالباً ما يعتقد البعض أنّ تصميم الشعارات عمل سهل وسريع، فما هو إلّا تصميم صغير تضع بجانبه كلمة أو كلمتين ليكتمل العمل. في الواقع الأمر أكبر من هذا بكثير، وهذا يجعل عمليّة تصميم الشعار أو الهويّة مهمّة لا تخلو من التحدّيات. سنلقي نظرة على بعض قواعد تصميم الشعارات، وسنطّلع على عدد من الإرشادات التي يجب الالتزام بها لتصميم شعارات احترافيّة، وسنشاهد معًا التّطبيق العمليّ لهذه الإرشادات في تصميم شعار يمكن استخدامه في أرض الواقع. كان من السّهل وضع قائمة بالقواعد الّتي يجب اتّباعها في تصميم الشّعار، ولكن توخّيًا للفائدة اخترت أن أبيّن ذلك من خلال تصميم شعار لشركة خياليّة لاستضافة المواقع تحت مسمّى Media Stack، وتعاملت مع المشروع على أنّه حقيقيّ (لا ينقصه إلا التّواصل مع العميل). لن يكون المقال بصورة درس متعدّد الخطوات، وإنّما سأوضّح بعض الأفكار التي تدور في ذهني وذلك من خلال عرض الطريقة التي ترجمت بها شخصيًّا خلاصة كل قاعدة في التصميم النهائي للشعار. اطرح الأسئلة لتكون نبذة جيدة عن التصميمأولى الخطوات التي يجب القيام بها عند تسلمك لمشروع تصميم شعار جديد، هي جمع المعلومات اللازمة عن الشركة، مثل ماهية عملها، الجمهور الذي تستهدفه، أهدافها والصورة التي سيعكسها الشعار عنها. يعتمد بعض المصممين في ذلك على استمارة إلكترونية يطرح من خلالها مجموعة من الأسئلة، في حين يتصل البعض الآخر بالعميل هاتفيًّا أو يتواصل معه عن طريق البريد الإلكتروني. مهما كانت الطّريقة التي ستتّبعها فعليك جمع أكبر كمية من المعلومات، إذ كلما زادت المعلومات المتوفّرة لديك كانت عملية تصميم شعار ملائم للزبون أكثر سهولة ويسرًا، والأهم من ذلك أنّك ستصمم شعاراً يمثل الشركة بالصورة الصحيحة واللائقة. نظراً لكون المشروع خياليًّا فإنّ جميع المعلومات عن شركة Media Stack هي من نسج الخيال، ولكني توخيت جعل المشروع نموذجيًّا لشركة صغيرة إلى متوسّطة. تلخص النبذة هوية شركة Media Stack وطبيعة عملها والصورة التي ترغب في عكسها إلى زبائنها. يمكن الاستفادة من كل هذه المعلومات في تكوين شعار فريد يمثل الشركة بصورة لائقة. يبدأ التصميم اليومي بمسودةيعد استخدام المسودة أمرا مهما لإطلاق الأفكار المتعددة وإبرازها على الورق، وبلا شك فقد تولدت لديك بعض الأفكار الأولية بعد قراءتك للنبذة، وهذه هي فرصتك لتسجيل هذه الأفكار إضافة إلى الكلمات المفتاحية، الخربشات، المخططات، والأفكار الإبداعية. بدأت ببعض الخربشات التي استلهمتها من بعض الكلمات المفتاحية المتعلقة باستضافة المواقع، وفكرة أكداس الخواديم. برزت بعدها بعض الأفكار حول كيفية تمثيل كدس الخواديم بصورة بصرية. يمكن الاستفادة من شكل المستطيل الرفيع للخادوم، كذلك يمكن استخدام الحروف الأولى من اسم الشركة وهي M و S، أو يمكن استخدام بعض الأيقونات التي ترمز إلى الشّكات. كون فكرةيتمحور تصميم الشّعار حول تكوين الفكرة التي ستصف الشركة وقيمها بطريقة فنية، ولك الخَيار في أن تنهج في ذلك الأسلوب الواقعي أو التجريدي، إذ ليس من الضروري أن تصف الشعارات دائمًا وبصورة دقيقة ما تقوم به الشركة، وإنما يمكن التركيز على قيمة أو رسالة معينة. هنا ستظهر فائدة البحث الأولي الذي أجريته عن عمل الشركة حيث سيساعدك هذا على تكوين صورة فريدة وذات صلة بعمل الشركة. تمخضت المسودات عن فكرة رئيسة لشعار Media Stack وهي تمثيل كدس الخواديم على هيئة مجموعة من الصناديق، وبدلًا من رسم هذه الصناديق بطريقة اعتيادية قد تبدو مملة نوعًا ما، قررت إدخال بعض الإثارة إلى الرسم وجعل الفكرة أكثر تجردًا، وذلك بإدخال البعد الثالث وتفريغ الصناديق، الأمر الذي نقل الشّعار بعيدًا عن الشكل المسطّح للصّناديق، وساهم في تطوير علامة بصرية غير اعتيادية. يمكن مشاهدة الشّعار بطريقتين، الأولى باعتباره شكلًا متناظرًا، ولكن إن أمعنت النظر في الشعار فإنك ستشاهد الطبقات الثلاثة مكدسة فوق بعضها البعض. يكون الشكل كذلك ما يشبه السهم المتجه إلى الأعلى، ويمكن ترجمة ذلك بالنمو والتقدم نحو الأمام وسيمنح ذلك المزيد من القوّة إلى الشعار وبخاصة عند تقديم العروض إلى الزبائن. صمم الشعار على هيئة Vectorالآن، وبعد اختيار فكرة التصميم، ستبدأ فعلًا ببناء الشّعار على الحاسوب، وتصميم الشّعار بصيغة Vector من أهم القواعد التصميمية التي يجب عليك اتّباعها. تسمح التصاميم المُوجهة vector format بتغيير مقاسات التصميم بحرية دون المساس بجودته، بعكس الصور النقطية المكونة من البكسلات والتي يؤدي تغيير حجمها إلى تشويهها وفقدان وضوحها. يمكن استخدام الشّعار المصمّم بصيغة Vector لجميع الأغراض، سواء أوضعته بحجم صغير على وصل أو فاتورة، أم وضعته بحجم كبير في إعلان ضخم على جانب إحدى المباني الكبيرة. يعد برنامج Adobe Illustrator الأكثر شهرة في هذا المجال، أما صيغ الملفات الأكثر شهرة هي Ai، EPS، و PDF. قد لا يمتلك الزبون البرامج اللازمة للتعامل مع هذه الملفات، لذا يجب تزويده بالشّعار وبأحجام مختلفة على هيئة صور بصيغة JPEG أو PNG للاستخدام اليومي، وتزويد ملف بإحدى صيغ المتجهات للاستخدام الاحترافيّ. صمّمت شعار Media Stack بواسطة برنامج Adobe Illustrator، وهو برنامجي المفضل في مجال العمل على المتجهات. بدأت بمستطيل بسيط تلاعبت به بواسطة أداة التحديد المباشر Direct Selection Tool لإضفاء المظهر المائل عليه، وعن طريق مضاعفة المستطيل المائل وقلبه حصلت على الشكل النهائي للشعار. تمّ ضبط مواضع كل الأشكال بصورة دقيقة جدّاً، وذلك عن طريق تكبير العرض إلى الدّرجة القصوى واختيار نمط الحدود الخارجيّة (Outline mode (Ctrl+Y, CMD. تأكد أن الشعار متوازنكما هو الحال مع أي تصميم جرافيكي، يجب عليك أن تسعى إلى التوازن في التصميم وذلك بواسطة استخدام البنية المناسبة، إذ يجب أن تكون الشعارات المؤلفة من عنصرين أو أكثر متناغمة ومتناسقة، وأفضل الطرق التي يمكن اعتمادها هي الاستفادة من بعض الرّياضيات البسيطة، أو ترتيب الأشياء على خط واحد بكل بساطة. كان بالإمكان تحجيم عناصر الشّعار ووضعها بجانب بعضها البعض بصورة عشوائية، ولكن توخيا للتناغم والتناسق رسمت بعض الدلائل التي أحاطت بحواف وزوايا كل عنصر رئيسي في التّصميم، فتكونت لدي شبكة يمكن استخدامها في ضبط موضع النّص، وقد استفدت من ذلك في التأكد من أن خطوط الشّعار تنساب بصورة جيّدة نحو النّص. يعادل ارتفاع النّص ثلث ارتفاع الشّكل، والمسافة الفاصلة بين النّص والشّعار مساوية للمسافة بين نقطتين ضمن المساحة الداخليّة للشّعار. هل تستخدم المؤثرات في الشعار؟يحب البعض الشّعارات الشفافة أو ذات الألوان المتدرّجة، ويفضل البعض الآخر مبدأ العودة إلى الأساسيات ولا يرغب بوجود تلك الأمور البراقة في الشعار. أعتقد - شخصيًّا - أنه غالبا ما يمكن للشّعار أن يستفيد من هذه المؤثرات إذا كانت الطريقة التي سيستخدم بها تسمح بذلك. فإذا كان الهدف من الشّعار عرضه على الشّاشات على سبيل المثال، فإن وجود تدرج لوني هنا أو هناك قد يكون مفيدًا في إضافة بعض من العمق إلى التصميم ونقله إلى مستوى أعلى من الوضوح والبروز. وحتى لو كان الهدف من الشعار استخدامه في مستندات مطبوعة، فإن الطّبعات المتوفرة في يومنا هذا قادرة على إعادة إنتاج جميع التأثيرات التي تظهر على الشاشات بواسطة الحبر. ولكن يجدر بك التأكد من أن الشّعار سيبدو واضحاً بدون تلك المؤثّرات، أو عند تلوينه بلون واحد فقط، وذلك لضمان تعدد الاستخدامات. قررت إضافة تدرج لوني إضافي إلى شعار Media Stack وذلك لإبراز تأثير البُعد الثالث عليه، وهذا يجعل فكرة كدس العناصر فوق بعضها البعض أكثر وضوحًا. ستكون النّسخة ذات الألوان الكاملة النّسخة الرئيسة التي ستعرض على الشّاشة أو ستستخدم على أيّ مطبوعة ذات ألوان كاملة، وهناك نسخة أخرى بألوان مسطّحة خالية من التّأثيرات وهي مثاليّة للأحجام الصغيرة، أو للطّباعة بألوان محدّدة. الشعار الجيد يبدو جيدا في لون واحدتُعدّ صفة تعدد الاستخدام خير دليل على جودة الشّعار، فمن المفترض أن يتكيّف الشّعار مع جميع الحالات، وإحدى تلك الحالات هي استخدام الشّعار بلون واحد فقط. إذا كان الشّعار الذي تصمّمه معتمدًا بشكل كبير على الألوان والتّأثيرات التي تكون مظهره، فإنه سيكون شعارًا محدودًا في أرض الواقع. فكر في الكيفية التي سيظهر بها التصميم إذا ما استُخدِم كمُلصَق سيتم قصّه من البلاستيك، أو الطريقة التي سيُنقش بها على مُنتج ما. يتميّز الشّعار أحاديّ اللون بإمكانية عكس ذلك اللون ليتلائم مع جميع الخلفيّات، إضافة إلى إمكانيّة استخدامه فوتوغرافيًّا. صمّمت نسخة ذات لون واحد من شعار Media Stack إضافة إلى النسخة ذات الألوان الكاملة والنسخة ذات الألوان المسطّحة، وباستخدام بعض الخطوط الإضافية تمكنت من المحافظة على التأثير الذي أنتجته الألوان، أي أنّ الشعار قد حافظ على هيئته البصرية المتمثلة بالعناصر الثلاثة المنفصلة، على الرّغم من استخدام لون واحد في تكوينه. استخدم سيكولوجية الألوان في تصميمكيعد اللّون واحدًا من أهم مكونات عمليّة تصميم الشعارات والعلامات التجارية، إذ يتكون لدى الناس شعور أو فكرة معينة حول التصميم بمجرد النظر إلى ألوانه، لذا فمن الضروري أن يكون اختيارك لألوان التصميم اختيارًا حكيمًا. عند تحديد الألوان التي ستوظفها في تصميم الشّعار، فكر في الألوان التي ترتبط بالرسالة والقيمة التي تحاول إبرازها بواسطة التصميم. بعض الألوان ستساعد على تقوية هذه الرّسالة، وقد تعمل مجموعة معيّنة من الألوان بصورة أفضل من مجموعة أخرى، وهنا يأتي دور معرفتك بنظريّة الألوان. قد يبدو مزيجًا مؤلفا من ألوان معينة براقا وصارخا، وقد يبدو البعض الآخر باهتًا وداكنًا، لذا قد تكون مجموعة من الألوان ملائمة لتصميمك بشكل كبير، وقد تؤدّي مجموعة أخرى إلى إفساده. اخترت اللون الأزرق لشعار Media Stack، وذلك لأنه وبالإضافة إلى كونه لونًا جميلًا، فإنه يرمز إلى الثقة والتفاني، ما يجعله اللون الأكثر شيوعًا في مجال الأعمال. إذا لم يُطلب منك إعادة تصميم الشّعار من نقطة الصّفر، فمن الأفضل أن لا تغير اللون المستخدم في الشعار القديم، إذ أنه عنصر مهم في التعرف على الهويّة التجاريّة. تخيل فقط أن تغير شركة كوكاكولا لون العلب إلى الأزرق. هل تحتاج إلى إنشاء دليل للهوية التجارية؟يمكن تشبيه دليل الهويّة التجارية بدليل الاستخدام لشعارك الذي انتهيت من تصميمه أخيرًا، فهو يُرشد الزّبون إلى الطريقة المثلى في استخدام الشّعار. على سبيل المثال، قد يتضمن الدليل تفاصيل حول الحد الأدنى لأبعاد الشعار والتي في حال تجاوزها يصبح الشعار فاقدًا للوضوح، كذلك يمكن إرشاد الزبون إلى النُّسخ التي يجب استخدامها على الخلفيات الداكنة، ومتى يكون استخدام الشّعار ذي اللون الواحد مفضلا. كذلك يجب أن يتضمن الدليل قسمًا خاصا توضح فيه أنه لا يجوز ضغط، مط أو تغيير ألوان الشعار، وقد يتضمن الدليل كذلك تفاصيل عن الألوان المستخدمة في الشعار بصيغ Hex, RGB, CMYK و Pantone والخطوط المستخدمة في التصميم. بعض المعلومات الضرورية التي ستساعد على استخدام شعار Media Stack بصورة صحيحة في جميع وثائق الشّركة، وتتضمن هذه المعلومات عرضا لمجموعات الألوان الزرقاء والرمادية المستخدمة، وخط News Gothic المستخدم في الشّعار. من المفيد كذلك حماية التّصميم من خلال توضيح الطرق التي يمكن أن يستخدم بها والطرق التي يجب تجنّبها. قد تبدو هذه الأمثلة واضحة لنا نحن معاشر المصمّمين، ولكننا نعرف ما قد يحصل لأبنائنا عندما يضع الزّبائن أيديهم عليهم. ترجمة -وبتصرّف- للمقال A Guide to Creating Professional Quality Logo Designs لصاحبه Chris Spooner. حقوق الصورة البارزة: Designed by Freepik.

في درسنا هذا سنتعلّم طريقة عمل التّدرج اللّوني الشّبكي Gradient Mesh باستخدام برنامج أدوبي اليستريتور وكذلك استعمال العناصر الأساسيّة لتصميم فاكهة مانجو شبه حقيقية. 1. بدايةً نقوم بفتح برنامج Adobe Illustrator ونضغط على (Ctrl + N) لإنشاء ملف جديد بالإعدادات التّالية : الأبعاد: 850px*465px.نمط الألوان: CMYK.الدّقة: screen 300 ppi.ونتأكد أن الخاصيّة Align New Objects to Pixel Grid لا توجد أمامها علامة، ثم نضغط OK: 2. باستخدام أداة (Pen Tool (P نرسم شكلاً قريبًا من شكل فاكهة المانجو مثل الذي يظهر في الصّورة ، بالنسبة لي قمت باستعمال بعض الخطوط التّوجيهية guidelines حتى أقوم بتحديد حجمها. لا تنسى أن تنسخ الشّكل الذي قمت بعمله لأننا سنحتاجه لاحقا: 3. الآن نحدّد الشّكل ثمّ نتبع المسار التّالي: Object > Create Gradient Mesh ثم نحدد قيمة rows بـ: 10 وكذلك قيمة columns ونضغط على ok. بإمكاننا تحريك نقاط الشّبكة باستخدام الأداة (Direct Selection Tool (A: 4. باستخدام أداة التحديد (Direct Selection Tool (A نقوم بتحديد جميع نقاط الشبكة واحدة تلو الأخرى ونملأها باستخدام أداة التلوين. لست مجبرا على استخدام نفس الألوان التي تظهر في الصّورة المرفقة، بامكانك استخدام مخيلتك لخلق ألوان جديدة: 5. بعد الانتهاء من تعبئة الشّكل بالألوان، نقوم بتحديده ثم نتبع المسار التالي: Effects > Texture > Grain نقوم بإدخال القيّم الموضحة في الصورة ثم نضغط على زر موافق. 6. سنقوم بإضافة بعض اللّمسات التي ستجعل من شكل الفاكهة أكثر واقعيّة، نقوم أوّلا باتباع المسار التالي: Window > Symbols ستظهر لنا مكتبة صغيرة من الرموز نختار القائمة: Artistic textures، ثم نضغط على الرمز Charcoal ونسحبه إلى مساحة العمل، بعدها نضغط على Break Link حتى نقوم بتعديله: 7. مع تحديد الرّمز الذي قمنا بوضعه نتبع المسار التالي: Object > Envelope Disort > Make with Warp ونحدد القيمة 50% ونضغط Ok، بعدها نتبع المسار التالي: Object > Expand ونضغط Ok: 8. نحدّد الشّكل ونضغط على الأداة (Rotate Tool (R لتدويره 180 درجة بعدها نختار الزر Copy: 9. الآن نحدد الشكل الذي قمنا بعمله في أوّل خطوة، نضعه في الخلف باستعمال الاختصار Ctrl + Shift + ]، بعدها نحدد الرمز (الأصلي والنسخة التي قمنا بتدويرها 180 درجة) وشكل المانجو ثم نتبع المسار التالي: (Object > Clipping Mask > Make (Ctrl + 7 10. الآن نقوم بتحديد الرّمز Charcoal ونختار له اللون الأبيض، بعدها وباستخدام Transparency Panel نقوم بتغيير blending mode إلى Soft Light ثم نغير قيمة opacity إلى 50%: 11. سنرسم الآن ساق ثمرة المانجو، باستخدام أداة (Pen Tool (P نرسم شكلا شبيها بالذي يظهر في الصورة ونطبق عليه التدرج اللوني الشّبكي كما قمنا بعمله في الخطوة الثالثة، ثم وباستخدام أداة التحديد (Arrow Tool (A نقوم بتحديد نقاط الشبكة وتلوينها كما في الصورة: 12. نحدد الشكل الأخير ونتبع المسار التالي: Effects > Texture > Grain مع تحديد القيم التي في الصورة: 13. سنرسم الآن ساق الورقة، فنقوم أولا برسم شكل يشبه الذي في الصورة وذلك باستخدام أداة (Pen Tool (P مع تطبيق خاصية Gradient Mesh كما في الخطوات السابقة: 14. نقوم برسم الورقة كذلك باستخدام أداة (Pen Tool (P وتطبيق Gradient Mesh: 15. نحدد شكل الورقة ونتبع المسار التالي: Effects > Artistic > Smudge Stick نقوم بإدخال القيم الموضحة في الصورة ونضغط على زر موافق، آخر خطوة هي إضافة التأثير التالي: Effects > Artistic Plastic Wrap مع تحديد نفس القيم الموضحة في الصورة: 16. أنهينا تصميم فاكهة المانجو سنقوم الآن بعمل الخلفية. بداية نرسم مستطيلا أبعاده: 850px*465px ونقوم بتعبئته بالتدرج اللوني متعدد الألوان multicolor Gradient. بعدها نحدّده ونتبع المسار التالي: Effects > Texture > Film Grain مع إدخال نفس القيم: 17. وصلنا إلى آخر خطوة في درسنا هذا، باستخدام الأداة (Elipse Tool (L نرسم دائرة ثم نقوم بتعبئتها بالتدرج اللوني Radial Gradient الأبيض. نحدد قيمة Opacity بـ 0 ونغير Blending mode إلى Multiply: 18. هذه هي النتيجة النهائية لدرسنا: ترجمة -وبتصرّف- للدّرس How to create a Realistic Mango in Adobe Illustrator لصاحبه James Richman.

سنتعلم في هذا الدرس كيفية تصحيح ألوان الصور الفوتوغرافية مع إضافة تأثير عالي الدقة HD عليها باستخدام برنامج Photomatix وهو برنامج مخصص للمصورين ويمتاز بإضافة تأثيرات اكثر من رائعة على الصور، بالإضافة إلى برنامج فوتوشوب. الصور التالية تشرح الفرق (على اليمين هو الصورة بعد معالجتها وعلى اليسار الصورة الأصلية): الصورة المُستخدمة للشرح في هذا الدرس: نبدأ بفتح برنامج Photomatix ومن الواجهة الرئيسية نختار Load a single photo لإستدعاء الصورة المراد التعديل عليها إلى البرنامج: ستنبثق نافذة أخرى منها نقوم بإختيار الصورة التي نريد ثم نضغط على open: الآن أصبحت الصورة جاهزة لإضافة التأثيرات عليها، من نفس الواجهة نضغط على Tone Map:  بعد الضغط على Tone map انتظر قليلاً ثم سترى نافذة أخرى فيها الصورة بعد إضافة التأثير عليها وخيارات اُخرى: بإمكانك التنقل بين هذه التأثيرات المختلفة، كل واحد منها له طابعه الخاص.خيارات للتعديل اليدوي، في حال ازدادت الإضاءة مثلا بامكانك التحكم فيها عن طريق تلك القيم.بعد الإنتهاء من اختيار التأثير المناسب لصورتك اضغط على Apply.وسيتم تطبيق التأثير على الصورة بعد الضغط على Apply. كما شرحنا سابقا؛ ستعود للواجهة الرئيسية للبرنامج ثم اضغط على Save Final Image لحفظ الصورة كما بالصورة التالية: بعدَ حفظ الصورة نغلق برنامج الفوتوماتكس ونتوجه لبرنامج الفوتوشوب حيث سنعمل على تصحيح ألوان الصورة. في برنامج الفوتوشوب نقوم بإستدعاء الصورة التي قمنا بإضافة التاثيرات عليها والصورة الأصلية معاً كالتالي: توجه إلى الزر الذي يُشير اليه السهم بالصورة أعلاه واضغط عليه ستنبثق نافذة صغيرة اختر الخيار الموضح بالصورة التالية: من جديد ستلاحظ إنبثاق نافذة اخرى، هذه الأخيرة لها فوائد عِدة ستكتشفها من خلال التنقل بين التأثيرات المُتاحة فيها، في الوقت الرآهن اختر التأثير الموضح بالصورة التالية: ستلاحظ بأن ألوان الصورة قد تغيرت للأفضل، فقط تبقى مشكلة الإضاءة الحادة قليلاً. من نفس النافذة السابقة اختر Curves لتعديل الإضاءة كما بالصورة أدناه: بعد اختيار الخيار الموضح أعلاه؛ ستأتيك نافذة صغيرة فيها مُربع تمكنك من التحكم في إضاءة الصورة كما الصورة التالية: الخطوة الأخيرة، قم بعمل قناع Mask على الصورة التي قمنا بالتعديل عليها ببرنامج Photomatix كما هو موضح أدناه: إختر اللون الأسود ثم توجه إلى قائمة الفُرش وطبق الإعدادت التالية: عُد إلى طبقة القناع Mask وابدء بالمسح فوق الصورة، ستلاحظ إنخفاضا بالإضاءة وبذلك تكون قد أتممت الخطوات بنجاح.

توجد الكثير من الطُرق لتغيير لون الأعيُن عن طريق برنامج الفوتوشوب ومنها ما سنراه في هذا الدرس. سنقوم في هذا الدرس بتغيير لون عين طفل من الأزرق إلى الأخضر وهذه هي النتيجة النهائية بعد تتبع جميع الخطوات: نجلب الصورة التالية إلى المشروع: نبدأ بفتح الصورة السابقة كما هو موضح بالصورة التالية عن طريق الذهاب إلى القائمة: File > Open نقوم بتكرار الطبقة الخاصة بصورة العين عن طريق الضغط على Ctrl + J أو ضغط على الزر الأيمن للفأرة واختيار الخيار التالي: أولاً يجب تحديد الجزء المراد تغيير لونه؛ أبسط أداة يُمكن استخدامها هي أداة Elliptical Marquee Tool والتي يمكن تفعيلها كما بالصورة أدناه: نتوجه إلى أقصى العين اليمنى كمثال؛ نضغط على الزر الأيمن للفأرة ونبدأ بسحب التحديد إلى جهة اليسار: نُكمل السحب حتى نصل إلى نهاية العين المراد تغيير لونها: الآن نبدأ بتغيير لون العين، ومع ابقاء التحديد توجه إلى القائمة: Image > Adjustement > Hue/Saturation ستفتح لك نافذة فيها ثلاث قيم؛ أولا تأكد من التأشير على خيار Colorize ثم ابدأ بتغيير القيم الموجودة إلى اللون الذي تريد ان يتم تطبيقه: اضغط Ok بعد الإنتهاء وستلاحظ تغير لون العين. قد تظهر لك مشكلة ان اللون أكبر من منطقة العين كما بالصورة التالية:  لحل هذه المشكلة قم بعمل قناع أو Mask على الطبقة العٌلوية كما بالصورة التالية: ستلاحظ ان مربعاً صغيراً قد تم انشائه بالجهة اليُمنى:  توجه إلى قائمة الفرش واختر الفرشاة الناعمة مع تخفيف الشفافية إلى قيمة أقل من 50%: بعد اختيار الفرشاة تأكد من اختيارك للون الأسود و أنك تعمل على الطبقة العلوية. ثم ابدأ بمسح الأجزاء التي قد تكون حدودها واضحة؛ ستلاحظ اختفاءها بشكل تدريجي وهذه هي النتيجة النهائية:

سنحاول في هذا الدّرس تصميم شريط ملون Ribon باستخدام برنامج فوتوشوب، وستكون هذه هي النتيجة النهائية لهذا الدرس بعد تتبع وتطبيق كامل خطواته: افتح مشروعا جديدا على Photoshop بالإعدادات التالية: الأبعاد: 500x500pixels.الدقة: Resolution 720Dpi.نمط الألوان: Color Mode RVB8bit.مع خلفية ذات لون #cebfae: نجلب الصورة التالية للمشروع: نغير في خصائص الدمج Blending Options إلى القيمة Overlay: في طبقة جديدة SHIFT+CTRL+N وباستعمال أداة التحديد المستطيلة الشكل (Marquee Tool (M نقوم بتحديد شكل مستطيل ونملأه بأداة الطلاء (G) باللون #dc1154: نكرر نفس العملية باللونين #94d64d و #fff000: ندمج الطبقات الثلاث الأخيرة Ctrl+E ثم ننسخ الطبقة الناتجة Ctrl+J. ندير الطبقة الأولى محوريا من القائمة: Menu > Edit > Path Transformation > Flip Vertical ثم الاختصار Ctrl+T للتعديل يدويا: باستعمال أداة التحديد المستطيلة الشكل (Marquee Tool (M نحدد مستطيلا فوق الطبقة الأولى ثم نضغط زر Delete ثم نفس الشيء بالنسبة للطبقة الثانية: ننشئ طبقة جديدة SHIFT+CTRL+N يبن الطبقتين الأخيرتين: نضيف فرشاة باللون الأسود فوق الطبقة الجديدة: نغير في قيمة الشفافية: ثم نضيف النص: من نافذة خصائص الدمج Blending Options نختار: من القائمة: Menu > Filter > Filter Gallery من جديد إلى خصائص الدمج Blending Options: في مشروع جديد بحجم 3x3pixels، وباستعمال أداة الشكل المستطيل نضيف أربع أشكال بيضاء: ثم من القائمة: Menu > Edit > define Pattern نعود لمشروعنا، باستعمال أداة الطلاء مع اختيار نوع Pattern والشفافية 40 في إعداداتها، نملأ كل طبقة: نضيف بأداة القلم الشكل التالي: نزيل بعض الجوانب بأداة الممحاة ونخفض من شفافيته قليلا لنتحصل على الصورة النهائية: ترجمة -وبتصرّف-للدّرس: Créer un ruban réaliste avec photoshop.

في هذا الدرس، سنتعلم كيفية تصميم كرة لامعة ثلاثية الأبعاد، وذلك باتباع خطوات بسيطة باستخدام برنامج Photoshop، وستكون هذه هي النتيجة النهائية لهذا الدرس: افتح مشروعًا جديدًا على Photoshop بالإعدادات التالية: الأبعاد: 1600x1050pixels.الدّقة: Resolution 720Dpi.نمط الألوان: Color Mode RVB8bit.نضيف طبقة لون متدرج من القائمة: Menu > Layer > New Fill Layer > Gradient نقوم بعمل طبقة Layer جديدة وذلك بالنقر على Ctr+Shift+N وبأداة تحديد الشكل المستطيل M) Marquee Tool) نحدد الشكل المبين في الصورة: نأخذ أداة الطلاء (G) باللون الأسود ونملأ الجزء المحدد مسبقا: من القائمة: Menu> Filter > Render > Lens Flare ثم إلى القائمة: Menu > Filter > Distort > Polar Coordinates نعكس الطبقة محوريا من القائمة: Menu > Edit > Transform Path > Flip Vertical ثم من جديد إلى القائمة: Menu > Filter > Distort > Polar Coordinates بأداة تحديد الشكل الدائري M) Marquee Tool) نحدد دائرة حسب الشكل: ومن القائمة: Menu > Layer > Layer Mask > Reveal Selection ثم: Menu > Image > Adjustments > Hue/Saturation نغير حجم الكرة عن طريق الاختصار Ctrl+T: ثم نغير في خصائص الدمج Blending Options الخاصة بالكرة كما يلي: ننسخ طبقة الكرة Ctrl+J ثم نعكس الطبقة محوريا من القائمة: Menu > Edit > Transform Path > Flip Vertical بأداة الممحاة (E) نزيل الجزء السفلي من الكرة ثم نخفض من قيمة الشفافية Opacity لنحصل على الصورة: بأداة الشكل الدائري (U) نرسم دائرة سوداء اللون: ثم نذهب إلى القامة: Menu > Filter > Blur > Gaussian Blur نخفض من قيمة الشفافية إلى 65: ننسخ الكرات ونغير في لونها لنحصل على النتيجة النهائية. ترجمة -وبتصرّف-للدّرس: Créer des sphères 3D avec Photoshop.