×

2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق

2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق , , , اليوم يااخوان راح نبدأ بالدرس الثاني , وهو تقطيع الهيدر

صورة 'تركي العمري' الرمزية
قديمة 24 - 11 - 2012, 20:18
المشاركة 1
2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق



2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق


,
,
,



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


2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق

طيب السؤال هنا : لماذا يتم تقطيع الاستايل وماتكون صورة وحدة ؟

الجواب ببساطة : لاختلاف احجام الشاشات , فهناك احجام عديده للشاشات

لاهنت يا اخ تركي وضح اكثر , وش الشاشات ترى مافهمت ؟؟

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

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

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

يعني تبي تقولي ان الصورة الـ تقول عنها نقطة التمدد هذه بتوصل الى كامل اي شاشه ؟؟

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

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


2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق



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

طبعا سيتم عمل الدروس شرح مصور , فيديو . لتتضح الفكرة بشكل كلي .


نفتح التصميم الخاص والـ تم حفظة بصيغة psd بنا والـ تم ارفاقه بالدرس الماضي .

بعد ذلك يتوجب علينا نظهر المسطرة (Ruler)

لدينا طريقتين :
  1. من الكيبورد نضغط على زر Ctrl + R
  2. او من خلال الضغط على عرض + مسطرة & View + Ruler
كما هو مبين

2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق




---------------------

بعد ذلك نرى انه تم اظهار مسطره اعلى ويمين التصميم كما بالصورة الموضحة


2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق





---------------------

يمكننا الان استخدام المسطره في خروج خطوط تحد المنطقه المراد تقطيعها , الصورة متحركه

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


2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق





---------------------


الان نقوم بتحديد منطقة الهيدر (رأس الصفحة)

2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق





---------------------


نختار الان اداةslice tool

2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق




---------------------


ونحدد المنطقة التي تم عمل لها حدود مسبقا , وبعد ذلك نضغط بالزر الايمن ونختار Edit slice options

2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق





---------------------

ونغير المسمى الخاص بالصورة , مثلا , الصورة اليمنى في منطقة الهيدر , بهذه الطريقة

2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق





---------------------

والان نرى بعد الانتهاء من تحديد النقاط الـ وجب تقطيعا , المنطقة العلوية توضح بالاصفر

2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق



---------------------
والان نعمل بالفوتر نفس ماعملنا بالهيدر , ولكن نلاحظ ان الفوتر (تذييل الصفحة ) , فقط صورتين , نقطة تمدد + الصورة اليسار

2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق



---------------------

ليصبح بالشكل التالي

2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق





---------------------

الان انتهينا من كلا الهيدر والفوتر , نجي الان لمنطقة الفروم هوم (الاطار)


اول شيء , بنعمل الحدود الخارجية , كما هو مبين


2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق





---------------------

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

كما مبين

2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق





---------------------


الان تم عمل الحدود الداخليه والخارجة وشبه انتيهنا , نوضح الان الصور الـ بيتم استخدامها من الفروم هوم

2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق


||||||||||||||| : الصور الثابتة وتحتوي على اربعة صور يمين , يسار (علوي) يمين , يسار (سفلي)

||||||||||||||| : صور التمدد وتحتوي على اربعة صور ايضا , عامودين (افقي) , عامودين (عمودي)




---------------------


الان يتم تحديدهم مع تغيير مسمياتهم كما شرحنا مسبقا ليكون الشكل النهائي للفروم هوم بهذا الشكل

2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق


ولصورة واتضاح اكثر بامكانك متابعة الفيديو




---------------------


الان نجي لطريقة حفظ العمل
من File + save for web & Devices

2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق





---------------------

تظهر لنا هذه النافذة

2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق




نعمل الاعدادات كما بالصورة


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

2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق

ثانيا : الشرح فيديو (صوت وصورة)

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

,
,
,

المشاهدة والتحميل
2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق
2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق
2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق
2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق



  • اليوتيوب ~ youtube .................................................. ..هنا
  • فور شيرد ~ 4shared ..................................................هنا
  • زد شيــــر ~ Z share.................................................. ...هنا
  • ابـــلـــودز~ Up loades...............................................هنا
  • مــخـــزن ~ M5zn..............................................................هنا
  • عـرب شير ~ Arab share........................................هنا
  • الخليج ~ gulfup .................................................. ..........هنا



2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق


يوجد في المرفقات

  1. ملف وورد يحتوي على الشرح المصور لمن يريد الاحتفاظ به على جهازه .

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


2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق



الملفات المرفقة
نوع الملف : zip الشرح المصور.zip (2.35 ميقابايت, عدد مرات المشاهدة 361 مرة)
المشاهدات 102245 | التعليقات 35
قديمة 24 - 11 - 2012, 22:49
المشاركة 2
صورة 'محمود الديب' الرمزية
محمود الديب
:: عضو نشيط ::
تاريخ الإنضمام: 06 - 05 - 2012
رقم العضوية : 136565
الدولة : الكويت
المشاركات: 501
1
افتراضي رد : 2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق
روعة اخى مشكور على مجهودك الطيب

جزاك الله خير
تركي العمري معجب بهذا.
قديمة 24 - 11 - 2012, 23:32
المشاركة 3
صورة 'احمد الليثي' الرمزية
احمد الليثي
||| عضو التميز |||
تاريخ الإنضمام: 29 - 10 - 2004
رقم العضوية : 222
الدولة : EGYPT
المشاركات: 37,132
105
افتراضي رد : 2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق
الله ينور يا بطل

متابعين معك
تركي العمري معجب بهذا.
.
قديمة 24 - 11 - 2012, 23:33
المشاركة 4
صورة 'محمد العانيني' الرمزية
محمد العانيني
||| عضو التميز |||
تاريخ الإنضمام: 15 - 01 - 2010
رقم العضوية : 76084
الدولة : فلسطين - جنين
المشاركات: 30,741
510
افتراضي رد : 2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق
وعليكم السلام ورحمة الله

بارك الله فيك اخوي تركي ويعطيك العافية يا رب

ما شاء الله دروس جميلة وراقية

ما ننحرم من جديدك

ولي عودة ان شاء الله بالتطبيق الدرسين الاول والثاني

ودي وتقديري
تركي العمري معجب بهذا.
'' أًعمَلُ بِصمت ..
لأَترُكَ في غِيابي ضَجَة !!

حان وقت الرحيل
لا اقول وداعا بل أقول إلى اللقاء

تم مسح الملفات المرتبطة بإسمك المستخدم بنجاح
قديمة 24 - 11 - 2012, 23:37
المشاركة 5
صورة 'mostafa yasene' الرمزية
mostafa yasene
:: عضو نشيط ::
تاريخ الإنضمام: 09 - 12 - 2005
رقم العضوية : 13713
الدولة : o0_0o
العمر: 35
المشاركات: 3,369
42
افتراضي رد : 2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق
الله يعطيك العافيه اخي تركي المبدع حقيقه من شكل مواضيع الدورة

متعوب عليها وشرح ولا اروع متابع معك اخي الطيب

اسال الله ان يجعله في ميزان حسناتك تستاهل احلى تقييم و كل الدعم وان شاء الله يتم نشر الدورة على كافه المواقع

دمت برعاية الرحمن
تركي العمري و حبــــااري معجبون بهذا .

facebook: mostafa yasene
Blog: mostafa yasene
twitter:mostafa yasene
YouTube:mostafa yasene
*´¨)
¸.•´¸.•*´¨) ¸.•*¨)
(¸.•´ (¸.•` (¸.•` ¤. my...^_^ ¤


قديمة 24 - 11 - 2012, 23:37
المشاركة 6
صورة 'محمد الحلبي' الرمزية
محمد الحلبي
.:: عضو متألق ::.
تاريخ الإنضمام: 21 - 12 - 2006
رقم العضوية : 29719
الدولة : غزة
المشاركات: 5,611
115
افتراضي رد : 2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق
الله يعطيك العافية يا رب

درس رائع

وإلى الأمام ...
تركي العمري معجب بهذا.
تواصل معي من خلال البريد: [email protected]
شكرا ترايدنت، شكرا كليبرز
شكرا: https://www.traidnt.net/vb/images/im...20783344-1.png

قديمة 24 - 11 - 2012, 23:40
المشاركة 7
صورة 'توشيبا' الرمزية
توشيبا
عضو شرف
تاريخ الإنضمام: 01 - 02 - 2006
رقم العضوية : 17988
الدولة : 沙特阿拉伯
العمر: 45
المشاركات: 23,240
181
افتراضي رد : 2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق
اي واحد اسمه تركي مايجي منه الا الحلو

<<<< نصاااب كبير

والله اهنيك ياخوي ابدعت في الشرح وان شاء الله لي تجربة صغيره على بنر


حبيت اسجل اعجابي بالموضوع
تركي العمري و A M I R معجبون بهذا .
قديمة 25 - 11 - 2012, 00:20
المشاركة 8
صورة 'A M I R' الرمزية
A M I R
.:: عضو متألق ::.
تاريخ الإنضمام: 29 - 04 - 2007
رقم العضوية : 35773
الدولة : ام الدنيا
العمر: 28
المشاركات: 9,840
8
افتراضي رد : 2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق
اي واحد اسمه تركي مايجي منه الا الحلو

<<<< نصاااب كبير

والله اهنيك ياخوي ابدعت في الشرح وان شاء الله لي تجربة صغيره على بنر


حبيت اسجل اعجابي بالموضوع
ههههههههههههههههههههه والله انت عسل يَ عسل ^^

تسلم يَ تركي وزي ما قال حبيبنا كل الاتراك مبعدين ^^

جزاك الله كل خير
تركي العمري و HisHaM cRiSty معجبون بهذا .

ما زال الولاء الأول والأخير للشهداء، وتسقط اي سلطة و آحزاب و جمآعات لا تحترم دم الشهيد ، وأهداف الثورة من عيش وحرية وعدالة إجتماعية
.


███ام الدنيا███


قديمة 25 - 11 - 2012, 00:21
المشاركة 9
صورة 'Solar Attack' الرمزية
Solar Attack
:: عضو نشيط ::
تاريخ الإنضمام: 15 - 07 - 2009
رقم العضوية : 66092
الدولة : الشرقية-الجبيل
المشاركات: 3,372
119
افتراضي رد : 2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق
مأشاء الله تبارك الله ،،

عسسأك عالقوة يالغلا ،،

دمت سألم إلى الابد ،،
تركي العمري معجب بهذا.
قديمة 25 - 11 - 2012, 01:40
المشاركة 10
صورة 'ياشمس عمري' الرمزية
ياشمس عمري
:: عضو نشيط ::
تاريخ الإنضمام: 16 - 07 - 2009
رقم العضوية : 67459
الدولة : مهبط الوحي ~
المشاركات: 908
42
افتراضي رد : 2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق
ماااشاء الله ياخوي تركي
كما عهدناك
والله دروس رووووعه و شرحك واضح و سلس و مفهوم
متابعتك والى الامام يابطل
تركي العمري معجب بهذا.
اسم الموقع : ياشمس عمري لخدمات التصميم
خدمات الموقع : لخدمات التصميم - استايلات - واجهات مواقع - بنرات - تواقيع - شعارات - حالات المزاج
رابط الموقع www.shmoosa.net
بريد الموقع [email protected]
قديمة 25 - 11 - 2012, 02:13
المشاركة 11
moslimhouse
:: عضو نشيط ::
تاريخ الإنضمام: 23 - 08 - 2009
رقم العضوية : 70018
الدولة : Cairo
العمر: 31
المشاركات: 344
افتراضي رد : 2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق
جزاك الله كل خير اخى تركي اهم شئ
فى تقطيع الاستايل من نظرتى المتواضعه و
هى نقطة التمدد والتى يجب مرعتها عن التصميم متابعين معاك يا غالى
وبارك الله فيك

تركي العمري معجب بهذا.
قديمة 26 - 11 - 2012, 18:08
المشاركة 12
صورة 'قناص ، الشرقيه' الرمزية
قناص ، الشرقيه
:: عضو نشيط ::
تاريخ الإنضمام: 16 - 02 - 2006
رقم العضوية : 20190
الدولة : عند المعقب ^_^ [ الدمام ]
المشاركات: 2,984
6
افتراضي رد : 2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق
يعطططيك العافيه

شرح رائع
تركي العمري معجب بهذا.


رمز PHP:
  E NSR@HoTmAiL.CoM
WhatsApp 
: +966593222263 
رمز PHP:
Dont work 'hard' work 'SMART' 
قديمة 26 - 11 - 2012, 19:31
المشاركة 13
صورة 'شموع الورد' الرمزية
شموع الورد
:: عضو جديد ::
تاريخ الإنضمام: 01 - 02 - 2012
رقم العضوية : 110475
الدولة : تبوك
المشاركات: 1
افتراضي رد : 2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق
يعطيك الف عافـــية مشكور
تركي العمري معجب بهذا.
قديمة 26 - 11 - 2012, 21:02
المشاركة 14
صورة 'كايتو' الرمزية
كايتو
:: عضو نشيط ::
تاريخ الإنضمام: 12 - 06 - 2012
رقم العضوية : 144354
الدولة : بغداد
العمر: 25
المشاركات: 352
افتراضي رد : 2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق
روعة جميل جدآآ

الى آلامآم
بطل
تركي العمري معجب بهذا.
قديمة 26 - 11 - 2012, 21:52
المشاركة 15
صورة 'ميس آينجل' الرمزية
ميس آينجل
:: عضو نشيط ::
تاريخ الإنضمام: 02 - 04 - 2012
رقم العضوية : 127595
الدولة : المغرب
المشاركات: 276
1
افتراضي رد : 2 / تقطيع الاستايل شرح مصور , فيديو , الاسهل على الاطلاق
بارك الله فيك، الشرح كافي ووافي
الله يجازيك كل خير

يبقى الحين كيفية التكويد ツ
تركي العمري معجب بهذا.
 
اضافة رد
 

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

أدوات الموضوع ابحث في الموضوع
ابحث في الموضوع:

البحث المتقدم
طرق العرض


الساعة معتمدة بتوقيت جرينتش +3 . الساعة الآن : 20:22.
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسئولية نفسه إتجاه مايقوم به من بيع وشراء وإتفاق وأعطاء معلومات موقعه
التعليقات المنشورة لا تعبر عن رأي معهد ترايدنت ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر)

جميع الحقوق محفوظة Traidnt 2019
  • 00966138651070
  • 00966138648289
  • 2051033691
Powered by vBulletin® Version 3.8.11 .Copyright ©2000 - 2019, Jelsoft Enterprises Ltd
SEO by vBSEO ©2011, Crawlability, Inc.