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

بعد أن تعرّفنا على ماهية التصميم وعناصره ومبادئه، وألقينا نظرة على برامجه وتطبيقاته الأكثر شهرة، يمكننا البدء بالعمل على تصاميم مختلفة بناء على تعلمناه في المقالات السابقة في هذه السلسلة، يبقى لدينا فقط أن نعلم ما هي القواعد الأهم والمتبعة في التصميم وذلك تبعًا للمشروع الذي سنعمل عليه، دون أن ننسى استخدام العناصر بالطريقة الأمثل والالتزام بالمبادئ وإتقان استخدام برامج التصميم. وتتضمن هذه المقالة أهم القواعد الواجب اتباعها لتصميم كل من الأيقونات (الرموز) والشعارات نظرًا للتشابه الكبير من حيث المبدأ في قواعد تصميم هذين العنصرين، وسنبدأ أولًا بتعلم قواعد تصميم الأيقونات. قواعد تصميم الأيقونات الأيقونات هي الرموز المستخدمة للدلالة على أمر ما، حيث تستخدم الأيقونات كرموز للبرمجيات في أجهزة الحاسوب وأيضًا للتطبيقات في الهواتف المحمولة، فتلك الرموز المميزة لتطبيقات الهاتف المحمول ليست شعارات بل أيقونات، ولكن من الممكن أن يستخدم الشعار كأيقونة للتطبيق مثل أن نستخدم شعار أحد البنوك كأيقونة لتطبيق البنك على الهواتف المحمولة. كما نستخدم الأيقونات المصممة داخل صفحات الويب للدلالة على الخدمات أو الفئات أو الميزات أو أي شيء آخر. ومثالًا على تلك النوعية من الأيقونات تلك المستخدمة على فئات الدروس والمقالات في أكاديمية حسوب. يمكن تصميم الأيقونات بخطوط وأشكال سوداء أو بلون واحد أو بطريقة التصاميم المسطحة Flat Design (وهي تصاميم ثنائية الأبعاد تتميز بالبساطة وبدون عناصر معقدة كالظلال والقوام والتدرجات اللونية وغيرها) أو حيوية بتدرجات لونية أو حتى ثلاثية الأبعاد. وتعد أيقونات التطبيقات من أبرز وأهم أنواع الأيقونات حيث أن الأيقونة المميزة ستجذب اهتمام الناس وتدفعهم لتحميل التطبيق وتجربته، قد يكون هناك تطبيق جيد للغاية وأداؤه ممتاز ولكن أيقونته سيئة وغير مثيرة للاهتمام، بينما تطبيق آخر يؤدي نفس الغرض ولكنه سيء وأداؤه تشوبه الأخطاء والمشاكل التقنية إلا أن أيقونته مذهلة ومثيرة للاهتمام، بالتأكيد سيتم تحميل التطبيق السيء ذو الأيقونة الجيدة أكثر من الآخر إلى أن تطغى التقييمات السلبية على جمالية أيقونة التطبيق السيء، لكن ذلك سيستغرق وقتًا طويلًا كما أن العديد من الناس لا تنتبه للتقييم بل تنظر للأيقونة فحسب. فما هي أهم قواعد تصميم الأيقونات؟ سنتعرف عليها الآن. تحديد الهدف يجب أن نحدد الهدف من الأيقونة التي سنصممها، إن أيقونات التطبيقات عادة ما تكون زاهية الألوان ومفعمة بالحيوية وقد تكون ثلاثية الأبعاد أيضًا، بينما أيقونات مواقع الإنترنت عادة ما تكون مسطحة وبسيطة، إذ تستخدم للدلالة على أمور معينة فحسب. ومن هذا المنطلق يجب أن نفهم الهدف من الأيقونة ومكان استخدامها لنتمكن من تحديد الطريقة التي سنصمم بها الأيقونة. قابلية تبديل الحجم قد تستخدم الأيقونة في أكثر من موقع تمامًا مثل الشعارات، لذا يجب أن تكون إما قابلة للتكبير والتصغير ولذلك يجب أن نصممها بالرسومات الشعاعية Vector وليس النقطية حتى لا تتأثر وتتشوه بعد تغيير حجمها، أو قد نضطر إلى تصميم حزمة كاملة من الأيقونات لجميع القياسات حيث أن بعض التصاميم قد تحمل تفاصيل أكثر من اللازم وعند تصغير حجمها فإن هذه الأيقونات لن تكون واضحة أو مفهومة، فهناك أيقونات ستظهر في قوائم صغيرة الحجم أو في رموز المواقع الإلكترونية، لذلك سيتعيّن علينا أن نصمم أيقونات لمختلف القياسات بحيث نراعي وضوح فكرة الأيقونة مهما صغر حجمها. لاحظ أن الأيقونات الأصغر حجمًا هي ليست نفس الأيقونة الكبيرة، بل هي تصميم جديد مشابه ولكنه واضح ضمن الحجم الصغير. اتباع الهوية البصرية عندما نصمم أيقونة لعلامة تجارية أو أي مؤسسة لديها هوية بصرية معدة مسبقًا، فيجب أن ننتهج نهج الهوية البصرية في التصميم من حيث الأسلوب والألوان والخطوط وغيرها، فمن غير المنطقي أن تكون الأيقونة مختلفة كليًا عن باقي عناصر الهوية البصرية. لذلك عندما يطلب منك تصميم أيقونة لمؤسسة تمتلك هوية بصرية، عليك اتباع نهج تلك الهوية، واطلب منهم كتيب إرشادات الهوية البصرية، وإن لم يكن لديهم كتيب فاطلب منهم تزويدك بنسخة عن عناصر الهوية البصرية لتلقي نظرة فاحصة عليها وتتبع نهجها. لاحظ الأيقونات أسفل صفحة الويب الخاصة بشركة تويوتا للسيارات تتبع نهج الهوية البصرية للشركة. البساطة والوضوح هذا الأمر ينطبق على الأيقونات والشعارات معًا، فالهدف من الأيقونة هو التعريف والدلالة إلى شيء ما مثل تطبيق أو خدمة أو فئة أو غير ذلك، لذلك يجب أن تكون الأيقونة بسيطة وواضحة لتكون مفهومة، ويجب أن تكفي النظرة الأولى إليها لفهم ما ترمز إليه. في المثال التالي لأحد المواقع استُخدمت أيقونات دلالية إلى ميزات معينة متوفرة في خدماتهم، ولكنك ستلاحظ بسهولة أن الأيقونات غير مفهومة، بل وتسبب الارباك لمشاهدها ولو اعتمد أصحاب الموقع على النصوص فحسب لكان ذلك أفضل. بينما تبدو الأيقونات في المثال التالي واضحة وتدل بوضوح على معنى الميزة المشار إليها. اتباع الارشادات في بعض المواضع كتطبيقات سطح المكتب أو تطبيقات الهواتف المحمولة أو غيرها يكون هناك إرشادات معينة لتصميم الأيقونات بحيث يجب اتباعها للحصول على أفضل النتائج وللتوافق والتناسق مع موضع استخدام الأيقونة، لذلك يجب دائمًا البحث عن أية إرشادات متوفرة قبل البدء بالتصميم، وعلى سبيل المثال يجب اتباع الارشادات عند تصميم أيقونات تطبيقات الأندرويد وكذلك أيقونات تطبيقات أنظمة iOS. تناسق الوزن البصري في معظم الأحيان نصمم مجموعة من الأيقونات وليس أيقونة واحدة، تستخدم في مواقع الويب أو تطبيقات الهاتف المحمول أو في قوائم البرامج وغير ذلك، ولذلك يجب أن تكون جميع الأيقونات بوزن بصري واحد تقريبًا، وذلك فيما يتعلق بالخطوط والألوان والحجم، والأهم أن يكون وزنها البصري متناسقًا مع التصميم العام للهوية البصرية وواجهة الموقع وواجهة الاستخدام للتطبيق وغيرها. لاحظ أن هذه الأيقونات متطابقة في الدلالات والمعاني ولكنها تختلف من ناحية التصميم والوزن البصري. نوعية ملفات الأيقونات توجد عدة أنواع لملفات الأيقونات ولعل أشهرها هي GIF وPNG وSVG. وتُعَدّ GIF أقدم تنسيق استُخدم لتصميم الأيقونات في الماضي كما تستخدم ICO لملفات أيقونات برامج أنظمة الويندوز، واستُخدم GIF نظرًا لصغر حجمه وإمكانية إدراج الشفافية فيه عكس JPG و BMP الشائعة في ذلك الوقت، إلا أن من سلبياتها عدم إمكانية استخدام حزمة ألوان واسعة حيث تعتمد نظامًا مؤلفًا من 256 لونًا فقط، ومع مرور الوقت تطورت الأدوات والتطبيقات وأصبح بالإمكان استخدام تنسيق PNG لصناعة الأيقونات والذي يتميز بمجال طيف واسع من الألوان بالإضافة إلى إمكانية تضمين الشفافية فيه، ولكن PNG هو تنسيق للرسومات النقطية وعند محاولة تكبير التصميم من أجل بعض الواجهات و التطبيقات فسوف تظهر التشوهات والعيوب. لذلك بدأ المصممون يعتمدون أكثر على SVG الذي يعتمد الرسومات الشعاعية والتي لا تتأثر بتغيير الحجم وتحافظ على دقة التصميم إضافة إلى استخدامه طيفًا واسعًا من الألوان وتضمين الشفافية فيه، والأكثر من ذلك أن ملفاته تتميز بصغر حجمها وهو الأصغر بين بقية التنسيقات، ما جعله الخيار الأمثل لتصميم الأيقونات حاليًا. وعلى الرغم من إمكانية استخدام هذه الملفات مباشرة في بعض التصاميم إلا أن العديد من التطبيقات والواجهات لا تزال لا تدعم هذه النوعية من الملفات، لذلك يجب تحويله إلى تنسيقات أخرى مثل PNG، وبناء عليه يجب أن نحدد المقاس المطلوب بحسب التصميم الذي نعمل عليه. فالخيار الأفضل هو تصميم الأيقونة بتنسيق SVG ومن ثم تصدير جميع المقاسات والتنسيقات التي تحتاجها بتنسيقات يمكن استخدامها مثل PNG. الأيقونات والشعارات مثل أي نوع من أنواع التصاميم فإن تصميم الأيقونات جزء من فن تصميم الرسوميات (التصميم الجرافيكي) ولهذا يجب استخدام العناصر وتطبيق المبادئ الخاصة بتصميم الرسوميات لإنجاز تصاميم احترافية خالية من الأخطاء ومثيرة للاهتمام. ويتشابه تصميم الشعارات من حيث المبدأ مع تصميم الأيقونات حيث أن كليهما يجب أن يحدد الهدف والغرض من هذا العنصر (الأيقونة أو الشعار) والجمهور المستهدف ويجب أن يصمم بأحجام مختلفة بحسب موضع الاستخدام ويجب أن يكون متناسقًا ومتكاملًا مع بقية عناصر الهوية البصرية، ويجب أن يُصمم الشعار كأول عنصر من عناصر الهوية البصرية ومن ثم يتم استخراج لوحات الألوان وباقي عناصر الهوية البصرية بناءً على نموذج الشعار، كما أن تنسيق ملفات تصميم الشعار عادة ما تكون أيضًا SVG أو PNG بحسب موقع استخدامه. الشعارات ليست أيقونات، ولكن يمكن أن تشتق الأيقونات من الشعارات تمامًا مثل أيقونات تطبيقات الهاتف المحمول. ليس بالضرورة أن يكون الشعار بسيطًا بعكس الأيقونة، إلا أن البساطة في التصميم تجعل الشعار أكثر أناقة واحترافية، وأسهل للفهم والملاحظة، حيث أن الغالبية العظمى من العلامات العالمية الشهيرة اتجهت في السنوات الماضية إلى تعديل شعاراتها لجعلها أكثر بساطة وأناقة عكس شعاراتها القديمة، وهذه بعض الأمثلة بحيث نعرض الشعار القديم وآخر شعار مستخدم الآن بغض النظر عن مراحل التطور التي مر بها الشعار. قواعد تصميم الشعار ما هو الشعار؟ هو واجهة أي علامة تجارية وهو الانطباع الأول الذي يتكون لدى الجمهور بمجرد رؤيته، لذا فإن تصميمه مهم للغاية. وبما أن تصميم الشعارات والأيقونات تعتمد قواعد ومبادئ مشتركة، إذ يجب تحديد الهدف والغرض من الشعار كما يجب مراعاة قابلية التكبير والتصغير بحسب موضع الاستخدام ويفضّل الالتزام بمبدأ البساطة والوضوح في تصميمه لضمان وصول فكرته ورسالته للجمهور، وعلى عكس الأيقونات فإن الشعار هو العنصر الأول في تصميم الهوية البصرية، وتتبع الهوية البصرية تصميم الشعار في تحديد شكل وأسلوب التصميم العام، كما يفضل استخدام تنسيق SVG لملفات الشعار مع تصديرها إلى PNG بالمقاس المناسب عند الحاجة. تجنب التقليد من الطبيعي أن تتشابه الأيقونات التي تصممها مع أيقونات كثيرة متوفرة على الإنترنت نظرًا لأن مواضيعها مكررة أساسًا، ولكن من غير المقبول تكرار أو تقليد الشعارات الأخرى، فلو طُلب منك مثلًا أن تصمم شعارًا لمطعم برجر، أول ما سيخطر ببالك تصميم شكل قطعة البرجر وبعد بحث بسيط على الإنترنت ستكتشف وجود العشرات وربما المئات من الشعارات التي تشبه تصميمك وربما يكون بعضها شبه مطابق له أيضًا، الأمر الذي سيجعل العميل يعتقد أنك نسخت الشعار من مكان آخر وقدمته له ولم تبذل أي مجهود في تصميمه، حصل ذلك معي في بدايات مشواري في التصميم لذلك اعتمدت طريقة جديدة في التحضير للتصميم قبيل البدء فعليًا، وهو أن أبحث عن تصاميم متعلقة بما أنوي القيام به ثم أحاول تجنبها جميعها وأسعى إلى إيجاد فكرة جديدة تجعل تصميمي مميزًا ولا شبيه له، وهو ما سيقدّم للعميل بدوره شعارًا مذهلًا يميّزه عنه منافسيه. اكتب في بحث الصور على جوجل (شعار برجر) وستحصل على العديد من شعارات البرجر، لذا حاول تجنب إنشاء تصميم مطابق أو مشابه لأي منها، وليكن تصميمك فريدًا من نوعه. ابدأ برسم المخطط يدويًا حتى وإن لم يكن لديك موهبة في الرسم اليدوي باستخدام القلم والورق، إلا أن الرسم باستخدام الورقة وقلم الرصاص له تأثير السحر على تدفق الأفكار وتعديلها بطريقة فورية. جميع الشعارات العظيمة بدأت بخربشة بسيطة على الورق، ثم أصبحت نموذجًا أوليًا يتطور كل لحظة إلى أن يصبح فكرة مميزة ثم تُنقل هذه الفكرة إلى الحاسوب عبر رسم الخطوط الأساسية لها على برنامج التصميم ومن ثم تطويرها برسم الأشكال الأساسية ثم تتدفق الألوان على التصميم لمنحه الحيوية والهوية الخاصة به، وهكذا إلى أن تصبح الفكرة شعارًا حقيقيًا مميزًا. الصورة بوساطة rawpixel.com من موقع Freepik. الأبيض والأسود يجب علينا كمصممين أن نضع في الحسبان مسألة التصميم بالأبيض والأسود، في بعض الحالات قد يكون الشعار بطبيعة الحال بالأبيض والأسود وبالتالي لا حاجة للقلق بشأن ذلك، ولكن في معظم الأحيان يكون الشعار ملونًا ومع ذلك تضطر الشركات وخصوصًا التجارية منها إلى استخدام نسخة بالأبيض والأسود من الشعار لأجل المطبوعات والتعليب والتغليف والتطريز والنقش وغيرها، لهذا يجب أن يكون الشعار واضحًا ومفهومًا بالأبيض والأسود كما هو كذلك بالألوان في تلك الحالة. إن نظرت إلى النمط الأبيض والأسود لبعض الشعارات فإنك لن تعرف الشعار بسهولة من النظرة الأولى وأحيانًا قد لا تعرفه أبدًا بدون الألوان، ولعل السبب في أن معظم الشعارات في المثال الذي حضّرته لك لا تحتاج إلى الشعار الأبيض والأسود بطبيعة الحال، ولكنني أردت توضيح الفكرة. في الشكل التوضيحي التالي ستشاهد شعارات بالأبيض والأسود ومن ثم ستشاهد الشعارات الملونة الأصلية في الشكل التالي، لاحظ كيف من الصعب التعرف على الشعار من النظرة الأولى في الشكل الأول. لاحظ صعوبة تحديد هوية هذه الشعارات. لاحظ كيف يمكن التعرف على الشعارات بسهولة من خلال الألوان وهي شعارات MasterCard، PayPal، Tommy Hilfiger، Flickr، Microsoft وTarget. الألوان بعد دراستنا وتعرّفنا على الألوان ونماذجها ونظريتها ومخططاتها من مقال الألوان في تصميم الرسوميات ونظرية اللون فإن أكثر وأول عنصر تصميمي يطبّق عليه نظرية الألوان وكل ما يتعلق به هو الشعار. يجب التركيز على تأثير الألوان على الجمهور المستهدف، ويجب أن يكون تأثيرها إيجابيًا، وفي حال استخدام أكثر من لون فيجب تطبيق قواعد المخططات اللونية لتوفير التوازن اللوني للشعار ولا يكون نشازًا أو غير مريح للنظر. كما نستطيع استخراج لوحة الألوان للهوية البصرية للعلامة التجارية من تصميم الشعار، أو قد يحضّر المصمم لوحة الألوان مسبقًا بناءً على نهج سابق متبع من قبل العلامة التجارية أو معطيات أخرى. أحيانًا قد يكون لاسم العلامة التجارية دلالة أو تعبير يدل على الألوان التي يجب أن تتواجد في الشعار، وذلك يجعله منطقيًا ومتناسقًا مع الاسم وراسخًا أكثر في الأذهان. شعار متصفح الانترنت فاير فوكس (الثعلب الناري) بتدرجات لون النار. مراعاة نماذج الألوان من المهم أن تعلم إذا ما كان الشعار سيستخدم للشاشات فقط أم للطباعة فقط أم لكلاهما، حيث يجب أن تصمم الشعار بنموذج ألوان RGB الخاص بالشاشات وبنموذج ألوان CMYK في حالة الطباعة، وفي هذه الحالة ستلاحظ تغيرًا على الألوان بين الشعارين وهذا طبيعي نظرًا لاختلاف نظام مزج الألوان بين النموذجين. في المثال التالي قسّمت شعار إنستجرام إلى نصفين بشكل قطري (مائل) وطبّقت على كل شطر نموذجًا لونيًا مختلفًا، الاختلاف بسيط للغاية ولكنك ستلاحظه إن دققت النظر. الشعارات النصية في حال استخدام النص في الشعار أو ربما بضعة حروف أو حتى حرف واحد فمن المهم أن تكون تلك الخطوط مميزة، وقد تضطر أحيانًا إلى تحريفها للحصول على تصميم شعار نصي مميز بشكل مختلف عن النص العادي. يلجأ المصممون في بعض الأحيان إلى الخطاطين لتصميم النص أو الحروف بخطوط عربية استثنائية إلا إن امتلك المصمم القدرة على التصميم بالخط العربي (مثال: شعار قناة الجزيرة الإخبارية). وأحيانًا أخرى قد يضطر المصمم إلى تصميم خط كامل فريد من نوعه لكتابة الشعار به (مثال: شعار قناة العربية الإخبارية). ولكن في أغلب الأحيان يتخذ المصمم من أحد الخطوط المتوفرة على الحاسوب أساسًا للتصميم ويحرّفه قليلًا للوصول إلى شعار فريد ومميز. شعارات قناتي الجزيرة والعربية. مجموعة من الشعارات النصية العربية مصممة من قبل عبدالرحمن ممدوح على موقع Behance. مجموعة من الشعارات النصية العربية لمختلف المصممين العرب. مجموعة من أشهر الشعارات النصية العالمية. تنظيم عملية التصميم إذا ما نظّمت عملية التصميم من البداية إلى النهاية فإنك ستوفّر على نفسك وعلى عميلك الكثير من الوقت في محاولة معرفة ما الذي يجب أن تفعله تاليًا، الموضوع بسيط ارسم مخططًا للخطوات الواجب اتباعها وطبّقه بحذافيره وستكون على ما يرام. وليكن مخطط سير عملك كالتالي: تلقي الطلب من العميل. فهم كافة جوانب الشعار المطلوب تصميمه ابتداءً بالهدف ودراسة الجمهور المستهدف والمنطقة المستهدفة والألوان المطلوبة وهوية العميل البصرية والخطوط وغير ذلك. ليس من الضروري أن تتوافر كل هذه المعلومات من قبل العميل ولكن حاول الحصول على أكبر قدر منها لتختصر الكثير من الوقت في تعديلات كثيرة لا داعي لها عبر فهم رؤية العميل وتطلعاته. البحث عن كل ما يتعلق بالشعار من أفكار وأمثلة وشعارات مشابهة. اجلس مع نفسك وفكّر في كيفية تصميم الشعار وفي كيفية تجنب تصميم شعار مشابه لما هو موجود مسبقًا. أمسك بالورقة والقلم وابدأ برسم النماذج الأولية وطورها على الورقة إلى أن تصل لفكرة مبهرة. انقل فكرتك من الورقة إلى برنامج التصميم على الحاسوب واحرص على رسم الشعار بالرسومات الشعاعية Vector لسهولة تعديلها والتلاعب بحجمها. أرسل تصميمك إلى العميل. أجرِ جميع التعديلات المطلوبة التي سيقترحها العميل. أنهِ التصميم وسلّمه للعميل. بهذه الطريقة يمكنك أن تصمم شعارًا دون إرباك أو قلق على ما يجب أن تفعله تاليًا. خاتمة يعد تصميم الشعار المجال الأكثر انتشارًا في عالم تصميم الرسوميات حيث تجد آلافًا من الخدمات المتمثلة بتصميم الشعارات في مختلف مواقع العمل الحر، حيث يحتاج الجميع إلى شعار مثل شعار قناة يوتيوب، صفحة فيس بوك، حساب تويتر، موقع إنترنت، تطبيق هاتف محمول، متجر، مصنع، شركة، منظمة أو أي شيء تقريبًا، لذلك يجب تطوير المهارات واكتساب الخبرة اللازمة لتصميم الشعارات فهي أكثر ما يملأ مخزونك من التصاميم لوضعها في معرض أعمالك. لا يختلف تصميم الأيقونة كثيرًا عن تصميم الشعار إلا أن الاستخدامات تختلف، ويظل الشعار هو الأساس في تصميم الرسوميات حيث تتبعه تصاميم بقية العناصر وهذا ما سنكتشفه في مقال قواعد تصميم الهوية البصرية الذي سينشر لاحقًا.

سنتعلم في هذا الدرس كيفية ترسيخ هويّة بصرية قوية لموقعك عبر تصميم أيقونة الهوية “fav icon” واستخدامها في ووردبريس، ليراها الزائر إلى موقعك بمجرد وصوله، وإبراز الموقع وسط زحام ألسنة المواقع التي لديه في المتصفح عن يمين موقعك وشماله، وسنتعرّف أيضًا كيف ننقل نفس الهوية البصرية عبر الأجهزة المختلفة التي قد يزورك منها المستخدمون. تعريفٌ بأيقونة الهوية Favorite Icon هي تلك الصور الصغيرة التي تراها في ألسنة المتصفح بجانب عنوان الموقع، وتراها أيضًا في تاريخ التصفح والمواقع المفضّلة، سواء في المتصفح العادي أو على الأجهزة المحمولة، وتكون عادة بمقاس 16*16 أو 32*32 بكسل وتلعب تلك الرموز الصغيرة دورًا هامًا في إبراز هوية موقعك فهي تميزه وسط الألسنة الكثيرة التي قد تكون لدى المستخدم في نفس الوقت، ووجود ذلك الرمز في لسان موقعك يعني أن المستخدم لن يجد صعوبة تذكر في العودة إليه بمجرد التفكير في ذلك، وهذا في مصلحة موقعك والمحتوى الموجود به. الصيغ المستخدمة في أيقونات الهويّة شقّت أيقونات الهويّة طريقها بصورة رسمية لأول مرة في متصفح ميكروسوفت “إنترنت إكسبلورر” إصدار 5، في عام 1999، أي حين كان الإنترنت في أيام طفولته، وقد اعتمدتها W3C (اتحاد الويب العالمي) في غضون بضعة أشهر، واستخدمها مطورو الويب من حينها. وتدعم أغلب متصفحات الويب الآن صيغ الصور الحديثة التي يمكن إخراج أيقونة الهوية بها، مثل png – gif – svg، إضافة إلى صيغة ico القديمة، وسنمر سريعًا على أشهرهم سريعًا فيما يلي: صيغة ICO تظل هذه الصيغة أكثر صيغة مدعومة لأيقونات الهوية عبر المتصفحات والأجهزة المختلفة، ويفضَل أن تُخرج نسخة من أيقونة الهوية لموقعك بهذه الصيغة، حتى لو كنت تستخدم صيغة حديثة مثل PNG. لماذا؟ ببساطة لأن الصيغ الأحدث مثل PNG وGIF غير مدعومة من بعض المتصفحات القديمة، ولأن المكان الذي تبحث فيه المتصفحات عن أيقونة الهوية للموقع يختلف بشكل كبير من متصفح لآخر، وهناك احتمال لحدوث خطأ 404 إن لم يجد المتصفح أيقونة الهوية في المكان الافتراضي الذي يبحث فيه. كما أن صيغة ICO تسمح بحفظ أكثر من صورة في نفس الملف، كأنها حاوية لمجموعة صور، وهذا يفيدنا في حفظ عدة نسخ من أيقونة الهوية بأكثر من كثافة نقطية في ملف واحد -مثلًا 16*16 و32*32 و48*48 كما تنصح مايكروسوفت-، كي يقرر المتصفح أي صورة أفضل للعرض حال فتح الموقع من جهاز بعينه. ذلك أن نسخة 16*16 مثلًا لن تكفي وحدها، فهي لا تناسب العرض في شريط المهام أو على سطح المكتب للمستخدم مثلًا وإن كانت مناسبة تمامًا للعرض في لسان المتصفح، فحينها يكون وجود أكثر من نسخة في مصلحة هوية الموقع البصرية. صيغة PNG أحد المزايا الرئيسية لاستخدام صور PNG أن تصميمها وإخراجها سهل، وأن البرامج التي تقوم بذلك متوفرة للمختص وغير المختص، مثل PhotoShop وGIMP، كما أنها تدعم خيارات شفافية متطورة، ويدعمها اتحاد الويب العالمي كذلك W3C. ورغم أن صيغة ICO تدعم شفافية قناة ألفا 8-بت “8bit alpha channel transparency”، إلا أن إيجاد برامج لتصميم الصورة وإظهار تأثير الشفافية من الصعوبة بمكان. الاختيار بين الصيغتين الإجابة المختصرة لسؤال “أي الصيغتين أستخدم؟” هي أن تستخدم كليهما، فيمكنك ضبط إعدادات أيقونة الهوية باستخدام وسم ، عبر تحديد المكان الذي يحتوي على أيقونة الهوية بصيغة PNG، مع الإبقاء على نسخة أخرى .ICO متاحة كخيار احتياطي في مجلد الجذر للموقع. وبهذا فإنك تضمن تغطية أكبر قدر ممكن من إصدارات المتصفحات التي قد يدخل منها المستخدمون إلى موقعك مع تقليل احتمال ظهور خطأ 404. ماذا عن الأجهزة المحمولة؟ لا شك أن أغلب حركة الويب تأتي من أجهزة محمولة سواء كانت هواتف أو حواسيب لوحية، لذا يجب ألا تهمل ذلك أثناء تصميم أيقونة الهوية. لكن تلك الأجهزة متشعبة ومتنوعة أكثر من المتصفحات نفسه،ا حين نفكر في مقاسات الصورة المناسبة وأحجام الشاشات وأنظمة تشغيل تلك الأجهزة أيضًا، فليس هناك حل واحد يناسبهم جميعًا. وحينها يجب أن يكون لديك نسخ بصيغة PNG، ونسخ لأيقونات Apple Touch، وأخرى لرسوميات Windows 8 Tile Graphics، وهكذا .. كي تغطي كافة النسخ المحتملة لأيقونة الهوية لموقعك أو هويتك البصرية بشكل عام. ولكن بداعي التبسيط في هذا المقال، فإننا سنكتفي بإنشاء أيقونة هوية بصيغة ico فقط، أما إن أردت التوسع بعدها فاطلع إن شئت على هذه الخيارات للأجهزة المحمولة، وهذا الدليل الجامع لخيارات أيقونات الهوية. كيفية إنشاء أيقونة هوية “Fav Icon” إننا ننصح باستخدام برامج تصميم احترافية لإنشاء هويتك البصرية بشكل عام ولأيقونة الهوية في حالتنا هذه، وسنستخدم برنامج PhotoShop CS6 من شركة أدوبي لهذا الدليل، لكن لديك خيارات مجانية مثل GIMP أيضًا، وستجد الخيارات متشابهة نوعًا ما. حمّل إضافة ICO Format الخاصة ببرنامج فوتوشوب، والتي سنحفظ صورتنا بامتداد ico من خلالها. داخل فوتوشوب، اضغط File، ثم New، ثم أنشئ صورة بأبعاد 512*512 بكسل، بكثافة نقطية قدرها 72 بكسل/بوصة. صمم أيقونتك داخل مساحة الصورة الفارغة التي أنشأناها قبل قليل. حين يكون تصميمك جاهزًا، اضغط Image، ثم Image Size. تأكد من تنشيط خيار Constrain Proportions واضبط أبعاد الصورة على 16*16 بكسل. استخدم فلتر Unsharp Mask لتقليل التشويش في الأيقونة. اضغط File ثم حفظ باسم، واحفظ تصميمك بامتداد ICO وإليك مثالًا لأيقونة موقعي الخاص: وهناك أدوات على الإنترنت يمكن أن تستخدمها إن لم تكن ترغب في تصميم أيقونتك بنفسك، وكل ما عليك فعله هو رفع الصورة التي ترغب فيها إلى أحد هذه المواقع -معظم تلك الأدوات يمكنها إخراج ملفات ICO تحتوي على أحجام مختلفة للصورة- : Dynamic Drive – Favicon Generator Favicon.cc Favicon Generator انتبه إلى أن المظهر الافتراضي لصورتك في لسان المتصفح ستكون بكثافة 16*16 بكسل، فلا تجعل تصميمك به تفاصيل كثيرة تجعل من الصعب رؤية تفاصيل منها، فألق نظرة على الأيقونات التي تستخدمها أغلب المواقع المشهورة -أو يمكنك النظر إلى أيقونة أكاديمية حسوب في أعلى لسان المتصفح لديك-، وستلاحظ أنها بسيطة ومباشرة. والآن بما أن لديك أيقونة هوية لموقعك، دعنا نضيفها داخل ووردبريس: كيفية إضافة أيقونة الهوية إلى ووردبريس إن كنت تعرف ووردبريس فستقول لابد أن يكون أحدهم قد كتب إضافة هنا أو هناك تقوم بهذا عني، وصحيح أنه يمكنك استخدام إضافات لتنفيذ هذا بدلًا عنك لكن يجب أن تكون لديك هذه المعرفة على أي حال بشيء صغير كهذا، بدلًا من تحميل موقعك بإضافة أخرى لمجرد تنفيذ شيء صغير كهذا. وفي هذا الدليل المختصر، سنرى كيف نضيف ايقونة الهوية إلى ووردبريس 4.3 -هذا الإصدار وقت كتابة المقال الأصلي، لكن يمكن تطبيقه على نسخة ووردبريس لديك، نسخة 4.8 وقت ترجمة المقال-: سجّل دخولك إلى لوحة إدارة ووردبريس. اضغط على Appearence (مظهر)، ثم Customize (تخصيص). اضغط على Site Identity أو (هوية الموقع) إن كنت تستخدم النسخة العربية من ووردبريس. اضغط على Select file (اختر ملفًا) في الجزء الذي تجد مكتوبًا فيه Site Icon (أيقونة الموقع)، واختر أيقونة الهوية التي صممتها. ستظهر أيقونة الهوية الآن تحت ترويسة Site Icon في Site Identity، اضغط Save and Publish (حفظ ونشر). وهكذا نكون قد غيرنا أيقونة الهوية. لاحظ أن ووردبريس تسمح لك بتعديل عملك قبل نشره باختيار جزء الصورة التي ترغب فيها كي تكون أيقونة الهوية، في حالة أن تكون الصورة التي رفعتها مستطيلة مثلًا وليست مربعة. كيف تضيف أيقونة الهوية في ووردبريس 4.2 (والإصدارات الأقدم) لأولئك الذين لم يرقّوا إصدرات ووردبريس لديهم لأي سبب كان، يمكن اتباع الخطوات التالية لإضافة أيقونة الهوية: ارفع الصورة التي أنشأتها إلى المجلد الجذر لموقعك باستخدام برنامج لبروتوكول نقل الملفات FTP. الصق الشفرة التالية في ملف header.php داخل السمة التي تستخدمها للموقع: https://gist.github.com/midoriberlin/111a3ce34672106eb620، انتبه إلى أنك ستغير الرابط وامتداد الملف إن كنت تستخدم صيغة أخرى غير PNG. ارفع صورة أيقونة الهوية إلى مجلد السمة الرئيسي. تأكد أن ترفع صورة الأيقونة إلى المجلد الجذر للموقع والمجلد الرئيسي للسمة، فلا تهمل هذه الخطوة الثالثة كي تضمن ظهور أيقونة الهوية حتى لمن يتصفح محتوى الموقع من قارئات الأخبار “feed readers”. الخلاصة آمل أنك بنهاية المقال قد رأيت أن تلك الأيقونة الصغيرة مهمة لهوية موقعك ومستخدميه، وأنها سهلة في إضافتها لووردبريس أيضًا -على الأقل في الإصدارات الحديثة منها-، أما الآن فدعني أعيد لك ملخص المقال في عجالة: أضف كلا الصيغتين ICO وPNG لتغطية أكبر قدر ممكن من المتصفحات الموجودة الآن. اطلع على الدليل الجامع لأيقونات الهوية كي تستهدف أكبر شريحة ممكنة من الأجهزة المحمولة (أو حالات الاستخدام عمومًا). استغل أدوات مثل Favicon.cc كي تخرج أكثر من حجم لأيقونتك في ملف واحد بكفاءة ويسر. استخدم خاصية Site Icon في ووردبريس 4.3+ كي تريح رأسك من عناء تثبيتها بالطريقة التقليدية في الإصدارات القديمة، لكن الإصدار القديم متوفر إن شئت. دعنا نعرف في التعليقات إن واجهت مشكلة في عرضها في موقعك! ترجمة -وبتصرّف- لمقال How to Add a Favicon to Your WordPress Site لصاحبه Tom Ewer

اتبع خطوات هذا المقال لتتعلم كيفية تصميم أيقونة بطارية في برنامج إنكسكيب. من قائمة الملف File اختر خصائص المجلد Document properties ثم من النافذة المنبثقة، أزل علامة صح عند عبارة Show page border لتخفي إطار الصفحة. ارسم شكلا بيضاويا بالعرض والبعد الذي ستكون عليه البطارية من الأعلى. اجعل قيمة شفافية الشكل Opacity للمنتصف من لوحة التعبئة والحدود Fill and stroke، ثم كرّر الشكل مجددا عن طريق اختياره بالزر الأيمن ثم اختيار Duplicate واسحب النسخة المكرّرة للأسفل، بمقدار ارتفاع البطارية، مع الضغط على Ctrl أثناء السحب للمحافظة على محاذاته للنسخة الأصل. فعّل من الشريط العلوي خيار الكبس والالتقاط Enable Snapping ومنه فعّل خيار التقاط المسار Snap to Path ثم بأداة الرسم المنحني Bezier tool ارسم مضلعا منطلقا من حواف الشكلين البيضاويين الجانبيين، بحيث تنقر بالسهم عند كل موضع ستنشئ منه عقدة Node إلى أن ينتهي المضلع من حيث بدأ. أزل الحدود عن المضلع المستطيل من تبويب رسم الحدود Stroke paint، ثم أضف له تعبئة من تبويب Fill، ومن نفس التبويب قلّل شفافية الشكل للمنتصف. قم بتحديد القطع الثلاثة (الشكلين البيضاويين والمستطيل) عن طريق أداة التحديد مع الاستعانة بزر Shift ثم قم بتكرارهم. من شريط القوائم العلوية اختر من قائمة المسار Path أمر التوحيد Union، ثم أعد القطعة الموحدة لأقصى الخلف عن طريق خيار Lower selection to bottom من الشريط العلوي لأداة التحديد. بينما ما زالت القطعة الموحدة محدّدة، ضع لها حدا من تبويب رسم الحد، ثم من تبويب سمة الحد Stroke style اجعل قيمة عرض الحد 50 واجعل كلا من خيار الترابط Join وخيار الغطاء Cap مستديران. قم بتحويل الحد إلى مسار عن طريق خيار Stroke to Path من قائمة المسار، ثم من نفس القائمة قم بتجزئة الحد بخيار Break apart حتى تظهر التعبئة التي اختفت وسط المسار، ثم وحّدْهما معا بينما ما زالا محدّدين عن طريق خيار التوحيد Union. حدّد الشكل البيضاوي السفلي مع المستطيل ووحدهما معا عن طريق Union. كرّر الشكل البيضاوي العلوي ثم اختره هو والشكل الموحد توًا، ومن قائمة المسار اختر أمر الفرق Difference. حدّد القطعة الاسطوانية أسفل الشكل البيضاوي العلوي بأداة التحرير Node tool ثم اسحب مؤشر الفأرة حول العقد الثلاثة العلوية، وحرّكها قليلا للأسفل عن طريق أسهم التحكم، أو اسحبها بمؤشر الفأرة مع الضغط على Ctrl أثناء السحب للمحافظة على محاذاتها. بأسهم التحديد كرّر نفس القطعة ولوّنها باللون الأحمر، ثم كرّرها مجددا ولوّنها باللون الأخضر. اسحب القطعة المكرّرة الخضراء إلى الأعلى قليلا مع المحافظة على اتجاهها بالضغط على Ctrl ثم حدّد كلا القطعتين، ومن قائمة المسار اختر Difference. كرّر القطعة الحمراء الناتجة من الخطوة السابقة مرتين مجددا واسحبهما للأعلى مع الضغط على Ctrl أثناء السحب، ثم قم بتسوية المسافة بينها عاموديا من لوحة المحاذاة والاصطفاف Align and distribute. قم بتوحيد القطع الثلاثة من قائمة المسار عن طريق Union واختر القطع الثلاث الموحدة أولا ثم القطعة التي تقع خلفهما تاليا ومن لوحة المحاذاة والاصطفاف قم بمحاذاتها أفقيا. ارسم مستطيلا يغطي القطع الحمراء الموحدة ويترك منها طريفا يسيرا في جهة اليسار، ثم حدّد القطع الحمراء مع المستطيل واختر الأمر Difference. حدّد القطع الحمراء مع الشكل الاسطواني الذي يقع خلفها مباشرة ثم من قائمة المسار اختر Difference مجددا. قم بتكرار الشكل الاسطواني الأزرق ولوّنه بلون مخالف وليكن الأحمر واسحبه للأعلى فوق الشكل البيضاوي بقليل مع الضغط على Ctrl أثناء السحب. من أسهم التحديد اختر السهم العلوي المتوسط واسحبه للأسفل مع الضغط على Ctrl للمحافظة على أبعاد الشكل إلى أن تصل للحجم المناسب. اختر أداة التحرير Node tool ثم حدّد العقد الخمس العلوية واسحبها للأسفل مع الضغط على Ctrl. كرّر القطعة الحمراء ثم اخترها هي والشكل البيضاوي العلوي ومن قائمة المسار اختر Difference. ثم اختر القطعة الحمراء الأصل مع الشكل الأزرق المحيط بالشكل وقم بتوحيدهما. حدّد كلا القطعتين القاتمتين وسط الشكل ووحدهما معا عن طريق Union ثم قم بتحديد القطعة الموحدة مع البطارية ومن قائمة المسار اختر Difference. أزل شفافية الشكل ولوّنه باللون المناسب لتكتمل عندنا أيقونة البطارية. النتيجة النهائية: المقال مستفاد من فيديو بعنوان: Inkscape for Beginners: Vector Battery Icon Tutorial لصاحبه Nick Saporito.

أفضل طريقة للتعلق ببرنامج ما وتعلّم العمل عليه هو الانغماس في مشروع على هذا البرنامج. هذا الدرس يغطي الخطوات البسيطة لتصميم رمز أيقونة RSS مع مختلف التقنيات اليدوية التي ستساعد المبتدئين على تطوير مهاراتهم للعمل على هذا البرنامج مستقبلًا. إن برنامج أدوبي إليستريتور هو برنامج تصميم رسومات فكتور، لذلك لا يهم حجم الأيقونة التي سنصمّمها لأننا نستطيع تكبيرها وتصغيرها بدون التأثير على دقّة الرسم. على عكس فوتوشوب حيث أن جميع الخطوط والأشكال ذات هيكل هش وكذلك الألوان وذلك لأنها مصنوعة من الحسابات الرياضية النقطيّة بدلًا من الاعتماد على تصميم البيكسل الأساسي. افتح برنامج إليستريتور وأنشئ ملفًّا جديدًا. انقر مُطوّلًا على أداة المستطيل لتظهر قائمة أدوات الأشكال واختر أداة المستطيل مستدير الزوايا Rounded Rectangle. ارسم الشكل على لوح الرسم مع الضغط على مفتاح Shift وذلك لرسم مربع ويمكنك الضغط على مفاتيح الأسهم على لوحة المفاتيح لزيادة أو تخفيف استدارة الزوايا للمربع. هناك اختلاف آخر بين إليستريتور وفوتوشوب في أسفل شريط الأدوات حيث أن مربعي الألوان في فوتوشوب يدلّان على لوني المقدمة والخلفية بينما في إليستريتور المربعان يمثّلان لون العنصر والثاني لون الحدود. قم بإزالة لون الحدود ثم اضغط على مربع لون العنصر واذهب إلى لوحة التدرجات اللونية وأضف تدرجًا لونيًّا من البرتقالي الداكن إلى البرتقالي الفاتح عموديًّا عبر الشكل. حدّد الشكل المرسوم ثم اذهب إلى القائمة: Object > Path > Offset Path أدخل القيمة 1mm- في الخيارات. انقر على زاوية الشكل الجديد ودوّره بزاوية 180 درجة لتصبح جهة التدرج اللوني معكوسة. اختر أداة الدائرة وارسم دائرة في مكان ما على لوح الرسم. أزِل لون العنصر الداخلي وأبقِ على لون الحدود الأسود ثم اجعل سماكة هذه الحدود 16pt من لوحة الحدود. استخدم أداة التحديد المباشر Direct Selection Tool (السهم ذو الرأس الأبيض) وحدّد النقطتين السفلية واليسرى من الدائرة. انقر على مفتاح Delete في لوحة المفاتيح لمسح هاتين النقطتين ويبقى من الدائرة فقط ربع دائرة. انسخ هذا الربع بالاختصار CMD+C ثم ألصقه في المقدمة بالاختصار CMD+F. صغّر حجم النسخة الجديدة مع الضغط على مفتاح Shift للمحافظة على نسبة الأبعاد. عدّل حجم حدود الشكل الأصغر ليكون 16pt كما الشكل الأصلي. اضغط على الاختصار CMD+R لإظهار المسطرة ثم اسحب زوجين من الأدلّة لتحاذي أطراف أرباع الدائرة. استخدم التقاطع بين الأدلة كأساس لرسم دائرة صغيرة بحيث ننتهي من تصميم رمز RSS. حدّد ربعي الدائرة وذلك لتحويلهما من مجرد حدود إلى أشكال جامدة عبر الذهاب إلى القائمة: Object > Expand واختيار خيار الحدود Stroke فقط. حدّد أشكال الرمز الثلاثة ثم أضِف تدرّجًا لونيًّا من الرمادي إلى الأبيض عموديًّا وأضِف حدودًا لهذه الأشكال بلون رمادي وبقيمة 1pt. اضغط على الاختصار CMD-G لجمع هذه الأشكال الثلاثة في مجموعة واحدة، ثم عدّل الحجم بشكل مناسب لوضعها ضمن المربع البرتقالي. حدّد المربع البرتقالي الداخلي ثم اضغط CMD+C لنسخه وألصقه في المقدمة عبر CMD+F ثم لوّنه باللون الأبيض. ملاحظة أخرى حول الاختلاف بين فوتوشوب وإليستريتور هو أن في إليستريتور يمكن وضع عدد كبير من العناصر في طبقة واحدة مرتبة فوق بعضها البعض ويمكن التحكم بكل عنصر على حدة إذا ما أردنا بينما لا يمكن القيام بذلك في فوتوشوب. ارسم شكلًا بيضويًّا كبيرًا مسطّحًا يغطي الجزء العلوي من المربع. حدّد هذا الشكل مع المربع الأبيض الذي رسمناه للتو واختر Intersect من لوحة Pathfinder. خفّف التعتيم Opacity للشكل الجديد الناتج عن العملية السابقة إلى نحو 15% ليبدو كلمعان أعلى شكل المربع. أنهِ هذا التصميم عبر رسم دائرين صغيرتين متفاوتتين بالحجم في زاوية المربع لتبدو مثل انعكاس إضاءة. استخدم نسبة التعتيم 15% مجدّدًا للحصول على مظهر متناسب. ها قد حصلنا على رمز فكتور RSS بسيط وأنيق في عدد من الخطوات البسيطة ولكنها تغطي مجموعة مهمة من أدوات إليستريتور الهامة. ترجمة -وبتصرّف- للمقال: Beginner Illustrator Tutorial – Create a Vector RSS Icon لصاحبه: Chris Spooner.

باتباعك للخطوات التالية ستحصل على أيقونة لخريطة يمكنك استخدامها بالطريقة التي ترغب بها. خطوات رسم أيقونة خريطة نزيل إطار الصفحة عن طريق اختيار قائمة الملف File نختار خصائص المستند Document properties ثم من النافذة المنبثقة أزل العلامة عند عبارة Show page border. نكبر مساحة العمل من قائمة العرض View اختر Zoom ثم Zoom 1:1 لنتمكن للعودة لها – أي المساحة – بالضغط على رقم 1 من لوحة المفاتيح، في حال اضطررنا للتصغير أو التكبير . نرسم مستطيلا بزوايا حادة وذلك بتحريك الدائرة الوهمية في حافة المربع للأعلى في حال لم تكن كذلك، أو بالضغط على رمز الزاوية الحادة من الشريط العلوي. نكتب قياس الطول والعرض للمربع في خانتيهما في الشريط العلوي حيث يمثل الحرف w العرض وقيمته 450 ويمثل الحرف H الطول وقيمته 300 ثم نقلل شفافية الشكل Opacity من شريط التعبئة والحدود Fill and stroke من تبويب التعبئة Fill إلى المنتصف. نرسم مستطيلا رفيعا بحيث يقطع المستطيل الأول بالعرض ونقوم بتدويره بالضغط على المستطيل مرتين من أجل إظهار أسهم التدوير. نكرر المستطيل الرفيع مجددا عن طريق تحديده ثم بالزر الأيمن نختار Duplicate وندوره بحيث يشكل علامة شبيهة بحرف T المقلوب وبحيث يشكل زاوية قائمة مع المستطيل السابق. نختار كلا المستطيلين الحديثين ومن قائمة المسار Path نختار Union لتوحيدهما معا. نلون المستطيل الأصل بالأحمر مؤقتا لتمييز ما نقوم بعمله، ثم نكرره مجددا ونختاره هو والمستطيلين المتعامدين ومن قائمة المسار نختار التقاطع Intersection لإزالة الزوائد الخارجة عن إطار المستطيل. نكرر الشكل المتعامد مجددا ثم نختاره هو والمستطيل الأصل ومن قائمة المسار نختار الفرق Difference . نختار المستطيل ومن قائمة المسار نختار Break apart لتجزئته حيث أزلنا منه في الخطوة السابقة المساحة التي كانت تشغل الخطين المتعامدين. بهذا نكون قد حصلنا على الشكل الأساسي للخريطة ويبقى لنا تلوينها وطيها، نزيل الشفافية ونجعل قيمتها 100، ثم نختار القطعتين العلويتين ونلونهما باللون الأخضر ونلون القطعة السفلية باللون الأزرق، بينما نلون الخطين المتعامدين باللون الأصفر من الشريط السفلي. ملاحظة: يمكن معرفة قيم الألوان التي اخترناها في التصميم من لوحة التعبئة والحدود. نحدد جميع أجزاء الخريطة ونجمعها من اختصار التجميع Group في الشريط الأعلى، ونصغر مساحة العمل بالضغط على علامة – من لوحة المفاتيح، وفي حال رغبنا بتكبير مساحة العمل نضغط على علامة +. نكرر الشكل مرتين ونحركهما تحت الشكل الأول مع الضغط على Ctrl أثناء السحب حتى تكون محاذية لبعضها البعض. نرسم مستطيلا جديدا حاد الزوايا بعرض 150 وارتفاع 300 ونكرره ثلاث مرات، ثم نختار النسخة الأولى ثم نختار الخريطة الأولى ومن لوحة المحاذاة والاصطفاف Align and distribute نختار محاذاة الحافة اليسرى ثم نقوم بمحاذاتهما أفقيا. ملاحظة: تأكد من تحديد خيار Last selected في لوحة المحاذاة والاصطفاف ليقوم بمحاذاة الشكل المختار أولا مع آخر ما قمنا بتحديده. نختار النسخة الثانية من المستطيلات ونحاذيها مع الخريطة الثانية أفقيا وعاموديا، ثم نختار الثالث ونحاذيه مع الخريطة الثالثة مع الحافة اليمنى ثم نحاذيهما أفقيا. نختار جميع الأشكال الموجودة في الشاشة بما في ذلك الخرائط والمستطيلات ثم من الشريط العلوي نختار فك التجميع أو بالضغط على الزر الأيمن نختار UnGroup. نأتي للخريطة الأولى ونكرر المستطيل الذي فوقها مرتين، ثم نختار المستطيل مع القطعة الخضراء ومن قائمة المسار نختار Intersection، ثم نختار المستطيل الثاني مع الخطوط الصفراء ثم نكرر نفس الأمر من قائمة المسار وهكذا نفعل الشيء نفسه مع القطعة الزرقاء مع حذف القطعة الخضراء الزائدة بتحديدها ثم من لوحة المفاتيح نختار زر الحذف Delete. نكرر نفس الخطوات السابقة مع الخريطة الثانية والثالثة إلا أننا سنكرر المستطيل أربع مرات مع الخريطة الثانية لنأخذ التقاطع من كلا القطعتين الخضراوين يمين ويسار المستطيل. نجمع أجزاء كل قطعة من الخريطة ونضعها بجانب بعضها البعض ولسنا بحاجة لمحاذاتها بل يكفي أن نجعلها تقريبا في نفس المستوى. نختار الجزء الأخضر العلوي من القطعة اليمنى واليسرى دون اختيار الوسطى ثم من لوحة التعبئة والحدود من تبويب Fill نحرك الشريط عند الحرف L لجهة اليسار ليعطينا لونا أقتم. نكرر نفس الخطوات مع اللون الأصفر واللون الأزرق. نحدد أجزاء كل قطعة من الخريطة في مجموعة مع بعضها بحيث يكون عندنا ثلاث قطع للخريطة في ثلاث مجموعات. نختار القطعة اليسرى ثم نحددها مجددا لتظهر لنا أسهم الاستدارة ونسحب السهم المتوسط الأيمن قليلا للأعلى. نفعل الشيء نفسه مع القطعة المتوسطة إلا أنا سنحرك السهم للأسفل بدلا من الأعلى، ثم نختار القطعة اليمنى ونحرك السهم للأعلى بنفس مقدار القطعة اليسرى تقريبا. من الشريط العلوي نتأكد من تفعيل الكبس والالتقاط Enable snapping منه نفعل Snap cusp nodes ليتم التقاط حواف عقد الشكل، ثم نقرب القطعة اليمنى ثم القطعة اليسرى للقطعة الوسطى ونلاحظ أنها تلتقط حوافها. نكرر جميع أجزاء الخريطة ونفك تجميعها ثم من قائمة المسار نختار Union لتوحيد جميع الأجزاء ثم نلونه باللون الرمادي من الشريط السفلي ثم نعيدها للخلف للأخير من الشريط العلوي. ومن لوحة التعبئة والحدود نختار تبويب سمة الحد Stroke style ونختار عرض الحد 35 ونختار الخيارات الحادة في كل من Join و Cap. مع كون الشكل ما زال محددا نختار من قائمة المسار Stroke to Path لتحويل الحد لمسار ثم نختار Break apart ثم مع التأكد من كون جزئي الشكل ما زالا محددين نختار Union. نكرر القطعة الرمادية مجددا، ثم نرسم بأداة الرسم المنحني Bezier -مع كون الجذب والالتقاط ما زال مفعلا- في طرف القطعة مضلعا ثم نختار القطعة الرمادية المكررة مع المضلع ومن قائمة المسار نختار Intersection ونلون القطعة الناشئة بلون أقتم من شريط L في تبويب التعبئة. ثم نعيد القطعة خطوة واحدة للخلف من الشريط العلوي. نعيد تكرار نفس الخطوات مع فرق رسم المضلع في الجهة اليمنى من الشكل. نحدد جميع أجزاء الشكل ونضعها في مجموعة عن طريق الاختصار Ctrl+g لنتمكن من التصغير والتكبير للحجم المناسب. وبهذا نكون وصلنا للنتيجة النهائية المقال مستفاد من فيديو بعنوان: Inkscape Tutorial: Vector Map Icon لصاحبه Nick Saporito.

سنتعلم في هذا الدرس طريقة رسم آلة تصوير (كاميرا) في برنامج إنكسكيب. سنبدأ برسم جسم الكاميرا عن طريق أداة المستطيل، مع جعل زوايا المستطيل مستديرة عن طريق تحريك الدائرة الوهمية الموجودة في زاويته اليمنى للأسفل، واخترنا له اللون 10% Gray من الشريط السفلي. نرسم في وسط المستطيل السابق مستطيلا حاد الزوايا حيث سنعيد الدائرة الوهمية في زاويته اليمنى إلى مكانها، واخترنا له إحدى درجات اللون الأحمر من الشريط السفلي. نكرر المستطيل الأحمر، ونكبره من الأعلى والأسفل، وذلك بسحب السهم العلوي المتوسط من أسهم التحجيم، مع الضغط على حرف Shift أثناء التكبير ليكبر من الجانبين، ثم من لوحة التعبئة والحدود Fill and stroke نحرك المؤشر عند شريط حرف L ليعطينا لونا أفتح من سابقه، ثم من الشريط العلوي نعيد المستطيل خطوة للخلف. نرسم مستطيلين صغيرين أعلى آلة التصوير أحدهما يمثل زر التقاط الصورة، والآخر يمثل زر التشغيل، مع جعل المستطيلين بزوايا مستديرة، ونلونهما باللون الأسود، ثم نعيدهما خلف جسم الكاميرا. نرسم مستطيلا آخر بين الزرين السابقين بزوايا مستديرة، إلا أننا سنجعله أطول وأعرض منهما، ونحوله لمسار عن طريق أداة التحرير Node tool ومن الشريط العلوي نختار Object to path لنلاحظ أن الشكل أصبح محاطا بمجموعة من العقد Nodes حوله. باستخدام مؤشر الفأرة سنحدد الأربع عقد السفلية، إما بتحديدها عقدة عقدة مع الضغط على Shift أثناء التحديد، أو بسحب مؤشر الفأرة حولها، ثم بعد التحديد نضغط من لوحة المفاتيح >+Ctrl لتوسيع المسافة بين العقدتين ثم نعيده للخلف. نكرر الشكل الذي حصلنا عليه بتحديده ثم من لوحة المفاتيح نختار الاختصار Ctrl+D أو نضغط عليه بالزر الأيمن ونختار Duplicate ونلونه بلون أفتح مع إزاحته قليلا لليسار ليظهر لنا طرفا يسيرا من الشكل الأصلي مع إعادته للخلف. نكرر الشكل مرة أخرى ونصغره من الأعلى ومن الجانب الأيسر ونلونه بلون أفتح من سابقيه ثم نعيده للخلف. نرسم في الطرف الأيسر للشكل الذي رسمناه دائرة سوداء صغيرة مع الضغط على Ctrl أثناء رسمها للمحافظة على التساوي بين أبعادها، ثم نكررها مجددا ونصغرها بالضغط على Ctrl+Shift للمحافظة على أبعادها. نكرر كل من زري التشغيل والالتقاط ونلونهما بلون رمادي مع تصغير أحجامها وذلك لغرض إضافة ظل وتأثير للأشكال. سنرسم مستطيلين رفيعين على طرفي الكاميرا الأيمن والأيسر، وسنوحدهما عن طريق الأمر Union من قائمة Path. وحتى يكون ارتفاعهما مساوٍ لارتفاع جسم الكاميرا تماما، سنكرر جسم الكاميرا الرمادي، ثم نختاره هو والمستطيلين الموحدين ونختار الأمر Intersection من قائمة Path. نلون المستطيلين باللون الأبيض مع تقليل شفافيتها Opacity من لوحة التعبئة والحدود إلى ما يقارب 70 . نرسم وسط جسم الكاميرا دائرة متساوية الأبعاد بالضغط على Ctrl أثناء الرسم ونلونها باللون الرمادي القاتم ونحاذيها عاموديا وأفقيا مع جسم الكاميرا عن طريق لوحة المحاذاة والاصطفاف Align and distribute. نكرر الدائرة ونلونها بلون أفتح ثم نصغرها مع الضغط على Ctrl+Shift أثناء التصغير حتى نحافظ على أبعادها وعلى توسطها للدائرة الأولى. عن طريق أداة النجمة والمضلع Stars and polygons سنختار أداة المضلع وسنختار عدد الزوايا corners 6 ونتأكد من جعل قيمة الاستدارة rounded تساوي 0 ونضغط على Ctrl أثناء الرسم والتدوير للشكل ليساعدنا على تحديد اتجاه المضلع بحيث يكون أحد أضلاعه المستقيمة متوازية مع شاشة الرسم تماما دون ميلان. نتأكد من أن الحجم الذي رسمناه مناسبا ونصغره بالضغط على Ctrl+Shift إن احتجنا لذلك، ثم نحاذيه أفقيا وعاموديا مع الدائرة من لوحة المحاذاة والاصطفاف. من الشريط العلوي نفعل الالتقاط والكبس Enable snapping ومنه نفعل Snap nodes, paths, and handles ومنه نفعل Snap cusp nodes ليلتقط لنا زوايا المضلع ثم نختار أداة الرسم المنحني Bezier ونأتي عند زوايا المضلع ونرسم خطا مطابقا للضلع ينطلق من الزاوية ويمتد إلى حدود الدائرة الرمادية مع الضغط على Ctrl أثناء رسم الخطوط ليساعدنا على رسم الخط مستقيما باتجاه الضلع. ملاحظة: نقوم بإلغاء تفعيل الالتقاط والكبس بعد الانتهاء من الرسم حتى نكمل بقية خطوات الرسم بحرية. نختار أحد الخطوط التي رسمناها وبالزر الأيمن نختار التحديد المماثل Same select ثم نختار Fill and stroke حتى يختار لنا جميع الخطوط التي رسمناها. بعد تحديد الخطوط نختار من قائمة Path الأمر Stroke to path لتحويل الحدود لمسارات، ثم مع التأكد من كون الخطوط ما زالت محددة نضغط على Shift ونحدد معها المضلع، ثم من قائمة Path نختار Union لنوحد الخطوط والمضلع معا. بعض الخطوط ستكون زائدة خارج حدود الدائرة الرمادية الفاتحة، وحتى نتخلص من الزوائد نكرر الدائرة الرمادية، ونختارها هي والخطوط التي أصبحت شكلا واحدا، ثم من قائمة Path نختار Intersection. نرسم في وسط المعين عند حافته اليسرى دائرة صغيرة متساوية الأبعاد ونلونها باللون الأبيض، وبهذا تكون آلة التصوير قد اكتملت. قبل تجميع أجزاء الكاميرا معا، حول جسم الكاميرا الرمادي الفاتح من شكل إلى مسار إما عن طريق أداة Node tool كما فعلنا مسبقا أو عن طريق قائمة Path باختيار Object to path ثم جمع أجزاء الكاميرا بتحديدها جميعا ثم بالزر الأيمن نختار Group. يمكننا تصغير الكاميرا بالحجم المناسب مع الضغط على Ctrl+Shift أثناء ذلك، ثم نضع لها خلفية بأداة المستطيل ونلونها باللون الأخضر ومن لوحة المحاذاة نحاذي الكاميرا عاموديا وأفقيا مع المستطيل. نكرر جسم الكاميرا الرمادي الفاتح بالضغط على المجموعة مرتين متتاليتين ثم اختيار الجسم وتكراره، ثم نضع الشكل المكرر خارج الخلفية حيث المكان الذي نرغب أن يكون الظل باتجاهه. نفعل الالتقاط والكبس مجددا ونضيف لما فعلناه سابقا خيار Snap smooth nodes ليلتقط العقد الناعمة في الزوايا المستديرة في الجسم، ثم بأداة Bezier سنرسم من زوايا كلا الجسمين متوازي أضلاع. من لوحة التعبئة والحدود سنعطي متوازي الأضلاع لونا كلون الخلفية، إلا أننا سنجعله أقتم عن طريق تحريك المؤشر في شريط L ثم من تبويب رسم الحدود Stroke paint سنزيل الحدود بالضغط على علامة x الموجودة في التبويب. نحذف شكل جسم الكاميرا المكرر لعدم حاجتنا له بعد الآن، ونكرر الخلفية مجددا ثم باختيار الخلفية مع متوازي الأضلاع نختار من قائمة Path الأمر Intersection. من لوحة التعبئة والحدود من تبويب التعبئة Fill سنختار التدرج الخطي Linear Gradient وهذا لنعطي الظل الذي أنشأناه تدرجا. نجعل امتداد خط التدرج بمحاذاة الأضلاع اليمنى أو اليسرى لمتوازي الأضلاع مع التأكد من أن اللون الشفاف باتجاه الأسفل، مع إمكانية سحب إحدى العقدتين لتمديد أحد لوني التدرج أو تقليصه. وبهذا نكون وصلنا للنتيجة النهائية:

في هذا الدرس سنتعلم كيفية تصميم أيقونات خطّية بخطوط فكتور وباستخدام الأشكال الأساسية في برنامج إليستريتور لتستخدمها في واجهة الموقع أو على حاسوبك أو حتى في هاتفك المحمول. سنبدأ بتصميم أيقونة كاميرا رقمية. افتح برنامج إليستريتور ثم ابدأ ملفًّا جديدًا واستخدم أداة المستطيل Rectangle Tool لرسم مستطيل. ستلاحظ في هذا الدرس أننا لن نستخدم أبعادًا محدّدة بل سنعتمد على الرؤية الفنّية في التصميم ولكن بإمكانك التقيد بأبعاد محددة. ولاختصار الوقت قمتُ بجعل لون الحدود بلون معين وأزلت لون التعبئة. استخدم أداة التحديد Selection Tool وانقر على دائرة الزوايا ثم اسحبها لتجعل زوايا المستطيل منحنية. استخدم أداة الدائرة Circle Tool لرسم دائرة وحتى تحصل على الدائرة بشكل صحيح اضغط على مفتاحي Alt و Shift معًا أثناء رسم الدائرة حيث ستحافظ على مركزيّة الرسم وعلى أبعاد الدائرة الصحيحة. استخدم الأدلّة الذكية لتساعدك في هذا التصميم. ارسم دائرة أخرى بذات الطريقة الأولى مع البدء من مركز الدائرة القديمة واجعل الدائرة الجديدة أصغر بقليل. كرّر ذات العملية ولكن هذه المرّة ارسم دائرة بنصف حجم الدائرة السابقة. استخدم أداة الخط Line Tool لرسم خط قُطري ومع الاستعانة بالأدلّة الذكية لن يكون ذلك صعبًا. سيُمثّل هذا الشكل شكل العدسة المغلقة للكاميرا الرقمية. استخدم أداة المستطيل مستدير الزوايا Rounded Rectangle Tool لرسم فتحة الإضاءة الفورية (الفلاش) واجعل الزوايا بنصف قطر صغير وذلك عبر استخدام مفاتيح الأسهم أثناء سحب الفأرة ورسم الشكل. ارسم دائرةً صغيرةً تعادل بحجمها ارتفاع المستطيل الصغير المجاور وسنقوم بذلك بمساعدة الأدلّة الذكيّة مجددًا. ارسم مستطيلًا مستدير الزوايا في القسم العلوي الأيسر من الكاميرا بحيث يكون نصفه ضمن جسم الكاميرا والآخر خارجها. ارسم مربّعًا صغيرًا مستدير الزوايا بنفس ارتفاع المستطيل المجاور. اجعل لون تعبئة جسم الكاميرا بالأبيض ثم حدّد المستطيل والمربّع الصغير الخارجين من جسم الكاميرا وأرسلهما للخلف بالاختصار CMD+Shift+[. ارسم مستطيلًا صغيرًا في الركن الأيسر السفلي من الكاميرا. انسخ هذا المستطيل مرتين عبر Ctrl+C و Ctrl+F وضع النسختين على نفس المحور العمودي للشكل الأصلي. ارسم دائرةً صغيرةً يبلغ قطرها ارتفاع المستطيل الصغير الذي رسمناه للتو وباستخدام الأدلة الذكية ضع الدائرة بحيث يكون نصفها خارج المستطيل. انسخ الدائرة بذات الطريقة التي نسخنا فيها المستطيلات الصغيرة. حدّد جميع المستطيلات الصغيرة الثلاث والدوائر الصغيرة الثلاث أيضًا واختر الخيار Merge من لوحة Pathfinder لدمج جميع هذه الأشكال معًا. وبهذا نكون قد انتهينا من تصميم شكل الكاميرا الرقمية. والآن سنتجه لتصميم شكل آخر وهو القلم الذي سيرمز إلى المقالات أو الدروس. ارسم مستطيلًا نحيفًا بارتفاع كبير (استخدمتُ هنا لونًا مغايرًا وبإمكانك اختيار الألوان التي تناسبك). انسخ Ctrl+C وألصق في المقدمة Ctrl+F هذا المستطيل مرتين وحرك النسختين لتصطف جميع المستطيلات بجوار بعضها البعض. ارسم مستطيلًا مستدير الزوايا عرضيًا في الجزء العلوي من المستطيلات الثلاثة وليكن نصف قطر زوايا المستطيل صغيرًا. ارسم مستطيلًا آخر مستدير الزوايا وهذه المرة فليكن نصف قطر الزوايا كبيرًا واجعل نصفه السفلي يغطي المستطيل العرضي السابق ثم أرسل هذا الشكل للأسفل باستخدام الاختصار CMD+Shift+[. استخدم أداة القلم Pen Tool لرسم مثلّث يُشكّل رأس القلم وللحصول على مثلث مثالي استخدم الأدلة الذكية لمساعدتك على تحقيق الأبعاد المثالية لهذا المثلث (لا أنفك أذكر استخدام الأدلّة الذكية في كل مرّة ولكن استخدامها في الرسم اليدوي وبدون التقيّد بأبعاد محددة يسهّل عملية التصميم بشكل مذهل). ارسم دائرةً متوسطة الحجم مركزها هو نقطة رأس المثلث السفلي. ضاعف شكل المثلث ثم حدّده مع شكل الدائرة واستخدم الخيار Intersect من لوحة Pathfinder لقص الجزء المشترك بين الشكلين. وهكذا سيبدو القلم بعد الانتهاء من رسمه. حدّد كل أشكال القلم ثم دوّره باستخدام لوحة Transform بزاوية 45- درجة. هذا هو الشكل النهائي للقلم. والآن سنرسم أيقونة سنجعلها تبدو كشخصين للدلالة على الجمع وسنغيّر لون الخط إلى أخضر. ابدأ برسم مثلث كبير باستخدام أداة المضلعات Polygon Tool واجعل قاعدته للأسفل. استخدم أداة الدائرة مع الضغط على مفتاحي ALT و Shift لرسم دائرة مركزها رأس المثلث. ارسم دائرةً أخرى أكبر قليلًا من الدائرة الأولى تتشاركان ذات المركز. حدّد الدائرة الكبيرة والمثلث ثم انقر خيار Minus Front من لوحة Pathfinder لإزالة مساحة الدائرة المتداخلة مع المثلث من المثلث. حدّد هذا الشكل مع الدائرة ثم انسخ Ctrl+C ثم ألصق في المقدمة Ctrl+F ثم حرّكها لليسار قليلًا وبعدها صغّر حجمها قليلًا. انسخ الدائرة الكبيرة مجدّدًا ثم ألصقها في المكان في المقدمة ثم كبّرها بشكل طفيف مع استخدام مفتاحي ALT و Shift للمحافظة على موقع مركز الدائرة ونسبة الأبعاد. حدّد الدائرة الكبيرة الجديدة والدائرة الصغيرة على اليسار ثم استخدم Minus Back من لوحة Pathfinder لتقص شكل الدائرة الكبيرة من الصغيرة. كرّر ذات العملية مع شكل أعلى الجسم الكبير من نسخ ولصق وتكبير. مجدّدًا كرّر عملية تحديد شكلَي الأجسام واذهب إلى الأمر Minus Back من Pathfinder وذلك لقص الأشكال من بعضها. وبهذا يصبح هذا الشكل جاهزًا للاستخدام. لقد تعلمت في هذا الدرس الطريقة الأساسية لتصميم أيقونات خطيّة باستخدام الأشكال الأساسية وبإمكانك الآن تصميم أشكال أخرى من الأيقونات باستخدام ذات الأسلوب المستخدم في هذا الدرس. ويمكنك استخدام هذه الأشكال الآن كأيقونات بسهولة، يمكنك أن تجعل ألوان التعبئة بيضاء أو تتركها بدون تعبئة ومن الممكن حتى تغيير ألوان الخطوط ولا ننسى أنه بإمكاننا أن نعدّل حجم هذه الأشكال بدون أن تتشوّه لأنها ببساطة رسومات فكتور، كل ما عليك القيام به الآن هو أن تصدّر Export هذه الأشكال إلى صورة PNG وتستخدمها.

اتبع الخطوات في هذا الدرس لتتعلم كيفية تصميم شعار ملوّن ومنوّع بنمط رسومات الأيقونة. هذا النوع من الفن ثلاثي الأبعاد في تصميم الأيقونات أصبح شعبيًّا ومطلوبًا على مستوى العالم. اليوم سنرى كيف يمكن تصميم هذا النوع من الرسومات باستخدام الإليستريتور عبر استخدام مجموعة من الأدوات والتقنيات. عادةً ما أفضّل تصميم الشعار بأشكالٍ ذات علاقة بالشركة أو بالعلامة التجارية بصورة توضيحية، ولكننا اليوم سنتعلم استخدام التقنيات لتصميم أيقونة عامة. يتميز هذا الرسم بالعديد من الاتجاهات في التصميم وهي الأكثر شعبية اليوم كالتصميم ثلاثي الأبعاد والتدرّجات اللونيّة والاختلاف في الألوان. افتح ملفًّا جديدًا في الإليستريتور. استخدم أداة رسم الدوائر Circle tool وابدأ برسم الأشكال الأساسية للأيقونة. ارسم دائرةً صغيرةً داخل دائرةٍ كبيرةٍ ثم أضف دائرةً أصغرَ بين حدود الدائرتين. كبّر المشهد قليلًا ثم اضغط CMD+Y لتنتقل إلى عرض الخطوط فقط. سيساعدك هذا على محاذاة الأشكال بدقةٍ متناهيةٍ وبدون أي تداخل بين الأشكال. استخدم أداة المقص Scissors tool لقص أي مسار عند موضع التقاء الخطوط ثم حدّد الأجزاء غير المطلوبة واحذفها. كبّر المشهد أكثر هذه المرة وحدّد النقطتين المفتوحتين لكل المسارات ثم انقر بالزر الأيمن ثم اختر Join. كرّر هذه العملية لجميع لخطوط التي تم قصّها سابقًا حتى تكون جميع الخطوط موصولةً ومستمرّة. اصنع نسخةً عن هذا الشكل حيث سنحتاجه لاحقًا. ارسم دائرةً أخرى فوق الشكل يمر عبره وبحدودٍ متقاربةٍ من حدود الشّكل الأساسي. استخدم أداة المقص Scissors tool لقصِّ النقاط في موقع التقاء الخطوط ثم احذف الأجزاء الإضافيّة الخارجة من الشكل الأساسي لتبقى الخطوط المتواجدة داخل حدود الشكل الأساسي فقط. استمر في رسم خطوطٍ إضافيةٍ داخل الشكل عبر رسم دوائرَ مختلفةِ الأحجام وقص واحذف الأجزاء الإضافية باستخدام أداة المقص Scissors tool. استخدم أداة القلم Pen tool وانقر على النقطة المفتوحة للخط لرسم مسار مستمر. ارسم خطًا خشنًا حول الشكل حتى تصل إلى نقطة النهاية للخط وتغلق المسار ثم كرّر العملية لباقي الخطوط. حدّد كل خط من هذه الخطوط مع الشكل الأساسي ثم اختر Divide من لوحة Pathfinder. انقر بالزر الأيمن واختر Ungroup، ثم احذف الخطوط الخارجية من الشكل الأساسي. لوّن هذا الجزء حتى تميّزه. كرّر العملية لجميع الأجزاء ولوّنها بألوان عشوائية. استخدم أداة التدرّج اللوني Gradient tool لتحويل هذه الألوان الجامدة إلى تدرّجات لونية. حدّد الألوان بشكل متتابع من لوحة الألوان حيث سنجعل التدرّج الأول من الأحمر إلى البرتقالي والثاني من الأصفر إلى الأخضر وهكذا. عدّل نمط اتجاه التدرّج إلى دائري Radial ثم اضبط اتجاه الألوان لتتدفق بسلاسة عبر التصميم. الشكل يبدو رائعًا ولكننا نستطيع أن نُحسّن ذلك عبر إضافة بعض الظلال بذكاء، ارسم دائرةً متقاطعةً مع الشكل الأول. حدّد هذه الدائرة مع الجزء الأول واختر Intersect من لوحة Pathfinder. كرّر العملية لباقي الأجزاء وامنح هذه الأشكال الجديدة تعبئةً سوداء مع تخفيف Opacity إلى 10% وتغيير خصائص المزج إلى Multiply. أنت تتذكر بأننا صنعنا سابقًا نسخةً عن الشكل الأساسي، الآن سنحتاجها لتتداخل مع الشعار. ضع هذا الشكل فوق الشعار الملوّن بدقّة متناهية. أعطِ هذا الشكل تعبئةً بيضاءَ مع خصائص مزج Multiply ثم اذهب إلى القائمة: Effect > Stylize > Inner Glow عدّل الإعدادات إلى Multiply واللون الأسود و20% opacity وأخيرًا 5mm للتمويه Blur. التدرّجات المتنوعة المُضافة إلى الشكل وعناصر الظلال بالإضافة إلى التوهّج الداخلي حَسّنت من جمالية الشكل ومنحته بُعدًا إضافيًّا ليبدو ثلاثي الأبعاد. ترجمة -وبتصرّف- للمقال: How To Create a Colorful Logo Style Icon in Illustrator لصاحبه: Chris Spooner.

سنتعامل هنا مع العديد من أدوات الفوتوشوب لعمل أيقونة رادار مفصّل وشبه حقيقي. سنقوم بعمل الأيقونة بالعديد من الطبقات layers وبمساعدة التدرجات، الفرش، وتأثيرات نمط الطبقة layer style. سيكون الشكل النهائي للأيقونة رائعًا وسيكون بإمكانك استخدامها كأيقونة لتطبيق ماك أو تطبيق آيفون خاصّ بك. الأيقونة عبارة عن رادار نموذجي باللون الأخضر مع شاشة مضيئة وبرّاقة. سيساعد استخدام التدرجات بطريقة ذكية في إضافة عمق إلى الأيقونة، بينما سيكون حشو pattern خطوط المسح والإضاءات الناعمة في الشاشة عنصرًا مهمًا في إضافة لمسة من الواقعية. قم بفتح مستند فوتوشوب جديد واملأ الخلفية باللون الأسود. بالنسبة للحجم؛ قُم باختياره حسب حجم الأيقونة الذي تريده. بعد ذلك قم بعمل دائرة في طبقة layer جديدة في وسط الملف واملأها باللون الأبيض، ثم اضغط بزر الفأرة الأيمن واختر Transform Selection. قم بتقليص التحديد في الوقت الذي تضغط فيه -مع الاستمرار بالضغط- على مفتاحيّ Shift و ALT. اضغط Enter ثم امسح الجزء الوسطي من الدائرة لعمل حلقة رفيعة. انقر بشكل مزدوج على طبقة الحلقة الرفيعة في خانة الطبقات لتفتح لك نافذة أنماط الطبقة layer styles. قم بإضافة Gradient Overlay متدرجًا من الأخضر الغامق إلى الأخضر الفاتح، ثم أضف Inner Glow خفيف باللون الأبيض. بعد ذلك قم بتغيير إعدادات تأثير Outer Glow وذلك بإضافة ظل أسود حول الحلقة. لن يكون هذا التأثير واضحًا في هذه الخطوة، لكنه سيساعد في إضافة عمق إلى شاشة الرادار لاحقًا. ارسم دائرة داخل مساحة الحلقة باستخدام Elliptical Marquee Tool بحيث تكون هذه الدائرة في طبقة layer جديدة تحت طبقة الحلقة ثم عبئها بتدرج أخضر. اختر ألوانًا متدرجة من الأسود إلى الأخضر المتوسط ثم الأخضر الفاتح جداً، اختر نوع التدرج قطري radial gradient. افتح مستند جديد بحجم 2x3 px. وبعد التكبير zoom قم برسم خط عبر الحافة العليا باستخدام Pencil tool، ثم اٍذهب إلى القائمة: Edit > Define Pattern ارسم دائرة أخرى في طبقة جديدة داخل حدود الحلقة الخارجية ثم ٍاختر أداة التعبئة Paint Bucket Tool وغيّر أسلوب التعبئة إلى Pattern من القائمة المنسدلة، ثم اختر الحشو Pattern الذي قمت بعمله قبل قليل. غيّر الوضع mode إلى Overlay بقيمة Opacity 50%. ارسم خطين أحدهما أفقي والآخر عمودي في طبقة جديدة باستخدام أداتي التحديد Single Row selection وSingle Column selection. ولكي تتأكد من توسيطهما؛ اضغط على مفتاحي Ctrl+A أو CMD+A لتحديد الكل ثم مفتاحي Ctrl+T أو CMD+T لعمل تحويل transform. بعدها قم بإظهار المسطرة بضغط مفتاحي Ctrl+R أو CMD+R وقم بسحب الدلائل guides التي تظهر على جابني المسطرة وجذبها snap إلى مقابض التحويل transformation grips. قم بإضافة قناع mask لطبقة الخطوط واملأها كلّيًا باللون الأسود لجعل كل شيء مخفي. بعد ذلك استخدم فرشاة ناعمة كبيرة باللون الأبيض لإعادة الخطوط وذلك بالنقر مرة واحدة في الوسط. ارسم دائرتين في الوسط ابدأ من مركز الخطين ثم ارسم الدائرة بينما تضغط على مفتاح Alt، ثم اضغط زر الفأرة الأيمن واختر حد Stroke بعرض 1px ولون أبيض. ارسم -في طبقة جديدة- مضلّعًا خارجيّا لاحتواء مدى الرادار باستخدام Polygonal Lasso tool وانتبه جيدًا إلى المحاذاة إلى الوسط. قم بإضافة بقعة بيضاء باستخدام فرشاة ناعمة كبيرة. قم بعمل تحديد إضافي للحلقة وذلك بالضغط على Ctrl وطبقة الحلقة في نفس الوقت -انتبه إلى أن المضلع مازال محدّدًا- ثم أمسح أي شيء زائد وغير مرغوب فيه حول الحلقة من طبقة المضلّع نفسها. غيّر وضع طبقة المضلّع layer mode إلى Overlay ولذلك للسّماح للألوان بالتداخل وإنتاج تأثيرًا أخضرًا برّاق. قم بعمل نقاط فوق الرادار في طبقة جديدة باستخدام الفرشاة، ومن نافذة أنماط الطبقة اختر Outer Glow لإعطائها توهّجًا إضافيّا. وبهذا نكون قد حصلنا على أيقونة رادار صغيرة، رائعة، وجاهزة لتصديرها بصيغة PNG واستخدامها كملف أيقونة تعمل بشكل كامل في تطبيقك المفضّل، أو كنوع من أيقونات الواجهة لتطبيقك أو موقعك على شبكة الأنترنت. ترجمة -وبتصرّف- للدّرس How To Create a Vibrant Radar Icon in Photoshop لصاحبه Iggy.

تُعتبر الأيقونات الخطّية عنصرًا مكمِّلا للتّصاميم المسطّحة، وفي درسنا هذا سنقوم بتصميم مجموعة من تلك الأيقونات والتي يمكن استعمالها مثلا في التّطبيقات الخاصّة بالطّقس. فقط حاول أن تتابع الدّرس خطوة بخطوة وسَتكتشف بساطة الأدوات التي سنستخدمها لعمل مجموعة من الأيقونات الأنيقة. رسم أيقونة السحابةسنبدأ أوّلا بتصميم أيقونة السّحابة. نقوم بفتح برنامج أدوبي اليستريتور ونرسم ثلاث دوائر من لوحة الأدوات، نحاول أن نجعلها متشابكة فيما بينها كما تظهر في الصّورة: نقوم بتحديد كل الدّوائر ثم نستخدم لوحة Align لنتأكّد من أنّها جميعا على نفس الأساس كما في الصّورة: نقوم برسم مستطيل أسفل الدّوائر بحيث يغطّي جميع الفجوات التي نشأت بينها، ثم نستخدم أداة التّوجيه الذكية (alt+U) حتى تساعدنا في تعديل محاذاة المستطيل مع الدّوائر. بعدها نستخدم أداة Pathfinder لدمج جميع الأشكال وذلك بتحديد الخاصية Unite: نقوم بحذف لون التعبئة الأبيض مع زيادة عرض stroke حوالي 5pt، بعدها نحاول تنعيم زوايا الشكل الذي تحصّلنا عليه باستخدام الخاصية round cap وإعدادات corner الموجودين في لوحة stroke: رسم أيقونة الشمسفي جزء آخر من مساحة العمل، نرسم دائرة صغيرة بنفس خصائص stroke السّابقة، ثم نضيف بعض الخطوط الصّغيرة فوقها: ننسخ الشّكل (alt+c) ونضعه فوق الأصلي مباشرة (alt+shift+v)، ثمّ ننقل النسخة ونضعها أسفل الدّائرة. ننسخ ونلصق الخطّين ونقوم بتدوير النسخة بزاوية 90 درجة ( لا تنسى أن تضغط على الزر shift حتى تحافظ على نفس التناسق): نكرّر عمليّة النّسخ واللّصق أكثر من مرة مع تحديد الزاوية بـ 45 درجة لتشكيل مجموعة من الخطوط المتباعدة بانتظام، ثمّ نضع كل تلك الخطوط في مجموعة واحدة: نحدّد كلا من الدائرة والخطوط ثم نقوم بمحاذاتهما مرة على المحور العمودي ومرة على الأفقي (استخدم الخاصية align) لنتمكن من وضعهم في المركز: جمع الأيقوناتواحدة من مميّزات التّعامل مع الأيقونات هي أنّه يمكننا إعادة استعمالها لتنسيقها مع أيقونات أخرى. وهنا يمكننا عمل أيقونة "الجو المتقلّب" عن طريق إضافة أيقونة الشّمس إلى أيقونة السّحاب، ونقوم بتدوير أيقونة الشّمس قليلا لخلق التوازن بين الأيقونتين: نقوم باستخدام أداة المقص Scissors tool لقطع مسار دائرة الشّمس لترك فجوة صغيرة بين العنصرين، ثم نحدّد الجزء المتبقي ونحذفه: نحدّد الخطوط التي تمثل أشعة الشمس ونفكّكها، ثمّ نحذف الجزء الذي لا نحتاجه: المزج بين أيقونتين منفصلتين (أيقونة الشّمس وأيقونة السّحابة) وخلق تناسق بينهما لتشكّيل أيقونة جميلة تعبّر عن "الجو المتقلّب": نستخدم نفس الطريقة لإنشاء أيقونات أخرى، كإستعمال سحابتين لعمل أيقونة تعبّر عن الجو المغيّم: عادة تُستخدم أيقونة القمر أو الهلال للتعبير عن "ليلة صافية" ويُمكننا عملها عن طريق مضاعفة دائرة الشمس التي سبق ورسمناها واستخدام خصائص أداة Pathfinder للحصول على هلال: يمكننا رسم نوع آخر من الأيقونات عن طريق الجمع بين أيقونتي الهلال والسّحاب وذلك لخلق أيقونة تعبّر عن طقس مغيّم في الليل. كما يمكننا أيضا إضافة اللّمسات التي سبق لنا واستخدمناها أثناء رسم أيقونة "الجو المتقلب" كترك مسافة بين شكل الهلال والسّحابة: نقوم برسم خطّين الأول صغير والثاني أكبر منه، ونضعهما أسفل السّحابة بزاوية 45 درجة للتعبير عن "جو ممطر"، نضاعف الخطين ونسحبهما مع الضّغط في نفس الوقت على المفتاح alt، ولتكرار الخطوط بنفس التناسق نضغط (alt+d): يمكننا أيضا رسم أيقونة تعبّر عن حالة "المطر الخفيف" وذلك بحذف بعض الخطوط السّابقة التي كانت تعبّر عن "مطر غزير": نرسم بعض قطع الثّلج الصغيرة وذلك برسم خطّين صغيرين متقاطعين. نضاعف الشّكل الذي تحصّلنا عليه عدة مرات مع اختيارمقاس الزّاوية بـ: 45 درجة، ثمّ نحدّد القطع ونقوم بتدويرها عشوائيا كما في الصورة الموضّحة: الأيقونات التي تعبّر عن "ثلج خفيف"، "عواصف رعدية" و"الصّقيع (حبّات البرد)" يُمكننا عملها عن طريق إحداث بعض التّغييرات على الأيقونات السّابقة أو الجمع بينهم: مجموعة الأيقونات النهائية تحتوي الحزمة النّهائية على مجموعة من الأيقونات والتى تمثّل أنواعا مختلفة من حالات الطّقس. ترجمة -وبتصرّف- للدّرس How To Create a Set of Vector Weather Line Icons لصاحبه Iggy.

سنتعلّم كيفيّة تصميم أيقونات تواصل اجتماعيّ جميلة بواسطة فوتوشوب، وسنغطّي الخاصّية الجديدة في إعدادات أداة الشكل Shape Tool ألا وهي الحدود الخارجية للشّكل Stroke وبواسطة هذه الأداة يمكن وبكلّ سهولة إضافة تأثير قُطَب الخياطة وتعديله حسب الرّغبة. ما سنحتاجه هو بعض أيقونات التواصل الاجتماعي بقياس 32px*32px. وهذا ما سنقوم بصنعه: الخطوة الأولى: تهيئة ملف العملننشئ ملفًّا جديدًا في الفوتوشوب بالأبعاد: 570px*470px، ونختار اللّون 333236# للخلفيّة. نطبّق المؤثر: Filter > Noise > Add Noise على طبقة الخلفيّة Background. سنعمل الآن على إضافة بعض الإضاءة في وسط الخلفيّة، وذلك باستخدام أداة الفرشاة (Brush Tool(B ورسم الإضاءة في منتصف الخلفيّة. نغيّر نمط الطّبقة إلى Soft Light والشّفّافيّة إلى 50%. الخطوة 2:هذا هو الشّكل الأساسيّ والذي نراه في الصّورة أدناه، وهو عبارة عن مستطيل مدوّر الأطراف بمقدار 5px وأبعاده 120px*80px، ولونه #b59973. تمّ تعديل المستطيل بواسطة أداة التّحديد المباشر (Direct Selection Tool(A وأداة القلم Pen Tool وذلك بجعل الأطراف العلوية مستقيمة، وإضافة نقطة إرساء anchor point في منتصف الضّلع السّفلي ثم سحب هذه النقطة إلى الأسفل بواسطة أداة التّحديد المباشر (U). نطبّق الآن إعدادات المزج التالية: التّدرّج اللّونيّ: والنتيجة هي: الخطوة 3: إضافة النقشننشئ ملفًّا جديدًا في الفوتوشوب بالأبعاد 5px*5px، ونجعل الخلفيّة شفّافة باختيار Transparent من قائمة Background Contents. نكبّر الصّورة باستخدام أداة التكبير (Zoom Tool(Z أو بالضغط على المفاتيح Ctrl++ في لوحة المفاتيح، ثم نرسم خطًّا بواسطة أداة قلم الرّصاص (Pencil Tool(B كما في الصّورة أدناه: نحفظ الملفّ على هيئة نقش Pattern عن طريق الأمر: Edit < Define Pattern ويمكن اختيار أي اسم لهذا النّقش. نطبّق هذا النّقش بعد حفظه على الشّكل الأساسيّ كما في الصّورة أدناه. الخطوة 4: إضافة الإضاءةسنحتاج إلى إضفاء بعض النّكهة إلى الشكل الأساسيّ بإضافة بعض الإضاءة. سننشئ طبقة جديدة فوق الشّكل ونربطها به بواسطة الضغط على مفتاح Alt في لوحة المفاتيح مع الضّغط بزرّ الفأرة الأيسر على الخطّ الذي يفصل بين الطّبقتين، كما هو موضّح أدناه: نرسم على الجزء السفليّ من الشّكل باستخدام أداة الفرشاة (Soft Brush Tool(B ونختار نمط Soft Light من أنماط الطّبقة، ونعطي للشفافيّة القيمة 80%. نضيف طبقة أخرى، ونختار أداة التدرّج (Gradient Tool(G ونضغط على خَيَار التدرّج المنعكس Reflected Gradient، وباللّون #fff نضيف التدرّج بالقرب من الجزء العلويّ للشّكل. نختار نمط الطّبقة Soft Light ونخفّض الشّفافيّة إلى 50%. نضيف طبقة أخرى، ولكن هذه المرّة سنضيف بعض الظّلال إلى الشّكل. باستخدام التدرّج المنعكس واللّون #000 نضيف التدرّج إلى الجزء العلويّ من الشّكل، ونختار نمط الطّبقة Multiply ونخفّض الشفافيّة إلى 50%. الخطوة 5: إضافة القطبإضافة القُطَب في برنامج الفوتوشوب CS6 سهل جدًّا، فقد طوّرت شركة Adobe أداة الأشكال وأضافت إليها بعض الإعدادات الإضافيّة الخاصة بالحدود الخارجيّة والأشكال. لوحة إعدادت تعبئة اللّون: لوحة إعدادات الحدود الخارجيّة: لإضافة القُطب، نرسم الشّكل أوّلًا وبنفس الطّريقة المتّبعة في رسم الشّكل الأساسيّ، ولكن بتغيير قيمة العرض إلى 70px. يجب تعديل الحدّ الخارجيّ بواسطة النّقر على الخيارات الإضافيّة More Options وتغيير قيمة Dash إلى 5 و Gap إلى 6. نغيّر لون الحدّ الخارجيّ إلى #a4b1cf، ثمّ نلغي لون التّعبئة ليظهر الحدّ الخارجيّ فقط. يمكن الحصول على نفس الشّكل في نسخة CS5 من الفوتوشوب باستخدام أداة الخطّ (Line Tool (U بتعيين 5px لكلّ خطّ و 6px للمسافة الفاصلة بين خطّ وآخر. نحذف القُطَب العلويّة وذلك بالضّغط بالزرّ الأيمن للفأرة على اسم الشّكل الثّاني واختيار Rasterize Layer، ثمّ نمسح القُطَب العلويّة بواسطة أداة الممحاة Eraser Tool ثمّ نضيف الظلّ إلى القُطَب كما يلي: لنحصل على هذا الشّكل: الخطوة 6: إضافة الأيقوناتيمكن استخدام الأيقونات الموجودة في الملف المرفق مع الدّرس، سنقوم بإضافة الأيقونات وضبط مواضعها وسط الشّكل الأساسيّ. ثم نطبّق إعدادات المزج التّالية: الحدّ الخارجيّ: التدرّج اللونيّ: الظلّ: نضيف اسم الأيقونة بواسطة أداة النصّ (Text Tool (T. نضاعف طبقة النصّ، ونغيّر اللّون إلى #b406a2 ونحرّكها إلى الأعلى بالضّغط مرّة واحدة على مفتاح الاتّجاه إلى الأعلى في لوحة المفاتيح. الخطوة 7: إضافة الظلالنضاعف طبقة الشّكل الأساسيّ، ونختار لون التّعبئة #000000، نضع هذه الطّبقة تحت طبقة الشّكل الأساسيّ ثم نذهب إلى: Filter > Blur > Gaussian Blur نضيف قناعًا Mask إلى الطّبقة، ونغطّي المناطق الّتي لا نرغب في ظهورها، كما في الصّورة أدناه: نضيف ظلًّا كما في الصّورة أدناه، باستخدام أداة التدرّج اللونيّ واختيار التدرّج الخطّيّ Linear Gradient باستخدام اللّون #000000. نضيف خطّاً فوق الظلّ العلويّ بواسطة أداة الخطّ بقياس 1px وباللّون #515005. وأخيرًا، نغطّي طرفي الخطّ والظلّ العلويّين بواسطة قناع لجعلهما يختفيان بصورة متدرّجة. يمكن تحميل ملف PSD المرفق والذي يحتوي على 4 أيقونات تواصل اجتماعيّ أخرى، وبألوان مختلفة. ترجمة -وبتصرّف- للمقال Learn How to Quickly Create Tasty Social Icons using Photoshop لصاحبه Dainis Graveris.

في درسنا هذا سنتعلم طريقة تصميم مؤقت عد تنازلي والذي نجده في نظام التشغيل iOS 7 بواسطة برنامج فوتوشوب . هيمن التّصميم المسطّح مؤخّرا على شبكة الأنترنيت، ولا شك في أن الجميع بات يعلم سعي شركة أبل لخلق نظرة جديدة وشعور جديدة تجاه أنظمة تشغيلها، لقد كنت سعيدا حقا عند رؤيتي لبعض التصاميم التي تم إصدارها قبل صدور نسخة نظام التشغيل iOS 7. لهذا قمت بتجهيز هذا الدرس والذي سيستند فيه كل من الشكل والألوان على الخلفيات التي تم إصدارها، و سيكون هذا الدرس سريعا جدا ومناسبا للمبتدئين وسيساعدهم في فهم القوة التي يتمتع بها التحويل الحر. 1. نقوم بفتح ملف جديد وليكن بالمقاسات التّالية: 730px*410px، ثم نضيف الخطوط التوجيهية guidelines عن طريق سحب أداة المسطرة Ruler Tool التي تظهر في الأعلى وعلى الجهة اليسرى، ووضع الخطّين النّاتجين في مركز العمل (خط عمودي وآخر أفقي): 2. نرسم دائرة باستخدام أداة (Ellipse Tool (U مقاسها 120px*120px، نضعها في مركز مساحة العمل لكن مع إخفاء طبقة التعبئة fill وتحديد قيمة stroke بـ: 5px، أمّا اللّون فنختار #e1e1e1: 3. نقوم بتكبير مساحة العمل بنسبة 1200% ونرسم خطًا عرضه 1px باستخدام الأداة (Line Tool (U، بدءًا من الحافّة العلوية إلى غاية مركز الدّائرة: 4. من لوحة المفاتيح نضغط Ctrl+Alt+T، فتظهر لنا النّقاط التي تتحكّم بتحويل الشّكل.هل شاهدت النقطة المحورية (التي تظهر في وسط الخط) دعنا نقوم بتحريكها إلى الحافة السفلى من الخط عن طريق الضغط على مفتاح Alt في لوحة المفاتيح والنقر وسحبه إلى الأسفل: 5. قبل الضغط على المفتاح Enter وبينما النقاط التي تتحكم بتحويل الشكل لا زالت تظهر نقوم بتغيير قيمة الدوران Rotation إلى 10 درجات ثم نضغط على الزر مرتين Enter: 6. من لوحة المفاتيح نضغط Shift+Ctrl+ Alt+T لنسخ ما قمنا بتصميمه في الخطوة السابقة، نستمر في الضغط إلى غاية الحصول على شكل حلزوني كما يظهر في الصورة: بعدها نقوم بتغيير اللون إلى الأبيض: 7. نقوم بمضاعفة الشكل الأساسي الأول الذي قمنا بعمله ونضعه في أعلى قائمة الطبقات layers panel، حيث أن ذلك سيكون مؤشر الدوران: نقوم بتطبيق التدرج اللوني gradient overlay: 8. نقوم بتغطية الجزء الذي نريد إخفاءه ونتأكد أنه يتوافق مع اليوم الذي نريده وكذلك الوقت، الدقائق والثواني التي سوف نضعها: 9. باستخدام أداة النص (Text Tool (T نضع رقم اليوم الذي نريده وكذلك الوقت، الدقائق والثواني مع إضافة تسمية مناسبة: الخطوة الأخيرة نقوم بتجميع الطّبقات التي قمنا بعملها ومضاعفتها 4 مرات، ثم نرتّبهم بشكل أفقي مع تحديد مسافة 20px للفصل فيما بينهم: ترجمة -وبتصرّف- للدّرس Create a Flat Countdown Timer in Photoshop – iOS 7 Inspired لصاحبه James Richman.

سنتعّلم في هذا الدرس طريقة صنع إحدى أدوات التصوير؛ الكلاكيت. سنقوم باستخدام الأدوات الأساسية، تأثيرات 3D، التدرّجات وأوضاع مزج الطبقات. 1. نفتح مستندا جديدا بالإعدادات التالية: الأبعاد: 500px*500px.نمط الألوان: CMYK.الدقة: (Screen (72ppi.ونتأكّد من أنّ مربّع الخيار Align New Objects to Pixel Grid غير مؤشّر ثم نضغط OK. 2. نرسم مستطيلا باستخدام (Rectangle Tool (M. بالأبعاد 295px*190px. نملأ الشكل بلون معيّن. نقوم بعمل نسخة من هذا المستطيل (Ctrl+C ثم Ctrl+F) ثمّ نغيّر ارتفاع المستطيل الثاني إلى 40px ونحرّكه إلى الأعلى باستخدام أسهم الاتّجاهات من لوحة المفاتيح: 3. نحدّد المستطيل الصغير ونذهب إلى: Object > Transform > Rotate ونضع قيمة الزاوية 10 درجات. بعد تدويره نقوم بتحريكه للأعلى باستخدام الأسهم من لوحة المفاتيح إلى أن تبقى الحافّة السفلية اليسرى فقط هي المتّصلة بالمستطيل الكبير. نحدّد المستطيلين معًا ونقوم بتوحيدهما بالضغط على زرّ Unite من لوحة مستكشف المسارات: Windows > Pathfinder 4. نقوم برسم وجه الكلاكيت باستخدام أداة القلم (P) كما موضّح في الصورة أدناه. نختار عرض الخط 3pt أو 5pt حسب الرغبة. نقوم بتحديد جميع الخطوط ونذهب إلى: Object > Expand 5. نقوم بإضافة النصوص أيضًا كما في الصورة أدناه. نحوّل النصوص إلى حدود (Outlines) وذلك بتحديد النصّ وننقر بزرّ الفأرة الأيمن ثمّ نختار Create Outlines. (أو نحدّد النصّ ثم نذهب إلى القائمة Type > Create Outline). هذه الخطوة تفيدنا في تحويل النص إلى خطوط ومنحنيات لا يمكن التعديل عليها، لذلك علينا أن نتأكد من النصوص قبل تحويلها إلى منحنيات: 6. نقوم برسم شكل مستطيل (M) ثمّ نضغط على مفتاح (E) من لوحة المفاتيح لعمل تحويل للمستطيل. نمسك النقطة الوسطية في الأعلى ونقوم بسحبها إلى اليسار بينما نضغط على مفتاحيّ Ctrl +Shift. يجب أن يكون الشكل الناتج كما في الصورة أدناه: 7. ننسخ الشكل الذي قمنا بعمله في الخطوة السابقة ونقوم بتحريكه إلى اليسار باستخدام الفأرة بينما نضغط على مفتاحيّ Alt+Shift. نضغط على Ctrl+F لعمل نسخ أخرى منه. عندما نكتفي بعدد النسخ نقوم بتحديدها جميعًا ونقوم بنسخها نسخة أخرى. من خيارات لوحة التحويل Transform Panel: Window > Transform نقوم باختيار Flip Vertical (نقوم بإظهار قائمة الخيارات من الزرّ الموجود في أقصى الحافّة اليمنى للوحة التحويل). بعدها نذهب إلى: Object > Transform > Rotate ونضع قيمة الزاوية 10 درجات. نقوم بمحاذاة هذه الأشكال مع الجزء العلوي من الكلاكيت باستخدام أسهم لوحة المفاتيح: 8. نقوم برسم مستطيل وتغيير حجمه ومكانه ليتناسب مع الشكل كما موضّح في الصورة أدناه (المستطيل الأخضر). نقوم بتحديد النقطة العلويّة اليمنى من المستطيل وتحريكها إلى الجهة اليسرى باستخدام (Direct Selection Tool (A والفأرة. عندما نتأكّد من أن الشكل أصبح كما هو مرغوب به نقوم بتحريكه جانبًا لكي نستخدمه لاحقًا: 9. نقوم بتحديد الخطوط، النصوص، وجميع الأشكال في وجه الكلاكيت مرّة واحدة، ثم نسحب هذه المجموعة إلى لوحة الرموز (Symbols Panel): Window > Symbols Panel يمكننا إعطاء اسم للرمز الجديد من نافذة خيارات النماذج، ثم نختار نوع الرمز Graphic ونضغط OK.يمكننا الآن حذف المجموعة الأصلية لأنّها أصبحت في حوزتنا في لوحة الرموز. 10. نقوم بتحديد شكل الكلاكيت ونذهب إلى القائمة: Effects > 3D > Extrude & Bevel سنستخدم الاعدادات كما في الصورة أدناه: 11. نضغط على زرّ Map Art من نافذة خيارات 3D Extrude & Bevel، ثمّ نختار المجموعة التي أضفناها في لوحة الرموز من القائمة المنسدلة الخاصّة بالرمز (Symbols) في نافذة Map Art؛ ثمّ نضغط OK. نذهب إلى القائمة: Object > Expand Appearance ثمّ إلى: Object > Ungroup نستمّر بفكّ المجموعات (Shift+Ctrl+G) إلى أن نحصل على أشكال منفصلة (أيّ يصبح الأمر Ungroup غير فعّال). نقوم بتحديد الجهة الأمامية من الكلاكيت، نضغط بزرّ الفأرة الأيمن ثمّ نختار Release Clipping Mask. 12. نحدّد الشكل الذي قمنا بوضعهِ جانبًا فيما سبق، ثم نذهب إلى: Effect > Stylize > Round Corner نغيّر نصف القطر إلى 10 ونضغط OK. نذهب الآن إلى القائمة: Effect > 3D > Extrude & Bevel ونستخدم نفس الإعدادات السابقة (الخطوة 11) ماعدا قيمة العمق (Depth) نغيّرها إلى 2pt. نذهب إلى: Object > Expand Appearance ثمّ إلى: Object > Ungroup نستمّر بفكّ المجموعات (Shift+Ctrl+G) إلى أن نحصل على أشكال منفصلة. نقوم بوضع هذا الشكل فوق الكلاكيت في مكانه المناسب: 13. نحدّد العناصر الثلاث من جانب الشكل ثلاثي الأبعاد معًا ثمّ نضغط على زرّ Unite من لوحة مستكشف المسارات. 14. نملأ الشكل بتدرّج قطري من الأبيض إلى الأسود كما موضّح في الصور أدناه: 15. لكي نملأ الكلاكيت بنفس اللون نستخدم أداة القطّارة (Eyedropper Tool (I، ونضغط على الشكل السابق لنسخ اللون. يمكننا تعديل اتّجاه التدرّج ومكانه باستخدام أداة التدرّج (Gradient Tool (G كما في الصورة أدناه: 16. نحدد الأشكال البيضاء ونملأها بتدرّج خطي من الأبيض إلى الرمادي: 17. نقوم برسم ثلاث أشكال بيضوية باستخدام (Ellipse Tool (L ونملأها بتدرّج قطري من الأبيض إلى الرمادي ونضعها في مكانها المناسب في وجه الكلاكيت كما موضّح في الصورة أدناه: وبذلك نكون قد انتهينا من عمل الكلاكيت. سنقوم الآن بعمل مكبّر صوت باللون الأحمر. 18. نقوم برسم الشكل الموضّح في الصورة أدناه باستخدام أداة القلم (Pen Tool (P. الشكل بسيط يمكن رسمه بالقليل من النقاط. لنتأكد فقط من إغلاق المسار بوضع النقطة الأخيرة فوق النقطة الأولى: 19. نذهب إلى القائمة: Effect > 3D > Revolve ونستخدم الإعدادات التالية: 20. نملأ الشكل بلون أحمر جميل ونذهب إلى القائمة: Object > Expand Appearance ثمّ إلى: Object > Ungroup نستمّر بفكّ المجموعات (Shift+Ctrl+G) إلى أن نحصل على أشكال منفصلة (إي يصبح الأمر Ungroup غير فعّال). نحدّد الأشكال المتبقّية (3 أو 4 اشكال) بينما نضغط على مفتاح Shift ونقوم بتحريكها باستخدام أسهم لوحة المفاتيح. بالإمكان حذف الأجزاء المتبقّية (في الجهة اليسرى) حيث لم نعد بحاجة إليها. بهذه الخطوة سنكون قد حصلنا على بنية بسيطة ومرتّبة للملف الخاص بنا. 21. نحدد الجزء السفلي من مكبّر الصوت ثم نضغط على زرّ Unite من لوحة مستكشف المسارات (Pathfinder Panel): 22. نكرّر الخطوة السابقة مع الأجزاء الأخرى. بعد ذلك نقوم برسم الشكل الموضّح أدناه (الشكل الأخضر) باستخدام أداة القلم (P). سيمثّل هذا الشكل شعاع ضوء على سطح مكبّر الصوت: 23. نحدّد الشكل السفلي من مكبّر الصوت ثم نقوم بنسخه (Ctrl+C) ثمّ نضغط على مفتاح Shift+ شكل الشعاع معًا ونضغط على زرّ Intersect من لوحة مستكشف المسارات. نضغط على مفتاحيّ Ctrl+B لوضعه خلف شكل الشعاع. نغيّر لون الشعاع إلى اللون الأحمر. نحدد الجزء السفلي للكلاكيت وشكل الشعاع معًا ونضغط Ctrl+Alt+B، ثمّ نذهب إلى القائمة: Object > Blend > Blend Options في نافذة الخيارات التي ستظهر نغيّر نوع المسافة (Spacing) إلى Specified Steps من القائمة المنسدلة، ثمّ نضع عدد الخطوات 40. 24. نقوم بتحديد الجزء العلوي من مكبّر الصوت ثم نملأه بتدرّج قطري من الأحمر إلى الأسود. يمكننا تغيير مركز واتجاه التدرّج باستخدام أداة التدرّج (G): 25. يمكننا الآن وضع الكلاكيت بالقرب من مكبّر الصوت. انتهى التصميم تقريبًا، لكن بقِي هنالك شيئًا مفقودًا في الصورة؛ الظلال! فبوجود الظلال تصبح الصورة أكثر واقعية. 26. نقوم بعمل نسخة من كل من الكلاكيت ومكبّر الصوت (Ctrl+ C ثم Ctrl+V). نحدد نسخة الكلاكيت ونضغط على زرّ Unite من لوحة مستكشف المسارات. نكرر هذه الخطوة مع نسخة مكبر الصوت أيضًا. أصبح لدينا الآن أشكال للظل، وكلّ ما علينا فعله هو محاذاتها بشكل صحيح وفي المكان الصحيح: 27. نقوم بوضع ظل الكلاكيت خلف شكل الكلاكيت (Ctrl+X، ثم نحدّد شكل الكلاكيت، ثم نضغط Ctrl+B). نذهب إلى القائمة: Object > Envelope Distort > Make it with Warp ونستخدم الاعدادات كما موضّحة في الصورة أدناه ثمّ نضغط OK. نذهب إلى: Object > Expand ثم نضغط OK. 28. نحدّد ظل مكبّر الصوت ثم نضعه فوق مكبّر الصوت. يتم تحريك الأشكال إلى الأمام أو الخلف عن طريق الاختصار (Ctrl+[) أو (Ctrl+]). يجب أن يكون الشكل الناتج كالتالي: 29. نحدد شكليّ الظلّين ونضغط على زرّ Intersect من لوحة مستكشف المسارات: 30. نملأ الشكل الناتج بتدرّج من الأبيض إلى الأسود. نغيّر الوضع إلى Multiply من لوحة الشفافية: Window > Transparency Panel 31. نقوم بالتعديل على اتجاه التدرّج لنحصل على الشكل في الصورة أدناه. وبذلك يكون الدرس قد انتهى بالفعل: ترجمة -وبتصرّف- للدّرس: Create a Clapperboard icon with Adobe Illustrator.

سنقوم بتصميم أيقونة غيمة زاهية وجذّابة عن طريق اتباع هذا الدرس المفصّل خطوة بخطوة. سنستخدم الكثير من التدرجات وتأثيرات الإضاءة لعمل أيقونة غيمة رائعة ومثالية لاستخدامها عند تصميم موقع جديد أو تطبيق للنقّال. ولكي نعطي للأيقونة مظهرًا ثلاثيّ الأبعاد سنستخدم العديد من الألوان. يتيح لنا مزيج الألوان من البنفسجي والأزرق في إبراز القاعدة الملّونة، وستساعد الإضاءات في ابراز الأيقونة ورفعها عن مستوى الشاشة. افتح مستند فوتوشوب جديد وابدأ برسم دائرة في طبقة (layer) جديدة باستخدام Elliptical Marquee Tool واملأها باللون الأسود. اضغط على المفتاح Shift، ومع الاستمرار بالضغط قم بتحريك التحديد إلى احدى الجوانب لعمل نسخة من هذه الدائرة واملأها بالأسود أيضًا. بعد ذلك قم بملأ المساحة الوسطية باستخدام Rectangular Marquee Tool، وتأكد من محاذاة الحافة السفلية بصورة جيدة. ارسم دائرتين احداهما أكبر قليلًا والأخرى أصغر قليلًا بحث تتداخل مع الدائرتين اليمنى واليسرى الأصليتين باستخدام Elliptical Marquee Tool من جديد. إذا كانت هنالك أي فراغات في الوسط فقم بملئها ليصبح الشكل كالغيمة. انقر بشكل مزدوج على طبقة الغيمة لتفتح لك نافذة أنماط الطبقة (layer styles window)، ثم قم بإضافة Gradient Overlay. قم بإضافة لون ثالث في الوسط وغيّر الألوان إلى 300a85 ،#2555dd# وc8ecff# عمل أيقونة غيمة رائعة باستخدام فوتوشوب. عندما تقوم باختيار الألوان تجنّب اختيار الدرجة (tone) من نفس الصبغة (hue)؛ وإنما قم بالاختيار من عجلة الألوان بحيث تكون الاختلافات في الألوان أكثر حدة، وبالتالي تصبح الدرجات أكثر دفئًا أو أكثر برودة. قم بإضافة تأثير Inner Glow للغيمة لإعطائها مظهر ثلاثي الأبعاد. غير اللون إلى الأبيض، الوضع (mode) إلى Soft Light، وقيمة Opacity 100%، ثم تلاعب بالحجم الخاص بالتأثير-حسب ما تراه مناسبًا-. يمكن استخدام تأثير Inner Shadow لإبراز الجهة العليا بشكل رائع. غيّر اللون الافتراضي من الأسود إلى الأبيض ثم غّير الوضع إلى Overlay لكي تسمح للألوان بالتداخل. قم بتعديل إعدادات Distance ،Choke وSize بحيث يعطي مظهر متوازن ما بين خشن/لامع وأملس/ناعم. اضغط موافق لتطبيق تأثيرات الطبقة ثم اضغط Ctrl + طبقة الغيمة لعمل استعادة للتحديد ثم اذهب إلى: Select > Modify > Expand وضع القيمة 5px. املأ التحديد الجديد باللون الأسود وبطبقة جديدة تحت طبقة الغيمة الرئيسية لعمل إطار خارجي. افتح نافذة أنماط الطبقة لطبقة الإطار الخارجي وقم بإضافة Gradient Overlay. اختر نفس الالوان البنفسجية والزرقاء لكن بتغيير كافٍ في الدرجة (tone) لكي تتباين مع طبقة الغيمة. استخدمتُ هنا الألوان 4c54e5 ،#c0e8ff# و571a9b#. اعمل استعادة تحديد (Load Selection) لطبقة الغيمة مرة أخرى ثم اضغط بزر الفأرة الأيمن واختر حدّ (Stroke) في طبقة جديدة. غيّر عرض الحد إلى 2px واللون إلى الأبيض ثم تأكد من إن الموقع في الداخل (Inside). امسح الجزء السفلي من الإطار باستخدام الممحاة (Eraser) وبفرشة ناعمة كبيرة مكوّنًا بذلك تلاشي متدرّج من الأعلى إلى الأسفل. هذه اللمسة البسيطة تضيف إضاءة دقيقة إلى الأيقونة. ارسم بقعة سوداء أسفل الغيمة في طبقة جديدة، ثم عن طريق التحويل (transform) قم بتسويتها وتسطيحها بحيث يصبح شكلها أقرب للظل. اقسم الظل إلى نصفين باستخدام أدوات التحديد (Marquee وSelection). اضغط على المفتاح Shift واستمرّ بالضغط لتتأكد من إن النصف الثاني يبقى في نفس المستوى. استخدم Single Column Marquee Tool لعمل تحديد، ثم اضغط Ctrl+T وقم بسحب التحديد ليملأ المنطقة الوسطية للظل بقطعة مستقيمة. حرّك الظل حتى يصبح تحت الغيمة على الأرضية، ثم قم بإضافة Gradient Overlay من نافذة أنماط الطبقة. استخدم للظل درجات أغمق من الألوان الأزرق والبنفسجي. الظل في الواقع ليس أسودًا وإنما هو مكّون من مزيج من الألوان والانعكاسات التي حوله. انتهينا من صنع أيقونة غيمة رائعة الآن. التدرجات والإضاءات ساعدت حقّا في عمل مظهر ثلاثي الأبعاد، بينما التنوع في الألوان يعطي بدّقة إحساس أكثر واقعية للظل. ترجمة -وبتصرّف- للدّرس How to create a vibrant cloud icon in Photoshop لصاحبه: Iggy.

هل تريد عمل شعار في دقائق معدودة بدون إنفاق المال؟ هذا ما سنتعلمّه في هذا الدرس، حيث سنقوم بعمل شعار بسيط باستخدام أدوات Adobe Illustrator الأساسية والخطوط والأيقونات المجّانيّة من موقعي dafont.com وmeanicons.com. يمكننا بالطبع تحميل العديد من الشعارات المجّانيّة من مواقع المخزون المجّاني مثل shutterstock.com ،graphicriver.net وcreativemarket.com، لكن سيكون من الممتع أكثر أن نصنع شعارنا الخاصّ بأنفسنا. ملاحظة: الحجم اختياري في هذا الدرس. 1. نبدأ برسم دائرة باستخدام (Ellipse Tool (L ونملأها باللون C=4 M=14 Y=24 K=0: 2. نقوم بنسخ الدائرة (Ctrl +C ثم Ctrl +F) ونملأها بلون آخر. اللون المستخدم هنا هو C=100 M=95 Y=30 K=15: 3. نقوم بنسخ الدائرة الزرقاء (Ctrl +C ثم Ctrl +F) ونملأها بنفس اللون المستخدم في الدائرة الأولى: 4. نرسم مستطيلا باستخدام (Rectangle Tool (M ونقوم بمحاذاته مع الدوائر. نحدّد المستطيل ثمّ نضغط المفتاح Shift والدائرة الوسطية (التي قمنا برسمها في الخطوة 3). وبينما لا تزال الأشكال محدّدة نضغط على الدائرة من جديد. بهذه الطريقة قد قمنا بتحديد الأشكال بحيث لا تتحرك وسيبقى المستطيل بمحاذاة الدوائر. نقوم بالضغط على زرّي Horizontal Align Center وVertical Align Center (نجدهما في شريط الأدوات العلوي): 5. نحدّد المستطيل ثم نضغط (E) لتفعيل خيارات التحويل (لن نلحظ أي تغيير هنا). نمسك بمقبض التحويل (Transformation Handle) الوسطي للجهة اليمنى، ثم نقوم بتحريكه إلى الأعلى بينما نضغط على مفتاح Ctrl. بعد أن نحصل على الشكل المطلوب بقوم بمحاذاته من جديد مع الدوائر. 5-أ. نقوم بنسخ هذا الشكل (Ctrl +C ثم Ctrl +F)، ثمّ نحدّد النسخة العلوية ونقوم بتحريكها باستخدام أسهم لوحة المفاتيح: 6. نرسم مستطيلا آخر. نقوم بتحديد المستطيل الجديد مع المستطيل الذي بتحريكه في الخطوة السابقة اثناء الضغط على مفتاح Shift، ثمّ نضغط على زرّ Minus Front من لوحة مستكشف المسارات (Window> Pathfinder Panel): 7. نكرّر الخطوتين (5-أ) و(6) ولكن على الجهة الأخرى من المستطيل الأصلي. ستصبح النتيجة كما في الصورة أدناه. نقوم بتحديد الشكلين الجديدين ثمّ نذهب إلى: Object > Arrange > Send to Back 8. نحدّد المستطيل العلوي ثم نذهب إلى: Object > Path > Offset Path نضع قيمة (Offset (-8pt، ونضغط OK: 8-أ. نملأ الشكل الناتج باللون C=7 M=75 Y=50 K=0: 9. نقوم بتحديد أحد الشكلين الصغيرين من الحافّة، ثم باستخدام أداة القلم (P) نقوم بوضع نقطة كما موضّح في الصورة أعلاه. نحرك هذه النقطة بواسطة أسهم لوحة المفاتيح حتّى نحصل على شكل شبيه بالشريط. عندما ننتهي من هذا نقوم بتكرار الخطوة (8) على الشكلين. نملأ الشكلين الجديدين بنفس اللون السابق (C=7 M=75 Y=50 K=0). نقوم بعمل تأثير ظل للشريط باستخدام أداة القلم (P) أيضًا. نقوم برسم شكل مثلّث يمثّل الجانب الآخر من الشريط، ثمّ نملأه باللون C=27 M=37 Y=45 K=0. نقوم بقص شكل الظل (Ctrl +X) ثمّ نحدد شكل الشريط ونلصقه خلفه (Ctrl +B) لكي يصبح الظل خلف الشريط: 10. نكرر نفس الخطوة على الجهة الأخرى. وبذلك انتهينا من صنع الشعار: مصادر مجانية11. نحتاج إلى إضافة نصّ ("!Free Delivery") وأيقونة سيّارة لكي نحصل على الشكل النهائي للشعار. سنستخدم نوع الخط (Lobster). يمكن تحميل أي نوع من الخطوط من www.dafont.com. يرجى الاطلاع على رخصة الاستخدام قبل استخدام الخط لأغراض تجارية: 12. نقوم بتدوير النص بعد كتابته عن طريق الضغط على زاوية مربّع النص: 13. نقوم بالذهاب إلى الموقع www.meanicons.com وتحميل حزمة الأيقونات المجّانيّة (Free icon Pack). (إذا اعجبتك الأيقونات في الحزمة المجانية يمكنك تحميل الحزمتين (Pro & Mean Packs) أو بإمكانك مشاركة الصفحة مع الآخرين). بعد تحميل حزمة الأيقونات نعود إلى برنامج Adobe Illustrator. 14. لمستخدمي إصدار البرنامج Adobe Illustrator CS6: أ. نذهب إلى القائمة: Window > Symbols Panel نقوم باختيار: Open Symbol Library > Other Library من خيارات لوحة الرموز (Symbols Panel). ب. نقوم بالبحث في جهاز الحاسوب عن ملف أيقونات meanicons الذي قمنا بتحميله ونختار الملف meanicons_ai_symbols.ai. جـ. بعد تنصيب الملف سنرى لوحة جديدة خاصّة بالأيقونات من meanicons.com كما في الصورة أدناه: 15. من لوحة الأيقونات نقوم باختيار أيقونة الشاحنة وسحبها إل منطقة العمل. ننقر بزرّ الفأرة الأيمن ونختار Break Link to Symbol من القائمة. نحدّد أيقونة الشاحنة ونقوم بنسخ اللون الأزرق الغامق من الدائرة باستخدام أداة القطّارة (Eyedropper Tool (I: 16. لمستخدمي الإصدارات الأقدم من Adobe Illustrator CS6: نقوم بفتح الملف meanicons.eps وفكّ مجموعة الأيقونات إذا احتجنا لذلك. نبحث عن أيقونة الشاحنة وننسخها (Ctrl +C) ثمّ نلصقها في منطقة العمل (فوق تصميم الشعار). نقوم بتحديد أيقونة الشاحنة ثم نقوم بنسخ اللون الأزرق الغامق من الدائرة باستخدام أداة القطّارة (Eyedropper Tool (I. 17. نرسم مستطيل صغير (M) ثمّ نقوم بتحديد الحافّة السفلية اليمنى للمستطيل باستخدام أداة الانتقاء المباشر (A)، ونحرّك هذه النقطة باتجاه اليسار باستخدام أسهم لوحة المفاتيح ليصبح الشكل كما في الصورة أدناه: 18. نقوم بنسخ هذا الشكل (Ctrl +C ثم Ctrl +F)، ثمّ نحرّك النسخة إلى الأسفل ونقلل حجمها باستخدام أداة التحديد (Selection Tool (V. ننسخ الشكل ونحرّكه إلى الأسفل من جديد: 19-نقوم بإدراج النص "Since 1879" في الأعلى. وبذلك نكون قد انتهينا: قد تظن أن صنع شعار كهذا هو أمر معقّد، لكن بعد عدّة ساعات من الممارسة سيصبح الأمر سهل جدّا. يمكنك إضافة السحر إلى تصاميمك باستخدام المصادر المجّانية المتوفّرة على الأنترنت. ترجمة -وبتصرّف- للدّرس Create a Badge using Free Resources.

بعد اصدار نظام التّشغيل iOS 7 من طرف شركة أبل Apple، أصبح لزاما على مصممي ومطوّري التطبيقات أن يعيدوا ظبط لغتهم البصرية حتى تتناسب مع طبيعة التصميم الجديد لنظام التشغيل iOS 7. إذا أردت أن تعرف أكثر حول المبادئ الأساسية المستخدمة من طرف الشركة في تصميم الأيقونات ستجدها في هذا الرابط. بالنسبة لدرسنا اليوم سنتعلّم طريقة استخدام الأدوات الأساسيّة الموجودة في برنامج أدوبي اليستريتور، التّدرج اللّوني، وأداة Blend Tool لتصميم أيقونة سفاري safari. بداية نقوم بتحميل الملفات المرفقة لهذا الدرس أو الاستعانة بأيّ ملف شبيه له (الملف عبارة عن تصميم شبكة). 1. بعد تحميل الملف المرفق، نقوم بفتحه في طبقة layer جديدة مع قفلها والتأكد بأنها تتواجد أعلى باقي الطّبقات كما يظهر في الصورة: 2. نقوم برسم مربّع باستخدام أداة المستطيل (M) دون أن ننسى الضّغط على المفتاح shift في نفس الوقت. نحدّد مقاس المربّع (الطول والعرض) بـ: 120px، بعدها نضعه فوق الشّبكة ( الملف الذي قمنا بتحميله سابقا). 3. نتّبع المسار التالي: Effect > Stylize > Round Corners ونحدّد قيمة Radius بـ 27°. 4. الخطوة التّالية هي رسم دائرة باستخدام الأداة (Ellipse Tool (L مع الضّغط في نفس الوقت على المفتاح shift، ووضعها فوق المستطيل حيث يمكننا تعديل حجمها ليتناسب مع الشبكة (140px)، ثم نقوم بتلوينها باستخدام اللون الأزرق (بإمكانك تغيير اللون لاحقا). 5. نرسم شكلاً جديدا باستخدام أداة Polygon Tool. نضغط على الزر الأيسر للفأرة وفي نفس الوقت نضغط على مفتاح السهم السفلي لحذف بعض زوايا الشكل الذي قمنا برسمه فنحصل على مثلث. نستمر في الضّغط على الزر الأيسر للفأرة مع الضغط على المفتاح shift لوضع المثلث بشكل أفقي، نقوم بعدها بوضعه فوق الدائرة (بإمكاننا تعديل القياسات إذا احتجنا إلى ذلك). نضاعف المثلّث بالضغط على (Ctrl + C ثم Ctrl + F) ثم نتبع المسار التالي: Object > Transform > Reflect نحدد Axis بـ: Horizontal ونضغط OK، نقوم بوضع المثلث الثاني أسفل المثلث الأوّل كما هو مبين في الصورة ونختار لهما اللونين الأحمر والأبيض. بعدها نحدّد المثلثين ونغير المقاس إلى 16px. 6. نتبع المسار التالي: Object > Transform > Rotate ونختار الزاوية: 45-° (أو بإمكانك فعل ذلك بطريقة أخرى من خلال الضغط على shift وتدوير الشكل بواسطة الفأرة) نقوم برسم مستطيل صغير ومحاذاته مع الدّائرة، بعدها نضاعفه ونضع المستطيل الجديد في أسفل الدائرة ثم نحدد كلا المستطيلين ونضغط Ctrl+G لجمعهم في طبقة واحدة. 7. نتّبع المسار التالي: Effect > Distrort&Transform > Transform ونحدد قيمة الزاوية بـ: 10° مع تحديد عدد النسخ Copies بـ: 17 نسخة ونضغط OK. 8. نضاعف مجموعة الطّبقات (Ctrl + C ثم Ctrl + F) ثم نقوم بعزل النسخة الثانية ونضغط مرّتين على زر الفأرة، بعدها نعدّل طول المستطيلات. 9. نقوم بالضّغط مرّتين على السهم العلوي الموجود في قائمة الطبقات layers، ثم نتبع المسار التالي: Object > Transform > Rotate مع تحديد قيمة الزاوية 5°. نقوم بتحديد المثلثين ونحاول وضعهما في الواجهة بالضغط على Ctrl+Shift+]. 10. نطبّق التدرج اللّوني على الدّائرة باستخدام الألوان التالية: (R=0, G=227, B=255) و (R=24 ,G=70, B=243) أو: 1846F3 #00E3FF# في هذه الإضافة سأريك طريقة عمل خط متقطّع، حيث بإمكانك استخدام هذه الطريقة عندما لا تكون بحاجة إلى عدد معين من الخطوط. نحدد قيمة Stroke بـ: 7pt ثم نقوم بتعديلات كما في الصورة الموضحة: وهذه هي الصورة النهائية لأيقونة المتصفح safari بعد تتبع جميع الخطوات السابقة: ترجمة -وبتصرّف- للدّرس How to create iOS7 icons in Adobe Illustrator? #03 – Safari icon لصاحبه Zoltan Ordog.

بعد إصدار نظام التّشغيل iOS 7 من طرف شركة أبل Apple، أصبح لزاما على مصممي ومطوّري التطبيقات أن يعيدوا ظبط لغتهم البصرية حتى تتناسب مع طبيعة التصميم الجديد لنظام التشغيل iOS 7. جميع التّطبيقات تحتاج أن تظهر بشكل جميل، ولا تنسى أن أيقونات التطبيقات الموجودة في المتاجر هي من تجذب المستخدمين، وهي من تظهر على شاشات هواتفهم .نظام التشغيل iOS يقوم باستعمال الأيقونات في مراكز الألعاب، نتائج البحث، الإعدادات وكذلك الوثائق التى تم إنشاؤها بواسطة التطبيقات. إذا أردت أن تعرف أكثر حول المبادئ الأساسية المستخدمة من طرف الشركة في تصميم الأيقونات ستجدها في هذا الرابط. في درسنا سنتعلم طريقة استخدام الأدوات الأساسية الموجودة في برنامج أدوبي اليستريتور، التدرج اللوني، وأداة Blend Tool لتصميم أيقونة الفيديوهات. بداية نقوم بتحميل الملف المرفق أو الاستعانة بأيّ ملف شبيه له (الملف عبارة عن تصميم شبكة). 1. بعد تحميل الملفات المرفقة لهذا الدرس، نقوم بفتحه في طبقة layer جديدة مع قفلها والتأكد بأنها تتواجد أعلى باقي الطّبقات كما يظهر في الصورة: 2. نقوم برسم مربّع باستخدام أداة المستطيل (M) مع الضّغط في نفس الوقت على المفتاح shift وتحديد مقاسه (الطول والعرض) بـ: 120px بعدها نضعه فوق الشّبكة ( الملف الذي قمنا بتحميله). 3. نتّبع المسار التالي: Effect > Stylize > Round Corners ونحدّد قيمة Radius بـ 27°. 4. نقوم برسم مستطيل (M)، نختار له اللّون الأسود، ونضعه مع التّصميم السابق كما يظهر في الصورة: 5. ننسخ الشّكل الأوّل (Ctrl + C)، ثمّ نقوم بتحديد جميع الأشكال ونتّبع المسار التالي: Window > Pathfinder Panel نختار الخاصيّة Intersect كما هو موضح في الصورة. نضغط Ctrl + B لوضع الشّكل الذي قمنا بنسخه سابقا. 6. نرسم مستطيل آخر باستخدام الأداة Rectangle Tool، نختار له اللون الرمادي والمقاسات: 22px*18px. بعدها نتبع المسار التالي: Object > Transform > Shear مع تحديد قيس الزاوية بـ ـ45°. الآن نقوم بعمل نسختين من الشّكل بالضّغط على (Ctrl + C ثم Ctrl + F ثم Ctrl + F) ونضعهما كما في الصورة . ثم وباستخدام أداة Pathfinder Panel نختار الخاصية Unite. 7. نحدّد المستطيلات الثلاثة ونقوم بقلبهم باتباع المسار التالي: Window > Transform Panel > options ونختار الخاصيّة Flip Vertically. 8. نقوم بنسخ الشّكل الأسود (Ctrl + C) لأننا سنحتاجه لاحقا، ثم نحدد المستطيلات الثلاثة التي تتواجد خارجه. نضغط على المفتاح shift وفي نفس الوقت نحدد الشكل الأسود. باستخدام أداة Pathfinder Panel نختار الخاصية Intersect وفي نفس الوقت نضغط على alt. بعدها نختار الخاصية Expand الموجودة في لوحة التحكم Pathfinder. الآن نقوم بوضع الشّكل الأسود الذي قمنا بنسخه سابقا بالضّغط على (Ctrl +B). 9. نطبّق التّدرج اللّوني gradient على الشّكل الأخضر باستعمال اللونين: 46ECC6 – #58CAFC#. 10. نحتاج إلى إضافة القليل من الظّلال ولعمل ذلك نضاعف الشكل الأسود بالضغط على (Ctrl + C ثم Ctrl + B) نستمر في تحديده ونسحبه قليلا إلى الأسفل. نختار له اللون الأبيض، ثم نحدّد الشّكلين الأبيض والأسود ونتبع المسار التالي: Object > Blend > Make يمكننا تغيير إعدادات blend باتباع المسار التالي: Object > Blend > Blending Options حيث نستطيع تحديد عدد الخطوات والتّوجه أيضا steps / orientation. 11. باتّباع المسار التالي: Window > Transparancy Panel نقوم بتغيير نوع blending إلى Multiply. نضغط Ctrl + F لوضع الشكل الأسود في مكانه كما يظهر في الصورة: ترجمة -وبتصرّف- للدّرس How to create iOS7 icons in Adobe Illustrator? #02 – Videos لصاحبه Zoltan Ordog.

سنقوم في هذا الدرس بعمل الشكل الخارجي لحقيبة باستخدام الأشكال الأساسية، أما بالنسبة للتفاصيل الدقيقة التي تُبرز معالم الأيقونة سنقوم بعملها باستخدام أنماط طبقة مختلفة مثل Inner Glow وStroke. ولكي نجعل شكل الحقيبة أكثر واقعية سنستخدم الخامات لإعطائها ملمس جلدي. سيكون للأيقونة التي سنصممها ذلك المظهر الرقمي المجعد ذو الشعبيّة على الإنترنت. ستساعد الخطوط الواضحة في إبراز الشكل الذي تمثّله الأيقونة؛ وهذا الشيء مهمّ جدّا عند استخدام الأيقونة بأحجام صغيرة عند تصميم المواقع أو التطبيقات. والشيء الأهم الذي يضفي على الأيقونة شكلًا قريبًا من الواقع هو الاستخدام الدقيق للتدرّجات والخامات. لا تبرز هذه الإضافات عند عرض الأيقونة بشكل عام، لكن بدونها سيكون التصميم مسطّحًا وباهتًا. لنتبع هذا الدرس المفصّل خطوة بخطوة لتتعلم طريقة عملها باستخدام فوتوشوب. العديد من الأيقونات تأتي بأحجام كبيرة هذه الأيام؛ تتراوح ما بين 16px إلى 512px. ابدأ بمستند فوتوشوب جديد بحجم 256px * 256px لعمل الأيقونة بالحجم الأكبر. ارسم مستطيلا ناعم الحوافّ في طبقة جديدة وغيّر نصف قطر الحافّة إلى 10px. تأكّد من تغيير وضع الشكل إلى Pixels (ستجده في شريط الأدوات في أعلى الشاشة). انقر بشكل مزدوج على طبقة المستطيل لفتح نافذة أنماط الطبقة (Layer Styles Window). قم بإضافة Gradient Overlay ممتدّا من البنّي الغامق إلى البنّي الفاتح. بعدها قم بإضافة Inner Glow، غيّر الوضع إلى Normal، قيمة Opacity 100%، اللون بنّي أفتح من الدرجة المستخدمة في التدرّج، قيمة Choke 100%، والحجم 3px. قم بإضافة حدّ (Stroke) بحجم 2px والموقع Inside. استخدم لون بنّي غامق بحيث يكون أغمق من الدرجة المستخدمة في التدرّج. افتح خامة الجلد (حمّل الخامة من هنا) وقم بتصغيرها ليتناسب حجمها وحجم الأيقونة. اضغط Ctrl+ طبقة الأيقونة لعمل استعادة تحديد ثم اضغط مفاتيح الاختصار Ctrl+Shift+I لعكس التحديد. احذف الزائد من الشكل لتشذيب الخامة ضمن حدود الأيقونة. غيّر وضع طبقة الخامة إلى Soft Light لتسمح للتدرّج البنّي بالظهور ثم اذهب إلى: Filter > Sharpen > Sharpen لإظهار تفاصيل الخامة. ارسم مستطيلا آخر ناعم الحوافّ في طبقة جديدة، لكن هذه المرة سيكون نصف قطر الحافّة 5px. قم بعمل تحديد باستخدام Rectangular Marquee Tool ثم قم بقص المستطيل من الأسفل ليصبح الجزء السفليّ بحوافّ مستقيمة. اضغط بزرّ الفأرة الأيمن على الطبقة الخاصّة بالجزء الأسفل من الحقيبة واختر Copy Layer Style. بعدها اضغط بزرّ الفأرة الأيمن على الطبقة الخاصّة بالجزء العلوي واختر Paste Layer Style للحصول على نفس أنماط الطبقة. قم بإضافة خامة الجلد إلى طبقة الجزء العلوي من الحقيبة، ثم قم بتصغيرها وقصّها لتتناسب مع الشكل وليتطابق الجزء العلوي مع السفلي. ارسم مستطيلا رفيع في الوسط كيّ يمثّل حزام الإبزيم. طبّق نفس أنماط الطبقة للطبقات السابقة لكن بزيادة تأثير Drop Shadow لكي يعطي لمسة أكثر عمقًا. استخدم أدوات التحديد لرسم مربع بسيط في طبقة جديدة بأي لون كان. اختر أداة الممحاة وغيّر الوضع إلى Pencil بعرض 1px لثَلم الحافّتين السفليتين (انظر الصورة أعلاه)، لكن اترك الحافّة العليا مستقيمة. انقر بشكل مزدوج على طبقة المربع واستخدم نفس أنماط الطبقة السابقة لإعطائها مظهر معدني. استخدم نفس إعدادات Inner Glow، Stroke، وGradient Overlay السابقة لكن غيّر درجات الألوان إلى الرمادي بدلًا من البنّي. ارسم تفاصيل إضافية في طبقة جديدة مستخدمًا Pencil Tool وتأثيرات أنماط الطبقة لعمل فتحة القفل. لإعطاء الشكل السابق بُنية بسيطة، دقيقة، وأقرب لشكل القفل؛ اضغط على Ctrl+طبقة فتحة القفل لعمل استعادة تحديد ثم املأ التحديد باللون الأبيض في طبقة جديدة. اذهب إلى: Filter > Noise > Add Noise والإعدادات كما في الصورة أعلاه. بعدها غيّر وضع الطبقة إلى Soft Light وقيمة Opacity 50%. استخدم نفس إعدادات طبقة القفل المعدني لعمل قاعدة لمقابض اليد على الحافّة العُليا للحقيبة. ارسم مربعين صغيرين، اثلم الحوافّ باستخدام ممحاة 1px، ثم قصّها من الأسفل لمحاذاتها مع غطاء الحقيبة. لعمل مقابض اليد؛ ارسم شكل بيضوي في طبقة جديدة باستخدام Elliptical Marquee Tool ثم املأه باللون الأسود. بعد ذلك اعمل تحديد بشكل بيضوي أصغر بقليل من السابق واحذف الجزء الوسطي. قم بقصّ أي جزء إضافي لحصول على مقبض شبه دائري باستخدام Rectangular Marquee Tool. لاحظ أن موقع المقبض سيكون بين قاعدتيه في الأعلى. ولإنهاء الأيقونة قم بإضافة الظل. ابدأ بتدرّج قطري صغير في طبقة جديدة، ثم عن طريق Ctrl+ T قم بمطّه -لكن ليس بدرجة كبيرة- بصورة عمودية. اعمل تحديد عِبر منتصف التدرّج القطري، وقم بتحريك الجزء المحدد إلى الجهة المقابلة عند زاوية الحقيبة. ستبقى المنطقة الوسطى ما بين جزئيّ الظل فارغة لذلك قم بملئها بتدرّج صغير في طبقة جديدة، ثم اضغط Ctrl+ T لمطّ الظل بصورة أفقية ما بين جزئي التدرّج السابق وعلى طول الحافّة السفلى للحقيبة (لاحظ الصورة أعلاه). وبذلك نكون قد انتهينا من عمل الأيقونة. عدّل على الخلفية كما تريد ثم قم بحفظها بصيغة PNG لاستخدامها لاحقًا كما تشاء. إذا كنت تريد الأيقونة بحجم أصغر وقمت بتصغيرها يدويًا فإنّ ذلك سيؤدي إلى تمويه الخطوط وفقدان التفاصيل؛ لذلك من الأفضل عمل الأيقونة بنفس الخطوات من البداية لكن بحجم أصغر. ­ ترجمة -وبتصرّف- للدرس How to create a detailed briefcase icon in Photoshop لصاحبه: Iggy.

في هذا الدّرس سنتعلّم طريقة تصميم حافظة أوراق جميلة وبسيطة باستخدام برنامج أدوبي اليستريتور وإضافة بعض التأثيرات مثل الظلال 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.

في هذا الدّرس سنتعلّم طريقة تصميم حافظة أوراق جميلة وبسيطة باستخدام برنامج أدوبي اليستريتور وإضافة بعض التأثيرات مثل الظلال 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.

بعد إصدار نظام التّشغيل iOS 7 من طرف شركة أبل Apple، أصبح لزاما على مصممي ومطوّري التطبيقات أن يعيدوا ظبط لغتهم البصرية حتى تتناسب مع طبيعة التصميم الجديد لنظام التشغيل iOS 7. إذا أردت أن تعرف أكثر حول المبادئ الأساسية المستخدمة من طرف الشركة في تصميم الأيقونات ستجدها في هذا الرابط. في درسنا سنتعلّم طريقة استخدام الأدوات الأساسيّة الموجودة في برنامج أدوبي اليستريتور، التّدرج اللّوني، وأداة Blend Tool لتصميم أيقونة الطّقس Weather. بداية نقوم بتحميل الملفات المرفقة لهذا الدرس أو الاستعانة بأيّ ملف شبيه له (الملف عبارة عن تصميم شبكة). 1. بعد تحميل الملف المرفق، نقوم بفتحه في طبقة layer جديدة مع قفلها والتأكد بأنها تتواجد أعلى باقي الطّبقات كما يظهر في الصورة: 2. نقوم برسم مربّع باستخدام أداة المستطيل (M) مع الضّغط في نفس الوقت على المفتاح shift وتحديد مقاسه (الطول والعرض) بـ: 120px، ثمّ نضعه فوق الشّبكة ( الملف الذي قمنا بتحميله). 3. نتّبع المسار التالي: Effect > Stylize > Round Corners ونحدّد قيمة Radius بـ 27°. 4. نختار اللّون الأزرق، ثم نرسم دائرة باستخدام الأداة Ellipse Tool بالمقاسات التالية: 43px*7px ونحاول وضعها وسط الشّكل السابق. 5. نرسم مستطيل دائري باستخدام الأداة rounded rectangle ودائرتين جديدتين نضعهما حول الدائرة السّابقة ونختار لهم المقاسات التالية: الدائرة الصغيرة الموجودة على اليسار: 24px.الدائرة الكبيرة الموجودة على اليمين: 33px.المستطيل الدائري: 55px*14px. ثم نقوم بمحاذاة الجزء السفلي للأشكال الثلاثة كما في الصّورة، بعدها نحدّد الأشكال ونتبع المسار التالي: Window > Pathfinder Panel > Unite 6. استخدمنا الخطوات السابقة لرسم السحابة الموجودة في الأيقونة الآن نطبق عليهم التدرج اللوني. 7. نستخدم التدرج اللوني الأزرق للطبقة الخلفية أما الشمس فنختار لها التدرج اللوني الأصفر. السحابة تكون باللون الأبيض ودرجة transparency نقوم بتخفيضها إلى 90% من القائمة: Window > Transparency 8. وهذه النتيجة النهائية لهذا الدرس: ترجمة -وبتصرّف- للدّرس How to create iOS7 icons in Adobe Illustrator? #04 – Weather icon لصاحبه Zoltan Ordog.

قبل البدء قم بتحميل ملف الحشو (pattern) لكي نقوم باستخدامه لاحقًا. ستقوم عند إتّباعك لهذا الدرس بتصميم أيقونة عدّاد بكامل تفاصيله وذلك باستخدام العديد من أنماط الطبقة لعمل التّدرجات والظلال للحصول على شكل مفصّل، قريب من الواقع وبحجم كبير. ثم ستقوم بالتعديل على الحجم للحصول على أحجام نموذجية متنوّعة. إن ما يميّز هذه الأيقونة هو شريط عدّاد أملس وملوّن موضوع داخل إطار مشطوف من الكروم، بالإضافة إلى التراكيب والتدرجات التي تضفي عليها مظهرًا دقيقًا. سيكون حجم 256px * 256px هو الأكبر والأكثر تفصيلًا، وبعد ذلك سنقوم بتحجيمها تدريجيّا إلى 128px ،64px ،48px، و32px. وكل حجم من هذه الأحجام سيصبح أقل تفصيلًا لكن سنقوم بتعديلها بشكل طفيف ليتم استخدامها بهذا الحجم الصغير. سنبدأ بالأيقونة الكبيرة. ارسم دائرة في طبقة جديدة بقطر 256px باستخدام Elliptical Marquee Tool واملأها بأيّ لونٍ كان. انقر بشكل مزدوج على طبقة (layer) الدائرة لتفتح نافذة أنماط الطبقة (layer styles window). قم بإضافة Gradient Overlay متدرّجًا من الرمادي الغامق إلى الفاتح ليعطي تأثير معدني لامع. قم بإضافة حدّ (stroke) بعرض 1px بلون رمادي متوسط ما بين درجتي اللونين المستخدمين في التدرّج السابق. إنّ عمل الأيقونة باستخدام أنماط الطبقة سيسهّل إعادة تصميم الأيقونات الأصغر حجمًا حيث إن كل تأثير يمكن إعادة تحميله والتعديل عليه بسرعة بواسطة نافذة خيارات أنماط الطبقة. اضغط على طبقة الدائرة+Ctrl لعمل تحديد للدائرة ثم اضغط بزر الفأرة الأيمن واختر Transform Selection، بعدها قم بتقليص التحديد بينما تضغط على المفتاحين Shift+Alt. املأ التحديد الجديد باللون الأسود وفي طبقة جديدة. افتح نافذة أنماط الطبقة للدائرة الجديدة وقم بإضافة Gradient Overlay بلونين؛ أسود ورمادي غامق لكي تشكّل قاعدة لوحة العدّاد. قم بإضافة تأثيرّي Inner Glow وStroke لنفس الطبقة مستخدمًا درجات من الرمادي الفاتح لإعطائها شكل معدن الكروم. اعمل استعادة للتحديد (load selection) بالضغط على طبقة الدائرة ومفتاح Ctrl في نفس الوقت، ثم أضف طبقة جديدة واملأها بالحشو(pattern) الموجود في الرابط في بداية الدرس (أختر الحشو كالذي في الصورة أعلاه). غير وضع (mode) الطبقة إلى Multiply وذلك لتحويل المناطق البيضاء إلى شفافة واختر قيمة Opacity 25%. قم بعمل استعادة تحديد (load selection) للدائرة مرّة ثانية ثم قلّص الحجم بشكل طفيف ثم املأها -في طبقة جديدة- باللون الأبيض. اعمل استعادة تحديد من جديد، قلّص حجم الدائرة أكثر هذه المّرة ثم احذف هذا التحديد (اضغط فقط على مفتاح delete) لتتشكّل لديكَ حلقة بيضاء. بعد ذلك قم بعمل تحديد مربّع، اضغط زر الفأرة الأيمن واختر Transform Selection، قم بتدوير المربع بـ 45 درجة (مع الضغط باستمرار على مفتاح shift) ثم قم بتحريكه إلى الأسفل بحيث تكون الحافة العُليا للمعين محاذية لمركز العدّاد. احذف هذا الجزء المحدد من الحلقة البيضاء. افتح نافذة أنماط الطبقة للقوس الأبيض ثم أضف Gradient Overlay، استخدم تدرّج قوس قزح الافتراضي. غيّر النمط إلى Angle، ثم غيّر الموقع إلى أن يصبح التدرّج مبدوءا بالأزق ومنتهيًا بالأحمر. بعدها قم بإضافة تأثيرInner Shadow إلى الحافّة العُليا. ارسم دائرة صغيرة في طبقة جديدة في مركز العدّاد واضف تأثير Gradient Overlay للطبقة مستخدمًا درجات من اللون الرمادي لإعطائه نمط معدني. كذلك قم بإضافة تأثير Drop Shadow لإعطائه عمق ولمسة من الواقعية. قم بإضافة طبقة جديدة تحت طبقة المسمار المركزي، ارسم شكل إبرة باستخدام Polygonal Lasso Tool، ثم قم بإضافة تأثير Gradient Overlay مستخدمًا درجات فاتحة وغامقة من اللون الأحمر. غيّر زاوية التدرّج بحيث يكون مُنسابًا بالضّبط أسفل وسط الإبرة، ثم أضف تأثير Drop Shadow بشكل يعطي انطباع أن الإبرة مرفوعة قليلًا عن واجهة العدّاد. اكتملت الأيقونة الأكبر الآن. كل هذه التدرّجات ساعدت على توليد الإضاءة والظل التي شكّلت أيقونة أقرب للواقعية. الآن سنقوم بعمل الأيقونات بأحجام أصغر. قم بتحديد جميع الطبقات ثم اضغط Ctrl+T. ادخل قيم الأبعاد التي تريدها للأيقونة الأصغر؛ استخدم شريط الأدوات العلوي. ستختفي بعض التأثيرات عند تصغير الأيقونات، أو إنّ حجم هذه التأثيرات سيكون كبيرًا جدّا بحيث يظهر بصورة غير صحيحة في الأيقونة الأصغر. لذلك قم بإزالة التأثيرات التي لم تعد مرئيّة من نافذة أنماط الطبقات. ستحتاج التأثيرات الأخرى كالتدرّجات والظلال إلى تعديل لتتوافق مع حجم الأيقونة الصغير. وعليه اذهب إلى نافذة أنماط الطبقة وقلّل حجم كلّ تأثير من هذه التأثيرات. الشيء الرائع في أنماط الطبقة هو إنّ التأثيرات تبقى كما هي حتى بعد تغيير محتوى الطبقة بشكل كامل. في الأيقونة الصغيرة جدّا سيصبح المسمار المركزي بالذات صغيرًا جدّا، لذلك قم بعمل دائرة أكبر في نفس طبقة المسمار وسيتمّ إضافة نفس نمط الطبقة (التدرّجات والظلال) تلقائيّا. في الأيقونة الكبيرة تظهر كافة التفاصيل، لكن عند تقليص الحجم اختفت بعض هذه التفاصيل. لذلك تم تعديل الخصائص ليبقى التصميم واضح المعالم؛ يتضمن هذا عمل المسمار والإبرة بحجم أكبر، وإبدال تدرّجات إطار الكروم بحد (stroke) عادي رماديّ اللون. ترجمة -وبتصرّف- للدرس How to create a detailed gauge icon in Photoshop لصاحبه: Iggy.

سنحاول في هذا الدرس محاكاة تصميم برنامج التورنت الشهير uTorrent، باستخدام برنامج فوتوشوب وبخطوات بسيطة، ستكون هذه هي النتيجة النهائية بعد تطبيق وتتبع كامل خطوات الدرس: افتح مشروعًا جديدًا على Photoshop بالإعدادات التالية: الأبعاد: 500x500pixels.الدّقة: Resolution 720Dpi.نمط الألوان: Color Mode RVB8bit.نرسم دائرة باللون #778286. باستعمال الاختصار (CTRL+J) ننسخ الدائرة، ثم نضغط (Ctrl+T) للتعديل يدويا على الدائرة الثانية –مع الضغط على الزر Alt للحفاظ على تناسب قطر الدائرة-: نفتح نافذة خصائص الدمج Blending Options: ننسخ الدائرة الثانية (CTRL+J): نفتح نافذة خصائص الدمج وبتدرج اللونين 46ab4d # و#157916: نرسم دائرة بيضاء: نخفض قيمة Fill إلى الصفر: ثم من القائمة: Menu > Edit > Path Transformation > Wrap نعدّل على الشكل كما في الصورة: إلى خصائص الدمج: نضيف حرف U بخط nyala: ثم مستطيل أبيض فوق الجزء السفلي للحرف: وباستعمال أداة التحديد المستطيلة الشكل M) Marquee Tool): ثم نضغط (CTRL+J) لنسخ الجزء المحدد ووضعه في الأسفل: ثم (CTRL+E) لدمج طبقات الحرف U: نزيح الحرف حتى تتوسّط الدوائر: بعدها نذهب إلى خصائص الدمج: لنحصل على النتيجة التالية: بعد ذلك نضيف طبقة جديدة (CTRL+SHIFT+N)، ثم نضغط CTRL مع تحديد طبقة الدائرة الأولى: ثم نذهب إلى القائمة: Menu > Select > Modify > Contract نستعمل أداة طلاء اللون المتدرج (G) من الأبيض إلى اللون الشفاف: ثم إلى خصائص الدمج الخاصة بالدائرة الأولى –من أسفل ترتيب الطبقات-: بعد ذلك نذهب إلى خصائص الدمج الخاصة بالدائرة الثانية: يمكن إضافة خلفية زرقاء أو بأي لون آخر لإبراز الشعار أكثر، وهذا مثال عن النتيجة النهائية: ترجمة -وبتصرّف- للدّرس: Reproduire le logo de Utorrent avec photoshop.

سنتعلم من خلال هذا الدرس كيفية تصميم أيقونات المواقع الاجتماعية مثل فيس بوك، تويتر وجوجل بلس، وبهذه الكيفية يمكنك محاكاة أي أيقونة ولما لا تصميم أيقونة خاصة بموقعكم. وهذه هي النتيجة النهائية لهذا الدًرس بعد تتبع جميع خطواته: افتح مشروعا جديدا على Photoshop بالإعدادات التالية: الدقة: 800x600pixels.الأبعاد: Resolution 720Dpi.نمط الألوان: Color Mode RVB8bit.نملأ الخلفية بأداة الطلاء (G) باللون #cdcdcd: نضيف تدرج لوني من القائمة: Menu > Layer > New Fill Layer > Gradient نغير في خصائص الدمج إلى القيمة Overlay والشفافية إلى 30: باستعمال أداة الشكل المستطيل بزوايا دائرية (U) نرسم مستطيل بشعاع قيمته 50 بكسل باللون #407bcc: باستعمال الاختصار Ctrl+J ننسخ طبقة المستطيل ثلاث مرات: نغير في خصائص الدمج الخاصة بالمستطيل الأول: ننتقل إلى المستطيل الثاني ونكبّر من حجمه قليلا باستعمال الاختصار Ctrl+T مع الضغط على Alt+Shift عند التكبير للحفاظ على تناسبية الحجم من مركز الشكل: نغير في خصائص الدمج الخاصة بالمستطيل الثاني: نحدد المستطيل الثالث و نذهب إلى القائمة: Menu > Filter > Blur > Gaussian Blur ننتقل إلى المستطيل الرابع ونكبّر من حجمه قليلا باستعمال الاختصار Ctrl+T مع الضغط على Alt+Shift: ثم نغير من خصائص الدمج الخاصة به: نرسم مستطيلا جديدا بنفس حجم المستطيل الأخير باللون #175e7c: نزيحه إلى الأسفل قليلا: ثم نغير من خصائص الدمج الخاصة به: نرسم مستطيلا آخار بنفس الحجم ونغيير اللون إلى# 58a1cf -ملاحظة يمكنك نسخ المستطيل السابق والتغيير من لونه- مع إزاحته نحو الأعلى قليلا: نغير من خصائص الدمج الخاصة به: الآن نستخدم أداة الريشة (Pen Tool (P ونرسم شكل طائر أيقونة تويتر Twitter -ملاحظة إذا استعصى عليك الأمر يمكنك الاستعانة بأيقونة جاهزة والرسم فوقها ثم إزالة الصورة في الأخير-: ثم نغير خصائص الدمج الخاصة بالطائر: ننسخ طبقة الطائر ونغير في خصائص الدمج: ننسخها مرة أخرى و نغير خصائص الدمج: هذه هي نتجة درسنا اليوم: بنفس الطريقة يمكننا تصميم أيقونات أخرى، أتمنى أن ينال الدرس إعجابكم. ترجمة -وبتصرّف- للدّرس: Créer l'icône de Twitter, Facebook et Google plus avec Photoshop.