هر تصویر، هر پس زمینه، هر چارچوب تصویری، یک شکل هستند. اغلب این شکل ها مستطیل هستند. این مستطیل بسته به ابعاد هر ابزار، متفاوت است. این مورد می تواند برای طراحان وب سایت چالش برانگیز باشد، مخصوصا زمانی که مجبورید تصویر را کراپ کنید و با ابزارهای مختلف مطابقت دهید. به دلیل این شکل های متفاوت، درک نسبت های ابعادی می تواند به قرار دادن ساده تصاویر و ویدئوها و غیره در وب سایت در هر ابزاری که نمایش داده می شود، کمک کند.
تعریف نسبت های ابعادی
به سادگی، نسبت های ابعادی، روابط میان عرض و ارتفاع یک مستطیل می باشد. زمانی که با نسبت های ابعادی در طراحی سایت های مدرن فکر می کنید، نسبت های ابعادی دارای ترتیب افقی می باشند، زیرا اکثر طراحی سایت ها عرض بیشتری از ارتفاع خود دارند.
نسبت های ابعادی در نسبت های ریاضی نیز تعریف می شوند، به این ترتیب که دو عدد توسط یک دو نقطه میان شان، کنار هم قرار می گیرند.
- عرض: ارتفاع
- طوری که 4 اینچ عرض با 3 اینچ ارتفاع به این ترتیب است: "4:3"
نسبت های ابعادی به سادگی سنجش عرض و ارتفاع یک تصویر وب سایت نیست. ما اندازه ها را به کوچک ترین نسسبت ها کاهش می دهیم. به طور مثال مستطیل تصویری 12 اینچ عرض با 9 اینچ ارتفاع را به نسبت 4:3 معرفی می کنیم.
نسبت های ابعادی تصاویر
یکی از مکان هایی که این نسبت های ابعادی مشاهده می شود، در تصاویر می باشد. هر دوربین IPHONE شما، به شما اجازه می دهد تا یک نسبت خاصی را قبل از عکس برداری تنظیم کنید و سپس می توانید در مرحله کراپ کردن تصاویر، این نسبت ها را نیز تغییر دهید.
نسبت های ابعادی در تصاویر بیشتر مربوط به چگونگی استفاده تصاویر در طراحی وب سایت می باشد. نسبت های ابعادی با اندازه صفحه نمایش مشخص می شود. به طور مثال، پست گذاشتن تصاویر در برنامه INSTAGERAM، تنها تصاویر را با نسبت 1:1 امکان پذیر می سازد.
تصاویر اصولا در اندازه 3:2 در موارد چاپی منتشر می شوند، زیرا کاغذ های چاپی در بیشتر اوقات دارای 3 اینچ در عرض و 2 اینچ در ارتفاع، و 6 اینچ در عرض و 4 اینچ در ارتفاع می باشند. این نسبت های متداول در سنسور دوربین ها و در موارد چاپی باعث می شود که شخص به راحتی تصویری را عکس برداری کند و یا به چاپ برساند.
نسبت های ابعادی امروزه بسیار در ابزارها مورد استفاده قرار می گیرد. صرفه نظر از عکاسان حرفه ای، طراحان وب سایت و هنرمندان، اشخاصی کمی می توانند یک تصویر را برای رسیدن به یک نسبت های ابعادی درست و صحیح، کراپ کنند.
چرا باید تصاویر را کراپ نمود؟ برای افزودن نمای جالب تصویر، برای تصاویر چشم انداز یک صحنه، برای افزودن جذابیت و هیجان انگیز بودن بیشتری از شکل معمولی تصویر و غیره. استفاده از یک شکل استاندارد، هماهنگی و تعادل زیادی را میان عوامل یک طراحی به وجود می آورد.
نسبت های ابعادی در ویدئوها
نسبت های ابعادی در ویدئوها بسیار شبیه تصاویر هستند. شکل تصاویر برای صفحه نمایش های ویدئویی مدرن بسیار متفاوت است، در حالی که جهت افقی و تحرک تصاویر، مشابه نسبت های ابعادی می باشد.
صفحه نمایش های ویدئویی در نسبت های ابعادی به دو گروه تقسیم می شوند: صفحه نمایش های سینمایی و فیلمی و صفحه نمایش های تلویزیونی و دسک تاپ کامپیوترها:
- صفحه نمایش های سینمایی اغلب 1: 85/1 یا 1: 43/1
- صفحه نمایش قدیمی تلویزیون ها اغلب 4:3 و 1: 33/1 و در صفحه نمایش های جدید، عرض آن 16:9 یا 1: 77/1 می باشد.
طراحی ویدئوها برای هر اندازه صفحه نمایش، متفاوت است، اما معمولا فرمت 16:9 استفاده می شود. دیگر گزینه رایج برای طراحان وب سایت، همین مقدار 16:9 می باشد که نسبت استانداردی در اپلیکیشن ها وب سایت ها نظیر YOUTUBE می باشد.
استفاده از یک نسبت ابعادی رایج، حرکت عوامل از مکانی به مکان دیگر را ساده می سازد. این اندازه استاندارد باعث می شود در وقت تان در کراپ و تصحیح کردن ویدئو ها صرفه جویی شود و دیگر نگرانی بابت مطابقت دادن تصاویر و ویدئو در صفحه نمایش های مختلف ندارید و نگران دیده نشدن و از دست رفتن بخش های یک ویدئو یا یک تصویر نباشید.
نسبت های ابعادی در طراحی وب سایت واکنشی
زمانی که درباره طراحی سایت های واکنشی صحبت می کنیم، نسبت های ابعادی بسیار اهمیت دارند. این مورد مخصوصا اگر تصاویر و ویدئوهایی را بخواهید در شکل های مخصوصی در ابزارهای مختلف قرار دهید، اهمیت بیشتری می یابد.
استفاده از یک نسبت ابعادی مخصوص برای تصاویر در CSS، اطمینان حاصل می کند که با کراپ کردن تصاویر هم، مفهوم محتوای سایت تان تغییر نیافته است.
زمانی که درباره طراحی سایت واکنشی صحبت می کنید، شما تصمیمات محدودی برای این تصاویر و نسبت های ابعادی و چگونگی نمایش عواملی طراحی وب سایت در صفحه نمایش دارید. طراحان وب سایت، هر تصویری را به صورت دستی یا با اندکی برنامه نویسی، برای مطابقت یافتن با ابزارهای مختلف تغییر اندازه می دهند. CRAIG BUCKLER دارای آموزش هایی درباره چگونگی انجام این کار می باشد: چگونگی استفاده از نسبت های ابعادی در طراحی سایت واکنشی.
شما احتمالا نیاز خواهید داشت تا به نسبت ابعاد به صورت درصدی بنگرید:
- 4:3= 75%
- 3:2=66/66%
- 16:9=25/56 %
- 8:5= 5/62 %
ساده ساختن زندگی
چرا این نسبت های ابعادی مهم می باشند؟ برای اینکه درک این نسبت ها زندگی مان را ساده می سازد.
به این فکر کنید که چگونه برخی پروژه ها مانند طراحی سایت می تواند در ابزارهای و زمینه های مختلف نمایان شوند: بیزینس کارت، طراحی کارت پستال، طراحی وبسایت طراحی پوستر، تبلیغات ویدئویی. اگر با نسبت های ابعادی رایجی کار کنید و یا عواملی را طراحی کنید که از این نسبت ها رعایت می کند، ترکیب و مطابقت دادن بخش های مختلف یک طراحی می تواند آسان شود و شما مجبور نیستید دوباره برای هر عامل، طراحی خاصی را انجام دهید.
این محاسبه کننده نسبت های ابعادی را مشاهده کنید. این مورد می تواند زمانی بیشتر کاربرد داشته باشد که خودتان به تنهایی نمی توانید این نسبت ها را محاسبه کنید و در زمان تان نیز صرفه جویی می کند.
نسبت های ابعادی متداول
در حالی که نسبت های ابعادی استاندارد تمایل دارد در هر زمانی تغییر یابد- مطابق با تغییرات صفحه نمایش تلویزیون ها از دهه 1950 تا به امروز- می توانید روی اشکال و اندازه های رایجی نیز برنامه ریزی کنید:
- 4:3 (1: 33/1) صفحه نمایش قدیمی تلویزیون و کامپیوتر در ابعاد 768*1024
- 3:2 (1: 5/1)- فرمت های چاپی تصاویر، هم چنین برای کارت پستال ها، بیزینس کارت ها و نامه رسانی های استاندارد
- 1:1- تصویر مربعی شکل استاندارد (در رسانه های اجتماعی و در طراحی وب سایت ها رایج است)
- 16:9 (1: 77/1)- ویدئوهای HD استاندارد و صفحه نمایش های استاندارد بسیار به هم نزدیک شده اند که دارای اندازه های 768*1366 می باشند.
- 5:3 (1: 66/1)- صفحه نمایش های استاندارد اروپایی
- 1: 618/1- نسبت های طلایی
نتیجه گیری
درک نسبت های ابعادی می تواند باعث صرفه جویی در زمان و کارهای اضافه در پروسه طراحی شود. تمامی کاربرد های این نسبت های ابعادی را در پروژه های مختلف ملاحضه کنید. این مورد به شما کمک می کند تا متوجه شوید که در کجا ها تصویر باید کراپ می شود تا با ابزارهای مختلف مطابقت یابد.
اگرچه که این نسبت ها ممکن است نیاز به ریاضیات و محاسبات داشته باشد، اما خیلی از پروژه های طراحی سایتی که روی آن کار می کنید تقریبا از نسبت های ابعادی متداول استفاده می کنند.
