واحدة من التقنيات "الأكثر سخونة" على شبكة الإنترنت اليوم هي التمرير المنظر. لقد ذهبنا جميعًا إلى تلك المواقع التي تقوم فيها بتدوير عجلة التمرير على الماوس الخاص بك ويتحرك المحتوى الموجود على الصفحة لأعلى أو لأسفل أو عبر الصفحة أثناء تدوير عجلة الماوس.
بالنسبة لأولئك الجدد لتصميم الويب والتصميم الجرافيكي ، يمكن أن تكون هذه التقنية صعبة للغاية بسبب كمية CSS المطلوبة.
إذا كان ذلك يصف لك ، فهناك عدد من التطبيقات التي قد تروق فقط لفنانين الرسوم البيانية. وهي تستخدم في الأساس منهجًا مألوفًا لتخطيط الصفحات لصفحات الويب ، مما يعني أنه لا يوجد الكثير من الترميز ، إن وجد. أحد التطبيقات التي صعدت إلى مكان بارز هو Adobe Muse.
إن العمل الذي يقوم به محترفو الرسومات باستخدام موسى مدهش للغاية ويمكنك رؤية عينة من ما يمكنك القيام به من خلال زيارة موقع Muse of The Day . على الرغم من أن محترفي الويب يميلون إلى اعتبار موسى كنوع من "لعبة التصفية" ، إلا أنه يستخدم من قبل المصممين لإنشاء نماذج متنقلة ونماذج ويب سيتم تسليمها في النهاية إلى المطورين على فريقهم.
إحدى التقنيات التي يسهل إنجازها بشكل لا يصدق مع موسى هي التمرير من المنظر ، وإذا كنت ترغب في مشاهدة النسخة الكاملة من التمرين ، فسنتنقل ، أشر إلى متصفحك إلى هذه الصفحة. عندما تقوم بتدوير بكرة تمرير الماوس ، يبدو أن النص يتحرك إلى أعلى أو أسفل الصفحة ، وتتغير الصور.
هيا بنا نبدأ.
01 من 07
قم بإنشاء صفحة ويب
عند تشغيل موسى ، انقر فوق رابط الموقع الجديد . سيؤدي ذلك إلى فتح خصائص الموقع الجديد . سيتم تصميم هذا المشروع لتطبيق سطح المكتب ويمكنك تحديده في القائمة المنسدلة التنسيق المبدئي . يمكنك أيضًا تعيين القيم الخاصة بعدد الأعمدة ، وعرض الميزاب ، والهوامش ، والحشو. في هذه الحالة ، لم نكن نشعر بالقلق بشكل كبير من هذا ونقرت ببساطة على موافق .
02 من 07
تنسيق الصفحة
عند تعيين خصائص الموقع والنقر فوق موافق ، يتم نقلك إلى ما يسمى طريقة عرض الخطة . توجد صفحة رئيسية في الأعلى وصفحة رئيسية في أسفل النافذة. نحن بحاجة فقط صفحة واحدة. للوصول إلى Design View ، قمنا بالنقر المزدوج على الصفحة الرئيسية التي فتحت الواجهة.
على اليسار توجد بعض الأدوات الأساسية وعلى اليمين مجموعة متنوعة من اللوحات المستخدمة لمعالجة المحتوى على الصفحة. على طول الجزء العلوي توجد الخصائص ، والتي يمكن تطبيقها على الصفحة ، أو أي شيء محدد في الصفحة. في هذه الحالة ، أردنا الحصول على خلفية سوداء. لإنجاز ذلك ، نضغط على رقاقة ألوان مستعرض الملء واخترت اللون الأسود من Color Picker.
03 من 07
أضف النص إلى الصفحة
الخطوة التالية هي إضافة بعض النص إلى الصفحة. لقد اخترنا أداة النص ووجهنا مربع نص. أدخلنا كلمة "مرحبا" ، وفي خصائص تعيين النص إلى Arial ، 120 بكسل أبيض. مركز الانحياز.
ثم قمنا بالانتقال إلى أداة Selection tool ، بالنقر فوق Textbox وتعيين موضعها Y إلى 168 بكسل من الأعلى. مع تحديد مربع النص ، قمنا بفتح لوحة Align وحاذيت مربع النص إلى المركز.
أخيرًا ، مع تحديد مربع النص ، قمنا بالضغط على مفتاحي Option / Alt و Shift وقمنا بإجراء أربع نسخ من مربع النص. لقد غيرنا النص والموضع Y من كل نسخة إلى:
- إلى 871
- الرسومات ، ١٦٢١
- برنامج ، 2371
- @ About.com ، 3181
ستلاحظ ، عند تعيين موقع كل مربع نص ، تغيير حجم الصفحة لاستيعاب موقع النص.
04 من 07
إضافة مواضع الصور
الخطوة التالية هي وضع الصور بين كتل النص.
الخطوة الأولى هي اختيار أداة المستطيل ورسم مربع لدينا يمتد من جانب واحد من الصفحة إلى الآخر. مع تحديد المستطيل ، قمنا بتعيين ارتفاعه إلى 250 بكسل وموقعه Y إلى 425 بكسل . تتمثل الخطة في جعلها دائمًا تمتد أو تتقلص لعرض الصفحة ليتناسب مع إطار عرض متصفح المستخدم. لتحقيق ذلك ، نقرنا على زر العرض بنسبة 100٪ في الخصائص. ما يفعله هذا هو إلغاء رمادي لقيمة X وللتأكد من أن الصورة دائمًا ما تكون 100٪ من عرض إطار العرض في المتصفح.
05 من 07
إضافة صور إلى العناصر النائبة للصورة
عند تحديد المستطيل ، نقرنا على رابط التعبئة - وليس على رقاقة اللون - ثم نقرنا على الحبر الأول لإضافة صورة في المستطيل. في منطقة Fitting ، اخترنا Scale To Fit واضغطنا على المقبض المركزي في منطقة الموضع للتأكد من قياس الصورة من مركز الصورة.
بعد ذلك ، استخدمنا تقنية Option / Alt-Shift-drag لإنشاء نسخة من الصورة بين الكتلتين النصيتين الأولى ، وفتح لوحة Fill و مبادلة الصورة بأخرى. فعلنا ذلك للصورتين المتبقيتين كذلك.
مع وجود الصور في المكان ، حان الوقت لإضافة الحركة.
06 من 07
أضف Parallax Scrolling
هناك عدد من الطرق لإضافة التمرير المنظر في Adobe Muse. سنوضح لك طريقة بسيطة للقيام بذلك.
عند فتح لوحة التعبئة ، انقر فوق علامة التبويب Scroll ، وعند فتحها ، انقر فوق مربع الاختيار Motion .
سترى القيم للحركة الأولية والنهائية . يحدد ذلك مدى سرعة انتقال الصورة بالنسبة إلى عجلة التمرير. على سبيل المثال ، ستحرك قيمة 1.5 الصورة 1.5 مرة أسرع من العجلة. استخدمنا قيمة 0 لقفل الصور في مكانها.
تحدد السهام الأفقية والعمودية اتجاه الحركة. إذا كانت القيم هي 0 ، فلن تتزحزح الصور بصرف النظر عن السهم الذي تنقر عليه.
القيمة المتوسطة - مفتاح الوظيفة - تعرض النقطة التي تبدأ بها الصور في التحرك. يبدأ السطر فوق الصورة ، لهذه الصورة ، 325 بكسل من أعلى الصفحة. عندما يصل التمرير إلى القيمة التي تبدأ الصورة في التحرك. يمكنك تغيير هذه القيمة إما عن طريق تغييرها في مربع الحوار أو عن طريق النقر فوق النقطة الموجودة أعلى السطر إما لأعلى أو لأسفل.
كرر هذا للصور الأخرى على الصفحة.
07 من 07
اختبار المتصفح
عند هذه النقطة ، لقد انتهينا. أول شيء فعلناه ، لأسباب واضحة ، كان تحديد File> Save Site . لاختبار المتصفح ، اخترنا ببساطة ملف> معاينة الصفحة في المتصفح . هذا فتح المتصفح الافتراضي للكمبيوتر لدينا ، وعندما فتحت الصفحة ، بدأنا التمرير.