دليل المصمم لتنظيم مشاريع الويب على برنامج Photoshop

كتبه أحمد مجدي 22 مارس 2014

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

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

استراتيجية التنظيم

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

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

organize-strategy-colorslab
السؤال الذى يجب ان تطرحة على نفسك قبل الدخول فى اى عملية تنظيم هو: ما هى استراتيجية التنظيم التى سأسير عليها ؟

جولي مورجنسترن في كتابها “التنظيم من الداخل للخارج” تقول:

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

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

عملك كمصمم محترف يجبرك أن تكون “شخصاً منظماً”

جميع المتاجر التي تتيح للمصممين رفع أعمالهم للبيع المتعدد للجمهور تضع قواعد صارمة لتنظيم الملفات كشرط أساسي لقبول الأعمال وعرضها للبيع، متجر GraphicRiver الشهير لديه عدة قواعد يجبر المصممين عليها كشرط لقبول أعمالهم وعرضها للبيع على صفحات المتجر، بعض هذه القواعد أعتقد أنها اساسية في رحلتنا لإستكشاف أفضل طريقة لتنظيم ملفات المشاريع التي نعمل عليها، ويجب الإلتزام بها بغض النظر عن كون الملف سيعرض على GraphivRiver أم لا:-

  • نظم ملف التصميم الخاص بك بحيث يسهل التعديل عليها بعد ذلك، يجب أن يفهم أي أحد هيكلة الطبقات وترتيبها فور فتح ملف الـ psd.
  • ضع اسماً معبراً لكل طبقة Layer، أسم يعبر عن شكلها وليس مكانها بالتصميم.
  • ضع الطبقات المشتركة في “مجموعة Group” واحدة.
T-Shirt ليفكر المصمم دائماً بتسمي الطبقات اثناء عمله
T-Shirt ليفكر المصمم دائماً بتسمية الطبقات Layers اثناء عمله

تسمية الطبقات Layers بأسماء ذات معنى أثناء تصميم أي موقع ويب، ماتزال تشكل هاجساً لمطور الويب الذي يستلم الملفات .psd من المصمم ويجدها غير منظمة، فيقضي أضعاف الوقت في البحث عن الطبقة لكل صورة أو تأثير على الفوتوشوب، لدرجة أن البعض فكر في أن يصنع T-Shirt مكتوب عليه “Name Your Layers” لكي يتذكر المصمم أهم مبدأ في تنظيم عمله دائماً، ألا وهو تسمية الطبقات.

نصائح لتنظيم ملفات مشاريعك

نظم ملفات التصميم والملحقات التي استخدمتها وضعها في مجلد خاص بكل مشروع

نظم ملفات التصميم والملحقات التي استخدمتها وضعها في مجلد خاص بكل مشروع
نظم ملفات التصميم والملحقات التي استخدمتها وضعها في مجلد خاص بكل مشروع

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

  •  قلل عدد ملفات الفوتشوب قدر الإمكان للمشروع الواحد.
  • اجعل اسماء الملفات الرئيسية ذات معني، مثال: Client_Web.psd
  • اجعل مجلد assests يشمل كل الملفات المساعدة التي استخدمتها في المشروع للتوثيق.

احتفظ بنسخ احتياطية لملفاتك علي استضافة سحابية

استخدم Dropbox للإحتفاظ بنسخة من ملفاتك Online
استخدم Dropbox للإحتفاظ بنسخة من ملفاتك Online

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

  • قم بشراء هارد خارجي احتفظ عليه بنسخة كاملة من ملفات مشاريعك.
  • اذا كنت تستخدم Mac هناك خاصية بنظام التشغيل تسمى Apple Time Capsule تسهل عليك أخذ نسخة إحتياطية دورية من الجهاز كاملاً بتوقيت محدد، ويسهل عليك استعادة تلك الملفات في أي وقت تريد.
  • أيضاً لمستخدمي ماك يمكنك الاستعانة بـ Apple AirPort Time Acpsul  وهو جهاز يحمل بداخله هارديسك و تستطيع الإتصال بالهارديسك ونقل المحتويات له من خلال شبكة Wi-Fi ومزامنته مع خاصية Apple Time Acpsule لأخذ النسخ الاحتياطية من ملفاتك. (اقرأ المزيد عن هذا الجهاز بمراجعة موقع التقنية بلا حدود)

تعامل مع الطبقات Layers بشكل أفضل

 Layers Control اضافة مجانية تقوم بأكثر من وظيفة تنظيمية للملف.
Layers Control اضافة مجانية تقوم بأكثر من وظيفة تنظيمية للملف.

هناك أكثر من أداة تساعدك في تنظيم الطبقات Layers لكل مشروع، Layers Control  اضافة مجانية تقوم بأكثر من وظيفة، تحذف الطبقات المخفية Hidden Layers بضغطة، تحذف التأثيرات Effects الغير مستخدمة الموجودة علي الطبقات، وتحذف الطبقات الفارغة أيضاً.

PSDGrade أداة بسيطة تقوم فيها برفع ملف الـ psd الخاص بك ثم تقيس درجة تنظيم وتسمية الطبقات Layers بالملف، ثم تعود لك بتقرير عن جودة تنظيم الطبقات مع نصائح لتحسين تنظيم ملف الـ .psd من الداخل.

اضافة Catalist: جميع ملفات وايميلات كل مشروع في مكان واحد

catalist-colorslab-organizing-workflow

Catalist اضافة للفوتوشوب سعرها 19$ اعتبرها من أفضل الأدوات المساعدة للمصمم لتنظيم عمله، فكرة الاضافة انها تربط ملفات كل مشروع (ملفات .psd – روابط URLs خارجية – ايميلات العميل – ملفات CSS – ملفات الفكتور … الخ) في مكان واحد.

اصنع قائمة بكل ما هو متعلق بالمشروع الذي تعمل عليه، بحيث يمكنك الوصول لها بضغطة زر.
اصنع قائمة بكل ما هو متعلق بالمشروع الذي تعمل عليه، بحيث يمكنك الوصول لها بضغطة زر.

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

اتيكيت الفوتوشوب Photoshop Etiquette

Photoshop Etiquette موقع يجمع عدد كبير من النصائح والافكار لتحسين بيئة عمل المصمم.
Photoshop Etiquette موقع يجمع عدد كبير من النصائح والافكار لتحسين بيئة عمل المصمم.

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

عن كاتب المقال

أحمد مجدي
مهندس تجربة الاستخدام، متخصص في تصميم واجهات مواقع، تطبيقات الويب والموبايل منذ عام 2006، ورئيس تحرير معمل ألوان. تويتر: @ahmedmagdi


كل مقالات الكاتب

اترك تعليقك على المقال 18 تعليق

  • أنس حسوني

    رائع جدا 🙂

    شخصيا مند سنوات و أنا أنظم ملفات المشروع بمسميات محددة مع تضمين الملفات المساعدة

    مؤخرا أحاول قدر الإمكان تضمين تعليقات و معلومات مساعدة للمبرمج تخص أكواد الألوان السمك التدوير القياسات و غيرها …

  • فيصل الفيفي

    مقال جميل جداً من فترة كنت أتمنى أحد يبين هذه الأمور.

  • خالد ال حسن ( واثب )

    تدوينة أكثر من رائعة شاكر لكم ،،

  • أحمد سعيد

    أكثر من رائع ياأحمد . .شكراً لك 🙂

  • El-abda3.com

    شكرا لكم علي الموضوع

  • Ahmed Ali

    رائع يا أحمد .

  • مشير عبد الحليم

    شكرا على المقال .. الطريف في الموضوع أنك أول من بشرت بنهاية عصر الفوتوشوب كأداه لتصميم المواقع والآن تكتب مقال كامل عنه لتنظيم مشاريع الويب 🙂

    • نحن نعرض وجهات النظر المختلفة علي المعمل، انت تحدد المناسب لك وتختار، نرسم امامك الخريطة كلها وانت تختار الطريق الذي يناسب ذوقك، توجهنا في المعمل الا نعرض وجهة نظر واحدة، اليس هذا هو الافضل؟ نرحب بوجهة نظرك انت ايضاً، شاركنا الكتابة علي المعمل 🙂

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

  • معاذ السركجي

    في منتهى الروعة مشكور أخي العزيز كنت أنتظر هكذا لفتات رائعة …

  • Mohammad

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

  • Yasmin Naser

    شكرا على المقال 🙂

  • www.vipnt.net

    رووعه بجد مبدع

  • لميس سالمي

    مقال رائع جدا ومفيد شكر لك

  • yaser amer

    شكرا على المقال الجميل و الجديد

  • ضياء القاضي

    المقال اكثر من رائع ومفيد بشكل كبير للمصمم المحترف والمبتدئ علي السواء
    شكرا جزيلا لمجهودك

  • رائع بمعنى الكلمة احتاج المزيد من هذه المواضيع لتطوير موقعنا في العمل

  • أكثر من رائع . .شكراً لك

  • علي طارق

    مقال رائع شكراً 🙂