با سلام به دوستان خوبم.امروز با مقاله ای دیگر از دنیای طراحی در خدمتتون هستیم.دراین مقاله در مورد افکت متن های بریده شده در طراحی ها صحبت خواهیم کرد.افکت های جذاب باعث می شوند عناصر طوری به نظر برسند که گویا با یک ابزار دقیق برش داده شده اند و می توانند علاقه های بصری را به انواع لوگو، سرفصل ها و بلوک های متن ساده اضافه کنند. افکت های متن بریده شده می توانند از خیلی ظریف (مانند یک بیت کوچک از یک متن که از بین می رود) تا قسمت های اصلی کلمات که از بین رفته اند کاملا متفاوت باشند.
چیزی که در هنگام استفاده از متن برشده باید در ذهن داشته باشید این است که کلمات همیشه باید قابل خواندن باشند .وگرنه چه هدفی وجود دارد؟ و شما باید توجه دقیقی داشته باشید به طوری که ترکیبی از متن های ناخواسته و یا کلمات به دلیل برش ظاهر نشوند. در اینجا یک نگاهی به نحوه کار آن برای شما با نمونه هایی از طرح هایی انجام می دهیم که بتوانید به خوبی کارکنید.
Traditional” Slice” (برش مرسوم)
متن بریده شده شامل یک نگاه تقریبا لایه ای با یک عنصر متنی مانند یک کلمه یا گروه کوچکی از کلمات است که بر روی دو لایه برش داده شده و همپوشانی دارد. این اثر عمق را ایجاد می کند و می تواند مجموعه ای ساده از شخصیت های بصری جالب را ایجاد کند.
Resoluut از این اثر در ترکیب با یک آمپرسند استفاده می کند تا کاربران را در مرکز طراحی قرار دهد. متن بریده شده، پیامی را که در پایین آن قرار دارد، نشان می دهد که شرکت بر روی “digital design with attitude” تمرکز می کند، زیرا متن بریده شده یک بورد مشخصی را که مستقیما بر روی آن قرار می گیرد، انتقال می دهد.
این تکنیک بهتر است زمانی که مجموعه کاراکترها ساده هستند (فکر کنم ابتدا فونتهای sans serif) و کلمات یک نقطه شکستن طبیعی را دارند که بتوان آنها را برش داد و خوانایی را حفظ کرد.
برش متن و عکس ها
افکت لایه بندی به یک ترکیب از فونت وفاصله محدود نمی شود. طراحان همچنین می توانند از تصاویر و متن برای ایجاد یک اثر برش سرد نیز استفاده کنند، مانند مثال بالا از Shift.
ترکیب تکه تکه ی کج شده از یک تصویرتنها (همچنین قطعه قطعه) با حروف گذاری کاربر را به طراحی می کشد.
در حالی که برخی از کلمات کمی سخت تر برای تشخیص در ابتدا هستند، زمان کافی بین انیمیشن ها برای کشف کردن پیام با سهولت وجود دارد.
این گرایش برای نمایندگی های دیجیتال و سایت های نمونه کارها به عنوان راهی برای نشان دادن نگاه مدرن و ملموس به خوبی برجسته کردن خلاقیت های خلاقانه به خوبی کار می کند.
برش با انیمیشن
افکت متن برش داده شده را می توان با عناصر طراحی مرسوم دیگر ، ترکیب کرد. ترکیب کردن برش با انیمیشن می تواند یک عنصر بصری خوب ایجاد کند.
در مثال بالا، هر یک از عناصر متن بریده شده در واقع منو است. کاربران می توانند بر روی هر یک از عنصر کلیک کنند، اما آنچه که موثرتر است عمل hover است، که متن بریده شده را با هم برگرداند.
برای لوگوها
متن بریده شده می تواند یک راه سرگرم کننده برای ایجاد یک لوگو باشد، در حالی که تنها عناصری که شما با آن کار دارید متن است. یک لوگو سرگرم کننده می تواند بیش از یک علامت برای شناخت نام تجاری باشد. همچنین می تواند یک عنصر بسیار گرافیکی برای استفاده های متعدد مانند طراحی پیراهن بالا باشد.
هنگام کار با متن بریده شده، به دنبال یک شکل و شیب طبیعی برای برش دادن باشید، به طوری که با ظاهرجالب سهولت خواندن حفظ شود.
به روش برش ایجاد فضای سفید توجه کنید. طراحی فوق با استفاده از یک تکه گسترده از اطلاعات اضافی در داخل آن است. استفاده معمول از برش اغلب یک خط نازک است، اما رویکردها (همانطور که می توانید از نمونه های این پست ببینید) می تواند بسیار متفاوت باشد.
ایجاد تعامل
به کاربران اجازه دهید متن خودشان را با یک متن فعال و ترکیب براش مانند مثال بالا برش دهند. در حالی که متن دقیقا برای خود قطعه نمیشود،افکت در فرایند هنری ایجاد می شود.
هر گونه ابزارهایی که به کاربران امکان تغییر دادن طراحی را می دهد، ممکن است به علت مولفه های تعاملی، زمان بیشتری را در سایت ایجاد کند.
شوک های عمودی برش داده شده
در حالیکه اکثر طراحان به نظر میرسد از این روند به همان شیوه با یک برش افقی بیشتر استفاده میکنند، برشها میتوانند عمودی باشند.
برش های عمودی تمایل به کوتاه شدن دارند زیرا هر برش بخشی از یک متن واحد است. ترفند برای کار کردن برش های عمودی، سازگاری است. راه برداشتن آنها باید به یکدیگر تقلید شود تا حروف به نظر برسند. این روش برش باید شبیه به تقریبا قسمت مورد نظر از نوع فونت باشد. (در مثال فوق، این برش ها از حروف به حروف یکسان است و حروف یکسان برش های یکسان دارند.)
ایجاد جریان بصری
یک نتیجه از متن قطعه شده – قبلا تعیین شده یا نه – این است که جریان بصری ایجاد می کند. چشم کاربران چشم انداز مسیر و فضای سفید اطراف آن را دنبال می کند.
نگاهی به لوگو در مثال بالا. با برش هایی در R و O در Robocath (به علاوه بخش غیرقطعی گسسته از C)، جهت کشش در سراسر صفحه از سمت چپ به راست وجود دارد.
کشش قوی تر از چیزی است که شما با خواندن عادی مرتبط شوید (همچنین چپ به راست)، زیرا برش ها شما را از طریق کاراکترها به سرعت فشار می دهد. این تقسیمها تقریبا یک حس فوریت خواندن را ایجاد می کنند تا شما در سراسر حروف و در تصویر اصلی روی صفحه قرار دهید.
اضافه کردن تاکید به حروف گذاری
در نهایت – و احتمالا بسیار قانع کننده – دلایل استفاده از روند طراحی متن قطعه شده این است که تاکید بر حروف یا پیام اضافه شود. تقسیم بندی می تواند تقریبا هر تغییری از حروف باشد که در طراحی یک قسمت از یک شخصیت وجود دارد.
MJND، در بالا، بیشتر از یک اثر لایه بندی برای مخفی کردن، و یا فرم های تکه ای استفاده می کند تا به تاکید بر پیام کمک کند. این تصویر به راحتی می تواند تمام ارتباطات را در اینجا انجام دهد، اما این اثر کمک می کند تا کاربر را به پیام اصلی بازگرداند. این ترکیب ساده، موثر و بصری جالب است.
منابع یادگیری
چند راه برای ایجاد جلوه های متنی بریده شده برای پروژه ها وجود دارد، بسته به دقیقا همان چیزی که می خواهید ایجاد کنید. گزینه های محبوب تر عبارتند از ایجاد اثر متنی با استفاده از نرم افزار ویرایش یا استفاده از CSS برای ایجاد اثر برای پروژه های وب.
نتیجه گیری
استفاده از روند نوشتاری قطعه سازی شده می تواند کمی روی حیله و تزویر باشد چرا که شامل تغییر عناصر نوع می شود. مهم است که خوانایی از دست نرفته باشد و یا شما می توانید از کاربران با این اثر از دست بدهند.
جلوه های متن بریده شده می تواند یک راه حل سرگرم کننده باشد و به ایجاد یک نقطه کانونی کمک کند. اضافه کردن یک حس انیمیشن می تواند آن را به سطح بعدی نیز برساند.
0 دیدگاه
1 تیر 1397
آخرین دیدگاه های شما