20 حيلة فوتوشوب لمصممي الويب

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

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

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

هل أنت مستعد لمعرفة المزيد عن Photoshop؟ ثم واصل القراءة.

حيل فوتوشوب لتحويلك إلى معالج تصميم ويب

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

1. تبسيط مساحة العمل الخاصة بك

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

لهذا السبب ، محطتنا الأولى هي Window> Workspace> Graphic and Web . سيؤدي تحديد هذا الخيار إلى تغيير الأدوات المتاحة إلى ما من المرجح أن تستخدمه لتصميم الويب.

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

(تلميح سريع: لتغيير المساطر لمستندات فردية ، ما عليك سوى النقر بزر الماوس الأيمن عليها واختيار وحدة القياس التي تريدها.)

بعد ذلك ، انتقل إلى التفضيلات> الأداء> السجل وذاكرة التخزين المؤقت وانقر على تصميم الويب / واجهة المستخدم .

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

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

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

2. تعلم اختصارات لوحة المفاتيح

بالنسبة لأي برنامج تستخدمه بشكل منتظم ، يعد تعلم اختصارات لوحة المفاتيح نصيحة جيدة بشكل عام.

على سبيل المثال ، أستخدم Ctrl + Alt + 2/3 لإنشاء عناوين h2 و h3 أثناء كتابة هذا المنشور. إنه أسرع بكثير من استخدام شريط أدوات المحرر لأنه لا يتعين علي رفع يدي عن لوحة المفاتيح.

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

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

3. طبقات المجموعة والاسم

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

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

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

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

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

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

4. طبقات التصفية

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

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

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

5. إنشاء شبكة

صورة PureSolution / shutterstock.com.

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

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

6. استيراد عينات الألوان

يمكنك تحميل عينات الألوان مباشرة إلى Photoshop من ملفات HTML أو CSS أو SVG. بهذه الطريقة ، يكون لديك نقطة بداية رائعة لنظام الألوان الخاص بك عند العمل مع الأصول الموجودة مثل الشعار.

للاستفادة من خدعة Photoshop هذه ، ما عليك سوى فتح لوحة Swatches ، والنقر فوق القائمة المنسدلة في الزاوية اليمنى العليا واختيار Load Swatches . انتقل الآن إلى الملف المعني وافتحه لاستيراد حامل اللون الجديد.

7. حفظ الأشكال المخصصة

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

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

8. التبديل بين ألوان الخلفية والمقدمة

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

9. تغيير التعتيم عبر لوحة المفاتيح

اختصار لوحة مفاتيح آخر: لأي أداة يمكنها تغيير العتامة ، يمكنك القيام بذلك ببساطة عبر لوحة المفاتيح. ستضبط الأرقام من 1 إلى 0 العتامة على أي شيء يتراوح بين 10٪ و 100٪. نفس الشيء يعمل أيضًا مع عتامة الطبقات.

10. ارسم خطوط مستقيمة

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

11. لون العينة

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

12. إضافة أو إزالة من التحديد

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

13. التراجع عن أكثر من خطوة واحدة

الطريقة الكلاسيكية للتراجع عن الإجراء الأخير هي استخدام Ctrl + Z. ومع ذلك ، فإن هذا يعمل فقط مع آخر شيء فعلته. للرجوع عدة خطوات إلى الوراء ، استخدم Ctrl + Alt + Z.

14. تغيير حجم الفرشاة ديناميكيًا

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

15. حفظ للويب

يعد استخدام وظيفة Safe for Web أمرًا ضروريًا ، حيث إنها تتأكد من أن حجم الصورة صغير بقدر الإمكان. هذا مهم جدا لتحسين سرعة الموقع.

في Photoshop ، يمكنك القيام بذلك من خلال ملف> تصدير> حفظ للويب . ومع ذلك ، فإن الطريقة الأسرع هي استخدام Ctrl + Alt + Shift + S. على الرحب والسعة!

16. فتح الصور كطبقات

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

هناك طريقة أكثر عملية للقيام بذلك وهي File> Scripts> Load Files in Stack . تصفح للوصول إلى الصور المعنية ، وقم بتمييزها واضغط على موافق مرتين. الآن ، سيتم استيراد كل صورة تلقائيًا إلى طبقتها الخاصة.

17. انسخ CSS مباشرة من Photoshop

واحدة من أكثر حيل Photoshop راحة لمصممي الويب هي حقيقة أن البرنامج ينشئ CSS يمكنك تصديره. لا حاجة لكتابة كل شيء يدويًا أو استخدام التجربة والخطأ لتنفيذه.

للاستفادة من ذلك ، ما عليك سوى النقر بزر الماوس الأيمن فوق طبقة واختيار Copy CSS . بدلاً من ذلك ، استخدم قائمة Layer للعثور على نفس الخيار. الآن لديك كل الأنماط الضرورية للصقها ببساطة في ورقة الأنماط الخاصة بك أو أي برنامج آخر تستخدمه.

18. تصميم للعديد من الأجهزة والتوجيهات في وقت واحد

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

المصدر: ComScore

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

يمكنني وصف كلاهما بالتفصيل هنا ، ومع ذلك ، فقد قدم Phlearn تعليميًا ممتازًا حول هذا الأمر الذي يقوم بعمل أفضل بكثير مما يمكنني القيام به:

19. استخدام المعالجة التلقائية للمهام المتكررة

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

وإليك كيف يعمل. أولاً ، افتح ملفك. بعد ذلك ، افتح الإجراءات ( Alt + F9 ) ، وابحث عن إنشاء إجراء جديد وانقر فوقه. أدخل اسمًا ، واختياريًا ، خصص له مجموعة مفاتيح ولونًا.

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

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

20. معاينة على الجهاز

أخيرًا ، إلى جانب Photoshop ، يقدم Adobe أيضًا تطبيقًا يتيح لك معاينة عملك على العديد من أجهزة iOS. أفضل شيء: يمكنك ملاحظة التغييرات على الجهاز أثناء إجرائها على الكمبيوتر.

للقيام بذلك ، قم بتثبيت التطبيق واستخدم Device Preview لتوصيل Photoshop بجهاز خارجي عبر USB أو wifi. يمكنك العثور على الخيار ضمن Window> Device Preview .

ما هي الحيل المفضلة لديك في فوتوشوب؟

يعد Photoshop أحد أكثر أدوات تصميم الويب استخدامًا. ميزاته القوية تجعله مثاليًا لتصميم مواقع الويب والأصول عالية الجودة.

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

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

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

ما هي بعض الحيل المفضلة لديك في Photoshop؟ يرجى إخبارنا في قسم التعليقات أدناه حتى نتمكن جميعًا من مساعدة بعضنا البعض.

الصورة المصغرة للمادة بواسطة Creative Stall / shutterstock.com