واحد 7 / 11

چیدمان و ترکیب: چیدمان، شبکه و سلسله مراتب بصری

سود:

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

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

چرا هوش مصنوعی نمی تواند طرح بندی را به تنهایی انجام دهد؟

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

اصول اولیه ترکیب

  • سلسله مراتب بصری: چیدمان عناصر به ترتیب اهمیت. ابتدا چشم به بزرگترین عنصر/متضاد می رود. ترتیب سرفصل > زیر سرفصل > بدنه > جزئیات تعیین می شود.
  • تراز: چیدمان عناصر بر اساس خطوط نامرئی. از آشفتگی جلوگیری می کند و احساس نظم می دهد.
  • Grid: سیستمی که صفحه را به ستون ها و ردیف های نامرئی تقسیم می کند. قرار دادن ثابت اقلام را تضمین می کند.
  • فضای خالی (فضای منفی): فضای خالی بین عناصر. این اجازه می دهد تا طرح "نفس بکشد" و قابل خواندن باشد. فضای کم = تنگ و آماتور.
  • تعادل: توزیع وزن بصری. می تواند متقارن (آرام) یا نامتقارن (پویا) باشد.
  • کنتراست: جهت دادن توجه بر اساس تفاوت در اندازه، رنگ یا ضخامت.
  • نقطه کانونی: اولین جایی که چشم می رود. باید آگاهانه طراحی شود
نکته: هنگام ایجاد تصاویر، در خط فرمان بگویید «فضا برای متن بگذارید» (مثلاً «یک سوم بالا خالی، ساده است»). به این ترتیب، بعداً هنگام افزودن متن به تصویری هوش مصنوعی گیر نخواهید کرد و می توانید یک سلسله مراتب ایجاد کنید.

یک طرح را مرحله به مرحله تنظیم کنید

  1. هدف را تعیین کنید: این طرح چه کاری باید انجام دهد؟ (اطلاعیه، فروش، اطلاع رسانی). ترتیب اولویت را تعیین می کند.
  2. موجودی محتوا: عنوان، متن جایگزین، تصویر، آرم، تماس (دکمه/CTA) چیست؟
  3. یک سلسله مراتب ایجاد کنید: مهمترین عنصر را در قوی ترین موقعیت و اندازه قرار دهید.
  4. انتخاب شبکه: ساختار ستونی را که در آن عناصر را تراز می‌کنید، تعیین کنید.
  5. ایجاد تصویر با هوش مصنوعی: پس‌زمینه/عنصر با نسبت‌های مناسب، با فضایی برای متن ایجاد کنید.
  6. تراز کردن در برنامه طراحی: تراز کردن متن، آرم، تماس. فضاها را تنظیم کنید
  7. تست: بزرگنمایی کنید، از دور نگاه کنید، ابتدا بررسی کنید که چشم کجا می رود.

تکنیک های عملی برای هدایت چشم

ترکیب بندی در واقع هنر هدایت چشم است. نگاه بیننده به طور تصادفی سرگردان نیست. نشانه های خاصی را دنبال می کند و یک طراح خوب آگاهانه از آنها استفاده می کند. اول اندازه و کنتراست: بزرگترین و متضادترین عنصر اول چشم را به خود جلب می کند، بنابراین مهم ترین پیام را در آنجا قرار دهید. دوم خطوط پیشرو است: خطوط طبیعی در تصویر (مسیر، دسترسی به بازو، لبه میز) چشم را به نقطه خاصی می برد. قرار دادن محصول یا عنوان در جایی که این خطوط به پایان می رسد تأثیر را افزایش می دهد. سوم، تأکید بر فضا: فضای خالی بزرگ در اطراف یک عنصر آن عنصر را برجسته می کند - کلمه ای که به تنهایی در یک صفحه شلوغ ایستاده است قدرتمند است. چهارم، جهت خواندن: در بیشتر فرهنگ ها، چشم در الگوی "Z" یا "F" از سمت چپ بالا به سمت راست پایین حرکت می کند. بنابراین قرار دادن لوگو در بالا سمت چپ و تماس (دکمه) در پایین سمت راست جریانی بصری ایجاد می کند. هنگام تولید پس‌زمینه با هوش مصنوعی، می‌توانید این تکنیک‌ها را در دستور کار خود قرار دهید: «ترکیبی که از پایین سمت چپ به سمت راست بالا هدایت می‌شود» یا «تک عنصر در مرکز، فضای وسیع اطراف آن» و غیره. بنابراین، تصویر نه تنها زیبا می‌شود، بلکه به ابزاری تبدیل می‌شود که پیام را به ترتیب درست منتقل می‌کند.

قالب - توجه ویژه

هر رسانه قانون خاص خود را دارد: پست اینستاگرام 1:1 یا 4:5، داستان 9:16، بنر وب 16:9. مفهوم منطقه امن مهم است: عناصر مهم را از لبه نگه دارید تا بریده نشوند یا زیر عناصر رابط (نمایه در داستان، دکمه ها) قرار نگیرند. در چاپ، یک خونریزی لازم است: برای جلوگیری از خطوط سفید در حاشیه برش، طرح را کمی از لبه گسترش دهید.

سه کیف کوچک

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

مورد 2 - خطای ناحیه امن. در طراحی داستان، شعار مهم در پایین بود. زیر دکمه "پیمایش" در پخش پنهان بود و ظاهر نشد. با قانون منطقه امن، شعار بالا و وسط قرار گرفت. در کمپین بعدی، پیام واضح بود و نیازی به طراحی مجدد نبود.

مورد 3 - چاپ خونریزی. یک بروشور بدون خونریزی چاپ شد. خطوط نازک سفید روی لبه ها ظاهر شد و 300 قطعه از بین رفت (تقریباً 1200 لیر از دست رفت). کار بعدی 3 میلی متر خونریزی به طرح اضافه شد. برش تمیز بیرون آمد.

قالب های قابل کپی

1) ایجاد یک پس زمینه با فاصله برای متن:

یک تصویر پس زمینه برای طراحی [رسانه] ایجاد کنید. نسبت: [1:1 / 9:16 / 16:9]. سوم بالا را صاف و خالی نگه دارید (برای عنوان). لحن برند: [صفت]. قرار دادن متن/لوگو خوانا. رنگ ها با پالت مطابقت دارند: [رنگ ها].

2) طرح سلسله مراتبی:

یک طرح سلسله مراتبی بصری برای طرح زیر ایجاد کنید. هدف: [اطلاعیه/فروش/اطلاعات]. عناصر: [عنوان، متن جایگزین، تصویر، آرم، فراخوان]. به هر عنصر ترتیب اهمیت، موقعیت پیشنهادی و اندازه نسبی بدهید. مسیری را که چشم دنبال خواهد کرد (کانونی → ثانویه) شرح دهید.

3) توصیه شبکه و تراز:

یک شبکه ساده و طرح تراز برای محتوای زیر پیشنهاد کنید: [فهرست محتوا]، نسبت [x]. از چند ستون استفاده کنم، عناصر را چگونه تراز کنم، چقدر فاصله (حاشیه) بگذارم؟ آن را ساده و متعادل نگه دارید.

4) کنترل طرح:

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

اعلان ضعیف / اعلان قوی

ضعیف: یک تصویر بنر تخفیف بسازید و بگویید 50%.

نتیجه: هوش مصنوعی "50%" خراب می نویسد، عناصر به طور تصادفی مرتب شده اند، شما نمی توانید متن را ویرایش کنید. قابل استفاده نیست.

قدرتمند: برای کمپین فروش یک تصویر پس‌زمینه تولید کنید: نسبت 4:5، زنگ‌های پرانرژی گرم، فضای ساده بزرگ برای متن در بالا سمت چپ، محصول در پایین سمت راست. قرار دادن متن خواندنی؛ عنوان، اطلاعات "50%" و دکمه را در برنامه طراحی تراز می کنم.

نتیجه: یک پس‌زمینه قابل ویرایش و سلسله مراتبی که فضایی را برای متن باز می‌کند.

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

جدول اصول ترکیب

اصل

آنچه فراهم می کند

نکته کاربردی

سلسله مراتب

دستور خواندن

مهم ترین را بزرگترین/کنتراست کنید

هم ترازی

حس نظم

خطوط نامرئی را ردیف کنید

شبکه

سازگاری

از سیستم ستون استفاده کنید

فضا

خوانایی

فشرده سازی، آزاد کردن تنفس

منطقه امن

بریده نشدن

اقلام را از لبه داخل نگه دارید

خونریزی کنید

چاپ تمیز

این لبه را 3 میلی متر حمل می کند

اشتباهات رایج

  • چاپ متن به هوش مصنوعی: متن خراب و غیر قابل ویرایش. متن را در برنامه طراحی اضافه کنید.
  • بدون جا گذاشتن: طراحی تنگ و آماتور.
  • بدون سلسله مراتب: همه چیز به یک اندازه است. چشم نمی داند کجا برود.
  • فراموش کردن منطقه امن: عنصر مهم در زیر رابط یا برش گیر می کند.
  • Skipping bleed: لبه سفید و ضایعات در چاپ.

به طور خلاصه

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

وظیفه کاربردی

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

چک لیست

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