كيفية تصميم واجهة موقع على برنامج الفوتوشوب .. روعة

[احمد مصطفى]

كل عام وانتم بخير

حبايب قلبي

اقدم لكم على طبق من ذهب درس لتصميم موقع خاص فيك..خطوه خطوه...كامل
فقط طبق معنا الخطوات....ويكون عندك موقع خاص فيك باذن الله

هذا الدرس اهديه الى جميع زوار همس ...والى المشرفين والقائمين عليه

بداية الدرس:

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

http://www.traidnt.net/up//traidnt/temp1.jpg

2 - نقوم بانشاء طبقه جديده ثم نرسم مستطيل كم بالصور
http://www.traidnt.net/up//traidnt/temp2.jpg

3-نقوم بتعبئة المستطيل باللون الي تبي وانا اخترت كما بالصوره
http://www.traidnt.net/up//traidnt/temp3.jpg

4- نقوم الان بعمل التأثير التدرجي اللوني للمستطيل
http://www.traidnt.net/up//traidnt/temp4.jpg

5-نقوم الان بعمل حد للمستطيل الذي سويناه
http://www.traidnt.net/up//traidnt/temp5.jpg

6-الحين نقوم بانشاء طبقه جديده ونرسم مستطيل البنر كما بالصوره
http://www.traidnt.net/up//traidnt/temp6.jpg

7-ثم نقوم بنعبئة مستطيل البنر باللون المتدرج كما بالصوره
http://www.traidnt.net/up//traidnt/temp7.jpg

8-شاهد نتيجة عملنا السابق....
نقوم بعمل نسخه اخرى من المستطيل الاول الرمادي وهو الحد العلوي للبنر
http://www.traidnt.net/up//traidnt/temp8.jpg

9-نعمل نسخه اخرى من المستطيل الاول كما ذكرنا ..بالضغط بزر الماوس اليمين
على الطبقه...كما بالصوره
http://www.traidnt.net/up//traidnt/temp9.jpg

10- الان يكون عندنا نسخه من الحد العلوي
http://www.traidnt.net/up//traidnt/temp10.jpg


11-نقوم الان بسحب الحد اللي سوينا له نسخه الى اسفل البنر
عشان يكون حد ثاني للبنر
http://www.traidnt.net/up//traidnt/temp11.jpg


12-هذه عملية السحب والصوره توضح
http://www.traidnt.net/up//traidnt/temp12.jpg


13- فيكون عندنا هذا الشكل بعد كل الخطوات التي عملناها
http://www.traidnt.net/up//traidnt/temp13.jpg



يتبع

[احمد مصطفى]

اخواني:
هذا الدرس تكملة

14- الان نقوم بعملية مؤثر الباترن وتعبئة البنر..كما بالصوره
http://www.traidnt.net/up//traidnt/temp14.jpg

15-نقوم بانشاء صندوق محتويات لروابط او ازرار او نصوص
http://www.traidnt.net/up//traidnt/temp15.jpg

16-الان نرسم رأس الصندوق كما بالصوره
http://www.traidnt.net/up//traidnt/temp16.jpg

17-تكملة تصميم رأس الصندوق
http://www.traidnt.net/up//traidnt/temp17.jpg


18-الان نقوم بنسخ نفس مؤثرات اللي سويناها على احد الحدين..كما بالصوره
http://www.traidnt.net/up//traidnt/temp18.jpg


19-الان ننشئ طبقه لنرسم عليها مستطيل في الجزء اليمين لرأس الصندوق..كما بالصوره
http://www.traidnt.net/up//traidnt/temp19.jpg

20-فينتج لنا هذا الشكل كما بالصوره
http://www.traidnt.net/up//traidnt/temp20.jpg


21- نقوم بتعبئته باللون اللي يناسبك وانا اخترت البني القريب من البنر
http://www.traidnt.net/up//traidnt/temp21.jpg


22- نقوم الان بعمل مؤثرات على الرسم اللي رسمنا...كما بالصوره
http://www.traidnt.net/up//traidnt/temp22.jpg

23-الان نقوم بعمل كما بالصوره
http://www.traidnt.net/up//traidnt/temp23.jpg


ارجو انكم استفدتو

يتبع

[احمد مصطفى]

http://www.designeralmassgroup.zorba1.com/vb/images/smilies/smile.gifالسلام عليكم


هذا الدرس الثالث من دروس تصميم موقع كامل من الألف الى الياء ؟؟؟
1-نقوم بانشاء مجلد مخزن الطبقات..لنجمع طبقات المحتوي
فيه بحيث نستطيع عمل منه نسخه اخرى بدل تصميمه من جديد
ليكون عندنا صندوق محتوى ثانى

http://www.traidnt.net/up//traidnt/temp24.gif

2-الان لديك مجلد الطبقات والطبقات بداخله...والشكل يوضح

http://www.traidnt.net/up//traidnt/25.gif


3- لعمل نسخه من صندوق المحتوى نضغط على زري
ctrl+j فينشئ لنا نسخه منه نسحبها بالاسهم الى اقصى اليسار لتكون لنا صندوق اخر

http://www.traidnt.net/up//traidnt/26.gif


4-ننشئ مجلد خازن طبقات وذلك لنصنع الصندوق الكبير اللي بيجي في الوسط

http://www.traidnt.net/up//traidnt/27.gif


5-لصنع صندوق المحتوى الكبير نعمل كما عملنا في الصندوق الاول
وكيف انشأناه طبعا بيكون العرض فيه اكبر بشوي
وباقي الامور زي ماهي

http://www.traidnt.net/up//traidnt/28.gif


6- الان جاء دور الفوتر ولتصميمه اعمل كما بالصوره التاليه

http://www.traidnt.net/up//traidnt/29.gif


انتهى

أرجو أن تكونوا قد أستفدوتم

[ليدى المنتدى]

شكرا على مجهودك الرائع