طرح نئومورفیسم در المنتور

طرح نئومورفیسم در المنتور، یکی از طراحی هایی که امروزه توی طراحی ها خیلی استفاده میشه، طراحی به سبک نئومورفیسم هست. طراحی نئومورفیسم یکی از سبک های طراحی امروزیه که با ترکیب  استایل طراحی  اسکئومورفیسم (skeuomorphism) و استایل طراحی متریال دیزاین سبک خاصی از طراحی رو به وجود آورده.

توی این آموزش از کنترل وب میخوایم طرح نئومورفیسم در المنتور رو به راحتی فقط به کمک المان های خود صفحه ساز المنتور و به کمک چند خط کد سی اس اس(CSS) ساده و بدون استفاده از هیچ گونه افزونه جانبی طراحی کنیم و توی طراحی های خودمون استفاده کنیم تا بتونیم با استفاده از طرح نئومورفیسم در المنتور طراحی های خودمون رو جذاب تر کنیم.

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

یادگیری طرح نئومورفیسم در المنتور با یک مثال!

برای اینکه بتونیم مثالی از استفاده از این طرح جذاب رو با هم پیاده سازی کنیم، ما از طریق المان ” آیکون شبکه های اجتماعی ” و تبدیل اون به یک طرح نئومورفیسم جذاب، طرح نئومورفیسم در المنتور رو ایجاد میکنیم.

طرح نئومورفیسم در المنتور

 

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

Screenshot 72

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

برای اینکار در قدم بعدی باید از طریق بخش استایل  المان، رنگ پس زمینه المان رو با رنگ پس زمینه یکی کنیم.برای اینکار در قسمت ” رنگ “، رنگ رو روی ” سفارشی ” تنظیم میکنیم.

Screenshot 73

 

 

برای اینکه رنگ رو تغییر بدیم، گزینه “رنگ اولیه”  رو انتخاب کنیم و از طریق این قسمت رنگ دلخواهمون رو به المان میدیم. برای اینکه پس زمینه به رنگ سفید بود، در این قسمت رنگ رو روی رنگ سفید تنظیم می کنیم.

 

Screenshot 74

 

در قدم بعدی برای اینکه بتونیم رنگ هر کدوم از آیکون های شبکه های اجتماعی رو تغییر بدیم کافیه که از طریق قسمت “رنگ ثانویه”، رنگ رو روی رنگ دلخواهی که مورد نظرمون هست تنظیم کنیم.

 

Screenshot 75

 

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

برای اینکار کافیه که برای اینکه المان موردنظرمون به سبک نئومورفیسم طراحی بشه، به تب ” پیشرفته ” بریم و از طریق قسمت “custom css” یا “سی اس اس سفارشی” کد های سی اس اسی که در ادامه قرار میدیم رو توی این قسمت قرار بدین.

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

Screenshot 76

 

نکته ی مهمی دیگ ای که وجود داره اینه که برای اینکه از این کد های سی اس اس استفاده کنین، لازمه که رنگ موردنظر خودتون رو با توجه به پس زمینه ای که دارین در کد های سی اس اس تغییر بدین.

در کد هایی که در ادامه براتون قرار میدیم، رنگ طراحی ، روی رنگ سفید با کد رنگی fff# تنظیم شده. می تونین با تغییر این کد رنگی در کد های سی اس اس با کد رنگی مور نظر خودتون، طراحی رو سفارشی کنین و رنگ مورنظر خودتون رو ایجاد کنین.

امیدواریم که از این آموزش استفاده کرده باشین و بتونین طرحای خیلی جذابی رو به سبک نئومورفیسم طراحی کنین و طرحای خیلی باحال و متنوعی رو برای سایتتون ایجاد کنین D:

 

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 2 میانگین: 3]

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مقالات مرتبط