ساده، چشم‌نواز، ایزومتریک

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

از امین نجفی
از امین نجفی

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

از انواع سبک‌های طراحی آیکن سبک مورد علاقه‌ام ایزومتریک (Isometric) هست. ایزومتریک یک تکنیک نمایش اجسام به کمک فرمول‌های ساده ریاضی است. کافی است هر جسمی در راستای محور عمودی خود ۴۵° بچرخد و به اندازه tan30 (یا تقریبا ۳۵.۲۶°) به جلو مایل شود.

حالا اگه بخوایم توی Illustrator یک مکعب ایزومتریک بسازیم مراحل زیر رو باید بریم:

از متد SSR میخوایم استفاده کنیم: scale, shear, rotate

یک مربع می‌کشیم، مربع رو از ارتفاع ۸۶.۰۶٪ کوتاه می‌کنیم (Scale)، مستطیل رو ۳۰درجه می‌کشیم (Shear)، و در نهایت ۳۰درجه می‌چرخانیم(Rotate):

مربع رو از ارتفاع ۸۶.۰۶٪ کوتاه می‌کنیم (Scale)
مربع رو از ارتفاع ۸۶.۰۶٪ کوتاه می‌کنیم (Scale)


مستطیل رو ۳۰درجه می‌کشیم (Shear)
مستطیل رو ۳۰درجه می‌کشیم (Shear)


 ۳۰درجه می‌چرخانیم(Rotate)
۳۰درجه می‌چرخانیم(Rotate)

برای ساختن وجه‌های دیگر مکعب از درجه‌های زیر استفاده می‌کنیم:

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

نمونه‌هایی از آیکن‌های ایزومتریک:

آموزش ساخت این ساختمان:
https://design.tutsplus.com/tutorials/create-a-detailed-isometric-building-in-adobe-illustrator--vector-6041
آموزش ساخت این ساختمان: https://design.tutsplus.com/tutorials/create-a-detailed-isometric-building-in-adobe-illustrator--vector-6041



طراحی ایزومتریک نه فقط در آیکن بلکه در تصویرسازی نیز استفاده میشه

منتظر خوندن نظرات یا دیدن کارهای ایزومتریک شما دوستان عزیز هستم :)