طريقة تقطيع التصميم بالفوتوشوب

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



سنتعرف في البداية على الأدوات التي
تهمنا فقط من أدوات برنامج الفوتوشوب،
وهي أداة التقطيع التشريح (Slice
Tool)، وأداة العدسة.



دعونا نفتح صفحة جديدة في الفوتوشوب عن
طريق File --> New ثم نختار
الخصائص التالية .. وهي خصائص تصميم
موقع.. ثم OK أو موافق.



نختار أداة التقطيع يتحول شكل مؤشر
الفأرة إلى صورة سكين.

نقوم بالضغط على زر الفأرة الأيسر باستمرار
مع التحريك في أي جهة لنقطع
مربع .. سيظهر معنا الشكل التالي:



كما يتضح من الصورة السابقة أنه ظهر
لدينا نوعين من الشرائح:
طبعاً نلاحظ وجود رقم ورموز في الركن الأيسر
العلوي من كل شريحة.. فالرقم
يدل على رقم الشريحة.
والرمز يدل على
نوع الشريحة.. ولدينا هنا نوعين للشرائح:
الشريحة المقطوعة رقم (3)،
وهي التي قمنا بقصها. وهذه يمكن التحكم فيها عن
طريق أداة التحديد
والتعديل.
وشرائح أخرى تلقائية رقم (1،2،4،5)، وهذه لا يمكن التحكم فيها
ولا نحتاج
إليها.

والآن سنقوم بالتطبيق العملي لما تعلمناه على
الموقع الذي قمنا بتخطيطه في
الدرس السابق. وبإمكان من يرغب في
التطبيق معنا أن يحمل الملف من الرابط
التالي:

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

سنقوم
بفتح الملف ثم نختار أداة التقطيع (السكينة). ثم نقوم بقطع الصورة
التي
في الركن الأيسر العلوي فيظهر معنا الشكل التالي:



جميل جدا ..

الآن سنقوم بقطع
خلفية رأس الصفحة كما هو مخطط.



نلاحظ أن العرض صغير جداُ ..

أترك
لكم تقطيع باقي الصور ..

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

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



اختر منها الحجم الحقيقي Actual Pixels
أو ضبط على الشاشة Fit on screen.

انظر أن القص لم يكن دقيقاً..



الآن جاء دور استخدام أداة التحديد
والتعديل.
نحتاج إلى تعديل أماكن القطع كما يلي:



وهكذا بقية الصور
والخلفيات...

والآن.. انتهينا
من تقطيع التصميم .. نحفظ هذه الصورة مثل حفظ صور المتحركة.