السلام عليكم

اسف عن الغياب الطويل عن المدونة ولكني كنت مشغولا بأعادة تصميم القالب,

واليوم لدينا درس تصميم موقع بالفوتوشوب وسنتعلم بعد ذلك كيفية تكويده بأحدث الطرق العالمية بلغة html/css لنبدا اذا الدرس:

1- نعمل عمل جديد بالفوتوشوب بقياس 1100*900 px :

2- نعمل guide جديد من خلال الذهاب الى veiw-new guide ونكتب كما في الصورة:

3- نعمل تحديد جديد بقياس 1100*6 px كما في الصورة :

4- نملاه بهذا اللون #cee169

5- نعمل الهيدر بأستخدام اداة Rounded Rectangle tool ونملأه باللون #3b3b3b كما في الصورة :

6- الان ضع شعارك على الهيدر و شعارك الجانبي وضع له الاستايل التالي بالالوان 97ae2b#وd0e36c# كما في الصورة :

7- الان سنعمل قائمة الروابط ولذلك تعمل مستطيل جديد بقياس 1100*55 px ونعمل له الاستايلات التالية ونستخدم نفس الالوان السابقة :

8- الان نعمل ازرار الروابط عن طربق اداة Rounded Rectangle tool ونضع لها هذا اللون 232323# :

9- ننسخ هذا الزر عن طريق ضغط ctrl+j ونضع له الاستايل التالي:

10- ننسخ

الازرار على عدد ما نرغب.

11- نكتب ما نريد في الصفحة :

12- نعمل خط فاصل بالاعدادات الاتية :

13- نضع ما نريد انا وضعت مجموعة من القوائم ثم وضعت ايقونات للمشاركة :

14- الان نعمل الفوتر وذلك عن طريق اداة المستطيل نعمل مستطيل بعرض الموقع وبأرتفاع 44 px وباللون 232323# :

15- نضيف له الستايل التالي :

النتيجة النهائية:

ولاي استفسار او سؤال اترك تعليق.

الوسوم: css, تحويل, تصميم, جميل, درس, دروس, شركة, فوتوشوب