السلام عليكم ورحمة الله وبركاته


شرح تصميم موقع ببرنامج الفوتوشوب الجزء الاول

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


المتطلبات :
القليل من الصبر والقليل من التركيز وبرنامج فوتوشوب الاصدار السادس فما فوق


بسم الله نبدا


افتح برنامج الفوتوشوب ثم افتح صفحة عمل جديد بحجم الموقع الذي تريد عمله وبمثالنا اخترنا العرض 750 والطول 600 كما بالصوره التاليه*:

http://www.sasosoft.com/mokhtar/photoshop/11.jpg

اختر اللون الازرق الغامق لخلفية العمل او اي لون تريد مع العلم ان تطبيقنا على اللون الازرق
إستخدم أداة التحديد المربعة وقم بعمل تحديد من أعلى الخلفية لأسـفلها مع ترك مسافة صغيرة على الأطراف وقم بتلوين هذا التحديد بلون أخف قليلاً من لون الخلفية يعني ازرق فاتح وحسب رغبتك .

ثم اذهب الى اداة الــ Stroke وستجدها بالقائمه Edit ثم اختار Stroke واختار اللون الاسود من امام color او اختار اي لون حسب رغبتك وضع القيمه واحد و حسب رغبتك حيث كلما زادت القيمه كلما زاد عرض الخط .
كما بالصوره التاليه :

http://www.sasosoft.com/mokhtar/photoshop/12.jpg

سيظهر لك الشكل كالتالي :

http://www.sasosoft.com/mokhtar/photoshop/13.jpg

والان اختار طبقه او لير جديد من القائمه layer ثم new ثم layer ثم اعمل تحديد باداة المستطيل باعلى الصفحه وستكون منطقة القوائم العلويه للصفحه التي تحتوي على ازرار الموقع والروابط ولا تجعله جبيرا ولا صغيرا بل متناسبا ثم لوّن التحديد بتدرج ازرق فاتح او اي لون تراه مناسبا لك ثم اذهب الى Stroke*واعطه اللون الاسود وضع القيمه 1 ___ والآن مع بقاء التحديد على الطبقه اذهب الى Layer Style من القائمه layer واختار Gradiant Overlay
وأختر الألوان كما في الشكل التالي وطبعا سيكون حسب رغبتك وسوف ترى الشكل بعدها كالصوره التاليه
أحفظ الستايل الذي قمنا بعمله قبل قليل لأننا سنستخدمه في هذا التصميم في الخطوات التالية أو في تصاميم ثانيه
لحفظ الاستايل اضغط على New Style وبعدها قم بحفظه

http://www.sasosoft.com/mokhtar/photoshop/14.jpg

والآن افتح طبقه جديده واعمل تحديد في اجزء الايمن من المستطيل اللي عملناه فوق الصفحه وبنفس الطريقه قم بعمل تدرج ازرق غامق او اي لون قريب للازرق الفاتح او اي لون تختاره انت حسب ذوقك وبعد ما تعمل التدرج طبق عليه نفس الستايل اللي حفظناه وسوف تكون النتيجه كالصوره التاليه :

http://www.sasosoft.com/mokhtar/photoshop/15.jpg

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

http://www.sasosoft.com/mokhtar/photoshop/16.jpg

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

http://www.sasosoft.com/mokhtar/photoshop/17.jpg

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

http://www.sasosoft.com/mokhtar/photoshop/18.jpg

والآن اضف طبقه جديده وقم بعمل مستطيل تحت المستطيل الصغير ولونه باللون الازرق الغامق واستعمل معه Stroke واختر اللون الاسود والقيمه واحد وسيصبح الشكل كالصوره التاليه :

http://www.sasosoft.com/mokhtar/photoshop/19.jpg

والآن اضف طبقه جديده وارسم مربع في منتصف الصفحه وسيكون هو مكان الكتابه ومحتويات الموقع ولونه باللون الازرق الغامق واضف له Stroke واختر اللون الاسود والقيمه واحد وسيصبح الشكل كالصوره التاليه :

http://www.sasosoft.com/mokhtar/photoshop/20.jpg

والآن اضف طبقه جديده وارسم مستطيل بنفس تدرج القائمه وبنفس الاستايل واضف له Stroke واختر اللون الاسود والقيمه واحد وسيصبح الشكل كالصوره التاليه :

http://www.sasosoft.com/mokhtar/photoshop/21.jpg

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

http://www.sasosoft.com/mokhtar/photoshop/23.jpg

والآن اخواني واخواتي هذه هي الخطوه الاساسيه واهم النقاط لعمل تصميم جميل وخفيف ولطيف لموقعك ومع قليل من التجربه والممارسه والتكرار وتصليح الاخطاء ستستطيع تصميم موقع احترافي بنفسك وهذه تعتبر الحجر الاساس في بدايات التصميم ووفقنا الله واياكم لما يحبه ويرضاه


وهذا طبعا التصميم النهائي مضاف عليه بعض الاكسسوارات والبهارات التجميليه


http://www.sasosoft.com/mokhtar/photoshop/24.jpg

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

http://www.sasosoft.com/mokhtar/photoshop/25.jpg

والان اختار اداة التقسيم او التقصيص Slice Tool والصوره التاليه تبين الاداة

http://www.sasosoft.com/mokhtar/photoshop/26.jpg

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

ملحوظه : ان اخطأت في العمل وتريد الرجوع خوطوه واحده او اكثر ما عليك الا ان تختار نافذة الــ History وتستطيع ارجاع العمل خطوه واحده الى الخلف او اكثر من خطوه .

http://www.sasosoft.com/mokhtar/photoshop/27.jpg

وطبعا يتغير شكل التصميم بتغييرك اجزاء التحديد والتقسيم للتصميم . والان قم باختيار اداة Slice Select Tool
انظر الصوره التاليه توضح شكل الاداة :

http://www.sasosoft.com/mokhtar/photoshop/28.jpg

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

http://www.sasosoft.com/mokhtar/photoshop/29.jpg

ومن نافذة خصائص التقطيع اختار No Image
وفي خانة HTML تستطيع كتابة اي شيء تريد او تتركه للفرونت بيج او الدريم ويفر فيما بعد كما بالصوره التاليه

http://www.sasosoft.com/mokhtar/photoshop/30.jpg

والآن اخواني واخواتي الاعزاء طبقوا نفس الخطوه السابقه بالمناطق التي تريد حذف الصور المقطعه منها لتركها فارغه لكي تضيف بالمكان الفارغ اي نص او كتابه بالفرونت بيج او الدريم ويفر او غيرهما
وبعد الانتهاء من حذف القطع اتجه فورا الى File ثم اختار Save For Web لحفظ العمل بصفحة انترنت
وسوف تاتيك هذه النافذه كما بالصوره التاليه وما عليك الا ان تختار اوكي Ok


http://www.sasosoft.com/mokhtar/photoshop/31.jpg

ثم سوف تاتيك نافذة خصائص الحفظ اترك اعداداتها تقائيه او غير ما يلزمك وهي اسم الصفحه ونوع الصفحه وصورها كالصوره التاليه :

http://www.sasosoft.com/mokhtar/photoshop/32.jpg

اضغط على معها Save لكي تحفظ العمل وسيقوم البرنامج بحفظ الصور بجداول ليسهل التعامل معها
بالبرامج الاخرى مثل الفرونت بيج ودريم ويفر او اي برنامج تحرير لغة HTML
والصور ستكون محفوظه داخل مجلد images
وستلاحظ ان التصميم فيه مناطق بيضاء وهي التي تم تقسيمها وقصها وجعلها خاليه من الصور ليسهل علينا الكتابه ووضع الفلاش فيها او الصور او الروابط داخل الجداول الفارغهوالآن اخوتي فل نفرض اننا لانريد قص الصور بل نحددها ونضع لها الروابط فقط اتبع التالي
نقوم بنفس خطوات تقسيم التصميم ونضغط يمين الماوس بداخل المكان المحدد والذي نريد وضع رابط او عنوان له ثم نختار من القائمه Edit Slice Options وستظهر لك نافذة خصائص التقطيع واتبع التالي لكي نضع له رابط وعنوان بالشريط السفلي للاكسلورر

اختار من Slice Type هذا الخيار لكي تظهر الصوره Image
Name هو اسم المكان المحدد لاداعي لتغييره لانه تلقائي
URL وانتبه هنا يجب كتابة الرابط كاملا كما بالصوره
Target وهي خصائص فتح صفحة الرابط new نافذه جديده same بنفس النافذه
Message Text وهنا تكتب اي شي تبيه اذا مررت الماوس على الرابط سيظهر هذا الكلام بشريط الاكسبلورر تحت

http://www.sasosoft.com/mokhtar/photoshop/32.jpg

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