صمم شريط عنوان ذو تأثير ثلاثي الأبعاد

هذا درس مترجم .. لمشاهدة الدرس الأجنبي اضغط هنا

رابط ملف الـ PSD

خطوة 1

– أنشئ ملف جديد في الفوتوشوب بأي حجم لا تفرق.. سأستخدم هنا عرض  600px

– نريد أن نقوم بعمل تقسيم للمساحة، لذا لوِّن الخلفية باللون الأسود ثم ارسم فوقها مستطيل بلونٍ فاتح

خطوة 2

– سوف أبدأ الشريط عن طريق رسم مستطيل أبعاده 310px * 44px .. قمت هنا برسم مستطيل مستدير الحواف بقيمة 4px radius.. لكن يمكنك رسم مستطيل بحواف حادة إن شئت

– انتبه وأنت ترسم المستطيل لأبعاده والتي يجب أن تكون كافية للمحتوى الذي تريد عرضه داخلها وتغطي القدر الذي تريده من الخلفية.. لقد رسمته بعرض 310px والذي سيغطي منه المحتوى 285px ويبقى 25px  تحيط به.

خطوة 3

لقد استخدم صاحب الدرس طريقة مركبة بعض الشيء لرسم الشريط، سنستعيض عنها بطريقة بسيطة وهي استخدام pen tool وملحقاته

– كما هو واضح من الشكل النهائي للشريط فالزاوية المنحنية الوحيدة به هي الزاوية اليمنى العلوية لذا سنعمل على بقية الزوايا

– الآن أريد أن أجعل الزاوية اليمنى السفلية من طرف الشريط حادة لذا سأستخدم آداة Convert Point لأحول النقطة السفلى وأحذف الأخرى بآداة Delet Anchor Point ثم نعدل من مكان النقطة الباقية عن طريق آداة Direct selection واختصارها A ثم تختارها إن لم تكن هي المفعلة
نقوم بهذا ببساطة لنعطي الخداع البصري بأن الشريط منثني.. يمكنك أن تكون أكثر ابتكارًا بجعل الزاوية منحنية للخارج.. لكننا سنكتفي بهذا الآن ليبقى الدرس بسيط

– قم بنفس الخطوة السابقة مع النقطتين يسار الشريط

– الآن قم بإضافة نقطة في منتصف الخط الواصل بين النقطتين على اليسار بآداة Add Anchor Point وقم بسحبها لليسار

– إن شكلت النقطة المسحوبة زاوية منحنية قم بتحويلها بآداة Convert Point لتصبح حادة .. وهكذا انتهينا من هذه الخطوة

خطوة 4

الخطوة التالية هي صنع الجزء الخلفي من الشريط الذي يختفي وراء الخلفية البيضاء..لقد رسم صاحب الدرس مربع ثم أعاد تشكيله!.. لا أجد حاجة لذلك يمكنك ببساطة استخدام آداة pen ورسم مثلث تحت الشريط مباشرة مثل الموضح بالصورة مستخدمًا لون أغمق قليلا من لون الشريط ليعطي إحساس بالبعد

خطوة 5

الآن حان وقت إضافة styles للشريط لنعطيه إيحاء بملمس معين .. سنطبق ما هو موضح بالصور التالية على الجزء الأمامي من الشريط فقط

والآن نطبق هذا على الجزء الخلفي

والآن المفترض أن يكون لديك شريط كهذا

خطوة 6

حان الآن وقت إضافة بعض الكلمات كمحتوى.. قمت هنا باستخدام فونت Eureka بحجم 18pt مع ظل خفيف كالآتي:

خطوة 7

سنضيف الآن خط منقط على حواف الشريط ويمكنك رسمه بطرق عديدة.. لكننا هنا سنقوم بكتابته عوضًا عن رسمه ! .. مستخدمًا الفونت والحجم الموضح بالصورة قم فقط بتكرار النقطة ” . ” مع إعطاءها شفافية

وأضف إليها ظل خفيف كالآتي:

خطوة 8

لديك الشريط الآن يمكنك نسخه ولصقه وعكسه وإضافته لليسار وكتابة ما تريد


  1. محمد حسان
    5 نوفمبر 2011 - 2:09 م

    أهلا وسهلا أستاذة سحر … نورتى مدرستنا … وربنا يتمم عليكى وعلى حضرة الناظر بخير ويرزقكم الزرية الصالحة ( أعضاء هيئة التدريس :)

  2. EsLaM
    9 نوفمبر 2011 - 5:31 م

    شكرا استاذه على الدرس رائع جدا
    ويمكن استخدامه باكثر من طريقة

  3. رواد السيد
    10 نوفمبر 2011 - 6:31 ص

    درس جميل بارك الله بك استاذة سحر بانتظار المزيد من هذه الدروس الشيقة

  4. ابو مازن
    17 أغسطس 2012 - 8:32 ص

    درس جميل والله تسلم ايدك