شرح Photopea: عدّل ملف PSD واحفظه بطبقاته خطوة بخطوة

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

يعتمد شرح Photopea هنا على بطاقة تدريب واحدة بدل التنقل بين أمثلة متفرقة. أما إذا كانت الكلمات مدمجة داخل JPG أو PNG ولا توجد طبقة نص، فابدأ بمقال تعديل النص في الصورة؛ فتح الصورة المسطحة وحفظها بصيغة PSD لا يعيد طبقاتها القديمة.

شارك هذه الصفحة

ابدأ شرح Photopea بملف تدريب واضح الطبقات

المثال بطاقة بيضاء بأبعاد 1000×750 بكسل، مكتوب عليها «ورشة التصميم» وبجانبها مربع برتقالي. ملف البداية اسمه idraaak-psd-start.psd ويضم ثلاث طبقات فقط: نصًا حقيقيًا بخط Noto Sans Arabic Regular، وشكلًا مستقلًا باسم «شكل 1»، وخلفية باسم Background. هذه عناصر من إعداد إدراك وليست إعلانًا لجهة حقيقية.

للتطبيق معنا، نزّل حزمة التدريب من الزر الآتي. تضم ملف البداية، والمشروع بعد التعديل، وصورتي النتيجة، وصورة العلامة الخضراء، وملفًا يوضح المحتويات وحقوق الاستخدام.

بعد التنزيل، فك ضغط الحزمة على جهازك، ثم افتح ملف idraaak-psd-start.psd داخل Photopea لتبدأ من التصميم الأصلي. اترك idraaak-psd-final.psd للمقارنة في النهاية، واستخدم idraaak-mark.png عند الوصول إلى خطوة إضافة الصورة.

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

إذا فتحت صفحة تعريف بالخدمة، اختر Start using Photopea للوصول إلى المحرر. لا تحتاج إلى تنزيل APK أو البحث عن نسخة من المحرر داخل إدراك. أُنجز فتح ملف التدريب وتحريره وحفظه وتصديره دون تسجيل حساب أو دفع في تجربتنا، مع ظهور الإعلانات.

افتح PSD وتعرّف إلى لوحة الطبقات

1. من ملف (File) ثم فتح (Open) اختر ملف PSD من جهازك. إذا تعثرت نافذة الاختيار، استخدم ملف ثم فتح المزيد (Open More) ثم From Any Folder؛ هذا مسار الفتح الذي نجح معنا في التجربة.
2. انتظر ظهور اسم الملف في تبويب داخل مساحة العمل. راجع أنك فتحت PSD نفسه، لا إحدى صورتي JPG أو PNG اللتين تعرضان النتيجة فقط.
3. انظر إلى لوحة الطبقات (Layers) على اليمين. إن كانت مخفية، يمكنك إظهارها من قائمة نافذة (Window) ثم Layers. الطبقات الأعلى في القائمة تظهر أمام الطبقات الموجودة أسفلها.
4. انقر اسم «شكل 1» لتحديد المربع، ثم انقر رمز العين بجواره. يجب أن يختفي المربع وحده بينما يبقى النص والخلفية. انقر المكان نفسه لإظهاره مجددًا قبل المتابعة.

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

عدّل النص واختر الخط والمحاذاة المناسبين

في هذا الجزء من شرح Photopea سنستبدل «ورشة التصميم» بعبارة «ورشة فوتوبيا» داخل الطبقة نفسها. لا تنشئ طبقة جديدة فوق الكلمات القديمة؛ ادخل إلى الحروف الموجودة أولًا.

1. حدّد طبقة «ورشة التصميم» من لوحة الطبقات. اختر أداة الكتابة (Type Tool) ذات علامة T من الشريط الجانبي، ثم انقر داخل الكلمات على البطاقة. يجب أن يظهر مؤشر الكتابة.
2. حدّد العبارة الموجودة واكتب «ورشة فوتوبيا». يمكنك استخدام Ctrl+A عندما يكون مؤشر الكتابة داخل النص؛ استخدامه خارج النص قد يحدد شيئًا آخر في المشروع.
3. راجع اسم الخط في الشريط العلوي. استخدمنا Noto Sans Arabic بوزن Regular وحجم 80 px، وأبقينا اللون الأسود والحجم نفسه. إذا غيّرت جزءًا محددًا من الحروف، فقد يطبّق إعداد الخط عليه وحده بدل الطبقة كلها.
4. راجع المحاذاة من أزرار الشريط العلوي، وتأكد أن العبارة بقيت داخل البطاقة ولم تقترب من المربع. ثم اضغط علامة الصح (Confirm) أعلى المحرر لتثبيت النص قبل تحريك عنصر آخر.

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

إذا اختلطت العربية بالإنجليزية أو الأرقام واضطرب الترتيب، افتح لوحة فقرة (Paragraph) وراجع اتجاه الكتابة الأساسي. المحاذاة تحدد موضع السطر، أما الاتجاه فيؤثر في ترتيب المقاطع وعلامات الترقيم؛ هما إعدادان مختلفان. توضح وثائق الخطوط واتجاه الكتابة موضع هذه الخيارات.

أضف صورة وحرّك العنصر المستقل وغيّر حجمه

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

1. حدّد «شكل 1» من لوحة الطبقات، ثم اختر أداة التحريك (Move Tool) ذات رمز السهم. اسحب المربع إلى أسفل اليمين، واترك مسافة واضحة بينه وبين حدود البطاقة.
2. من تعديل (Edit) ثم تحول حر (Free Transform) افتح إطار التحجيم حول المربع. تأكد أن الإطار يحيط بالمربع وحده، لا بالنص أو مساحة التصميم كاملة.
3. في حقلي نسبة العرض والارتفاع أعلى المحرر أدخل 125% لكليهما. راجع رمز السلسلة الذي يحافظ على النسبة عند تغيير أحد البعدين. ويمكنك بدل الأرقام سحب زاوية من الإطار مع مراقبة النسبة.
4. ثبّت التغيير بعلامة الصح أو Enter. إذا أصبح العنصر مشوهًا أو تحرك الجزء الخطأ، ألغِ العملية بعلامة الإلغاء أو Escape ثم حدّد الطبقة الصحيحة وأعد المحاولة.

تغيير نسبة طبقة المربع لا يغيّر أبعاد البطاقة: سيظل المشروع 1000×750 بكسل. أما سحب أحد جانبي الإطار وحده فقد يغيّر النسبة بين العرض والارتفاع، ولذلك استخدمنا النسبة نفسها للبعدين. يمكنك الرجوع إلى شرح التحول الحر الرسمي عند الحاجة إلى الدوران أو خيارات إضافية.

لإضافة صورة مستقلة إلى البطاقة، استخدمنا علامة دائرية خضراء من إعداد إدراك باسم idraaak-mark.png وأبعاد 100×100 بكسل. يمكنك تطبيق الخطوات بصورة تملك حق استخدامها، مع مراعاة أن الصور الكبيرة قد تغطي التصميم عند إدراجها.

1. افتح PNG في تبويب مستند جديد داخل Photopea من ملف ثم فتح المزيد ثم From Any Folder، مع إبقاء تبويب مشروع PSD مفتوحًا.
2. وأنت في تبويب الصورة، اختر تحديد (Select) ثم الكل (All)، ثم تعديل (Edit) ثم نسخ (Copy).
3. انقر تبويب مشروع PSD، ثم اختر تعديل ثم لصق (Paste). تظهر الصورة في طبقة جديدة؛ كانت باسم «طبقة 2» في نسختنا النهائية. تأكد من مصغّرها بدل الاعتماد على الرقم الذي قد يختلف عندك.
4. حدّد طبقة العلامة واختر أداة التحريك، ثم اسحبها إلى أسفل يسار البطاقة بعيدًا عن النص. بقيت عند حجمها الأصلي في مثالنا، بينما كُبر المربع إلى 125%. أصبح المشروع أربع طبقات مستقلة بدل ثلاث.

يوجد أيضًا أمر ملف ثم فتح ووضع (Open & Place) لإدراج صورة، لكن نافذة اختياره لم تكتمل في بيئة تجربتنا؛ لذلك نعرض مسار الفتح والنسخ واللصق الذي نُفّذ فعلًا.

احفظ PSD ثم أغلقه وأعد فتحه

الخطوة التي تحفظ قابلية استكمال العمل في شرح Photopea هي حفظ مشروع PSD مستقل. لا تكتفِ بصورة جميلة في نافذة التصدير، ولا تغلق تبويب المتصفح قبل التأكد من وجود الملف على جهازك.

1. اختر ملف ثم حفظ بصيغة PSD (Save as PSD) واحفظ باسم جديد مثل idraaak-psd-final.psd. إذا لم تكتمل نافذة الحفظ، استخدم ملف ثم حفظ المزيد (Save More) ثم حفظ PSD/PSB.
2. في نافذة الحفظ الإضافي اختر PSD واترك خيارات تصغير الملف غير مفعلة في هذا التدريب، ثم اضغط حفظ. استخدمنا هذا المسار لتنزيل النسخة المعدلة؛ إذا حملت اسم الأصل، أعد تسميتها داخل مجلد التنزيلات دون الكتابة فوقه.
3. تحقق من أن الملف موجود وحجمه ليس صفرًا. أغلق تبويب المستند داخل Photopea بعد الحفظ، ثم أعد فتح النسخة الجديدة من جهازك. لا تغلق المشروع قبل العثور على الملف المحفوظ.
4. افحص بقاء الطبقات الأربع والنص «ورشة فوتوبيا» والمربع في موضعه الجديد والعلامة الخضراء أسفل اليسار. ادخل مجددًا إلى النص بأداة T وتأكد من ظهور مؤشر الكتابة، ثم اخرج دون تغيير إذا كان كل شيء صحيحًا.

قد يظهر تنبيه بوجود تغييرات غير محفوظة بعد التنزيل من «حفظ المزيد». لا تتعامل معه كإذن للتخلص من العمل؛ تحقق أولًا من الملف الذي نزلته ثم أعد فتحه. في تجربتنا أُغلقت النسخة المعدلة وأُعيد فتح الملف المحفوظ فعلًا، وبقيت طبقة النص قابلة للتحرير والخلفية والعنصر منفصلين.

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

صدّر JPG وPNG وافتح الملفين المحفوظين

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

1. مع فتح المشروع المعدل، اختر ملف ثم صدّر كـ (Export As) ثم JPG. في نافذة «حفظ للويب» راجع العرض 1000 والارتفاع 750 ووحدة البكسل، واضبط الجودة حسب حاجتك. استخدمنا 96% في هذا المثال.
2. اضغط حفظ، ثم افتح الملف الناتج من مجلد التنزيلات في عارض صور مستقل. راجع الكلمات والمربع وحدود البطاقة، ولا تكتفِ بمعاينة نافذة التصدير التي قد تعرض جزءًا من التصميم عند تكبير 100%.
3. عد إلى المشروع واختر ملف ثم صدّر كـ ثم PNG. أبقِ الأبعاد نفسها واحفظ النسخة الثانية، ثم افتحها أيضًا خارج المحرر وقارنها بنسخة JPG عند الحجم نفسه.

خرج ملف JPG النهائي بحجم 23,541 بايت وPNG بحجم 16,215 بايت، وكلاهما 1000×750 بكسل. بدا النص والمربع والعلامة في الموضع نفسه عند فتح الملفين. كان PNG أصغر في هذه البطاقة البسيطة ذات الألوان القليلة، وهذا لا يعني أنه سيكون أصغر من JPG في الصور الفوتوغرافية أو كل تصميم آخر.

الخلفية في الملفين بيضاء لأن طبقة Background بقيت ظاهرة؛ نسخة PNG التي صدّرناها ليست شفافة. إذا أردت شفافية، أخفِ طبقة الخلفية وتحقق من ظهور شبكة الشفافية ثم صدّر PNG. أما JPG فلا يدعم خلفية شفافة. لم نصدّر نسخة شفافة ضمن هذا الاختبار، فلا تتوقعها داخل PNG الخاص بهذا المثال.

توضح وثائق الفتح والحفظ الفرق بين حفظ المشروع وتصدير صورة. احتفظ بالملفين: PSD للتعديل لاحقًا، وJPG أو PNG للاستخدام النهائي.

حل المشكلات الشائعة أثناء تعديل PSD

يتحرك جزء آخر أو لا يتغير العنصر المطلوب

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

علامة T غير موجودة ولا يظهر مؤشر الكتابة

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

الخط مفقود أو تغيّر شكل الكلمات

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

ضغطت حفظ ولا تعرف أين ذهب الملف

راجع قائمة التنزيلات ومجلد Downloads في متصفحك، أو المجلد الذي اخترته في نافذة الحفظ. ابحث باسم المشروع وامتداد PSD أو JPG أو PNG، وانتبه إلى النسخ التي يضيف المتصفح إلى اسمها رقمًا مثل (1). افتح الملف الصحيح وتحقق من تاريخ تعديله وحجمه، ولا تعتبر بقاء المشروع على الشاشة دليلًا على أنه حُفظ. إن تعذر تنزيله، أبقِ المشروع مفتوحًا وجرّب مسار «حفظ المزيد» قبل إغلاقه.

ما الذي أثبتته تجربة شرح Photopea؟

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

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

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