5 طرق لتحسين الصور على موقع الفرقة الخاص بك

في الوقت الحاضر ، يمكن أن تظهر مواقع الويب عبر مئات من أحجام الشاشات المختلفة ، حتى في اتجاهات مختلفة على نفس الجهاز (أفقي أو عمودي). يمكن أن تكون شاشات العرض التي يرى الأشخاص موقعك عليها بضع مئات من البكسل فقط على الهاتف المحمول ، ويصل عرضها إلى آلاف البكسل على الشاشات العريضة الأحدث عالية الدقة.

نظرًا لأن التقنيات الجديدة قدمت مجموعة من أحجام الشاشات التي يمكن للأشخاص رؤية موقعك بها ، فقد تطلبت أيضًا طريقة جديدة للتفكير في تصميم الموقع والتي تضمن أن تبدو المواقع رائعة على أي شاشة - كبيرة أو صغيرة ، طويلة أو عريضة.

هذا هو المكان الذي يبدأ فيه مفهوم تصميم موقع الويب "المتجاوب"!

كيف يعمل التصميم سريع الاستجابة

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

أي صورة تقوم بتحميلها على موقع Bandzoogle الخاص بك سوف تمتد وتتسع حسب حجم "المساحة" الموجودة في الصورة.

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

دعونا نلقي نظرة على خمس طرق لتحسين الصور على موقع الويب الخاص بالفرقة للحصول على التصميم المناسب تمامًا.

1. اختر الصورة الصحيحة

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

هذا يعني أنه يتم الحفاظ على نسب الصورة على جميع الأجهزة ، وستحاول الصور دائمًا "ملء" المساحة الموجودة بها بأفضل شكل ممكن. يمكن أن يؤدي هذا إلى ظهور صور رأس تحتوي على أجزاء من الصورة تظهر "مقطوعة" - وهذا أمر لا مفر منه في التصميم سريع الاستجابة ، ولكن اختيار صورة يتم قصها جيدًا لتناسبها سيساعد.

الفنان: Tragedy Ann

سطح المكتب وشاشة عريضة

على الكمبيوتر المحمول ، سيتم تغيير حجم صور الرأس بالنسبة إلى عرض الشاشة. على جهاز محمول ، سيتم تغيير حجم الصورة بناءً على ارتفاع الشاشة.

بمعنى آخر ، سيتم دائمًا تغيير حجم صورتك بالنسبة إلى أطول جانب من المساحة.

الآن ، تخيل هذا على شاشة بعرض 1000 بكسل - شاشات سطح المكتب / الكمبيوتر المحمول أعرض من ارتفاعها ، ودعنا نقول أن هذه الشاشة نفسها يبلغ ارتفاعها أيضًا 570 بكسل (حوالي نسبة 16: 9 للعديد من شاشات العرض).

في هذا السيناريو ، يبلغ عرض صورتنا 1000 بكسل على هذه الشاشة ، ولكن تم تصغيرها إلى ارتفاع 900 بكسل ، مما يعني أنه في مساحة لا يتجاوز ارتفاعها 570 بكسل ، ينتهي الأمر بقطع أكثر من 300 بكسل في أعلى وأسفل الصورة. صور مقطوعة الرأس ، yikes!

التوجه العمودي والجوال

قم بإجراء نفس العمليات الحسابية باستخدام مثال شاشة الهاتف المحمول الذي يبلغ ارتفاعه 600 بكسل - لنفترض أن نفس الشاشة يبلغ عرضها حوالي 320 بكسل فقط. عندما تتكيف الصورة مع هذا العرض ، سيتم قطع أكثر من نصف الصورة على كلا الجانبين (تذكر أن حجم الصورة يصل إلى 667 بكسل على شاشة عمودية عالية 600 بكسل).

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

حسِّن ، ثم حمِّل ملفاتك

من الاستعارة الجيدة التي يمكنك استخدامها أن تتخيل أنك في معرض فني يؤطر صورًا - إذا وضعت المناظر الطبيعية مونيه في إطار صورة "أم ويسلر" ، فإن هذا الإطار سيقطع الكثير من زنابق الماء اللطيفة على جانب لوحتك.

هذا هو المكان الذي يمكن أن يصبح فيه الأمر صعبًا - لا يمكن لمنشئي المواقع توقع الصور التي تريد استخدامها (أو ما يظهر فيها) ، ولكن اختيار الصور المراد إضافتها يعد خطوة أولى جيدة.

بعض النصائح السهلة لاختيار الصورة المناسبة لرأسك:

• تجنب استخدام الصور التي تم "اقتصاصها عن قرب" - فكلما زادت المساحة أو المساحة المتروكة حول "تركيز" صورتك ، قل احتمال قطع التركيز على شاشات العرض المختلفة.
  
• استخدم صورًا كبيرة - تعمل 2000 × 1800 بحجم 72 نقطة في البوصة عادةً بشكل جيد مع معظم سمات Bandzoogle ، وتساعد على التأكد من أن صورك تبدو رائعة على كل شاشة.
  
• حاول استخدام الصور القريبة من "المربع" في الاتجاه - ليس من الضروري أن تكون صورة مربعة مثالية ، ولكن أقرب ما يمكنك الحصول عليه من الارتفاع والعرض المتساويين في صورتك سيعمل بشكل رائع على أي شاشة عرض. تمنحك هذه المساحة الإضافية مساحة للتنفس بغض النظر عن الاتجاه الذي يتم عرض موقعك فيه.
  
• حاول تجنب استخدام الصور التي تحتوي على نصوص أو شعارات في الصورة نفسها - فأنت بالتأكيد لا تريد نصًا مهمًا أو قطع علامتك التجارية للزائرين!
  
• أضف شعارك بدلاً من ذلك ضمن خيار "العنوان / الشعار" لمحرر سمة Bandzoogle. ثم أضف أي نص تريده في العنوان إلى "ميزة رأس الحث على اتخاذ إجراء". بهذه الطريقة ، لن يتم قطع رسائلك المهمة بواسطة حافة الشاشة.

الفنان: Martin and James

2. اقتصاص ليناسب الموضوع الخاص بك

إذا كان لديك صور تم تحميلها بالفعل ، فإن Bandzoogle يأتي مع بعض الأدوات الرائعة لجعلها تظهر بشكل أفضل!

ستعرض بعض تصميمات القوالب الخاصة بنا "ملء الشاشة" عند تحميلها ، ولها ارتفاعات رأس قابلة للتعديل ، ويمكنها عرض صور رأس في مساحة محدودة ، بأشكال مختلفة (مثل قالب Spotlight) ، أو حتى تعيين صورة رأسك كخلفية صفحاتك (شريحة ، على سبيل المثال).

من السهل تجربة سمات مختلفة بخيارات رأس مختلفة - يمكنك تغيير تصميم السمة عبر "تعديل السمة"> "عرض السمات" ، وتحديد السمة التي تريدها ، وتخصيص هذا المظهر في محرر التصميم ، والنقر فوق "حفظ" ونشر التغييرات.

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

في "تحرير المحتوى" ، انقر فوق صورة العنوان في علامة تبويب تحرير المحتوى ، ثم في محرر الرأس ، انقر فوق رابط "اقتصاص" أسفل الصورة المصغرة لصورة العنوان.

يمكنك بعد ذلك ضبط التكبير / التصغير باستخدام شريط تمرير التكبير / التصغير ، والنقر فوق / سحب الصورة إلى موضع نسبي.

3. تعيين نقطة محورية

عند اقتصاص صورة الرأس في محرر الرأس ، قد تلاحظ أيضًا نقطة زرقاء صغيرة فوق الصورة - وذلك لتعيين "النقطة المحورية" الخاصة بك. ما يفعله هذا هو التأكد من أن مكان وضع هذه النقطة على الصورة ، سيكون دائمًا "موضع التركيز" ، بغض النظر عن حجم أو اتجاه صورتك.

يمكن أن يكون هذا مفيدًا حقًا للصور حيث لا يكون "تركيز" صورتك التي تم تحميلها في المنتصف تمامًا - سيضمن النقر / سحب النقطة المحورية فوق تركيز الصورة أنه بغض النظر عما يتم قطعه على الشاشات المختلفة ، يكون التركيز في المقدمة والوسط .

بمجرد تعيين الاقتصاص ، والتكبير ، والنقاط البؤرية ، ما عليك سوى النقر فوق "حفظ" لتطبيق الاقتصاص ، ثم النقر فوق "حفظ" مرة أخرى في محرر الرأس لتطبيق التغييرات.

الفنانة: Anna Bassy

4. تخصيص ارتفاع رأس المحمول

يتم تشويش الخط الفاصل بين شاشة الهاتف المحمول وغير شاشة الهاتف المحمول طوال الوقت - خذ جهازًا لوحيًا على سبيل المثال. ليست كبيرة بما يكفي لتكون "سطح مكتب" ، ولكنها ليست صغيرة بما يكفي لشاشة هاتف محمول.

عندما تشاهد مواقع على الكثير من الأجهزة اللوحية في "أفقي" ، قد يظهر الموقع بقدر ما يظهر على شاشة سطح المكتب أو الكمبيوتر المحمول. اقلب هذا الجهاز اللوحي على أنه "صورة" ، ويمكن أن يتغير كل شيء - يمكن أن يؤدي تقليل عرض الشاشة إلى تقديم المزيد من عناصر "الجوال" أقرب إلى ما قد تراه على الهاتف.

يتم تعيين معظم سمات Bandzoogle افتراضيًا لإظهار رأس "ارتفاع كامل" في الشاشات ذات الاتجاه الرأسي - قد يكون هذا مشكلة إذا كانت صورة الرأس الخاصة بك تحتوي على تركيز باتجاه الجانبين الأيمن والأيسر.

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

بمجرد التمكين ، انقر فوق رمز "معاينة الجوال" في محرر السمات ، واضبط شريط التمرير "ارتفاع الرأس (الجوال)" - يمكن أن يساعد ذلك في ضبط المساحة الموجودة في صورتك لتتناسب بشكل أفضل مع نسب صورتك ، وإظهار المزيد من صورة. فقط انقر فوق "حفظ" بعد تعيين هذا!

5. إضافة عوامل تصفية

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

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

الفنان: كارلين ويليامز

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

إنه يضمن أن موقعك سيبدو رائعًا وسيكون مقروءًا على كل شاشة متاحة الآن ، وكذلك في المستقبل ، وستعمل مواقع مثل Google على تصنيفك بشكل أفضل إذا كان موقعك يستخدم ممارسات استجابة جيدة.

على المدى الطويل ، يعد أيضًا توفيرًا رائعًا للوقت لأولئك الذين يديرون مواقعك الخاصة - معرفة أفضل طريقة لتحسين الصور والمحتوى الخاص بك هي الخطوة الأولى ، وسيهتم Bandzoogle بالباقي!

أنشئ موقعًا موسيقيًا يحتوي على صور سريعة الاستجابة ببضع نقرات فقط. بناء موقع الويب الخاص بك مع Bandzoogle اليوم!