- 4 months ago
Category
🦄
CreativityTranscript
00:00السلام عليكم ورحمة الله وبركاته
00:01وفي الدرس ده هنتعلم حاجة مهمة جدا مع بعض وهي المحاذاة
00:06وازاي التصميم بتاعك يكون منسق وجميع عناصره محاذية مع بعضها
00:11فخلينا نبدأ في الدرس على طول وهي المحاذاة
00:14المحاذاة حاجة مهمة جدا ومن اكتر الاخطاء اللي بتجيلي هي اخطاء في المحاذاة بتاعت العناصر
00:21التصميم بتاعنا لازم يكون منسق
00:23يعني العناصر كلها متنسقة مع بعضها ومحاذية
00:27فخلينا نعرف ايه اشهر المحاذيات او ايه اشهر التنسيقات بتاعت الصور
00:31وازاي ننسق او نحاذي الصور بتاعتنا
00:34فخلينا مثلا نشوف تصميم زي ده
00:37ده تصميم بسيط جدا
00:38هنا مثلا البتزا الافضل على الاطلاق
00:40كلمة اشتري الان
00:42زي ما احنا تعلمنا ان تنسيقات الكتابة
00:44ياما الكتابة تكون فوق والصورة تكون تحت
00:47ياما الصورة تكون فوق والكتابة تكون تحت
00:49ياما ان الصورة تكون على اليمين او في جهة يعني
00:54والكتابة في الجهة الاخرى فديت تنسيقات الكتابة بتاعتنا طيب
00:58المحاذاة بقى المحاذاة لازم كلمة البيتزا اه الافضل على الاطلاق
01:03تكون في منتصف الصورة يعني ما ينفعش ان انا الاقي كلمة البيتزا
01:08الافضل على الاطلاق ديت كده ده كده خطأ ده كده خطأ كبير ما
01:12ينفعش ان انت تعمل الموضوع ده لازم يكون المسافة ما بين العنصر
01:16دوت وطرف الصورة اليمين اد المسافة ما بين العنصر دوت برضو وطرف
01:22الصورة الشمال كده بهاية في النص بالزبط كم فهب يساعدك من ان هو
01:26اول ما بتجي في المنتصف بالزبط بيظهر لك شرطة كده او سطر كده
01:31عشان يعرفك ان انت كده في منتصف التصميم بالزبط ولكن في ناس كتير
01:35بتنخدع في الموضوع دوت بسبب المحاذاة بتاعة الكتابة بالذات او
01:40في بعض الصور يعني مسلا لو الكتابة ديت المحاذاة فيها معمولة
01:45لناحية اليمين يعني كده العنصر بتاعنا او الكتابة بتاعتنا محاذية
01:50لناحية اليمين زي ما انت شايف كده بالنسبة للمربع النصي طيب هل
01:53كده التصميم بتاعنا او هل كده كلمة البيتزا الافضل على الاطلاق
01:57هل هي كده في منتصف التصميم بتاعنا الحقيقة لا لان المسافة اللي
02:01ما بين كلمة البيتزا والطرف اليمين اصغر من المسافة ما بين
02:05كلمة الاطلاق والطرف اليسار فبالتالي ديت مش في المنتصف رغم
02:10ان كام ذا بيقول لي او عمل لي سطر كده قال لي ان انا كده في
02:15المنتصف. شايفين السطر ظاهر ازاي بيقول ان انا كده في المنتصف.
02:18لكن لو سبت كده واتفرجت هلاقي ان انا الكتابة بتاعت مش في
02:22المنتصف. لان المسافة هنا صغيرة والمسافة هنا كبيرة. انا كده مش
02:25في المنتصف الصورة. فاللي بيحكم هو عيني. مش كنفا. يعني مش كنفا
02:30اول ما يديني السطر ده وتبعنا كان في المنتصف. هو الحقيقة هو اي
02:34اللي في المنتصف يعني هو ليه كنفا بيقولك هو كان في المنتصف. هو
02:37المرّبع النصي في المنتصف
02:40لكن النص بقا في جوه المرّبع النصي كانفا لم يعرفهوش
02:44ما يعرفش النص دوت فين كان مرّبع النصي
02:47فأنت عشان تعمل محاذاة بشكل صحيح
02:50لازم تخلي محاذاة في جوه المرّبع النصي هي كمانا للمنطّصف
02:54فبالتالي ما يصول المحاذاة الكتابة snail
02:58والمحاذاة المرّبع النصي هي كمانا wraps
03:02أتمنى الـствеكرة تكون وضحت
03:04المربع ان كامجة بيخلي او بيديك اشارة ان المربع النصي اللي هو
03:10الحواف اللي هي الزرق ديت بيعرفك ان الحواف الزرق ديت في منتصف
03:15الصورة تمام لكن مش بيعرفك بقى الكتابة اللي جوه ديت هي بقى في
03:22منتصف الصورة لا ديت ما تخصهوش ديت انت بقى زبط المحازات بتاعتها
03:26بحيث تكون المحازات بتاعت النص جوه المربع النصي في المنتصف فاتمنى
03:31كده ان احنا نكون فهمنا المحازة للمنتصف بالزبط طبعا الكلمة
03:35دية هي كمان تكون في المنتصف كلمة اشتري الان بالمربع بتاعها
03:39هي كمان تكون في المنتصف في تصميم الزبط او لما نتأكد ان احنا كده
03:43في المنتصف في تصميم الزبط كنفع حطل لنا كده اه شرطة او حطل لنا
03:48سطر كده عشان نعرف ان احنا في منتصف في التصميم بالزبط وكلمة
03:52اشتري الان زيك نفسها لازم تكون في المنتصف في المربع اللي وراها
03:56فكلمة اشتري الآن هو احنا فضلنا نحركها كده
03:59هنتأكد ان هي كنفا عمل لنا كده
04:01سطر ان احنا كده في منتصف المربع اللي وراها بالضبط
04:05زي ما انت شايف كده
04:07وطبعا ما ننخدعش بيه الصورة اللي كنفا بيضعها
04:11والخطوط اللي كنفا بيضعها
04:12لازم نتأكد بعنينا ان المسافة ما بين الطرف الايمن للعنصر بتاعنا
04:17وطرف العنصر اللي وراها
04:19او العنصر اللي احنا بالحزيله
04:21يكون متساوية مع الطرف العنصر
04:25مع الناحية الثانية او مع الجهة الاخرى
04:27فنتأكد ان العنصر في المنتصف بالضبط
04:29وان العنصر ده مع المربع اللي وراهم
04:33اللي كده مع بعض
04:34لو احنا جمعناهم كده
04:35ضغطنا شفت من الكيبورد
04:36وجمعناهم سواء وضغطنا على كلم التجميع
04:38نتأكد بقى ان العنصر ده على بعضه
04:40في منتصف الصورة الكبيرة
04:42تمام؟
04:43فالمحازاة هي طبقات او درجات
04:45فعندنا محازاة الكتابة
04:47جوة المربع بتاعها
04:48وعندنا محازاة للمربع والكتابة
04:51بالنسبة للتصميم ككل
04:53كذلك العنصر ده
04:54العنصر ده لازم نتأكد ان هو في منتصف التصميم بالضبط
04:59بالشكل ده كده
04:59بالله ان كان فيه حط لنا سطر او خط كده
05:03يوضح لنا ان ده في منتصف التصميم بالضبط
05:05كذلك بالنسبة للصورة التانية
05:07وبالنسبة للصورة الاخيرة
05:10بالنسبة للصورة الاخيرة
05:11عايزين نتعلم او نفهم فيها حاجة كده
05:13وهي التصميم بتاعنا أو الصورة بتاعتنا
05:17احنا ما ينفعش نسيبها وننزلها بالشكل دا كده
05:20لأن هي كده ما بقتش في منتصف التصميم بالنسبة لفوق وتحت
05:23يعني كده العنصر بتاعنا أو الصورة بتاعتنا بقت فاضية من فوق
05:27فانت ليه تعمل كده في حين ان انت ممكن تخلي الصورة بتاعتك في المنتصر بالزبط
05:32ما بين فوق وتحتي بل مسافة الفاضية فوق قد المسافة الفاضية تحت
05:37تمام؟
05:37بحيث تخلي التصميم بتاعك يكون متناسق
05:40وما فيوش مساحات خاضية كتير والدنيا تكون متنصقة ومحاذية من جميع الجهات
05:46طبعا هنا المحاذاة للمنتصف لكن في محاذاة تانية هنا لليمين او للشمال
05:51فالعنصر دوت مثلا او الجزئية ديت اللي هي البيتزا الافضل على الاطلاق
05:57هي محاذية لكلمة اشتري الان من ناحية الشمال
06:01يعني هنا في محاذاة من ناحية الشمال
06:02لو جبنا سطر كده او لو جبنا خط كده بالشكل ده
06:07والخط دوت كده عملناه رأسي
06:11ورفعناه بالشكل ده هنلاقي ان كلمة اشتري الان او المربع دوت محاذي لكلمة البيتزا الافضل على الاطلاق من ناحية الشمال
06:21وهنلاقي ان كلمة البيتزا الافضل على الاطلاق هي كمان كل كلمة او كل سطر محاذي لكلمة او للسطر اللي تحته بالظبط
06:29كلهم على نفس الخط كلهم محاذيين لبعض
06:32فمهم ان احنا برضو نعمل المحاذاة سواء للمنتصف سواء لليمين سواء للشمال
06:37لازم نتأكد ان جميع العناصر بتاعنا متحذية بشكل كويس
06:41ولو بحثنا برضو في القوالب تحت كان في عن فيسبوك بوست وبصينا كده على القوالب
06:47هنلاقي ان الجميع القوالب هنا مثلا القوالب ديت محاذية لناحية اليمين جميع الكتابات محاذية لبعضها
06:53وهنلاقي ان الشنطة هنا بالنسبة سيبه مسافة فوقها وسيبه برضو مسافة تحتيها كويسة في اعتبر في المنتصف التصميم
07:01كذلك هنا العناصر ديت كلها او الكتابات ديت كلها عاملة محاذية للمنتصف مع بعضها
07:08يعني لو رسمنا خط كده هنلاقي ان هو بيقطعهم في المنتصف بالظبط
07:12كذلك هنا المحاذات بتاعت العناصر ديت كلها هتلاقيها لناحية الشمال يعني كلهم على خط واحد من الناحية اللي في الشمال
07:19هنا كذلك هتلاقي العناصر كلها محاذية للمنتصف
07:23فمهم جدا جميع العناصر وجميع التصميمات مهم فيها جزئية المحاذية ومهم ان انت تراعي الجزئية ديت في جميع التصميمات
07:31وهنا هنشوف بعض الامثلة السيئة عن المحاذية فهنلاقي هنا مثلا هنا جميع العناصر ما فيهاش اي محاذية
07:38ديت مش محازية من ناحية فوق ولا من ناحية تحت ولا محازية مع الكتابة ولا محازية مع اي حاجة خالص
07:44فالمفروض نحطها كده في المنتصف بالزبط وكلمة البيتزا الأفضل على الطاقة نحطها هنا مثلا
07:49وكلمة اشتري الآن هنتأكد ان هي محازية لمنتصف الكتابة اللي فوق بالشكل ده كده
07:54فكده بدأنا ان احنا نخلي الصورة متحازية شوية اي نعم لسه بقى المساحات الفضية وترتيب العناصر واحجام العناصر لسه ما شرحناهمش
08:03او لسه ما ضبطناهمش ولكن كمحازية الصورة كده اصبحت متحازية هنا هو عامل محازية من ناحية اليمين
08:10لو لاحظنا ان هنا الصورة طرفها اليمين هو نفس الطرف بتاع كلمة البيتزا هي نفس الطرف بتاع كلمة اشتري الآن
08:17هنا عامل محازية لليمين ولكن بالنسبة للصورة بقى فهنا ما فيش محازية بالنسبة للصورة يعني العنصر دوت بالنسبة للصورة ديت
08:27او العناصر تلت عناصر على بعضهم كدة بالنسبة للصورة مش محازين لمنتصفها المسافة ما بين الجزائية اليمين وجزائية الشمال فيه هنا مسافة كتير فاضية وهنا مسافة
08:38قليلة لفاضية فهنا ما فيش محازن ما بين جميع العناصر وافضل انة هي يعني انخلي التصميم الجزائية ديه بك�데ه في النص كده التصميم بتاعنا بقى
08:51بالكامل بقى محايزة من جميع الجهات هنا المسافة الفضية على
08:55اليمين قد المسافة الفضية على الشمال اه هنا برضو المسافات
08:59فضية هنا برضو المساحة اللي انا سايبها فوق قد المساحة اللي انا
09:02سايبها تحت فكده التصميم بتاعنا بقى محايزة اكتر هنا برضو كذلك
09:07هنا جزئية اقولنا زي ما قلنا احنا هنا سايبين مساحة فوق فضية
09:10فهنبدأ نرفع كده التصميم بتاعنا فكده التصميم بتاعنا اصبح متناسق
09:15واصبح العناصر بتاعته متنسقة وهنا برضو انا هنا سايب مساحة فوق كتير
09:19لكن هنا سايب مساحة قليلة فاطر ان انا ارفع كلمة اشتري الآن كده شوية
09:24زي ما انتم شايفين بحيث ان انا اسيب مساحة تحت قد المساحة اللي فوق
09:29عشان التصميم بتاعي يكون متوزع صح
09:31خلينا تشوف امثلة على المحازاة ديت من تصميمات موجودة بالفعل
09:35فعندنا مثلا التصميم دوت اللي كنا شفناه قبل جدا
09:38هنلاقي ان هنا في عندنا محازاة للمنتصف
09:41هنا جميع الكتابات هتلاقيها على نفس الخط حرف التاه
09:45زي حرف الالف زي حرف التاه التاني جميعهم عليها نفس الخط
09:49هنا برضو حرف النون والره والنون كلهم برضو على نفس الخط
09:53يمكن كلمة حرف الره كده يمكن طالع سنة صغيرة
09:56محتاج يدخل سنة صغيرة عشان يكون محازي
09:59ولكن يعني بسيطة المحازاة عموما شكلها كويسة
10:04الكتابة سايبة مساحة على اليمين قد المساحة على الشمال يعني في النص بالزبط
10:08هنا السنة برضو سايبة مساحة على اليمين قد المساحة على الشمال يعني في النص بالزبط
10:12فالتصميم بتاعنا محازي
10:13هنا برضو المسافة ما بين الجزء الابيض اللي طالع دوت وطرف الصورة
10:18قد المسافة ما بين اللايك دوت وطرف الصورة
10:21فالصورة بتاعتنا محازية
10:24هنا برضو الفرق ما بين كلمة الشعار وطرف الصورة
10:27ونفس الفرق ما بين الجزئية دي برضو وطرف الصورة
10:31فالتصميم بتاعنا متناسق من جميع الجهات في التصميم ده
10:35طيب خلينا نخش على التصميم اللي بعد كده ده مثلا تصميم سوشال بيديا
10:39ولو لاحظنا هنا الكتابة اللي هي وقت حجم كبير ده العنوان المهم بالنسبة لنا
10:43وتحت هنا العناصر دي هتلاقيها محاذية لبعضها
10:47جميع العناصر يعني جميع علامات الصحة دي هتمحاذية لبعضها بالزبط
10:52جميع الكتابات محاذية لبعضها بتبدأ مع بعض من نفس الخط بالزبط
10:56فالعناصر دي هتمحاذية لبعضها
10:58وهنلاحظ ان المسافة ما بين اول عنصر اللي هو كلمة تصميم احترافي
11:03وما بين كلمة تصميم سوشال ميديا ما بين اللي هو المربع الاحمر دوت
11:08او المستطيل الاحمر
11:09نلاحظ ان المسافة دي اد المسافة دي بالزبط
11:12اللي هي ما بين كلمة صورة الانجاز وطرف الصورة
11:15احنا عندنا هنا مساحة فاضية في الجزئية ديت
11:17فهو خلى الكتابة بتاعتنا في منتصف المساحة الفاضية دي
11:21لانه لو كان خلىها في منتصف التصميم ككل
11:24كان نرفع الكتابة دي فوق شوية
11:26وبالتالي هيكون الكتابة دي قريبة من كلمة تصميم سوشال ميديا
11:30وتحتها هيكون مسافة فرغة كتير
11:32فيكون شكلها مش متناسق
11:34لكن كده هو شكلها متناسق
11:36اللي هو زبط المساحة جوه المساحة الفاضية دي
11:39فدية كده كانت المحاذاة
11:41برضو بالنسبة لمحاذاة النص
11:43فاحنا شرحناها فوق بالتفصيل
11:45لأن النص لازم يكون زي ما انتم شايفين
11:47انا رسم لكم خطة اهوة تخط الفائع خلينا انتخانوا شوية
11:50ده بيوضح ان الكتابة بتاعت كلها
11:53عاملة محاذاة لناحية اليمين
11:55يعني الكتابة كلها لو رسمنا خط كده على ناحية اليمين
11:58هتلاقيه بيلمس جميع الحروف على اليمين
12:01فجميع الحروف هنا متناسقة مع بعضها
12:04كذلك برضو هنا ممكن نعمل محاذاة الكتابة في المنتصف
12:07اللي هو جميع العناصر بتاعت
12:10لو انا رسمت خط كده في المنتصف زي ما انتم شايفين
12:12هتلاقيه بيقطع جميع العناصر في المنتصف بالزبط وساعتها لازم تتأكد ان المحاذاة هنا كمان في المنتصف عشان تتأكد ان كل حاجة في المنتصف بالزبط
12:22وهنا عشان تعمل محاذاة لليمين لازم تتأكد ان جميع العناصر محاذاة لليمين عايز تعمل محاذاة للشمال لازم تأكد ان جميع العناصر محاذاة للشمال
12:30وخلينا نتعرف مع بعض او خلينا نشوف مع بعض الاخطاء التصميمية اللي في الصور دية بالشكل ده عندنا هنا مسلا بالنسبة للمحاذاة
12:38هذا هو أنه قد آتوا لقي目 visto
12:40فقال دعونделIND
12:42بللاحظنا هنا تلاحظنا هنا أن هناك المصحف الشريف أو قرآن الكريم
12:45من ناحية اليمين بالنسبة للشجرة أو بالنسبة لفرعي الشجرة
12:49تلاحظنا هناك مسافة شivity مقارنة بالماحية الس aujourd
12:52علي أين 유rint
12:54كذلك كلمة El Reciters
12:57وهناكт بل Smints
12:57هنمدعين أن المسافة الترفيب التي يريد من كلمة الصvieس
13:02من الناحية اليمين كبيرة
13:03كان المصحف العربي للمسافة الملادى على السورة
13:06في nouvelles السورة
13:07مش في المنتصف بالظبط. كانت محتاجة تيجي نحية الشمال شوية عشان
13:12تكون في المنتصف بالظبط. فهنا المحازية مش مزبوطة. خلينا ننزل
13:16للصورة اللي بعد كده. والصورة ديت هنا المحازية بالنسبة آآ
13:19للكتابة. جوة المربع بتاعها. يعني هنا كلمة تخفضات الاقيل. هنلاقي
13:24ان الكتابة طلع اساسا برا المربع. ولا انها مش في منتصف المربع
13:28بالظبط. ده المسافة فوق ما بين المربع ما بين نهاية المربع
13:32او الكتابة. آآ من ناحية الفوق صغيرة ومن ناحية تحت كبيرة زي ما
13:36انتم شايفين كده. آآ فالحاجات ديت كلها بتحتاج ان هي تتزبط. كذلك
13:41هنا في الصورة ديت هنا في كزا خطأ او الحاجة الكتابة استخدم الخط
13:45اللي احنا خذرنا من استخدامه. آآ فالمفروض كان يزبطه. كذلك هنا
13:49برضو الصور ديت اللي هي اللوجو بتاع اليوتيوب واللوجو بتاع
13:53الشركة التانية ديت. كان المفروض يخليهم في المنتصف بالظبط مع مع
13:58او محازين للمنتصف مع كلمة مقدمة فيديو مجانا بدون علامة
14:02باقيك. المفروض يجو في المنتصف بالظبط. ولكن هو جايبهم كده ناحية
14:06الشمال. فآآ مش في منتصف الكتابة اللي فوقيها. فالمفروض يحازي
14:11العناصر ديت او اللجوهات ديت مع الكتابة اللي فوقيها عشان تكون
14:15المحازية شكلها كويس. سواء يعمل محازية ناحية اليمين لجميع
14:19العناصر او يعمل محازية للمنتصف لجميع العناصر. مهمة بقى الدرس ده
14:23هي مهمة سهلة جدا وبسيطة. انا عايزك تصمم لي تصميم لمدرس
14:28اسمه عمر عصان. المدرس دوت بيشرح مادة الكيمياء. وده اللوجو
14:33بتاع المدرس هسابه لكم في المرفقات عشان تحملوه وتضيفوه في
14:37التصميم بتاعنا. ناخد بالنا هنا ان احنا نراحي الدروس اللي احنا
14:41شرحناها قبل كده. فبالنسبة للالوان هنا اللوجو بيتكون من
14:45اللون الازرق والبرتقاني. فالتصميم بتاعنا هيبقى بيتكون من
14:48اللون الازرق والبرتقاني عشان نحافظ على البراند او نحافظ على اجوان
14:53المدرس ده. وبرضو انا في شروط كده عايزك تنفزها في المهمة دي. اول
14:59شرط ان انت مش هتستخدم اي قالب من قالب كنفا. انا عايزك تعمل
15:03ابتكار تصميم جديد. يعني تفتح كده كنفا بالشكل دوت وتضغط على كلمة
15:08ابتكار تصميم جديد وتعمل تخصيص الحجم وتختار المقاس الف بيكسل في
15:12الف بيكسل وتعمل ابتكار تصميم جديد فارغ تماما. تمام? يبقى ده
15:17اول شرط. تاني شرط انا عايز التصميم اللي انت هتعمله يكون
15:20تصميم بسيط جدا. بخلفية سادة يعني خلفية ما فيقاش اي حاجة. خلفية
15:25مجرد لون. خلفية مجرد لون. وغالبا هتكون لون يا اما برتقاني يا اما
15:29لون ازرق. لان هي ديت الوان التصميم. فانا عايز الخلفية بتاعتك
15:32هتضغط بس جدا على الخلفية. وتختار لون. هتختار لون مسلا برتقاني
15:36بالشكل ده كده. فانا عايز خلفية سادة. وعايز التصميم برضو يكون
15:40بيتكون من عنصر واحد او عنصرين. مسلا صورة مدرس. مسلا صورة اه
15:46حاجة بتدل على الكيمياء. اه وبرضو بتكون من نص واحد او نصين. او
15:51ثلاث مصوص بالكتير قوي. يعني مسلا مدرس الكيمياء افضل مدرس مسلا. اه اه اه احجز
15:59زلال مع المدرس الكيمياء. عمر عصام الدين مسلا. فانا عايز نص واحد او
16:04الصين. بمعنى اصح انا عايز تصمات شبهدية كده. تصمات بسيطة خالص. خلفية
16:08شفافة. كتابة واحدة او كتبتين. صورة. انا مش عايز اكتر من كده. انا
16:13عايزك تعمل ده اول تصميم ليك. عايزك يكون بسيط. عايزك تراعي في
16:16الالوان. عايزك تراعي في المحاذاة. عايزك تراعي في استخدام
16:19الخطوط. مش اكتر من كده. وبس كده كنت خلصت. واشوفكم الدرس الجديد.
Be the first to comment