aam-design: learn-design-templates

بسم الله الرحمن الرحيم

شرح طريقة عمل إطار إحترافي باستخدام برنامج الفوتوشوب

مقدمة

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

بسم الله الرحمن الرحيم

شرح طريقة عمل إطار إحترافي باستخدام برنامج الفوتوشوب

في البداية نقوم بتشغيل برنامج الفوتوشوب ثم من قائمة ملف (File) نختار جديد (New)

فيظهر مربع حواري باسم (New)

في خانة ( Name) نكتب إسم للعمل

ومن ( Image Size ) نقوم بتحديد كل من ( Preset Size) إلي ( Custom ) حجم مخصص ومن العرض ( Width) نقوم بكتابة 500 بكسل ومن الطول ( Height) نقوم بكتابة 300 بكسل ومن دقة العرض ( Resolution) نختار 72 بكسل \أنش

ثم من صيغة الالوان نختار ( RGB Color)

بعد ذلك نقوم بختيار لون الخلفية ( White) اللون الابيض

يمكن أن تعدل علي حجم العمل كما تريد

بعد ذلك سوف تظهر منطقة العمل بهذا الشكل

ثم قم باختيار هذة الاداة

وقم برسم مستطيل للإطار الذي تريده أنا قمت برسم هذا الشكل يمكن أن ترسم مثله أوأن تقوم برسم شكل خاص بك

ثم من قائمة Layer نختار Rasterize ومنها نختار All Layers

ثم إختار هذة الاداة

وقم بتحديد الجزء الاسفل من الشكل كما هو ظاهر أمامك ثم قم بالضغط على مفتاح Delete

حتي يكون بهذا الشكل بعد الحذف

ثم قم بالضغط كلك يمين على اللير واختار Blending Options

سوف يظهر هذا المربع الحواري ومنه اختار Gradient Overlay ثم بعد ذلك اختار Gradient

بعد ذلك سوف يظهر هذا المربع الحواري والذي من خلاله يمكن أن نختار اللون الذي تريدة أو أن تقوم بادخال قيمة كل لون حتي يظهر معك لون جديد خاصه بك كما ترى وإذاكنت تريد حفظه إضغط علي زر جديد (New)

بعد ذلك إختار Inner Glow وقم بتعديل الخيارات كما تري في الصورة التالية

بعد هذه الخطوات سوف تحصل على هذا الشكل

قم بتكرارة عن طريق الضغط علي قائمة Layer ثم Duplicate layer

ثم قم بالضغط على مفتاحي Ctrl+T سوف يكون الشكل مثل هذا

ثم إضغط كلك يمين وإختار Rotate 180

ثم قم بتحريك الشكل إلى أسفل حتي يكون كما ترى

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

بعد ذلك قم بتحديد المنطقه الواقعه في الوسط بين الجزء الاول والجزء الثاني باستخدام اداة التحديد

أنظر إلى الشكل التالي لكي تتعرف على كيفية عمل التحديد

ثم قم بإنشاء لير جديد وذلك من خلال الضغط على قائمة Layer ثم New ثم اختار Layer

أو من خلال الضغط علي مفاتيح الاختصار Shft+Ctrl+N

الان نستخدم هذه الاداة

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

ثم قم بعمل تحديد في منتصف اللير كما تري وقم بالضغط على مفتاح Delete

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

تم الإنتهاء من عمل الإطار

الخطوة الثانية : وهي تقطيع الاطار وذلك باستخدام هذه الاداة

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

إختار منها Edit Slice Options

سوف يظهر هذا المربع الحواري وهو يحتوي على العديد من الخيارات ومنها اسم الصورة والموقع الذي سوف تذهب إليه عند الضغط علي الصورة

ولكي تجعل الاجزاء متساوية قم بتحديد الطول والعرض بحيث يكون متساوي في جميع الاجزاء فأنت تري أن العرض هنا 24 والطول 40 وهكذا مع بقية الاجزاء

بعد الانتهاء من التقطيع سوف يظهر الشكل كما تري

قم الان بحفظ العمل كصفحة ويب وذلك عن طريق

من قائمة File اختار Save For Web

بعد ذلك سوف يظهر هذا المربع الحواري

قم بالضغط علي Save

سوف يظهر مربع حواري آخر فقم بإدخال اسم الملف ونوعة وما نريده هنا هو HTML وقم باختيار مكان الحفظ

الخطوه الثالثة : وهي تعديل الاطار باستخدام برنامج الفرونت بيج وجعلة يتمدد

قم بتشغيل برنامج الفرونت بيج ثم قم بفتح صفحة جديدة إذا لم تكن موجودة وذلك عن طريق

ثم قم بإدراج جدول يتكون من ثلاثة صفوف وثلاثة أعمدة وذلك عن طريق

بعد الضغط علي Table سوف يظهر هذا المربع الحواري

إجعل عدد الصفوف Rows ثلاثة وعدد الاعمدة Columns ثلاثة ايضاً واجعل قيمة الحدود Border صفر

وقيمة كل من Cell padding و Call spacing صفر

بعض المصطلحات المهمة

عدد الصفوف Row

عدد الأعمدة Columns

المحاذاة Alignment

عرض الجدول width إما أن يكون بالبكسل أو بالنسبة المئوية

إرتفاع الجدول height إما أن يكون بالبكسل أو بالنسبة المئوية

Cell padding وهي المسافة بين المكونات التي يتم إدراجها في الخلية والاطار المحيط بالخلية

Call spacing تستخدم لتحديد المسافات بين خلايا الجدول

حدود الجدول Border

لون الجدول Color

خلفية الجدول Background إما أن تختار لون أوصورة

بعد ذلك سوف يظهر الجدول بهذا الشكل

الان نقوم بإدراج صور ة الجزء الايمن من الاطار وذلك عن طريق

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

بعدإدراج صورة الجزء الايمن العلوي والسفلي قم بإدراج صورة الجزء الايسر العلوي والسفلي سوف يكون الجدول بهذا الشكل بعد الانتهاء من إدراج جميع الاجزاء

بعد ذلك سوف نقوم بإدراج منطقة التمدد وهي هنا تنقسم إلي المنطقة الواقعة بين كل من صورة الجزء الايمن العلوي والسفلي وصورة الجزء الايسر العلوي والسفلي وصورة الجزء العلوي الايمن والسفلي وصورة الجزء الايسر العلوي والسفلي

وهذة صورة توضح هذه المناطق