السلام عليكم ورحمة الله وبركاته
في درس اليوم راح نتلكم عن الجزء الثاني في تصميم الإستايل ..
وهو تابع لدرس (مقدمة في تصميم الإستايل )
اليوم بإذن الله سنتطرق للجزء المهم في الإستايل وهو تقطيع التصميم الذي صممته ..
وقبل البدء في درس اليوم ... أحببت ان أجاوب على سؤال دائماً أسمعه من الكثير .. وهو /
ماهي متطلبات تصميم الإستايل ؟؟
كل ماهومطلوب منك ( برنامج الفوتوشوب لتصميم الإستايل او أي برنامج جيد في التصميم ) + فرونت بيج
أنا هنا ساتعامل مع بنرامج الفوتوشوب .. وتقدر تحمله من قسم البرامج في المنتدى لو لم يكن موجود لديك ..
المهم قلنا في الدرس السابق أولاً عليك أن تصميم الإستايل الذي تريد .
.وقلنا كذلك مع الخبرة راح تعرف تختار لك العرض والإرتفاع المناسب وقلت لكم العرض والإرتفاع المفضل لدي تقريباً هو لدي( 780 * 585 ) بكسل وتصمم الإستايل من بنر وفوتر وجوانب لو حاب وبأي شكل تريد ..
ونقول تصميمنا الي صممناه وراح نشرح عليه ونركبه كإستايل هو كما هو موضح في الصورة

الآن عند الإنتهاء من التصميم ... نجي نقسم التصميم حتى نقوم بتقطيعه بطريقة دقيقه وسهله ..
فأنا هنا إخترت ان أشرح لكم طريقة التقطيع بإستخدام أداة ( slice tool ) وهي تطلب وجود المسطره حتى نستخدمها .. ولإدراج المسطره في الفوتوشب إختر قائمة view وتأكد أن أمر Ruler موجوده أمامه علامة الصح كما هو موضح بالصورة ...

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

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

سيظهر عن الضغط عليها شريط الخيارات الخاص بهذه الأداة إضغط على الزر (( slice from Guides ) كما هو موضح بالصوره

الآن ستلاحظ تصميمك يحصل فيه كما هو موضح بالصورة أسفل /

هذه التقسيمات توضح ماوضحناااه هنا في هذه الصورة التالية /



تابع

_________________

الآن حتى تتم تقسيم الإستايل إلى قطع صغيره وبطريقى سهله وبسيطه .. كل ماعليك هو ان تحفظ تصميمك على انه صفحة ويب .. وذلك من قائمة file إختر الأمر save for web كما هوموضح /

ثم تظهر لك نافذة إضغط على زر save زي ماهوموضح /

تظهر لك نافذة حدد منها مكان حفظ صفحة الويب .. أنا هنا قمت بحفظها في سطح المكتب disktop
بعد الإنتهاء من الحفظ .. تعال نروح نشوف سطح المكتب إيش فيه ؟؟؟!
سنجد ماهو موضح في الصورة التالية /

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

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

لحل هذه المشكله لابد من عمل خلفية مناسبة لتصميم ..
وهو فقط إنشاء صورتين نجعلها خلفية حيث صورة علوية خاص بالبنر وصورة سفليه خاص بالفوتر لتخفي التقطيع الذي حصل ..
ولإنشاء هذه الصورتين نتبع التالي :
أولاً الجزء العلوي الخاص بالبنر :
- إفتح أي صورة علوية تجميلية من تصميم الإستايل من المجلد الخاص بصور الإستايل في سطح المكتب ,,, فأنا بالنسبة لتصميمي ساختار صورة بنرتجميلي يمن وساحدد باداة تحديد المربع جزء من الصورة كما هو موضح /
-

- ونعمل لهذا الجزء نسخ وذلك من قائمة Edit ثم إختر الأمر copy كما هو موضح /

- الآن نفتح نافذة عمل جديدة من قائمة file ثم أمر New
- وأعمل في هذه النافذة الجديدة أمر لصق وذلك من قائمة Edit ثم إختر أمر Past كما هو موضح /
-



تابع

_________________

- وسأحفظ هذه الصورة الجديدة بإسم ( UP ) وفي مجلد الـ image الموجود في سطح المكتب مع باقي تقطيعات الإستايل وعلى إمتداد الــ jpg ويمكنك اختيار الامتداد المناسب إذا لم تعرف كما هو موضح

ثانياً : الجزء السفلي الخاص بالفوتر :
هو بنفس الطريقة وراح نعيد الشرح لأن التكرار يعلما لشطار
- إفتح أي صورة سفلية تجميلية من تصميم الإستايل من المجلد الخاص بصور الإستايل في سطح المكتب ,,, فأنا بالنسبة لتصميمي ساختار صورة فوترتجميلي يسار وساحدد باداة تحديد المربع جزء من الصورة كما هو موضح /

- ونعمل لهذا الجزء نسخ وذلك من قائمة Edit ثم إختر الأمر copy كما هو موضح /

- الآن نفتح نافذة عمل جديدة من قائمة file ثم أمر New
- وأعمل في هذه النافذة الجديدة أمر لصق وذلك من قائمة Edit ثم إختر أمر Past كما هو موضح /
-

- وسأحفظ هذه الصورة الجديدة بإسم (Do ) وفي مجلد الـ image الموجود في سطح المكتب مع باقي تقطيعات الإستايل وعلى إمتداد الــ jpg ويمكنك اختيار الامتداد المناسب إذا لم تعرف كما هو موضح

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

_________________

مشكور أخوي الغالي

أتمنى مراجعة روابط الصور لأن الموقع المرفوعه الصور عليه

محظور بالسعودية

وكل الشكر والتقدير

أخوك

محترف تصميم

_________________

الصوورة لا تظهر

تكفى ارفعها عشان الكل يستفيد

_________________