آنچه طراحان وب می توانند از آثار هنری آلبوم موسیقی بیاموزند

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

یکی از عناصر آن، بهینه سازی تصاویر برای دستگاه های تلفن همراه است. مطمئناً، جنبه‌های فنی مانند وضوح و کاهش اندازه فایل وجود دارد، اما نسبت ابعاد واقعی و محتوای خود تصاویر چطور؟

خب، گاهی اوقات بهترین الهام می تواند از جایی بی ارتباط با رشته شما باشد. در این مورد، جلدهای آلبوم – مخصوصاً آنهایی که برای پخش‌کننده‌های موسیقی قابل حمل، دستگاه‌های تلفن همراه، فروشگاه‌های آنلاین، سرویس‌های پخش جریانی موسیقی و موارد دیگر طراحی شده‌اند.

برای اطلاع از مواردی که جلد آلبوم می تواند در مورد بهینه سازی تصاویر برای دستگاه های تلفن همراه آموزش دهد، به ادامه مطلب مراجعه کنید.

 

بدون درهم ریختگی

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

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

برای مثال فوری، یک جستجوی تصویری برای چیزی انجام دهید. در شبکه ریز عکسها، ببینید کدام تصاویر در آن اندازه کوچکتر خوب به نظر می رسند و کدام یک درهم به نظر می رسند. همه تصاویر در اندازه کامل خوب به نظر می رسند، اما تصاویر بدون درهم و برهمی نیز کوچک به نظر می رسند. در دستگاه‌های تلفن همراه، بیشتر تصاویر شما در این اندازه به نظر می‌رسند. بنابراین اگر می‌خواهید تصاویر خود را برای دستگاه‌های تلفن همراه بهینه کنید، مطمئن شوید که تصاویرتان شلوغ نیستند.

به‌عنوان تصاویر کوچک به نظر می‌رسد دقیقاً همان چیزی است که جلدهای آلبوم برای صفحه‌نمایش‌های کوچک موبایل، فروشگاه‌های آنلاین و سرویس‌های پخش موسیقی طراحی شده‌اند. اگر می‌خواهید تصاویرتان در دستگاه‌های تلفن همراه خوب به نظر برسند، باید روی آن تمرکز کنید

 

روی یک عنصر تمرکز کنید

یک ویژگی تصویر فقط یک عنصر اصلی داشته باشید. مانند اینکه نمی‌توانید به راحتی جزئیات را در یک تصویر کوچک ببینید، وجود عناصر متعدد در تصویر، تشخیص اینکه تصویر چیست را دشوارتر می‌کند. به عنوان یک تصویر با اندازه کامل در لپ‌تاپ، می‌توانید به راحتی چندین عنصر را تشخیص دهید، اما یک تصویر در اندازه کوچک، نه چندان.

به‌عنوان مثال، به‌جای داشتن تصویری از شخصی که توپ را به سمت دروازه می‌زند (عناصر بسیار زیاد: فرد سر به پا، توپ، گل)، تصویر را طوری برش دهید که فقط یک ضربه بزرگنمایی شده روی پا باشد. ضربه زدن به توپ (یک عنصر اصلی: ضربه زدن به توپ). همین ایده بیان می شود (لگد زدن به یک گل، گلزنی، برنده شدن، و غیره) اما دیدن و درک تصویر در دستگاه تلفن همراه بسیار آسان تر است.

 

از بافت های ظریف (یا رنگ های ثابت) استفاده کنید

بافت های شلوغ مانند درهم و برهمی هستند: آنها تمرکز را از عنصر اصلی منحرف می کنند. در حالی که آنها می توانند روی یک صفحه نمایش بزرگ کار کنند – هنوز هم می توانید عنصر اصلی را به وضوح ببینید – در یک صفحه نمایش کوچک موبایل، حواسشان را پرت می کنند. دلیل آن این است که فضای کمتری بین هر عنصر در یک بافت شلوغ وجود دارد، بنابراین وقتی تصویر کوچک‌تر است، بافت شبیه به درب صفحه‌نمایش پاسیو (مجموعه‌ای از مربع‌های کوچک به هم فشرده) به نظر می‌رسد تا یک دیوار کاشی‌کاری شده (که برای آن آسان است. چشم و هر عنصر به راحتی قابل تشخیص است).

وقتی یک بافت ظریف است، همچنان همان مشکل یک بافت شلوغ را خواهد داشت، اما به سختی قابل توجه خواهد بود، که باعث نمی شود هنگام مشاهده در صفحه تلفن همراه حواسش پرت شود. به جای پس‌زمینه‌ی راه راه نازک سیاه و سفید، پس‌زمینه‌ی طرح مربع بزرگ به رنگ سفید و خاکستری را در نظر بگیرید. یا چند ابر سبک به جای طلوع ابر بزرگ. در یک صفحه کوچک، تقریباً ناپدید می شود، بنابراین بافت بی ربط می شود و تمرکز را روی عنصر اصلی حفظ می کند.

البته، انتخاب تصویر حتی بهتر، تصویری است که عمدتاً رنگ‌های ثابت دارد. سپس به طور کلی مشکل را برطرف می کنید. بزرگ، کوچک، لپ تاپ، دستگاه تلفن همراه؛ فرقی نمی کند اندازه تصویر چقدر باشد، رنگ ثابت یکسان به نظر می رسد و حواس را پرت نمی کند. اگر به مثال آسمان برگردیم، به جای آسمانی با چند ابر پاشیده، یک آسمان آبی روشن خواهد بود. پس‌زمینه آسمان صاف در صفحه‌نمایش تلفن همراه تمیزتر به نظر می‌رسد و اصلاً حواس‌تان را پرت نمی‌کند.

این فقط برای پس‌زمینه اعمال نمی‌شود، بلکه هر عنصری را شامل می‌شود. شخصی که پیراهن پوشیده، نقش روی یک شی و هر چیز دیگری. هرچه بافت‌های ظریف‌تر (یا رنگ‌های یکدست‌تر به جای آن مشخص شوند)، تصویر تمیزتر و قابل تشخیص‌تر در دستگاه تلفن همراه کوچک‌تر به نظر می‌رسد.

 

کنتراست

اگر بافت‌ها میکرو تصویر باشند، با ماکرو، کل تصویر سروکار دارد. در حالی که میکرو نباید حواس را پرت کند، ماکرو باید تا حد امکان به وضوح قابل مشاهده باشد. و این معمولاً به معنای کنتراست بالاتر برای تصاویر شماست. مطمئن شوید که عنصر اصلی به راحتی قابل مشاهده است و از تصویر خارج می شود.

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

سعی کنید تصاویری با کنتراست طبیعی داشته باشید. دو رنگ متضاد. یک عنصر رنگارنگ در پس زمینه خاکستری (یا هر عنصر در پس زمینه سفید). یک توپ سفید روی یک چمن سبز. اساساً، عنصر اصلی نقطه کانونی است و کنتراست بالاتر با واضح‌تر و قابل مشاهده‌تر کردن عنصر اصلی آن را تقویت می‌کند – که هنگام مشاهده یک تصویر کوچک در یک دستگاه تلفن همراه مهم است.

اگر کنتراست طبیعی زیادی در تصویر خود ندارید، می توانید حداقل کنتراست تصویر را با استفاده از ویرایشگر تصویر خود افزایش دهید. با استفاده از مثال خاکستری به خاکستری فوق الذکر، جسم خاکستری روشن روشن تر، پس زمینه خاکستری تیره تیره تر می شود و جسم بیشتر از تصویر خارج می شود. البته یکپارچگی تصویر باید دست نخورده باقی بماند، اما افزایش کنتراست باعث می‌شود که عنصر اصلی در یک دستگاه تلفن همراه بیشتر قابل تشخیص باشد. از آنجایی که در نهایت این چیزی است که یک شخص به آن نگاه می کند، نه پس زمینه، که باید در پشت باقی بماند.

 

مربع باشد

این یکی مستقیماً از جلدهای آلبوم گرفته شده است، که مربع هستند، تصاویر شما را تا حد امکان مربع نگه دارید. بدیهی است که اگر کمی مستطیل شکل افقی یا عمودی باشد خوب است، اما نکته این است که سعی کنید تصاویرتان تا حد امکان به یک مربع نزدیک شوند.

دلیل؟ در دستگاه‌های تلفن همراه، به‌ویژه دستگاه‌های پرتره‌گرا که معمولاً مردم به صورت عمودی مشاهده می‌کنند، شما این تجمل را ندارید که فرض کنید مردم در یک صفحه عریض کامل تماشا می‌کنند. اگر یک تصویر خیلی عریض باشد، روی یک صفحه نمایش کوچک که به صورت عمودی تراز شده است، مانند یک برش افقی به نظر می رسد. همین امر در مورد تصاویر مستطیل شکل بلند نیز صدق می کند – یک فرد برای دیدن کامل آن باید پیمایش کند.

وقتی تصاویر خود را تا حد امکان مربع نگه دارید، تطبیق پذیری آنها را به حداکثر می رسانید. فرقی نمی‌کند که شخصی روی یک دستگاه تلفن همراه زوم می‌کند، تمام طول آن کوچک‌نمایی شده است یا هر چیز دیگری، تصویر کاملاً قابل مشاهده است و صفحه نمایش بسیار کوچک را در دستگاه تلفن همراه به حداکثر می‌رساند.

با مربع بودن، جلدهای آلبوم برای دستگاه‌های تلفن همراه، فروشگاه‌های آنلاین و سرویس‌های پخش موسیقی مناسب بود. به راحتی قابل مرور است، به طور کامل در هر اندازه قابل مشاهده است و برای طراحان رابط کاربری آسان است که تصویر را در هر کجای صفحه قرار دهند. اگر تصاویر شما تا حد امکان مربع باشد، تطبیق پذیری مشابهی در دستگاه های تلفن همراه خواهند داشت.

 

بهینه سازی تصاویر برای دستگاه های تلفن همراه

موبایل همچنان رواج بیشتری پیدا می‌کند، بنابراین مهم است که تصاویر را برای دستگاه‌های تلفن همراه بهینه کنیم – که چیزی بسیار برجسته است که مردم خواهند دید. امیدواریم این درس‌ها از جلد آلبوم‌های بهینه‌سازی شده برای موبایل، بینش مفیدی ارائه دهد.

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

با در دست داشتن آن، تصاویر خود را در دستگاه های تلفن همراه عالی جلوه دهید.

 

نوشته شده به طور انحصاری برای WDD توسط اولگ موخوف، موبایل‌ترین نوازنده الکترونیک و وب جهان + علاقه مندان به طراحی بصری. او موسیقی می سازد که تلاقی بین چهار تت و Aphex Twin است. با او ارتباط برقرار کنید

آیا هنگام انتخاب تصاویر برای طرح های خود به دستگاه های تلفن همراه فکر می کنید؟ آیا با موبایل شروع می کنید یا تصاویر مناسب دسکتاپ را متناسب با دستگاه ها تنظیم می کنید؟ در نظرات زیر به ما اطلاع دهید.