المحتوى عن 'أيقونات'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • نصائح وإرشادات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • التجارة الإلكترونية
  • الإدارة والقيادة
  • مقالات ريادة أعمال عامة

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
  • جافاسكريبت
    • Node.js
    • jQuery
    • AngularJS
    • Cordova
  • HTML
    • HTML5
  • CSS
  • SQL
  • سي شارب #C
    • منصة Xamarin
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • Sass
    • إطار عمل Bootstrap
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة Swift
  • لغة R
  • لغة TypeScript
  • سير العمل
    • Git
  • صناعة الألعاب
    • Unity3D
  • مقالات برمجة عامة

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • نصائح وإرشادات
  • مقالات تصميم عامة

التصنيفات

  • خواديم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • مقالات DevOps عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • التسويق بالرسائل النصية القصيرة
  • استسراع النمو
  • المبيعات
  • تجارب ونصائح

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عمل حر عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 6 نتائج

  1. ليس لدينا وقتٌ كثير. حتى وأنت تستقطع وقتًا لقراءة هذا المقال، فإنّ إشعارات سطح المكتب بدأت فعلًا في التراكم؛ فترى رسائل سلاك (Slack) تزداد، وتسمع الهاتف يهتزّ؛ ممّا يعني التزاماتٍ أكثر ومهامّ أخرى تحتاج لإضافتها إلى قائمة المهامّ التي لا تنتهي. يتسبّب هذا الكمّ المتزايد من الضّغط في جعل مهامّ مثل تقويم تجربة المستخدم (User eXperience) على موقعك تبدو استغلالًا تافهًا للوقت. بينما الواقع أنّ كلّ ما قمت به من تصميم رسومات، وإنشاء محتوى، وتطوير ويب، وتحسين لمحرّكات البحث، وتسويق عبر شبكات التواصل الاجتماعي، وإعلانات مموَّلة يمكن أن يذهب أدراج الرياح إنْ لم تحسّن تجربة المستخدم. تقع الكثير من الشركات في فخّ التركيز المبالغ فيه على المبيعات وحركة البيانات، دون تدعيم الموقع الذي ترسل إليه الزوّار. السقوط في شَرَك لعبة الأرقام طريقة مؤكَّدة لتحطيم سمعتك الإلكترونيّة، والإضرار بتماسك الهويّة التجاريّة (Brand). ستجد أنّ النجاح في مشهد رقميّ تُخصِّص فيه الكثير من الشركات موارد مهمّة لإرضاء الزوّار أمرٌ صعبٌ جدًّا، إنْ لم تكن تدرك قيمة زوّار موقعك (زبنائك). تدرك – إذن – أهميّة تجربة المستخدم. تدرك كذلك ألّا وقت كثيرًا لديك. كيف يمكنك الرفع لأقصى حد من مستوى الاستفادة من تحليل تجربة المستخدم، في وقت قصير؟ إنْ كنت تعرف هويّتك التجاريّة جيّدًا وتفهم مالذي تبحث عنه، فيمكنك إكمال تقويم تجربة المستخدم في ما لا يتجاوز خمس دقائق. سواءٌ أخذت خمس دقائق مرّةً في الشهر، أو مرّةً في الأسبوع، فتستطيع إجراء تحسينات كبيرة في معدّل الارتداد (Bounce rate)، ومعدّلات التحويل (Conversion rates)، و – عمومًا - العائد على الاستثمار (Return on investment, ROI) من حملاتك التسويقيّة. الجانب البصري (دقيقتان) تشبه ردّةُ فعل شخصٍ يزور موقع ويب لأوّل مرة ردّةَ فعله عند أوّل لقاء بشخص لا يعرفه، إذْ ستنبني ردّة الفعل هذه على الجانب البصريّ. تضع الطبيعة البشريّة وزنًا كبيرًا للانطباع الأوّل، فالبشر يرغبون في الشعور بأنّهم محقّون في حكمهم، حتى وإنْ لم يجدوا الفرصة لإلقاء نظرة أخرى. مهما قيل، فلن يكون ذلك كافيًّا لوصف أهميّة الانطباعات الأولى لزوّار موقع ويب، في ظلّ وجود هذا العدد المَهول من الشركات على الشبكة للاختيّار بينها. يكفي زرّ خارج عن موقعه، أو فقرة بمحاذاة خاطئة، أو خطأ مطبعي، لكي يرتدّ الزوّار إلى موقع منافس. حتى إنّ موقعًا خاليًّا من الأخطاء يمكن أن يتسبّب في انطباع سيّئ إنْ لم يتمسّك بما فيه الكفاية بالهويّة التجاريّة، والهدف العام للرسائل التي يريد تمريرها. خصّص دقيقتيْن لمراجعة الجانب البصري للموقع من وجهة نظر الزائر، وتأكّد من تسجيل أي اختلالات، أو محتوى خارج الإطار المخصّص له، أو ترتيب غير مناسب لمخطّطات الصفحة. ركّز – خصوصًا – على العناصر البصريّة التاليّة عند إجراء تحليل تجربة المستخدم في خمس دقائق: الألوان: هل هي متوافقة مع الهويّة التجاريّة؟ هل اختير الرمز السداسي العشري بما يتوافق مع هدف الفقرة أو الصفحة؟ هل الألوان ناعمة جدًّا أم خشنة جدّا؟ سهولة القراءة: هل الموقع سهلُ القراءة على كلّ من الأجهزة الجوّالة وأجهزة سطح المكتب؟ هل يُميَّز المحتوى المناسب على كلّ صفحة؟ الخطأ في المحاذاة: حتى الاختلالات البسيطة يمكنها إبداءُ الكثير عن عمل شركتك وأخلاقيّاتها. إنْ لم يكن بمقدورك إتقانُ موقعك الخاصّ فكيف ستتمكّن من توفير خدمات أو منتجات جيّدة لزبنائك المحتملين؟ التأثير العامّ: ما مدلول الموقع، أو صفحة منه، من وجهة نظر بصريّة؟ هل يتماشى موقعك ومحتواه مع الشخصيّة التي تعكسها هويّتك التجاريّة؟ التفاعل (دقيقتان) اطمأننتَ على أنّ الانطباع الأوّل للزوّار جيّد. يأتي الدّور الآن على الأمور الأكثر جدّيّة. هل أنت جاهز لإكمال العمل؟ هل أنت جادّ؟ تحتاج لأن تجعل تجربة المستخدم متناسقةً تمامًا من وجهة نظر بصريّة وتفاعليّة، حتى يقتنع الزوّار فعليًّا بما تقدّمه. وفّر لزوّارك العمق الذي ينتظرونه من موقع بميزات بصريّة فريدة. بدون الوظائف المناسبة لتكملة التعديلات البصريّة على الموقع، لن يبقى الزوّار طويلًا، ولن يستمرّوا بالتصفّح إنْ لم يجدوا الإجابات التي يحتاجونها على نحو أسهل أو أسرع من المواقع المنافسة. إنْ كان الجانب الوظيفي من الموقع يحتوي على أخطاء، أو بطيئًا، أو مخادعًا فقد يتسبّب ذلك في إبعاد المستخدِم عن التجربة الغامرة التي تحاول إنشاءها عبر التصميم البصري والمحتوى. خذ الوقت لتقويم العناصر التقنيّة التاليّة بهدف الرفع من مستوى تجربة المستخدم: الأيقونات: هل تلبّي الأيقونات حاجات هويّتك التجاريّة أو المجال الذي تعمل فيه؟ هل الرسومات واضحة ومناسبة للمعايير التي حدّدتها؟ هل يمكن للمستخدمين النقر على الأيقونات للحصول على معلومات أكثر إنْ كانوا يريدون ذلك؟ الأزرار: تأكّد من حصول المستخدمين على نفس القابليّة للتفاعل عبر الموقع، سواءٌ تعلّق الأمر بنصوص الدعوات إلى إجراء (Call-to-action)، أو ألوان الأزرار وأحجامها. الروابط: هل تعمل الروابط جميعًا على النحو المرجو؟ هل تُميَّز الروابط التشعبيّة بنفس اللون، وهل تسهُل رؤيتها؟ النوافذ المنبثقة (Pop-ups) والقوائم المنسدلة (Drop-downs): هل تعمل العناصر البصريّة المُجمَّعة، سواءٌ كانت عناصر قائمة بذاتها أم جزءًا من قائمة، بطريقة مناسبة؟ وهل تندمج في مساحة معيَّنة دون أن تتجاوزها أو تحجُب محتوى مهمًّا آخر؟ المؤشّر: كيف يتغيّر مؤشّر الفأرة عند التفاعل مع الموقع؟ تأكّد أنّ كلّ تغيير متناسق ومتناسب مع الهدف المُراد منه. الزيارة (دقيقة واحدة) تحتاج للقيّام بإجراءات الدقيقة الأخيرة، والانتباه إلى كلّ تفصيل للتأكّد من أن تكون إجابة المستخدم على السؤال هل أنت راضٍ هي "نعم". من المحتمل جدًّا أن يتحوّل الزوّار إلى زبناء، إنْ خصّصت وقتًا لتقويم تجربة المستخدم من الجانب البصري والوظيفي. رغم ذلك، تبقى خطوة أخيرة تتمثّل في تقمّص شخصيّة زوّارك للتأكّد من فاعليّة تجربة المستخدم وجاهزيّتها للرّفع من مداخيلك. يجب أن تسجّل - أثناء النظر في العناصر البصريّة والوظيفيّة - ملاحظات بالتعديلات التي يمكن إجراؤها. إنْ كانت لديك دقيقة إضافيّة فتصفّح موقعك، كما لو كنت زائرًا، منذ لحظة دخولك الموقع وإلى الخروج منه. هل يستطيع زائر جديد تصفّح الموقع بسهولة من أجل العثور على معلومات يحتاجها، أو البحث عن خدمات تقدّمها، أو تقرير شراء منتج؟ فكّر أثناء تحليل زيّارة مستخدم لموقعك، أنّ الموقع عبارة عن جسر وكلّ صفحة عبارة عن مركبة تنقل المستخدمين من جهة (شخص في حاجة لشيء مّا) إلى أخرى (زبون راض). إنْ لم تكن المركبات موجودة، أو كانت غير صالحة، فسيكون احتمال الانتقال من طرف إلى آخر ضئيلًا جدّا. اجعل تصفّح الموقع سلِسًا للمستخدم كلّ ما تعلّق الأمر بعمليّة شراء. الهدف من تجربة المستخدم هو نقل المستخدمين من النقطة "أ" إلى النقطة "ب" بدون المرور عبر حواجز، أو طرق مسدودة، أو حتى تشقّقات. قوّم تجربة المستخدم على موقعك، حتى ولو لم تكن لديك سوى خمس دقائق، من أجل الحصول على تدفّق مستمرّ من الزوّار المهتمين، والزبناء الراضين. ترجمة – بتصرّف – للمقال How to Evaluate Your UX in Under 5 Minutes لصاحبه Kayla Naab.
  2. لا يشبه تصميمُ موقع تجارة إلكترونيّة أيّ مشروع ويب آخر، إذ يجب أن تفكّر في الهويّة التجاريّة (Brand) إلى جانب تجربة المستخدم (User experience) والتسويق المعتمد على التصميم. أقلّ ما يُقال هو أنّ الأمر يمكن أن يكون صعبًا. رغم ذلك، توجد مصادر مجانيّة كثيرة يمكن استخدامها لجعل العمل أسهل. مجموعات الأيقونات تعني – بالتأكيد – الكثير من الأشياء لتصميمها. يمكنك اقتصادُ ساعات عملٍ طويلة، وربّما أيّام، باستخدام حزمة أيقونات مجانيّة بدلًا من تصميم أيقونات جديدة. توفّر المجموعات المجانيّة أدناه تعدّدًا في الأنماط، وستجد من خلالها الكثير ممّا يمكن النظر فيه. حزمة 54 أيقونة مجانيّة للتجارة الإلكترونيّة تتضمّن هذه الحزمة الشاملة 54 أيقونة تتميّز بخطوطها البسيطة التي تصلُح للوظائف الشائعة في مواقع التجارة الإلكترونيّة. صمّم Virgil Pana الحزمة ووفّرها مجانًا على موقع Dribbble. تأتي الحزمة كاملةً بصيغة ملفّات PSD، وهي – حقًّا – من أفضل الحزم الموجّهة لمواقع التجارة الإلكترونيّة. خصوصيّة الحزمة في أنّه يمكن تضمينها في أي موقع. النمط التقليلي (Minimalist) مستخدَم كثيرًا، لذا فهو يستحق التجربة، بغض النظر عن المشروع الذي تعمل عليه. مجموعة أيقونات خضراء بسيطة هذه حزمة مجانيّة أخرى موجودة على Dribbble، تركّز على أيقونات خضراء أنيقة. فنيًّا، يمكن تغيير المخطّط اللوني بسهولة عن طريق Illustrator. أنشأ المصمّم Pavel Kozlov هذه الحزمة التي تضمّ 40 أيقونة، وجعلها في المتناول قبل سنوات. رغم ذلك، ما زالت الحزمة قابلةً للاستخدام، تمامًا كما كانت من قبل. زر صفحة Gumroad التاليّة لتنزيل المجموعة. عادةً، يُدفَع مقابل العناصر الموجودة على موقع Gumroad، إلّا أنّ هذه الحزمة مجانيّة بالكامل. يمكن - لمن يرغب في ذلك – إرسال مكافأة صغيرة للمصمّم على جهوده، إلّا أنّه ليس شرطًا للحصول على هذه الأيقونات الخضراء الجذّابة. أيقونات تبضّع (Shopping) متجهيّة مسطَّحة (Flat vector) التصميم المسطَّح (Flat design) توجّه في التصميم يحظى بالشعبيّة. طُبِّق التصميم المسطَّح في كلّ مكان، بدءًا من تطبيقات الجوّال إلى مواقع الويب، بل وحتى الأيقونات. ألق نظرة على هذه المجموعة من أيقونات التبضّع المتجهيّة التي تضمّ 80 أيقونة مختلفة. بعض أيقونات المجموعة ملوَّنة، وأخرى أيقونات بخطوط بسيطة، إلّا أنّها جميعًا سهلة الاستخدام والتخصيص. يمكن تنزيل الحزمة بصيغة PNG أو بصيغتي AI و EPS المتجهيّتيْن، كما أنّه يُسمَح باستخدامها ضمن مشاريع تجاريّة. انتبه إلى أنّ رخصة الأيقونات تطلُب وضعَ رابط إحالة إلى الموقع الأصلي. أيقونات شحن وتجارة إلكترونيّة يتضمّن سوق EpicPxls الإلكتروني موارد عاليّة الجودة. يعدّ هذا السوق مكانًا رائعًا للمصمّمين لينشروا فيه منتجاتهم المجانيّة والمدفوعة، وبالتالي بناء سمعة لأعمالهم. ألق نظرة على مجموعة الأيقونات هذه التي يقدّمها فريق EpicCoders. جاوزت المجموعة أكثر من ألفيْ تنزيل، وهي حقَّا فريدة. بنظرة خاطفة على المجموعة يمكن فهمُ مصدر فرادتها، إذ تبدو نابضة، وشبيهة بالأيقونات الكرتونيّة، لكن دون مبالغة. تناسب الحزمة كثيرًا المواقع التقليليّة (minimalist sites)، إلى جانب أي موقع تجاري يوافق مخطّط ألوان الحزمة. مجموعة أيقونات مرسومة يدويّا قد يكون صعبًا تصميمُ صفحة بعناصر مرسومة يدويّا، إلّا أنها تُضيف لمسة إبداع لكلّ موقع تُضمَّن فيه، وهو ما ينطبق بالتأكيد على هذه الأيقونات المجانيّة. تُركّز هذه الحزمة لأيقونات التجارة الإلكترونيّة بالكامل على العناصر المرسومة يدويّا. توجد جميع الرسومات التي قد تحتاج إليها بدءًا من صناديق الهدايا إلى سلّات التبضّع الصغيرة وميزات تسديد المدفوعات. يُنصَح باستخدام هذه المجموعة أثناء تصميم صفحة هبوط، وليس في واجهات المستخدم الخاصّة بتسديد المدفوعات. يمكن أن تواجه مشاكل في جعل هذه الأيقونات تمتزج طبيعيًّا في واجهات التسديد، لكن يمكنها أن تجلب الانتباه في الصفحة الرئيسيّة لموقع تجاري. حزمة بطاقات دفع لا يكتمل موقع التجارة الإلكترونيّة بدون وجود أيقونات لبطاقات الدفع. إنْ كنت تصمّم متجرًا يقبل بطاقات الدفع الإلكتروني فيجدُر بك إلقاء نظرة على هذه الأيقونات المتاحة للملك العام (رخصة CC0)، والمنشورة على موقع Dribbble. صمّم Guy Levin تسع أيقونات مختلفة لبطاقات دفع، وجمعها كلّها في ملف Illustrator واحد. الأيقونات أنيقة، سهلة التخصيص ويمكنها وضعها في أي مكان من الصفحة. أيقونات خطيّة للتجارة إلكترونيّة نشر موقع Pixlov حزمته الخاصّة من أيقونات مواقع التجارة الإلكترونيّة، وهي حزمة تعتمد على نمط الأيقونات الخطيّة. قد لا تجد أنّ 33 أيقونة عدد كبير، إلّا أنّ تصاميم عدّة توجد في هذه المجموعة للاختيار بينها. لا يُنصَح باستخدام هذه الأيقونات لصفحة تسديد المدفوعات، إذ أنّها مناسبة أكثر لصفحات الهبوط أو صفحات "ميزات المتجر". يمكن أن تناسب المجموعة كذلك النشرة البريديّة وتساعد في زيادة نسبة المبيعات. مشروع Noun للتجارة الإلكترونيّة إنْ لم تكن تعرف مشروع Noun فيجدر بك التعرّف عليه. يجمّع الموقع الكثير من حزم الأيقونات المجانيّة من أماكن مختلفة على الشبكة ومن مصمّمين كثر عبر العالم. يوجد الكثير ممّا يمكن اكتشافه، إلّا أننا في هذا المقال ننصح بمجموعة الأيقونات الخاصّة بالتجارة الإلكترونيّة التي صمّمها Anton Scherbik. هذه المجموعة من الأيقونات من أبسط أيقونات الخطوط، وتتضمّن خيّارات رائعة مثل السلّات والحقائب بأنماط مختلفة. أيقونات الدّفع والتسليم تقوم مدوّنة Codrops بعمل رائع. تنشُر المدوَّنة دوريًّا مقالات عاليّة الجودة تتضمّن موادّ مجانيّة يمكن استخدامها في مشاريعك الخاصّة. من أمثلة ذلك، هذه المجموعة من أيقونات تسديد المدفوعات التي صمّمها EpicPxls. تحوي المجموعة 35 أيقونة فريدة بتأثير حشو لن يمكنك العثور عليه في مكان آخر. تمتد ألوان الحشو دائمًا إلى الخارج قليلًا، وهو أوّل شيئ – ربما – تلاحظه. تقدّم المجموعة بلا شك لمسةً خاصّة. مجموعة أيقونات مُخصَّصة أخيرًا – وليس الأقل أهميّة – هذه المجموعة الرائعة من الأيقونات بواسطة Graphicboat. قد لا تناسب هذه المجموعة جميع الاستخدامات، إلّا أنّها يمكن أن تجذب الانتباه بسرعة وتثير فضول الناس لمعرفة المزيد عن متجرك. يمكن القول إنّ هذه الأيقونات ستتناسب أكثر مع خلفيّة ترويسة، أو في صفحة "ميزات المتجر"، أو ربما في مكان قريب من زرّ الدعوة لإجراء ( CTA). كانت تلك قائمتنا من الأيقونات المجانيّة. إنْ لم تجد ما تبحث عنه، فيمكنك استخدام محرّك بحث للعثور على خيّارات أكثر. تظهر مجموعات مجانيّة جديدة كلّ شهر، لذا يمكن أن تجد ضالتك فيها. ترجمة – بتصرّف – للمقال ‎10 Free Icon Sets for Ecommerce UI Design لصاحبه Jake Rocheleau.
  3. تظهر على الدوام توجهات مُختلفة للتصميم والتي تُطلقها وتقف خلفها الشركات الكبيرة المؤثرة على الأسواق، وتُعدّ تقنيّة التصميم بالظل الطويل "Long Shadow Design" أحد أكثر التوجهات المُلفتة والتي ظهرت مع إعلان شركة Apple لنظامها iOS 7 وأصبحت تُكمّل جنباً إلى جنب تقنيّة التصاميم المُسطحة "Flat designs" والتي أظهرتها شركة مايكروسوفت Microsoft جلياً مع نظامها Windows 8. الظل الطويل "Long Shadow" ببساطة!هو عبارة عن ظل مُنحني بزاوية 45 درجة في العادة ويُمكن رسمه في الطرف اليميني أو اليساري للتصميم (عادة يُستخدم الظل على يمين التصميم للناظر – أي كأن هُناك ضوء مُسلّط من أعلى اليسار ليظهر الظل في اليمين)، وبدأ استخدام التأثير مع الايقونات "icons" إلّا أنه امتد ليشمل الكتابة والرسومات والأجهزة بحسب نظرة المُصمم وإبداعه في التطبيق. أمثلة تطبيقيّة: على اليمين Skype من تصميم JustD. على اليسار Flat Club من تصميم miguelcm. تطبيق عملي على تأثير الظل الطويل "Long Shadow":بعد أن تعرفتم على تاريخ انطلاق التأثير سنكون سعداء لأخذكم بجولة تطبيقيّة تشرح آلية تنفيذ التصميم عبر برنامج Adobe Photoshop. سنخرج بدرسنا بالنتيجة التالية: تلميح: كما هو معروف في عالم التصميم بأن النتيجة النهائية قد تظهر بعدة طرق قد يكون بعضها مُعقّد وصعب وبعضها سريع وجميعها يؤدي الغرض. أيضا نود أن نشير بأنه وبعد انتشار توجّه التصميم بالظل الطويل ظهرت العديد من المواقع الالكترونية التي وفّر بعضها تطبيقات مأجورة و مجانيّة تُمكّن المُستخدمين ممن ليست لديهم خبرة في التعامل مع برامج التصميم من تطبيق الظل الطويل على الرسومات والشعارات الخاصة بهم، أيضاً هُناك إضافات مكتبية وإضافات إلى برامج التصميم ذاتها وفّرت نفس الفكرة، إنما في العادة لا تُوجد نتائج صحيحة وواضحة بشكل كامل باستخدام تلك التطبيقات التي تعتمد على نقاط وخوارزميات مُحددة لذا فإن مُعظمها لن تُلبي الاحتياج المطلوب بشكله الكامل. سنوفّر لكم بهذا الدرس الأساس الصحيح لعمل تأثير الظل الطويل "Long Shadow" بخطوات واضحة عبر استخدام برنامج Adobe Photoshop. لنبدأ بالتطبيق! الخطوة الأولى:1 - افتح مساحة عمل جديدة في Adobe Photoshop واختر الإعدادات كما في الصورة أدناه: 2- اختر لون مُناسب للخلفية، سوف نختار اللون (714a76 #) في تصميمنا: 3- اكتب الاسم المُراد التطبيق عليه واختر له اللون الأبيض (ffffff#) ثُم قم بتوسيطه داخل مساحة الرسم، كما هو موضّح أدناه: (تلميح: تأثير الظل الطويل سوف يبرز بشكل جمالي أكبر مع الخطوط العريضة) الخطوة الثانية:1- تحديد زاوية 45 درجة (وهي زاوية ميلان الظل المُراد رسمه) من خلال اتباع ما يلي: اضغط على (CTRL + " / أو حرف ط) لإظهار الشبكةقم بتقريب الصورة من خلال استخدام أداة (Zoom Tool – أو العدسة المُكبِّرة) أو بالضغط مُباشرة على الحرف Zارسم سطر بشكل يدوي من خلال استخدام أداة (Line Tool) أو بالضغط مُباشرة على الحرف Uقُم بإدارة السطر بين زاويتيّ إحدى خانات الشبكة كي يُصبح ميلانه بزاوية 45 درجة (ما يهمُنا هُنا هو تحديد الميلان بزاوية 45 درجة وطريقتها كانت بتقسيم زوايا المُربع في المُنتصف كون أن زواياه قائمة "90 درجة"، لاحظ السطر الأخضر كيف يخترق مُربعات الشبكة بالرسم التوضيحي) 2- كرّر السطر الأخضر (مُحدِّد ميلان الظل) بنسخه وتوزيعه على الزوايا اليمينية للكلمة كما هو مُوضّح بالشكل التالي: الخطوة الثالثة:1- رسم الظل الطويل من خلال اتباع المراحل التالية: - اختر أداة البن تول (Pen Tool) وضع إعدادات الرسم كما هو مُوضّح 2- اعمل على الرسم بأداة (Pen Tool ) بالوصل بين نُقاط الزوايا العُلوية اليمينية كما هو موضّح بالصور: النتيجة: 3- كرّر نفس طريقة العمل السابقة لرسم ظل للنُقاط كما هو مُوضّح: النتيجة: الخطوة الرابعة والأخيرة:1- العمل على دمج ظل الكلمة مع ظل النُقاط من خلال اتباع ما يلي: - اذهب إلى نافذة الطبقات "Layers" وحدد طبقات الظلال من خلال إبقاء الضغط على زر CTRL واختيار الطبقات المُراد دمجها بزر الفأرة الأيسر. - بعد التحديد اضغط بزر الفأرة الأيمن واختر Merge Layers (( بالإمكان الاستعانة بالاختصار CTRL + E )) 2- العمل على تفتيح الظل لإخراجه بشكل واقعي ومُناسب: - اذهب إلى نافذة الطبقات "Layers" واضغط بزر الفأرة الأيمن على الطبقة الخاصة بالظل واختر نافذة Blending Options ثُم توجّه إلى نافذة إعدادات التدرج Gradient Overlay وحدّد ألوان التدرج للظل. لرسمتنا قُمنا بتحديد اللون الخفيف نفس لون الخلفية (714a76 #) ليظهر تلاشي للظل عند ابتعاده. كما اخترنا للظل الثقيل اللون (523a55 #). النتيجة النهائية للعمل
  4. سنتعلم طريقة تصميم مشغل صوتيات Audio Player باستخدام برنامج أدوبي اليستريتور، حيث سنعتمد في درسنا هذا على تقنية التصميم المسطّح (flat design). بداية سنحتاج إلى تحميل هذه الملفات: خط Latoحزمة الأيقوناتمع قليل من الصّبر والوقت (أقل من 30 دقيقة).إعدادات مساحة العمل1. نقوم بفتح ملف جديد خاص بالدّرس، نختار اسمًا للملف قد يكون Audio Player أو أي اسم آخر ثم نحدد قياسه 1280px*1280px ونتأكّد أننا اخترناه مخصص للويب ( profile: web). (عادة نختار المقاسات الكبيرة للتصميم حتى لا يتأثر عند تصغيره) 2. باستخدام أداة Rounded Rectangle Tool نرسم شكلا ونختار له المقاسات التّالية: 598px*244px*8px، ثم نحدد له اللون EFEFEF#: 3. باستخدام أداة المستطيل (M) نرسم مستطيلا نقوم بوضعه فوق الشّكل الأوّل كما في الصورة ونحدد اللون D35353 #: 4. نقوم بتحديد الشّكلين بالضّغط على CTRL+A، أوعن طريق الضّغط على الشّكلين وفي نفس الوقت نضغط CTRL+Shift: 5. بعد تحديد الشّكلين نختار الأداة (Shape Builder tool (Shift+M لجعلهما متناسقين: 6. نستطيع فعل ذلك بطريقة أخرى بالضّغط على الجزء الذي نريد حذفه، نلاحظ أنّ ذلك الجزء قد أصبح مستقلا عن الشّكل، فنقوم مباشرة بحذفه. 7. نُعيد تطبيق الخطوتين 4 و6 لتصميم مؤشّر المسار الخاص بمشغل الموسيقى فنتحصل على الشكل التالي: 8. نقوم بإضافة بعض اللّمسات على التّصميم، كإضافة عنوان الملف الموسيقي، مدّته الزمنيّة، والملف التّالي. نختار نوع الخط: Lato Regular، مقاسه: font، ولونه: 7C7C7C#: 9. نقوم بتحريك مؤشّر الحجم (للتوضيح بأن الملف الموسيقي قيد التّشغيل)، وذلك باستخدام أداة rounded rectangle ورسم مستطيل فوق الشكل السَابق، نختار له المقاس: 422px*14px*15px radius واللون: CCCCCC#. 10. الآن نضيف مستطيل آخر على المستطيل السّابق نختار له اللّون d84848 #، ثمّ نحدد مسار كلاً من المستطيل الأوّل والثاني. باستخدام أداة Shape Builder tool نقوم بحذف الجزء الزّائد من المستطيل الذي في الأعلى فنحصل على هذا الشكل التالي: 11. باستخدام أداة (Ellipse tool (L نرسم دائرة ونختار لها اللون d74948 #، ثم نقوم بإضافة أيقونة الصّوت الموجودة في ملف الأيقونات كما يظهر في الصّورة: تصميم أزرار التحكم الخاصة بالتشغيل12. نرسم مستطيلا نضعه على الخلفية الرّئيسية للمشغّل ونختار له اللّون d85656 #: 13. نحاول أن نجعل المستطيل على شكل دائري وذلك باستخدام أداة the Shape builder tool وحذف الأجزاء الزّائدة: 14. الآن، نضيف العناصر الموجودة في ملف الأيقونات: تصميم قائمة التشغيل15. نقوم بنسخ كل ما سبق لنا تصميمه: 16. نقوم بتكبير الخلفيّة الرّئيسية بمقدار 460px، أو أي قيمة تريدها: 17. نقوم بتمديد خلفيّة العناصر بحيث تصبح أكبر من الخلفيّة الأساسية، ثم نحذف الأجزاء الزّائدة باستخدام أداة the Shape Builder. الهدف من ذلك هو جعل الجزء الذي يحتوي على أزرار التحكّم لا يظهر بشكل دائري في الأطراف. 18. نضع للقائمة عُنواناً: 19. باستخدام أداة the rectangular grid tool، نرسم شبكة تحتوي علي 6 تقسيمات أفقية فقط (نضع 0 أمام التقسيمات العموديّة): 20. نقوم بتوسيع الشّبكة لتتناسب مع خلفيّة مشغل الصوتيات، ونغير قيمة opacity إلى حوالي 20%، وباستخدام أداة the scissors tool نحذف الخط الأفقي: 21. لاستخدام أداة (scissors tool (C، يكفي أن نحدّد جزء من المسارالذي نريد حذفه ونضغط مرتين، ثم نستخدم زر الحذف delete من لوحة المفاتيح أو زر backspace: 22. الآن الشبكة جاهزة، نقوم بوضع الأدوات الموجودة في ملف الأيقونات والذي سبق وقمنا بتحميله ثم نضع عنوانا للقائمة: 23. لتصميم شريط التّمرير، نقوم برسم مستطيل باستخدام الأداة rounded rectangle tool، نحدّد له اللون cccccc# أما لمؤشّر التوقف فنختاراللّون 262626# مع استخدام أداة the Shape Builder tool: 24. أنهينا تصميم واجهة Audio Player، بإمكانك أن تحفظ العمل على شكل: AI, PSD, JPG, PDF أو SVG. ترجمة -وبتصرّف- للدرس How to Create a Music Player UI Using Adobe Illustrator لصاحبه James Richman.
  5. في هذا الدّرس سنتعلّم طريقة تصميم حافظة أوراق جميلة وبسيطة باستخدام برنامج أدوبي اليستريتور وإضافة بعض التأثيرات مثل الظلال shadow، التدرج اللوني gradient، والإضاءة highlight. 1. نقوم بتشغيل برنامج Adobe Illustrator، ونضغط (Ctrl+ N) لفتح ملف جديد ثمّ نختار الإعدادات التَّالية: الأبعاد: 2500x1800px.الدّقة: 300ppi.نمط الألوان: CMYK.ونتأكّد أنّ الخاصيّة Align New Objects to Pixel Grid لا توجد أمامها علامة، ثم نضغط OK: 2. نستخدم أداة المستطيل (M) ونرسم مستطيلا يكون مقاسه 780x1080px. نتأكّد أنّنا لم نختر قيمة لـ stroke ثم نحدّد الشّكل ونتّبع المسار التّالي: Stylize > Round Corners ونختار قيمة نصف القطر radius بـ 10px نستمر في تحديد المستطيل ونتبّع المسار التّالي Object > Expand appearance 3. الآن باستخدام Appearance Panel نختار اللون : C=100 M=0 Y=0 K=10. بعدها نقوم بتحديد قيمة stroke بـ 3px أمّا الألوان فنختار C=100 M=0 Y=0 K=50. نتبع المسار التالي: Window > Stroke ونحدّد الخاصية Align Stroke to Outside. نقوم بإضافة stroke جديد كما هو موضّح في الصورة ونختار له اللون C=90 M=0 Y=0 K=0 ونحدد العرض بـ 2px. الآن من اللوحة الخاصة به (Window > Stroke) نختار Align Stroke to Inside. 4.نحدّد الشّكل ونقوم بتعبئته من جديد باللون C=100 M=0 Y=0 K=0، ثم نطبق عليه التأثير التالي Effect > Sketch > Graphic Pen. الآن في علبة الحوار التي تظهر، نقوم بتغيير القيمة حتى نحصل على التأثير الذي يظهر في الصورة ة مع تغيير درجة opacity إلى 10% واختيّار الخاصيّة Multiply (يمكنك اظهار علبة الخصائص عن طريق Window >Transparency) نقوم بحديد الشّكل ونتبع المسار التّالي Effect > Stylize > Drop Shadow، ثم نختار القيم كما تظهر في الصورة. نطبق نفس التأثير لكن مع تغيير القيم كما هو مبين (ستظهر لك علبة حوار تخبرك أنه سبق وطبّقت نفس التأثير كل ما عليك فعله هو الضغط على Apply New Effect) 5.نرسم مستطيل آخر مقاسه 32x900px نختار له اللون: C=100 M=0 Y=0 K=30، نضيف طبقة جديدة من اللّون لكن باستخدام Patters وذلك من خلال اتباع المسار التالي: Window > Swatch Libraries > Patters . بالنسبة لـ stroke الاوّل نختار اللون: C=100 M=0 Y=0 K=70 والعرض :3px ثم نتبع المسار التالي Window > Stroke ونختار Align Stroke to Outside. نضيف stroke جديد (كما يظهر في الجزء المكبر من الصورة) نحدد اللون بـ: C=70 M=0 Y=0 K=0 والعرض ب: 2px ثم ومن لوحة التحكم الخاصة به نختار Align Stroke to Inside. نضيف تأثير جديد للشكل Effect > Stylize > Drop Shadow ونختر القيم الموضحة في الصورة: 6.نحدد الشكل السابق ونتبع المسار التالي: Object > Envelope Distort > Make with Warp. نختار النمط Bulge أما قيمة bend نحددها بـ 50%: 7.ننسخ الشكل الذي قمنا بعمله في الخطوة 2 بالضغط على (Ctrl + C > Ctrl +F) ونقوم بوضعه كما تُظهر الصّورة المرفقة مع التأكد بأننا وضعناه في آخر قائمة الطّبقات Layers 8. نرسم مستطيلا مقاسه 330x200px بأي لون تختاره نحاول وضعه منتصف الشّكل السابق بشكل أفقي كما يظهر في الصورة ثم نتبع المسار التالي Window > Pathfinder ونختار الخاصية الموضحة أيضا في الصورة: 9. في هذه الخطوة سنحتاج إلى تحميل سكربت Round Any Corner (اضغط على الرابط للتحميل المباشر). ثم وباستخدام أداة التحديد (A) نقوم بتحديد نقاط الزاوية الموضحة في الصّورة ونتبع المسار التالي: File > Scripts > Other Script. نقوم بفتح السكربت الذي قمنا بتحميله وندخل القيمة 10px ونضغط OK. الشكل الأساسي من تصميمنا قد إنتهى، في الجزء الثاني سنقوم بتصميم المشابك والأوراق. هذه هي الصورة النهائية للتصميم بعد إكمال الجزء الثاني من هذا الدرس: ترجمة -وبتصرّف- للدّرس How to create a Nice and Simple Clipboard in Adobe Illustrator – part 1، لصاحبه Andrei Urse.
  6. في هذا الدّرس سنتعلّم طريقة تصميم حافظة أوراق جميلة وبسيطة باستخدام برنامج أدوبي اليستريتور وإضافة بعض التأثيرات مثل الظلال shadow، التدرج اللوني gradient، والإضاءة highlight. في الجزء الأول من الدرس تعلمنا كيف نصمّم حافظة أوراق جميلة وبسيطة، الآن سنكمل الدرس بإضافة الأوراق والمشابك 10.نرسم مستطيلا مقاسه 280x27px، ثم نتبع المسار التالي: Window > Swatch Libraries > Gradients > Metals نقوم باستخدام التدرج اللوني Window > Gradient ونحدد القيمة 90 درجة. باستخدام الأداة (+)Point Tool نقوم بإضافة نقطتين كما هو موضح في الصورة.الآن وباستخدام الأداة Arrow Tool نسحب النقطة اليسرى مسافة 15px إلى اليسار والنقطة اليمنى بـ 15px إلى اليمين: 11.سنحتاج في هذه الخطوة إلى استخدام سكربت Round Any Corner script، باستخدام أداة التحديد (A) نختار النقطة الموضحة في الصورة ونتبع المسار التالي File > Scripts > Other Script ثم نفتح السكربت Round Any Corner وندخل القيمة 30px ونضغط ok: 12.نقوم بتحديد بقية النقاط باستخدام أداة التحديد (A) ونطبق نفس المسار السابق لكن مع اختيار القيمة 10px. بعدها نضيف التّأثير Effect > Stylize > Drop Shadow ونختار القيّم الموضّحة في الصورة: 13. بعد إتباع الخطوات السابقة سنحصل على الشكل التالي: 14.باسخدام أدة البنتول (Pen Tool (P نرسم شكلا مثل الذي يظهر في الصّورة (ستلاحظ أن هناك شكلين جديدين نقوم برسم واحد فقط). نحدد قيمة stroke بـ 6px ثم نقوم بتطبيق التدرج اللوني المعدني (ستحتاج الإصدار cs6 على الأقل) ونتأكد أننا قمنا بتحديد الخيار الثالث من لوحة Gradient. بعدها نضيف التأثير التالي Effect > Stylize > Drop Shadow وإدخال نفس القيم الموضحة في الصورة، ثم وباستخدام الأداة (Reflect Tool (O نكرّر الشكل عموديا: 15.نرسم مستطيلين الأول مقاسه: 60x20px والثاني مقاسه: 20x60px ونضعمها كما في الصورة، نقوم بتحديدهما وباستخدام Pathfinder Panel نختار Unite كما هو موضح في الصورة: 16.نقوم بتحديد الشكل الذي تحصلنا عليه وتدويره 1 درجة باستخدام الأداة ( Rotate Tool (R .باستخدام أداة التحديد(A) نحدد النقطة العلوية اليسرى ونسحبها بـ3px نحو اليمين. نفس الشيء بالنسبة للنقطة العلوية اليمنى بـ3px نحو اليسار.الآن نقوم بسحب النقطة السفلية اليمني بـ 3px نحو الأعلى والنقطة اليسرى بـ 3px نحو الأسفل: 17. نحتاج إلى تدوير الشكل قليلا. بداية سنقوم بتحديد نقطتين من الشّكل ( كما تظهر في الخطوة الأولى في الصورة) ثم نضغط على Convert Anchor Points to Smooth وتحديد جميع النقاط الخمسة (الخطوة الثانية الموضحة في الصورة) ثم نستخدم السكربت Round Any Corner باتباع المسار التالي: File > Scripts > Other Script. مع تحديد قيمة radius بـ 1pxثم نحدد أخر نقطة كما يظهر في الخطوة 3 في الصورة ونستعمل نفس السكربت مجددا لكن مع تحديد قيمة radius بـ 10px: 18. نضيف بعض الظّلال على الشكل الذي قمنا بتصميمه وذلك بتحديده وعمل نسختين منه بالضّغط على (Ctrl + C > Ctrl + F > Ctrl + F) ، بعدها نحدّد الشّكلين معًا ونقوم بسحبهما بمقدار 1px إلى الأمام و1px إلى الأسفل نستمر في تحديد النسختين ونختار خاصية Minus Front الموجودة بـ Pathfinder Panel. الآن نلون الشكلين الصغيرين بالأبيض (C=0 M=0 Y=0 K=0) مع تخفيف قيمة Transparency إلى 30% دون أن ننسى تغيير خاصية Blending Mode إلى Screen. نحدّد مجدّدا الشّكل الأساسي ونقوم بنسخه مرّتين (Ctrl + C > Ctrl + F > Ctrl + F) مع سحب النّسخة الأخيرة مسافة 1px إلى اليسار و1px إلى الأعلى. بعدها نحدد النسختين ونختار الخاصية Minus Front الموجودة بلوحة البحث عن المسارات Pathfinder Panel نقوم بتلوينهما بالأسود (C=0 M=0 Y=0 K=100) ونخفّف قيمة Transparency إلى 30% وكذلك تغيير Blending Mode إلى Screen 19. نحدد الشكل الرئيسي ونتبع المسار التالي: Object > Path > Offset Path ونختار القيمة 6px- ثم تلوينه باللون الأبيض (C=0 M=0 Y=0 K=0). نخفض قيمة Transparency إلى 50% وكذلك تغيير Blending Mode إلى Screen .نتبع المسار التالي: Effect > Blur > Gaussian Blur ونختار القيمة 20px. 20 .نتبع المسار التالي لإضافة تأثير الظل: Effect > Stylize > Drop Shadow، نختار القيمة الموضحة في الصورة ثم نستخدم الأداة (Reflect Tool (O لمضاعفته لكن بشكل عمودي: 21. نقوم باسخدام أداة البنتول (Pen Tool (P لرسم شكل كما في الصورة، ثم نحدد قيمة stroke بـ 6px مع إضافة التدرج اللوني المعدني (تحتاج إلى الإصدار CS6 على الأقل) والتأكد من تحديد الخيار الثالث لـ stroke من لوحة التدرج اللوني Gradient Panel. الآن نضيف تأثير الظل (Effect > Stylize > Drop Shadow) وتحديد القيم التى في الصورة: 22. باستخدام أداة المستطيل نرسم مستطيلا مقاسه 317x77px نطبق عليه تأثير التدرج اللوني المعدني مع تحديد قيمة الزاوية بـ: 45- درجة: 23.أوشكنا على إنهاء الدّرس نقوم الآن برسم مستطيل ونطبق عليه التدرج اللوني كما يظهر في الصورة: 24.باستخدام الأداة (Ellipse (E نرسم دائرة ونطبق عليها التدرج اللوني الشعاعي (نتبع المسار التالي Window > Gradient ثم نضغط على الصورة المصغرة ونختار Radial كما هو موضح في الصورة). لا يهم اللون الذي نختاره، نحدد الدائرة ونتبع المسار التالي Object > Expand ثم نختار Gradient Mesh ونضغط ok. 25 .يصبح لدينا طبقتان Clip Group وClipping Path، نقوم بحذف الثانية: 26 . باستخدام الأداة (Direct Selection Tool (A نحدد النقطة اليمنى الموجودة في الكرة الداخلية ونحذفها. هذا هو الشكل الذي سنحتفظ به: شبكة متدرجة تحتوي على 4 نقاط. 27 .نتبع المسار التالي Object > Envelope Distort > Envelope Options ونحدد الإعدادات كما في الصورة: 28 .نحدد الشبكة المتدرجة مع المستطيل مع التأكد بأن طبقة الشبكة في الأعلى ونتبع المسار التالي: Object > Envelope Distort > Make with Top Object. 29 . نقوم بتحديد آخر شكل تحصلنا عليه ثم نضغط مرتين على أداة (Scale Tool (S، ندخل القيمة 110% ونضغط Copy. نقوم بتغيير التدرج اللوني للشكل (الخطوة23)، نحاول إضافة تأثير على الحافة فنتبع المسار التالي Effect > Stylize > Drop Shadow مع تعديل الإعدادات كما في الصورة نقوم بعمل نسخة ثانية وترتيب جميع الأشكال كما في الصورة: 30 .نصمم الآن آخر جزء في درسنا هذا وهو الأوراق، حيث نستخدم أداة البنتول لرسم شكل كما في الصورة نطبق عليه التدرج اللوني باستخدام ثلاثة ألوان، نضغط على appearance panel ونقوم بإضافة لون جديد C=0 M=0 Y=O K=10. نحدد اللون ونتبع المسار التالي Effect > Sketch > Note Paper مع تحديد القيم كما في الصورة وتخفيف قيمة Transparency إلى 10% دون أن ننسى تغيير خاصية Blending Mode إلى Screen: 31 .الآن نضيف تأثير الظل على الورقة حيث نقوم أولا بنسخها ولصقها (Ctrl + C > Ctrl + B)، وباستخدام الأداة Direct Selection Tool نحرك قليلا نقاط الربط لجعل الظل أكبر من الورقة، لكن قليلا فقط . نختار له اللون الأسود ومن خلال أداة Transparancy Panel نغير خاصية Blending Mode إلى Multiply مع تحديد قيمة opacity بـ: 50%. نستمر في تحديد الشكل ونتبع المسار التالي: Effect > Blur > Gaussian Blur وتحديد قيمته بـ:20px. 32 .باستخدام أداة البنتول مرة أخرى نقوم برسم شكل مماثل للذي بالصورة، مع تحديد العرض بـ: 30px، نختار اللون الأسود لstroke، من خلال الأداة Transparancy Panel نحدد خاصية Blending mode بـ: Multiply وقيمة opacity بـ: 20%. نحدد الشكل ونتبع المسار التالي : Effect > Blur > Gaussian Blur ونختار القيمة 50%. 33 .هذه هي نتيجة درسنا: ترجمة -وبتصرّف- للدّرس How to create a Nice and Simple Clipboard in Adobe Illustrator – part 2، لصاحبه Andrei Urse.