الصفحات المقصودة هي أمر شائع إلى حد ما على شبكة الإنترنت ولها هدف محدد: تشجيع المستخدم على اتخاذ إجراءات. وعادة ما يريدونه هو العمل من أجل المستخدم لشراء المنتج، والاشتراك في خدمة أو تقاسم صفحة. لحسن الحظ، لا يمكننا، من خلال تصميم، وتحسين صفحة لزيادة فرص حدوث ذلك.
AIDA هو المصطلح الذي يصف عملية من خلال الذهاب الى عند بيع المنتج أو الخدمة. اختصار لتقف، الانتباه الرغبة، الفوائد والعمل.
على الرغم من أنه هو مصطلح التسويق، ويمكننا استخدام تصميم لتحقيق كل
واحدة من هذه الخطوات - وهذا هو بالضبط ما سوف تقوم به في البرنامج
التعليمي التالي. مستعد؟ دعونا نبدأ.
الخطوة 1: إعداد وثيقة
دعونا نبدأ من خلال إنشاء لدينا وثيقة Photoshop. بدء ملف جديد عن طريق اختيار ملف> جديد وتحديد عرض 1000px وارتفاعه 1850px. وينبغي وضع هذا القرار إلى 72، إلى وضع الألوان RGB ولون الخلفية إلى الأبيض.
الخطوة 2: إضافة دليل
ونحن نذهب في الواقع أن تعمل مع عرض تصميم 960px، فإن مساحة إضافية على وثيقة تعطي لنا قليلا من التقاط الانفاس. أدلى 960px أصبح قليلا بعرض قياسي في السنوات القليلة الماضية، من قبل الأطر الشعبية مثل 960.gs .
نحن نذهب إلى إضافة بعض الأدلة على وثيقة لدينا من خلال اختيار عرض> دليل جديد. اضافة الى وجود موقف من 20px واختر "عمودي" لتحديد اتجاهاتها. كرر هذه الخطوة مرة أخرى ولكن يدخل 980px لهذا المنصب.
وينبغي أن لدينا الآن وثيقة مع المرشدين في 20px داخل حد سواء تعطينا عرض 960px للعمل مع.
الخطوة 3: إنشاء رمز التطبيق
نحن نذهب لاستخدام التطبيق لموضوع الصفحة المقصودة وعلى هذا النحو ونحن نذهب لإدراج رمز التطبيق والشعار. هذا لن يكون كيف لك أن تذهب عادة عن تصميم رمز التطبيق، ولكنها سوف تكون لأغراض هذا البرنامج التعليمي.
سنقوم تحديد المواقع شعارنا واللقب في الجزء الأكثر ملاءمة للصفحة - في الزاوية العليا اليسرى. والمضي قدما وإضافة دليل 20 بكسل تحت أعلى الصفحة (عرض> دليل جديد> Horizontal/20px).
ثم، والاستيلاء على أداة مدور مستطيل (U)، وخلق حالة استخدام اللون # 3EBECA. استخدم القائمة المنسدلة في أعلى الصفحة للدخول إلى الإعدادات التالية:
وسيكون هذا "الإطار" من رمز لدينا والآن نحن بحاجة إلى إضافة بعض العمق إلى داخل الشكل. مرة أخرى، استخدام أداة مدور مستطيل (U) لإنشاء شكل مع الإعدادات التالية. استخدام اللون # 148E99.
نحن في حاجة أيضا إلى تطبيق أنماط الطبقة التالية لزيادة التأثير. انقر على الحق هذه الطبقة في لوحات طبقة، حدد "خيارات الدمج" واستخدم الإعدادات التالية:
نحن بحاجة الآن لإضافة قسم داخلي للرمز. مرة أخرى، ونحن نذهب لاستخدام أداة مدور مستطيل (U) لإنشاء شكل باستخدام اللون # 333333 والإعدادات التالية:
نحن بحاجة أيضا لاعطائها السكتة الدماغية الداخلية باستخدام أنماط الطبقة. تطبيق الإعدادات التالية:
الآن نحن نذهب فقط لإضافة رمز النجمة بسيط داخل هذه القاعدة التي أنشأناها. اختر أداة الشكل المخصص (U)، والعثور على خمس الصلبة شكل نجمة مدببة. استخدم الإعدادات التالية:
نحن نذهب أيضا إلى إضافة شبح الهبوط إلى النجم باستخدام أنماط الطبقة والإعدادات أدناه:
أخيرا، للإجهاز رمز لدينا التطبيق، ونحن نذهب لإضافة ظل تحت.
خلق طبقة جديدة أقل من كل من الآخرين والاستيلاء على أداة البيضوي (U) مع
اللون # 666666، وخلق شكل الضحلة التي ليست سوى أضيق قليلا من عرض الرمز.
نحن بحاجة بعد ذلك الى طمس على حواف هذا الشكل لذلك يذهب إلى> تصفية طمس Motion طمس> وتطبيق طمس مع مسافة 25px و زاوية 0.
الظل تبدو الآن أفضل، لكنه لا يزال بعض الحواف الحادة. مرة أخرى نحن بحاجة لتطبيق طمس، ولكن هذه المرة طمس غاوسي. انتقل إلى> تصفية الضبابية طمس غاوسي> واستخدام دائرة نصف قطرها 3.5px.
وهذا هو رمز لدينا التطبيق الكامل.
للحفاظ على المنظمة، فمن الأفضل لنا مجموعة من جميع طبقات الفردية من هذا
الرمز إلى مجلد - ونحن كما سيتم استخدامه مرة أخرى في وقت لاحق. وسوف نحتاج أيضا إلى دفع رمز لنا للحق قليلا للتعويض عن الظل بحيث لا يزال داخل لدينا أدلة.
الخطوة 4: صفحة العنوان
المقبل، ونحن نذهب إلى إضافة اسم التطبيق لدينا جنبا إلى جنب مع الشعار. وينبغي أن ننظر بشيء من النتيجة كما يلي:
الخط المستخدم للنص 'Wonderapp' هو بيباس نويه. بيباس نويه هو خط الحرة التي يمكنك أن تجد هنا - ونحن وسيتم استخدام هذا الخط طوال هذا التصميم. تم تطبيق الإعدادات التالية وأنماط طبقة على النص:
- الخط: بيباس نويه
- حجم: 50pt
- تنعيم: ناعمة
- اللون: # 4E4E4E
من أجل الشعار، تم استخدام 1px، # E0E0E0 الخط الفاصل لفصلها عن اللقب. وقد ترك تباعد 10px جانبي خط. تم استخدام إعدادات الخط التالية للحصول على الشعار:
- الخط: ارييل
- حجم: 18pt
- تنعيم: ناعمة
- اللون: # C7C7C7
وهذا هو مقطع الرأس إكمال. مجموعة من كل هذه العناصر في مجلد باسم "رأس" والانتقال الى الخطوة التالية.