illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6339 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

واکنشگرا کردن تصاویر (جلسه 2) : تعاریف - قسمت دوم

0 268 ۴ فروردین ۹۵

در این مطلب با ادامه آموزش واکنشگرا کردن تصاویر در خدمتتون هستم.Responsive-Design

Resolution Switching

تغییر دادن Resolution یکی از موارد متداولی هست که مورد استفاده قرار میگیره. این مورد به مجموعه اقداماتی برمیگرده که شما میاید و از تصویری که دارید چنتا تصویر کوچکتر رو میسازید و در مواقع مختلف بعضی از اونا رو لود میکنید. فرض کنید یک تصویر 400*1000 دارید و میاید سایزهای 200*500 و 100*250 هم از اون میسازید. در این روش هیچ تغییری در خود عکس داده نمیشه و فقط تغییر اندازه یا resize انجام میشه.resolution-switching

در این روش شما با توجه به سایز مرورگر و viewport و یا رتینا بودن صفحه نمایش مورد نظر یکی از تصاویر مورد نظر رو لود کرده و نمایش میدین.

Art Direction

هر زمانی که شما برای نمایش دادن بهتر تصویر در سایز مربوطه تغییری در محتوا و یا Aspect ratio تصویر ایجاد کردید، شما دارید از روش Art Direction استفاده میکنید. بعنوان مثال تصویر زیر رو در نظر بگیرید:obama-500

زمانی که این تصویر در سایز بزرگ نمایش داده میشه، همه چی بصورت واضح مشخصه و هم فرد و اتومبیل بصورت کامل قابل تشخیص هستند. اتومبیلی که در پشت سر فرد قرار گرفته مشخص میکنه که این گزارش در چه مکانی و در مورد چه چیزی هست. حالا فرض کنید بخوایم این تصویر رو در سایز کوچک بر روی موبایلها نمایش بدیم. کاربران عکسی همانند تصویر زیر رو خواهند دید:obama-100

در این سایز کاربر به سختی میتونه فرد مورد نظر رو تشخیص بده و اطلاعات مورد نظر رو از روی عکس برداشت کنه. بجای اینکه بصورت ساده بیاید و تصویرتون رو Resize کنید، میتونید از تکنیکهای دیگه ای مثل Crop یا بریدن تصویر استفاده کنید. مثلا بجای تصویر بالا در مرورگرهایی که سایزهای کوچک دارن میتونین تصویر Crop شده زیر رو قرار بدین: obama-100-art

میبینید که در اینجا توجه بر روی فرد مورد نظر قرار گرفته و اون رو Crop کرده و از ماشینی که در پس زمینه قرار داشت، چشم پوشی شده است. با این کار کاربرانی که این تصویر رو میبینن در مقایسه با تصویر بالایی بسیار راضی تر خواهند بود.

بیشتر مواقعی که درون تصویر متنی وجود داره، تکنیک Art Direction در اون انجام خواهد شد. مثلا تصویر زیر  که متعلق به سایت CB2 هست رو ببینید:cb2-870

میبینید که در این تصویر، سه عکس مختلف، 2 لوگو و مقداری متن و یک Stamp قرار داده شده و تقریبا عکس شلوغی هست. ولی این تصویر در سایز بزرگ خیلی واضح هست و کاربر به راحتی میتونه تمام جزئیات اون رو متوجه بشه. حالا فرض کنید که همین عکس رو بخوایم با استفاده از تکنیک Resolution Switching تغییر اندازه بدیم و عرضشو 320 پیکسل قرار بدیم:cb2-320

همونطور که میبینید دیگه متنها اصلا قابل خواندن نیستن و کاربران با دیدن این تصویر اذیت میشن. شما میتونین با استفاده از روش Art Direction تغییری در محتوای این عکس ایجاد کنید و اون رو در سایزهای کوچکتر، بهتر و خواناتر کنید:cb2-mobile

میبینید که 3 عکس به 2 عکس کاهش یافته و متونی که در لوگو قرار گرفته بزرگتر شده تا به راحتی قابل خواندن باشه. متنهای موجود در تصویر قبلی کاملا حذف شده و با اینکار این تصویر خیلی راضی کننده تر هست.

در جلسات بعدی با ادامه مطالب در خدمتتون هستم.

موفق و سربلند باشید.

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram