درس تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا

[aymano]

بسم الله الرحمن الرحيم
و به نستعين و الصلاة و السـلام علي سيد الخلق اجمعين
سيـدنا محمد و على اله و صحبه اجمعين






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



نبدئ بفتح عمل جديد علي برنامج الفوتوشب بالمقاس التالي :
960 × 900 بيكسل.

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

و يمكنك استخدام اللون المستخدم في الدرس



ثم نقوم بتحميل مجموعة الباترن الي برابط تحت



لتحميل الباترن




بعد تحميل الباترن نقوم بعمل طبقة جديدة ثم نقوم بكسوة الطبقة بأحد الانماط الموجودة بالمجموعة




http://www.grafpedia.com/wp-content/uploads/2009/06/116.jpg (http://www.al3on.com/vb/showthread.php?p=5362#post5362)



بعد ان قمنا بتعبأة الطبقة بالباترن نحصل علي هذه النتيحة



http://www.grafpedia.com/wp-content/uploads/2009/06/216.jpg




نقوم بتغير مود الطبقة الي overlay



http://www.grafpedia.com/wp-content/uploads/2009/06/313.jpg (http://www.al3on.com/vb/showthread.php?p=5362#post5362)



بستخدام اداة المستطيل سنقوم بعمل اشكال بمقاسات مختلفة و نوزعها كما بالشكل



http://www.grafpedia.com/wp-content/uploads/2009/06/412.jpg (http://www.al3on.com/vb/showthread.php?p=5362#post5362)



نقوم بعمل ستايلات مميزه للاشكال الي قمنا بأضافتها عن طريق دخولنا الي خصائص الطبقات



http://www.grafpedia.com/wp-content/uploads/2009/06/54.jpg (http://www.al3on.com/vb/showthread.php?p=5362#post5362)



http://www.grafpedia.com/wp-content/uploads/2009/06/64.jpg



و هذه النتيجة



http://www.grafpedia.com/wp-content/uploads/2009/06/74.jpg




نقم بتغير استايلات الاشكال الاربعة التي بالمنتصف بهذه الاعدادت

http://www.grafpedia.com/wp-content/uploads/2009/06/84.jpg (http://www.al3on.com/vb/showthread.php?p=5362#post5362)

http://www.grafpedia.com/wp-content/uploads/2009/06/94.jpg (http://www.al3on.com/vb/showthread.php?p=5362#post5362)

و نحصل على هذه النتيجة

http://www.grafpedia.com/wp-content/uploads/2009/06/104.jpg


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

http://www.grafpedia.com/wp-content/uploads/2009/06/117.jpg (http://www.al3on.com/vb/showthread.php?p=5362#post5362)

نستخدام مجموعة ايقومات الـ png لاضافة روح جمالية للتصميم

نقوم بفتح الايقومات عن طريق الفوتوشوب ووضعها في مكانها المناسب حسب الحاجة


http://www.grafpedia.com/wp-content/uploads/2009/06/124.jpg

http://www.grafpedia.com/wp-content/uploads/2009/06/134.jpg



بستخدام اداة الكتابة نقوم بكتابة الروابط و الاختصارات الخاصة بالتصميم

http://www.grafpedia.com/wp-content/uploads/2009/06/144.jpg (http://www.al3on.com/vb/showthread.php?p=5362#post5362)

نقوم بأضافة صورة تجميلة اخرى في اسفل الصندوق كاضافة جمالية

http://www.grafpedia.com/wp-content/uploads/2009/06/154.jpg

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

http://www.grafpedia.com/wp-content/uploads/2009/06/164.jpg (http://www.al3on.com/vb/showthread.php?p=5362#post5362)

و بنحديد مود Soft light للطبقة نحصل علي الشكل التالي

http://www.grafpedia.com/wp-content/uploads/2009/06/175-500x468.jpg (http://www.al3on.com/vb/showthread.php?p=5362#post5362)

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