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

شبكة ابن الخليج

Sitemap | Archive | Tag Could
معهد مطور - ينتهي الإعلان بتاريخ 16\10\2008
التسجيلالبحثمشاركات اليوماجعل جميع المنتديات مقروءةالأرشيف

منتديات نظرة حب - ينتهي الاعلان بتاريخ 6\11\2008جديد برامج وأخبار الالعابالرَّقائق دعوة لترقيق القلوب - ينتهي الاعلان بتاريخ 6\11\2008
كل مايخص المرأة والمجتمعاجمل واروع الصورنغمات إنتظار الشادي - ينتهي الاعلان بتاريخ 6\11\2008

[متوسط] درس تصميم موقع كالمجله بكل دقة

مناقشة موضوع [متوسط] درس تصميم موقع كالمجله بكل دقة في دروس فوتوشوب Adobe Photoshop; كيفية عمل موقع كالمجله افتح الفتوشوب ثم اضغط على file ثم new ثم ضع المقاسات المطلوبه 770 في 600 واضغط على ok . اضف طبقه جديده . اختار الاداة الموضحه بالصوره Rounded Rectangle tool ثم قم بعمل اطار بالعم ...

العودة شبكة ابن الخليج> منتديات تعليمية> دروس رسم و تصميم> دروس فوتوشوب Adobe Photoshop

رد
 
LinkBackأدوات الموضوعطرق مشاهدة الموضوع
قديم 03-01-2007, 01:53 مساءً   #1 (permalink)
.::+: Gulf Son :+::.

 
الصورة الرمزية ADMIN
 
تاريخ التسجيل: May 2005
الدولة: بلاد الخليج
المشاركات: 50,471
معدل تقييم المستوى: 53ADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيط
إرسال رسالة عبر مراسل ICQ إلى ADMINإرسال رسالة عبر مراسل MSN إلى ADMIN
[متوسط] درس تصميم موقع كالمجله بكل دقة


كيفية عمل موقع كالمجله


افتح الفتوشوب ثم اضغط على file ثم new ثم ضع المقاسات المطلوبه 770 في 600 واضغط على ok .
 دروس فوتوشوب   دروس محترفة   دروس Adobe Photoshop  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس رسم بالفوتوشوب   تعلم الفوتوشوب   فلاتر فوتوشوب    دروس فوتوشوب 8

اضف طبقه جديده .
   دروس Photoshop  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب   دروس فوتوشوب فيديو   دروس فوتو شوب   دروس فوتوشوب   تعلم الفوتوشوب

اختار الاداة الموضحه بالصوره Rounded Rectangle tool ثم قم بعمل اطار بالعمل مع ترك فراغات يمين ويسار وفوت وتحت

الطبقه الأولى
 دروس فوتوشوب فيديو   دروس الرسم بالفوتوشوب   تحميل فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس التصميم بالفوتوشوب   دروس التصميم بالفوتوشوب   فلاتر فوتوشوب   تعلم الفوتوشوب   دروس رسم بالفوتوشوب
 دروس فوتوشوب   دروس محترفة   دروس فوتو شوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس التصميم بالفوتوشوب   دروس فلاتر فوتوشوب   دروس رسم بالفوتوشوب   دروس فوتو شوب   دروس فوتوشوب فيديو

ثم اضغط كلك يمين على اسم الطبقه واختار Blending Opitions وسيظهر لك نافذة التأثيرات اعمل القيم كما هو موضح لك بالصور

التاليه >>> وأهم شي لاتنسى انك تحفظ الاستايل بعدما تنتهي من وضع القيم والحفظ يكون بالضغط على New style ومن ثم ستجده

بنافذة الاستايلات بالاسفل .
 دروس فوتوشوب متوسطة   دروس محترفة   دروس فوتوشوب 8  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتو شوب   دروس فوتو شوب  دروس فوتوشوب للمبتدئين   دروس Photoshop   دروس فوتوشوب

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

 دروس فوتو شوب   دروس Adobe Photoshop   دروس فوتوشوب فيديو  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فلاتر فوتوشوب  دروس فوتوشوب للمبتدئين   دروس فوتوشوب متقدمة   دروس محترفة   دروس فوتوشوب

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

ثم اختر اداة التحديد وقم بتحديده العمل من اعلى كما هو مبين لك بالصوره
 دروس Photoshop   دروس فوتو شوب   دروس فوتوشوب 8  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب متوسطة   دروس Photoshop   دروس الرسم بالفوتوشوب    دروس Adobe Photoshop

ثم اختر اداة التدرج وقم باختيار الالوان المناسبه للتصميم واسحب من اعلى الى اسفل التحديد ليظهر لك النتيجه كما بالصوره .
 تعلم الفوتوشوب   فلاتر فوتوشوب   دروس التصميم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب متوسطة   دروس فوتوشوب 8   دروس فوتوشوب متوسطة   دروس فوتو شوب   دروس Photoshop
الحين طال عمرك تذكر يوم قلنا احفظ الاستايل اللي راح يصير بنافذة الاستايلات بالاسفل !! الحين وصل دوره بالشغل راح يكون شكله

بالنافذه كما بالصوره .
 دروس فوتوشوب فيديو   دروس الرسم بالفوتوشوب   تحميل فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب فيديو   تعلم الفوتوشوب   دروس Adobe Photoshop   دروس Adobe Photoshop   دروس فوتوشوب مبتدئين

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

ثم اضغط على صورة الطبقه الثانيه كلك يمين واختار select layer transparency راح يتم تحديد الطبقه الثانيه بأكملها ...
 دروس التصميم بالفوتوشوب   دروس محترفة   دروس Photoshop  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتو شوب   تعلم الفوتوشوب   دروس Photoshop   دروس فوتوشوب متقدمة   دروس احترافية

ثم اذهب الى قائمة select بالاعلى واختر منها inverse راح ينقلب التحديد معانا ثم اذهب الى نافذة الطبقات واضغط على الطبقه

الثالثه ((طبقة التحديد اللي عملناه بالاعلى)) ثم اذهب الى قائمة Edit واختر منها Cut راح تلاحظ ان الشكل اصبح اكثر اناقه من

السابق شاهد الصوره .
 دروس التصميم بالفوتوشوب   دروس فوتوشوب متوسطة   دروس التصميم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة دروس فوتوشوب للمبتدئين   دروس Photoshop   دروس فلاتر فوتوشوب   دروس Photoshop   دروس التصميم بالفوتوشوب

والحين طال عمره أضف طبقه جديده كما بالصوره
 دروس فوتوشوب متقدمة   دروس فوتوشوب 8   دروس فوتوشوب 8  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتو شوب   دروس الرسم بالفوتوشوب   دروس رسم بالفوتوشوب   دروس الرسم بالفوتوشوب   دروس Adobe Photoshop

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

اعلى الى اسفل .
 تعلم الفوتوشوب   دروس فوتوشوب متقدمة   دروس Photoshop  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس رسم بالفوتوشوب   دروس فوتو شوب   دروس فوتوشوب مبتدئين   فلاتر فوتوشوب   دروس فوتوشوب

وسيصبح هكذا
 دروس فلاتر فوتوشوب   دروس التصميم بالفوتوشوب   تعلم الفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس رسم بالفوتوشوب   دروس فوتو شوب   دروس Photoshop   دروس فوتوشوب متقدمة   دروس فوتوشوب

الحين طال عمر روح لنافذة الاستايلات واضغط على الاستايل اللي حفظناه
 دروس فوتوشوب 8   دروس فوتوشوب متوسطة   دروس فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس الرسم بالفوتوشوب   دروس التصميم بالفوتوشوب   تحميل فوتوشوب   دروس Photoshop   دروس فوتوشوب متوسطة

سيصبح بهذا الشكل
 دروس فوتوشوب متقدمة   دروس الرسم بالفوتوشوب   دروس فوتوشوب 8  [متوسط] درس تصميم موقع كالمجله بكل دقة  فلاتر فوتوشوب   دروس Photoshop   دروس رسم بالفوتوشوب

والحين روح للطبقه الثانيه بنافذة الطبقات واضغط كلك يمين واختار select layer transparency راح يتم تحديد الطبقه الثانيه

بأكملها ...
 تحميل فوتوشوب   دروس Photoshop   دروس الرسم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة دروس فوتوشوب للمبتدئين   دروس الرسم بالفوتوشوب  دروس فوتوشوب للمبتدئين   دروس فوتوشوب   دروس فوتوشوب متقدمة

ثم اذهب الى قائمة select بالاعلى واختر منها inverse راح ينقلب التحديد معانا ثم اذهب الى نافذة الطبقات واضغط على الطبقه

الرابعه ((طبقة التحديد اللي عملناه بالأسفل)) ثم اذهب الى قائمة Edit واختر منها Cut راح تلاحظ ان الشكل اصبح اكثر اناقه من

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

والحين انتهينا من تصميم الشكل الاساسي للعمل ان شاء الله ... نروح على طووول ونضغط على قائمة file ثم save as وتظهر لك

نافذة الحفظ اولا اختر امتداد الحفظ للصوره كما مبين لك بالرقم ((1)) ثم قم بتسميته الى اي اسم تريد كما بالرقم ((2)) ثم اضغط على

الزر save كما بالرقم ((3)) .
 دروس فوتوشوب 8   دروس رسم بالفوتوشوب   دروس محترفة  [متوسط] درس تصميم موقع كالمجله بكل دقة دروس فوتوشوب للمبتدئين   فلاتر فوتوشوب   فلاتر فوتوشوب   دروس فوتوشوب متوسطة   دروس فوتوشوب



ثم ستشاهد ام تم حفظ التصميم كصوره بالمكان الذي حفظتها به >> انظر شكل التصميم ..
دروس فوتوشوب للمبتدئين   دروس محترفة   دروس الرسم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس Photoshop   دروس فوتوشوب متوسطة   دروس الرسم بالفوتوشوب   دروس فوتو شوب   دروس فوتو شوب

الآن اذهب الى قائمة file واضغط على open واختار الصوره اللي حفظتها ... راح فتح التصميم كاملا بشاشة الكمبيوتر لديك !!
الحين من صندوق الادوات اختر اداة التحديد المربع وقم بتحديد البنر العلوي كامل كما بالصوره
 دروس فلاتر فوتوشوب   دروس احترافية   دروس Photoshop  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب متوسطة   دروس فلاتر فوتوشوب   دروس فوتوشوب متوسطة   دروس الرسم بالفوتوشوب   دروس احترافية
ثم نذهب الى قائمة Edit ونختار Cut
ثم اذهل لقائمة file واختر New واضغط ok !!
راح تلاحظ بأن النافذه التي ظهرت لك بها مقاسات خاصه وهي مقاسات التحديد اللي قمنا بقصه لأن الفوتوشوب سيقوم بإعطائنا

نفس مقاسات التحديد اذا قمنا بنسخه او قصّه لذلك لاعليك الا ان تضغط ok .
 تعلم الفوتوشوب   دروس فوتوشوب مبتدئين   دروس فوتوشوب فيديو  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس رسم بالفوتوشوب   دروس الرسم بالفوتوشوب   دروس فوتوشوب متقدمة   دروس فلاتر فوتوشوب   دروس التصميم بالفوتوشوب

الآن اذهب الى قائمة Edit واختر Paste وراح تشوف ان التحديد اللي حددناه وقصّيناه اصبح جاهز عندنا بدون زياده ولا نقصان

وبدون اي مشاكل .... وهو الآن بمثابة الشكل العلوي للتصميم .... ونقوم بحفظه بإسم header ونختار الامتداد jpg .
 تعلم الفوتوشوب  دروس فوتوشوب للمبتدئين   دروس التصميم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس محترفة   تعلم الفوتوشوب   تحميل فوتوشوب   دروس فوتوشوب 8   تعلم الفوتوشوب

والآن نرجع لتصميمنا الاساسي ونقوم بتحديد التصميم من الأسفل ثم نذهب الى قائمة Edit ونختار Cut ثم اذهل لقائمة file واختر

New واضغط ok كما فعلنا سابقا .... ثم نذهب الى قائمة Edit ونختار Paste يعني نلصق اللي قصّيناه من التصميم ... ويصبح كما

بالصوره التاليه
 دروس Adobe Photoshop   دروس التصميم بالفوتوشوب  دروس فوتوشوب للمبتدئين  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب مبتدئين   دروس Adobe Photoshop   دروس فوتو شوب   دروس الرسم بالفوتوشوب   تحميل فوتوشوب
ثم نقوم بحفظه بإسم footer ونختار الامتداد jpg .

وايضا نرجع لتصميمنا الاساسي ونقوم بتحديد صغير بحيث يكون بعرض التصميم كاملا وبإرتفاع صغير كهذا التحديد
 فلاتر فوتوشوب   دروس فلاتر فوتوشوب   دروس Photoshop  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس Adobe Photoshop   دروس التصميم بالفوتوشوب   دروس احترافية   تحميل فوتوشوب   دروس فوتوشوب فيديو
ثم نذهب الى قائمة Edit ونختار Cut ثم اذهل لقائمة file واختر New واضغط ok ثم نذهب الى قائمة Edit ونختار Paste وينتج

معانا مثل هذا
 دروس فوتوشوب   دروس محترفة   دروس فوتوشوب 8  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس محترفة   دروس رسم بالفوتوشوب   دروس فوتوشوب   دروس فوتوشوب متوسطة   دروس فوتوشوب مبتدئين
ونقوم بحفظه بإسم bottom ونختار الامتداد jpg .

ستلاحظ الآن أن اصبح لدينا 3 صور للتصميم هي :

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

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

الشكل السفلي
دروس فوتوشوب للمبتدئين   تحميل فوتوشوب   دروس رسم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس التصميم بالفوتوشوب   دروس رسم بالفوتوشوب   دروس فوتوشوب فيديو   دروس فوتوشوب 8   دروس محترفة

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

الى نتيجه مرضيه .

عملية تقصيص التصميم

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

المتصفح لــذلك لابد من التركيز في هذه النقطه بشكل قوي .

الحين روح لقائمة window ثم اختر منها info ((نافذة مقاسات التصميم)) من خلالها تستطيع تقطيع التصميم بدقه فائقه وبأحجام

متساويه وللعلم النافذه هذي هي اللي نعتمد عليها بجميع تصاميمنا بأخذ المقاسات بدقه متناهيه ... انظر الصوره
 دروس فوتو شوب   دروس فوتوشوب مبتدئين   دروس التصميم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس احترافية   دروس Adobe Photoshop   تحميل فوتوشوب   دروس فوتو شوب   دروس فوتوشوب متقدمة
الرقم 1 هو عرض التحديد .
الرقم 2 هو ارتفاع التحديد .
اذا مافهمت شنو نقصد راح تفهم معانا حاليا .......

اضغط على قائمة File ثم open ثم افتح الصوره اللي حفظناها بإسم header تبع الشكل العلوي ... ثم اختر اداة التحديد
 دروس فوتو شوب   تعلم الفوتوشوب   تحميل فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  تحميل فوتوشوب   دروس التصميم بالفوتوشوب   دروس احترافية   دروس Adobe Photoshop   دروس محترفة
ثم قم بتحديد الشكل العلوي من اليسار واسحبه الى اليمين قليلا كما بالصوره
 دروس Adobe Photoshop   دروس فوتوشوب متوسطة   دروس الرسم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتو شوب   دروس الرسم بالفوتوشوب   دروس فوتوشوب متقدمة   دروس Adobe Photoshop   دروس الرسم بالفوتوشوب
ولاحظ أن لابد من حفظ المقاسات التي بالنافذه لطول وعرض التحديد او اكتب المقاسات بالقلم على ورقه جانبيه حتى لا تنسى .

ثم اذهب الى قائمة Edit واختر Cut ثم اذهب الى قائمة File واختر New ثم اضغط من النافذه التي ستظهر لك ok ثم اذهب الى قائمة

Edit واختر منها Paste ... وسيظهر لنا هكذا

 دروس Adobe Photoshop   دروس فوتو شوب   دروس Photoshop  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب   دروس رسم بالفوتوشوب   دروس الرسم بالفوتوشوب   دروس فوتوشوب مبتدئين   دروس احترافية

والآن احفظ الصوره بالضغط على file ثم save as واعطه اسم hl وقائمة format اختر منها الامتداد الموضح بالصوره
  دروس فوتوشوب 8   دروس فوتوشوب 8  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس Photoshop   دروس فوتوشوب متوسطة   دروس Adobe Photoshop   دروس فوتوشوب فيديو  دروس فوتوشوب للمبتدئين

ثم قم بتحديد الجزء الأيمن من الشكل واعطه نفس مقاسات الجزء الأيسر اللي قلنا لك احفظها بورقه جانبيه كما هذه الصوره
دروس فوتوشوب للمبتدئين   دروس احترافية   دروس فوتوشوب متوسطة  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب للمبتدئين   دروس فوتوشوب مبتدئين   دروس فوتوشوب متقدمة   دروس الرسم بالفوتوشوب
ثم اذهب الى قائمة Edit واختر Cut ثم اذهب الى قائمة File واختر New ثم اضغط من النافذه التي ستظهر لك ok ثم اذهب الى قائمة

Edit واختر منها Paste ... وسيظهر لنا هكذا

 دروس محترفة   تعلم الفوتوشوب   دروس محترفة  [متوسط] درس تصميم موقع كالمجله بكل دقة  تعلم الفوتوشوب   دروس Photoshop   تعلم الفوتوشوب   دروس فوتوشوب مبتدئين   دروس محترفة

ثم قم بحفظ الصوره بإسم hr .

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

بالصوره
 دروس التصميم بالفوتوشوب   دروس الرسم بالفوتوشوب   دروس فوتوشوب مبتدئين  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس الرسم بالفوتوشوب   دروس فوتوشوب   فلاتر فوتوشوب   دروس فوتوشوب متوسطة   دروس فوتوشوب
ثم اذهب الى قائمة Edit واختر Cut ثم اذهب الى قائمة File واختر New ثم اضغط من النافذه التي ستظهر لك ok ثم اذهب الى قائمة

Edit واختر منها Paste ... وسيظهر لنا هكذا

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

ثم قم بحفظ الصوره بإسم hb .

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

تمدد للتصميم لا يتشوه نهائيا ... تابع التحديد بالصوره
  دروس فوتوشوب 8   فلاتر فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة دروس فوتوشوب للمبتدئين   دروس فوتوشوب فيديو   دروس فوتو شوب   دروس الرسم بالفوتوشوب   دروس فوتو شوب
ثم اذهب الى قائمة Edit واختر Cut ثم اذهب الى قائمة File واختر New ثم اضغط من النافذه التي ستظهر لك ok ثم اذهب الى قائمة

Edit واختر منها Paste ... وسيظهر لنا هكذا

 دروس التصميم بالفوتوشوب   تحميل فوتوشوب   [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب   دروس فلاتر فوتوشوب   دروس فوتوشوب 8   دروس فوتوشوب مبتدئين   دروس محترفة

ثم قم بحفظ الصوره بإسم hback .

والآن انتهينا من تقطيع الشكل العلوي للتصميم واصبح لدينا 4 صور خاصه بالشكل العلوي وهي كالتالي :

 دروس التصميم بالفوتوشوب   فلاتر فوتوشوب   تعلم الفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فلاتر فوتوشوب   دروس محترفة   دروس فوتوشوب   دروس فوتوشوب فيديو   دروس Adobe Photoshop

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

 تعلم الفوتوشوب   دروس Adobe Photoshop  دروس فوتوشوب للمبتدئين  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس محترفة   دروس فوتوشوب متقدمة   دروس الرسم بالفوتوشوب   دروس فوتوشوب فيديو   دروس فوتوشوب متوسطة

 دروس فوتوشوب فيديو   دروس فوتوشوب مبتدئين   [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس Photoshop   فلاتر فوتوشوب   دروس فوتوشوب 8   دروس فوتوشوب فيديو   دروس فوتوشوب فيديو



والآن بعدما انتهينا من الشكل العلوي راح نأخذ الشكل السفلي ونقطعه كما فعلنا بالشكل العلوي تماما !!!

اضغط على قائمة File ثم open ثم افتح الصوره اللي حفظناها بإسم footer تبع الشكل السفلي ... ثم اختر اداة التحديد
 تحميل فوتوشوب   دروس محترفة   دروس Photoshop  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس Adobe Photoshop   دروس فوتوشوب مبتدئين   دروس التصميم بالفوتوشوب   دروس فلاتر فوتوشوب   فلاتر فوتوشوب
وحدد الجزء الأيسر ولابد أن يكون عرض التحديد بنفس العرض اللي عملناه للشكل السابق واللي حفظناه بورقه خارجيه ... تابع

الصوره
 دروس فوتوشوب متقدمة  دروس فوتوشوب للمبتدئين   دروس احترافية  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب متوسطة   فلاتر فوتوشوب   دروس فوتوشوب مبتدئين   دروس فوتوشوب متوسطة   دروس محترفة
ثم اذهب الى قائمة Edit واختر Cut ثم اذهب الى قائمة File واختر New ثم اضغط من النافذه التي ستظهر لك ok ثم اذهب الى قائمة

Edit واختر منها Paste ... وسيظهر لنا هكذا

 دروس رسم بالفوتوشوب   دروس فوتوشوب متوسطة   دروس التصميم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  تحميل فوتوشوب   فلاتر فوتوشوب   دروس فوتوشوب 8   دروس Photoshop   دروس فوتوشوب متوسطة

ثم قم بحفظ الصوره بإسم fl .

ثم حدد الجزء الأيمن من الشكل واعطه العرض كما بالشكل التالي :
 فلاتر فوتوشوب   دروس Photoshop   دروس فوتوشوب 8  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس محترفة   دروس الرسم بالفوتوشوب   تعلم الفوتوشوب   دروس فوتوشوب   دروس فوتوشوب مبتدئين
ثم اذهب الى قائمة Edit واختر Cut ثم اذهب الى قائمة File واختر New ثم اضغط من النافذه التي ستظهر لك ok ثم اذهب الى قائمة

Edit واختر منها Paste ... وسيظهر لنا هكذا

 دروس Adobe Photoshop   دروس فوتوشوب متوسطة   دروس التصميم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس رسم بالفوتوشوب   تعلم الفوتوشوب   دروس محترفة   دروس فوتوشوب مبتدئين   دروس فوتو شوب

ثم قم بحفظ الصوره بإسم fr .

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

ذلك حسب رغبتك ... تابع التحديد
 دروس احترافية   دروس فوتو شوب   دروس فوتوشوب 8  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس Photoshop   دروس Adobe Photoshop   دروس فوتوشوب متقدمة   فلاتر فوتوشوب   دروس فوتو شوب
ثم اذهب الى قائمة Edit واختر Cut ثم اذهب الى قائمة File واختر New ثم اضغط من النافذه التي ستظهر لك ok ثم اذهب الى قائمة

Edit واختر منها Paste ... وسيظهر لنا هكذا

 دروس الرسم بالفوتوشوب   دروس فوتوشوب مبتدئين  دروس فوتوشوب للمبتدئين  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب 8   فلاتر فوتوشوب   دروس Photoshop   دروس محترفة   دروس فوتوشوب متقدمة

ثم قم بحفظ الصوره بإسم fb .

والآن نقوم بتحديد جزء عرضه صغير حتى نقوم بجعله خلفيه للفوتر سيفيدنا بالتمدد وحتى يمنع التشوه ... تابع التحديد :
 دروس محترفة   دروس فلاتر فوتوشوب   دروس رسم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  تعلم الفوتوشوب   دروس الرسم بالفوتوشوب   دروس احترافية   دروس فوتوشوب متوسطة   دروس فوتوشوب
ثم اذهب الى قائمة Edit واختر Cut ثم اذهب الى قائمة File واختر New ثم اضغط من النافذه التي ستظهر لك ok ثم اذهب الى قائمة

Edit واختر منها Paste ... وسيظهر لنا هكذا

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

ثم قم بحفظ الصوره بإسم fback .


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

 تحميل فوتوشوب   دروس رسم بالفوتوشوب   دروس فوتوشوب 8  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب 8   تحميل فوتوشوب   تعلم الفوتوشوب   دروس Adobe Photoshop   دروس فوتوشوب فيديو

 دروس فوتوشوب متقدمة   دروس الرسم بالفوتوشوب   فلاتر فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب   دروس فلاتر فوتوشوب   دروس فوتو شوب   دروس فوتوشوب 8  دروس فوتوشوب للمبتدئين

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

  دروس فوتوشوب فيديو   دروس محترفة  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس Adobe Photoshop   دروس الرسم بالفوتوشوب   تحميل فوتوشوب   دروس فوتوشوب مبتدئين   دروس فوتوشوب مبتدئين



والحين شنو بقى لنا ما قطّــعناه ؟
بقى طال عمرك شكل المنتصف وهو أسهل مرحله من التقطيع !!!

اضغط على قائمة File ثم open ثم افتح الصوره اللي حفظناها بإسم bottom تبع الشكل السفلي ... ثم اختر اداة التحديد
 دروس فوتوشوب فيديو   دروس فوتوشوب فيديو   فلاتر فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس احترافية   دروس محترفة    دروس فوتو شوب   دروس رسم بالفوتوشوب

قم بتحديد الجزء الأيسر كما تعودنا سابقا >>> لاحظ لابد وأن يكون العرض بنفس المقاس اللي حفظناه <<< تذكــر شنو قلنا .
 دروس الرسم بالفوتوشوب   دروس التصميم بالفوتوشوب   دروس محترفة  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب متوسطة   دروس فوتوشوب   دروس احترافية   دروس فوتوشوب متوسطة   دروس رسم بالفوتوشوب
ثم اذهب الى قائمة Edit واختر Cut ثم اذهب الى قائمة File واختر New ثم اضغط من النافذه التي ستظهر لك ok ثم اذهب الى قائمة

Edit واختر منها Paste ... وسيظهر لنا هكذا

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

ثم قم بحفظ الصوره بإسم left .


والآن قم بتحديد الشكل من الجزء الأيمن وايضا بنفس العرض كما بالصوره :
 دروس رسم بالفوتوشوب   دروس Adobe Photoshop  دروس فوتوشوب للمبتدئين  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتو شوب   دروس فوتوشوب 8   دروس فوتوشوب مبتدئين   دروس الرسم بالفوتوشوب   تعلم الفوتوشوب
ثم اذهب الى قائمة Edit واختر Cut ثم اذهب الى قائمة File واختر New ثم اضغط من النافذه التي ستظهر لك ok ثم اذهب الى قائمة

Edit واختر منها Paste ... وسيظهر لنا هكذا

 تحميل فوتوشوب  دروس فوتوشوب للمبتدئين   دروس Adobe Photoshop  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس Adobe Photoshop  دروس فوتوشوب للمبتدئين   دروس محترفة   دروس فوتوشوب   دروس الرسم بالفوتوشوب

ثم قم بحفظ الصوره بإسم right .


والآن انتهينا من تقطيع شكل المنتصف >> أرأيت ما أسهله << ونتج لدينا صورتان فقط !! وهما كالتالي :

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

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


وأبشرك الحين انتهينا من التقطيع ودووووووخة الراس ولله الحمد ... وبقى عندنا شلون نركب الصور اللي قطعناها بحيث يصبح

التصميم كشكل المجله .

لااااااااااااا تستعجل على رزقك كل شي بوقته حلوووو وجااااااي بالطريق كل شي ان شاء الله ... تابع معنا

الحين روح الى برنامج الفرونت بيج وافتحه
Microsoft FrontPage
اضغط كلك يمين بمنتصف الصفحه واختر خصائص الصفحه
 دروس فوتوشوب 8   دروس فوتو شوب   دروس فوتوشوب 8  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب فيديو   دروس Adobe Photoshop   دروس رسم بالفوتوشوب   دروس فوتوشوب متقدمة   دروس فوتوشوب 8
ثم من التبويب عام اكتب اسم موقعك كما مبين لك بالصوره
 دروس التصميم بالفوتوشوب   فلاتر فوتوشوب   دروس رسم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس التصميم بالفوتوشوب   دروس Photoshop   دروس محترفة   دروس Photoshop   دروس فوتوشوب مبتدئين
ستظهر لك نافذه اختر منها التبويب هوامش واعمل كما مبين لك بالصوره ثم اضغط على موافق
 دروس فلاتر فوتوشوب   دروس التصميم بالفوتوشوب   دروس فوتوشوب فيديو  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب فيديو   دروس فوتوشوب متقدمة   دروس فوتوشوب مبتدئين   تعلم الفوتوشوب   دروس فلاتر فوتوشوب
ثم اضفط على صورة اضافة الجداول وتضيف جدول ذو 9 خانات بحيث يكون 3 بالاعلى و 3 بالمنتصف و 3 بالاسفل شاهد الصوره
دروس فوتوشوب للمبتدئين   تعلم الفوتوشوب  دروس فوتوشوب للمبتدئين  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فلاتر فوتوشوب   دروس فلاتر فوتوشوب   دروس فوتو شوب    دروس فوتو شوب
ثم اضغط كلك يمين بمنتصف الجدول واختر خصائص الجدول
 تحميل فوتوشوب   دروس فوتوشوب 8   دروس الرسم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب مبتدئين    فلاتر فوتوشوب   فلاتر فوتوشوب   دروس رسم بالفوتوشوب
ثم اعمل خصائص الجدول كما مبين لك بالصوره التاليه
 دروس محترفة   دروس فوتوشوب 8   دروس Adobe Photoshop  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب فيديو   دروس احترافية   دروس احترافية   تحميل فوتوشوب   دروس فوتوشوب 8
سوف يصبح الجدول هكذا وبدون حدود
 دروس فوتوشوب متقدمة   دروس احترافية   تعلم الفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس الرسم بالفوتوشوب   دروس فوتو شوب   دروس احترافية   دروس فوتوشوب متقدمة   دروس Photoshop
نقوم بسحب العمود الأيمن الى اقصى اليمين وايضا نسحب العمود الأيسر الى اقصى اليسار كما مبين لك بالصوره
 دروس Adobe Photoshop   دروس فوتوشوب متقدمة   تعلم الفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب متوسطة   دروس فوتوشوب مبتدئين   تعلم الفوتوشوب  دروس فوتوشوب للمبتدئين   دروس فوتوشوب متقدمة
وسيصبح شكل الجدول هكذا
 دروس فوتوشوب متوسطة   دروس رسم بالفوتوشوب   دروس فلاتر فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  تحميل فوتوشوب   دروس فوتوشوب مبتدئين   دروس Adobe Photoshop   دروس فوتوشوب فيديو   دروس فلاتر فوتوشوب
ثم نضع الماوس فوق الخانه العلويه اليمنى للجدول ونضعط كلك مره وحده علشان يصير المؤشر بداخل الخليه ثم نختار اداة صوره

بالضغط على الرمز هذا
 دروس الرسم بالفوتوشوب   دروس التصميم بالفوتوشوب   دروس Adobe Photoshop  [متوسط] درس تصميم موقع كالمجله بكل دقة  تحميل فوتوشوب   دروس فوتوشوب متقدمة   دروس فوتوشوب مبتدئين   دروس فوتوشوب متقدمة   دروس رسم بالفوتوشوب
ثم ستظهر نافذة ادراج الصوره ابحث عن الصور اللي حفظناها واختر الصوره hr واضغط ادراج
 دروس فوتو شوب   دروس فوتو شوب   دروس فوتو شوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  تحميل فوتوشوب   دروس فوتوشوب فيديو   دروس فوتوشوب مبتدئين  دروس فوتوشوب للمبتدئين
ثم اذهب وحط الماوس فوق الخليه العلويه اليسرى للجدول واضغط ضغطه واحده علشان يصير المؤشر بداخلها واختر اداة ادراج الصور
 دروس فلاتر فوتوشوب   تحميل فوتوشوب   دروس فوتوشوب متوسطة  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتو شوب   دروس فوتوشوب   دروس فوتوشوب متقدمة   دروس فوتوشوب مبتدئين
ثم اختر الصور اللي عطيناها اسم hl

والآن عزيزي حط الماوس فوق الخليه العلويه بالمنتصف ومن الأعلى اضغط على اداة التوسيط
 تعلم الفوتوشوب   دروس فوتو شوب   تعلم الفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب متوسطة   دروس فوتوشوب متقدمة   دروس محترفة    تعلم الفوتوشوب
ثم اضغط كلك يمين بالخليه اللي بالنص العلويه واختر خصائص الخليه
 دروس فوتوشوب متوسطة   دروس Adobe Photoshop   دروس فلاتر فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس الرسم بالفوتوشوب   دروس رسم بالفوتوشوب  دروس فوتوشوب للمبتدئين   دروس فوتو شوب   دروس احترافية
ثم اضغط على استعراض واختر الصوره اللي بإسم hback
 دروس فوتو شوب   دروس فوتوشوب متوسطة   دروس رسم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس رسم بالفوتوشوب   دروس احترافية   دروس التصميم بالفوتوشوب   دروس رسم بالفوتوشوب   دروس فوتوشوب مبتدئين
والحين حبيبي خلي مؤشر الماوس بالخليه اللي بالنص العلويه واضغط على اداة ادراج الصوره
 تعلم الفوتوشوب   فلاتر فوتوشوب   دروس Adobe Photoshop  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس رسم بالفوتوشوب   دروس فوتوشوب   دروس التصميم بالفوتوشوب   دروس رسم بالفوتوشوب   دروس التصميم بالفوتوشوب
واختر الصوره اللي قلنا عليها تعتبر بنر للشكل العلوي وتكتب عليها اسم موقعك >>> هل تتذكرها ؟؟
تحمل الاسم hb قم باختيارها واضغط على ادراج
والآن انتهينا من تركيب صور الشكل العلوي وستظهر لك كما الشكل التالي :
 دروس فوتوشوب   دروس فوتوشوب مبتدئين   تعلم الفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة دروس فوتوشوب للمبتدئين   دروس فلاتر فوتوشوب   تعلم الفوتوشوب   تحميل فوتوشوب

والآن اضغط كلك بالخليه اليمنى اللي بالمنتصف واختر خصائص الخليه ... ثم اضغط على استعراض واختر الصوره اللي حفظناها بإسم

right وهذه الخليه تفيدنا بأن (( مهما زاد ارتفاع الصفحخ سيتم تعبأة الخليه بهذه الصوره )) .

ثم اضغط كلك يمين بالخليه اليسرى اللي بالمنتصف واختر خصائص الخليه ... ثم اضغط على استعراض واختر الصوره اللي حفظناها

بإسم left .
وشاهد كيف أصبح التصميم :
دروس فوتوشوب للمبتدئين   دروس رسم بالفوتوشوب   دروس الرسم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس التصميم بالفوتوشوب   دروس التصميم بالفوتوشوب   دروس احترافية   دروس فوتوشوب متقدمة   دروس فوتوشوب


والآن نذهب للخليه اليمنى بالأسفل ونحط الماوس فوق الخليه ونضغط بالماوس ضغط واحده حتى يصبح المؤشر بداخل الخليه ثم نختار

اداة ارداج الصور
 دروس التصميم بالفوتوشوب   تحميل فوتوشوب   دروس محترفة  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس محترفة   تعلم الفوتوشوب   دروس فوتوشوب متوسطة   دروس فلاتر فوتوشوب   دروس احترافية
ثم نختار الصوره اللي تحمل الإسم fr ونضغط على ادراج شاااااااااهد كيف اصبحت :
 دروس فلاتر فوتوشوب   تحميل فوتوشوب   دروس فوتوشوب متقدمة  [متوسط] درس تصميم موقع كالمجله بكل دقة  فلاتر فوتوشوب   تعلم الفوتوشوب   تعلم الفوتوشوب   دروس فوتوشوب مبتدئين   دروس رسم بالفوتوشوب

بعدها اذهب وضع الماوس فوق الخليه اليسرى السفليه تمانا واضغط مره واحده في منتصف الخليه حتى يصبح المؤشر بداخل الخليه ثم

اضغط على اداة ادراج الصور
 دروس فوتوشوب متقدمة   دروس فوتوشوب متقدمة   دروس التصميم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة   دروس فوتو شوب   فلاتر فوتوشوب    دروس Photoshop
ثم اختر الصوره اللي تحمل الاسم fl واضغط على ادراج ... وشاهد الآن كيف أصبح الشكل :
 دروس فوتوشوب مبتدئين   دروس الرسم بالفوتوشوب   دروس فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة دروس فوتوشوب للمبتدئين   تحميل فوتوشوب   دروس فوتوشوب 8   دروس فوتوشوب   تعلم الفوتوشوب
ثم بنتصف الخليه السفليه اضغط بالماوس مره واحده حتى يصبح المؤشر بداخل الخليه ثم اذهب واضغط على اداة التوسيط
 دروس فوتوشوب متوسطة   دروس فوتوشوب مبتدئين   دروس Photoshop  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتو شوب   دروس محترفة   تعلم الفوتوشوب   دروس فوتوشوب فيديو   دروس فوتوشوب 8
ثم اضغط كلك يمين بوسط الخليه السفليه واختر خصائص الخليه ثم اضغط على استعراض واختر الصوره اللي تحمل الاسم fback ثم

اضغط موافق .... ستلاحظ ان تم تعبأة الخليه بأكملها واصبحت الصوره اللي اضفناها خلفيه للخليه بأكملها وتفيدنا هذه الصوره بأن

مهما تمدد التصميم او كبرت مقاسات الشاشه راح يتمدد تلقائيا وبدون مشاكل ان شاء الله >>> شاهد الصوره :
 دروس فوتوشوب   دروس فلاتر فوتوشوب   تعلم الفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس رسم بالفوتوشوب   دروس رسم بالفوتوشوب   دروس فوتوشوب متقدمة   دروس Photoshop   تعلم الفوتوشوب
والحين طال عمرك اترك المؤشر بمنتصف الخليه السفليه واضغط على أداة ادراج الصور
 دروس الرسم بالفوتوشوب   دروس فوتو شوب   تعلم الفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس احترافية   دروس رسم بالفوتوشوب   فلاتر فوتوشوب   فلاتر فوتوشوب
واختر الصوره اللي تحمل الأسم fb واذا تتذكر ترانا قلنا هالصوره راح تكون بمثابة بنر سفلي نستطيع كتابة نص الحقوق مثلا او اسم

المصمم او المبرمج وهكــذا ... شاهد الآن كيف أصبح شكل التصميم
 دروس فوتوشوب 8   دروس الرسم بالفوتوشوب   [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب متقدمة   دروس رسم بالفوتوشوب   دروس فوتوشوب   دروس فوتو شوب   تعلم الفوتوشوب


والآن ولله الحمد انتهينا من تركيب الإطار كاملا للمجله >>> وراح تلاحظ بأن لون الصفحه أبيض ومغاير عن لون التصميم !! فما الحل ؟

افتح الفوتوشوب ثم افتح التصميم اللي عملناه ثم من صندوق الأدوات بالاسفل اضغط على اداة ادارة الألوان التي تحمل الرقم 1 بالصوره

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

الكود المحدد بالصوره التاليه
 دروس Adobe Photoshop   دروس فوتوشوب متوسطة   دروس التصميم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  تعلم الفوتوشوب   دروس فوتو شوب   دروس فوتوشوب مبتدئين   تحميل فوتوشوب   تعلم الفوتوشوب
ثم اذهب للفرونت بيج بالصفحه الخاصه بتصميمنا واضغط على HTML
 دروس Photoshop   دروس فلاتر فوتوشوب   دروس فوتوشوب فيديو  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فلاتر فوتوشوب  دروس فوتوشوب للمبتدئين   دروس التصميم بالفوتوشوب   دروس الرسم بالفوتوشوب   دروس الرسم بالفوتوشوب
ستجد الكود التالي
bgcolor="#FFF7DE"
هو لاضافة لون الخلفيه للصفحه ... كل ما عليك فعله هو حذف كود اللون بالكود السابق ولصق كود اللون اللي نسخناه من الفوتوشوب
لاحظ أن كود اللون هو المحدد باللون الأزرق بالصوره التاليه :
 دروس فلاتر فوتوشوب   دروس فوتوشوب 8   تحميل فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب متقدمة   تعلم الفوتوشوب   دروس احترافية   دروس فوتوشوب متقدمة   دروس فوتوشوب متوسطة
ثم ارجع لتصميمنا وستلاحظ انه تم تغيير لون الخلفيه
 دروس فوتوشوب متوسطة   دروس فوتوشوب متقدمة   دروس Adobe Photoshop  [متوسط] درس تصميم موقع كالمجله بكل دقة  فلاتر فوتوشوب  دروس فوتوشوب للمبتدئين   دروس فوتوشوب متقدمة   دروس احترافية   دروس الرسم بالفوتوشوب

ملاحظه : اذا لم تجد كود اللون تستطيع انت كتابته بالشكل التالي :
bgcolor="#FFF7DE"
وضعه بعد كلمة BODY العلويه بحيث سيصبح هكذا كامل الكود :
<body topmargin="0" leftmargin="0" bgcolor="#FFF7DE">

والآن اصبح الاطار جاهزا وأصبحت الألوان متناسقه مع صور التصميم ... كلااااااااام حلو وجميل ويشجع اننا نكمل مع بعض التطبيق .


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

وايضا اين اطار قائمة المحتوياااااات ؟

بس هذا !!
أبشر راح نكمل حديثنا ومااااااااااا قلنا لك ياخوي لا تستعجل على رزقك جايينك بالحجي لا تخاااااااف ..

روح للفوتوشوب وافتح صورة التصميم اللي عملناه أول شي
 دروس الرسم بالفوتوشوب   دروس فوتوشوب متقدمة   دروس فوتوشوب 8  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس احترافية   دروس فلاتر فوتوشوب   دروس فوتوشوب متوسطة   دروس Adobe Photoshop   تعلم الفوتوشوب

ثم اختر الأداة التاليه :
   دروس الرسم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة   دروس رسم بالفوتوشوب   دروس فوتوشوب   دروس Adobe Photoshop   دروس محترفة
ثم قم بعمل مربع ليس كبير ولا صغير يعني متوسط الحجم حتى يكون بمثابة شكل للقائمه ثم نعطيه خصائص الاستايل اللي حفظناه

بنافذة الاستايلات
 دروس فوتو شوب   دروس فوتوشوب مبتدئين   دروس رسم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة   دروس فوتو شوب   تحميل فوتوشوب   تحميل فوتوشوب  دروس فوتوشوب للمبتدئين
وسيصبح شكل المربع كهذا
 دروس Photoshop   دروس فوتوشوب 8   تعلم الفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس Photoshop   دروس احترافية   دروس Adobe Photoshop   دروس فلاتر فوتوشوب   تحميل فوتوشوب
ثم قم بحفظ العمل بالضعط على File ثم save as ثم قم بتسمية الصوره اي اسم ومن امام كملة format اختر الامتداه الموضح لك

بالصوره التاليه بالرقم 1 ثم اضغط على save
 فلاتر فوتوشوب   دروس فوتوشوب   دروس الرسم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس Adobe Photoshop    دروس فوتوشوب   دروس فوتوشوب 8
ثم بعد ذلك افتح الصوره اللي حفظتها بالضغط على File ثم Open ثم اختر الصوره اللي قمت بحفظها للتو ... ثم من صندوق الأدوات

اختر أداة التحديد وقم بتحديد المربع اللي عملناااااااه بمثل هالتحديد
 دروس فوتوشوب   دروس رسم بالفوتوشوب   دروس التصميم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس احترافية   دروس محترفة   دروس Photoshop    دروس فوتوشوب فيديو
ثم من قائمة Edit اختر Cut ثم اذهب الى قائمة File واختر New واضغط على ok مباشرة ولا تغيير بالمقاسات نهائيا ثم اضغط على

قائمة Edit واختر منها Paste وراح تشوف بأن تم لصق المربع اللي حددناه كما هو
 دروس الرسم بالفوتوشوب   دروس رسم بالفوتوشوب   دروس فوتوشوب فيديو  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس محترفة   دروس فوتوشوب فيديو   دروس احترافية   دروس احترافية   دروس رسم بالفوتوشوب
والآن طال عمرك نقوم بتقصيصه ... والتقصيص للمربع من اسهل ما يكون !!

قم بتحديد المربع من الأعلى
 دروس فلاتر فوتوشوب   دروس Adobe Photoshop   دروس فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب مبتدئين   دروس فلاتر فوتوشوب   دروس فوتوشوب فيديو   دروس محترفة   دروس الرسم بالفوتوشوب
ثم من قائمة Edit اختر Cut ثم اذهب الى قائمة File واختر New واضغط على ok مباشرة ثم اضغط على قائمة Edit واختر منها

Paste .
ثم قم بحفظ الصوره بإسم m1 ومن امام خيار format اختر الامتداد jpg .

 دروس Adobe Photoshop   تحميل فوتوشوب   دروس فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس Adobe Photoshop   دروس التصميم بالفوتوشوب   دروس فوتو شوب   دروس Photoshop   دروس فلاتر فوتوشوب

ثم قم بتحديد المربع من الاسفل
 دروس احترافية   دروس فوتو شوب   دروس فوتوشوب 8  [متوسط] درس تصميم موقع كالمجله بكل دقة دروس فوتوشوب للمبتدئين   دروس فوتوشوب متوسطة  دروس فوتوشوب للمبتدئين   فلاتر فوتوشوب   فلاتر فوتوشوب
ثم من قائمة Edit اختر Cut ثم اذهب الى قائمة File واختر New واضغط على ok مباشرة ثم اضغط على قائمة Edit واختر منها

Paste .
ثم قم بحفظ الصوره بإسم m2 ومن امام خيار format اختر الامتداد jpg .

 دروس رسم بالفوتوشوب   دروس فوتوشوب متوسطة   دروس Photoshop  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب 8   دروس رسم بالفوتوشوب   فلاتر فوتوشوب   دروس التصميم بالفوتوشوب   دروس محترفة

ثم قم بتحديد المربع من الوسط
دروس فوتوشوب للمبتدئين   دروس فلاتر فوتوشوب   دروس فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب   دروس Photoshop   دروس فوتوشوب 8   دروس فوتوشوب متقدمة   دروس احترافية
ثم من قائمة Edit اختر Cut ثم اذهب الى قائمة File واختر New واضغط على ok مباشرة ثم اضغط على قائمة Edit واختر منها

Paste .
ثم قم بحفظ الصوره بإسم m3 ومن امام خيار format اختر الامتداد jpg .

 دروس فوتوشوب متوسطة  دروس فوتوشوب للمبتدئين   تحميل فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  تحميل فوتوشوب   دروس فوتو شوب   دروس فوتوشوب 8   دروس رسم بالفوتوشوب   دروس فوتوشوب فيديو

الآن انتهينا من تصميم القائمه ... نرجع الى الفرونت بيج الى صفحتنا اللي قمنا بتركيب التصميم عليها

نضغط بالخليه اللي بالمنتصف حتى يصبح المؤشر بداخله ثم نضيف جدول ذو 3 صفوف
 دروس Photoshop   دروس التصميم بالفوتوشوب   فلاتر فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب مبتدئين    دروس فوتوشوب متقدمة   دروس فوتوشوب متوسطة   دروس رسم بالفوتوشوب
ثم نضغط كلك يمين بداخل الجدول ونختار خصائص الجدول
 دروس الرسم بالفوتوشوب   دروس فوتوشوب 8   دروس التصميم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس Photoshop   تحميل فوتوشوب   دروس رسم بالفوتوشوب   دروس فوتوشوب فيديو   دروس فوتوشوب متوسطة
وتعمل القيم التاليه
 دروس فوتوشوب متقدمة   دروس Adobe Photoshop   [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب فيديو   دروس رسم بالفوتوشوب   دروس فوتوشوب متقدمة   دروس Photoshop   فلاتر فوتوشوب
سيصبح شكل هكذا
 دروس فوتوشوب متقدمة   دروس فوتوشوب 8   دروس احترافية  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب مبتدئين   دروس فوتوشوب مبتدئين   دروس فوتوشوب متقدمة   تحميل فوتوشوب   دروس رسم بالفوتوشوب
ثم بالخليه اللي بالنص اضغط كلك يمين واختر منها تقسيم الخلايا
 تحميل فوتوشوب   دروس احترافية  دروس فوتوشوب للمبتدئين  [متوسط] درس تصميم موقع كالمجله بكل دقة  تحميل فوتوشوب    دروس فوتوشوب متوسطة   دروس فوتوشوب فيديو   دروس Adobe Photoshop
ثم ستظهر لك نافذه اعمل كما مبين لك بالنافذه التاليه ثم اضغط موافق
 دروس محترفة   دروس فوتوشوب 8   دروس محترفة  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس الرسم بالفوتوشوب    دروس فوتو شوب   دروس فوتوشوب فيديو   دروس فوتوشوب متوسطة
وستلاحظ انه تم تقسيم الخليه اللي بالمنتصف الى خليتان !!
ثم قم بسحب العمود اللي يفصل الخليتان الى اليمين حتى يصبح عندنا كما بالشكل التالي :
 دروس محترفة   دروس فوتوشوب فيديو   دروس فلاتر فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  تحميل فوتوشوب   دروس فلاتر فوتوشوب   تعلم الفوتوشوب   دروس احترافية  دروس فوتوشوب للمبتدئين
ثم اضغط كلك يمين بالخليه اليمنى اللي بالمنتصف واختر منها خصائص الخليه ثم ستظهر لك نافذه من امام الخيار محاذاة عموديه اختر

الخيار أعلى هو احفظ التعديل ... وايضا من الخليه اليسري اللي بالمنتصف اضغط كلك يمين واجعل الخيار محاذاة عموديه الى أعلى .
 تحميل فوتوشوب   دروس فوتوشوب 8   دروس فوتوشوب مبتدئين  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس محترفة   دروس محترفة   دروس فوتوشوب متقدمة   تحميل فوتوشوب   دروس الرسم بالفوتوشوب
والآن اجعلى المؤشر بداخل الخليه اليمنى اللي بالمنتصف
  تحميل فوتوشوب   دروس فوتوشوب مبتدئين  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس التصميم بالفوتوشوب   دروس Photoshop   تحميل فوتوشوب   دروس فوتو شوب   دروس فوتوشوب فيديو
ثم اضف جدول ذو 3 خلايا
 دروس فوتوشوب متقدمة   دروس فوتوشوب فيديو   [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب متوسطة   دروس الرسم بالفوتوشوب   دروس فوتوشوب فيديو   دروس Adobe Photoshop   تحميل فوتوشوب
ثم اضغط كلك يمين بداخل الجدول واختر خصائص الجدول واعمل كما مبين لك
 دروس فوتوشوب متوسطة   تحميل فوتوشوب   دروس فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة   دروس فوتوشوب   دروس فوتوشوب فيديو  دروس فوتوشوب للمبتدئين
ثم ستلاحظ انه اصبح هكذا
 تعلم الفوتوشوب   دروس فوتوشوب مبتدئين   دروس فوتوشوب متقدمة  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس Adobe Photoshop   دروس فلاتر فوتوشوب   دروس Adobe Photoshop   دروس فلاتر فوتوشوب   دروس احترافية
والآن بنفس الجدول ومن داخل الخليه السفليه اختر اداة ادراج الصور
 دروس فوتوشوب مبتدئين   دروس Photoshop   دروس محترفة  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس رسم بالفوتوشوب  دروس فوتوشوب للمبتدئين   دروس فوتوشوب فيديو  دروس فوتوشوب للمبتدئين   دروس فوتوشوب متقدمة
ثم اختر الصوره اللي حفظناها عندما قمنا بتقصيص المربع تبع القائمه اللي يحمل الاسم m2 سيصبح هكذا
 تحميل فوتوشوب  دروس فوتوشوب للمبتدئين   دروس الرسم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب فيديو   فلاتر فوتوشوب   دروس فلاتر فوتوشوب   دروس احترافية   دروس فوتوشوب
ثم من الخليه اللي بالنص اضغط كلك يمين من داخلها واختر خصائص الخليه ثم اضغط على استعراض واختر الصوره اللي قمنا بحفظها

بإسم m3 .
ثم ستلاحظ انه تم تعبئة الخليه بكاملها واصبحت الصوره خلفيه للخليه ومهما اصبح تمدد بالخليه فلن يظهر لك سوى الصوره اللي

حطيناها للتو يعني لاااااااااا تخاف من تشوه التصميم ولا اخترابه .
وسيصبح هكذا
 دروس التصميم بالفوتوشوب   دروس فوتوشوب مبتدئين   دروس فلاتر فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس احترافية   تحميل فوتوشوب   دروس فوتوشوب   دروس احترافية   دروس فلاتر فوتوشوب
والآن من الخليه العلويه اضغط كلك يمين من داخلها واختر خصائص الخليه ثم اضغط استعراض واختر الصوره اللي تحمل الاسم m1
 دروس Photoshop    تحميل فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  تحميل فوتوشوب   دروس Photoshop   دروس التصميم بالفوتوشوب   دروس رسم بالفوتوشوب   دروس رسم بالفوتوشوب
جميل جدا >>> ولــكن لو تلاحظ ان الخليه العلويه فيها شي غلط !!! ان ارتفاعها مو نفس ارتفاع الصوره الاصليه !!

تعال معااااااي علشان نكتشف أين الخلل والمشكله ....

اذهب للفوتوشوب ثم اضغط على القائمه File ثم اختر Open ثم افتح الصوره اللي تحمل الاسم m1
 دروس فوتو شوب   تحميل فوتوشوب   دروس Photoshop  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتو شوب   دروس محترفة   دروس Adobe Photoshop   دروس فوتوشوب مبتدئين   دروس الرسم بالفوتوشوب

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

التاليه
 دروس الرسم بالفوتوشوب   دروس فوتوشوب للمبتدئين  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب 8   دروس احترافية   دروس احترافية   دروس فوتو شوب   دروس محترفة
وما يهمنا بهذه النافذه هو اكتشاف ارتفاع الصوره فقط !!! من الخيار Height المظلل ستجد مقاس ارتفاع الصوره المطلوبه ولاحظ ان

مقاس ارتفاع الصوره لدينا الآن هو 53 ولاحـــظ أيضا أنه لابد من وضع الخيار في القائمه اللي على جنب على pixles ....

كل ما عليك هو حفظ رقم ارتفاع الصوره في ذاكرتك !!

والآن نرجع للفرونت بيج والى الخليه العلويه ونضغط كلك يمين بداخلها ثم نختار خصائص الخليه ثم من امام الخيار تحديد الإرتفاع نضع

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


والحين أكيد راح تسأل >> المجلة غالبا يصير لها اطارات بداخل الصفحه ؟؟ وللحين مااااااا شفنا هالاطارات ؟!
 دروس محترفة   تحميل فوتوشوب   دروس فوتو شوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب متوسطة   دروس الرسم بالفوتوشوب   تعلم الفوتوشوب    تعلم الفوتوشوب
راح أقولك أبشر والحين نسوي الإطارات مع بعض :

روح للفوتوشوب وافتح التصميم اللي سويناه
 دروس فوتوشوب فيديو   دروس التصميم بالفوتوشوب   دروس محترفة  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب 8   دروس Adobe Photoshop   دروس احترافية   دروس فلاتر فوتوشوب   دروس التصميم بالفوتوشوب
ثم اختر هذه الأداة
 تحميل فوتوشوب   دروس الرسم بالفوتوشوب   دروس احترافية  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس التصميم بالفوتوشوب   دروس فوتوشوب فيديو  دروس فوتوشوب للمبتدئين   تحميل فوتوشوب   دروس احترافية
ثم اضف طبقه جديده ثم قم برسم مستطيل وقم بإعطائه الاستايل اللي حفظناه
وقد قمت برسم مستطيل واعطائه نفس الاستايل اللي حفظناه اصبح هكذا
 دروس محترفة   دروس الرسم بالفوتوشوب   دروس فوتوشوب متقدمة  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس احترافية  دروس فوتوشوب للمبتدئين   دروس Photoshop   دروس فوتوشوب فيديو   دروس محترفة

ثم قم بحفظ العمل بالضعط على File ثم save as ثم قم بتسمية الصوره اي اسم ومن امام كملة format اختر الامتداه الموضح لك

بالصوره التاليه بالرقم 1 ثم اضغط على save
دروس فوتوشوب للمبتدئين   دروس الرسم بالفوتوشوب   دروس الرسم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس رسم بالفوتوشوب   دروس فوتوشوب 8   دروس الرسم بالفوتوشوب   دروس فوتوشوب مبتدئين   تعلم الفوتوشوب
ثم قم بفتح الصوره اللي حفظناها للتو من الخيار file ثم open ثم اختر الصوره اللي حفناها .
ثم اختر اداة التحديد
 دروس Adobe Photoshop   دروس فلاتر فوتوشوب   تحميل فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس احترافية   دروس فوتوشوب مبتدئين   دروس التصميم بالفوتوشوب   دروس محترفة   دروس فوتوشوب متقدمة
ثم قم بتحديد المستطيل اللي عملناه كما التحديد الموضح لك بالصوره
(( لاحظ ان التحديد يعطي فراغ بسيط من اليمين واليسار وذلك لظهور الظل اللي بالإطار واذا لم يكن هنا ظل للاطار قم بتحديد المستطيل

بدون ترك فراغات يمين ويسار المستطيل .. ويفضل ترك فراغ بسيط من اليمين واليسار كما بالصوره التاليه ))
 دروس Adobe Photoshop    دروس فوتوشوب متوسطة  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب للمبتدئين   دروس فوتو شوب   دروس محترفة   دروس احترافية
ثم
ثم من قائمة Edit اختر Cut ثم اذهب الى قائمة File واختر New واضغط على ok مباشرة ثم اضغط على قائمة Edit واختر منها

Paste ... وستلاحظ انه تم لصق المستطيل

ثم قم بتقسيم المستطيل الى 3 أجزاء (( تقطيع )) علوي وسفلي ومنتصف
 دروس احترافية   دروس رسم بالفوتوشوب  دروس فوتوشوب للمبتدئين  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس احترافية   دروس فوتوشوب   دروس فوتوشوب فيديو  دروس فوتوشوب للمبتدئين   دروس فوتو شوب

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

 فلاتر فوتوشوب   دروس Adobe Photoshop   [متوسط] درس تصميم موقع كالمجله بكل دقة  تحميل فوتوشوب   دروس فوتو شوب   دروس فوتوشوب متقدمة   دروس Adobe Photoshop   دروس محترفة

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

احفظه بذاكرتك لأننا راح نرجع له بالتقصيص للمستطيل ))
 دروس فوتوشوب متقدمة   دروس فوتوشوب مبتدئين   دروس فوتوشوب متقدمة  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب متقدمة   دروس الرسم بالفوتوشوب   دروس التصميم بالفوتوشوب    تحميل فوتوشوب
ثم من قائمة Edit اختر Cut ثم اذهب الى قائمة File واختر New واضغط على ok مباشرة ثم اضغط على قائمة Edit واختر منها

Paste ... ثم احفظ الصوره بأي إسم يدل على الصوره .
ثم حدد الجزء الأيمن بنفس عرض التحديد اللي عملناه ثم قم بقصه وحفظه بإسم يدل عليه .
وأيضا في المنتصف حدد عرض بسيط من الصوره حتى يصبح خلفيه وقم بقصه وحفظه بإسم يدل عليه .
وبعد ان قمت بقص الصوره العلويه للمستطيل نتج لي هذه الصور

 دروس Adobe Photoshop    دروس رسم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب متقدمة   دروس فوتوشوب مبتدئين   دروس رسم بالفوتوشوب   دروس فوتوشوب 8   دروس فوتوشوب فيديو

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

 دروس محترفة   دروس رسم بالفوتوشوب   دروس الرسم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب مبتدئين   تحميل فوتوشوب   دروس فلاتر فوتوشوب   دروس فوتوشوب   دروس Adobe Photoshop


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

بأسماء تدل عليها . (( ولا تنسى أن عرض التحديد يجب ان يكون متساوي )) .
وقمت بتقصيص الجزء السفلي ونتج لي هذه الصوره

 دروس فوتو شوب  دروس فوتوشوب للمبتدئين   فلاتر فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس احترافية   دروس التصميم بالفوتوشوب   دروس فوتوشوب فيديو   دروس رسم بالفوتوشوب   دروس Photoshop

 دروس فوتوشوب مبتدئين   دروس Adobe Photoshop   دروس فوتوشوب مبتدئين  [متوسط] درس تصميم موقع كالمجله بكل دقة  تعلم الفوتوشوب   دروس فوتو شوب   فلاتر فوتوشوب   دروس محترفة   دروس فوتوشوب متقدمة

 دروس الرسم بالفوتوشوب   دروس Photoshop   دروس الرسم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب 8   دروس فوتوشوب متقدمة   دروس Photoshop   دروس فلاتر فوتوشوب   دروس رسم بالفوتوشوب


ثم اذهب للصوره اللي بالمنتصف >>> ولا نحتاج منها سوى قص الجهه اليمنى واليسرى فقط (( ولاحظ ان العرض لابد أن يكون هو

نفسه بتحديدنا اللي حفظناه بذاكرتنا )) .
وقمت بالقص ونتج لي التالي :

 دروس فلاتر فوتوشوب   دروس فوتوشوب متوسطة  دروس فوتوشوب للمبتدئين  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس التصميم بالفوتوشوب   دروس التصميم بالفوتوشوب   دروس فوتوشوب   دروس Photoshop   دروس فوتوشوب

 دروس فوتو شوب   دروس التصميم بالفوتوشوب   دروس فوتوشوب فيديو  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب   دروس فوتوشوب 8  دروس فوتوشوب للمبتدئين   تحميل فوتوشوب   فلاتر فوتوشوب


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

تجعل المؤشر بداخله
 دروس Adobe Photoshop   دروس محترفة   دروس احترافية  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب متقدمة   دروس فوتو شوب    دروس الرسم بالفوتوشوب   دروس احترافية
ثم اضف جدول ذو 3 أعمده رأسيه و 3 أعده أفقيه
 دروس Photoshop   دروس فوتو شوب   دروس فوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب فيديو   دروس فوتوشوب متوسطة   دروس فوتوشوب فيديو  دروس فوتوشوب للمبتدئين
ثم اضغط كلك يمين بمنتصف الجدول واختر خصائص الجدول
 دروس احترافية   دروس فوتوشوب 8   دروس رسم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس محترفة   دروس Photoshop   دروس فلاتر فوتوشوب   دروس فوتوشوب مبتدئين   دروس فوتوشوب متقدمة
ثم اعمل القيم كما مبين لك بالصوره
 دروس احترافية   تعلم الفوتوشوب  دروس فوتوشوب للمبتدئين  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب   تعلم الفوتوشوب   تحميل فوتوشوب   دروس الرسم بالفوتوشوب   دروس فوتوشوب 8
ثم اسحب العمود الأيمن الى أقصى اليمين واحسب العمود الأيسر الى أقصى اليسار وسيظهر كهذا
 دروس الرسم بالفوتوشوب   دروس فوتوشوب متوسطة   دروس محترفة  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس احترافية   تحميل فوتوشوب   تعلم الفوتوشوب  دروس فوتوشوب للمبتدئين  دروس فوتوشوب للمبتدئين
ثم قم بتركيب الصور كما فعلنا سابقا وكل صوره بمكانها المناسب (( ألم أقل لك أن تضع اسم يدل على الصوره ))
شاهد كيف قمنا بتركيب الصور بالجدول
  دروس فوتوشوب   دروس فوتوشوب فيديو  [متوسط] درس تصميم موقع كالمجله بكل دقة  تحميل فوتوشوب   دروس الرسم بالفوتوشوب   فلاتر فوتوشوب   تعلم الفوتوشوب   تحميل فوتوشوب


والآن نقول لنفسنا هنئا لكي لقد قمتي بعمل شيء جميل ...

في أعلى الأطار أكتب مسمى لمحتوى الإطار >> مثلا (( جديد الموقع )) وفي المنتصف أكتب المحتويات كما في هالصوره :
 تحميل فوتوشوب   دروس فوتوشوب فيديو   دروس الرسم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب 8   دروس Adobe Photoshop   دروس التصميم بالفوتوشوب   دروس محترفة   تعلم الفوتوشوب

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

القائمه المنسوخه ... أو اذا كانت لك خبرة بالتعامل من اكواد HTML تستطيع نسخ كود جدول القائمه بالكامل ومن ثم لصقه أسفل

الكود اللي نسخته مباشرة (( واذا تبي تفصل بين القائمتين تستطيع وضع هالكود <BR> فهو يعني سطر بحيث سيتم الفصل بين

القائمتين بسطر واحد )) ... شاهد معي الطريقه
 دروس فوتوشوب فيديو   دروس محترفة   دروس رسم بالفوتوشوب  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس محترفة   دروس Adobe Photoshop   دروس Photoshop   دروس احترافية   دروس فلاتر فوتوشوب

ثم بنفس الطريقه تستطيع اضافة اطارات .

وبعد إضافة القوائم والإطارات اللازمه لموقعنا ... شاهد كيف اصبح الآن
 دروس فوتوشوب 8    دروس فوتوشوب 8  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فوتوشوب متقدمة   تعلم الفوتوشوب   دروس فوتوشوب مبتدئين   دروس محترفة   فلاتر فوتوشوب

ولاحظ أن هناك خليه فارغه في الأعلى وايضا بالأسفل >>>
أما العلويه فتستطيع وضع صور للإعلانات بها او اي روابط او نصوص محببه لك .
وأما السفليه فهي لكتابة (( جميع الحقوق محفوظه لموقع بوادي )) أو كتابة اي جمله ترغبها أو وضع عداد زوار او عداد احصائيه .


وبهذا انتهينا من التصميم والتركيب بقي لدينا حفظ العمل كصفحة ويب HTM او HTML كلتا الجملتين تفي بالغرض ..


بعد الانتهاء من اضافة القوائم والاطارات اذهب للقائمة ملف من أعلى الفرونت بيج ثم اختر حفظ بإسم وستظهر لك النافذه التاليه :
 دروس Adobe Photoshop   دروس فوتو شوب   دروس احترافية  [متوسط] درس تصميم موقع كالمجله بكل دقة  دروس فلاتر فوتوشوب   دروس رسم بالفوتوشوب   دروس الرسم بالفوتوشوب   دروس التصميم بالفوتوشوب   فلاتر فوتوشوب

ثم سيتم حفظ الصفحه بنفس الإسم index .

والآن قم بتحميل مجلد الصور كاملا الى موقع والصفحه التي بجانبه الى موقعك ... وأصبح جاهزا للتصفح





من مواضيع ADMIN في المنتدى
__________________


يقول الامام مالك رحمه الله:
إنما هؤلاء أقوام أرادوا القدح في النبي صلى الله عليه وسلم فلم يمكنهم ذلك، فقدحوا في أصحابه حتى يقال رجل سوء ولو كان رجلاً صالحاً لكان أصحابه صالحين.

وقال أبو الوفا بن عقيل رحمه الله:
انظر كيف اختار لمرضه بيت البنت، واختار لموضعه من الصلاة الأب، فما هذه الغفلة المستحوذة على قلوب الرافضة عن هذا الفضل والمنزلة التي لا تكاد تخفى عن البهيم فضلا عن الناطق.

ADMIN غير متواجد حالياً   رد مع اقتباس
قديم 03-01-2007, 06:40 مساءً   #2 (permalink)
عضــو
 
تاريخ التسجيل: Jan 2007
المشاركات: 40
معدل تقييم المستوى: 13المصمم الإماراتي يستاهل ترحيب
رد: [متوسط] درس تصميم موقع كالمجله بكل دقة

ما شاء الله عليك أخوي أدمن كفيت وفيت
شرح واضح 100%





من مواضيع المصمم الإماراتي في المنتدى
المصمم الإماراتي غير متواجد حالياً   رد مع اقتباس
قديم 08-01-2007, 10:14 مساءً   #3 (permalink)
عضــو
 
تاريخ التسجيل: Jul 2007
المشاركات: 21
معدل تقييم المستوى: 10azizos يستاهل ترحيب
رد: [متوسط] درس تصميم موقع كالمجله بكل دقة

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





من مواضيع azizos في المنتدى
    azizos غير متواجد حالياً   رد مع اقتباس
    قديم 07-05-2008, 08:34 مساءً   #4 (permalink)
    عضو نشيط
     
    تاريخ التسجيل: Jan 2008
    الدولة: Iraq
    المشاركات: 126
    معدل تقييم المستوى: 19كاردينيا يستاهل ترحيب
    إرسال رسالة عبر مراسل Yahoo إلى كاردينيا
    رد: [متوسط] درس تصميم موقع كالمجله بكل دقة

    والله مبدع يا استاذ ادمن ومجهود جدا رائع عزيزي
    موفق ومبدع دائما باذن الله





    من مواضيع كاردينيا في المنتدى
      كاردينيا غير متواجد حالياً   رد مع اقتباس
      قديم 07-05-2008, 11:15 مساءً   #5 (permalink)
      :: مشرف ::
      :: قسم Cinema4D ::
       
      الصورة الرمزية عبدالله المهاجر
       
      تاريخ التسجيل: May 2008
      الدولة: في صلاح الدين المنصورة
      المشاركات: 1,123
      معدل تقييم المستوى: 11468عبدالله المهاجر نشيطعبدالله المهاجر نشيطعبدالله المهاجر نشيطعبدالله المهاجر نشيطعبدالله المهاجر نشيطعبدالله المهاجر نشيطعبدالله المهاجر نشيطعبدالله المهاجر نشيطعبدالله المهاجر نشيطعبدالله المهاجر نشيطعبدالله المهاجر نشيط
      رد: [متوسط] درس تصميم موقع كالمجله بكل دقة

      مشكوووووووور وبارك الله بيك اخي الكريم مجهود حلوووووووو





      من مواضيع عبدالله المهاجر في المنتدى
      __________________
      بسم الله الرحمن الرحيم

      (( وما أوتيتم من العلم الا قليلا ))

      صدق الله العظيم
      عبدالله المهاجر غير متواجد حالياً   رد مع اقتباس
      قديم 08-24-2008, 07:06 مساءً   #6 (permalink)
      عضو جديد
       
      تاريخ التسجيل: Aug 2008
      المشاركات: 3
      معدل تقييم المستوى: 6النجم احمد رجب يستاهل ترحيب
      رد: [متوسط] درس تصميم موقع كالمجله بكل دقة

      والله هذ حقيقي مجهود جبار جدا
      شكرا لك كثيرا





      من مواضيع النجم احمد رجب في المنتدى
      النجم احمد رجب غير متواجد حالياً   رد مع اقتباس
      رد

      العبارات الدلالية
      متوسط, درس



      الذين يشاهدون محتوى الموضوع الآن : 2 ( الأعضاء 1 والزوار 1)
      ‏ابوضلعع
      أدوات الموضوع
      طرق مشاهدة الموضوع

      تعليمات المشاركة
      لا تستطيع إضافة مواضيع جديدة
      لا تستطيع الرد على المواضيع
      لا تستطيع إرفاق ملفات
      لا تستطيع تعديل مشاركاتك

      BB code is متاحة
      كود [IMG]متاحة
      كود HTML معطلة
      Trackbacks are متاحة
      Pingbacks are متاحة
      Refbacks are متاحة

      المواضيع المتشابهه
      الموضوعكاتب الموضوعالمنتدىمشاركاتآخر مشاركة
      [فهرس] دروس قسم Image Ready ( آخر تحديث 10/6/2007 )Mr Niggaدروس ايميج ريدي Adobe ImageReady003-29-2007 10:33 صباحاً
      [فهرس] مواضيع و دروس قسم Cinema 4D ( آخر تحديث 29/3/2007 )ADMINدروس Cinema 4D003-29-2007 08:35 صباحاً
      [فهرس] مواضيع ودروس القسم ( آخر تحديث 10/6/2007 )ADMINدروس فوتوشوب Adobe Photoshop003-14-2007 06:35 صباحاً
      مواقع مفيدة للطلاب والطالبات ..الهوى ماهو كلامدروس للمبتدئين210-21-2005 12:29 صباحاً
      مواقع اللاعبيين العالمينوردة العشاقرياضة209-07-2005 02:24 صباحاً


      منتديات شبكة ابن الخليج