لقد استثمرت الكثير من الوقت في إعداد تصميم مدونتك ، ولكن لماذا لا يتم عرض الصور بشكل صحيح على الهاتف الذكي؟ لقد تأكدت من استخدام صور عالية الجودة ، لكن حالة الصورة السيئة لا تصحح العرض.
كثير من الناس لا يدركون أن الأجهزة الجديدة (وخاصة تلك من أبل) استخدام تقنية العرض المتقدمة التي تؤثر على طريقة عرض الصور ، لضمان أن يتم عرضها بشكل صحيح على كل من أجهزة الكمبيوتر والهواتف الذكية.
في هذا البرنامج التعليمي سنحاول تقديم القليل من فكرة " شبكية العين جاهزة ونوضح لك كيفية إنشاء صورة شبكية العين.
ولكن قبل أن تبدأ ، خذ الوقت الكافي لإلقاء نظرة على كيفية تثبيت وورد موضوع, كم عدد الإضافات التي يجب أن تثبيت على وورد.
ثم دعنا العمل.
شرح صور الشبكية جاهزة
استمرت شاشات الأجهزة في التحسن من حيث الجودة على مدار السنوات القليلة الماضية ، وقد قامت شاشات Apple على وجه الخصوص بالكثير من العمل لتكون واضحة للغاية ومرئية. التكنولوجيا "عرض شبكية العينهو اسم علامة تجارية لشركة Apple يستخدم لوصف نوع معين من الشاشات بمواصفات معينة.
شاشات شبكية العين تهدف إلى عرض النصوص والصور بأكبر قدر ممكن من الوضوح ، مع عدم وجود وحدات بكسل مرئية للعين المجردة. التحدي الذي يواجه المصممين هو أن العرض يختلف باختلاف حجم شاشة الجهاز ، ومدى قرب المستخدم من الشاشة.
بقسمة العرض المادي للشاشة على عدد البيكسلات المعروضة أفقيًا ، لدينا وحدات البكسل لكل بوصة (نقطة في البوصة ، وتسمى أيضًا ppp للنقاط في البوصة). " DPI عالية تُستخدم للإشارة إلى أي جهاز يحتوي على أكثر من 200 بكسل في البوصة. هذا يشمل جميع أجهزة العرض " شبكية العين (من Apple) وبعض الأجهزة من الشركات المصنعة الأخرى.
كيفية إنشاء صور "Retina Ready" باستخدام Photoshop
إن العمل باستخدام الصور بدقة مزدوجة أو رباعية يعني أنه يجب أن تكون قادرًا على التكبير للاطلاع على كافة التفاصيل الصغيرة ، ولكن الملفات الثقيلة للغاية تسبب مشكلة في الأداء وتحديًا في تخزين الملفات.
كان الحل بالنسبة لمعظم المصممين إما إنشاء طبقات متعددة وتجميعها معًا ، وتنشيطها حسب الحاجة. باستخدام وظيفة "comps » محل تصوير إما للعمل بالدقة الأصلية وتصدير التنسيقات التي يحتاجونها (باستخدام إجراء مثل "retinize").
التحدي في هاتين الطريقتين هو أنه لا يمكنك مشاهدة صور متعددة في نفس الوقت. إذا كنت بحاجة لرؤية الاختلافات في الصور بالأحجام اللازمة ، فأنت بحاجة إلى التبديل بينها أو تصديرها.
من حسن حظنا بالنسبة لعشاق Photoshop ، فقد أضافت Adobe ميزة تجعل إنشاء صور متعددة أسهل. يمكنك الآن إنشاء لوحات قماشية متعددة جنبًا إلى جنب باستخدام لوح الرسم المميز ، وإنشاء أحجام صور متعددة باستخدام المولد. دعونا نرى كيف يعمل.
1 - قم بإنشاء لوح الرسم الأول الخاص بك
أداة لوح الرسم الجديدة، وعرض في فوتوشوب CC 2015، خلف أداة الحركة. يمكنك النقر فوق الأداة في القائمة ، أو استخدام Shift + V للتبديل بين " Déplacement "و" لوح الرسم ":
لإنشاء مستوى عمل ، انقر واسحب منطقة. سيتم عرض لوح الرسم الجديد في لوحة الطبقات بالاسم الافتراضي "Artboard 1".
اقرأ أيضا: لماذا يحتاج المستقلون إلى جدول يومي
2 - تكوين Artboard الخاص بك
يمكنك إضافة طبقات تحتاجها للوحة الفنية الخاصة بك ، وستكون متداخلة كما هي (مما يسمح لك بإنشاء بنية طبقة مناسبة). نقترح إضافة ملفاتك المختلفة ، مثل الأشكال ، بحيث يتم وضعها بالشكل الذي تريده قبل المتابعة إلى الخطوة التالية.
3 - انسخ لوح الرسم الخاص بك
بمجرد إعداد لوح الرسم الأول الخاص بك لتلبية احتياجاتك ، يمكنك تكرارها باستخدام قائمة السياق. انقر بزر الماوس الأيمن على "Artboard 1" في منطقة الطبقات وحدد "Duplicate Artboard". يؤدي هذا إلى إنشاء "Artboard" آخر مشابه ، يحتوي على نفس الهيكل بكل مكوناته:
لاكتشاف أيضا: كيفية تكرار مقال أو صفحة على وورد
4 - ضع أسطح العمل الخاصة بك (Artboard)
الميزة العظيمة لاستخدام اللوحات الفنية هي القدرة على رؤية جميع صورك في نفس الوقت. للقيام بذلك ، ما عليك سوى وضع أسطح العمل وفقًا لاحتياجاتك. هناك عدة طرق للقيام بذلك:
استخدم اللوحة التي تظهر عند تحديد مستوى عمل لإدخال إحداثيات X و Y في الزاوية العلوية اليسرى من مستوى العمل.
اسحب لوح الرسم المحدد إلى أي موضع في فوتوشوب. يتم تنشيط اللوحة الفنية بذكاء ، بحيث يمكنك محاذاة ألواح الرسم المتعددة تلقائيًا بحيث يتم تثبيت مواضعها في المسافات السابقة.
استخدم مفاتيح الأسهم على لوحة المفاتيح لتحريك مستوى عمل محدد.
انظر أيضا البرنامج التعليمي لدينا على: كيفية تصحيح وسائل الإعلام التي لم يعد يعمل على وورد
5 - تغيير حجم ألواح الرسم (عند الضرورة)
إذا كنت بحاجة إلى ضبط حجم ألواح الرسم ، فلديك مرة أخرى عدة خيارات:
- قم بتغيير الحجم باستخدام المقابض التي تظهر عند تحديد لوح الرسم.
- استخدم لوحة الخيارات الموجودة أسفل قائمة "ملف" مباشرةً لاختيار أحجام معدة مسبقًا ، أو عروض أو ارتفاعات ثابتة ، أو للتبديل بين الوضع الرأسي والأفقي.
- استخدم لوحة "الخصائص" التي تظهر عند تحديد سطح العمل لتغيير الحجم والوصول إلى الأحجام المحددة مسبقًا.
6 - ابتكر فنك
يمكنك الآن العمل مع أسطح العمل الخاصة بك واستبدال المكونات وإجراء التغييرات حسب الحاجة. بافتراض أن الإعداد الأصلي لم يتغير ، سيكون لديك الآن صور بكسل مثالية مع جميع المكونات في المكان المناسب.
انظر أيضا لدينا قائمة من المواضيع 26 ورد مع سحب النظام وإسقاط لإنشاء صفحات
7 - قم بإعداد أداة "Generate"
« توليد »يسمح لك بتصدير ألواح الرسم أو الطبقات أو المجموعات باستخدام صيغة تسمية خاصة. هذا اختصار للحفظ على الويب. لتتآكد من ذلك " توليد ممكّن لـ PSD ، انتقل إلى " ملف> توليد> أصول الصورة "(ملف> توليد> صورة ممتلكات):
8 - إعادة تسمية لوحات الرسم الخاصة بك
توليد « فنـون "ل حفظ مكونات الصورة أنت تعمل على أساس الخيارات المحددة في مجموعة الطبقات أو في لوح الرسم الخاص بك. هناك بعض الخيارات التي يمكنك تعيينها:
- تنسيق الملف. أضف امتدادًا (.JPG، GIF. أو بابوا نيو غينيا ) لحفظ الملف المعني على سبيل المثال: header-main.png سيتم حفظ مكونات الصورة في نفس المجلد مثل ملف PSD ، ولكن مع "-assets" كلاحقة.
- ضغط الملف. بعد التمديد ، يمكنك إضافة رقم يشير إلى مستوى الضغط المستخدم. إلى عن على " opt.jpg »يمكنك استخدام النسب المئوية ، وبالنسبة لـ png استخدم البتات الخاصة بها: 8 أو 24 أو 32.
- مقياس الخروج. يمكنك ضبط مقياس الإخراج بإضافة إما النسبة المئوية أو وحدات البكسل (العرض إلى الارتفاع) قبل اسم الصورة (على سبيل المثال 100٪ header-main.png8 ).
- مزيد من الصور. يمكنك تصدير صور متعددة لنفس لوح الرسم (لوح الرسم) باستخدام الفاصلة أو علامة الجمع لفصل أسماء الصور. وبالتالي يمكن أن يكون لكل صورة خياراتها الخاصة طالما أن كل اسم للصورة فريد من نوعه.
يتيح لك الجمع بين هذه الخيارات إنشاء مكونات صورة معقدة للوحات الرسم باستمرار:
إذا كانت الصور القياسية مطلوبة لجميع أسطح العمل لديك ، فإن " توليد يسمح لك بإنشاء معلمة للتطبيق على كل بشكل افتراضي. لإنشاء هذه المعلمة ، أضف طبقة فارغة في الجزء العلوي من المستند الخاص بك مع الخيارات التالية:
- الكلمة الأساسية الافتراضية: يجب أن يبدأ الاسم بهذا لترك الأداة " توليد »حرية استخدامه كخيار افتراضي.
- مقياس الخروج: يسمح لك بضبط مقياس الإخراج بنسبة مئوية أو وحدات بكسل (العرض إلى الارتفاع).
- مجلد / احقة: حدد اسم المجلد الذي يجب حفظ الصور فيهولاحقة لإضافتها إلى أسماء الملفات.
ملخص تنفيذي
هذا كل ما لديك هناك ، حاول تكبير الصورة لنرى كيف يتصرف هذا الأخير. إذا لزم الأمر ، يمكنك اختبار الصورة على مدونة WordPress الخاصة بك عن طريق تحميلها إلى مكتبة الوسائط الخاصة بك.
لا تتردد في طرح الأسئلة حسب الحاجة.
اكتشف أيضًا بعض الإضافات المتميزة لبرنامج WordPress
يمكنك استخدام ملفات أخرى الإضافات وورد لإضفاء مظهر عصري ولتحسين التعامل مع مدونتك أو موقعك على الويب.
نحن نقدم لك هنا بعض الإضافات WordPress المتميزة التي سوف تساعدك على القيام بذلك.
1. الفسفور الابيض في نهاية المطاف الاجتماعي
هذه حزمة نهائية من جميع ميزات الشبكات الاجتماعية التي قد تحتاجها على مدونة WordPress الخاصة بك.
اقرأ أيضا لدينا الإضافات 8 ورد لدمج نظام الحد
معالمه الرئيسية هي: أيقونات الشبكة الاجتماعية متعددة، والمشاركة الاجتماعية التي تسمح لأي شخص مشاركة محتوى موقع الويب الخاص بك (مقالات ، صفحات ، صور ، وسائط) على الشبكات الاجتماعية الشهيرة (Facebook ، Twitter ، Linkedin ، GooglePlus ، بينترست, يسو، العازلة ، رديت، نعرفكم ، سبورل, شينغ، Weibo ، VK ، Delicious) ، قم بالاتصال بموقع الويب باستخدام بيانات اعتماد الوسائط الاجتماعية الخاصة بك ، وهو عداد لعرض أرقام متابعيك ، ومشاركة موقعك الإلكتروني والآخرين.
تحميل | عرض | استضافة المواقع
2. الفسفور الابيض Slick Slider Image كاروسيل برو
إذا كنت متابعا متعطشا لمجموعة Visual Composer ، فإن استخدام المكوّن الإضافي WP Slick Slider هو خيار تحتاج إلى التفكير فيه. مع قوالب 100 المحددة مسبقًا تقريبًا ، ستجد بالتأكيد ما تبحث عنه دون ترميز أي شيء.
هذا خيار يأخذ على محمل الجد ، خاصة بالنسبة لمستخدمي الملحن البصري. ميزاته من بين ميزات أخرى: تخطيط سريع الاستجابة مع دعم السحب والإفلات ، أ الهاتفية القصيرة, RTL والدعم متعدد اللغات، تصميم جميل وأكثر من ذلك بكثير
تحميل | عرض | استضافة المواقع
3. ووردبرس]
اسم هذا وورد البرنامج المساعد يجب أن يخبرك ما هو هذا الأخير تقريبًا. لكننا سوف نقول أن وورد البرنامج المساعد سيساعدك Social Sidebar في إنشاء شريط جانبي على موقع الويب الخاص بك بهدف مساعدتك على القيام بذلك بسرعة مشاركة المحتوى الخاص بك على الشبكات الاجتماعية المختلفة.
تشمل وظائفه: التكامل التلقائي مع ملفات وورد موضوع، القدرة على تكوينه من أعلى إلى أسفل ، والتوافق مع العديد من المتصفحات الحديثة والحديثة ، إمكانية وضع أشرطةك الجانبية من اليسار إلى اليمين، أعلى أو أسفل صفحاتك ، يتم تقديم 4 مجموعات ألوان بشكل أصلي ، وتخطيط استجابة وأكثر من ذلك بكثير.
تحميل | عرض | استضافة المواقع
الموارد الأخرى الموصى بها
تعرف على الموارد الأخرى الموصى بها لمساعدتك في بناء وإدارة موقع الويب الخاص بك.
- 7 وورد الإضافات لخلق تصاميم للمنتجات الخاصة بك
- 4 ووردبريس ملحقات لانقاذ على DropBox
- كيفية إضافة التمرير اللانهائي إلى مدونة WordPress
- 10 WordPress plugins لتلقي التبرعات على مدونتك
وفي الختام
هنا ! هذا كل شيء في هذا البرنامج التعليمي ، وآمل أن يسمح لك بإنشاء صور "Retina" لمدونة WordPress الخاصة بك.
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى المزيد من العناصر لتنفيذ مشاريعك لإنشاء مواقع الإنترنت ، من خلال استشارة دليلنا على إنشاء مدونة وورد.
إذا كانت لديك اقتراحات أو ملاحظات ، فاتركها في قسمنا تعليقات. لا تتردد في شارك مع أصدقائك على الشبكات الاجتماعية المفضلة لديك.
...
