36 ملحق فوتوشوب لمصممي الويب تحتاج إلى التحقق منها

WordPress ليس البرنامج الوحيد المتاح الذي يقدم امتدادات مفيدة لمنتجهم الأساسي. كما يدعم Photoshop ، أحد أدوات الانتقال لمصممي الويب حول العالم ، هذا الاحتمال. ومثل نظيراتها في WordPress ، يمكن لمكونات Photoshop الإضافية أيضًا إضافة جميع أنواع الوظائف الجديدة.

نظرًا لأننا نعلم أن العديد من قرائنا يستخدمون Photoshop بشكل منتظم ، فقد اعتقدنا أنه من الجيد تقديم نوع مختلف من قائمة المكونات الإضافية هذه المرة. ستجد أدناه أفضل مكونات Photoshop الإضافية التي يمكن أن نجدها على الويب.

إنهم يعززون البرنامج بجميع أنواع التحسينات. بدءًا من البرامج النصية الصغيرة والاختصارات وصولاً إلى الوحدات النمطية الجديدة بالكامل التي ستعمل على تحسين سير عملك بشكل كبير وتجعل العمل باستخدام Photoshop أسهل.

مستعد؟ ثم لنبدأ.

ملحقات فوتوشوب لا يجب على مصمم الويب تجاهلها

ستجد أدناه قائمة بالمكونات الإضافية لبرنامج Photoshop من فئات مختلفة يمكنها تحسين برنامجك المفضل بشكل أكبر.

Retinize ذلك

• السعر: مجاني
• متاح لما يلي: CC 2015

في المقام الأول ، لدينا مكون إضافي مجاني لإنشاء أصول بسرعة لشاشات شبكية العين. Retinize يضيف إجراءً جديدًا إلى Photoshop يتيح لك تصدير الصور بأبعادها الأصلية أو تكبيرها لمضاعفة الحجم وثلاثة أضعافه.

بعد التثبيت ، ستجد الخيار الجديد ضمن Window> Actions. ما عليك سوى تحديد طبقة أو مجموعة من الطبقات ، وتشغيل الإجراء ، وتسمية ملفاتك واستلام الأصول المقطعة. عظيم لإنتاج مواقع شبكية جاهزة.

قص وشريحة لي

• السعر: مجاني
• متاح لما يلي: CS6

مكون إضافي آخر لتصدير الأصول مباشرة من الطبقات. يقوم Cut & Slice me تلقائيًا بقص صورك وتصديرها كملفات PNG. يمكنه التعامل مع الشرائح المتداخلة وحالات الأزرار المتعددة والعديد من القرارات. لسوء الحظ ، لم يتم تحديثه تمامًا ولكنه لا يزال يعمل مع الإصدارات القديمة من Photoshop.

CSS3Ps

• السعر: مجاني
• متاح لما يلي: CS3 والإصدارات الأحدث

كما يوحي الاسم ، هذه الخدمة قادرة على تحويل طبقات Photoshop إلى CSS3. ما يميزها أنها خدمة قائمة على السحابة ومجانية الاستخدام.

يدعم البرنامج المساعد طبقات متعددة (بما في ذلك النص) ، والظلال المسقطة ، والتدرجات ، ونصف قطر الحدود والمزيد. بالإضافة إلى ذلك ، يمكنه أيضًا التعامل مع SCSS و SASS.

محرر الزاوية

• السعر: مجاني
• متاح لما يلي: CC 2015

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

كتلة HTML

• السعر: مجاني
• متوفر لما يلي: CC 2015 (Mac OS فقط)

يسمح لك منافسنا التالي بوضع HTML و CSS داخل مستندات Photoshop مباشرة. بهذه الطريقة ، يمكنك إنشاء أصول ويب مباشرة داخل البرنامج واستخدام الأصول عبر الإنترنت في ملف PSD الخاص بك. يتضمن الأخير خطوط الويب و CSS الخارجية والمزيد.

خط رائع PS

• السعر: مجاني
• متاح لـ: CC

Font Awesome هو خط رمز يكتسب شعبية ويستخدم. لهذا السبب ، من المنطقي تضمين ملفات Photoshop فقط. لحسن الحظ ، هذا البرنامج المساعد يجعل ذلك سهلاً مثل الفطيرة. فقط قم بالتنزيل والتثبيت مجانًا وأنت على ما يرام.

التحكم في الطبقات 2

• السعر: مجاني
• متاح لـ: CC، CC 2014

هذا المكون الإضافي عبارة عن مجموعة من سبعة نصوص برمجية تجعل بعض الجوانب المزعجة للفوتوشوب أسهل. يتضمن محرر اسم الطبقة ، وخيار إزالة التأثيرات غير المستخدمة ، ويمكنه حذف الطبقات الفارغة تلقائيًا ، وتنقيط الكائنات الذكية ، والعثور على ملفات مماثلة والمزيد. مجاني للتنزيل والاستخدام كما تريد.

قبعة CSS 2

• السعر: 39.99 دولارًا
• متوفر لما يلي: CC 2014-2017

يقوم CSS Hat تلقائيًا بترجمة أنماط الطبقة إلى CSS3. بهذه الطريقة ، يمكنك فقط نسخها ولصقها بدلاً من ذلك لمعرفة كيفية تنفيذ الرسومات في الموقع.

يمكن أن يعمل المكون الإضافي مع عدة طبقات في وقت واحد ، والخطوط وأنماط الخطوط المختلفة ، كما أنه قادر على إخراج LESS و SASS و Stylus والمزيد. كما أن لديها العديد من الميزات التي تجدها في برامج تحرير التعليمات البرمجية مثل تمييز بناء الجملة. يتوفر CSS Hat أيضًا لإصدارات Photoshop الأقدم.

طبقات الصفحة

• السعر: 35 دولار
• متوفر لما يلي: Mac OS X فقط

تهدف العديد من المكونات الإضافية في هذه القائمة إلى تسهيل تحويل ملفات Photoshop إلى مواقع ويب. ومع ذلك ، فإن الطريقة الأخرى تكون ضرورية تمامًا. هذا ما تستخدمه طبقات الصفحة.

يقوم المكون الإضافي تلقائيًا بتحويل مواقع الويب إلى ملفات PSD ويحفظ كل عنصر صفحة كطبقة واحدة. افتح أي صفحة في المتصفح المضمن واحفظها ببساطة في Photoshop. البرنامج المساعد ليس مجانيًا ولكن يبدو أنه يستحق الثمن.

PNG قبعة

• السعر: 27.99 دولارًا
• متاح لـ: CS5 و CS6 و CC و CC 2014.1+ و CC 2015

هذا المكون الإضافي ، الذي صنعه نفس الأشخاص مثل CSS Hat ، يعزز قدرة Photoshop على تصدير ملفات PNG. على سبيل المثال ، يأتي مع ضغط أفضل ويمكنه تصدير قواعد CSS. تأتي PNG Hat أيضًا مع سياسة استرداد الأموال السخية إذا لم تكن راضيًا.

فونتسيلف

• السعر: 49 يورو
• متوفر لما يلي: CC 2015، CC 2017

التالي هو مكون إضافي يتيح لك إنشاء الخط الخاص بك عن طريق السحب والإفلات. في عصر تزداد فيه أهمية الطباعة على الويب ، من الجيد حقًا سماع ذلك. ما عليك سوى تحويل الصور والمتجهات (الملونة) إلى خطوط OpenType. التحكم في المسافات بين الحروف والأحرف المركبة والمزيد. يعد Fontself أيضًا مكونًا إضافيًا يتم صيانته بنشاط ، لذلك يحصل المالكون على ميزات جديدة مجانًا.

جيتي إيماجيس فوتوشوب البرنامج المساعد

• السعر: مجاني
• متاح لـ: CC 2016 وما فوق

تحتوي صور Getty على مجموعة ضخمة من الصور المخزنة ومكوِّنًا إضافيًا يتيح لك استيرادها مباشرة إلى Photoshop. ابحث عن آلاف الصور عالية الدقة وفلترها وقم بمزامنة مشترياتك مع حساب Getty.

منظف ​​PSD

• السعر: 19.99 دولارًا
• متاح لما يلي: CC 2014.1+

مكون إضافي آخر حسب المصدر يقوم بشحن لوحة طبقة Photoshop. يقوم PSD Cleaner تلقائيًا بمسح بنية الطبقة الخاصة بك ويظهر فرص التحسين. سيساعدك في العثور على طبقات غير مسماة ، وحذف الطبقات الفارغة ، والعثور على طبقات تمتد خارج اللوحة والمزيد. باختصار ، سوف تبقيك منظمًا.

WebZap

• السعر: 19 دولارًا
• متاح لـ: CS5 وما فوق

قد تكون مفاجأة لكن Photoshop ليس مصممًا بالفعل لتصميم الويب. بدأ البرنامج كأداة لتحرير الصور ولم يضف إلا لاحقًا قدرات لإنشاء تخطيطات.

للتعويض عن ذلك ، هناك WebZap. يوفر المكون الإضافي عناصر جاهزة لإنشاء نماذج تخطيط الويب في أي وقت من الأوقات. يعتمد على شبكة 960 ، ويمكنه إنشاء نص Lorem ipsum المنسق والتنقل والأزرار والمزيد.

أنماط دقيقة

• السعر: 17.99 دولارًا
• متاح لـ: CC وما فوق

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

ScreenSnap

• السعر: 9.99 دولار
• متوفر لما يلي: CC 2014 أو أحدث

التالي في قائمة مكونات Photoshop الإضافية هو ScreenSnap. يتيح لك البرنامج إنشاء لقطات شاشة من ملفات PSD ، إما من المستند الكامل أو من المنطقة المحددة. لا حاجة للاقتصاص أو الحفظ يدويًا ، ما عليك سوى تحديد مجلد ، والنقر فوق زر واحد ، وأنت على ما يرام. رائع لمشاركة عملك مع الآخرين ، حتى في حجم شبكية العين.

الناسخ

• السعر: مجاني
• متاح لـ: CC، CC2014

لدينا هنا امتداد لنسخ الطبقات ومجموعات الطبقات بسرعة عندما تحتاج إلى العديد من نفس الكائن. ما عليك سوى اختيار عدد النسخ التي تريدها وكيف تريد فصلها عن بعضها.

نماذج بالحجم الطبيعي

• السعر: 19 دولارًا
• متاح لما يلي: CC 2017

كما ترى من لقطة الشاشة ، تحتوي الصفحة الرئيسية للمكون الإضافي على الكثير من الكلمات البذيئة. بصرف النظر عن ذلك ، فإن هذا البرنامج المساعد يصنع نماذج بالأحجام الطبيعية لتصميمك. بهذه الطريقة ، يمكنك أن تفهم بشكل أفضل كيف تبدو على الهاتف أو الجهاز اللوحي من الخارج. يحتوي المكون الإضافي على العديد من الإعدادات المسبقة ولكنه أيضًا قابل للتحرير بالكامل.

علامات الحجم PS

• السعر: مجاني
• متاح لما يلي: CC 2014

تتيح لك علامات الحجم إضافة تسميات بحجم كائن أو مسافة بين الكائنات باستخدام أداة التحديد الاسمي. يتم حفظ كل تسمية في طبقة جديدة وقابلة للتخصيص بالكامل. هذا مفيد للغاية عند إضافة مواصفات للشخص الذي سيحول PSD إلى موقع ويب.

فونتي

• السعر: مجاني
• متاح لـ: CC 2014، CC 2015

لأي شخص غير راضٍ عن عرض Photoshop الافتراضي للخطوط ، يتضمن Fontea جميع خطوط الويب المتوفرة على Google Fonts (حاليًا 800+). يحافظ المكون الإضافي أيضًا على تحديث المستودع عبر الإنترنت ويسمح لك بإعداد مجموعات من الخطوط المفضلة لديك.

بيكساباي

• السعر: 4.99 دولار
• متوفر لما يلي: CC 2015 والإصدارات الأحدث

يشبه هذا المكون الإضافي المكوّن الإضافي Getty image المذكور سابقًا ، لمكتبة صور Pixabay. يحتوي على مئات الآلاف من الصور المجانية التي يمكنك إضافتها الآن بنقرة واحدة. يتضمن المكون الإضافي أيضًا خيارات بحث قوية وجميع الصور مرخصة CC0. بالإضافة إلى أنها ميسورة التكلفة للغاية.

هناك المزيد من المكونات الإضافية مثل تلك الخاصة بمكتبات صور الأسهم الأخرى مثل Shutterstock و Pexels.

لايركرافت

• السعر: مجاني
• متاح لـ: CC، CC 2014

مكون إضافي آخر لتصدير أصول واجهة المستخدم من طبقات Photoshop. تتمتع LayerCraft بالقدرة على قياس صورك عند التصدير ، ويمكنها تقليم وحدات البكسل الشفافة وتصديرها بأحجام مختلفة لعرض شبكية العين.

مولد لوريم إيبسوم

• السعر: مجاني
• متاح لـ: CS 5/6، CC

كما يوحي الاسم ، هذا مكون إضافي لإنشاء نص عنصر نائب Lorem ipsum. بهذه الطريقة ، لن تحتاج إلى نسخها من مصادر خارجية بعد الآن. يوفر المولد مخرجات قابلة للتخصيص ، والقدرة على النسخ إلى الحافظة الخاصة بك بنقرة واحدة ويتم صيانتها بنشاط.

LoremPicsum

• السعر: مجاني
• متاح لـ: CS، CC

هذا يشبه إصدار Lorem ipsum ، ومع ذلك ، فإنه ينشئ صورًا عشوائية بدلاً من النص. حدد منطقة ، واختر رسمًا كاريكاتوريًا وستحصل على صورة عنصر نائب لنفسك. وسيلة للتحايل الممتعة: تأتي الصور من برامج تلفزيونية وأفلام شهيرة مثل فوتثرما ، عائلة سمبسون ، فايندينج نيمو وأعلى.

Social Kit Pro

• السعر: 9.99 دولار
• متاح لما يلي: CC 2015+

ومكوِّن إضافي مصدر آخر. يهدف هذا إلى تحسين كل شيء على وسائل التواصل الاجتماعي. يحتوي على قوالب لإنشاء إعلانات على الهاتف المحمول وسطح المكتب وصور الغلاف وصور الملف الشخصي. يمكنك حتى معاينة النتائج مباشرة داخل Photoshop.

أدلة الطبقة

• السعر: مجاني
• متاح لـ: غير معروف

الأدلة هي أداة مهمة في Photoshop للحفاظ على كل شيء منظم. ومع ذلك ، يمكن أن يكون التعامل معها مزعجًا.

يأمل هذا البرنامج المساعد في التخفيف من حدة ذلك. يضيف أزرارًا جديدة لإضافة أدلة على جوانب الطبقات وكذلك من خلال مركزها الأفقي والرأسي. لا داعي للسحب ، فقط انقر وأنت بخير.

مولد الظل الطويل

• السعر: مجاني
• متاح لـ: CS6، CC

اسم البرنامج المساعد يوضح كل شيء بشكل أساسي. يساعدك Long Shadow Generator على إنشاء ظلال طويلة في Photoshop. يمكنك التحكم في طول الظل والتعتيم واللون والتدرج والزوايا. ثم أضفهم بنقرة واحدة فقط.

TinyPNG

• السعر: 50 دولار
• متاح لـ: CS5 و CS6 و CC وما فوق

TinyPNG هي خدمة عبر الإنترنت أوصي بها غالبًا لتحسين الصور قبل تحميلها على WordPress. يقوم بضغط ملفات JPG و PNG لجعلها صغيرة بقدر الإمكان.

يقدم الموقع أيضًا مكونًا إضافيًا لبرنامج Photoshop للقيام بنفس الشيء داخل برنامج تحرير الصور. يتيح لك المعاينة والحفظ مباشرة ، والقياس ، واستخدام التحديد الجزئي والمزيد. إذا كان موقعهم يشير إلى أي إشارة ، فإن البرنامج المساعد يستحق المال.

جليفو

• السعر: 19 دولارًا
• متاح لـ: CS5، CC

يضيف Glifo خيار تصدير أيقونات متجه من Photoshop كخطوط ويب أيقونات. يبدو أنه إضافة رائعة إلى المكون الإضافي Font Awesome.

سبيكينج

• السعر: 19 دولارًا
• متاح لـ: CS5 و CS6 و CC 2014 وما فوق

مكون إضافي آخر لإضافة القياسات ومواصفات التصميم إلى ملفات Photoshop ، ولكن هذه المرة كإصدار متميز. قم بقياس الأحجام والهوامش والخطوط وإنشاء مواصفات تلقائيًا في التراكبات القابلة للتحرير. تبدو بسيطة للغاية ومريحة في الاستخدام.

طقم التصدير

• السعر: 19.33 دولار في الشهر
• متاح لما يلي: CS6 وما فوق

يتيح لك برنامج Photoshop الإضافي هذا تحويل ملفات PSD إلى HTML و CSS و WordPress و iOS و Android والمزيد. يحتوي أيضًا على ميزات التعاون. تبدو قوية للغاية ، ومع ذلك ، فهي تأتي مع ترخيص شهري وليست رخيصة تمامًا.

البرنامج المساعد فوتوشوب للمشاركة الاجتماعية

• السعر: مجاني
• متاح لـ: غير معروف (Mac OS فقط)

يضيف العنصر التالي في قائمتنا وظائف مشاركة مهمة إلى Photoshop. يتيح لك مشاركة الملفات ونشرها مباشرة من داخل البرنامج عبر البريد الإلكتروني والشبكات الاجتماعية والأنظمة الأساسية الأخرى. فقط اختر تنسيقًا وأنت على ما يرام.

تحويل كل

• السعر: مجاني
• متاح لـ: CS5، CS6، CC

Transform each هو برنامج نصي يسمح لك بتحويل عدة كائنات مرة واحدة دون تغيير موضعها. وأفضل مثال على ما يعنيه ذلك هو GIF أدناه. اختر نقاط الارتكاز الخاصة بك ، والتحول الذي تريد تحقيقه وسيوصلك إلى هناك بنقرة واحدة.

تونيت!

• السعر: 129 دولار
• متاح لما يلي: Photoshop CS والإصدارات الأحدث

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

ملحقات فوتوشوب باختصار ...

يعد Photoshop أداة رائعة لمصممي الويب. إنه قوي ومليء بالميزات ويتم تحديثه باستمرار.

ومع ذلك ، في بعض الأحيان نتمنى أن يكون لديه بعض الميزات الإضافية أو طرق أسهل لإنجاز المهام. هذا هو المكان الذي تأتي فيه مكونات Photoshop الإضافية.

كما رأيت من القائمة أعلاه ، يمكن أن تضيف المكونات الإضافية الكثير من الوظائف المختلفة. من الاختصارات إلى الوظائف الجديدة تمامًا.

وهذه فقط الأشياء المفيدة لتصميم الويب. هناك الكثير هناك ، خاصة لتنقيح الصور. هل لديك ما تضيفه؟

هل تعرف ملحقات فوتوشوب إضافية تحبها وتوصي بها؟ الرجاء المشاركة في قسم التعليقات أدناه!

الصورة المصغرة للمادة VectorsMarket / shutterstock.com