اكاديمية ورشة لونك

كيفية إنشاء صفحة قريباً Coming Soon بإحترافية علي الفوتوشوب

السلام عليكم و رحمة الله و بركاته

نقدم لكم اليوم في هذا الدرس طريقة إنشاء صفحة قريباً Coming Soon و في هذا الدرس سوف تتعلم طريقة إنشاء صفحة قريباً Coming Soon فعالة و بإحترافية علي برنامج الفوتوشوب و سوف نشرح لك خطوة خطوة و بالتفصيل .

إن صفحات Coming Soon هي بسيطة جداً و ليس بها الكثير ، و لكن الكثير يجد صعوبة في إنشائها و هذا لأنها علي الاغلب تنتهي بتصميم باهت غير مميز و ممل و لكن في هذا الموضوع سوف تتعلم طريقة إنشائها بطريقة سهلة و سليمة و رائعة و بكل سهولة و سوف نلفت نظرك للعديد من النقاط المهمة .

الجوانب النموذجية لصفحة Coming Soon

إذا كنت تريد أن تبقي صفحة Coming Soon الخاصة بك بسيطة بقدر الإمكان . ولا تريد أن تضع محتوي كثير ليس له قيمة فإن المحتويات التي يجب ان تكون موجوده هي :

  1. شعار موقعك (لوجو موقعك) .
  2. رسالة ترحيب قصيرة ، أو فقرة تشرح فيها ما مجال موقعك أو ماذا سوف يكون .
  3. نموذج التسجيل في موقعك .

تصميم سهل او بسيط لا يعني ان يكون ممل !

إن صفحة Coming soon قد تكون بسيطة جدا من حيث المحتوي و لكن يجب ان تجذب الانتباه الي التفاصيل بإستخدام الإضاءة الجيدة بحيث تجعلها صفحة لافتة للنظر .

الموارد المستخدمة في هذا الدرس

الصور النهائية

هذه الصورة النهائية للعمل الذي سوف نشرحه :

الخطوة 1

إنشاء مستند جديد بحجم 1000 في 700 بكسل و اجعل الخلفية ملونة ما بين الدرجة 11cbef إلي 0d94cc .

الخطوة 2

الأن قم بإنشاء طبقة جديدة بإسم “highlight” .

و قم بعمل تدرج ابيض شفاف في الوسط العلوي ، ثم قلل من غموض هذه الطبقة إلي 25% و غير وضع مزيج الطبقة إلي “overlay” .

الخطوة 3

قم بتطبيق طبقة تسليط ضوء اخري في اعلي الصفحة ، و هذا للمزيد من الإضافة في الخلفية الخاصة بك :

الخطوة 4

الأن قم بتحميل مجموعة من أشكال الفرش من الرابط الموجود في بداية الموضوع .

قم بإنشاء طبقة جديدة بإسم fractal brushes . و ضع عليها احد الفرشاة البيضاء ، في الوسط بالاعلي من الصورة .

ثم قلل من غموض هذه الطبقة إلي 60% و انتقل إلي  layer لايدر –> layer mask لاير ماسك –> reveal all ثم قم بمسحها من الحواف بفرشاة المسح و يجب ان تكون دقيق .

الخطوة 5

الأن قم بلصق الشعار الخاص بك بحجم الكبير ، و ضعه في الوسط بالاعلي من الصورة الخاصة بك .

ثم قم بتغيير المزيج الخاص بها إلي overlay و اجعل درجة التعتيم الخاصة بها 35% .

إنشئ لاير ماسك ، و امسح حواف هذا الشعار .

الخطوة 6

الأن قم بلصق الشعار الخاص بك كامل في نصف الصورة الخاصة بك .

قم بتفعيل خيار التوهج الخارجي :

إعدادات الوهج الخارجي outer Glow :

وضع المزيج : Overlay
التعتيم : 75%
اللون : ffffff
الانتشار : 0%
الحجم : 15px

الخطوة 7

قم بعمل بعض التعديلات علي النصوص التي باسفل الشعار الخاص بك .

إعدادات النص الصغير الأبيض :

نوع الخط : DejaWeb
تصميم الخط : Bold
الحجم : 18pt
المسافات بين الحروف : -50
اللون : ffffff

اعدادات النص المتوسط الأزرق :

نوع الخط : DejaWeb
تصميم الخط : Bold
الحجم : 22pt
المسافات بين الحروف : -50
اللون : abf3ff

تم إضافة ظل علي النص الخاص بك ، من أجل إضافة التعريف .

اعدادات الشادو (الظل) Drop Shadow :

وضع المزيج : Multiply
اللون : 000000
الغموض : 19%
الزاوية : 90
المسافات : 1px
الانتشار : 0%
الحجم : 1px

الخطوة 8

الأن قم بعمل مستطيلات بأحرف مدورة بحجم 10 بكسل نصف قطر و يكون مكانه تحت نص الترحيب و تأكد من إن هذه المستطيلات بلون 7acce8 .

ثم قم بعمل خيار المزج 1 بكسل علي طبقات المستطيل :

اعدادات Stroke :

الحجم : 1px
الغموض : 25%
اللون : 000000

الخطوة 9

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

قم بعمل خيارات gradient overlay و stroke blending لهذا المستطيل .

اعدادات Gradient Overlay :

وضع المزيج : Normal
الغموض : 100%
التدرج يبداء من : 016386 إلي 0181af
الزاوية : 90

اعدادات Stroke :

الحجم : 1px
الغموض : 30%
اللون : 000000

الخطوة 10

قم بإنشاء طبقة جديدة بإسم “button highlight” .

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

قم بإنشاء شعاع ابيض شفاف متدرج ثم بعدها غير مزيج هذه الطبقة إلي overlay و تقليل التعتيم الخاص بها إلي 15% و هذا يجعل هناك تأثر إضاءة خفي علي زر الارسال الخاص بك .

الخطوة 11

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

و نحن الآن على وشك الانتهاء !

و سوف تصل إلي هذه النتيجة النهائية ، و أرجو أن تكون استمتعت من الدرس ، و أحب أن أعرف رأيك في النتيجة في تعليق .

مهاب البوشي

مهاب البوشي

مهاب البوشي ، مؤسس شركة ترويج 'Trweeg.Com' و مسئول السيو و التسويق في ورشة لونك و مدير اكاديمية ورشة لونك التعليمية .

1 تعليق